@phin-tech/dottie 0.5.4 → 0.6.1

package/PARITY.md

@@ -22,6 +22,8 @@ fixture, so the gap is visible rather than silent.
 | Pages | Supported | [edge/themes](../fixtures/edge/themes.dottie) | `page` attribute or option: name or number |
 | Connectors: straight, curved, elbow | Supported | [edge/connectors](../fixtures/edge/connectors.dottie) | |
 | Ports and edge-following, rotated shapes, free ends | Supported | [edge/connectors](../fixtures/edge/connectors.dottie) | |
+| Connectors and labels on outlines (ADR 0001) | Supported | [edge/extensions](../fixtures/edge/extensions.dottie) | Edge-following meets a `.path`'s actual outline, not its box (ray against 16-step flattened curves). Endpoints pinned with `portIndex` attach to the element's `ports`. A path's label goes in its `labelRect`. |
+| Extension shapes as stored (ADR 0001) | Supported | [edge/extensions](../fixtures/edge/extensions.dottie) | Drawn from the stored path with no extension installed. The `extension` field is kept as metadata and nothing runs. Parameters, commands and handles are Dottie-only. |
 | Arrowheads: arrow, triangle, dot, bar | Supported | [edge/connectors](../fixtures/edge/connectors.dottie) | |
 | Connector labels | Supported | [edge/connectors](../fixtures/edge/connectors.dottie) | Label boxes sized with CoreText's measurements. The player paints them on the page color, like the app; Dottie's flipbook export leaves them unpainted |
 | Keys and eases (linear, in, out, in-out, hold, spring, bounce, elastic) | Supported | [edge/timeline](../fixtures/edge/timeline.dottie), [edge/eases](../fixtures/edge/eases.dottie) | Unknown ease names play linear, with a warning |
