update

src/element.js

@@ -561,23 +561,16 @@ elproto.clone = function () {
   clone.insertAfter(this)
   return clone
 }
-/*\
+/**
-     * SnapElement.toDefs
-     [ method ]
-     **
  * Moves element to the shared `<defs>` area
  **
-     = (SnapElement) the element
+ */
-    \*/
 elproto.toDefs = function () {
   let defs = getSomeDefs(this)
   defs.appendChild(this.node)
   return this
 }
-/*\
+/**
-     * SnapElement.toPattern
-     [ method ]
-     **
  * Creates a `<pattern>` element from the current element
  **
   * To create a pattern you have to specify the pattern rect:
@@ -587,16 +580,16 @@ elproto.toDefs = function () {
   - height (string|number)
   = (SnapElement) the `<pattern>` 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({
+  let p = paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
-     |         fill: "none",
+          fill: "none",
-     |         stroke: "#bada55",
+          stroke: "#bada55",
-     |         strokeWidth: 5
+          strokeWidth: 5
-     |     }).pattern(0, 0, 10, 10),
+      }).pattern(0, 0, 10, 10),
-     |     c = paper.circle(200, 200, 100);
+      c = paper.circle(200, 200, 100);
-     | c.attr({
+  c.attr({
-     |     fill: p
+      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 `<marker>` element from the current element
  **
  * To create a marker you have to specify the bounding rect and reference point:
-     - x (number)
+ * @param x (number)
-     - y (number)
+ * @param y (number)
-     - width (number)
+ * @param width (number)
-     - height (number)
+ * @param height (number)
-     - refX (number)
+ * @param refX (number)
-     - refY (number)
+ * @param refY (number)
-     = (SnapElement) the `<marker>` 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
 elproto.marker = function (x, y, width, height, refX, refY) {
   let p = make('marker', getSomeDefs(this))
   if (x == null) {

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,

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) {

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
   }

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()
+      children = children.join('')
-      for (let i = -1, it; (it = children[++i]); ) {
-        f.appendChild(h('tspan', { dy: i * 16 }, it))
     }
+
+    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))