Fragment, | Fragment, | ||||
Circle, | Circle, | ||||
Tspan, | Tspan, | ||||
create, | |||||
Text | |||||
create | |||||
} from '../../../src/main.js' | } from '../../../src/main.js' | ||||
import { getWindow } from '../../../src/utils/window.js' | import { getWindow } from '../../../src/utils/window.js' | ||||
import { svg, html } from '../../../src/modules/core/namespaces.js' | import { svg, html } from '../../../src/modules/core/namespaces.js' | ||||
}) | }) | ||||
}) | }) | ||||
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('xml()', () => { | ||||
describe('as setter', () => { | describe('as setter', () => { | ||||
it('returns itself', () => { | it('returns itself', () => { |
/* globals describe, expect, it, beforeEach, spyOn, jasmine, container */ | /* 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 | const { any, objectContaining } = jasmine | ||||
describe('Element.js', function () { | describe('Element.js', function () { | ||||
}) | }) | ||||
it('falls back to empty object when attribute is null', () => { | 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({}) | 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()', () => { | describe('center()', () => { | ||||
describe('writeDataToDom()', () => { | describe('writeDataToDom()', () => { | ||||
it('removes previously set data', () => { | 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() | 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', () => { | it('writes data from the dom property into the dom', () => { | ||||
element.dom = { foo: 'bar' } | element.dom = { foo: 'bar' } | ||||
element.writeDataToDom() | element.writeDataToDom() | ||||
expect(element.node.getAttribute('svgjs:data')).toBe( | |||||
expect(element.node.getAttribute('data-svgjs')).toBe( | |||||
JSON.stringify({ foo: 'bar' }) | JSON.stringify({ foo: 'bar' }) | ||||
) | ) | ||||
}) | }) | ||||
g.writeDataToDom() | g.writeDataToDom() | ||||
expect(spy).toHaveBeenCalled() | 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()', () => { | describe('x()', () => { |
/* globals describe, expect, it, jasmine, container */ | /* globals describe, expect, it, jasmine, container */ | ||||
import { Svg, SVG, Defs } from '../../../src/main.js' | 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' | import { getWindow } from '../../../src/utils/window.js' | ||||
const { any } = jasmine | const { any } = jasmine | ||||
expect(svg.attr('xmlns')).toBe(ns) | expect(svg.attr('xmlns')).toBe(ns) | ||||
expect(svg.attr('version')).toBe(1.1) | expect(svg.attr('version')).toBe(1.1) | ||||
expect(svg.attr('xmlns:xlink')).toBe(xlink) | expect(svg.attr('xmlns:xlink')).toBe(xlink) | ||||
expect(svg.attr('xmlns:svgjs')).toBe(svgjs) | |||||
}) | }) | ||||
}) | }) | ||||
expect(svg.attr('xmlns')).toBe(ns) | expect(svg.attr('xmlns')).toBe(ns) | ||||
expect(svg.attr('version')).toBe(1.1) | expect(svg.attr('version')).toBe(1.1) | ||||
expect(svg.attr('xmlns:xlink')).toBe(xlink) | expect(svg.attr('xmlns:xlink')).toBe(xlink) | ||||
expect(svg.attr('xmlns:svgjs')).toBe(svgjs) | |||||
}) | }) | ||||
}) | }) | ||||
// create circular reference | // create circular reference | ||||
this.node.instance = this | 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) | // 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')) ?? | |||||
{} | |||||
) | |||||
} | } | ||||
} | } | ||||
register, | register, | ||||
wrapWithAttrCheck | wrapWithAttrCheck | ||||
} from '../utils/adopter.js' | } 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 { registerMethods } from '../utils/methods.js' | ||||
import Container from './Container.js' | import Container from './Container.js' | ||||
import Defs from './Defs.js' | import Defs from './Defs.js' | ||||
// Add namespaces | // Add namespaces | ||||
namespace() { | namespace() { | ||||
if (!this.isRoot()) return this.root().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() { | removeNamespace() { |
export const html = 'http://www.w3.org/1999/xhtml' | export const html = 'http://www.w3.org/1999/xhtml' | ||||
export const xmlns = 'http://www.w3.org/2000/xmlns/' | export const xmlns = 'http://www.w3.org/2000/xmlns/' | ||||
export const xlink = 'http://www.w3.org/1999/xlink' | export const xlink = 'http://www.w3.org/1999/xlink' | ||||
export const svgjs = 'http://svgjs.dev/svgjs' |
} | } | ||||
if (Object.keys(cloned).length) { | 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 { | } else { | ||||
element.node.removeAttribute('data-svgjs') | |||||
element.node.removeAttribute('svgjs:data') | element.node.removeAttribute('svgjs:data') | ||||
} | } | ||||
} | } |