@pixerate/editor-svelte 0.97.0 → 0.98.0

package/dist/vector/VectorAppearancePanel.svelte

@@ -9,7 +9,8 @@
     type VectorEditorController,
     type VectorFilterType,
     type VectorFiltersPanelItem,
-    type VectorStrokeAlign
+    type VectorStrokeAlign,
+    vectorBrushstrokeBrushes
   } from '@pixerate/editor/vector';
   import { vectorStateOf } from './subscribe.svelte.js';
 
@@ -63,7 +64,23 @@
 
 {#snippet layerRow(l: VectorAppearancePanelLayer, count: number, ids: string[])}
   {@const name = nameOf(l)}
-  {#if l.unknownKind}
+  {#if l.brushstroke}
+    {@const bs = l.brushstroke}
+    <div class="space-y-1 rounded border border-border p-1" data-vector-layer="{l.kind}-{l.index}" data-vector-brushstroke="">
+      <div class="flex items-center gap-1">
+        <input type="checkbox" aria-label="{name} visible" title="Show" checked={l.visible} onchange={(e) => update(l, { visible: e.currentTarget.checked })} />
+        <input type="color" aria-label="{name} colour" class="h-7 w-10 cursor-pointer rounded border border-border bg-background" value={l.color ?? '#000000'} oninput={(e) => controller.setBrushstroke(l.index, { color: e.currentTarget.value }, { ids, merge: true })} onblur={() => controller.endMergedEdit()} />
+        <select aria-label="{name} brush" class={selectClass} value={bs.brushId} onchange={(e) => controller.setBrushstroke(l.index, { brushId: e.currentTarget.value }, { ids })}>
+          {#each vectorBrushstrokeBrushes() as b (b.id)}<option value={b.id}>{b.name}</option>{/each}
+        </select>
+        <input type="number" min="0.5" step="0.5" aria-label="{name} brush size" title="Brush size" class={numberClass} value={bs.size} oninput={(e) => {
+          const n = parseFloat(e.currentTarget.value);
+          if (Number.isFinite(n) && n > 0) controller.setBrushstroke(l.index, { size: Math.min(500, n) }, { ids, merge: true });
+        }} onblur={() => controller.endMergedEdit()} />
+        <button type="button" class={buttonClass} title="Remove" aria-label="Remove {name}" onclick={() => controller.removePaintLayer('stroke', l.index, { ids })}>×</button>
+      </div>
+    </div>
+  {:else if l.unknownKind}
     <div class="text-[11px] text-muted-foreground" data-vector-layer="{l.kind}-{l.index}">{name}: {l.unknownKind} (not drawn by this version)</div>
   {:else}
     <div class="space-y-1 rounded border border-border p-1" data-vector-layer="{l.kind}-{l.index}" data-vector-layer-editing={l.editing ? '' : undefined}>
@@ -146,6 +163,9 @@
         disabled={!ids.length}
         onclick={() => controller.addPaintLayer(kind, {}, { ids })}>+</button
       >
+      {#if kind === 'stroke'}
+        <button type="button" class={buttonClass} 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 })}>✎+</button>
+      {/if}
     </div>
     <!-- Top layer first, as it draws. -->
     {#each [...layers].reverse() as l (`${l.kind}-${l.index}`)}{@render layerRow(l, layers.length, ids)}{/each}

package/dist/vector/VectorAppearancePanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorAppearancePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorAppearancePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAOH,KAAK,sBAAsB,EAI5B,MAAM,yBAAyB,CAAC;AAIjC;;;;;;GAMG;AACH,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4JH,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"VectorAppearancePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorAppearancePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAOH,KAAK,sBAAsB,EAK5B,MAAM,yBAAyB,CAAC;AAIjC;;;;;;GAMG;AACH,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+KH,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/vector/VectorSceneNodes.svelte

@@ -35,7 +35,14 @@
     <!-- Fill and stroke stacks: each layer in order, bottom to top. -->
     <g data-vector-id={node.id} transform={node.transform} opacity={node.opacity < 1 ? node.opacity : undefined} filter={node.filter} style={blend(node.blendMode)}>
       {#each node.layers as layer (`${layer.kind}-${layer.index}`)}
-        <VectorPaintPath paint={layer} d={node.d} fillRule={node.fillRule} layer={`${layer.kind}-${layer.index}`} />
+        {#if layer.kind === 'brushstroke'}
+          <!-- A brushstroke: its rendered brush images over their boxes. -->
+          <g data-vector-layer={`brushstroke-${layer.index}`} opacity={layer.opacity < 1 ? layer.opacity : undefined} style={blend(layer.blendMode)}>
+            {#each layer.images ?? [] as im, i (i)}<image href={im.href} x={im.x} y={im.y} width={im.width} height={im.height} preserveAspectRatio="none" />{/each}
+          </g>
+        {:else}
+          <VectorPaintPath paint={layer} d={node.d} fillRule={node.fillRule} layer={`${layer.kind}-${layer.index}`} />
+        {/if}
       {/each}
     </g>
   {:else}

package/dist/vector/VectorSceneNodes.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorSceneNodes.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorSceneNodes.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAO9D,UAAU,KAAK;IACb,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;CACpC;AAsCH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"VectorSceneNodes.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorSceneNodes.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAO9D,UAAU,KAAK;IACb,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;CACpC;AA6CH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.97.0",
+  "version": "0.98.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -144,7 +144,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.136.0"
+    "@pixerate/editor": "0.137.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",