@phin-tech/dottie 0.6.2 → 0.7.0

package/dist/dottie-player.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, value2) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value: value2 }) : obj[key] = value2;
 var __export = (target, all) => {
@@ -66,17 +66,71 @@ __export(index_exports, {
   withRoughness: () => withRoughness
 });
 
+// src/state.ts
+var MAX_NAME = 64;
+function isName(name) {
+  return name.length <= MAX_NAME && /^[A-Za-z_][A-Za-z0-9_]*$/.test(name);
+}
+function conditionNames(condition) {
+  const out = [];
+  for (const any of condition.split("||")) {
+    for (const all of any.split("&&")) {
+      let term = trim(all);
+      if (term.startsWith("!")) term = trim(term.slice(1));
+      if (!isName(term)) return null;
+      out.push(term);
+    }
+  }
+  return out;
+}
+function holds(condition, state) {
+  if (conditionNames(condition) === null) return false;
+  return condition.split("||").some((any) => any.split("&&").every((all) => {
+    let term = trim(all);
+    let negated = false;
+    if (term.startsWith("!")) {
+      negated = true;
+      term = trim(term.slice(1));
+    }
+    return (state[term] ?? false) !== negated;
+  }));
+}
+function stateValues(page, choice) {
+  if (choice === "all") return null;
+  if (choice === "initial") return { ...page.variables ?? {} };
+  return { ...page.variables ?? {}, ...choice };
+}
+function stateHidden(page, choice) {
+  const values = stateValues(page, choice);
+  const out = /* @__PURE__ */ new Set();
+  if (!values) return out;
+  for (const e of page.elements) if (e.when !== null && !holds(e.when, values)) out.add(e.id);
+  return out;
+}
+function changesState(c) {
+  return !!c && (Object.keys(c.set ?? {}).length > 0 || (c.toggle ?? []).length > 0);
+}
+function applyClick(c, state) {
+  const out = { ...state };
+  for (const [k, v] of Object.entries(c.set ?? {})) out[k] = v;
+  for (const k of c.toggle ?? []) out[k] = !(out[k] ?? false);
+  return out;
+}
+function trim(s) {
+  return s.replace(/^[ \t ]+|[ \t ]+$/g, "");
+}
+
 // 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",
@@ -100,6 +154,7 @@ var KNOWN_FIELDS = {
     "anchor",
     "click",
     "hover",
+    "when",
     "symbol",
     "playback",
     "offset",
@@ -117,15 +172,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;
@@ -199,7 +255,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) {
@@ -227,7 +284,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) {
@@ -278,6 +340,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,
@@ -313,13 +376,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);
@@ -420,7 +497,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);
@@ -453,7 +530,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)
     };
   }
 };
