@phin-tech/dottie 0.3.0 → 0.5.1

package/PARITY.md

@@ -38,6 +38,10 @@ fixture, so the gap is visible rather than silent.
 | Damaged timelines (clamped, filtered, sorted) | Supported | [edge/timeline](../fixtures/edge/timeline.dottie) | Read the way DottieKit's decoders read them |
 | Unknown kinds, fields and newer versions | Partial | [js-only/future](../fixtures/js-only/future.dottie) | Drawn as labelled placeholders, reported in `warnings`; Dottie refuses such files |
 | Text fonts | Partial | | Positions use Helvetica Neue's metrics; browsers without Helvetica Neue draw Helvetica or Arial in the same places, so runs of mixed styles may sit slightly apart |
-| Links between shapes and pages | Missing | | Not clickable in the player yet |
-| Interactivity (hover, clicks, editing) | Missing | | |
+| Symbols: instances on their own clocks (loop, once, still, offset), nested, scaled and turned | Supported | [edge/symbols](../fixtures/edge/symbols.dottie) | Expanded as DottieKit expands them, with the same ids, seeds and limits ([js-only/hostile-symbols](../fixtures/js-only/hostile-symbols.dottie)) |
+| Button symbols (up, over, down, hit) and clickable copies | Supported | [edge/buttons](../fixtures/edge/buttons.dottie) | As the HTML export draws them |
+| 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 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/README.md

@@ -29,8 +29,15 @@ prefer reduced motion. A still page is just the drawing.
 | `no-controls`, `no-autoplay`, `no-loop` | |
 | `label` | The accessible name; the page name by default |
 
-The element has `play()`, `pause()`, `nextScene()`, `prevScene()`, `currentTime` (settable), `duration`,
-`paused`, and fires `load`, `frame` and `error` events. Its page color comes from the drawing's theme; set
+Elements the drawing makes clickable work with the mouse and the keyboard (Tab, then Enter or Space). A click plays
+a named scene on to the next one, opens a link in a new tab (only `http`, `https` and `mailto`), or shows the page a
+shape's link points at. Each shows its hover look under the pointer; button symbols show their over and down looks
+and take clicks on their hit area, and a symbol's copy set to play when clicked plays its animation through. Every
+click first fires a cancelable `action` event whose `detail` is `{element, scene | url | page, replay?}`; call
+`preventDefault()` to handle it yourself.
+
+The element has `play()`, `pause()`, `nextScene()`, `prevScene()`, `activate(elementId)`, `currentTime`
+(settable), `duration`, `paused`, and fires `load`, `frame`, `action` and `error` events. Its page color comes from the drawing's theme; set
 `--dottie-radius` to round it, and style its parts with `::part(stage)` and `::part(controls)`.
 
 Without modules, `dist/dottie-player.min.js` is a classic script that registers the element and sets

package/dist/compile.js

