@pixerate/editor 0.29.0 → 0.30.0

package/dist/canvas/index.js

@@ -25,35 +25,38 @@ import {
   resolveToken
 } from "../chunk-D6AVOTSD.js";
 import {
-  ANIMATION_EASING_LABELS,
-  ANIMATION_EASING_PRESETS,
   ANIMATION_TIME_EPSILON,
   AnimationPlayer,
-  CUBIC_BEZIER_PRESETS,
   ManualClock,
   createAnimationPlayer,
-  cubicBezierAt,
-  easingFromInfluence,
-  easingLabel,
-  easingToCss,
-  evaluateEasing,
   evaluateTrack,
   formatOklab,
   interpolateAnimationValue,
-  isAnimationEasing,
   isAnimationKeyframe,
   mixColorsOklab,
   normalizeKeyframes,
   oklabToRgb,
   pageHidden,
-  parseCssEasing,
   parseOklab,
   realClock,
-  resolveEasing,
   rgbToOklab,
-  springAt,
   wrapAnimationTime
-} from "../chunk-PWJARCI4.js";
+} from "../chunk-W7BOBWZD.js";
+import {
+  ANIMATION_EASING_LABELS,
+  ANIMATION_EASING_PRESETS,
+  CUBIC_BEZIER_PRESETS,
+  cubicBezierAt,
+  easingFromInfluence,
+  easingLabel,
+  easingToCss,
+  elasticAt,
+  evaluateEasing,
+  isAnimationEasing,
+  parseCssEasing,
+  resolveEasing,
+  springAt
+} from "../chunk-UB2OY7FD.js";
 import {
   normalizeTokenColor
 } from "../chunk-TGD52FEZ.js";
@@ -11397,6 +11400,305 @@ function getCanvasComponentDragId(dataTransfer) {
   const id = dataTransfer?.getData(CANVAS_COMPONENT_DRAG_TYPE);
   return id ? id : void 0;
 }