@@ -504,8 +582,18 @@ function isAutomaticInk(c) {
 function cloneElement(e) {
   return {
     ...e,
-    style: { ...e.style, stroke: { ...e.style.stroke }, fill: { ...e.style.fill } },
-    connector: e.connector ? { ...e.connector, start: { ...e.connector.start }, end: { ...e.connector.end } } : null
+    style: {
+      ...e.style,
+      stroke: { ...e.style.stroke },
+      fill: { ...e.style.fill },
+      textColor: e.style.textColor ? { ...e.style.textColor } : null
+    },
+    connector: e.connector ? {
+      ...e.connector,
+      start: { ...e.connector.start },
+      end: { ...e.connector.end },
+      waypoints: e.connector.waypoints?.map((w) => ({ ...w })) ?? null
+    } : null
   };
 }
 function orderedElements(page) {
@@ -935,13 +1023,19 @@ function rotatedBounds(e) {
   return { x, y, width: Math.max(...xs) - x, height: Math.max(...ys) - y };
 }
 function resolvingInk(e, ink) {
-  if (!isAutomaticInk(e.style.stroke)) return e;
+  const text = e.style.textColor !== null && isAutomaticInk(e.style.textColor);
+  if (!isAutomaticInk(e.style.stroke) && !text) return e;
   const copy = cloneElement(e);
   const covers = e.style.fillStyle === "solid" || e.style.fillStyle === "grid";
   const onLightFill = covers && e.style.fill.a >= 0.5 && luminance(e.style.fill) > 0.5;
-  copy.style.stroke = luminance(ink) > 0.5 && onLightFill ? { ...black } : { ...ink };
+  const resolved2 = luminance(ink) > 0.5 && onLightFill ? black : ink;
+  if (isAutomaticInk(e.style.stroke)) copy.style.stroke = { ...resolved2 };
+  if (text) copy.style.textColor = { ...resolved2 };
   return copy;
 }
+function labelColor(e) {
+  return e.kind === "text" || e.kind === "note" ? e.style.stroke : e.style.textColor ?? e.style.stroke;
+}
 function shapeContours(e) {
   if (e.kind !== "path" || !e.subpaths) return [];
   const out = [];
@@ -1035,34 +1129,93 @@ function resolve(ep, other, index) {
 function endpoints(e, index) {
   const c = e.connector;
   if (!c) return [{ x: 0, y: 0 }, { x: 0, y: 0 }];
-  return [resolve(c.start, reference(c.end, index), index), resolve(c.end, reference(c.start, index), index)];
+  const w = c.waypoints ?? [];
+  return [
+    resolve(c.start, w.length > 0 ? w[0] : reference(c.end, index), index),
+    resolve(c.end, w.length > 0 ? w[w.length - 1] : reference(c.start, index), index)
+  ];
 }
 function routePoints(r) {
   if (r.kind === "polyline") return r.points;
-  const out = [];
-  for (let i = 0; i <= 24; i++) {
-    const t = i / 24, u = 1 - t;
-    out.push({
-      x: u * u * u * r.a.x + 3 * u * u * t * r.b.x + 3 * u * t * t * r.c.x + t * t * t * r.d.x,
-      y: u * u * u * r.a.y + 3 * u * u * t * r.b.y + 3 * u * t * t * r.c.y + t * t * t * r.d.y
-    });
+  const out = [], p = r.points;
+  for (let s = 0; s < Math.floor((p.length - 1) / 3); s++) {
+    const a = p[3 * s], b = p[3 * s + 1], c = p[3 * s + 2], d = p[3 * s + 3];
+    for (let i = s === 0 ? 0 : 1; i <= 24; i++) {
+      const t = i / 24, u = 1 - t;
+      out.push({
+        x: u * u * u * a.x + 3 * u * u * t * b.x + 3 * u * t * t * c.x + t * t * t * d.x,
+        y: u * u * u * a.y + 3 * u * u * t * b.y + 3 * u * t * t * c.y + t * t * t * d.y
+      });
+    }
   }
   return out;
 }
+var vertical = (p) => p === null ? null : p === "top" || p === "bottom";
+function simplified(pts) {
+  const out = [];
+  for (const q of pts) {
+    const l = out[out.length - 1];
+    if (l && Math.abs(l.x - q.x) < 0.5 && Math.abs(l.y - q.y) < 0.5) continue;
+    if (out.length >= 2) {
+      const p = out[out.length - 2], m = out[out.length - 1];
+      if (Math.abs(p.x - m.x) < 0.5 && Math.abs(m.x - q.x) < 0.5 || Math.abs(p.y - m.y) < 0.5 && Math.abs(m.y - q.y) < 0.5) {
+        out[out.length - 1] = q;
+        continue;
+      }
+    }
+    out.push(q);
+  }
+  return out.length >= 2 ? out : pts;
+}
+function routeThrough(p, c) {
+  switch (c.routing) {
+    case "straight":
+      return { kind: "polyline", points: p };
+    case "curved": {
+      const out = [p[0]];
+      for (let i = 0; i < p.length - 1; i++) {
+        const p0 = p[Math.max(i - 1, 0)], p1 = p[i], p2 = p[i + 1], p3 = p[Math.min(i + 2, p.length - 1)];
+        out.push({ x: p1.x + (p2.x - p0.x) / 6, y: p1.y + (p2.y - p0.y) / 6 });
+        out.push({ x: p2.x - (p3.x - p1.x) / 6, y: p2.y - (p3.y - p1.y) / 6 });
+        out.push(p2);
+      }
+      return { kind: "curve", points: out };
+    }
+    case "elbow": {
+      const a = p[0], first = p[1];
+      let goVertical = vertical(c.start.port) ?? Math.abs(first.y - a.y) > Math.abs(first.x - a.x);
+      const endV = vertical(c.end.port);
+      const out = [a];
+      for (let i = 1; i < p.length; i++) {
+        const q = p[i], cur = out[out.length - 1];
+        const alignedX = Math.abs(cur.x - q.x) < 0.5, alignedY = Math.abs(cur.y - q.y) < 0.5;
+        if (alignedX || alignedY) {
+          out.push(q);
+          if (alignedX !== alignedY) goVertical = !alignedX;
+          continue;
+        }
+        const up = i === p.length - 1 && endV !== null ? !endV : goVertical;
+        out.push(up ? { x: cur.x, y: q.y } : { x: q.x, y: cur.y }, q);
+        goVertical = up;
+      }
+      return { kind: "polyline", points: simplified(out) };
+    }
+  }
+}
 function route(e, index) {
   const c = e.connector;
   if (!c) return { kind: "polyline", points: [] };
   const [a, b] = endpoints(e, index);
+  if (c.waypoints && c.waypoints.length > 0) return routeThrough([a, ...c.waypoints.map((w) => ({ x: w.x, y: w.y })), b], c);
   const dx = b.x - a.x, dy = b.y - a.y;
   const horizontal = Math.abs(dx) >= Math.abs(dy);
   switch (c.routing) {
     case "straight":
       return { kind: "polyline", points: [a, b] };
     case "curved":
-      if (horizontal) return { kind: "cubic", a, b: { x: a.x + dx / 2, y: a.y }, c: { x: b.x - dx / 2, y: b.y }, d: b };
-      return { kind: "cubic", a, b: { x: a.x, y: a.y + dy / 2 }, c: { x: b.x, y: b.y - dy / 2 }, d: b };
+      if (horizontal) return { kind: "curve", points: [a, { x: a.x + dx / 2, y: a.y }, { x: b.x - dx / 2, y: b.y }, b] };
+      return { kind: "curve", points: [a, { x: a.x, y: a.y + dy / 2 }, { x: b.x, y: b.y - dy / 2 }, b] };
     case "elbow": {
-      const vertical = (p) => p === null ? null : p === "top" || p === "bottom";
       const startV = vertical(c.start.port) ?? !horizontal;
       const endV = vertical(c.end.port) ?? !horizontal;
       if (startV && endV) {
@@ -1642,10 +1795,12 @@ function dashPattern(dash, width) {
       return [0.01, Math.max(5, width * 2.6)];
   }
 }
-function connectorParts(e, index) {
+function connectorParts(e, index, page) {
   const c = e.connector;
   if (!c) return [new Path(), new Path()];
   const [a, b] = endpoints(e, index);
+  const r = route(e, index);
+  const hops = c.hops === true && page ? hopCrossings(e, r, page, index) : [];
   const key = [
     e.seed,
     e.style.roughness,
@@ -1659,28 +1814,166 @@ function connectorParts(e, index) {
     a.x,
     a.y,
     b.x,
-    b.y
+    b.y,
+    JSON.stringify(c.waypoints),
+    JSON.stringify(hops)
   ].join("|");
-  return connectors.get(key, () => computeConnector(e, index));
+  return connectors.get(key, () => computeConnector(e, r, hops));
+}
+function hopRadius(strokeWidth) {
+  return Math.max(8, strokeWidth * 4);
 }
-function computeConnector(e, index) {
+function hopSamples(r) {
+  const pts = r.points, out = [];
+  if (r.kind === "polyline") {
+    for (let i = 0; i < pts.length - 1; i++) out.push([pts[i], pts[i + 1]]);
+    return out;
+  }
+  for (let s = 0; s < Math.floor((pts.length - 1) / 3); s++) {
+    const seg = pts.slice(3 * s, 3 * s + 4), samples = [];
+    for (let i = 0; i <= 24; i++) samples.push(cubicPoint(seg, i / 24));
+    out.push(samples);
+  }
+  return out;
+}
+function runningLengths(samples) {
+  const out = [0];
+  for (let i = 1; i < samples.length; i++) out.push(out[i - 1] + Math.hypot(samples[i].x - samples[i - 1].x, samples[i].y - samples[i - 1].y));
+  return out;
+}
+function cubicPoint(p, t) {
+  const u = 1 - t;
+  return {
+    x: u * u * u * p[0].x + 3 * u * u * t * p[1].x + 3 * u * t * t * p[2].x + t * t * t * p[3].x,
+    y: u * u * u * p[0].y + 3 * u * u * t * p[1].y + 3 * u * t * t * p[2].y + t * t * t * p[3].y
+  };
+}
+function subCubic(p, t0, t1) {
+  const split = (q, t) => {
+    const lerp = (a, b) => ({ x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t });
+    const ab = lerp(q[0], q[1]), bc = lerp(q[1], q[2]), cd = lerp(q[2], q[3]);
+    const abc = lerp(ab, bc), bcd = lerp(bc, cd), m = lerp(abc, bcd);
+    return [[q[0], ab, abc, m], [m, bcd, cd, q[3]]];
+  };
+  const left = split(p, t1)[0];
+  return t1 > 0 ? split(left, t0 / t1)[1] : [p[0], p[0], p[0], p[0]];
+}
+function hopCrossings(e, r, page, index) {
+  const segments = hopSamples(r);
+  if (segments.length === 0) return [];
+  const visible = new Set(page.layers.filter((l) => l.visible).map((l) => l.id));
+  const beneath = [];
+  for (const o of orderedElements(page)) {
+    if (o.id === e.id) break;
+    if (o.kind !== "connector" || !visible.has(o.layerID)) continue;
+    beneath.push(routePoints(route(o, index)));
+  }
+  const rad = hopRadius(e.style.strokeWidth);
+  const out = [];
+  for (const samples of segments) {
+    const along = runningLengths(samples);
+    const length = along[along.length - 1];
+    const found = [];
+    for (let i = 0; i < samples.length - 1; i++) {
+      const p = samples[i], q = samples[i + 1];
+      const dx = q.x - p.x, dy = q.y - p.y;
+      for (const line2 of beneath) {
+        for (let k = 0; k < line2.length - 1; k++) {
+          const a = line2[k], b = line2[k + 1];
+          const ex = b.x - a.x, ey = b.y - a.y;
+          const det = dx * ey - dy * ex;
+          if (Math.abs(det) < 1e-9) continue;
+          const wx = a.x - p.x, wy = a.y - p.y;
+          const t = (wx * ey - wy * ex) / det, s = (wx * dy - wy * dx) / det;
+          if (t > 0 && t < 1 && s >= 0 && s <= 1) found.push(along[i] + t * (along[i + 1] - along[i]));
+        }
+      }
+    }
+    const kept = [];
+    for (const at of found.sort((x, y) => x - y)) {
+      if (at < rad + 2 || at > length - rad - 2) continue;
+      if (kept.length > 0 && at - kept[kept.length - 1] < 2 * rad + 2) continue;
+      kept.push(at);
+    }
+    out.push(kept);
+  }
+  return out;
+}
+function computeConnector(e, r, hops) {
   const c = e.connector;
   const rng = new SeededRNG(e.seed);
   const rough = e.style.roughness, bow = e.style.bowing;
   const path = new Path(), solid = new Path();
-  const r = route(e, index);
+  const w = rough * 3;
+  const j = () => rng.signed() * w;
+  const hop = (s, t, u, rad2) => {
+    let n = { x: u.y, y: -u.x };
+    if (n.y > 1e-9 || Math.abs(n.y) <= 1e-9 && n.x > 0) n = { x: -n.x, y: -n.y };
+    const k = rad2 * 0.5523;
+    const m = { x: (s.x + t.x) / 2, y: (s.y + t.y) / 2 };
+    const top = { x: m.x + n.x * rad2, y: m.y + n.y * rad2 };
+    path.moveTo(s);
+    const a1x = s.x + n.x * k + j(), a1y = s.y + n.y * k + j(), a2x = top.x - u.x * k + j(), a2y = top.y - u.y * k + j();
+    path.curveTo(top, { x: a1x, y: a1y }, { x: a2x, y: a2y });
+    const b1x = top.x + u.x * k + j(), b1y = top.y + u.y * k + j(), b2x = t.x + n.x * k + j(), b2y = t.y + n.y * k + j();
+    path.curveTo(t, { x: b1x, y: b1y }, { x: b2x, y: b2y });
+  };
+  const rad = hopRadius(e.style.strokeWidth);
   if (r.kind === "polyline") {
     const pts2 = r.points;
+    const straight = (p, q) => {
+      if (rough <= 0) path.moveTo(p).lineTo(q);
+      else line(p, q, rng, rough, bow, true, path);
+    };
     for (let i = 0; i < Math.max(pts2.length - 1, 0); i++) {
-      if (rough <= 0) path.moveTo(pts2[i]).lineTo(pts2[i + 1]);
-      else line(pts2[i], pts2[i + 1], rng, rough, bow, true, path);
+      const p = pts2[i], q = pts2[i + 1];
+      const length = Math.hypot(q.x - p.x, q.y - p.y);
+      const u = length > 0 ? { x: (q.x - p.x) / length, y: (q.y - p.y) / length } : { x: 0, y: 0 };
+      const at = (d) => ({ x: p.x + u.x * d, y: p.y + u.y * d });
+      let from = p;
+      for (const d of i < hops.length ? hops[i] : []) {
+        const s = at(d - rad), t = at(d + rad);
+        straight(from, s);
+        hop(s, t, u, rad);
+        from = t;
+      }
+      straight(from, q);
     }
   } else {
-    path.moveTo(r.a);
-    const w = rough * 3;
-    const j = () => rng.signed() * w;
-    const c1x = r.b.x + j(), c1y = r.b.y + j(), c2x = r.c.x + j(), c2y = r.c.y + j();
-    path.curveTo(r.d, { x: c1x, y: c1y }, { x: c2x, y: c2y });
+    const pts2 = r.points;
+    const samples = hopSamples(r);
+    path.moveTo(pts2[0]);
+    for (let s = 0; s < Math.floor((pts2.length - 1) / 3); s++) {
+      const b = pts2[3 * s + 1], c2 = pts2[3 * s + 2], d = pts2[3 * s + 3];
+      const c1x = b.x + j(), c1y = b.y + j(), c2x = c2.x + j(), c2y = c2.y + j();
+      const here = s < hops.length ? hops[s] : [];
+      if (here.length === 0) {
+        path.curveTo(d, { x: c1x, y: c1y }, { x: c2x, y: c2y });
+        continue;
+      }
+      const cubic = [pts2[3 * s], { x: c1x, y: c1y }, { x: c2x, y: c2y }, d];
+      const along = runningLengths(samples[s]);
+      const param = (at) => {
+        let i = 0;
+        while (i < along.length - 2 && along[i + 1] < at) i++;
+        const span = along[i + 1] - along[i];
+        return (i + (span > 0 ? (at - along[i]) / span : 0)) / 24;
+      };
+      let from = 0;
+      for (const at of here) {
+        const t0 = param(at - rad), t1 = param(at + rad);
+        const piece = subCubic(cubic, from, t0);
+        if (s > 0 || from > 0) path.moveTo(piece[0]);
+        path.curveTo(piece[3], piece[1], piece[2]);
+        const a = cubicPoint(cubic, t0), z = cubicPoint(cubic, t1);
+        const width = Math.hypot(z.x - a.x, z.y - a.y);
+        const u = width > 0 ? { x: (z.x - a.x) / width, y: (z.y - a.y) / width } : { x: 0, y: 0 };
+        hop(a, z, u, width / 2);
+        from = t1;
+      }
+      const rest = subCubic(cubic, from, 1);
+      path.moveTo(rest[0]).curveTo(rest[3], rest[1], rest[2]);
+    }
   }
   const pts = routePoints(r);
   const size = Math.max(10, e.style.strokeWidth * 5);
@@ -1702,10 +1995,10 @@ function computeConnector(e, index) {
         solid.moveTo(tip).lineTo(w1).lineTo(w2).close();
         break;
       case "dot": {
-        const rad = size * 0.32;
+        const rad2 = size * 0.32;
         const ang = Math.atan2(tip.y - from.y, tip.x - from.x);
-        const cx = tip.x - rad * Math.cos(ang), cy = tip.y - rad * Math.sin(ang);
-        solid.addEllipse({ x: cx - rad, y: cy - rad, width: 2 * rad, height: 2 * rad });
+        const cx = tip.x - rad2 * Math.cos(ang), cy = tip.y - rad2 * Math.sin(ang);
+        solid.addEllipse({ x: cx - rad2, y: cy - rad2, width: 2 * rad2, height: 2 * rad2 });
         break;
       }
       case "bar": {
@@ -1908,17 +2201,20 @@ function trackMap(tl) {
   for (const t of tl.tracks) if (!m.has(t.element)) m.set(t.element, t);
   return m;
 }
-function resolved(page, t) {
-  return expandingSymbols(posed(page, t), clampTime(t));
+function resolved(page, t, state = "initial") {
+  return expandingSymbols(posed(page, t, state), clampTime(t));
 }
-function posed(page, t) {
-  const timeline = page.timeline;
+var EMPTY_TIMELINE = { fps: 12, duration: 0, boil: null, settle: null, poster: null, tracks: [], camera: null, markers: null };
+function posed(page, t, state = "initial") {
+  const off = stateHidden(page, state);
+  const timeline = page.timeline ?? (off.size === 0 ? null : EMPTY_TIMELINE);
   if (!timeline) return page;
   t = clampTime(t);
   const tracks = trackMap(timeline);
   const reseed = timeline.boil === null ? null : Math.trunc(Math.floor(t * clampFPS(timeline.fps) + 1e-9) / Math.max(1, timeline.boil)) % BOIL_DRAWINGS >>> 0;
   const hidden = /* @__PURE__ */ new Set();
   for (const tr of tracks.values()) if (!isVisible(tr, t)) hidden.add(tr.element);
+  for (const id of off) hidden.add(id);
   let moving = null;
   if (timeline.settle === true) {
     moving = /* @__PURE__ */ new Set();
@@ -1957,7 +2253,7 @@ function posed(page, t) {
   elements = elements.map((e) => {
     const c = e.connector;
     if (!c || ![c.start.elementID, c.end.elementID].some((id) => id !== null && hidden.has(id))) return e;
-    if (!(tracks.get(e.id)?.keys.some((k) => k.visible !== void 0) ?? false)) {
+    if (!(tracks.get(e.id)?.keys.some((k) => k.visible !== void 0) ?? false) || [c.start.elementID, c.end.elementID].some((id) => id !== null && off.has(id))) {
       gone.add(e.id);
       return e;
     }
@@ -1973,7 +2269,7 @@ function posterTime(page) {
   return page.timeline ? page.timeline.poster ?? page.timeline.duration : 0;
 }
 function still(page) {
-  return page.timeline ? resolved(page, posterTime(page)) : expandingSymbols(page, 0);
+  return page.timeline ? resolved(page, posterTime(page)) : expandingSymbols(posed(page, 0), 0);
 }
 function cameraRect(tl, t) {
   const keys = tl.camera ?? [];
@@ -2082,7 +2378,7 @@ function filled(s, args) {
   }) };
 }
 function symbolPage(s) {
-  return { id: s.id, name: s.name, layers: s.layers, elements: s.elements, theme: null, timeline: s.timeline, symbols: null };
+  return { id: s.id, name: s.name, layers: s.layers, elements: s.elements, theme: null, timeline: s.timeline, symbols: null, variables: null };
 }
 function hasInstances(page) {
   return page.elements.some((e) => e.kind === "symbol");
@@ -2172,7 +2468,12 @@ function placed(inner, instance, symbol) {
       const q = point(p);
       return { elementID: null, port: p.port, x: q.x, y: q.y };
     };
-    e.connector = { ...inner.connector, start: end(inner.connector.start), end: end(inner.connector.end) };
+    e.connector = {
+      ...inner.connector,
+      start: end(inner.connector.start),
+      end: end(inner.connector.end),
+      waypoints: inner.connector.waypoints?.map(point) ?? null
+    };
   }
   return e;
 }
@@ -2206,16 +2507,21 @@ function clickTargets(page, file) {
   let pageOf = null;
   for (const e of page.elements) {
     const c = e.click;
+    const state = c && changesState(c) ? { ...c.set ? { set: c.set } : {}, ...c.toggle ? { toggle: c.toggle } : {} } : null;
     if (c?.scene) {
       const i = sceneNamed(c.scene, markers);
       if (i >= 0) {
-        out.set(e.id, { scene: i });
+        out.set(e.id, { scene: i, ...state });
         continue;
       }
     }
     const url = (c?.url ? allowedURL(c.url) : null) ?? webLink(e.url);
     if (url) {
-      out.set(e.id, { url });
+      out.set(e.id, { url, ...state });
+      continue;
+    }
+    if (state) {
+      out.set(e.id, { state: true, ...state });
       continue;
     }
     if (e.link && file && file.pages.length > 1) {
@@ -2948,7 +3254,7 @@ function svgParts(page, background, fixed, links = false) {
     if (!visible.has(e.layerID)) continue;
     const alpha = Math.min(Math.max(e.style.opacity ?? 1, 0), 1);
     if (alpha <= 0) continue;
-    let body = svgElement(e, index, bg);
+    let body = svgElement(e, index, bg, d);
     if (angle(e) !== 0 && e.kind !== "connector") {
       body = `<g transform="rotate(${fmt(angle(e) * 180 / Math.PI)} ${fmt(midX(frame(e)))} ${fmt(midY(frame(e)))})">
 ${body}</g>
@@ -2983,7 +3289,7 @@ function typed(s, progress) {
 function revealProgress(e) {
   return e.reveal !== null && e.reveal < 1 ? Math.max(0, e.reveal) : null;
 }
-function svgElement(e, index, labelBackground) {
+function svgElement(e, index, labelBackground, page) {
   const stroke = color(e.style.stroke);
   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);
@@ -2994,7 +3300,7 @@ function svgElement(e, index, labelBackground) {
   if (r !== null) {
     if (e.kind === "text") text = typed(text ?? "", r);
     else if (e.kind === "connector") {
-      return `<path d="${connectorParts(e, index)[0].trimmed(r).data()}" fill="none" ${strokeAttrs}/>
+      return `<path d="${connectorParts(e, index, page)[0].trimmed(r).data()}" fill="none" ${strokeAttrs}/>
 `;
     } else {
       return `<path d="${outline(e).trimmed(r).data()}" fill="none" ${strokeAttrs}/>
@@ -3003,7 +3309,7 @@ function svgElement(e, index, labelBackground) {
   }
   switch (e.kind) {
     case "connector": {
-      const [line2, filled2] = connectorParts(e, index);
+      const [line2, filled2] = connectorParts(e, index, page);
       let s = `<path d="${line2.data()}" fill="none" ${strokeAttrs}/>
 `;
       if (!filled2.isEmpty) s += `<path d="${filled2.data()}" fill="${stroke}" stroke="none"/>
@@ -3086,7 +3392,7 @@ function textElement(text, f, e, centered) {
   const total = lineHeight * lines.length;
   const x = centered ? midX(f) : f.x;
   const top = centered ? midY(f) - total / 2 : f.y;
-  let s = `<text x="${fmt(x)}" font-family="${cssFamily(e.style.font)}" font-size="${fmt(size)}" fill="${color(e.style.stroke)}"${centered ? ` text-anchor="middle"` : ""}>`;
+  let s = `<text x="${fmt(x)}" font-family="${cssFamily(e.style.font)}" font-size="${fmt(size)}" fill="${color(labelColor(e))}"${centered ? ` text-anchor="middle"` : ""}>`;
   lines.forEach((line2, i) => {
     s += `<tspan x="${fmt(x)}" y="${fmt(top + lineHeight * (i + 0.8))}">${escapeXML(line2)}</tspan>`;
   });
@@ -3129,6 +3435,10 @@ var Playback = class {
     __publicField(this, "plan");
     __publicField(this, "scenes");
     __publicField(this, "sceneNames");
+    /** Whether each scene loops (Marker.loop). */
+    __publicField(this, "sceneLoops");
+    /** The page's variables now: their starting values until clicks change them. */
+    __publicField(this, "state");
     __publicField(this, "background");
     __publicField(this, "ink");
     /** What clicking each clickable element does, by element id. */
@@ -3188,6 +3498,8 @@ var Playback = class {
     };
     this.scenes = (page.timeline?.markers ?? []).map((m) => near(m.t));
     this.sceneNames = (page.timeline?.markers ?? []).map((m) => m.name);
+    this.sceneLoops = (page.timeline?.markers ?? []).map((m) => m.loop === true);
+    this.state = { ...page.variables ?? {} };
     const theme = themeNamed(page.theme);
     this.background = theme?.background ?? WHITE;
     this.ink = theme?.ink ?? { r: 0.12, g: 0.12, b: 0.13, a: 1 };
@@ -3238,7 +3550,7 @@ var Playback = class {
     const times = /* @__PURE__ */ new Map();
     for (const [id, start] of this.replayStarts) times.set(id, Math.min((now - start) / 1e3, this.replays.get(id) ?? 0));
     const tc = clampTime(t);
-    const pose = posed(this.page, tc);
+    const pose = posed(this.page, tc, this.state);
     const frame2 = expandingSymbols(pose, tc, true, times);
     const { parts } = svgParts(frame2, this.background, r);
     const owned = (m, parts2) => {
@@ -3360,6 +3672,20 @@ ${h}</g>
     });
     return s;
   }
+  /** The frame after scene `s`'s last: the next scene's, or the frame count after the last scene. */
+  sceneEnd(s) {
+    return this.scenes.find((f, j) => j > s && f > this.scenes[s]) ?? this.frameCount;
+  }
+  /** Where playing goes from frame `i`, and whether it stops there: on into a looping scene, round to the start of
+   * the looping scene `i` ends, or a stop at a scene or the end (`loops`: whether the timeline loops at its end). */
+  step(i, loops) {
+    const next = i + 1;
+    const s = this.sceneAt(i);
+    if (s >= 0 && this.sceneLoops[s] && next >= this.sceneEnd(s)) return { frame: this.scenes[s], stop: false };
+    if (next >= this.frameCount) return { frame: 0, stop: !loops || this.scenes.length > 0 };
+    const entered = this.scenes.indexOf(next);
+    return { frame: next, stop: entered >= 0 && !this.sceneLoops[entered] };
+  }
 };
 var ElementBase = typeof HTMLElement === "undefined" ? class {
 } : HTMLElement;
@@ -3513,7 +3839,7 @@ var DottiePlayer = class extends ElementBase {
       this.setPlaying(false);
       return;
     }
-    this.setPlaying(!this.hasAttribute("no-autoplay") && !p.scenes.includes(0));
+    this.setPlaying(!this.hasAttribute("no-autoplay") && (!p.scenes.includes(0) || p.sceneLoops[p.scenes.indexOf(0)]));
   }
   // MARK: Playback
   get paused() {
@@ -3539,11 +3865,13 @@ var DottiePlayer = class extends ElementBase {
   pause() {
     this.setPlaying(false);
   }
-  /** Plays on to the next scene (from the start after the last). */
+  /** Plays on to the next scene (from the start after the last). Out of a looping scene it jumps to the next. */
   nextScene() {
     const p = this.playback;
     if (!p) return;
-    if (p.frame >= p.frameCount - 1) p.show(0);
+    const s = p.sceneAt(p.frame);
+    if (s >= 0 && p.sceneLoops[s]) p.show(s + 1 < p.scenes.length ? p.scenes[s + 1] : 0);
+    else if (p.frame >= p.frameCount - 1) p.show(0);
     this.setPlaying(true);
   }
   /** Back to the start of this scene, or the one before if already there. */
@@ -3572,6 +3900,8 @@ var DottiePlayer = class extends ElementBase {
       this.scheduleReplay();
     }
     if (!click) return;
+    if (click.set || click.toggle) this.setState(applyClick({ scene: null, url: null, set: click.set ?? null, toggle: click.toggle ?? null }, p.state));
+    if ("state" in click) return;
     if ("url" in click) {
       if (/^(https?:|mailto:)/i.test(click.url)) window.open(click.url, "_blank", "noopener");
     } else if ("page" in click) {
@@ -3579,13 +3909,27 @@ var DottiePlayer = class extends ElementBase {
     } else if (click.scene >= 0 && click.scene < p.scenes.length) {
       if (reduced || this.hasAttribute("at") || p.frameCount < 2) {
         this.setPlaying(false);
-        p.show(click.scene + 1 < p.scenes.length ? p.scenes[click.scene + 1] : p.frameCount - 1);
+        p.show(p.sceneLoops[click.scene] ? p.scenes[click.scene] : click.scene + 1 < p.scenes.length ? p.scenes[click.scene + 1] : p.frameCount - 1);
       } else {
         p.show(p.scenes[click.scene]);
         this.setPlaying(true);
       }
     }
   }
+  /** The page's variables now. */
+  get variables() {
+    return { ...this.playback?.state ?? {} };
+  }
+  /** Gives the page's variables these values (the others keep theirs), redraws, and fires `state`. */
+  setState(values) {
+    const p = this.playback;
+    if (!p) return;
+    const next = { ...p.state, ...values };
+    if (Object.keys(next).every((k) => next[k] === p.state[k])) return;
+    p.state = next;
+    p.redraw();
+    this.dispatchEvent(new CustomEvent("state", { detail: { variables: { ...next } } }));
+  }
   /** Redraws, while the page itself stands still, as long as a clicked copy is playing through. */
   scheduleReplay() {
     if (this.replayRaf) return;
@@ -3611,7 +3955,8 @@ var DottiePlayer = class extends ElementBase {
   schedule() {
     if (this.playing && this.visible && !this.raf && this.isConnected) this.raf = requestAnimationFrame((now) => this.tick(now));
   }
-  /** Steps whole frames at the timeline's rate; with scenes, playing stops at each one and at the end. */
+  /** Steps whole frames at the timeline's rate; with scenes, playing stops at each one and at the end, except that a
+   * looping scene plays round (Playback.step). */
   tick(now) {
     this.raf = 0;
     const p = this.playback;
@@ -3622,14 +3967,14 @@ var DottiePlayer = class extends ElementBase {
     let advanced = false;
     while (this.playing && this.acc >= step) {
       this.acc -= step;
-      const next = p.frame + 1;
-      if (next >= p.frameCount && (p.scenes.length || this.hasAttribute("no-loop"))) {
+      const { frame: frame2, stop } = p.step(p.frame, !this.hasAttribute("no-loop"));
+      if (stop && frame2 === 0 && p.frame + 1 >= p.frameCount) {
         this.setPlaying(false);
         break;
       }
-      p.frame = next % p.frameCount;
+      p.frame = frame2;
       advanced = true;
-      if (p.scenes.includes(p.frame)) {
+      if (stop) {
         this.setPlaying(false);
         break;
       }
@@ -3735,6 +4080,7 @@ function inspectFrame(page, t) {
     d.strokeWidth = r4(e.style.strokeWidth);
     d.stroke = rgba2(e.style.stroke);
     d.fill = rgba2(e.style.fill);
+    if (e.style.textColor !== null) d.textColor = rgba2(e.style.textColor);
     if (e.kind === "connector") {
       const [a, b] = endpoints(e, index);
       d.start = pt(a);
@@ -3778,7 +4124,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.6.2";
+var VERSION = "0.7.0";
 
 // src/player-entry.ts
 definePlayer();