diff --git a/src/element.js b/src/element.js index 597fb57..8010480 100644 --- a/src/element.js +++ b/src/element.js @@ -561,42 +561,35 @@ elproto.clone = function () { clone.insertAfter(this) return clone } -/*\ - * SnapElement.toDefs - [ method ] - ** - * Moves element to the shared `` area - ** - = (SnapElement) the element - \*/ +/** + * Moves element to the shared `` area + ** + */ elproto.toDefs = function () { let defs = getSomeDefs(this) defs.appendChild(this.node) return this } -/*\ - * SnapElement.toPattern - [ method ] - ** - * Creates a `` element from the current element - ** - * To create a pattern you have to specify the pattern rect: - - x (string|number) - - y (string|number) - - width (string|number) - - height (string|number) - = (SnapElement) the `` element - * You can use pattern later on as an argument for `fill` attribute: - | let p = paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({ - | fill: "none", - | stroke: "#bada55", - | strokeWidth: 5 - | }).pattern(0, 0, 10, 10), - | c = paper.circle(200, 200, 100); - | c.attr({ - | fill: p - | }); - \*/ +/** + * Creates a `` element from the current element + ** + * To create a pattern you have to specify the pattern rect: + - x (string|number) + - y (string|number) + - width (string|number) + - height (string|number) + = (SnapElement) the `` element + * You can use pattern later on as an argument for `fill` attribute: + let p = paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({ + fill: "none", + stroke: "#bada55", + strokeWidth: 5 + }).pattern(0, 0, 10, 10), + c = paper.circle(200, 200, 100); + c.attr({ + fill: p + }); +*/ elproto.pattern = elproto.toPattern = function (x, y, width, height) { let p = make('pattern', getSomeDefs(this)) if (x == null) { @@ -620,25 +613,19 @@ elproto.pattern = elproto.toPattern = function (x, y, width, height) { p.node.appendChild(this.node) return p } -// SIERRA SnapElement.marker(): clarify what a reference point is. E.g., helps you offset the object from its edge such as when centering it over a path. -// SIERRA SnapElement.marker(): I suggest the method should accept default reference point values. Perhaps centered with (refX = width/2) and (refY = height/2)? Also, couldn't it assume the element's current _width_ and _height_? And please specify what _x_ and _y_ mean: offsets? If so, from where? Couldn't they also be assigned default values? -/*\ - * SnapElement.marker - [ method ] - ** - * Creates a `` element from the current element - ** - * To create a marker you have to specify the bounding rect and reference point: - - x (number) - - y (number) - - width (number) - - height (number) - - refX (number) - - refY (number) - = (SnapElement) the `` element - * You can specify the marker later as an argument for `marker-start`, `marker-end`, `marker-mid`, and `marker` attributes. The `marker` attribute places the marker at every point along the path, and `marker-mid` places them at every point except the start and end. - \*/ -// TODO add usage for markers + +/** + * Creates a `` element from the current element + ** + * To create a marker you have to specify the bounding rect and reference point: + * @param x (number) + * @param y (number) + * @param width (number) + * @param height (number) + * @param refX (number) + * @param refY (number) + * You can specify the marker later as an argument for `marker-start`, `marker-end`, `marker-mid`, and `marker` attributes. The `marker` attribute places the marker at every point along the path, and `marker-mid` places them at every point except the start and end. + */ elproto.marker = function (x, y, width, height, refX, refY) { let p = make('marker', getSomeDefs(this)) if (x == null) { diff --git a/src/lib/constants.js b/src/lib/constants.js index afa03c6..4b8a077 100644 --- a/src/lib/constants.js +++ b/src/lib/constants.js @@ -8,6 +8,9 @@ export const doc = document export const win = window export const xlink = 'http://www.w3.org/1999/xlink' export const xmlns = 'http://www.w3.org/2000/svg' +export const xhtmlns = 'http://www.w3.org/1999/xhtml' + +export const HTML_TAGS = ['div', 'span', 'p'] export const CSS_ATTR = { 'alignment-baseline': 1, diff --git a/src/matrix.js b/src/matrix.js index c8d7205..0b97c19 100644 --- a/src/matrix.js +++ b/src/matrix.js @@ -4,7 +4,6 @@ * @date 2024/03/07 14:41:43 */ -import { is } from './utils.js' import { rad, deg } from './lib/math.js' function norm(a) { diff --git a/src/svg.js b/src/svg.js index eeb759b..322bc0d 100644 --- a/src/svg.js +++ b/src/svg.js @@ -644,7 +644,7 @@ export class Paper { dom = width } if (dom) { - let doc = dom.ownerDocument + h(dom, { xmlns }) res = new SnapElement(dom) desc = dom.querySelector('desc') defs = dom.querySelector('defs') @@ -779,6 +779,10 @@ export class Paper { text(x = 0, y = 0, text = '') { return this.el('text', { x, y }, text) } + + autoText(x = 0, y = 0, text = '') { + return this.el('foreignObject', { x, y, width: 200, height: 40 }, text) + } /*** * Draws a line ** @@ -1071,7 +1075,7 @@ export class Paper { res f.appendChild(d) d.appendChild(svg) - h(svg, { xmlns: 'http://www.w3.org/2000/svg' }) + h(svg, { xmlns }) res = d.innerHTML return res } diff --git a/src/utils.js b/src/utils.js index 27d96ee..035ae8a 100644 --- a/src/utils.js +++ b/src/utils.js @@ -4,7 +4,7 @@ * @date 2024/03/06 09:55:31 */ -import { xlink, xmlns, doc, win } from './lib/constants.js' +import { xlink, xmlns, xhtmlns, HTML_TAGS, doc, win } from './lib/constants.js' export function uuid(prefix = '') { return prefix + Math.random().toString(16).slice(-8) @@ -80,7 +80,7 @@ export function $(el, attr) { export function h(el, props = null, children) { if (typeof el === 'string') { - el = doc.createElementNS(xmlns, el) + el = doc.createElementNS(HTML_TAGS.includes(el) ? xhtmlns : xmlns, el) } if (props) { @@ -103,10 +103,15 @@ export function h(el, props = null, children) { if (children) { if (Array.isArray(children)) { - let f = doc.createDocumentFragment() - for (let i = -1, it; (it = children[++i]); ) { - f.appendChild(h('tspan', { dy: i * 16 }, it)) - } + children = children.join('') + } + + if (el.tagName.toLowerCase() === 'foreignobject') { + let f = h('div', { xmlns: 'http://www.w3.org/1999/xhtml' }) + let p = h('p', null, children) + f.appendChild(p) + + h(el, { xmlns }) el.appendChild(f) } else { el.appendChild(doc.createTextNode(children))