@pixerate/editor 0.136.0 → 0.137.0

package/dist/vector/index.js

@@ -20,15 +20,6 @@ import {
   orderQuad,
   solve8
 } from "../chunk-GX332W2C.js";
-import {
-  bytesToBase64,
-  decodePng,
-  isPng,
-  parseDataUrl
-} from "../chunk-7QN76ESJ.js";
-import {
-  deflate
-} from "../chunk-6FCKOS2B.js";
 import {
   correspondMorphContours,
   createVectorMorph,
@@ -47,7 +38,7 @@ import {
   reverseMorphContour,
   subpathToMorphContour,
   turnMorphContour
-} from "../chunk-KZXLZCQ7.js";
+} from "../chunk-6S6362D2.js";
 import {
   DEFAULT_VECTOR_FONT,
   IDENTITY_MATRIX,
@@ -56,6 +47,7 @@ import {
   VECTOR_BLEND_MODES,
   VECTOR_BLEND_MODE_LABELS,
   VECTOR_BLEND_SPACINGS,
+  VECTOR_BRUSHSTROKE_SCALE,
   VECTOR_CHARACTER_STYLE_KEYS,
   VECTOR_CONNECTOR_ROUTES,
   VECTOR_CONNECTOR_ROUTE_LABELS,
@@ -202,6 +194,7 @@ import {
   isUniformWidthProfile,
   isValidWarpMesh,
   isVectorBlendMode,
+  isVectorBrushstrokeLayer,
   isVectorConnector,
   isVectorFilterType,
   isVectorFrame,
@@ -292,6 +285,7 @@ import {
   sampleVectorGradient,
   sampleVectorGradientAt,
   sampleVectorPaintDefAt,
+  sanitizeVectorBrushstroke,
   sanitizeVectorConnector,
   sanitizeVectorEffects,
   sanitizeVectorFills,
@@ -360,6 +354,10 @@ import {
   vectorBlendModeFromCss,
   vectorBoundsInside,
   vectorBoxMatrix,
+  vectorBrushstrokeBrush,
+  vectorBrushstrokeBrushes,
+  vectorBrushstrokeImages,
+  vectorBrushstrokeReach,
   vectorChildAppearanceShapes,
   vectorConnectionSites,
   vectorConnectorTargetAt,
@@ -505,7 +503,8 @@ import {
   withVectorStrokes,
   withVectorTargetPaint,
   zigzagPaths
-} from "../chunk-MAHQC3SK.js";
+} from "../chunk-3D77LOBM.js";
+import "../chunk-HUO3TI4C.js";
 import {
   createProvenance
 } from "../chunk-A3BVTI3G.js";
@@ -540,6 +539,17 @@ import {
   resolveEffectValues
 } from "../chunk-QFSTQHZY.js";
 import "../chunk-4FX5ACVG.js";
+import "../chunk-5FSRTP6E.js";
+import "../chunk-63AZAUSN.js";
+import {
+  bytesToBase64,
+  decodePng,
+  isPng,
+  parseDataUrl
+} from "../chunk-3G6J7UFV.js";
+import {
+  deflate
+} from "../chunk-6FCKOS2B.js";
 import "../chunk-FPENXAEJ.js";
 import "../chunk-P6ODPZ4W.js";
 import {
@@ -2895,6 +2905,12 @@ function lineStyle(node) {
 function renderLayers(node, defs, idPrefix) {
   const out = [];
   for (const l of vectorPaintLayerNodes(node)) {
+    if (l.kind === "stroke" && isVectorBrushstrokeLayer(l.layer) && l.layer.visible !== false && (l.layer.opacity ?? 1) > 0) {
+      const images = vectorBrushstrokeImages(node, l.layer);
+      const blend2 = vectorBlendModeCss(l.layer.blendMode);
+      if (images.length) out.push({ kind: "brushstroke", index: l.index, fill: "none", stroke: "none", strokeWidth: 0, opacity: l.layer.opacity ?? 1, ...blend2 ? { blendMode: blend2 } : {}, images });
+      continue;
+    }
     if (!l.drawn) continue;
     const role = l.kind;
     const paint = vectorPaintToSvg(l.layer.paint, `${idPrefix}${role}-${node.id}-${l.index}`, { node: l.node, ...role === "stroke" ? { role } : {} });
@@ -3919,7 +3935,11 @@ function getVectorAppearancePanel(state) {
     blendMode: l.blendMode ?? "normal",
     visible: l.visible !== false,
     ...kind === "stroke" ? { strokeWidth: l.strokeWidth ?? 1, strokeAlign: l.strokeAlign ?? "center" } : {},
-    ...(l.kind ?? "paint") !== "paint" ? { unknownKind: String(l.kind) } : {},
+    ...isVectorBrushstrokeLayer(l) ? (() => {
+      const b = l.brush;
+      const preset = vectorBrushstrokeBrush(b.brushId);
+      return { brushstroke: { brushId: b.brushId, name: preset.name, size: b.size ?? preset.tip.size } };
+    })() : (l.kind ?? "paint") !== "paint" ? { unknownKind: String(l.kind) } : {},
     editing: edit.target === kind && (edit.layer === null ? index === count - 1 : edit.layer === index)
   });
   const fills = first ? vectorFills(first) : [];
@@ -4072,6 +4092,7 @@ var Page = class {
   content = [];
   states = /* @__PURE__ */ new Map();
   shadings = /* @__PURE__ */ new Map();
+  images = /* @__PURE__ */ new Map();
   /** A graphics state with this fill / stroke alpha and blend mode, by name. */
   gs(alpha, strokeAlpha, blend) {
     const bm = blend ? BLEND[blend] : void 0;
@@ -4085,6 +4106,36 @@ var Page = class {
     }
     return name;
   }
+  /** An image (a PNG data URL) as an XObject with its alpha as a soft mask, by name; null when unreadable. */
+  image(href) {
+    const hit = this.images.get(href);
+    if (hit) return hit;
+    const parsed = parseDataUrl(href);
+    if (!parsed || !isPng(parsed.bytes)) return null;
+    let img;
+    try {
+      img = decodePng(parsed.bytes);
+    } catch {
+      return null;
+    }
+    const px = img.width * img.height;
+    const rgb = new Uint8Array(px * 3);
+    const alpha = new Uint8Array(px);
+    for (let i = 0; i < px; i++) {
+      rgb[i * 3] = img.data[i * 4];
+      rgb[i * 3 + 1] = img.data[i * 4 + 1];
+      rgb[i * 3 + 2] = img.data[i * 4 + 2];
+      alpha[i] = img.data[i * 4 + 3];
+    }
+    const w = this.writer;
+    const dims = `/Type /XObject /Subtype /Image /Width ${img.width} /Height ${img.height} /BitsPerComponent 8`;
+    const mask = w.add(w.stream(`${dims} /ColorSpace /DeviceGray`, alpha, true));
+    const id = w.add(w.stream(`${dims} /ColorSpace /DeviceRGB /SMask ${mask} 0 R`, rgb, true));
+    const name = `Im${this.images.size + 1}`;
+    this.images.set(href, name);
+    w.imageIds.set(`${w.pageIndex}:${name}`, id);
+    return name;
+  }
   /** Sets the fill colour (or prepares a paint server) for `paint`: returns its alpha, or a def to fill with by clipping. */
   paint(paint, stroking) {
     if (!paint || paint === "none") return null;
@@ -4230,6 +4281,14 @@ var Page = class {
     for (const l of layers) {
       const a = alpha * l.opacity;
       const blend = l.blendMode ?? p.blendMode;
+      if (l.kind === "brushstroke") {
+        for (const im of l.images ?? []) {
+          const name = this.image(im.href);
+          if (!name) continue;
+          this.content.push("q", `/${this.gs(a, a, blend)} gs`, `${n(im.width)} 0 0 ${n(-im.height)} ${n(im.x)} ${n(im.y + im.height)} cm`, `/${name} Do`, "Q");
+        }
+        continue;
+      }
       if (l.kind === "fill") {
         if (l.fill !== "none") this.fill(p.d, l.fill, a, evenodd, blend);
       } else if (l.stroke !== "none" && l.strokeWidth > 0) {
@@ -4247,6 +4306,7 @@ var PdfWriter = class {
   objects = [];
   gsDicts = /* @__PURE__ */ new Map();
   shadingDicts = /* @__PURE__ */ new Map();
+  imageIds = /* @__PURE__ */ new Map();
   pageIndex = 0;
   add(body) {
     this.objects.push(body);
@@ -4332,7 +4392,8 @@ function vectorDocumentToPdf(doc, options = {}) {
     const content = w.add(w.stream("", new TextEncoder().encode(page.content.join("\n")), compress));
     const gsEntries = [...page.states.values()].map((name) => `/${name} ${w.add(w.gsDicts.get(`${k}:${name}`))} 0 R`);
     const shEntries = [...page.shadings.values()].map((name) => `/${name} ${w.add(w.shadingDicts.get(`${k}:${name}`))} 0 R`);
-    const resources = `<< ${gsEntries.length ? `/ExtGState << ${gsEntries.join(" ")} >> ` : ""}${shEntries.length ? `/Shading << ${shEntries.join(" ")} >>` : ""} >>`;
+    const imEntries = [...page.images.values()].map((name) => `/${name} ${w.imageIds.get(`${k}:${name}`)} 0 R`);
+    const resources = `<< ${gsEntries.length ? `/ExtGState << ${gsEntries.join(" ")} >> ` : ""}${shEntries.length ? `/Shading << ${shEntries.join(" ")} >> ` : ""}${imEntries.length ? `/XObject << ${imEntries.join(" ")} >>` : ""} >>`;
     pageIds.push(w.add(`<< /Type /Page /Parent ${pagesId} 0 R /MediaBox [0 0 ${n(W)} ${n(H)}] /Resources ${resources} /Contents ${content} 0 R >>`));
   });
   w.set(catalog, `<< /Type /Catalog /Pages ${pagesId} 0 R >>`);
@@ -4517,6 +4578,7 @@ function pathItems(node, notes) {
 function nodeGroup(node, notes) {
   if (node.visible === false) return null;
   if (node.filters?.length) notes.push(`${label(node)}: filters (shadows, glows, blurs) are not part of Lottie (left out).`);
+  if (node.type === "path" && node.strokes?.some((l) => l.kind === "brushstroke" && l.visible !== false)) notes.push(`${label(node)}: brushstrokes are raster images, not part of Lottie (left out).`);
   const m = nodeMatrix(node);
   let items = [];
   const live = (node.effects ?? []).some((e) => e.enabled !== false && (e.type === "wiggle" || e.type === "envelope" || e.type === "contour" || e.type === "blockShadow" || e.type === "extrude" || e.type === "bevel"));
@@ -8726,6 +8788,57 @@ var VectorEditorController = class _VectorEditorController {
       merge
     );
   }
+  /**
+   * Adds a brushstroke to the selected (or given) paths: a stroke layer that paints the path with
+   * brush `brushId` from the paint editor's library (`vectorBrushstrokeBrushes`), `size` document
+   * units across (default the brush's own), an optional `pressure` profile along the length, in
+   * `color` (default the top stroke's paint, else black) at `opacity`. At the top of the stroke
+   * stack or at `index`. One undo step.
+   */
+  addBrushstroke(brush, options = {}) {
+    const clean = sanitizeVectorBrushstroke(brush);
+    if (!clean) return { ok: false, message: `Unknown brush "${brush?.brushId}": use one of ${vectorBrushstrokeBrushes().map((b) => b.id).join(", ")}.` };
+    if (brush.size !== void 0 && !(brush.size > 0 && brush.size <= 500)) return { ok: false, message: "size must be above 0 and at most 500 (document units)." };
+    if (options.color !== void 0 && !parseVectorColor(options.color)) return { ok: false, message: `"${options.color}" is not a colour.` };
+    if (options.opacity !== void 0 && !(options.opacity >= 0 && options.opacity <= 1)) return { ok: false, message: "opacity must be from 0 to 1." };
+    return this.editStacks("stroke", options.ids, "Add Brushstroke", (stack, path) => {
+      const top = [...stack].reverse().find((l) => (l.kind ?? "paint") === "paint");
+      const paint = options.color ?? (typeof top?.paint === "string" && top.paint !== "none" ? top.paint : typeof path.stroke === "string" && path.stroke !== "none" ? path.stroke : "#000000");
+      const layer = { kind: "brushstroke", paint, brush: clean, ...options.opacity !== void 0 && options.opacity < 1 ? { opacity: options.opacity } : {} };
+      const at = options.index === void 0 ? stack.length : Math.min(stack.length, Math.max(0, Math.round(options.index)));
+      return [...stack.slice(0, at), layer, ...stack.slice(at)];
+    });
+  }
+  /**
+   * Changes brushstroke layer `index` (in the stroke stack, 0 is the bottom) of the selected (or
+   * given) paths: another brush, size, pressure profile (null removes it), colour or opacity.
+   * Fails, changing nothing, when that layer is not a brushstroke. With `merge`, consecutive edits
+   * fold into one undo step.
+   */
+  setBrushstroke(index, patch, options = {}) {
+    if (patch.brushId !== void 0 && !vectorBrushstrokeBrush(patch.brushId)) return { ok: false, message: `Unknown brush "${patch.brushId}": use one of ${vectorBrushstrokeBrushes().map((b) => b.id).join(", ")}.` };
+    if (patch.size !== void 0 && patch.size !== null && !(patch.size > 0 && patch.size <= 500)) return { ok: false, message: "size must be above 0 and at most 500 (document units)." };
+    if (patch.color !== void 0 && !parseVectorColor(patch.color)) return { ok: false, message: `"${patch.color}" is not a colour.` };
+    if (patch.opacity !== void 0 && !(patch.opacity >= 0 && patch.opacity <= 1)) return { ok: false, message: "opacity must be from 0 to 1." };
+    const merge = options.merge === true ? `brushstroke:${index}` : options.merge || void 0;
+    return this.editStacks(
+      "stroke",
+      options.ids,
+      "Edit Brushstroke",
+      (stack, path) => {
+        const layer = stack[index];
+        if (!layer || layer.kind !== "brushstroke" || !layer.brush) return `Path "${path.id}" has no brushstroke at stroke ${index} (vector.getAppearance lists its strokes; 0 is the bottom).`;
+        const brush = { ...layer.brush, ...patch.brushId ? { brushId: patch.brushId } : {} };
+        if (patch.size === null) delete brush.size;
+        else if (patch.size !== void 0) brush.size = patch.size;
+        if (patch.pressure === null) delete brush.pressure;
+        else if (patch.pressure !== void 0) brush.pressure = patch.pressure;
+        const next = { ...layer, brush: sanitizeVectorBrushstroke(brush) ?? layer.brush, ...patch.color ? { paint: patch.color } : {}, ...patch.opacity !== void 0 ? { opacity: patch.opacity } : {} };
+        return stack.map((l, i) => i === index ? next : l);
+      },
+      merge
+    );
+  }
   /** Removes layer `index` of the fill or stroke stack of the selected (or given) paths. */
   removePaintLayer(kind, index, options = {}) {
     return this.editStacks(
@@ -16166,6 +16279,85 @@ function createVectorCommands(controller, options = {}) {
       }
     }
   ];
+  const brushstrokeCommands = () => [
+    {
+      ...base,
+      id: `${prefix}listBrushes`,
+      label: "Brushstroke Brushes",
+      readOnly: true,
+      keywords: ["brush", "brushstroke", "pencil", "pastel", "charcoal", "ink", "marker", "natural media"],
+      description: "Lists the brushes a brushstroke can use (the paint editor's dry brushes): { brushes: [{ id, name, category, size }] } (size: the brush's own diameter in document units).",
+      params: { type: "object", properties: {}, additionalProperties: false },
+      run: () => ({ brushes: vectorBrushstrokeBrushes().map((b) => ({ id: b.id, name: b.name, category: b.category, size: b.tip.size })) })
+    },
+    {
+      ...base,
+      id: `${prefix}addBrushstroke`,
+      label: "Add Brushstroke\u2026",
+      keywords: ["brushstroke", "brush", "natural media", "pencil line", "chalk", "sketchy", "hand-drawn", "ink stroke"],
+      description: "Paints paths (`ids`, default the selection; groups: every path inside) with a natural-media brush along their outline, as a stroke layer of kind brushstroke: `brushId` from vector.listBrushes, `size` (document units), an optional `pressure` profile (0\u20131 values spread from start to end, e.g. [0.2, 1, 0.2] for a tapered stroke), `color` and `opacity`. The path stays editable; the strokes follow it. One undo step. Returns { paths: [{ id, strokes }] } (the brushstroke is a stroke layer; change it with vector.setBrushstroke, remove it with vector.removeStroke).",
+      params: {
+        type: "object",
+        properties: {
+          ids: { ...IDS, description: "Paths or groups (default: the selection)." },
+          brushId: { type: "string", description: 'Brush id from vector.listBrushes, e.g. "pencil-hb".' },
+          size: { type: "number", exclusiveMinimum: 0, maximum: 500, description: "Brush diameter in document units (default: the brush's own)." },
+          pressure: { type: "array", items: { type: "number", minimum: 0, maximum: 1 }, minItems: 1, maxItems: 64, description: "Pressure 0\u20131 along the length, spread evenly from start to end (default: full pressure)." },
+          color: { type: "string", description: "CSS colour (default: the path's stroke colour, else black)." },
+          opacity: { type: "number", minimum: 0, maximum: 1, description: "Layer opacity 0\u20131 (default 1)." },
+          index: { type: "integer", minimum: 0, description: "Position in the stroke stack, 0 the bottom (default: on top)." }
+        },
+        required: ["brushId"],
+        additionalProperties: false
+      },
+      undoable: true,
+      enabled: enabledFor,
+      run: (_ctx, params) => {
+        const targets = params.ids ?? controller.getState().selection;
+        check2(
+          controller.addBrushstroke(
+            { brushId: params.brushId, ...params.size !== void 0 ? { size: params.size } : {}, ...params.pressure ? { pressure: params.pressure } : {} },
+            { ...params.ids ? { ids: params.ids } : {}, ...params.index !== void 0 ? { index: params.index } : {}, ...params.color ? { color: params.color } : {}, ...params.opacity !== void 0 ? { opacity: params.opacity } : {} }
+          )
+        );
+        const paths = [];
+        for (const id of targets) {
+          const n2 = controller.getNode(id);
+          if (n2?.type === "path") paths.push(stackResult(id, "stroke"));
+        }
+        return { paths };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}setBrushstroke`,
+      label: "Edit Brushstroke\u2026",
+      keywords: ["brushstroke", "brush", "size", "pressure", "taper"],
+      description: "Changes the brushstroke at stroke layer `index` of path `id` (vector.getAppearance lists strokes; 0 is the bottom): `brushId`, `size` (null: the brush's own), `pressure` (null: full pressure), `color`, `opacity`. Pass at least one. One undo step. Returns { id, strokes }.",
+      params: {
+        type: "object",
+        properties: {
+          id: { type: "string", description: "The path." },
+          index: { type: "integer", minimum: 0, description: "Stroke layer index of the brushstroke." },
+          brushId: { type: "string", description: "Another brush from vector.listBrushes." },
+          size: { type: ["number", "null"], description: "Diameter in document units, or null for the brush's own." },
+          pressure: { type: ["array", "null"], items: { type: "number", minimum: 0, maximum: 1 }, description: "Pressure profile 0\u20131 from start to end, or null for full pressure." },
+          color: { type: "string", description: "CSS colour." },
+          opacity: { type: "number", minimum: 0, maximum: 1, description: "Layer opacity 0\u20131." }
+        },
+        required: ["id", "index"],
+        additionalProperties: false
+      },
+      undoable: true,
+      run: (_ctx, params) => {
+        const { id, index, ...patch } = params;
+        if (!Object.keys(patch).length) fail("Pass at least one of brushId, size, pressure, color, opacity.");
+        layerIndex(id, "stroke", index);
+        check2(controller.setBrushstroke(index, patch, { ids: [id] }));
+        return stackResult(id, "stroke");
+      }
+    }
+  ];
   const pdfCommands = () => [
     {
       ...base,
@@ -17170,6 +17362,7 @@ function createVectorCommands(controller, options = {}) {
     ...lottieCommands(),
     ...pdfCommands(),
     ...symmetryCommands(),
+    ...brushstrokeCommands(),
     ...stylizeCommands(),
     ...perspectiveCommands(),
     ...lensCommands(),
@@ -18378,6 +18571,7 @@ export {
   VECTOR_BLEND_MODE_MENU,
   VECTOR_BLEND_SPACINGS,
   VECTOR_BLEND_SPACING_LABELS,
+  VECTOR_BRUSHSTROKE_SCALE,
   VECTOR_BUILDER_HATCH_GAP,
   VECTOR_CHARACTER_STYLE_KEYS,
   VECTOR_CLIPBOARD_TYPE,
@@ -18635,6 +18829,7 @@ export {
   isValidVectorParameterName,
   isVectorBlendGroup,
   isVectorBlendMode,
+  isVectorBrushstrokeLayer,
   isVectorConnector,
   isVectorFilterType,
   isVectorFrame,
@@ -18750,6 +18945,7 @@ export {
   sampleVectorGradient,
   sampleVectorGradientAt,
   sampleVectorPaintDefAt,
+  sanitizeVectorBrushstroke,
   sanitizeVectorConnector,
   sanitizeVectorEffects,
   sanitizeVectorFills,
@@ -18843,6 +19039,10 @@ export {
   vectorBoundsInside,
   vectorBoxCorners,
   vectorBoxMatrix,
+  vectorBrushstrokeBrush,
+  vectorBrushstrokeBrushes,
+  vectorBrushstrokeImages,
+  vectorBrushstrokeReach,
   vectorBuilderErasedEdges,
   vectorChildAppearanceShapes,
   vectorConnectionSites,