@pixerate/editor-react 0.87.0 → 0.88.0

package/dist/vector/index.js

@@ -277,7 +277,12 @@ var VectorSceneNode = React2.memo(function VectorSceneNode2({ node }) {
   if (node.layers)
     return (
       // Fill and stroke stacks: each layer in order, bottom to top.
-      /* @__PURE__ */ jsx2("g", { "data-vector-id": node.id, transform: node.transform, opacity: node.opacity < 1 ? node.opacity : void 0, filter: node.filter, style: blendStyle(node.blendMode), children: node.layers.map((layer) => /* @__PURE__ */ jsx2(VectorPaintPath, { paint: layer, d: node.d, fillRule: node.fillRule, layer: `${layer.kind}-${layer.index}` }, `${layer.kind}-${layer.index}`)) })
+      /* @__PURE__ */ jsx2("g", { "data-vector-id": node.id, transform: node.transform, opacity: node.opacity < 1 ? node.opacity : void 0, filter: node.filter, style: blendStyle(node.blendMode), children: node.layers.map(
+        (layer) => layer.kind === "brushstroke" ? (
+          // A brushstroke: its rendered brush images over their boxes.
+          /* @__PURE__ */ jsx2("g", { "data-vector-layer": `brushstroke-${layer.index}`, opacity: layer.opacity < 1 ? layer.opacity : void 0, style: blendStyle(layer.blendMode), children: (layer.images ?? []).map((im, i) => /* @__PURE__ */ jsx2("image", { href: im.href, x: im.x, y: im.y, width: im.width, height: im.height, preserveAspectRatio: "none" }, i)) }, `${layer.kind}-${layer.index}`)
+        ) : /* @__PURE__ */ jsx2(VectorPaintPath, { paint: layer, d: node.d, fillRule: node.fillRule, layer: `${layer.kind}-${layer.index}` }, `${layer.kind}-${layer.index}`)
+      ) })
     );
   return /* @__PURE__ */ jsx2(VectorPaintPath, { paint: node, d: node.d, fillRule: node.fillRule, id: node.id, transform: node.transform, filter: node.filter, blendMode: node.blendMode });
 });
@@ -1004,7 +1009,8 @@ import {
   VECTOR_BLEND_MODE_MENU,
   VECTOR_FILTER_MENU,
   VECTOR_STROKE_ALIGN_LABELS,
-  getVectorAppearancePanel
+  getVectorAppearancePanel,
+  vectorBrushstrokeBrushes
 } from "@pixerate/editor/vector";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var buttonClass2 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40";
@@ -1021,6 +1027,30 @@ function VectorAppearancePanel({ controller, className }) {
   const update = (l, patch, merge = false) => controller.updatePaintLayer(l.kind, l.index, patch, { ids, merge });
   const layerRow = (l, count) => {
     const name = `${l.kind === "fill" ? "Fill" : "Stroke"} ${l.index + 1}`;
+    if (l.brushstroke)
+      return /* @__PURE__ */ jsx4("div", { className: "space-y-1 rounded border border-border p-1", "data-vector-layer": `${l.kind}-${l.index}`, "data-vector-brushstroke": "", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx4("input", { type: "checkbox", "aria-label": `${name} visible`, title: "Show", checked: l.visible, onChange: (e) => update(l, { visible: e.target.checked }) }),
+        /* @__PURE__ */ jsx4("input", { type: "color", "aria-label": `${name} colour`, className: "h-7 w-10 cursor-pointer rounded border border-border bg-background", value: l.color ?? "#000000", onChange: (e) => controller.setBrushstroke(l.index, { color: e.target.value }, { ids, merge: true }), onBlur: end }),
+        /* @__PURE__ */ jsx4("select", { "aria-label": `${name} brush`, className: selectClass2, value: l.brushstroke.brushId, onChange: (e) => controller.setBrushstroke(l.index, { brushId: e.target.value }, { ids }), children: vectorBrushstrokeBrushes().map((b) => /* @__PURE__ */ jsx4("option", { value: b.id, children: b.name }, b.id)) }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "number",
+            min: 0.5,
+            step: 0.5,
+            "aria-label": `${name} brush size`,
+            title: "Brush size",
+            className: numberClass2,
+            value: l.brushstroke.size,
+            onChange: (e) => {
+              const n = parseFloat(e.target.value);
+              if (Number.isFinite(n) && n > 0) controller.setBrushstroke(l.index, { size: Math.min(500, n) }, { ids, merge: true });
+            },
+            onBlur: end
+          }
+        ),
+        /* @__PURE__ */ jsx4("button", { type: "button", className: buttonClass2, title: "Remove", "aria-label": `Remove ${name}`, onClick: () => controller.removePaintLayer("stroke", l.index, { ids }), children: "\xD7" })
+      ] }) }, `${l.kind}-${l.index}`);
     if (l.unknownKind)
       return /* @__PURE__ */ jsxs4("div", { className: "text-[11px] text-muted-foreground", "data-vector-layer": `${l.kind}-${l.index}`, children: [
         name,
@@ -1116,7 +1146,8 @@ function VectorAppearancePanel({ controller, className }) {
           onClick: () => controller.addPaintLayer(kind, {}, { ids }),
           children: "+"
         }
-      )
+      ),
+      kind === "stroke" && /* @__PURE__ */ jsx4("button", { type: "button", className: buttonClass2, title: "Add a brushstroke (a natural-media brush along the path)", "aria-label": "Add brushstroke", "data-vector-add-brushstroke": "", disabled: !ids.length, onClick: () => controller.addBrushstroke({ brushId: vectorBrushstrokeBrushes()[0].id }, { ids }), children: "\u270E+" })
     ] }),
     [...layers].reverse().map((l) => layerRow(l, layers.length))
   ] });