@phin-tech/dottie 0.6.2 → 0.7.0

package/PARITY.md

@@ -24,7 +24,9 @@ fixture, so the gap is visible rather than silent.
 | 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. |
+| Waypoints (bends) on every routing, and hops | Supported | [edge/waypoints](../fixtures/edge/waypoints.dottie), [edge/waypoints-symbol](../fixtures/edge/waypoints-symbol.dottie) | Hops need the page, so `connectorParts` takes it; without one a line draws none. |
 | Arrowheads: arrow, triangle, dot, bar | Supported | [edge/connectors](../fixtures/edge/connectors.dottie) | |
+| Label colors (`textColor`, apart from the stroke) | Supported | [edge/text-colors](../fixtures/edge/text-colors.dottie) | Text boxes and notes ignore it, as in 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 |
 | Visibility, reveal (draw-on, typing), opacity | Supported | [edge/timeline](../fixtures/edge/timeline.dottie) | |
@@ -45,6 +47,9 @@ 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 |
+| Page variables and conditions (`variables`, `when`) | Supported | [edge/state](../fixtures/edge/state.dottie) | Starting values in every still and export; connectors go with a shape the state hides |
+| Clicks that set and toggle variables | Supported | [edge/state](../fixtures/edge/state.dottie) | Change what shows without touching the playhead. The HTML export of a page with state is this player |
+| Looping scenes (`loop` on a marker) | Supported | [edge/state](../fixtures/edge/state.dottie) | As the HTML export plays them: no stop on entering, round from the scene's end to its start |
 | 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 | | |

package/README.md

