@pixerate/editor 0.140.4 → 0.142.1

package/dist/vector/index.d.cts

@@ -52,3 +52,4 @@ export { createCanvasTextShaper, createMetricTextShaper, createOutlineTextShaper
 export { loadOpenTypeFont, parseOpenTypeFont, type OpenTypeFont } from '../text/opentype.cjs';
 export type { TextFont, TextShaper } from '../text/types.cjs';
 export * from './effect-tools.cjs';
+export * from './playback.cjs';

package/dist/vector/index.d.ts

@@ -52,3 +52,4 @@ export { createCanvasTextShaper, createMetricTextShaper, createOutlineTextShaper
 export { loadOpenTypeFont, parseOpenTypeFont, type OpenTypeFont } from '../text/opentype.js';
 export type { TextFont, TextShaper } from '../text/types.js';
 export * from './effect-tools.js';
+export * from './playback.js';

package/dist/vector/index.js

@@ -4169,8 +4169,8 @@ var Page = class {
     const fns = list.slice(1).map((s, k) => `<< /FunctionType 2 /Domain [0 1] /C0 ${rgb(list[k].c)} /C1 ${rgb(s.c)} /N 1 >>`);
     const fn = fns.length === 1 ? fns[0] : `<< /FunctionType 3 /Domain [${n(list[0].t)} ${n(list[list.length - 1].t)}] /Functions [${fns.join(" ")}] /Bounds [${list.slice(1, -1).map((s) => n(s.t)).join(" ")}] /Encode [${fns.map(() => "0 1").join(" ")}] >>`;
     const a = def.attrs;
-    const num = (k, d = 0) => a[k] === void 0 ? d : parseFloat(String(a[k]));
-    const coords = def.type === "linear" ? `/ShadingType 2 /Coords [${n(num("x1"))} ${n(num("y1"))} ${n(num("x2", 1))} ${n(num("y2"))}]` : `/ShadingType 3 /Coords [${n(num("fx", num("cx", 0.5)))} ${n(num("fy", num("cy", 0.5)))} ${n(num("fr"))} ${n(num("cx", 0.5))} ${n(num("cy", 0.5))} ${n(num("r", 0.5))}]`;
+    const num2 = (k, d = 0) => a[k] === void 0 ? d : parseFloat(String(a[k]));
+    const coords = def.type === "linear" ? `/ShadingType 2 /Coords [${n(num2("x1"))} ${n(num2("y1"))} ${n(num2("x2", 1))} ${n(num2("y2"))}]` : `/ShadingType 3 /Coords [${n(num2("fx", num2("cx", 0.5)))} ${n(num2("fy", num2("cy", 0.5)))} ${n(num2("fr"))} ${n(num2("cx", 0.5))} ${n(num2("cy", 0.5))} ${n(num2("r", 0.5))}]`;
     this.writer.shadingDicts.set(`${this.writer.pageIndex}:${name}`, `<< ${coords} /ColorSpace /DeviceRGB /Function ${fn} /Extend [true true] >>`);
     return name;
   }
@@ -4807,28 +4807,28 @@ function gradientOf(it, frame) {
 }
 function effectOf(it, frame, c, id) {
   const v = (k) => lottieValueAt(it[k], frame);
-  const num = (k, d = 0) => v(k)[0] ?? d;
+  const num2 = (k, d = 0) => v(k)[0] ?? d;
   let raw = null;
   switch (it.ty) {
     case "tm":
-      raw = { type: "trim", params: { start: num("s"), end: num("e", 100), offset: num("o"), mode: Number(it.m) === 2 ? "individual" : "simultaneous" } };
+      raw = { type: "trim", params: { start: num2("s"), end: num2("e", 100), offset: num2("o"), mode: Number(it.m) === 2 ? "individual" : "simultaneous" } };
       break;
     case "rd":
-      raw = { type: "roundCorners", params: { radius: num("r") } };
+      raw = { type: "roundCorners", params: { radius: num2("r") } };
       break;
     case "pb":
-      raw = { type: "puckerBloat", params: { amount: num("a") } };
+      raw = { type: "puckerBloat", params: { amount: num2("a") } };
       break;
     case "tw": {
       const [x = c.x, y = c.y] = v("c");
-      raw = { type: "twist", params: { angle: num("a"), center: { x: x - c.x, y: y - c.y } } };
+      raw = { type: "twist", params: { angle: num2("a"), center: { x: x - c.x, y: y - c.y } } };
       break;
     }
     case "zz":
-      raw = { type: "zigzag", params: { size: num("s"), ridges: num("r"), smooth: num("pt", 1) === 2 } };
+      raw = { type: "zigzag", params: { size: num2("s"), ridges: num2("r"), smooth: num2("pt", 1) === 2 } };
       break;
     case "op":
-      raw = { type: "offset", params: { amount: num("a"), join: ["miter", "round", "bevel"][Number(it.lj ?? 1) - 1] ?? "miter", miterLimit: num("ml", 4) || 4 } };
+      raw = { type: "offset", params: { amount: num2("a"), join: ["miter", "round", "bevel"][Number(it.lj ?? 1) - 1] ?? "miter", miterLimit: num2("ml", 4) || 4 } };
       break;
     case "mm":
       raw = { type: "merge", params: { mode: MERGE[Number(it.mm ?? 1) - 1] ?? "merge" } };
@@ -4844,7 +4844,7 @@ function effectOf(it, frame, c, id) {
       const [sx, sy] = at("s", [100, 100]);
       raw = {
         type: "repeater",
-        params: { copies: num("c", 1), offset: num("o"), position: { x: px, y: py }, anchor: { x: ax - c.x, y: ay - c.y }, rotation: at("r", [0])[0], scale: { x: sx, y: sy }, startOpacity: at("so", [100])[0], endOpacity: at("eo", [100])[0], composite: Number(it.m) === 1 ? "above" : "below" }
+        params: { copies: num2("c", 1), offset: num2("o"), position: { x: px, y: py }, anchor: { x: ax - c.x, y: ay - c.y }, rotation: at("r", [0])[0], scale: { x: sx, y: sy }, startOpacity: at("so", [100])[0], endOpacity: at("eo", [100])[0], composite: Number(it.m) === 1 ? "above" : "below" }
       };
       break;
     }
@@ -6456,11 +6456,11 @@ function segsToSubpath(segs, closed, types) {
     const last = anchors.pop();
     if (last.in) anchors[0].in = last.in;
   }
-  const typed = anchors.map((a) => {
+  const typed2 = anchors.map((a) => {
     const type = types.get(`${a.x},${a.y}`);
     return tidy(type ? { ...a, type } : a, !!type);
   });
-  return { anchors: typed, closed };
+  return { anchors: typed2, closed };
 }
 var isZeroSeg = (s) => s.c.every((p) => Math.abs(p[0] - s.c[0][0]) < 1e-9 && Math.abs(p[1] - s.c[0][1]) < 1e-9);
 function mergePair(a, b, tol) {
@@ -8497,10 +8497,10 @@ var VectorEditorController = class _VectorEditorController {
     if (node?.type !== "path") return { ok: false, message: "There is no such path." };
     const g = vectorStrokeWidthGeometry(node);
     if (!g || !(g.unit > 0)) return { ok: false, message: "The path has no visible stroke." };
-    const num = (v) => typeof v === "number" && Number.isFinite(v) ? v : void 0;
-    const t = num(values.t);
-    const left = num(values.left);
-    const right = num(values.right);
+    const num2 = (v) => typeof v === "number" && Number.isFinite(v) ? v : void 0;
+    const t = num2(values.t);
+    const left = num2(values.left);
+    const right = num2(values.right);
     const scale = (w) => w === void 0 ? void 0 : Math.max(0, w) / g.unit;
     const profile = sanitizeWidthProfile(node.strokeWidthProfile);
     let points;
@@ -10768,18 +10768,18 @@ var VectorEditorController = class _VectorEditorController {
     const sp = pen && node ? node.subpaths[pen.subpath] : void 0;
     if (!pen || !node || !sp?.anchors.length) return { ok: false, message: "Start a path with the pen first: typed entry places its next point." };
     const last = getAnchorWorld(this.doc, { nodeId: pen.nodeId, subpath: pen.subpath, index: sp.anchors.length - 1 });
-    const num = "(-?(?:\\d+\\.?\\d*|\\.\\d+))";
+    const num2 = "(-?(?:\\d+\\.?\\d*|\\.\\d+))";
     const t = text.replace(/\s+/g, "");
     let target = null;
     let m;
-    if (m = t.match(new RegExp(`^@${num},${num}$`))) target = { x: last.x + parseFloat(m[1]), y: last.y + parseFloat(m[2]) };
-    else if (m = t.match(new RegExp(`^${num},${num}$`))) target = { x: parseFloat(m[1]), y: parseFloat(m[2]) };
-    else if (m = t.match(new RegExp(`^${num}<${num}$`))) {
+    if (m = t.match(new RegExp(`^@${num2},${num2}$`))) target = { x: last.x + parseFloat(m[1]), y: last.y + parseFloat(m[2]) };
+    else if (m = t.match(new RegExp(`^${num2},${num2}$`))) target = { x: parseFloat(m[1]), y: parseFloat(m[2]) };
+    else if (m = t.match(new RegExp(`^${num2}<${num2}$`))) {
       const base = this.snap.polarRelative ? (this.penAngles().angles?.[0] ?? this.snap.angles[0] ?? 0) - (this.snap.angles[0] ?? 0) : 0;
       const dir = vectorAngleDirection(parseFloat(m[2]) + base);
       const len2 = parseFloat(m[1]);
       target = { x: last.x + dir.x * len2, y: last.y + dir.y * len2 };
-    } else if (m = t.match(new RegExp(`^${num}$`))) {
+    } else if (m = t.match(new RegExp(`^${num2}$`))) {
       const toward = this.pointer;
       const d = toward ? Math.hypot(toward.x - last.x, toward.y - last.y) : 0;
       if (!toward || d < 1e-9) return { ok: false, message: "Point the pointer the way the distance should go (or type length<angle)." };
@@ -14974,6 +14974,120 @@ function pencilPressureProfile(points, pressures) {
   return pressureWidthProfile(s.map((d, i) => ({ t: d / total, pressure: pressures[i] })));
 }
 
+// src/vector/playback.ts
+var VECTOR_PLAYBACK_KIND = "vector";
+function createVectorPlaybackLocator(controller) {
+  return (ref) => {
+    if (ref.kind !== VECTOR_PLAYBACK_KIND && ref.kind !== "item") return null;
+    const node = controller.getNode(ref.id);
+    if (!node) return null;
+    const b = vectorNodeBounds(node, vectorParentMatrix(controller.getState().document.nodes, ref.id) ?? IDENTITY_MATRIX);
+    if (!b) return null;
+    const w = Math.max(b.width, 4);
+    const h = Math.max(b.height, 4);
+    return { x: b.x - (w - b.width) / 2, y: b.y - (h - b.height) / 2, width: w, height: h };
+  };
+}
+var num = (v) => typeof v === "number" && Number.isFinite(v);
+var dragOut = (from, to) => [
+  { type: "move", to: from },
+  { type: "press" },
+  { type: "drag", to },
+  { type: "release" }
+];
+var click = (at) => [{ type: "move", to: at }, { type: "press" }, { type: "release" }];
+var typed = (text) => {
+  if (typeof text !== "string" || !text.trim()) return [];
+  const line2 = text.replace(/\s+/g, " ").trim();
+  return [{ type: "type", text: line2.length > 60 ? `${line2.slice(0, 59)}\u2026` : line2 }];
+};
+function pathPoints(d, max = 24) {
+  let anchors;
+  try {
+    anchors = bezierToSubpaths(d).flatMap((s) => s.anchors.map((a) => ({ x: a.x, y: a.y })));
+  } catch {
+    return [];
+  }
+  if (anchors.length <= max) return anchors;
+  const step = (anchors.length - 1) / (max - 1);
+  return Array.from({ length: max }, (_, i) => anchors[Math.round(i * step)]);
+}
+function trace(points) {
+  if (!points.length) return [];
+  const [first, ...rest] = points;
+  const total = rest.reduce((sum, p, i) => sum + Math.hypot(p.x - (i ? rest[i - 1] : first).x, p.y - (i ? rest[i - 1] : first).y), 0);
+  const ms = (p, i) => {
+    const prev = i ? rest[i - 1] : first;
+    return total > 0 ? Math.max(16, 900 * Math.hypot(p.x - prev.x, p.y - prev.y) / total) : 16;
+  };
+  return [{ type: "move", to: first }, { type: "press" }, ...rest.map((p, i) => ({ type: "drag", to: p, ms: ms(p, i) })), { type: "release" }];
+}
+var PLANS = {
+  addShape: (p) => {
+    if (![p.x, p.y, p.width, p.height].every(num)) return null;
+    return dragOut({ x: p.x, y: p.y }, { x: p.x + p.width, y: p.y + p.height });
+  },
+  addPath: (p) => typeof p.d === "string" ? trace(pathPoints(p.d)) : null,
+  addText: (p) => {
+    if (typeof p.path === "string") {
+      const points = pathPoints(p.path, 2);
+      return points.length ? [...click(points[0]), ...typed(p.text)] : null;
+    }
+    const x = num(p.x) ? p.x : 0;
+    const y = num(p.y) ? p.y : 0;
+    const start = num(p.width) && num(p.height) ? dragOut({ x, y }, { x: x + p.width, y: y + p.height }) : click({ x, y });
+    return [...start, ...typed(p.text)];
+  },
+  placeSymbol: (p, controller) => {
+    const doc = controller.getState().document;
+    const t = Array.isArray(p.transform) && p.transform.length === 6 ? p.transform : null;
+    const at = t ? { x: t[4], y: t[5] } : { x: num(p.x) ? p.x : doc.width / 2, y: num(p.y) ? p.y : doc.height / 2 };
+    return click(at);
+  },
+  setTextStyle: (p, controller) => {
+    const node = controller.getNode(p.id);
+    if (node?.type !== "text") return null;
+    const rect = createVectorPlaybackLocator(controller)({ kind: VECTOR_PLAYBACK_KIND, id: p.id });
+    if (!rect) return null;
+    const length = Math.max(1, node.text.length);
+    const start = Math.min(length, Math.max(0, num(p.start) ? p.start : 0));
+    const end = Math.min(length, Math.max(start, num(p.end) ? p.end : length));
+    const y = rect.y + rect.height / 2;
+    return [
+      { type: "focus", rect },
+      ...dragOut({ x: rect.x + rect.width * start / length, y }, { x: rect.x + rect.width * end / length, y })
+    ];
+  },
+  setMeshPoint: (p, controller) => {
+    const shading = controller.getShading(p.id);
+    const point = shading?.points[p.index];
+    if (!point) return null;
+    return num(p.x) && num(p.y) ? dragOut(point, { x: p.x, y: p.y }) : click(point);
+  }
+};
+var placeImage = (p, controller) => {
+  const doc = controller.getState().document;
+  const x = num(p.x) ? p.x : 0;
+  const y = num(p.y) ? p.y : 0;
+  const w = num(p.width) ? p.width : doc.width - x;
+  return dragOut({ x, y }, { x: x + w, y: y + w });
+};
+function withVectorPlayback(controller, prefix, commands) {
+  return commands.map((spec) => {
+    if (!spec.id.startsWith(prefix)) return spec;
+    const name = spec.id.slice(prefix.length);
+    const props = spec.params?.properties ?? {};
+    const planner = PLANS[name] ?? (/Image$/.test(name) && "x" in props && "width" in props ? placeImage : void 0);
+    const surface = spec.playbackSurface ?? spec.scope ?? "vector";
+    if (!planner || spec.plan) return { ...spec, playbackSurface: surface };
+    return {
+      ...spec,
+      playbackSurface: surface,
+      plan: (_ctx, params) => planner(params ?? {}, controller)
+    };
+  });
+}
+
 // src/vector/commands.ts
 var EFFECT_PARAMS_DESCRIPTION = "Effect parameters (missing ones keep their value or default). trim: start, end (percent), offset (degrees), mode simultaneous|individual. roundCorners: radius. puckerBloat: amount (\u2212100\u2026100). twist: angle, center {x, y} (offset from the middle). zigzag: size, ridges, smooth. wiggle: size, detail, smooth, speed, correlation, phase, seed, time (seconds). offset: amount, join miter|round|bevel, miterLimit, copies, copyOffset. merge: mode merge|add|subtract|intersect|exclude. repeater: copies (fractions fade the last), offset, position {x, y}, anchor {x, y} (offset from the middle), rotation, scale {x, y} (percent), startOpacity, endOpacity (percent), composite below|above. contour: direction inside|outside|center, steps, offset, fillColor / strokeColor (end colours, null keeps the colour), acceleration (\u2212100\u2026100), join. blockShadow: angle (degrees, 0 right, 90 down), distance, color (null: the shape fill colour), opacity, endOpacity (percent; lower than opacity fades it into a long shadow). extrude: mode parallel|perspective, angle (degrees) and depth (units) for parallel, vanishingPoint {x, y} (offset from the middle) and toward (percent of the way there) for perspective, color (null: the shape fill colour), lightAngle (degrees the light comes from, 0 right, -90 above), shading (percent). bevel: width (units), lightAngle (degrees), shading (percent), color (null: the shape fill colour). envelope: style (a warp preset: arc|arcLower|arcUpper|arch|bulge|shellLower|shellUpper|flag|wave|fish|rise|fisheye|inflate|squeeze|twist, or mesh), bend, horizontal, vertical (percent, \u2212100\u2026100), orientation horizontal|vertical, rows, columns, mesh { us, vs, points } (node space; prefer vector.envelope).";
 var fail = (message) => {
@@ -17275,7 +17389,7 @@ function createVectorCommands(controller, options = {}) {
       }
     }
   ];
-  return [
+  return withVectorPlayback(controller, prefix, [
     {
       ...base,
       id: `${prefix}list`,
@@ -18186,7 +18300,7 @@ function createVectorCommands(controller, options = {}) {
         return { nodes: controller.getState().document.nodes.length, selection: controller.getState().selection };
       }
     }
-  ];
+  ]);
 }
 
 // src/vector/generate.ts
@@ -18680,6 +18794,7 @@ export {
   VECTOR_PATH_TEXT_BASELINES,
   VECTOR_PENCIL_STRING_PX,
   VECTOR_PERSPECTIVE_PLANES,
+  VECTOR_PLAYBACK_KIND,
   VECTOR_PRESSURE_NOMINAL,
   VECTOR_ROTATE_HANDLE_OFFSET,
   VECTOR_SPATIAL_MIN,
@@ -18768,6 +18883,7 @@ export {
   createVectorGenerationToolProvider,
   createVectorMeshGradient,
   createVectorMorph,
+  createVectorPlaybackLocator,
   cssFontFamily,
   curvatureMoveAnchor,
   cutSubpathAt,
@@ -19283,6 +19399,7 @@ export {
   withVectorAnchorIds,
   withVectorDocumentAnchorIds,
   withVectorFills,
+  withVectorPlayback,
   withVectorStrokes,
   withVectorTargetPaint,
   zigzagPaths

package/dist/vector/playback.d.cts

@@ -0,0 +1,13 @@
+import type { CommandSpec } from '../commands/registry.cjs';
+import type { PlaybackRect, PlaybackRef } from '../tools/playback.cjs';
+import type { VectorEditorController } from './controller.cjs';
+/** The playback kind of a vector node (`{ kind: 'vector', id }`, as in `data-vector-id`). */
+export declare const VECTOR_PLAYBACK_KIND = "vector";
+/** Finds `{ kind: 'vector', id }` (a node's document-space bounds) for agent playback. */
+export declare function createVectorPlaybackLocator(controller: Pick<VectorEditorController, 'getState' | 'getNode'>): (ref: PlaybackRef) => PlaybackRect | null;
+/**
+ * Adds agent playback plans to vector commands whose effect has a place but no ids yet (shapes,
+ * paths, text, symbols, stylized images) and to edits of a part of a node (a text range, a mesh
+ * point). Other commands play from the ids in their params.
+ */
+export declare function withVectorPlayback(controller: VectorEditorController, prefix: string, commands: CommandSpec[]): CommandSpec[];

package/dist/vector/playback.d.ts

@@ -0,0 +1,13 @@
+import type { CommandSpec } from '../commands/registry.js';
+import type { PlaybackRect, PlaybackRef } from '../tools/playback.js';
+import type { VectorEditorController } from './controller.js';
+/** The playback kind of a vector node (`{ kind: 'vector', id }`, as in `data-vector-id`). */
+export declare const VECTOR_PLAYBACK_KIND = "vector";
+/** Finds `{ kind: 'vector', id }` (a node's document-space bounds) for agent playback. */
+export declare function createVectorPlaybackLocator(controller: Pick<VectorEditorController, 'getState' | 'getNode'>): (ref: PlaybackRef) => PlaybackRect | null;
+/**
+ * Adds agent playback plans to vector commands whose effect has a place but no ids yet (shapes,
+ * paths, text, symbols, stylized images) and to edits of a part of a node (a text range, a mesh
+ * point). Other commands play from the ids in their params.
+ */
+export declare function withVectorPlayback(controller: VectorEditorController, prefix: string, commands: CommandSpec[]): CommandSpec[];