@phin-tech/dottie 0.1.0 → 0.3.0

package/dist/dottie.js

@@ -1,4 +1,4 @@
-/*! dottie.js 0.1.0 | Apache-2.0 | https://github.com/phin-tech/dottie */
+/*! dottie.js 0.3.0 | 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 __publicField = (obj, key, value2) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value2);
@@ -6,13 +6,13 @@ var __publicField = (obj, key, value2) => __defNormalProp(obj, typeof key !== "s
 // src/model.ts
 var SUPPORTED_VERSION = 2;
 var KINDS = ["rectangle", "ellipse", "diamond", "text", "connector", "freehand", "path", "note", "image"];
-var EASES = ["linear", "easeIn", "easeOut", "easeInOut", "hold"];
+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"],
   layer: ["id", "name", "visible", "locked"],
   rgba: ["r", "g", "b", "a"],
-  style: ["stroke", "fill", "fillStyle", "strokeWidth", "dash", "roughness", "bowing", "fontSize", "gridSize", "opacity"],
+  style: ["stroke", "fill", "fillStyle", "strokeWidth", "dash", "roughness", "bowing", "fontSize", "gridSize", "opacity", "dashOffset"],
   element: [
     "id",
     "kind",
@@ -42,7 +42,7 @@ var KNOWN_FIELDS = {
   endpoint: ["elementID", "port", "x", "y"],
   connector: ["start", "end", "routing", "startHead", "endHead"],
   timeline: ["fps", "duration", "boil", "settle", "poster", "tracks", "camera", "markers"],
-  track: ["element", "keys", "boil", "follow", "repeats"],
+  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"],
@@ -50,6 +50,8 @@ var KNOWN_FIELDS = {
   marker: ["t", "name"]
 };
 var MAX_DURATION = 3600;
+var MAX_MARCH = 1e4;
+var clampMarch = (v) => v === void 0 || !Number.isFinite(v) || v === 0 ? null : Math.min(Math.max(v, -MAX_MARCH), MAX_MARCH);
 var BOIL_DRAWINGS = 3;
 var black = { r: 0.12, g: 0.12, b: 0.13, a: 1 };
 var clear = { r: 0, g: 0, b: 0, a: 0 };
@@ -107,7 +109,8 @@ var Reader = class {
       bowing: num(s.bowing) ?? 1,
       fontSize: num(s.fontSize) ?? 18,
       gridSize: num(s.gridSize) ?? null,
-      opacity: num(s.opacity) ?? null
+      opacity: num(s.opacity) ?? null,
+      dashOffset: num(s.dashOffset) ?? null
     };
   }
   endpoint(v) {
@@ -230,7 +233,7 @@ var Reader = class {
       const rep = { start, end, count: count === void 0 ? null : Math.trunc(count) };
       return repeatIsValid(rep) ? [rep] : [];
     }) : null;
-    return { element, keys, boil: bool(v.boil) ?? null, follow, repeats };
+    return { element, keys, boil: bool(v.boil) ?? null, follow, repeats, march: clampMarch(num(v.march)) };
   }
   timeline(v) {
     if (!isObj(v)) return null;
@@ -2061,7 +2064,40 @@ function applyEase(ease, u) {
       return u < 0.5 ? 4 * u * u * u : 1 - Math.pow(-2 * u + 2, 3) / 2;
     case "hold":
       return 0;
-  }
+    case "spring":
+      return spring(u);
+    case "bounce":
+      return bounce(u);
+    case "elastic":
+      return elastic(u);
+  }
+}
+function spring(u) {
+  if (u <= 0) return 0;
+  if (u >= 1) return 1;
+  const s = (u2) => 1 - Math.exp(-6 * u2) * (Math.cos(3 * Math.PI * u2) + 6 / (3 * Math.PI) * Math.sin(3 * Math.PI * u2));
+  return s(u) + u * (1 - s(1));
+}
+function bounce(u) {
+  if (u <= 0) return 0;
+  if (u >= 1) return 1;
+  const n = 7.5625, d = 2.75;
+  if (u < 1 / d) return n * u * u;
+  if (u < 2 / d) {
+    const v2 = u - 1.5 / d;
+    return n * v2 * v2 + 0.75;
+  }
+  if (u < 2.5 / d) {
+    const v2 = u - 2.25 / d;
+    return n * v2 * v2 + 0.9375;
+  }
+  const v = u - 2.625 / d;
+  return n * v * v + 0.984375;
+}
+function elastic(u) {
+  if (u <= 0) return 0;
+  if (u >= 1) return 1;
+  return Math.pow(2, -10 * u) * Math.sin((u * 10 - 0.75) * (2 * Math.PI / 3)) + 1;
 }
 var rem = (a, b) => a % b;
 function localTime(track, t) {
@@ -2096,11 +2132,12 @@ function value(track, t, get, base, lerp) {
   return lerp(get(b), get(a), applyEase(b.ease ?? "linear", u));
 }
 var lerpNum = (a, b, u) => a + (b - a) * u;
+var mix01 = (a, b, u) => Math.min(Math.max(a + (b - a) * u, 0), 1);
 var lerpColor = (a, b, u) => ({
-  r: a.r + (b.r - a.r) * u,
-  g: a.g + (b.g - a.g) * u,
-  b: a.b + (b.b - a.b) * u,
-  a: a.a + (b.a - a.a) * u
+  r: mix01(a.r, b.r, u),
+  g: mix01(a.g, b.g, u),
+  b: mix01(a.b, b.b, u),
+  a: mix01(a.a, b.a, u)
 });
 function num2(track, t, p, base) {
   return value(track, t, (k) => k[p], base, lerpNum);
@@ -2138,10 +2175,10 @@ function applyTrack(track, e, t) {
   if (e.kind === "connector") return e;
   e.x = num2(track, t, "x", e.x);
   e.y = num2(track, t, "y", e.y);
-  e.width = num2(track, t, "width", e.width);
-  e.height = num2(track, t, "height", e.height);
+  e.width = Math.max(0, num2(track, t, "width", e.width));
+  e.height = Math.max(0, num2(track, t, "height", e.height));
   if (track.keys.some((k) => k.rotation !== void 0)) e.rotation = num2(track, t, "rotation", angle(e));
-  e.style.strokeWidth = num2(track, t, "strokeWidth", e.style.strokeWidth);
+  e.style.strokeWidth = Math.max(0, num2(track, t, "strokeWidth", e.style.strokeWidth));
   e.style.stroke = value(track, t, (k) => k.stroke, e.style.stroke, lerpColor);
   e.style.fill = value(track, t, (k) => k.fill, e.style.fill, lerpColor);
   return e;
@@ -2170,7 +2207,7 @@ function following(track, e, t, page) {
   if (!pathElement || pathElement.id === e.id) return e;
   const line2 = tracing(pathElement, page);
   const span = f.end - f.start;
-  let u = applyEase(f.ease ?? "easeInOut", span > 0 ? Math.min(1, (t - f.start) / span) : 1) * (f.laps ?? 1);
+  let u = Math.min(Math.max(applyEase(f.ease ?? "easeInOut", span > 0 ? Math.min(1, (t - f.start) / span) : 1), 0), 1) * (f.laps ?? 1);
   if (u > 1) u = rem(u, 1) === 0 ? 1 : rem(u, 1);
   if (f.reverse === true) u = 1 - u;
   const p = line2.point(u);
@@ -2184,6 +2221,16 @@ function following(track, e, t, page) {
   }
   return moved;
 }
+function marchOffset(tl, speed, period, t) {
+  if (!(period > 0)) return 0;
+  const d = clampTime(tl.duration);
+  if (d > 0) {
+    const laps = roundHalfAway(speed * d / period);
+    if (laps !== 0) speed = laps * period / d;
+  }
+  const r = rem(speed * t, period);
+  return r < 0 ? -r : r === 0 ? 0 : period - r;
+}
 function trackMap(tl) {
   const m = /* @__PURE__ */ new Map();
   for (const t of tl.tracks) if (!m.has(t.element)) m.set(t.element, t);
