@pixerate/editor-react 0.21.0 → 0.22.0

package/dist/canvas/index.cjs

@@ -31,6 +31,7 @@ __export(canvas_exports, {
   AnimationPlayer: () => import_canvas26.AnimationPlayer,
   AnimationTimeline: () => AnimationTimeline,
   CANVAS_COMPONENT_DRAG_TYPE: () => import_canvas27.CANVAS_COMPONENT_DRAG_TYPE,
+  CANVAS_GRADIENT_PRESETS: () => import_canvas27.CANVAS_GRADIENT_PRESETS,
   CANVAS_TOKEN_PROPERTIES: () => import_canvas25.CANVAS_TOKEN_PROPERTIES,
   CHILD_LAYOUT_DATA_KEY: () => import_canvas24.CHILD_LAYOUT_DATA_KEY,
   CONNECTION_LINE_TYPES: () => import_canvas20.CONNECTION_LINE_TYPES,
@@ -57,6 +58,7 @@ __export(canvas_exports, {
   addCanvasVariant: () => import_canvas27.addCanvasVariant,
   addKeyframesAtTime: () => import_canvas26.addKeyframesAtTime,
   alignNodes: () => import_canvas20.alignNodes,
+  angleToSvgLinearCoords: () => import_canvas27.angleToSvgLinearCoords,
   animateNode: () => import_canvas26.animateNode,
   applyAnimation: () => import_canvas26.applyAnimation,
   applyAnimationOverrides: () => import_canvas26.applyAnimationOverrides,
@@ -178,6 +180,7 @@ __export(canvas_exports, {
   getTimelineTicks: () => import_canvas26.getTimelineTicks,
   getTokenPropertyScope: () => import_canvas25.getTokenPropertyScope,
   getTokensForProperty: () => import_canvas25.getTokensForProperty,
+  gradientToSvgDef: () => import_canvas27.gradientToSvgDef,
   handlePoint: () => import_canvas20.handlePoint,
   hasVisibleStroke: () => import_canvas22.hasVisibleStroke,
   inferResizeHandle: () => import_canvas19.inferResizeHandle,
@@ -192,6 +195,7 @@ __export(canvas_exports, {
   isAutoLayoutFrame: () => import_canvas24.isAutoLayoutFrame,
   isCanvasComponent: () => import_canvas27.isCanvasComponent,
   isCanvasComponentSet: () => import_canvas27.isCanvasComponentSet,
+  isCanvasGradient: () => import_canvas27.isCanvasGradient,
   isCanvasInstance: () => import_canvas27.isCanvasInstance,
   isCssExportExact: () => import_canvas26.isCssExportExact,
   isEventFromTextInput: () => import_canvas23.isEventFromTextInput,
@@ -239,6 +243,7 @@ __export(canvas_exports, {
   parseCanvasClipboardData: () => import_canvas23.parseCanvasClipboardData,
   parseCanvasScenes: () => import_canvas20.parseCanvasScenes,
   parseCssEasing: () => import_canvas26.parseCssEasing,
+  parseCssGradient: () => import_canvas27.parseCssGradient,
   parseKeyframeClipboard: () => import_canvas26.parseKeyframeClipboard,
   parseOklab: () => import_canvas26.parseOklab,
   parseSvgPath: () => import_canvas21.parseSvgPath,
@@ -270,6 +275,7 @@ __export(canvas_exports, {
   repositionNodesTo: () => import_canvas23.repositionNodesTo,
   resetCanvasInstanceOverrides: () => import_canvas27.resetCanvasInstanceOverrides,
   resizeHandleAxes: () => import_canvas19.resizeHandleAxes,
+  resolveCanvasGradient: () => import_canvas27.resolveCanvasGradient,
   resolveCanvasTokens: () => import_canvas25.resolveCanvasTokens,
   resolveEasing: () => import_canvas26.resolveEasing,
   resolvePadding: () => import_canvas24.resolvePadding,
@@ -1446,6 +1452,9 @@ function CanvasDrawLayer({
   };
   const resolvedCursor = cursor ? cursor : spaceHeld ? "grab" : draw.tool === "eraser" ? "crosshair" : draw.tool === "pen" || draw.tool === "highlighter" ? "crosshair" : "default";
   const strokePath = draw.activeStroke ? (0, import_canvas9.strokePointsToPathData)(draw.activeStroke.points) : null;
+  const activeGradient = draw.activeStroke ? (0, import_canvas9.resolveCanvasGradient)(draw.activeStroke.style.gradient ?? draw.activeStroke.style.color) : null;
+  const resolvedGradientDef = activeGradient ? (0, import_canvas9.gradientToSvgDef)(activeGradient, "active-draw-stroke-gradient") : null;
+  const strokePaint = resolvedGradientDef ? `url(#${resolvedGradientDef.id})` : draw.activeStroke ? draw.activeStroke.style.color : "currentColor";
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "svg",
     {
@@ -1468,12 +1477,17 @@ function CanvasDrawLayer({
       onPointerUp: handlePointerUp,
       onPointerLeave: handlePointerLeave,
       children: [
+        resolvedGradientDef && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("defs", { children: [
+          resolvedGradientDef.type === "linear" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("linearGradient", { id: resolvedGradientDef.id, ...resolvedGradientDef.attrs, children: resolvedGradientDef.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
+          resolvedGradientDef.type === "radial" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("radialGradient", { id: resolvedGradientDef.id, ...resolvedGradientDef.attrs, children: resolvedGradientDef.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { transform: `translate(${viewport.x}, ${viewport.y}) scale(${viewport.zoom})`, children: draw.activeStroke && strokePath && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "path",
           {
+            className: "pixerate-canvas-draw-active",
             d: strokePath,
             fill: "none",
-            stroke: draw.activeStroke.style.color,
+            stroke: strokePaint,
             strokeWidth: draw.activeStroke.style.width,
             opacity: draw.activeStroke.style.opacity,
             strokeLinecap: draw.activeStroke.style.cap ?? "round",
@@ -1560,10 +1574,10 @@ var import_canvas20 = require("@pixerate/editor/canvas");
 // src/canvas/ShapeNode.tsx
 var import_canvas11 = require("@pixerate/editor/canvas");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function ShapeNode({ data, width, height, selected, className = "", children }) {
+function ShapeNode({ id, data, width, height, selected, className = "", children }) {
   const shape = data?.shape;
   if (!(0, import_canvas11.isShapeDescription)(shape)) return null;
-  const render = (0, import_canvas11.getShapeRenderData)(shape, { width, height });
+  const render = (0, import_canvas11.getShapeRenderData)(shape, { width, height }, { id: id || data?.id });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
@@ -1572,7 +1586,7 @@ function ShapeNode({ data, width, height, selected, className = "", children })
       "data-selected": selected ? "true" : void 0,
       style: { position: "relative", width: "100%", height: "100%" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "svg",
           {
             viewBox: render.viewBox,
@@ -1581,19 +1595,29 @@ function ShapeNode({ data, width, height, selected, className = "", children })
             height: "100%",
             style: { display: "block", overflow: "visible" },
             "aria-hidden": "true",
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              "path",
-              {
-                d: render.d,
-                transform: render.transform,
-                fill: render.fill,
-                fillRule: render.fillRule,
-                stroke: render.stroke,
-                strokeWidth: render.strokeWidth,
-                opacity: render.opacity,
-                vectorEffect: "non-scaling-stroke"
-              }
-            )
+            children: [
+              (render.fillGradient || render.strokeGradient) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("defs", { children: [
+                render.fillGradient && render.fillGradient.type === "linear" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("linearGradient", { id: render.fillGradient.id, ...render.fillGradient.attrs, children: render.fillGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
+                render.fillGradient && render.fillGradient.type === "radial" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("radialGradient", { id: render.fillGradient.id, ...render.fillGradient.attrs, children: render.fillGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
+                render.strokeGradient && render.strokeGradient.type === "linear" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("linearGradient", { id: render.strokeGradient.id, ...render.strokeGradient.attrs, children: render.strokeGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
+                render.strokeGradient && render.strokeGradient.type === "radial" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("radialGradient", { id: render.strokeGradient.id, ...render.strokeGradient.attrs, children: render.strokeGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "path",
+                {
+                  d: render.d,
+                  transform: render.transform,
+                  fill: render.fill,
+                  fillRule: render.fillRule,
+                  stroke: render.stroke,
+                  strokeWidth: render.strokeWidth,
+                  strokeLinecap: render.strokeLinecap,
+                  strokeLinejoin: render.strokeLinejoin,
+                  opacity: render.opacity,
+                  vectorEffect: "non-scaling-stroke"
+                }
+              )
+            ]
           }
         ),
         children
@@ -2497,6 +2521,7 @@ var import_canvas27 = require("@pixerate/editor/canvas");
   AnimationPlayer,
   AnimationTimeline,
   CANVAS_COMPONENT_DRAG_TYPE,
+  CANVAS_GRADIENT_PRESETS,
   CANVAS_TOKEN_PROPERTIES,
   CHILD_LAYOUT_DATA_KEY,
   CONNECTION_LINE_TYPES,
@@ -2523,6 +2548,7 @@ var import_canvas27 = require("@pixerate/editor/canvas");
   addCanvasVariant,
   addKeyframesAtTime,
   alignNodes,
+  angleToSvgLinearCoords,
   animateNode,
   applyAnimation,
   applyAnimationOverrides,
@@ -2644,6 +2670,7 @@ var import_canvas27 = require("@pixerate/editor/canvas");
   getTimelineTicks,
   getTokenPropertyScope,
   getTokensForProperty,
+  gradientToSvgDef,
   handlePoint,
   hasVisibleStroke,
   inferResizeHandle,
@@ -2658,6 +2685,7 @@ var import_canvas27 = require("@pixerate/editor/canvas");
   isAutoLayoutFrame,
   isCanvasComponent,
   isCanvasComponentSet,
+  isCanvasGradient,
   isCanvasInstance,
   isCssExportExact,
   isEventFromTextInput,
@@ -2705,6 +2733,7 @@ var import_canvas27 = require("@pixerate/editor/canvas");
   parseCanvasClipboardData,
   parseCanvasScenes,
   parseCssEasing,
+  parseCssGradient,
   parseKeyframeClipboard,
   parseOklab,
   parseSvgPath,
@@ -2736,6 +2765,7 @@ var import_canvas27 = require("@pixerate/editor/canvas");
   repositionNodesTo,
   resetCanvasInstanceOverrides,
   resizeHandleAxes,
+  resolveCanvasGradient,
   resolveCanvasTokens,
   resolveEasing,
   resolvePadding,