@@ -43,6 +45,7 @@ fixture, so the gap is visible rather than silent.
 | Symbol parameters (`{{name}}` in a symbol's text, filled per copy) | Supported | [edge/params](../fixtures/edge/params.dottie) | Defaults, undeclared names left as written, values passed into nested copies, filled before text types out |
 | Copies that play when clicked | Supported | [edge/buttons](../fixtures/edge/buttons.dottie) | `<dottie-player>` only: the HTML export is drawn ahead of time and shows them at rest |
 | Clicks: play a scene, open a link, hover looks, keyboard | Supported | [edge/clicks](../fixtures/edge/clicks.dottie) | As the HTML export does; only http, https and mailto links are followed |
+| Links out of the drawing (`url`) | Supported | [edge/links](../fixtures/edge/links.dottie) | A web or mail `url` opens when clicked if there is no `click`, and SVG export wraps it in `<a>`; a link to another drawing does nothing on the web |
 | Links between shapes and pages | Partial | [edge/clicks](../fixtures/edge/clicks.dottie) | A link to a shape on another page shows that page; one on the same page does nothing. The HTML export holds one page, so it has neither |
 | Editing | Missing | | |
 | Ticking task boxes in notes | Missing | | Drawn, not clickable |

package/dist/compile.js

@@ -1,4 +1,4 @@
-/*! dottie.js 0.5.4 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.6.1 | Apache-2.0 | https://github.com/phin-tech/dottie */
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -33,6 +33,7 @@ var KNOWN_FIELDS = {
     "evenOdd",
     "rotation",
     "link",
+    "url",
     "anchor",
     "click",
     "hover",
@@ -41,12 +42,18 @@ var KNOWN_FIELDS = {
     "offset",
     "args",
     "image",
-    "reveal"
+    "reveal",
+    "ports",
+    "labelRect",
+    "extension"
   ],
   strokePoint: ["x", "y"],
   subpath: ["closed", "coords"],
   inlineImage: ["data", "format"],
-  endpoint: ["elementID", "port", "x", "y"],
+  endpoint: ["elementID", "port", "portIndex", "x", "y"],
+  extensionRef: ["id", "shape", "version", "params"],
+  normalizedPoint: ["x", "y"],
+  normalizedRect: ["x", "y", "width", "height"],
   connector: ["start", "end", "routing", "startHead", "endHead"],
   timeline: ["fps", "duration", "boil", "settle", "poster", "tracks", "camera", "markers"],
   track: ["element", "keys", "boil", "follow", "repeats", "march"],
@@ -129,9 +136,11 @@ var Reader = class {
   endpoint(v) {
     const e = isObj(v) ? v : {};
     const port = str(e.port);
+    const portIndex = num(e.portIndex);
     return {
       elementID: uuid(e.elementID) ?? null,
       port: port && ["top", "right", "bottom", "left"].includes(port) ? port : null,
+      portIndex: portIndex !== void 0 && Number.isInteger(portIndex) && portIndex >= 0 ? portIndex : null,
       x: num(e.x) ?? 0,
       y: num(e.y) ?? 0
     };
@@ -196,6 +205,7 @@ var Reader = class {
       evenOdd: bool(v.evenOdd) ?? null,
       rotation: num(v.rotation) ?? null,
       link: uuid(v.link) ?? null,
+      url: str(v.url) ?? null,
       anchor: str(v.anchor) ?? null,
       click: this.click(v.click),
       hover: this.hover(v.hover),
@@ -204,9 +214,36 @@ var Reader = class {
       offset: num(v.offset) ?? null,
       args: strings(v.args),
       image: this.image(v.image, images),
-      reveal: num(v.reveal) ?? null
+      reveal: num(v.reveal) ?? null,
+      ports: Array.isArray(v.ports) ? v.ports.map((p) => {
+        const o = isObj(p) ? p : {};
+        return { x: num(o.x) ?? 0, y: num(o.y) ?? 0 };
+      }) : null,
+      labelRect: this.labelRect(v.labelRect),
+      extension: this.extension(v.extension)
     };
   }
+  labelRect(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "normalizedRect");
+    return { x: num(v.x) ?? 0, y: num(v.y) ?? 0, width: num(v.width) ?? 0, height: num(v.height) ?? 0 };
+  }
+  extension(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "extensionRef");
+    const id = str(v.id), shape = str(v.shape), version = str(v.version);
+    if (id === void 0 || shape === void 0 || version === void 0) {
+      this.warn("Skipped an extension without an id, shape or version");
+      return null;
+    }
+    const params = {};
+    if (isObj(v.params)) {
+      for (const [k, p] of Object.entries(v.params)) {
+        if (typeof p === "number" || typeof p === "boolean" || typeof p === "string") params[k] = p;
+      }
+    }
+    return { id, shape, version, params };
+  }
   click(v) {
     if (!isObj(v)) return null;
     this.fields(v, "click");

package/dist/dottie-compile.mjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-/*! dottie.js 0.5.4 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.6.1 | Apache-2.0 | https://github.com/phin-tech/dottie */
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -38,6 +38,7 @@ var KNOWN_FIELDS = {
     "evenOdd",
     "rotation",
     "link",
+    "url",
     "anchor",
     "click",
     "hover",
@@ -46,12 +47,18 @@ var KNOWN_FIELDS = {
     "offset",
     "args",
     "image",
-    "reveal"
+    "reveal",
+    "ports",
+    "labelRect",
+    "extension"
   ],
   strokePoint: ["x", "y"],
   subpath: ["closed", "coords"],
   inlineImage: ["data", "format"],
-  endpoint: ["elementID", "port", "x", "y"],
+  endpoint: ["elementID", "port", "portIndex", "x", "y"],
+  extensionRef: ["id", "shape", "version", "params"],
+  normalizedPoint: ["x", "y"],
+  normalizedRect: ["x", "y", "width", "height"],
   connector: ["start", "end", "routing", "startHead", "endHead"],
   timeline: ["fps", "duration", "boil", "settle", "poster", "tracks", "camera", "markers"],
   track: ["element", "keys", "boil", "follow", "repeats", "march"],
@@ -134,9 +141,11 @@ var Reader = class {
   endpoint(v) {
     const e = isObj(v) ? v : {};
     const port = str(e.port);
+    const portIndex = num(e.portIndex);
     return {
       elementID: uuid(e.elementID) ?? null,
       port: port && ["top", "right", "bottom", "left"].includes(port) ? port : null,
+      portIndex: portIndex !== void 0 && Number.isInteger(portIndex) && portIndex >= 0 ? portIndex : null,
       x: num(e.x) ?? 0,
       y: num(e.y) ?? 0
     };
@@ -201,6 +210,7 @@ var Reader = class {
       evenOdd: bool(v.evenOdd) ?? null,
       rotation: num(v.rotation) ?? null,
       link: uuid(v.link) ?? null,
+      url: str(v.url) ?? null,
       anchor: str(v.anchor) ?? null,
       click: this.click(v.click),
       hover: this.hover(v.hover),
@@ -209,9 +219,36 @@ var Reader = class {
       offset: num(v.offset) ?? null,
       args: strings(v.args),
       image: this.image(v.image, images),
-      reveal: num(v.reveal) ?? null
+      reveal: num(v.reveal) ?? null,
+      ports: Array.isArray(v.ports) ? v.ports.map((p) => {
+        const o = isObj(p) ? p : {};
+        return { x: num(o.x) ?? 0, y: num(o.y) ?? 0 };
+      }) : null,
+      labelRect: this.labelRect(v.labelRect),
+      extension: this.extension(v.extension)
     };
   }
+  labelRect(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "normalizedRect");
+    return { x: num(v.x) ?? 0, y: num(v.y) ?? 0, width: num(v.width) ?? 0, height: num(v.height) ?? 0 };
+  }
+  extension(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "extensionRef");
+    const id = str(v.id), shape = str(v.shape), version = str(v.version);
+    if (id === void 0 || shape === void 0 || version === void 0) {
+      this.warn("Skipped an extension without an id, shape or version");
+      return null;
+    }
+    const params = {};
+    if (isObj(v.params)) {
+      for (const [k, p] of Object.entries(v.params)) {
+        if (typeof p === "number" || typeof p === "boolean" || typeof p === "string") params[k] = p;
+      }
+    }
+    return { id, shape, version, params };
+  }
   click(v) {
     if (!isObj(v)) return null;
     this.fields(v, "click");
@@ -491,7 +528,7 @@ function compile(source2, runtime, options2 = {}) {
 }
 
 // src/index.ts
-var VERSION = "0.5.4";
+var VERSION = "0.6.1";
 
 // src/cli.ts
 var usage = `dottie-compile ${VERSION}: a Dottie drawing as one script that plays it on any page.

package/dist/dottie-player.js

@@ -1,4 +1,4 @@
-/*! dottie.js 0.5.4 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.6.1 | Apache-2.0 | https://github.com/phin-tech/dottie */
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value2) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value: value2 }) : obj[key] = value2;
 var __export = (target, all) => {
@@ -56,6 +56,7 @@ __export(index_exports, {
   themeNamed: () => themeNamed,
   themes: () => themes,
   transientElements: () => transientElements,
+  webLink: () => webLink,
   withRoughness: () => withRoughness
 });
 
@@ -89,6 +90,7 @@ var KNOWN_FIELDS = {
     "evenOdd",
     "rotation",
     "link",
+    "url",
     "anchor",
     "click",
     "hover",
@@ -97,12 +99,18 @@ var KNOWN_FIELDS = {
     "offset",
     "args",
     "image",
-    "reveal"
+    "reveal",
+    "ports",
+    "labelRect",
+    "extension"
   ],
   strokePoint: ["x", "y"],
   subpath: ["closed", "coords"],
   inlineImage: ["data", "format"],
-  endpoint: ["elementID", "port", "x", "y"],
+  endpoint: ["elementID", "port", "portIndex", "x", "y"],
+  extensionRef: ["id", "shape", "version", "params"],
+  normalizedPoint: ["x", "y"],
+  normalizedRect: ["x", "y", "width", "height"],
   connector: ["start", "end", "routing", "startHead", "endHead"],
   timeline: ["fps", "duration", "boil", "settle", "poster", "tracks", "camera", "markers"],
   track: ["element", "keys", "boil", "follow", "repeats", "march"],
@@ -141,6 +149,9 @@ function allowedURL(url) {
   if (!/^(https?:\/\/|mailto:)/i.test(u) || [...u].length <= 7 || /[\u0000-\u001f\u007f-\u009f]/.test(u)) return null;
   return u;
 }
+function webLink(url) {
+  return url ? allowedURL(url) : null;
+}
 function rgba(v) {
   if (!isObj(v)) return void 0;
   const r = num(v.r), g = num(v.g), b = num(v.b);
@@ -187,9 +198,11 @@ var Reader = class {
   endpoint(v) {
     const e = isObj(v) ? v : {};
     const port = str(e.port);
+    const portIndex = num(e.portIndex);
     return {
       elementID: uuid(e.elementID) ?? null,
       port: port && ["top", "right", "bottom", "left"].includes(port) ? port : null,
+      portIndex: portIndex !== void 0 && Number.isInteger(portIndex) && portIndex >= 0 ? portIndex : null,
       x: num(e.x) ?? 0,
       y: num(e.y) ?? 0
     };
@@ -254,6 +267,7 @@ var Reader = class {
       evenOdd: bool(v.evenOdd) ?? null,
       rotation: num(v.rotation) ?? null,
       link: uuid(v.link) ?? null,
+      url: str(v.url) ?? null,
       anchor: str(v.anchor) ?? null,
       click: this.click(v.click),
       hover: this.hover(v.hover),
@@ -262,9 +276,36 @@ var Reader = class {
       offset: num(v.offset) ?? null,
       args: strings(v.args),
       image: this.image(v.image, images),
-      reveal: num(v.reveal) ?? null
+      reveal: num(v.reveal) ?? null,
+      ports: Array.isArray(v.ports) ? v.ports.map((p) => {
+        const o = isObj(p) ? p : {};
+        return { x: num(o.x) ?? 0, y: num(o.y) ?? 0 };
+      }) : null,
+      labelRect: this.labelRect(v.labelRect),
+      extension: this.extension(v.extension)
     };
   }
+  labelRect(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "normalizedRect");
+    return { x: num(v.x) ?? 0, y: num(v.y) ?? 0, width: num(v.width) ?? 0, height: num(v.height) ?? 0 };
+  }
+  extension(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "extensionRef");
+    const id = str(v.id), shape = str(v.shape), version = str(v.version);
+    if (id === void 0 || shape === void 0 || version === void 0) {
+      this.warn("Skipped an extension without an id, shape or version");
+      return null;
+    }
+    const params = {};
+    if (isObj(v.params)) {
+      for (const [k, p] of Object.entries(v.params)) {
+        if (typeof p === "number" || typeof p === "boolean" || typeof p === "string") params[k] = p;
+      }
+    }
+    return { id, shape, version, params };
+  }
   click(v) {
     if (!isObj(v)) return null;
     this.fields(v, "click");
@@ -770,12 +811,45 @@ function portPoint(shape, port) {
   const p = port === "top" ? { x: midX(r), y: r.y } : port === "right" ? { x: maxX(r), y: midY(r) } : port === "bottom" ? { x: midX(r), y: maxY(r) } : { x: r.x, y: midY(r) };
   return rotated(shape, p);
 }
+function flattenContour(cp) {
+  const out = [];
+  for (let s = 0; s + 3 < cp.length; s += 3) {
+    const seg = cp.slice(s, s + 4);
+    for (let k = 0; k < 16; k++) out.push(bezierPoint(seg, k / 16));
+  }
+  out.push(cp[cp.length - 1]);
+  return out;
+}
+function outlineCrossing(shape, c, d) {
+  let nearest2 = null, farthest = null;
+  for (const contour of shapeContours(shape)) {
+    const pts = flattenContour(contour.points);
+    const n = pts.length;
+    const edges = contour.closed ? n : n - 1;
+    for (let i = 0; i < edges; i++) {
+      const a = pts[i], b = pts[(i + 1) % n];
+      const e = { x: b.x - a.x, y: b.y - a.y }, w = { x: a.x - c.x, y: a.y - c.y };
+      const det = e.x * d.y - d.x * e.y;
+      if (det === 0) continue;
+      const t = (e.x * w.y - e.y * w.x) / det, s = (d.x * w.y - d.y * w.x) / det;
+      if (!(t > 0 && s >= 0 && s <= 1)) continue;
+      if (nearest2 === null || t < nearest2) nearest2 = t;
+      if (t <= 1 && (farthest === null || t > farthest)) farthest = t;
+    }
+  }
+  const best = farthest ?? nearest2;
+  return best === null ? null : { x: c.x + d.x * best, y: c.y + d.y * best };
+}
 function edgePoint(shape, toward) {
   const r = frame(shape);
   const c = center(shape);
   const target = unrotated(shape, toward);
   const dx = target.x - c.x, dy = target.y - c.y;
   if (!((dx !== 0 || dy !== 0) && r.width > 0 && r.height > 0)) return c;
+  if (shape.kind === "path") {
+    const hit = outlineCrossing(shape, c, { x: dx, y: dy });
+    if (hit) return rotated(shape, hit);
+  }
   const hw = r.width / 2, hh = r.height / 2;
   let t;
   if (shape.kind === "ellipse") t = 1 / Math.sqrt(dx * dx / (hw * hw) + dy * dy / (hh * hh));
@@ -787,9 +861,15 @@ function reference(ep, index) {
   const s = ep.elementID ? index.get(ep.elementID) : void 0;
   return s ? center(s) : { x: ep.x, y: ep.y };
 }
+function normalizedPoint(shape, p) {
+  const r = frame(shape);
+  return rotated(shape, { x: r.x + p.x * r.width, y: r.y + p.y * r.height });
+}
 function resolve(ep, other, index) {
   const s = ep.elementID ? index.get(ep.elementID) : void 0;
   if (!s) return { x: ep.x, y: ep.y };
+  const i = ep.portIndex, ports = s.ports ?? [];
+  if (typeof i === "number" && Number.isInteger(i) && i >= 0 && i < ports.length) return normalizedPoint(s, ports[i]);
   return ep.port ? portPoint(s, ep.port) : edgePoint(s, other);
 }
 function endpoints(e, index) {
@@ -1973,7 +2053,7 @@ function clickTargets(page, file) {
         continue;
       }
     }
-    const url = c?.url ? allowedURL(c.url) : null;
+    const url = (c?.url ? allowedURL(c.url) : null) ?? webLink(e.url);
     if (url) {
       out.set(e.id, { url });
       continue;
@@ -2773,8 +2853,8 @@ function svgOpen(b, background, paint) {
   }
   return out;
 }
-function svgParts(page, background, fixed) {
-  if (hasInstances(page)) return svgParts(expandingSymbols(page, 0), background, fixed);
+function svgParts(page, background, fixed, links = false) {
+  if (hasInstances(page)) return svgParts(expandingSymbols(page, 0), background, fixed, links);
   const theme = themeNamed(page.theme);
   const bg = background ? theme?.background ?? background : null;
   const ink = theme?.ink ?? black;
@@ -2798,14 +2878,19 @@ function svgParts(page, background, fixed) {
 ${body}</g>
 `;
     }
-    parts.push({ key: e.id, markup: alpha < 1 ? `<g opacity="${fmt(alpha)}">
+    if (alpha < 1) body = `<g opacity="${fmt(alpha)}">
 ${body}</g>
-` : body });
+`;
+    const href = links ? (e.click?.url ? allowedURL(e.click.url) : null) ?? webLink(e.url) : null;
+    if (href) body = `<a href="${escapeXML(href).replace(/"/g, "&quot;")}" target="_blank">
+${body}</a>
+`;
+    parts.push({ key: e.id, markup: body });
   }
   return { bounds: b, parts };
 }
 function svg(page, background = { r: 1, g: 1, b: 1, a: 1 }, fixed) {
-  const { bounds: b, parts } = svgParts(page, background, fixed);
+  const { bounds: b, parts } = svgParts(page, background, fixed, true);
   return svgOpen(b, themeNamed(page.theme)?.background ?? background, background !== null) + parts.map((p) => p.markup).join("") + "</svg>\n";
 }
 function labelRect(e, index) {
@@ -2900,7 +2985,7 @@ function svgElement(e, index, labelBackground) {
       }
       s += `<path d="${outline(e).data()}" fill="none" ${strokeAttrs}/>
 `;
-      if (text) s += e.kind === "note" ? noteMarkup(text, e) : textElement(text, frame(e), e, true);
+      if (text) s += e.kind === "note" ? noteMarkup(text, e) : textElement(text, e.kind === "path" ? pathLabelBox(e) : frame(e), e, true);
       return s;
     }
     default:
@@ -2913,6 +2998,11 @@ function placeholder(e, strokeAttrs) {
   return `<path d="${p.data()}" fill="none" ${strokeAttrs} stroke-opacity="0.5" stroke-dasharray="6 4"/>
 ` + textElement(`${e.kind}${e.text ? `: ${e.text}` : ""}`, f, { ...e, style: { ...e.style, fontSize: Math.min(e.style.fontSize, 12) } }, true);
 }
+function pathLabelBox(e) {
+  const f = frame(e), r = e.labelRect;
+  if (!r) return f;
+  return { x: f.x + r.x * f.width, y: f.y + r.y * f.height, width: r.width * f.width, height: r.height * f.height };
+}
 function textElement(text, f, e, centered) {
   const size = e.style.fontSize;
   const lines = text.split("\n");
@@ -3611,7 +3701,7 @@ function render(source, options = {}) {
 function isFile(v) {
   return typeof v === "object" && v !== null && Array.isArray(v.pages) && Array.isArray(v.warnings);
 }
-var VERSION = "0.5.4";
+var VERSION = "0.6.1";
 
 // src/player-entry.ts
 definePlayer();
@@ -3663,5 +3753,6 @@ export {
   themeNamed,
   themes,
   transientElements,
+  webLink,
   withRoughness
 };