@pixerate/editor 0.30.0 → 0.31.0

package/dist/canvas/index.js

@@ -2452,6 +2452,233 @@ function fitFreehandPath(points, options = {}) {
   return fitPathData(points, { tolerance: 1, ...options, closed: false });
 }
 
+// src/canvas/gradient.ts
+var CANVAS_GRADIENT_PRESETS = {
+  sunset: {
+    type: "linear",
+    angle: 90,
+    stops: [
+      { offset: 0, color: "#f97316" },
+      { offset: 1, color: "#ec4899" }
+    ]
+  },
+  ocean: {
+    type: "linear",
+    angle: 90,
+    stops: [
+      { offset: 0, color: "#06b6d4" },
+      { offset: 1, color: "#3b82f6" }
+    ]
+  },
+  aurora: {
+    type: "linear",
+    angle: 90,
+    stops: [
+      { offset: 0, color: "#10b981" },
+      { offset: 1, color: "#6366f1" }
+    ]
+  },
+  neon: {
+    type: "linear",
+    angle: 90,
+    stops: [
+      { offset: 0, color: "#a855f7" },
+      { offset: 1, color: "#ec4899" }
+    ]
+  },
+  amber: {
+    type: "linear",
+    angle: 90,
+    stops: [
+      { offset: 0, color: "#f59e0b" },
+      { offset: 1, color: "#ef4444" }
+    ]
+  },
+  cosmic: {
+    type: "linear",
+    angle: 90,
+    stops: [
+      { offset: 0, color: "#3b82f6" },
+      { offset: 0.5, color: "#8b5cf6" },
+      { offset: 1, color: "#ec4899" }
+    ]
+  }
+};
+function isCanvasGradient(value) {
+  if (!value || typeof value !== "object") return false;
+  const val = value;
+  if (val.type !== "linear" && val.type !== "radial") return false;
+  if (!Array.isArray(val.stops)) return false;
+  return true;
+}
+function splitCssArgs(str) {
+  const parts = [];
+  let depth = 0;
+  let current = "";
+  for (let i = 0; i < str.length; i++) {
+    const char = str[i];
+    if (char === "(") depth++;
+    else if (char === ")") depth = Math.max(0, depth - 1);
+    if (char === "," && depth === 0) {
+      if (current.trim()) parts.push(current.trim());
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  if (current.trim()) parts.push(current.trim());
+  return parts;
+}
+function parseCssAngle(val) {
+  const trimmed = val.trim().toLowerCase();
+  if (trimmed.endsWith("deg")) {
+    return parseFloat(trimmed);
+  }
+  if (trimmed.endsWith("turn")) {
+    return parseFloat(trimmed) * 360;
+  }
+  if (trimmed.endsWith("rad")) {
+    return parseFloat(trimmed) * 180 / Math.PI;
+  }
+  if (trimmed.startsWith("to ")) {
+    const dir = trimmed.slice(3).trim();
+    if (dir === "bottom") return 180;
+    if (dir === "top") return 0;
+    if (dir === "right") return 90;
+    if (dir === "left") return 270;
+    if (dir === "bottom right" || dir === "right bottom") return 135;
+    if (dir === "bottom left" || dir === "left bottom") return 225;
+    if (dir === "top right" || dir === "right top") return 45;
+    if (dir === "top left" || dir === "left top") return 315;
+  }
+  const n = parseFloat(trimmed);
+  return Number.isFinite(n) ? n : 180;
+}
+function parseCssGradient(css) {
+  const trimmed = css.trim();
+  const linearMatch = trimmed.match(/^linear-gradient\s*\((.*)\)$/is);
+  if (linearMatch) {
+    const rawArgs = splitCssArgs(linearMatch[1]);
+    if (rawArgs.length === 0) return null;
+    let angle = 180;
+    let stopStartIndex = 0;
+    const first = rawArgs[0].trim().toLowerCase();
+    if (first.endsWith("deg") || first.endsWith("turn") || first.endsWith("rad") || first.startsWith("to ")) {
+      angle = parseCssAngle(first);
+      stopStartIndex = 1;
+    }
+    const stopStrings = rawArgs.slice(stopStartIndex);
+    if (stopStrings.length === 0) return null;
+    const stops = parseStopStrings(stopStrings);
+    if (stops.length === 0) return null;
+    return {
+      type: "linear",
+      angle,
+      stops
+    };
+  }
+  const radialMatch = trimmed.match(/^radial-gradient\s*\((.*)\)$/is);
+  if (radialMatch) {
+    const rawArgs = splitCssArgs(radialMatch[1]);
+    if (rawArgs.length === 0) return null;
+    let stopStartIndex = 0;
+    const first = rawArgs[0].trim().toLowerCase();
+    if (first.startsWith("circle") || first.startsWith("ellipse") || first.includes("at ")) {
+      stopStartIndex = 1;
+    }
+    const stopStrings = rawArgs.slice(stopStartIndex);
+    if (stopStrings.length === 0) return null;
+    const stops = parseStopStrings(stopStrings);
+    if (stops.length === 0) return null;
+    return {
+      type: "radial",
+      cx: 0.5,
+      cy: 0.5,
+      r: 0.5,
+      stops
+    };
+  }
+  return null;
+}
+function parseStopStrings(stopStrings) {
+  const count = stopStrings.length;
+  return stopStrings.map((str, idx) => {
+    const parts = str.trim().split(/\s+(?=[0-9%])/);
+    const color = parts[0];
+    let offset = count === 1 ? 0 : idx / (count - 1);
+    if (parts.length > 1) {
+      const posStr = parts[1].trim();
+      if (posStr.endsWith("%")) {
+        offset = parseFloat(posStr) / 100;
+      } else {
+        const val = parseFloat(posStr);
+        if (Number.isFinite(val)) offset = val;
+      }
+    }
+    return {
+      offset: Math.min(1, Math.max(0, offset)),
+      color
+    };
+  });
+}
+function resolveCanvasGradient(value) {
+  if (!value) return null;
+  if (isCanvasGradient(value)) return value;
+  if (typeof value === "string") {
+    const lower = value.trim().toLowerCase();
+    if (CANVAS_GRADIENT_PRESETS[lower]) {
+      return CANVAS_GRADIENT_PRESETS[lower];
+    }
+    if (lower.startsWith("linear-gradient") || lower.startsWith("radial-gradient")) {
+      return parseCssGradient(value);
+    }
+  }
+  return null;
+}
+function angleToSvgLinearCoords(angleDeg = 180) {
+  const rad = (90 - angleDeg) * Math.PI / 180;
+  const dx = Math.cos(rad);
+  const dy = -Math.sin(rad);
+  const half = 0.5;
+  return {
+    x1: Math.round((half - dx * half) * 1e3) / 1e3,
+    y1: Math.round((half - dy * half) * 1e3) / 1e3,
+    x2: Math.round((half + dx * half) * 1e3) / 1e3,
+    y2: Math.round((half + dy * half) * 1e3) / 1e3
+  };
+}
+function gradientToSvgDef(gradient, id) {
+  const stops = (gradient.stops ?? []).map((s) => ({
+    offset: `${Math.round(s.offset * 1e3) / 10}%`,
+    stopColor: s.color,
+    stopOpacity: s.opacity
+  }));
+  if (gradient.type === "radial") {
+    return {
+      id,
+      type: "radial",
+      attrs: {
+        cx: gradient.cx !== void 0 ? `${gradient.cx * 100}%` : "50%",
+        cy: gradient.cy !== void 0 ? `${gradient.cy * 100}%` : "50%",
+        r: gradient.r !== void 0 ? `${gradient.r * 100}%` : "50%"
+      },
+      stops
+    };
+  }
+  const coords = angleToSvgLinearCoords(gradient.angle ?? 180);
+  return {
+    id,
+    type: "linear",
+    attrs: {
+      x1: `${coords.x1 * 100}%`,
+      y1: `${coords.y1 * 100}%`,
+      x2: `${coords.x2 * 100}%`,
+      y2: `${coords.y2 * 100}%`
+    },
+    stops
+  };
+}
+
 // src/canvas/shapeGeometry.ts
 var SHAPE_KINDS = ["rect", "ellipse", "polygon", "star", "path"];
 function isShapeDescription(value) {
@@ -2861,23 +3088,54 @@ function getShapeSvg(shape, size) {
   }
   return transforms.length > 0 ? { d, transform: transforms.join(" "), fillRule } : { d, fillRule };
 }
-function getShapeRenderData(shape, size = {}) {
+function getShapeRenderData(shape, size = {}, options = {}) {
   const vb = shape.kind === "path" ? validViewBox(shape.viewBox) : null;
   const width = size.width && size.width > 0 ? size.width : vb ? vb[2] : 100;
   const height = size.height && size.height > 0 ? size.height : vb ? vb[3] : 100;
   const svg = getShapeSvg(shape, { width, height });
+  const baseId = options.id || Math.random().toString(36).slice(2, 9);
+  let fillStr = "currentColor";
+  let fillGradientDef;
+  const rawFill = shape.fillGradient ?? shape.fill;
+  const resolvedFillGradient = resolveCanvasGradient(rawFill);
+  if (resolvedFillGradient) {
+    const gradId = `shape-fill-${baseId}`;
+    fillGradientDef = gradientToSvgDef(resolvedFillGradient, gradId);
+    fillStr = `url(#${gradId})`;
+  } else if (typeof shape.fill === "string") {
+    fillStr = shape.fill;
+  } else if (shape.fill === void 0) {
+    fillStr = "currentColor";
+  }
+  let strokeStr = "none";
+  let strokeGradientDef;
+  const rawStroke = shape.strokeGradient ?? shape.stroke;
+  const resolvedStrokeGradient = resolveCanvasGradient(rawStroke);
+  if (resolvedStrokeGradient) {
+    const gradId = `shape-stroke-${baseId}`;
+    strokeGradientDef = gradientToSvgDef(resolvedStrokeGradient, gradId);
+    strokeStr = `url(#${gradId})`;
+  } else if (typeof shape.stroke === "string") {
+    strokeStr = shape.stroke;
+  } else if (shape.stroke === void 0) {
+    strokeStr = "none";
+  }
   const data = {
     viewBox: `0 0 ${formatNumber2(width, 3)} ${formatNumber2(height, 3)}`,
     width,
     height,
     d: svg.d,
     fillRule: svg.fillRule,
-    fill: shape.fill ?? "currentColor",
-    stroke: shape.stroke ?? "none",
+    fill: fillStr,
+    stroke: strokeStr,
     strokeWidth: shape.strokeWidth ?? 1
   };
   if (svg.transform) data.transform = svg.transform;
   if (shape.opacity !== void 0) data.opacity = shape.opacity;
+  if (shape.strokeLinecap) data.strokeLinecap = shape.strokeLinecap;
+  if (shape.strokeLinejoin) data.strokeLinejoin = shape.strokeLinejoin;
+  if (fillGradientDef) data.fillGradient = fillGradientDef;
+  if (strokeGradientDef) data.strokeGradient = strokeGradientDef;
   return data;
 }
 function clampRatio(value) {
@@ -5313,12 +5571,18 @@ function revertShapeCombination(nodes, change, previous) {
 }
 var INVISIBLE_PAINT = /* @__PURE__ */ new Set(["none", "transparent"]);
 function hasVisibleStroke(shape) {
-  if (!shape || typeof shape.stroke !== "string" || INVISIBLE_PAINT.has(shape.stroke.trim().toLowerCase())) return false;
+  if (!shape) return false;
+  const stroke = shape.strokeGradient ?? shape.stroke;
+  if (stroke === void 0 || stroke === null) return false;
+  if (typeof stroke === "string" && INVISIBLE_PAINT.has(stroke.trim().toLowerCase())) return false;
   const width = shape.strokeWidth ?? 1;
   return Number.isFinite(width) && width > 0;
 }
 function hasVisibleFill(shape) {
-  return shape.fill === void 0 || !INVISIBLE_PAINT.has(String(shape.fill).trim().toLowerCase());
+  if (shape.fillGradient) return true;
+  if (shape.fill === void 0) return true;
+  if (typeof shape.fill === "object" && shape.fill !== null) return true;
+  return !INVISIBLE_PAINT.has(String(shape.fill).trim().toLowerCase());
 }
 function shapeTargets(nodes, ids) {
   const idSet = new Set(ids);
@@ -11483,6 +11747,8 @@ function strokeToShapeNode(stroke, options = {}) {
   });
   const width = Math.max(bounds.width, 1);
   const height = Math.max(bounds.height, 1);
+  const strokePaint = stroke.style.gradient ?? stroke.style.color;
+  const strokeGradient = stroke.style.gradient ?? (typeof stroke.style.color === "object" && stroke.style.color ? stroke.style.color : void 0);
   return {
     id: options.id ?? stroke.id,
     type: "shape",
@@ -11498,9 +11764,12 @@ function strokeToShapeNode(stroke, options = {}) {
         kind: "path",
         d,
         viewBox: [0, 0, width, height],
-        stroke: stroke.style.color,
+        stroke: strokePaint,
         strokeWidth,
         opacity: stroke.style.opacity,
+        strokeLinecap: stroke.style.cap ?? "round",
+        strokeLinejoin: stroke.style.join ?? "round",
+        ...strokeGradient ? { strokeGradient } : {},
         fill: "none"
       },
       tool: stroke.tool
@@ -11709,6 +11978,7 @@ export {
   AnimationEditError,
   AnimationPlayer,
   CANVAS_COMPONENT_DRAG_TYPE,
+  CANVAS_GRADIENT_PRESETS,
   CANVAS_TOKEN_PROPERTIES,
   CHILD_LAYOUT_DATA_KEY,
   COMPONENT_DATA_KEY,
@@ -11741,6 +12011,7 @@ export {
   addCanvasVariant,
   addKeyframesAtTime,
   alignNodes,
+  angleToSvgLinearCoords,
   animateNode,
   applyAnimation,
   applyAnimationOverrides,
@@ -11888,6 +12159,7 @@ export {
   getVariantOptions,
   getVariantSet,
   getVariantValues,
+  gradientToSvgDef,
   handlePoint,
   hasVisibleStroke,
   inferResizeHandle,
@@ -11902,6 +12174,7 @@ export {
   isAutoLayoutFrame,
   isCanvasComponent,
   isCanvasComponentSet,
+  isCanvasGradient,
   isCanvasInstance,
   isCssExportExact,
   isEventFromTextInput,
@@ -11953,6 +12226,7 @@ export {
   parseCanvasClipboardData,
   parseCanvasScenes,
   parseCssEasing,
+  parseCssGradient,
   parseKeyframeClipboard,
   parseNodeStyleDeclarations,
   parseOklab,
@@ -11988,6 +12262,7 @@ export {
   repositionNodesTo,
   resetCanvasInstanceOverrides,
   resizeHandleAxes,
+  resolveCanvasGradient,
   resolveCanvasTokens,
   resolveEasing,
   resolvePadding,