@phin-tech/dottie 0.6.2 → 0.6.3

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) | |

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.6.3 | 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);
@@ -54,7 +54,7 @@ var KNOWN_FIELDS = {
   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",
@@ -95,7 +95,8 @@ 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"],
@@ -172,7 +173,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 +202,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) {

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.6.3 | 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);
@@ -62,7 +62,7 @@ var KNOWN_FIELDS = {
   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",
@@ -103,7 +103,8 @@ 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"],
@@ -180,7 +181,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 +210,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) {
@@ -581,7 +588,7 @@ function compile(source2, runtime, options2 = {}) {
 }
 
 // src/index.ts
-var VERSION = "0.6.2";
+var VERSION = "0.6.3";
 
 // src/cli.ts
 var usage = `dottie-compile ${VERSION}: a Dottie drawing as one script that plays it on any page.

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.6.3 | 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) => {
@@ -76,7 +76,7 @@ var KNOWN_FIELDS = {
   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",
@@ -117,7 +117,8 @@ 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"],
@@ -199,7 +200,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 +229,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) {
@@ -504,8 +511,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 +952,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 +1058,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 +1724,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 +1743,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 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, index) {
+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 +1924,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": {
@@ -2172,7 +2394,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;
 }
@@ -2948,7 +3175,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 +3210,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 +3221,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 +3230,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 +3313,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>`;
   });
@@ -3735,6 +3962,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 +4006,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.6.3";
 
 // src/player-entry.ts
 definePlayer();