Fragment, | Fragment, | ||||
Circle, | Circle, | ||||
Tspan, | Tspan, | ||||
create | |||||
create, | |||||
Text | |||||
} 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()', () => { | |||||
// // not really testable | |||||
// }) | |||||
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', () => { |
describe('parents()', () => { | describe('parents()', () => { | ||||
it('returns array of parents until the passed element or root svg', () => { | it('returns array of parents until the passed element or root svg', () => { | ||||
const canvas = SVG().addTo(container) | const canvas = SVG().addTo(container) | ||||
const groupA = canvas.group().addClass('test') | |||||
const _groupA = canvas.group().addClass('test') | |||||
const group1 = canvas.group().addClass('test') | const group1 = canvas.group().addClass('test') | ||||
const group2 = group1.group() | const group2 = group1.group() | ||||
const group3 = group2.group() | const group3 = group2.group() | ||||
it('returns array of parents until the closest matching parent', () => { | it('returns array of parents until the closest matching parent', () => { | ||||
const canvas = SVG().addTo(container) | const canvas = SVG().addTo(container) | ||||
const groupA = canvas.group().addClass('test') | |||||
const _groupA = canvas.group().addClass('test') | |||||
const group1 = canvas.group().addClass('test') | const group1 = canvas.group().addClass('test') | ||||
const group2 = group1.group().addClass('test').addClass('foo') | const group2 = group1.group().addClass('test').addClass('foo') | ||||
const group3 = group2.group().addClass('foo') | const group3 = group2.group().addClass('foo') |
SVG, | SVG, | ||||
G, | G, | ||||
Path, | Path, | ||||
TextPath | |||||
TextPath, | |||||
Svg | |||||
} from '../../../src/main.js' | } from '../../../src/main.js' | ||||
const { any } = jasmine | const { any } = jasmine | ||||
it('sets passed attributes on the element', () => { | it('sets passed attributes on the element', () => { | ||||
expect(new Text({ id: 'foo' }).id()).toBe('foo') | expect(new Text({ id: 'foo' }).id()).toBe('foo') | ||||
}) | }) | ||||
it('recovers leading data from dom', () => { | |||||
const svg = new Svg().namespace() | |||||
svg.text('').leading(3) | |||||
const newSvg = SVG(svg.svg()) | |||||
expect(newSvg.findOne('text').leading().valueOf()).toBe(3) | |||||
}) | |||||
}) | }) | ||||
describe('text()', () => { | describe('text()', () => { |
} from '../utils/adopter.js' | } from '../utils/adopter.js' | ||||
import { globals } from '../utils/window.js' | import { globals } from '../utils/window.js' | ||||
import { point } from '../types/Point.js' | import { point } from '../types/Point.js' | ||||
import { proportionalSize } from '../utils/utils.js' | |||||
import { proportionalSize, writeDataToDom } from '../utils/utils.js' | |||||
import { reference } from '../modules/core/regex.js' | import { reference } from '../modules/core/regex.js' | ||||
import Dom from './Dom.js' | import Dom from './Dom.js' | ||||
import List from '../types/List.js' | import List from '../types/List.js' | ||||
// write svgjs data to the dom | // write svgjs data to the dom | ||||
writeDataToDom() { | writeDataToDom() { | ||||
// remove previously set data | |||||
this.node.removeAttribute('svgjs:data') | |||||
if (Object.keys(this.dom).length) { | |||||
this.node.setAttribute('svgjs:data', JSON.stringify(this.dom)) // see #428 | |||||
} | |||||
writeDataToDom(this, this.dom) | |||||
return super.writeDataToDom() | return super.writeDataToDom() | ||||
} | } | ||||
import Shape from './Shape.js' | import Shape from './Shape.js' | ||||
import { globals } from '../utils/window.js' | import { globals } from '../utils/window.js' | ||||
import * as textable from '../modules/core/textable.js' | import * as textable from '../modules/core/textable.js' | ||||
import { isDescriptive } from '../utils/utils.js' | |||||
import { isDescriptive, writeDataToDom } from '../utils/utils.js' | |||||
export default class Text extends Shape { | export default class Text extends Shape { | ||||
// Initialize node | // Initialize node | ||||
constructor(node, attrs = node) { | constructor(node, attrs = node) { | ||||
super(nodeOrNew('text', node), attrs) | super(nodeOrNew('text', node), attrs) | ||||
this.dom.leading = new SVGNumber(1.3) // store leading value for rebuilding | |||||
this.dom.leading = this.dom.leading ?? new SVGNumber(1.3) // store leading value for rebuilding | |||||
this._rebuild = true // enable automatic updating of dy values | this._rebuild = true // enable automatic updating of dy values | ||||
this._build = false // disable build mode for adding multiple lines | this._build = false // disable build mode for adding multiple lines | ||||
} | } | ||||
return this | return this | ||||
} | } | ||||
writeDataToDom() { | |||||
writeDataToDom(this, this.dom, { leading: 1.3 }) | |||||
return this | |||||
} | |||||
// Set the text content | // Set the text content | ||||
text(text) { | text(text) { | ||||
// act as getter | // act as getter |
const descriptiveElements = new Set(['desc', 'metadata', 'title']) | const descriptiveElements = new Set(['desc', 'metadata', 'title']) | ||||
export const isDescriptive = (element) => | export const isDescriptive = (element) => | ||||
descriptiveElements.has(element.nodeName) | descriptiveElements.has(element.nodeName) | ||||
export const writeDataToDom = (element, data, defaults = {}) => { | |||||
const cloned = { ...data } | |||||
for (const key in cloned) { | |||||
if (cloned[key].valueOf() === defaults[key]) { | |||||
delete cloned[key] | |||||
} | |||||
} | |||||
if (Object.keys(cloned).length) { | |||||
element.node.setAttribute('svgjs:data', JSON.stringify(cloned)) // see #428 | |||||
} else { | |||||
element.node.removeAttribute('svgjs:data') | |||||
} | |||||
} |