@phin-tech/dottie 0.1.0 → 0.3.0

package/dist/dottie-player.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 __export = (target, all) => {
@@ -16,6 +16,7 @@ __export(index_exports, {
   KINDS: () => KINDS,
   KNOWN_FIELDS: () => KNOWN_FIELDS,
   MAX_DURATION: () => MAX_DURATION,
+  MAX_MARCH: () => MAX_MARCH,
   Playback: () => Playback,
   SUPPORTED_VERSION: () => SUPPORTED_VERSION,
   VERSION: () => VERSION,
@@ -23,6 +24,7 @@ __export(index_exports, {
   bounds: () => bounds,
   cameraView: () => cameraView,
   clampFPS: () => clampFPS,
+  clampMarch: () => clampMarch,
   clampTime: () => clampTime,
   clear: () => clear,
   cloneElement: () => cloneElement,
@@ -59,13 +61,13 @@ __export(index_exports, {
 // 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",
@@ -95,7 +97,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"],
@@ -103,6 +105,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 };
@@ -160,7 +164,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) {
@@ -283,7 +288,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;
@@ -2114,7 +2119,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) {
@@ -2149,11 +2187,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);
@@ -2191,10 +2230,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;
@@ -2223,7 +2262,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);
@@ -2237,6 +2276,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);
@@ -2269,6 +2318,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);
@@ -2311,7 +2365,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) {
@@ -2361,8 +2415,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) {
@@ -2446,6 +2501,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) {
@@ -2976,6 +3032,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);
@@ -3022,7 +3079,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";
 
 // src/player-entry.ts
 definePlayer();
@@ -3034,6 +3091,7 @@ export {
   KINDS,
   KNOWN_FIELDS,
   MAX_DURATION,
+  MAX_MARCH,
   Playback,
   SUPPORTED_VERSION,
   VERSION,
@@ -3041,6 +3099,7 @@ export {
   bounds,
   cameraView,
   clampFPS,
+  clampMarch,
   clampTime,
   clear,
   cloneElement,