@@ -33,11 +33,16 @@ Elements the drawing makes clickable work with the mouse and the keyboard (Tab,
 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.
+click first fires a cancelable `action` event whose `detail` is `{element, scene | url | page | state, set?, toggle?,
+replay?}`; call `preventDefault()` to handle it yourself.
+
+A click can also set or toggle the page's variables, which show and hide the elements with a `when` while the
+animation keeps playing: a diagram you leave running that people poke. A looping scene plays round until a click
+or next leaves it, instead of stopping.
 
 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
+(settable), `duration`, `paused`, `variables` and `setState({name: value})`, and fires `load`, `frame`, `action`,
+`state` (with `{variables}`, after a change) 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,4 +1,4 @@
-/*! dottie.js 0.6.2 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.7.0 | 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);
@@ -44,17 +44,23 @@ function defaultBase() {
 }
 var base = defaultBase();
 
+// src/state.ts
+var MAX_NAME = 64;
+function isName(name) {
+  return name.length <= MAX_NAME && /^[A-Za-z_][A-Za-z0-9_]*$/.test(name);
+}
+
 // src/model.ts
 var SUPPORTED_VERSION = 2;
 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", "symbols"],
+  page: ["id", "name", "layers", "elements", "theme", "guidesX", "guidesY", "guidesLocked", "timeline", "symbols", "variables"],
   symbol: ["id", "name", "width", "height", "layers", "elements", "timeline", "button", "params"],
   layer: ["id", "name", "visible", "locked"],
   rgba: ["r", "g", "b", "a"],
-  style: ["stroke", "fill", "fillStyle", "strokeWidth", "dash", "roughness", "bowing", "fontSize", "font", "gridSize", "opacity", "dashOffset"],
+  style: ["stroke", "fill", "fillStyle", "strokeWidth", "dash", "roughness", "bowing", "fontSize", "font", "gridSize", "opacity", "dashOffset", "textColor"],
   element: [
     "id",
     "kind",
@@ -78,6 +84,7 @@ var KNOWN_FIELDS = {
     "anchor",
     "click",
     "hover",
+    "when",
     "symbol",
     "playback",
     "offset",
@@ -95,15 +102,16 @@ var KNOWN_FIELDS = {
   extensionRef: ["id", "shape", "version", "params"],
   normalizedPoint: ["x", "y"],
   normalizedRect: ["x", "y", "width", "height"],
-  connector: ["start", "end", "routing", "startHead", "endHead"],
+  connector: ["start", "end", "routing", "startHead", "endHead", "waypoints", "hops"],
+  waypoint: ["x", "y"],
   timeline: ["fps", "duration", "boil", "settle", "poster", "tracks", "camera", "markers"],
   track: ["element", "keys", "boil", "follow", "repeats", "march"],
   keyframe: ["t", "x", "y", "width", "height", "rotation", "strokeWidth", "stroke", "fill", "visible", "reveal", "opacity", "ease"],
   follow: ["path", "start", "end", "ease", "reverse", "orient", "laps"],
   repeat: ["start", "end", "count"],
   cameraKey: ["t", "x", "y", "width", "height", "ease"],
-  marker: ["t", "name"],
-  click: ["scene", "url"],
+  marker: ["t", "name", "loop"],
+  click: ["scene", "url", "set", "toggle"],
   hover: ["stroke", "fill", "opacity"]
 };
 var MAX_DURATION = 3600;
@@ -172,7 +180,8 @@ var Reader = class {
       font: str(s.font) || null,
       gridSize: num(s.gridSize) ?? null,
       opacity: num(s.opacity) ?? null,
-      dashOffset: num(s.dashOffset) ?? null
+      dashOffset: num(s.dashOffset) ?? null,
+      textColor: rgba(s.textColor) ?? null
     };
   }
   endpoint(v) {
@@ -200,7 +209,12 @@ var Reader = class {
       end: this.endpoint(v.end),
       routing: routing && ["straight", "curved", "elbow"].includes(routing) ? routing : "straight",
       startHead: head(v.startHead, "none"),
-      endHead: head(v.endHead, "arrow")
+      endHead: head(v.endHead, "arrow"),
+      waypoints: Array.isArray(v.waypoints) ? v.waypoints.filter(isObj).map((w) => {
+        this.fields(w, "waypoint");
+        return { x: num(w.x) ?? 0, y: num(w.y) ?? 0 };
+      }) : null,
+      hops: typeof v.hops === "boolean" ? v.hops : null
     };
   }
   image(v, table) {
@@ -251,6 +265,7 @@ var Reader = class {
       anchor: str(v.anchor) ?? null,
       click: this.click(v.click),
       hover: this.hover(v.hover),
+      when: str(v.when) ?? null,
       symbol: uuid(v.symbol) ?? null,
       playback: this.playback(v.playback),
       offset: num(v.offset) ?? null,
@@ -286,13 +301,27 @@ var Reader = class {
     }
     return { id, shape, version, params };
   }
+  variables(v) {
+    if (!isObj(v)) return null;
+    const out = {};
+    for (const [k, b] of Object.entries(v)) if (typeof b === "boolean") out[k] = b;
+    return Object.keys(out).length > 0 ? out : 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 };
+    let set = null;
+    if (isObj(v.set)) {
+      set = {};
+      for (const [k, b] of Object.entries(v.set)) if (typeof b === "boolean" && isName(k)) set[k] = b;
+      if (Object.keys(set).length === 0) set = null;
+    }
+    const raw = typeof v.toggle === "string" ? [v.toggle] : Array.isArray(v.toggle) && v.toggle.every((x) => typeof x === "string") ? v.toggle : null;
+    const toggle = raw ? raw.filter(isName) : null;
+    return { scene: str(v.scene) ?? null, url: safe, set, toggle: toggle && toggle.length > 0 ? toggle : null };
   }
   playback(v) {
     const s = str(v);
@@ -393,7 +422,7 @@ var Reader = class {
     if (camera) stableSortBy(camera, (c) => c.t);
     const markers = Array.isArray(v.markers) ? v.markers.filter(isObj).flatMap((m) => {
       const t = num(m.t);
-      return t !== void 0 && t >= 0 ? [{ t, name: str(m.name) ?? "" }] : [];
+      return t !== void 0 && t >= 0 ? [{ t, name: str(m.name) ?? "", loop: bool(m.loop) ?? null }] : [];
     }) : null;
     if (markers) stableSortBy(markers, (m) => m.t);
     const poster = num(v.poster);
@@ -426,7 +455,8 @@ var Reader = class {
       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),
-      symbols: Array.isArray(v.symbols) ? v.symbols.map((x) => this.symbol(x, images)).filter((x) => x !== null) : null
+      symbols: Array.isArray(v.symbols) ? v.symbols.map((x) => this.symbol(x, images)).filter((x) => x !== null) : null,
+      variables: this.variables(v.variables)
     };
   }
 };

package/dist/dottie-compile.mjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-/*! dottie.js 0.6.2 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.7.0 | 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);
@@ -52,17 +52,23 @@ function defaultBase() {
 }
 var base = defaultBase();
 
+// src/state.ts
+var MAX_NAME = 64;
+function isName(name) {
+  return name.length <= MAX_NAME && /^[A-Za-z_][A-Za-z0-9_]*$/.test(name);
+}
+
 // src/model.ts
 var SUPPORTED_VERSION = 2;
 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", "symbols"],
+  page: ["id", "name", "layers", "elements", "theme", "guidesX", "guidesY", "guidesLocked", "timeline", "symbols", "variables"],
   symbol: ["id", "name", "width", "height", "layers", "elements", "timeline", "button", "params"],
   layer: ["id", "name", "visible", "locked"],
   rgba: ["r", "g", "b", "a"],
-  style: ["stroke", "fill", "fillStyle", "strokeWidth", "dash", "roughness", "bowing", "fontSize", "font", "gridSize", "opacity", "dashOffset"],
+  style: ["stroke", "fill", "fillStyle", "strokeWidth", "dash", "roughness", "bowing", "fontSize", "font", "gridSize", "opacity", "dashOffset", "textColor"],
   element: [
     "id",
     "kind",
@@ -86,6 +92,7 @@ var KNOWN_FIELDS = {
     "anchor",
     "click",
     "hover",
+    "when",
     "symbol",
     "playback",
     "offset",
@@ -103,15 +110,16 @@ var KNOWN_FIELDS = {
   extensionRef: ["id", "shape", "version", "params"],
   normalizedPoint: ["x", "y"],
   normalizedRect: ["x", "y", "width", "height"],
-  connector: ["start", "end", "routing", "startHead", "endHead"],
+  connector: ["start", "end", "routing", "startHead", "endHead", "waypoints", "hops"],
+  waypoint: ["x", "y"],
   timeline: ["fps", "duration", "boil", "settle", "poster", "tracks", "camera", "markers"],
   track: ["element", "keys", "boil", "follow", "repeats", "march"],
   keyframe: ["t", "x", "y", "width", "height", "rotation", "strokeWidth", "stroke", "fill", "visible", "reveal", "opacity", "ease"],
   follow: ["path", "start", "end", "ease", "reverse", "orient", "laps"],
   repeat: ["start", "end", "count"],
   cameraKey: ["t", "x", "y", "width", "height", "ease"],
-  marker: ["t", "name"],
-  click: ["scene", "url"],
+  marker: ["t", "name", "loop"],
+  click: ["scene", "url", "set", "toggle"],
   hover: ["stroke", "fill", "opacity"]
 };
 var MAX_DURATION = 3600;
@@ -180,7 +188,8 @@ var Reader = class {
       font: str(s.font) || null,
       gridSize: num(s.gridSize) ?? null,
       opacity: num(s.opacity) ?? null,
-      dashOffset: num(s.dashOffset) ?? null
+      dashOffset: num(s.dashOffset) ?? null,
+      textColor: rgba(s.textColor) ?? null
     };
   }
   endpoint(v) {
@@ -208,7 +217,12 @@ var Reader = class {
       end: this.endpoint(v.end),
       routing: routing && ["straight", "curved", "elbow"].includes(routing) ? routing : "straight",
       startHead: head(v.startHead, "none"),
-      endHead: head(v.endHead, "arrow")
+      endHead: head(v.endHead, "arrow"),
+      waypoints: Array.isArray(v.waypoints) ? v.waypoints.filter(isObj).map((w) => {
+        this.fields(w, "waypoint");
+        return { x: num(w.x) ?? 0, y: num(w.y) ?? 0 };
+      }) : null,
+      hops: typeof v.hops === "boolean" ? v.hops : null
     };
   }
   image(v, table) {
@@ -259,6 +273,7 @@ var Reader = class {
       anchor: str(v.anchor) ?? null,
       click: this.click(v.click),
       hover: this.hover(v.hover),
+      when: str(v.when) ?? null,
       symbol: uuid(v.symbol) ?? null,
       playback: this.playback(v.playback),
       offset: num(v.offset) ?? null,
@@ -294,13 +309,27 @@ var Reader = class {
     }
     return { id, shape, version, params };
   }
+  variables(v) {
+    if (!isObj(v)) return null;
+    const out = {};
+    for (const [k, b] of Object.entries(v)) if (typeof b === "boolean") out[k] = b;
+    return Object.keys(out).length > 0 ? out : 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 };
+    let set = null;
+    if (isObj(v.set)) {
+      set = {};
+      for (const [k, b] of Object.entries(v.set)) if (typeof b === "boolean" && isName(k)) set[k] = b;
+      if (Object.keys(set).length === 0) set = null;
+    }
+    const raw = typeof v.toggle === "string" ? [v.toggle] : Array.isArray(v.toggle) && v.toggle.every((x) => typeof x === "string") ? v.toggle : null;
+    const toggle = raw ? raw.filter(isName) : null;
+    return { scene: str(v.scene) ?? null, url: safe, set, toggle: toggle && toggle.length > 0 ? toggle : null };
   }
   playback(v) {
     const s = str(v);
@@ -401,7 +430,7 @@ var Reader = class {
     if (camera) stableSortBy(camera, (c) => c.t);
     const markers = Array.isArray(v.markers) ? v.markers.filter(isObj).flatMap((m) => {
       const t = num(m.t);
-      return t !== void 0 && t >= 0 ? [{ t, name: str(m.name) ?? "" }] : [];
+      return t !== void 0 && t >= 0 ? [{ t, name: str(m.name) ?? "", loop: bool(m.loop) ?? null }] : [];
     }) : null;
     if (markers) stableSortBy(markers, (m) => m.t);
     const poster = num(v.poster);
@@ -434,7 +463,8 @@ var Reader = class {
       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),
-      symbols: Array.isArray(v.symbols) ? v.symbols.map((x) => this.symbol(x, images)).filter((x) => x !== null) : null
+      symbols: Array.isArray(v.symbols) ? v.symbols.map((x) => this.symbol(x, images)).filter((x) => x !== null) : null,
+      variables: this.variables(v.variables)
     };
   }
 };
@@ -581,7 +611,7 @@ function compile(source2, runtime, options2 = {}) {
 }
 
 // src/index.ts
-var VERSION = "0.6.2";
+var VERSION = "0.7.0";
 
 // src/cli.ts
 var usage = `dottie-compile ${VERSION}: a Dottie drawing as one script that plays it on any page.