+
+// src/canvas/freehand.ts
+function createDefaultStrokeStyle(tool) {
+  if (tool === "highlighter") {
+    return {
+      color: "#facc15",
+      width: 24,
+      opacity: 0.35,
+      cap: "round",
+      join: "round"
+    };
+  }
+  return {
+    color: "#3b82f6",
+    width: 3,
+    opacity: 1,
+    cap: "round",
+    join: "round"
+  };
+}
+function streamlinePoints(points, factor = 0.35) {
+  if (points.length < 3 || factor <= 0) return [...points];
+  const clampedFactor = Math.min(Math.max(factor, 0), 0.95);
+  const smoothed = [points[0]];
+  for (let i = 1; i < points.length - 1; i++) {
+    const prev = smoothed[i - 1];
+    const curr = points[i];
+    const x = prev[0] * clampedFactor + curr[0] * (1 - clampedFactor);
+    const y = prev[1] * clampedFactor + curr[1] * (1 - clampedFactor);
+    smoothed.push([x, y]);
+  }
+  smoothed.push(points[points.length - 1]);
+  return smoothed;
+}
+function strokeBoundingBox(points, margin = 0) {
+  if (points.length === 0) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const [x, y] of points) {
+    if (x < minX) minX = x;
+    if (y < minY) minY = y;
+    if (x > maxX) maxX = x;
+    if (y > maxY) maxY = y;
+  }
+  const w = Math.max(maxX - minX, 0);
+  const h = Math.max(maxY - minY, 0);
+  return {
+    x: minX - margin,
+    y: minY - margin,
+    width: Math.max(w + margin * 2, 1),
+    height: Math.max(h + margin * 2, 1)
+  };
+}
+function strokePointsToPathData(points, options = {}) {
+  if (points.length === 0) return "";
+  if (points.length === 1) {
+    const [x, y] = points[0];
+    return `M ${x} ${y} L ${x + 0.01} ${y}`;
+  }
+  if (points.length === 2) {
+    const [p0, p1] = points;
+    return `M ${p0[0]} ${p0[1]} L ${p1[0]} ${p1[1]}`;
+  }
+  const fitted = fitFreehandPath(points, options);
+  return fitted.length > 0 ? fitted : `M ${points[0][0]} ${points[0][1]}`;
+}
+function strokeToShapeNode(stroke, options = {}) {
+  const points = stroke.points;
+  const strokeWidth = stroke.style.width || 3;
+  const bounds = strokeBoundingBox(points, 0);
+  const localPoints = points.map(
+    ([x, y]) => [x - bounds.x, y - bounds.y]
+  );
+  const d = strokePointsToPathData(localPoints, {
+    tolerance: options.tolerance ?? 1,
+    cornerAngleDeg: options.cornerAngleDeg ?? 40
+  });
+  const width = Math.max(bounds.width, 1);
+  const height = Math.max(bounds.height, 1);
+  return {
+    id: options.id ?? stroke.id,
+    type: "shape",
+    position: { x: bounds.x, y: bounds.y },
+    width,
+    height,
+    style: {
+      width,
+      height
+    },
+    data: {
+      shape: {
+        kind: "path",
+        d,
+        viewBox: [0, 0, width, height],
+        stroke: stroke.style.color,
+        strokeWidth,
+        opacity: stroke.style.opacity,
+        fill: "none"
+      },
+      tool: stroke.tool
+    }
+  };
+}
+function findStrokesAtPoint(point, nodes, radius = 12) {
+  const matches2 = [];
+  for (const node of nodes) {
+    const shape = getNodeShape(node);
+    if (!shape || shape.kind !== "path") continue;
+    const rect = getNodeRect(node);
+    const strokeWidth = shape.strokeWidth ?? 2;
+    const effectiveRadius = radius + strokeWidth / 2;
+    if (point[0] < rect.x - effectiveRadius || point[0] > rect.x + rect.width + effectiveRadius || point[1] < rect.y - effectiveRadius || point[1] > rect.y + rect.height + effectiveRadius) {
+      continue;
+    }
+    const localPoint = [point[0] - rect.x, point[1] - rect.y];
+    try {
+      const dist3 = distanceToBezierPath(shape.d, localPoint);
+      if (dist3 <= effectiveRadius) {
+        matches2.push(node);
+      }
+    } catch {
+      if (point[0] >= rect.x && point[0] <= rect.x + rect.width && point[1] >= rect.y && point[1] <= rect.y + rect.height) {
+        matches2.push(node);
+      }
+    }
+  }
+  return matches2;
+}
+
+// src/canvas/drawController.ts
+function createCanvasDrawController(options) {
+  let currentTool = options.tool ?? "select";
+  let currentStyle = {
+    ...createDefaultStrokeStyle(currentTool),
+    ...options.style
+  };
+  let activeStroke = null;
+  const erasedInDrag = /* @__PURE__ */ new Map();
+  let dragStartNodes = null;
+  function setTool(tool) {
+    if (currentTool === tool) return;
+    cancelStroke();
+    currentTool = tool;
+    if (tool === "pen" || tool === "highlighter") {
+      currentStyle = {
+        ...createDefaultStrokeStyle(tool),
+        ...options.style
+      };
+      options.onStyleChange?.(currentStyle);
+    }
+    options.onToolChange?.(tool);
+  }
+  function setStyle(style) {
+    currentStyle = { ...currentStyle, ...style };
+    options.onStyleChange?.(currentStyle);
+  }
+  function startStroke(point) {
+    if (currentTool === "select") return;
+    if (currentTool === "eraser") {
+      erasedInDrag.clear();
+      dragStartNodes = [...options.getNodes()];
+      eraseAt(point);
+      return;
+    }
+    const id = options.generateNodeId?.() ?? `stroke-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+    activeStroke = {
+      id,
+      tool: currentTool,
+      points: [point],
+      style: { ...currentStyle },
+      startTime: Date.now()
+    };
+    options.onActiveStrokeChange?.(activeStroke);
+  }
+  function continueStroke(point) {
+    if (currentTool === "eraser") {
+      eraseAt(point);
+      return;
+    }
+    if (!activeStroke) return;
+    const points = activeStroke.points;
+    const last = points[points.length - 1];
+    if (Math.hypot(point[0] - last[0], point[1] - last[1]) < 0.25) return;
+    points.push(point);
+    options.onActiveStrokeChange?.({ ...activeStroke, points: [...points] });
+  }
+  function endStroke() {
+    if (currentTool === "eraser") {
+      const startSnapshot = dragStartNodes;
+      dragStartNodes = null;
+      if (erasedInDrag.size > 0 && options.history && startSnapshot) {
+        const erasedIds = new Set(Array.from(erasedInDrag.keys()));
+        options.history.execute({
+          name: "Erase strokes",
+          execute: () => {
+            const remaining = options.getNodes().filter((n) => !erasedIds.has(n.id));
+            options.setNodes(remaining);
+          },
+          undo: () => {
+            options.setNodes(startSnapshot);
+          }
+        });
+      }
+      erasedInDrag.clear();
+      return null;
+    }
+    if (!activeStroke) return null;
+    const stroke = activeStroke;
+    activeStroke = null;
+    options.onActiveStrokeChange?.(null);
+    if (stroke.points.length === 0) return null;
+    const drawOpts = options.drawOptions ?? {};
+    const smoothed = streamlinePoints(stroke.points, drawOpts.streamline ?? 0.35);
+    const node = strokeToShapeNode(
+      { ...stroke, points: smoothed },
+      {
+        tolerance: drawOpts.tolerance ?? 1,
+        cornerAngleDeg: drawOpts.cornerAngleDeg ?? 40
+      }
+    );
+    if (options.history) {
+      options.history.execute({
+        name: `Draw ${stroke.tool}`,
+        execute: () => {
+          options.setNodes([...options.getNodes(), node]);
+        },
+        undo: () => {
+          options.setNodes(options.getNodes().filter((n) => n.id !== node.id));
+        }
+      });
+    } else {
+      options.setNodes([...options.getNodes(), node]);
+    }
+    options.onStrokeComplete?.(node);
+    return node;
+  }
+  function cancelStroke() {
+    if (activeStroke) {
+      activeStroke = null;
+      options.onActiveStrokeChange?.(null);
+    }
+    if (erasedInDrag.size > 0) {
+      const entries = Array.from(erasedInDrag.values());
+      const current = [...options.getNodes()];
+      const sorted = [...entries].sort((a, b) => a.index - b.index);
+      for (const { node, index } of sorted) {
+        const insertAt = Math.min(index, current.length);
+        current.splice(insertAt, 0, node);
+      }
+      options.setNodes(current);
+      erasedInDrag.clear();
+    }
+  }
+  function eraseAt(point, radius = 12) {
+    const nodes = options.getNodes();
+    const candidates = findStrokesAtPoint(point, nodes, radius);
+    const newlyErased = [];
+    for (const candidate of candidates) {
+      if (erasedInDrag.has(candidate.id) || isLocked(candidate)) continue;
+      const index = nodes.findIndex((n) => n.id === candidate.id);
+      if (index !== -1) {
+        erasedInDrag.set(candidate.id, { node: candidate, index });
+        newlyErased.push(candidate);
+      }
+    }
+    if (newlyErased.length > 0) {
+      const erasedSet = new Set(newlyErased.map((n) => n.id));
+      const nextNodes = nodes.filter((n) => !erasedSet.has(n.id));
+      options.setNodes(nextNodes);
+      options.onNodesErase?.(newlyErased);
+    }
+    return newlyErased;
+  }
+  return {
+    get tool() {
+      return currentTool;
+    },
+    setTool,
+    get style() {
+      return currentStyle;
+    },
+    setStyle,
+    get activeStroke() {
+      return activeStroke;
+    },
+    get isDrawing() {
+      return activeStroke !== null;
+    },
+    startStroke,
+    continueStroke,
+    endStroke,
+    cancelStroke,
+    eraseAt
+  };
+}
 export {
   ANIMATABLE_PROPERTIES,
   ANIMATION_DATA_KEY,
@@ -11485,8 +11787,10 @@ export {
   createCanvasAutoLayoutController,
   createCanvasComponent,
   createCanvasComponentsController,
+  createCanvasDrawController,
   createCanvasInstance,
   createCanvasScenesStore,
+  createDefaultStrokeStyle,
   createFanOutTrajectory,
   createGuideIndex,
   createNodeGuideIndex,
@@ -11507,6 +11811,7 @@ export {
   easingFromInfluence,
   easingLabel,
   easingToCss,
+  elasticAt,
   ensureLayout,
   estimateCanvasHeight,
   estimateNodeSize,
@@ -11516,6 +11821,7 @@ export {
   excludePaths,
   exportCssAnimation,
   findConnectorSnap,
+  findStrokesAtPoint,
   findVariant,
   fitCubicRun,
   fitCubics,
@@ -11724,7 +12030,11 @@ export {
   snapToGrid,
   splitSegment,
   springAt,
+  streamlinePoints,
+  strokeBoundingBox,
   strokeOutlineRings,
+  strokePointsToPathData,
+  strokeToShapeNode,
   subSegment,
   subtractPaths,
   subtractPolygons,