@@ -2216,6 +2263,11 @@ function resolved(page, t) {
       if (out === e) out = cloneElement(e);
       out.seed = boiled(e.seed, reseed);
     }
+    const pattern = track?.march != null ? dashPattern(out.style.dash, out.style.strokeWidth) : null;
+    if (track?.march != null && pattern) {
+      if (out === e) out = cloneElement(e);
+      out.style.dashOffset = marchOffset(timeline, track.march, pattern.reduce((a, b) => a + b, 0), t);
+    }
     return out;
   });
   elements = elements.map((e, i) => hidden.has(e.id) ? page.elements[i] : e);
@@ -2258,7 +2310,7 @@ function cameraRect(tl, t) {
   if (!after) return rectOf(before);
   const u = applyEase(before.ease ?? "easeInOut", (t - before.t) / Math.max(after.t - before.t, 1e-9));
   const mix2 = (p, q) => p + (q - p) * u;
-  return { x: mix2(before.x, after.x), y: mix2(before.y, after.y), width: mix2(before.width, after.width), height: mix2(before.height, after.height) };
+  return { x: mix2(before.x, after.x), y: mix2(before.y, after.y), width: Math.max(1, mix2(before.width, after.width)), height: Math.max(1, mix2(before.height, after.height)) };
 }
 var rectOf = (k) => ({ x: k.x, y: k.y, width: k.width, height: k.height });
 function cameraView(tl, t) {
@@ -2308,8 +2360,9 @@ function bounds(page, padding = 24) {
     return inset(rotatedBounds(e), -reach, -reach);
   };
   if (page.elements.length === 0) return { x: 0, y: 0, width: 200, height: 200 };
+  const shown = page.elements.filter((e) => (e.style.opacity ?? 1) > 0);
   let r = null;
-  for (const e of page.elements) r = union(r, box(e));
+  for (const e of shown.length ? shown : page.elements) r = union(r, box(e));
   return inset(r, -padding, -padding);
 }
 function plan(page) {
@@ -2393,6 +2446,7 @@ function svgElement(e, index, labelBackground) {
   let strokeAttrs = `stroke="${stroke}" stroke-width="${fmt(e.style.strokeWidth)}" stroke-linecap="round" stroke-linejoin="round"`;
   const dash = dashPattern(e.style.dash, e.style.strokeWidth);
   if (dash) strokeAttrs += ` stroke-dasharray="${dash.map(fmt).join(" ")}"`;
+  if (dash && e.style.dashOffset !== null && fmt(e.style.dashOffset) !== "0") strokeAttrs += ` stroke-dashoffset="${fmt(e.style.dashOffset)}"`;
   let text = e.text;
   const r = revealProgress(e);
   if (r !== null) {
@@ -2923,6 +2977,7 @@ function inspectFrame(page, t) {
     if (e.rotation !== null) d.rotation = r4(e.rotation);
     if (e.style.opacity !== null) d.opacity = r4(e.style.opacity);
     if (e.reveal !== null) d.reveal = r4(e.reveal);
+    if (e.style.dashOffset !== null) d.dashOffset = r4(e.style.dashOffset);
     d.strokeWidth = r4(e.style.strokeWidth);
     d.stroke = rgba2(e.style.stroke);
     d.fill = rgba2(e.style.fill);
@@ -2969,7 +3024,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.1.0";
+var VERSION = "0.3.0";
 export {
   BOIL_DRAWINGS,
   DottieFormatError,
@@ -2977,6 +3032,7 @@ export {
   KINDS,
   KNOWN_FIELDS,
   MAX_DURATION,
+  MAX_MARCH,
   Playback,
   SUPPORTED_VERSION,
   VERSION,
@@ -2984,6 +3040,7 @@ export {
   bounds,
   cameraView,
   clampFPS,
+  clampMarch,
   clampTime,
   clear,
   cloneElement,

package/dist/types/cli.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/compile.d.ts

@@ -0,0 +1,19 @@
+/** What follows the runtime; DOTTIE_DATA and DOTTIE_OPTIONS are replaced with JSON. Plain ES5, unminified. */
+export declare const LOADER = ";(function () {\n  var data = DOTTIE_DATA, options = DOTTIE_OPTIONS;\n  var script = document.currentScript;\n  function attr(el, name, value) { el.setAttribute(name.replace(/[A-Z]/g, function (c) { return \"-\" + c.toLowerCase(); }), value); }\n  function mount() {\n    var player = document.createElement(\"dottie-player\"), k;\n    for (k in options) attr(player, k, options[k]);\n    if (script) for (k in script.dataset) if (k !== \"target\") attr(player, k, script.dataset[k]);\n    var target = script && script.dataset.target ? document.querySelector(script.dataset.target) : null;\n    if (target) target.appendChild(player);\n    else if (script && script.parentNode && script.parentNode !== document.head) script.parentNode.insertBefore(player, script);\n    else document.body.appendChild(player);\n    player.setFile(window.Dottie.parseDottie(data));\n  }\n  if (document.readyState === \"loading\" && (!script || script.parentNode === document.head || script.dataset.target)) {\n    document.addEventListener(\"DOMContentLoaded\", mount);\n  } else {\n    mount();\n  }\n})();\n";
+export interface CompileOptions {
+    /** Page name or 1-based number; only that page goes in. The first page by default. */
+    page?: string | number;
+    /** Show this moment (seconds) as a still. */
+    at?: number;
+    clean?: boolean;
+    noControls?: boolean;
+    noAutoplay?: boolean;
+    noLoop?: boolean;
+    label?: string;
+}
+/** JSON safe inside a script: it can't close the tag or start a comment. */
+export declare function scriptJSON(value: unknown): string;
+/** The player's attributes for `options`, as both compilers write them. */
+export declare function playerAttributes(options: CompileOptions): Record<string, string>;
+/** The compiled script for `source` (a .dottie file's text or parsed JSON). `runtime` is dottie-player.min.js. */
+export declare function compile(source: string | unknown, runtime: string, options?: CompileOptions): string;

package/dist/types/index.d.ts

@@ -18,4 +18,4 @@ export interface RenderOptions {
 /** One page of a drawing as an SVG document, as Dottie's own SVG export draws it. */
 export declare function render(source: string | DottieFile | unknown, options?: RenderOptions): string;
 /** The library's version. */
-export declare const VERSION = "0.1.0";
+export declare const VERSION = "0.3.0";

package/dist/types/model.d.ts

@@ -10,7 +10,7 @@ export type ElementKind = "rectangle" | "ellipse" | "diamond" | "text" | "connec
 export type Port = "top" | "right" | "bottom" | "left";
 export type Routing = "straight" | "curved" | "elbow";
 export type Arrowhead = "none" | "arrow" | "triangle" | "dot" | "bar";
-export type Ease = "linear" | "easeIn" | "easeOut" | "easeInOut" | "hold";
+export type Ease = "linear" | "easeIn" | "easeOut" | "easeInOut" | "hold" | "spring" | "bounce" | "elastic";
 export interface Style {
     stroke: RGBA;
     fill: RGBA;
@@ -22,6 +22,8 @@ export interface Style {
     fontSize: number;
     gridSize: number | null;
     opacity: number | null;
+    /** How far into its dash pattern a dashed or dotted line starts; marching ants set it on every frame. */
+    dashOffset: number | null;
 }
 export interface Endpoint {
     elementID: string | null;
@@ -114,6 +116,8 @@ export interface Track {
     boil: boolean | null;
     follow: Follow[] | null;
     repeats: Repeat[] | null;
+    /** Marching ants: points per second the dashes travel (Track.march). */
+    march: number | null;
 }
 export interface CameraKey {
     t: number;
@@ -158,6 +162,9 @@ export declare const KINDS: readonly string[];
  * in a file is newer than this version and is reported in `warnings`. */
 export declare const KNOWN_FIELDS: Record<string, readonly string[]>;
 export declare const MAX_DURATION = 3600;
+/** The fastest march, points per second (Track.maxMarch). */
+export declare const MAX_MARCH = 10000;
+export declare const clampMarch: (v: number | undefined) => number | null;
 export declare const BOIL_DRAWINGS = 3;
 export declare const black: RGBA;
 export declare const clear: RGBA;

package/dist/types/timeline.d.ts

@@ -15,6 +15,9 @@ export declare function followSpan(track: Track, t: number): Follow | null;
 export declare function tracing(e: Element, page: Page): Polyline;
 /** `e` moved onto the path it is following at `t`, if any. `page` has every key applied. */
 export declare function following(track: Track, e: Element, t: number, page: Page): Element;
+/** Where the dashes of a line marching at `speed` stand at `t`, within one pattern `period` (Timeline.marchOffset):
+ * the speed is rounded to a whole number of patterns over the timeline, so a loop is seamless. */
+export declare function marchOffset(tl: Timeline, speed: number, period: number, t: number): number;
 /** The page as a still drawing at `t` seconds (DottieDocument.resolved(at:)). A page without a timeline is returned as is. */
 export declare function resolved(page: Page, t: number): Page;
 /** The moment a still picture of the page shows: its poster, else the end. */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@phin-tech/dottie",
-  "version": "0.1.0",
-  "description": "Render and play Dottie (.dottie) drawings and animations in the browser",
+  "version": "0.3.0",
+  "description": "Render, play and compile Dottie (.dottie) drawings and animations in the browser",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -21,6 +21,10 @@
     "./player": {
       "types": "./dist/types/player-entry.d.ts",
       "default": "./dist/dottie-player.js"
+    },
+    "./compile": {
+      "types": "./dist/types/compile.d.ts",
+      "default": "./dist/compile.js"
     }
   },
   "files": [
@@ -64,5 +68,8 @@
   ],
   "engines": {
     "node": ">=18"
+  },
+  "bin": {
+    "dottie-compile": "dist/dottie-compile.mjs"
   }
 }