From ca8ac554bfafe6b4d7985fe3130ff3dffa6029ca Mon Sep 17 00:00:00 2001 From: =?utf8?q?Ulrich-Matthias=20Sch=C3=A4fer?= Date: Sun, 3 Sep 2023 09:49:01 +0200 Subject: [PATCH] doscontinue use of svgjs:data in favor of data-svg --- spec/spec/elements/Dom.js | 22 +--------------------- spec/spec/elements/Element.js | 25 ++++++++++++++++++++----- spec/spec/elements/Svg.js | 8 +------- src/elements/Element.js | 8 ++++++-- src/elements/Svg.js | 10 ++++++---- src/modules/core/namespaces.js | 1 - src/utils/utils.js | 3 ++- 7 files changed, 36 insertions(+), 41 deletions(-) diff --git a/spec/spec/elements/Dom.js b/spec/spec/elements/Dom.js index 11ce9e0..00879d0 100644 --- a/spec/spec/elements/Dom.js +++ b/spec/spec/elements/Dom.js @@ -10,8 +10,7 @@ import { Fragment, Circle, Tspan, - create, - Text + create } from '../../../src/main.js' import { getWindow } from '../../../src/utils/window.js' import { svg, html } from '../../../src/modules/core/namespaces.js' @@ -658,25 +657,6 @@ describe('Dom.js', function () { }) }) - describe('writeDataToDom()', () => { - it('writes the data to the dom', () => { - const node = new Rect() - node.setData({ foo: 'bar' }) - node.writeDataToDom() - expect(node.node.getAttribute('svgjs:data')).toBe('{"foo":"bar"}') - }) - - it('filters out default data', () => { - const node1 = new Text() - const node2 = new Text() - node2.dom.foo = 'bar' - node1.writeDataToDom() - node2.writeDataToDom() - expect(node1.node.getAttribute('svgjs:data')).toBe(null) - expect(node2.node.getAttribute('svgjs:data')).toBe('{"foo":"bar"}') - }) - }) - describe('xml()', () => { describe('as setter', () => { it('returns itself', () => { diff --git a/spec/spec/elements/Element.js b/spec/spec/elements/Element.js index c89f7aa..93cee3b 100644 --- a/spec/spec/elements/Element.js +++ b/spec/spec/elements/Element.js @@ -1,6 +1,6 @@ /* globals describe, expect, it, beforeEach, spyOn, jasmine, container */ -import { Element, create, Rect, G, SVG } from '../../../src/main.js' +import { Element, create, Rect, G, SVG, Text } from '../../../src/main.js' const { any, objectContaining } = jasmine describe('Element.js', function () { @@ -34,9 +34,14 @@ describe('Element.js', function () { }) it('falls back to empty object when attribute is null', () => { - element.node.setAttribute('svgjs:data', 'null') + element.node.setAttribute('data-svg', 'null') expect(new Element(element.node).dom).toEqual({}) }) + + it('uses old svgjs:data attribute if present', () => { + element.node.setAttribute('svgjs:data', '{"foo":"bar"}') + expect(new Element(element.node).dom).toEqual({ foo: 'bar' }) + }) }) describe('center()', () => { @@ -265,15 +270,15 @@ describe('Element.js', function () { describe('writeDataToDom()', () => { it('removes previously set data', () => { - element.node.setAttribute('svgjs:data', JSON.stringify({ foo: 'bar' })) + element.node.setAttribute('data-svgjs', JSON.stringify({ foo: 'bar' })) element.writeDataToDom() - expect(element.node.getAttribute('svgjs:data')).toBe(null) + expect(element.node.getAttribute('data-svgjs')).toBe(null) }) it('writes data from the dom property into the dom', () => { element.dom = { foo: 'bar' } element.writeDataToDom() - expect(element.node.getAttribute('svgjs:data')).toBe( + expect(element.node.getAttribute('data-svgjs')).toBe( JSON.stringify({ foo: 'bar' }) ) }) @@ -285,6 +290,16 @@ describe('Element.js', function () { g.writeDataToDom() expect(spy).toHaveBeenCalled() }) + + it('filters out default data', () => { + const node1 = new Text() + const node2 = new Text() + node2.dom.foo = 'bar' + node1.writeDataToDom() + node2.writeDataToDom() + expect(node1.node.getAttribute('data-svgjs')).toBe(null) + expect(node2.node.getAttribute('data-svgjs')).toBe('{"foo":"bar"}') + }) }) describe('x()', () => { diff --git a/spec/spec/elements/Svg.js b/spec/spec/elements/Svg.js index 6da7729..ebe3b52 100644 --- a/spec/spec/elements/Svg.js +++ b/spec/spec/elements/Svg.js @@ -1,11 +1,7 @@ /* globals describe, expect, it, jasmine, container */ import { Svg, SVG, Defs } from '../../../src/main.js' -import { - svg as ns, - xlink, - svgjs -} from '../../../src/modules/core/namespaces.js' +import { svg as ns, xlink } from '../../../src/modules/core/namespaces.js' import { getWindow } from '../../../src/utils/window.js' const { any } = jasmine @@ -26,7 +22,6 @@ describe('Svg.js', () => { expect(svg.attr('xmlns')).toBe(ns) expect(svg.attr('version')).toBe(1.1) expect(svg.attr('xmlns:xlink')).toBe(xlink) - expect(svg.attr('xmlns:svgjs')).toBe(svgjs) }) }) @@ -71,7 +66,6 @@ describe('Svg.js', () => { expect(svg.attr('xmlns')).toBe(ns) expect(svg.attr('version')).toBe(1.1) expect(svg.attr('xmlns:xlink')).toBe(xlink) - expect(svg.attr('xmlns:svgjs')).toBe(svgjs) }) }) diff --git a/src/elements/Element.js b/src/elements/Element.js index 7a563d6..e3a4211 100644 --- a/src/elements/Element.js +++ b/src/elements/Element.js @@ -25,9 +25,13 @@ export default class Element extends Dom { // create circular reference this.node.instance = this - if (node.hasAttribute('svgjs:data')) { + if (node.hasAttribute('data-svgjs') || node.hasAttribute('svgjs:data')) { // pull svgjs data from the dom (getAttributeNS doesn't work in html5) - this.setData(JSON.parse(node.getAttribute('svgjs:data')) || {}) + this.setData( + JSON.parse(node.getAttribute('data-svgjs')) ?? + JSON.parse(node.getAttribute('svgjs:data')) ?? + {} + ) } } diff --git a/src/elements/Svg.js b/src/elements/Svg.js index 7b36daa..40d50c9 100644 --- a/src/elements/Svg.js +++ b/src/elements/Svg.js @@ -4,7 +4,7 @@ import { register, wrapWithAttrCheck } from '../utils/adopter.js' -import { svg, svgjs, xlink, xmlns } from '../modules/core/namespaces.js' +import { svg, xlink, xmlns } from '../modules/core/namespaces.js' import { registerMethods } from '../utils/methods.js' import Container from './Container.js' import Defs from './Defs.js' @@ -34,9 +34,11 @@ export default class Svg extends Container { // Add namespaces namespace() { if (!this.isRoot()) return this.root().namespace() - return this.attr({ xmlns: svg, version: '1.1' }) - .attr('xmlns:xlink', xlink, xmlns) - .attr('xmlns:svgjs', svgjs, xmlns) + return this.attr({ xmlns: svg, version: '1.1' }).attr( + 'xmlns:xlink', + xlink, + xmlns + ) } removeNamespace() { diff --git a/src/modules/core/namespaces.js b/src/modules/core/namespaces.js index 778d402..544efa2 100644 --- a/src/modules/core/namespaces.js +++ b/src/modules/core/namespaces.js @@ -3,4 +3,3 @@ export const svg = 'http://www.w3.org/2000/svg' export const html = 'http://www.w3.org/1999/xhtml' export const xmlns = 'http://www.w3.org/2000/xmlns/' export const xlink = 'http://www.w3.org/1999/xlink' -export const svgjs = 'http://svgjs.dev/svgjs' diff --git a/src/utils/utils.js b/src/utils/utils.js index 2438431..90ef548 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -135,8 +135,9 @@ export const writeDataToDom = (element, data, defaults = {}) => { } if (Object.keys(cloned).length) { - element.node.setAttribute('svgjs:data', JSON.stringify(cloned)) // see #428 + element.node.setAttribute('data-svgjs', JSON.stringify(cloned)) // see #428 } else { + element.node.removeAttribute('data-svgjs') element.node.removeAttribute('svgjs:data') } } -- 2.39.5