@pixerate/editor 0.125.0 → 0.127.0

package/dist/canvas/index.js

@@ -6,7 +6,7 @@ import {
   hatchPath,
   interiorPoint,
   pathfinder
-} from "../chunk-X6KTSFAE.js";
+} from "../chunk-Q4NBEVV5.js";
 import {
   ARCH_METRICS,
   GANTT_METRICS,
@@ -50,7 +50,7 @@ import {
   profileAlongPolyline,
   renderShapeBrushstroke,
   validateCanvasBrush
-} from "../chunk-J67OLQUQ.js";
+} from "../chunk-UABQTYQF.js";
 import {
   TokenError,
   getTokenCollection,
@@ -82,6 +82,9 @@ import {
   CAPTURE_OVERLAY_SELECTORS,
   rasterizeElement
 } from "../chunk-O2W2SP3C.js";
+import {
+  EffectRendererPool
+} from "../chunk-FJ3324TZ.js";
 import {
   createCaptureToolProvider,
   unionCaptureRects
@@ -153,7 +156,7 @@ import {
   unitePaths,
   windingNumber,
   xorPolygons
-} from "../chunk-FG274FYT.js";
+} from "../chunk-YGJIER2R.js";
 import {
   CANVAS_GRADIENT_PRESETS,
   PIXERATE_BRAND_GRADIENT,
@@ -180,7 +183,14 @@ import {
   resolveCanvasGradient,
   shapeToPolygon,
   simplifyRing
-} from "../chunk-GLWZXQ4Q.js";
+} from "../chunk-KHNZ6MOU.js";
+import {
+  EffectUnsupportedError,
+  EffectsSlot,
+  createEffectToolProvider,
+  resolveEffectValues
+} from "../chunk-QFSTQHZY.js";
+import "../chunk-4FX5ACVG.js";
 import {
   ANIMATION_TIME_EPSILON,
   AnimationPlayer,
@@ -1599,6 +1609,8 @@ function cloneScene(scene) {
     viewport: { x: scene.viewport.x, y: scene.viewport.y, zoom: scene.viewport.zoom }
   };
   if (scene.nodeIds) copy.nodeIds = [...scene.nodeIds];
+  const t = scene.transition;
+  if (t && typeof t.effect === "string" && t.effect) copy.transition = JSON.parse(JSON.stringify(t));
   return copy;
 }
 function parseCanvasScenes(input) {
@@ -7975,11 +7987,11 @@ function createCanvasComponentsController(options) {
     },
     canResetOverrides(id) {
       const at = target(id);
-      const info = at ? inspectCanvasInstance(nodes(), at) : void 0;
-      if (!info) return "Select an instance or a layer inside one.";
-      const changedProps = !info.nested && info.properties.some((p) => p.value !== p.default);
-      const own = info.id === at ? info.overrides.length > 0 : getNodeOverrides(nodes().find((n3) => n3.id === at)).length > 0;
-      return own || info.id === at && changedProps ? true : "No overrides to reset.";
+      const info2 = at ? inspectCanvasInstance(nodes(), at) : void 0;
+      if (!info2) return "Select an instance or a layer inside one.";
+      const changedProps = !info2.nested && info2.properties.some((p) => p.value !== p.default);
+      const own = info2.id === at ? info2.overrides.length > 0 : getNodeOverrides(nodes().find((n3) => n3.id === at)).length > 0;
+      return own || info2.id === at && changedProps ? true : "No overrides to reset.";
     },
     /** Push the (outermost) instance's overrides to its main component. */
     pushOverrides(id) {
@@ -11601,6 +11613,371 @@ function createCanvasCaptureToolProvider(options) {
     id: options.id ?? "canvas-capture"
   });
 }
+
+// src/canvas/effects.ts
+var CANVAS_EFFECT_PLACES = {
+  /** Paints a shape's inside. */
+  fill: ["generator", "interactive"],
+  /** Draws over a node's box. */
+  overlay: ["overlay", "title", "interactive", "generator"],
+  transition: ["transition"]
+};
+function canvasNodeEffect(node) {
+  const shape = node.data?.shape;
+  return isShapeDescription(shape) ? shape.effect : void 0;
+}
+function createCanvasEffectsController(options) {
+  const slot = new EffectsSlot();
+  if (options.effects) slot.set(options.effects);
+  const describe = async (effect, place2) => {
+    const d = await slot.require().describe(effect);
+    const allowed = CANVAS_EFFECT_PLACES[place2];
+    if (d.kind === "motion" || !d.uses.some((u) => allowed.includes(u))) {
+      const where = place2 === "transition" ? "a scene transition" : place2 === "fill" ? "a fill" : "an overlay";
+      throw new EffectUnsupportedError(`"${d.id}" (${d.name}) is a ${d.uses.join(" / ")} effect and cannot be ${where}, which takes ${allowed.join(" or ")} effects; search_effects with use "${allowed[0]}" lists ones that fit.`, d.id);
+    }
+    return d;
+  };
+  const shapeNode = (id) => {
+    const node = options.getNodes().find((n3) => n3.id === id);
+    if (!node) throw new Error(`There is no node "${id}"; the nodes are ${options.getNodes().map((n3) => `"${n3.id}"`).slice(0, 20).join(", ") || "none"}.`);
+    const shape = node.data?.shape;
+    if (!isShapeDescription(shape)) throw new Error(`Node "${id}" is not a shape; effects draw on shape nodes (data.shape).`);
+    return { node, shape };
+  };
+  const commit = (label, next) => {
+    const before = options.getNodes();
+    if (options.history) options.history.execute({ name: label, execute: () => options.setNodes(next), undo: () => options.setNodes(before), redo: () => options.setNodes(next) });
+    else options.setNodes(next);
+  };
+  const withEffect = (id, effect) => options.getNodes().map((n3) => {
+    if (n3.id !== id) return n3;
+    const shape = { ...n3.data.shape };
+    if (effect) shape.effect = effect;
+    else delete shape.effect;
+    return { ...n3, data: { ...n3.data, shape } };
+  });
+  const mergeValues = (d, was, values) => {
+    const base = { ...was };
+    const given = {};
+    for (const [k, v] of Object.entries(values)) {
+      if (v !== null) given[k] = v;
+      else if (k in d.controls.properties) base[k] = d.defaults[k];
+      else throw new Error(`"${k}" is not a control of "${d.id}"; its controls are ${Object.keys(d.controls.properties).join(", ")}.`);
+    }
+    return { ...base, ...resolveEffectValues({ ...d, defaults: base }, given) };
+  };
+  return {
+    /** The provider slot. */
+    effects: slot,
+    get effectsProvider() {
+      return slot.provider;
+    },
+    /** Registers (or with `null` removes) the effects provider. */
+    setEffectsProvider(provider) {
+      slot.set(provider);
+    },
+    /** Registers `provider` and returns a function that removes it again. */
+    useEffects(provider) {
+      return slot.use(provider);
+    },
+    /** The shape nodes that carry effects (or one node's). */
+    list(nodeId) {
+      return options.getNodes().filter((n3) => !nodeId || n3.id === nodeId).map((n3) => ({ nodeId: n3.id, effect: canvasNodeEffect(n3) })).filter((e) => !!e.effect);
+    },
+    /**
+     * Draws a provider effect on a shape node: `fill` paints its inside (generators), `overlay`
+     * draws over its box (overlays, titles, interactive effects). Replaces any effect it had. One
+     * undoable step. Returns the effect.
+     */
+    async applyNodeEffect(nodeId, effect, opts = {}) {
+      shapeNode(nodeId);
+      const mode = opts.mode ?? "fill";
+      const d = await describe(effect, mode);
+      if (opts.opacity !== void 0 && !(opts.opacity >= 0 && opts.opacity <= 1)) throw new Error("opacity must be from 0 to 1.");
+      const next = { effect: d.id, provider: slot.require().id, name: d.name, values: resolveEffectValues(d, opts.values), mode, ...opts.opacity !== void 0 && opts.opacity !== 1 ? { opacity: opts.opacity } : {} };
+      commit(`Add effect ${d.name}`, withEffect(nodeId, next));
+      return next;
+    },
+    /** Changes a node's effect: `values` merged (`null` resets), `mode`, `opacity`, `playing`. One undoable step. */
+    async updateNodeEffect(nodeId, changes) {
+      const { shape } = shapeNode(nodeId);
+      const was = shape.effect;
+      if (!was) throw new Error(`Node "${nodeId}" has no effect; add one with apply_effect.`);
+      const next = { ...was };
+      if (changes.values || changes.mode) {
+        const d = await describe(was.effect, changes.mode ?? was.mode);
+        if (changes.values) next.values = mergeValues(d, was.values, changes.values);
+        if (changes.mode) next.mode = changes.mode;
+      } else slot.require();
+      if (changes.opacity !== void 0) {
+        if (!(changes.opacity >= 0 && changes.opacity <= 1)) throw new Error("opacity must be from 0 to 1.");
+        if (changes.opacity === 1) delete next.opacity;
+        else next.opacity = changes.opacity;
+      }
+      if (changes.playing !== void 0) {
+        if (changes.playing) delete next.playing;
+        else next.playing = false;
+      }
+      commit(`Change effect ${was.name ?? was.effect}`, withEffect(nodeId, next));
+      return next;
+    },
+    /** Removes a node's effect (works without a provider). One undoable step. */
+    removeNodeEffect(nodeId) {
+      const { shape } = shapeNode(nodeId);
+      if (!shape.effect) throw new Error(`Node "${nodeId}" has no effect.`);
+      commit(`Remove effect ${shape.effect.name ?? shape.effect.effect}`, withEffect(nodeId, void 0));
+      return shape.effect;
+    },
+    /** The scenes, in order (empty without a Scenes store). */
+    scenes() {
+      return options.scenes?.getState().scenes ?? [];
+    },
+    /** The transition into a scene, if it has one. */
+    sceneTransition(sceneId) {
+      return options.scenes?.getScene(sceneId)?.transition;
+    },
+    /**
+     * Sets (or with `effect` null removes) the provider transition played when the canvas moves to
+     * a scene. Returns the transition.
+     */
+    async setSceneTransition(sceneId, effect, opts = {}) {
+      const scenes2 = options.scenes;
+      if (!scenes2) throw new Error("This canvas has no Scenes store.");
+      if (!scenes2.getScene(sceneId)) throw new Error(`There is no scene "${sceneId}"; the scenes are ${scenes2.getState().scenes.map((s) => `"${s.id}"`).join(", ") || "none"}.`);
+      if (effect === null) {
+        scenes2.update(sceneId, { transition: void 0 });
+        return null;
+      }
+      const d = await describe(effect, "transition");
+      const duration = opts.duration ?? d.duration ?? 600;
+      if (!(duration > 0)) throw new Error("duration must be a number of ms above 0.");
+      const transition = { effect: d.id, provider: slot.require().id, name: d.name, values: resolveEffectValues(d, opts.values), duration };
+      scenes2.update(sceneId, { transition });
+      return transition;
+    }
+  };
+}
+
+// src/canvas/effect-player.ts
+var defaultClock = {
+  now: () => typeof performance !== "undefined" ? performance.now() : Date.now(),
+  frame: (cb) => {
+    if (typeof requestAnimationFrame === "undefined") {
+      const t = setTimeout(cb, 16);
+      return () => clearTimeout(t);
+    }
+    const id = requestAnimationFrame(cb);
+    return () => cancelAnimationFrame(id);
+  }
+};
+var canvasEffectsPool = new EffectRendererPool({ maxRenderers: 6 });
+function draw(target, p) {
+  const ctx = target.getContext("2d");
+  if (!ctx || typeof ImageData === "undefined") return;
+  ctx.putImageData(new ImageData(new Uint8ClampedArray(p.data), p.width, p.height), 0, 0);
+}
+function runCanvasNodeEffect(options) {
+  const { provider, effect, target } = options;
+  const clock = options.clock ?? defaultClock;
+  const pool = options.pool ?? canvasEffectsPool;
+  const size2 = { width: Math.max(1, Math.round(target.width)), height: Math.max(1, Math.round(target.height)) };
+  const start = clock.now();
+  let stopped = false;
+  let cancel = () => {
+  };
+  const tick = () => {
+    if (stopped) return;
+    const time = options.animate === false || effect.playing === false ? 0 : clock.now() - start;
+    pool.render(provider, effect.effect, size2, { time, values: effect.values }).then(
+      (p) => {
+        if (stopped) return;
+        draw(target, p);
+        if (options.animate !== false && effect.playing !== false) cancel = clock.frame(tick);
+      },
+      (e) => {
+        if (!stopped) options.onError?.(e);
+      }
+    );
+  };
+  tick();
+  return {
+    stop() {
+      stopped = true;
+      cancel();
+    }
+  };
+}
+async function playCanvasSceneTransition(options) {
+  const { provider, transition, from, to, target } = options;
+  const clock = options.clock ?? defaultClock;
+  const pool = options.pool ?? canvasEffectsPool;
+  const duration = transition.duration ?? 600;
+  const size2 = { width: from.width, height: from.height };
+  const start = clock.now();
+  for (; ; ) {
+    const time = Math.min(duration, clock.now() - start);
+    const p = await pool.render(provider, transition.effect, size2, { time, progress: time / duration, values: transition.values, inputs: { from, to } });
+    draw(target, p);
+    if (time >= duration) return;
+    await new Promise((resolve) => clock.frame(resolve));
+  }
+}
+async function captureCanvasView(element, size2) {
+  const url = await rasterizeElement(element, { pixelWidth: size2.width, pixelHeight: size2.height, exclude: CAPTURE_OVERLAY_SELECTORS });
+  const doc = element.ownerDocument;
+  const image = new doc.defaultView.Image();
+  await new Promise((resolve, reject) => {
+    image.onload = () => resolve();
+    image.onerror = () => reject(new Error("The canvas view could not be captured."));
+    image.src = url;
+  });
+  const canvas = doc.createElement("canvas");
+  canvas.width = size2.width;
+  canvas.height = size2.height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("The canvas view could not be captured (no 2D canvas).");
+  ctx.drawImage(image, 0, 0, size2.width, size2.height);
+  const data = ctx.getImageData(0, 0, size2.width, size2.height).data;
+  return { width: size2.width, height: size2.height, data };
+}
+async function transitionCanvasView(options) {
+  const { element } = options;
+  const clock = options.clock ?? defaultClock;
+  const scale = options.scale ?? Math.min(1, typeof devicePixelRatio === "number" ? devicePixelRatio : 1);
+  const size2 = { width: Math.max(1, Math.round(element.clientWidth * scale)), height: Math.max(1, Math.round(element.clientHeight * scale)) };
+  let from;
+  try {
+    from = await captureCanvasView(element, size2);
+  } catch {
+    options.jump();
+    return;
+  }
+  const overlay = element.ownerDocument.createElement("canvas");
+  overlay.width = size2.width;
+  overlay.height = size2.height;
+  overlay.setAttribute("data-capture", "overlay");
+  overlay.setAttribute("data-canvas-transition", options.transition.effect);
+  Object.assign(overlay.style, { position: "absolute", inset: "0", width: "100%", height: "100%", pointerEvents: "none", zIndex: "1000" });
+  overlay.getContext("2d")?.putImageData(new ImageData(new Uint8ClampedArray(from.data), size2.width, size2.height), 0, 0);
+  if (getComputedStyle(element).position === "static") element.style.position = "relative";
+  element.appendChild(overlay);
+  try {
+    options.jump();
+    await new Promise((r) => clock.frame(() => clock.frame(r)));
+    const to = await captureCanvasView(element, size2);
+    await playCanvasSceneTransition({ provider: options.provider, transition: options.transition, from, to, target: overlay, clock });
+  } catch {
+  } finally {
+    overlay.remove();
+  }
+}
+
+// src/canvas/effect-tools.ts
+var info = (e) => ({
+  id: "effect",
+  effect: e.effect,
+  ...e.name ? { name: e.name } : {},
+  ...e.provider ? { provider: e.provider } : {},
+  role: e.mode === "fill" ? "fill" : "overlay",
+  enabled: e.playing !== false,
+  opacity: e.opacity ?? 1,
+  values: { ...e.values }
+});
+function createCanvasEffectsToolProvider(controller, options = {}) {
+  const readOnlyReason = () => {
+    const ro = typeof options.readOnly === "function" ? options.readOnly() : options.readOnly;
+    return ro ? typeof ro === "string" ? ro : "The canvas is read-only." : null;
+  };
+  const result = (nodeId, effect) => {
+    const now = controller.list(nodeId)[0]?.effect;
+    return { target: nodeId, effect: info(effect ?? now), effects: now ? [info(now)] : [] };
+  };
+  const once = (instance) => {
+    if (instance !== "effect") throw new Error('A shape node has one effect, "effect".');
+  };
+  return createEffectToolProvider({
+    id: options.id ?? "canvas-effects",
+    namespace: options.namespace,
+    target: { noun: "node", id: "A shape node id on the canvas (a node with data.shape)." },
+    applyUses: ["generator", "overlay", "title", "interactive"],
+    applyDetails: "Generators fill the shape (clipped to its outline); overlays, titles and interactive effects draw over the node's box (set_canvas_effect_mode switches). A node has one effect: this replaces it. enabled false holds the first frame; opacity mixes it. index does not apply.",
+    provider: () => controller.effectsProvider,
+    readOnlyReason,
+    list: (target) => controller.list(target).map((e) => ({ target: e.nodeId, effects: [info(e.effect)] })),
+    apply: async (target, effect, args) => {
+      if (args.index !== void 0) throw new Error("index does not apply: a shape node has one effect.");
+      const provider = controller.effectsProvider;
+      const d = provider ? await provider.describe(effect) : null;
+      const mode = d && !d.uses.includes("generator") ? "overlay" : "fill";
+      const applied = await controller.applyNodeEffect(target, effect, { mode, values: args.values, opacity: args.opacity });
+      if (args.enabled === false) await controller.updateNodeEffect(target, { playing: false });
+      return result(target, args.enabled === false ? { ...applied, playing: false } : applied);
+    },
+    update: async (target, instance, changes) => {
+      once(instance);
+      if (changes.index !== void 0) throw new Error("index does not apply: a shape node has one effect.");
+      const e = await controller.updateNodeEffect(target, { values: changes.values, opacity: changes.opacity, playing: changes.enabled });
+      return result(target, e);
+    },
+    remove: async (target, instance) => {
+      once(instance);
+      const was = controller.removeNodeEffect(target);
+      return { target, effect: info(was), effects: [] };
+    },
+    subscribe: options.subscribe ? (notify) => options.subscribe(notify) : (notify) => controller.effects.subscribe(() => notify()),
+    extraTools: (ctx) => [
+      {
+        name: "set_canvas_effect_mode",
+        title: "Set a node effect's mode",
+        description: "Switches a shape node's effect between fill (paints the inside, clipped to the outline) and overlay (draws over the node's box). One undoable step. Returns the effect.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            node: { type: "string", minLength: 1, description: "A shape node id from list_applied_effects." },
+            mode: { type: "string", enum: ["fill", "overlay"], description: "fill or overlay." }
+          },
+          required: ["node", "mode"],
+          additionalProperties: false
+        },
+        annotations: { title: "Set a node effect's mode", ...ctx.annotations.writeIdempotent },
+        handler: async (args) => {
+          ctx.requireProvider();
+          return { node: args.node, effect: info(await controller.updateNodeEffect(args.node, { mode: args.mode })) };
+        }
+      },
+      {
+        name: "list_scene_transitions",
+        title: "List scene transitions",
+        description: "Lists the canvas Scenes in order with the transition effect played when moving to each (or null). Works without a provider.",
+        inputSchema: { type: "object", properties: {}, additionalProperties: false },
+        annotations: { title: "List scene transitions", ...ctx.annotations.read },
+        handler: () => ({ scenes: controller.scenes().map((s) => ({ id: s.id, name: s.name, transition: s.transition ?? null })) })
+      },
+      {
+        name: "set_scene_transition",
+        title: "Set a scene transition",
+        description: "Sets the provider transition effect (search_effects with use transition) played when the canvas moves to a scene: the view before and after are captured and the effect blends between them. effect null removes it. Returns the transition.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            scene: { type: "string", minLength: 1, description: "A scene id from list_scene_transitions." },
+            effect: { anyOf: [ctx.effectIdSchema(["transition"]), { type: "null" }], description: "A transition effect id from search_effects, or null to remove the transition." },
+            values: ctx.valuesSchema("Control values over the effect's defaults"),
+            duration: { type: "number", exclusiveMinimum: 0, description: "Length in ms (default: the effect's own, else 600)." }
+          },
+          required: ["scene", "effect"],
+          additionalProperties: false
+        },
+        annotations: { title: "Set a scene transition", ...ctx.annotations.writeIdempotent },
+        handler: async (args) => {
+          if (args.effect !== null) ctx.requireProvider();
+          return { scene: args.scene, transition: await controller.setSceneTransition(args.scene, args.effect, { values: args.values, duration: args.duration }) };
+        }
+      }
+    ]
+  });
+}
 export {
   ANIMATABLE_PROPERTIES,
   ANIMATION_DATA_KEY,
@@ -11615,6 +11992,7 @@ export {
   CANVAS_CAPTURE_OVERLAY_SELECTORS,
   CANVAS_CAPTURE_VIEWPORT_SELECTOR,
   CANVAS_COMPONENT_DRAG_TYPE,
+  CANVAS_EFFECT_PLACES,
   CANVAS_GRADIENT_PRESETS,
   CANVAS_TOKEN_PROPERTIES,
   CARD_INSPECTION_ZONES,
@@ -11697,8 +12075,11 @@ export {
   canCombineShapeNodes,
   canOffsetShapeNodes,
   canOutlineShapeNodeStrokes,
+  canvasEffectsPool,
   canvasHeight,
   canvasNodeCaptureRect,
+  canvasNodeEffect,
+  captureCanvasView,
   centerNodes,
   centre,
   clampAnimationValue,
@@ -11728,6 +12109,8 @@ export {
   createCanvasComponent,
   createCanvasComponentsController,
   createCanvasDrawController,
+  createCanvasEffectsController,
+  createCanvasEffectsToolProvider,
   createCanvasInstance,
   createCanvasScenesStore,
   createDefaultStrokeStyle,
@@ -11964,6 +12347,7 @@ export {
   pieScene,
   placeBeside,
   planarSplit,
+  playCanvasSceneTransition,
   playWebAnimations,
   pointInBezierPath,
   pointInMultiPolygon,
@@ -12009,6 +12393,7 @@ export {
   revertShapeCombination,
   rgbToOklab,
   ringSignedArea,
+  runCanvasNodeEffect,
   runMultiNodeTransition,
   sampleAnimationFrames,
   scaleKeyframes,
@@ -12067,6 +12452,7 @@ export {
   toWebAnimations,
   toggleLockNodes,
   transformBezierPath,
+  transitionCanvasView,
   trimSegments,
   unionPolygons,
   unitePaths,