@@ -1,15 +1,16 @@
-/*! dottie.js 0.3.0 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.5.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);
 
 // src/model.ts
 var SUPPORTED_VERSION = 2;
-var KINDS = ["rectangle", "ellipse", "diamond", "text", "connector", "freehand", "path", "note", "image"];
+var KINDS = ["rectangle", "ellipse", "diamond", "text", "connector", "freehand", "path", "note", "image", "symbol"];
 var EASES = ["linear", "easeIn", "easeOut", "easeInOut", "hold", "spring", "bounce", "elastic"];
 var KNOWN_FIELDS = {
   file: ["version", "pages", "images"],
-  page: ["id", "name", "layers", "elements", "theme", "guidesX", "guidesY", "guidesLocked", "timeline"],
+  page: ["id", "name", "layers", "elements", "theme", "guidesX", "guidesY", "guidesLocked", "timeline", "symbols"],
+  symbol: ["id", "name", "width", "height", "layers", "elements", "timeline", "button"],
   layer: ["id", "name", "visible", "locked"],
   rgba: ["r", "g", "b", "a"],
   style: ["stroke", "fill", "fillStyle", "strokeWidth", "dash", "roughness", "bowing", "fontSize", "gridSize", "opacity", "dashOffset"],
@@ -33,6 +34,11 @@ var KNOWN_FIELDS = {
     "rotation",
     "link",
     "anchor",
+    "click",
+    "hover",
+    "symbol",
+    "playback",
+    "offset",
     "image",
     "reveal"
   ],
@@ -47,7 +53,9 @@ var KNOWN_FIELDS = {
   follow: ["path", "start", "end", "ease", "reverse", "orient", "laps"],
   repeat: ["start", "end", "count"],
   cameraKey: ["t", "x", "y", "width", "height", "ease"],
-  marker: ["t", "name"]
+  marker: ["t", "name"],
+  click: ["scene", "url"],
+  hover: ["stroke", "fill", "opacity"]
 };
 var MAX_DURATION = 3600;
 var MAX_MARCH = 1e4;
@@ -68,6 +76,11 @@ function clampTime(t) {
 function clampFPS(f) {
   return Number.isFinite(f) ? Math.min(Math.max(f, 1), 60) : 12;
 }
+function allowedURL(url) {
+  const u = url.trim();
+  if (!/^(https?:\/\/|mailto:)/i.test(u) || [...u].length <= 7 || /[\u0000-\u001f\u007f-\u009f]/.test(u)) return null;
+  return u;
+}
 function rgba(v) {
   if (!isObj(v)) return void 0;
   const r = num(v.r), g = num(v.g), b = num(v.b);
@@ -182,10 +195,61 @@ var Reader = class {
       rotation: num(v.rotation) ?? null,
       link: uuid(v.link) ?? null,
       anchor: str(v.anchor) ?? null,
+      click: this.click(v.click),
+      hover: this.hover(v.hover),
+      symbol: uuid(v.symbol) ?? null,
+      playback: this.playback(v.playback),
+      offset: num(v.offset) ?? null,
       image: this.image(v.image, images),
       reveal: num(v.reveal) ?? null
     };
   }
+  click(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "click");
+    const url = str(v.url);
+    const safe = url === void 0 ? null : allowedURL(url);
+    if (url !== void 0 && safe === null) this.warn("Skipped a click link that isn't http, https or mailto");
+    return { scene: str(v.scene) ?? null, url: safe };
+  }
+  playback(v) {
+    const s = str(v);
+    if (s === void 0) return null;
+    return ["loop", "once", "still", "click"].includes(s) ? s : "loop";
+  }
+  symbol(v, images) {
+    if (!isObj(v)) return null;
+    this.fields(v, "symbol");
+    const id = uuid(v.id);
+    if (!id) {
+      this.warn("Skipped a symbol without an id");
+      return null;
+    }
+    const size = (x) => {
+      const n = num(x);
+      return Math.max(1, n ?? 100);
+    };
+    const layers = (Array.isArray(v.layers) ? v.layers : []).filter(isObj).flatMap((l) => {
+      const lid = uuid(l.id);
+      return lid ? [{ id: lid, name: str(l.name) ?? "", visible: bool(l.visible) ?? true, locked: bool(l.locked) ?? false }] : [];
+    });
+    if (layers.length === 0) layers.push({ id: `${id}-LAYER`, name: "Layer 1", visible: true, locked: false });
+    return {
+      id,
+      name: str(v.name) ?? "Symbol",
+      width: size(v.width),
+      height: size(v.height),
+      layers,
+      elements: (Array.isArray(v.elements) ? v.elements : []).map((e) => this.element(e, images)).filter((e) => e !== null),
+      timeline: this.timeline(v.timeline),
+      button: bool(v.button) ?? null
+    };
+  }
+  hover(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "hover");
+    return { stroke: rgba(v.stroke) ?? null, fill: rgba(v.fill) ?? null, opacity: num(v.opacity) ?? null };
+  }
   ease(v) {
     const s = str(v);
     if (s === void 0) return null;
@@ -278,7 +342,8 @@ var Reader = class {
       layers,
       elements: (Array.isArray(v.elements) ? v.elements : []).map((e) => this.element(e, images)).filter((e) => e !== null),
       theme: str(v.theme) ?? null,
-      timeline: this.timeline(v.timeline)
+      timeline: this.timeline(v.timeline),
+      symbols: Array.isArray(v.symbols) ? v.symbols.map((x) => this.symbol(x, images)).filter((x) => x !== null) : null
     };
   }
 };
@@ -318,6 +383,19 @@ function parseDottie(source) {
   return { version, pages, warnings: reader.warnings };
 }
 
+// src/clicks.ts
+var CLICK_STYLE = `
+.dottie-a { cursor: pointer; outline: none; }
+.dottie-a .dottie-h { display: none; }
+.dottie-a:hover .dottie-h, .dottie-a.dottie-hover .dottie-h, .dottie-a:focus-visible .dottie-h { display: inline; }
+.dottie-a:hover .dottie-n, .dottie-a.dottie-hover .dottie-n, .dottie-a:focus-visible .dottie-n { display: none; }
+.dottie-a:focus-visible { filter: drop-shadow(0 0 3px var(--dottie-focus, #3b82f6)); }
+.dottie-a:not(.dottie-b):active, .dottie-a.dottie-press:not(.dottie-b) { transform: translate(1px, 1px); }
+.dottie-a .dottie-d { display: none; }
+.dottie-b:active .dottie-n, .dottie-b:active .dottie-h, .dottie-b.dottie-press .dottie-n, .dottie-b.dottie-press .dottie-h { display: none; }
+.dottie-b:active .dottie-d, .dottie-b.dottie-press .dottie-d { display: inline; }
+`;
+
 // src/player.ts
 function pageIndex(file, spec) {
   const s = (spec ?? "").trim();
@@ -327,6 +405,22 @@ function pageIndex(file, spec) {
   const n = Number(s);
   return Number.isInteger(n) && n >= 1 && n <= file.pages.length ? n - 1 : 0;
 }
+var STYLE = `
+:host { display: block; position: relative; color: var(--dottie-ink); background: var(--dottie-page);
+  font: 14px -apple-system, system-ui, sans-serif; border-radius: var(--dottie-radius, 0); }
+:host([hidden]) { display: none; }
+.stage { display: block; width: 100%; height: auto; }
+.stage svg { display: block; width: 100%; height: auto; margin: 0 auto; }
+.bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px 12px; max-width: 560px; margin: 0 auto; box-sizing: border-box; }
+.bar[hidden] { display: none; }
+button { font: inherit; color: inherit; background: none; border: 1.5px solid currentColor; border-radius: 6px;
+  width: 34px; height: 30px; cursor: pointer; flex: none; padding: 0; }
+button:focus-visible, input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+input[type=range] { flex: 1; min-width: 60px; accent-color: currentColor; }
+output { font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
+.scene { min-width: 0; flex: 0 1 auto; text-align: center; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.error { padding: 16px; font-family: ui-monospace, Menlo, monospace; white-space: pre-wrap; }
+${CLICK_STYLE}`;
 
 // src/compile.ts
 var LOADER = `;(function () {

package/dist/dottie-compile.mjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-/*! dottie.js 0.3.0 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.5.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);
@@ -10,11 +10,12 @@ import { basename } from "node:path";
 
 // src/model.ts
 var SUPPORTED_VERSION = 2;
-var KINDS = ["rectangle", "ellipse", "diamond", "text", "connector", "freehand", "path", "note", "image"];
+var KINDS = ["rectangle", "ellipse", "diamond", "text", "connector", "freehand", "path", "note", "image", "symbol"];
 var EASES = ["linear", "easeIn", "easeOut", "easeInOut", "hold", "spring", "bounce", "elastic"];
 var KNOWN_FIELDS = {
   file: ["version", "pages", "images"],
-  page: ["id", "name", "layers", "elements", "theme", "guidesX", "guidesY", "guidesLocked", "timeline"],
+  page: ["id", "name", "layers", "elements", "theme", "guidesX", "guidesY", "guidesLocked", "timeline", "symbols"],
+  symbol: ["id", "name", "width", "height", "layers", "elements", "timeline", "button"],
   layer: ["id", "name", "visible", "locked"],
   rgba: ["r", "g", "b", "a"],
   style: ["stroke", "fill", "fillStyle", "strokeWidth", "dash", "roughness", "bowing", "fontSize", "gridSize", "opacity", "dashOffset"],
@@ -38,6 +39,11 @@ var KNOWN_FIELDS = {
     "rotation",
     "link",
     "anchor",
+    "click",
+    "hover",
+    "symbol",
+    "playback",
+    "offset",
     "image",
     "reveal"
   ],
@@ -52,7 +58,9 @@ var KNOWN_FIELDS = {
   follow: ["path", "start", "end", "ease", "reverse", "orient", "laps"],
   repeat: ["start", "end", "count"],
   cameraKey: ["t", "x", "y", "width", "height", "ease"],
-  marker: ["t", "name"]
+  marker: ["t", "name"],
+  click: ["scene", "url"],
+  hover: ["stroke", "fill", "opacity"]
 };
 var MAX_DURATION = 3600;
 var MAX_MARCH = 1e4;
@@ -73,6 +81,11 @@ function clampTime(t) {
 function clampFPS(f) {
   return Number.isFinite(f) ? Math.min(Math.max(f, 1), 60) : 12;
 }
+function allowedURL(url) {
+  const u = url.trim();
+  if (!/^(https?:\/\/|mailto:)/i.test(u) || [...u].length <= 7 || /[\u0000-\u001f\u007f-\u009f]/.test(u)) return null;
+  return u;
+}
 function rgba(v) {
   if (!isObj(v)) return void 0;
   const r = num(v.r), g = num(v.g), b = num(v.b);
@@ -187,10 +200,61 @@ var Reader = class {
       rotation: num(v.rotation) ?? null,
       link: uuid(v.link) ?? null,
       anchor: str(v.anchor) ?? null,
+      click: this.click(v.click),
+      hover: this.hover(v.hover),
+      symbol: uuid(v.symbol) ?? null,
+      playback: this.playback(v.playback),
+      offset: num(v.offset) ?? null,
       image: this.image(v.image, images),
       reveal: num(v.reveal) ?? null
     };
   }
+  click(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "click");
+    const url = str(v.url);
+    const safe = url === void 0 ? null : allowedURL(url);
+    if (url !== void 0 && safe === null) this.warn("Skipped a click link that isn't http, https or mailto");
+    return { scene: str(v.scene) ?? null, url: safe };
+  }
+  playback(v) {
+    const s = str(v);
+    if (s === void 0) return null;
+    return ["loop", "once", "still", "click"].includes(s) ? s : "loop";
+  }
+  symbol(v, images) {
+    if (!isObj(v)) return null;
+    this.fields(v, "symbol");
+    const id = uuid(v.id);
+    if (!id) {
+      this.warn("Skipped a symbol without an id");
+      return null;
+    }
+    const size = (x) => {
+      const n = num(x);
+      return Math.max(1, n ?? 100);
+    };
+    const layers = (Array.isArray(v.layers) ? v.layers : []).filter(isObj).flatMap((l) => {
+      const lid = uuid(l.id);
+      return lid ? [{ id: lid, name: str(l.name) ?? "", visible: bool(l.visible) ?? true, locked: bool(l.locked) ?? false }] : [];
+    });
+    if (layers.length === 0) layers.push({ id: `${id}-LAYER`, name: "Layer 1", visible: true, locked: false });
+    return {
+      id,
+      name: str(v.name) ?? "Symbol",
+      width: size(v.width),
+      height: size(v.height),
+      layers,
+      elements: (Array.isArray(v.elements) ? v.elements : []).map((e) => this.element(e, images)).filter((e) => e !== null),
+      timeline: this.timeline(v.timeline),
+      button: bool(v.button) ?? null
+    };
+  }
+  hover(v) {
+    if (!isObj(v)) return null;
+    this.fields(v, "hover");
+    return { stroke: rgba(v.stroke) ?? null, fill: rgba(v.fill) ?? null, opacity: num(v.opacity) ?? null };
+  }
   ease(v) {
     const s = str(v);
     if (s === void 0) return null;
@@ -283,7 +347,8 @@ var Reader = class {
       layers,
       elements: (Array.isArray(v.elements) ? v.elements : []).map((e) => this.element(e, images)).filter((e) => e !== null),
       theme: str(v.theme) ?? null,
-      timeline: this.timeline(v.timeline)
+      timeline: this.timeline(v.timeline),
+      symbols: Array.isArray(v.symbols) ? v.symbols.map((x) => this.symbol(x, images)).filter((x) => x !== null) : null
     };
   }
 };
@@ -323,6 +388,19 @@ function parseDottie(source2) {
   return { version, pages, warnings: reader.warnings };
 }
 
+// src/clicks.ts
+var CLICK_STYLE = `
+.dottie-a { cursor: pointer; outline: none; }
+.dottie-a .dottie-h { display: none; }
+.dottie-a:hover .dottie-h, .dottie-a.dottie-hover .dottie-h, .dottie-a:focus-visible .dottie-h { display: inline; }
+.dottie-a:hover .dottie-n, .dottie-a.dottie-hover .dottie-n, .dottie-a:focus-visible .dottie-n { display: none; }
+.dottie-a:focus-visible { filter: drop-shadow(0 0 3px var(--dottie-focus, #3b82f6)); }
+.dottie-a:not(.dottie-b):active, .dottie-a.dottie-press:not(.dottie-b) { transform: translate(1px, 1px); }
+.dottie-a .dottie-d { display: none; }
+.dottie-b:active .dottie-n, .dottie-b:active .dottie-h, .dottie-b.dottie-press .dottie-n, .dottie-b.dottie-press .dottie-h { display: none; }
+.dottie-b:active .dottie-d, .dottie-b.dottie-press .dottie-d { display: inline; }
+`;
+
 // src/player.ts
 function pageIndex(file, spec) {
   const s = (spec ?? "").trim();
@@ -332,6 +410,22 @@ function pageIndex(file, spec) {
   const n = Number(s);
   return Number.isInteger(n) && n >= 1 && n <= file.pages.length ? n - 1 : 0;
 }
+var STYLE = `
+:host { display: block; position: relative; color: var(--dottie-ink); background: var(--dottie-page);
+  font: 14px -apple-system, system-ui, sans-serif; border-radius: var(--dottie-radius, 0); }
+:host([hidden]) { display: none; }
+.stage { display: block; width: 100%; height: auto; }
+.stage svg { display: block; width: 100%; height: auto; margin: 0 auto; }
+.bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px 12px; max-width: 560px; margin: 0 auto; box-sizing: border-box; }
+.bar[hidden] { display: none; }
+button { font: inherit; color: inherit; background: none; border: 1.5px solid currentColor; border-radius: 6px;
+  width: 34px; height: 30px; cursor: pointer; flex: none; padding: 0; }
+button:focus-visible, input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+input[type=range] { flex: 1; min-width: 60px; accent-color: currentColor; }
+output { font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
+.scene { min-width: 0; flex: 0 1 auto; text-align: center; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.error { padding: 16px; font-family: ui-monospace, Menlo, monospace; white-space: pre-wrap; }
+${CLICK_STYLE}`;
 
 // src/compile.ts
 var LOADER = `;(function () {
@@ -393,7 +487,7 @@ function compile(source2, runtime, options2 = {}) {
 }
 
 // src/index.ts
-var VERSION = "0.3.0";
+var VERSION = "0.5.1";
 
 // src/cli.ts
 var usage = `dottie-compile ${VERSION}: a Dottie drawing as one script that plays it on any page.