@pixerate/editor-svelte 0.37.0 → 0.38.0

package/dist/vector/VectorBlendControls.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import {
+    VECTOR_BLEND_SPACINGS,
+    VECTOR_BLEND_SPACING_LABELS,
+    applyVectorBlendOptions,
+    getVectorBlendControls,
+    type VectorBlendSpacing,
+    type VectorEditorController
+  } from '@pixerate/editor/vector';
+  import { vectorStateOf } from './subscribe.svelte.js';
+  import { vectorButtonClass } from './styles.js';
+
+  /** Blend buttons and options: they edit the selected blends and the options new blends get. */
+  let { controller }: { controller: VectorEditorController } = $props();
+
+  const store = vectorStateOf(() => controller);
+  const blend = $derived(getVectorBlendControls(store.current));
+  const o = $derived(blend.options);
+  const selected = $derived(blend.ids.length > 0);
+</script>
+
+<div class="ml-1 flex items-center gap-1" role="group" aria-label="Blend" data-vector-blend-controls="">
+  <button type="button" data-vector-blend-action="make" class={vectorButtonClass} title="Make Blend" aria-label="Make Blend" disabled={!blend.canBlend} onclick={() => controller.blend()}>⧓</button>
+  <select
+    aria-label="Blend spacing"
+    class="h-7 rounded border border-border bg-background px-1 text-xs"
+    value={o.spacing}
+    onchange={(e) => applyVectorBlendOptions(controller, { spacing: e.currentTarget.value as VectorBlendSpacing })}
+  >
+    {#each VECTOR_BLEND_SPACINGS as sp (sp)}
+      <option value={sp}>{VECTOR_BLEND_SPACING_LABELS[sp]}</option>
+    {/each}
+  </select>
+  {#if o.spacing !== 'smoothColor'}
+    <input
+      type="number"
+      min={o.spacing === 'steps' ? 1 : 0.5}
+      step="1"
+      aria-label={o.spacing === 'steps' ? 'Blend steps' : 'Blend distance'}
+      class="h-7 w-16 rounded border border-border bg-background px-1.5 text-xs"
+      value={o.spacing === 'steps' ? o.steps : o.distance}
+      oninput={(e) => {
+        const n = parseFloat(e.currentTarget.value);
+        if (!Number.isFinite(n) || n <= 0) return;
+        applyVectorBlendOptions(controller, o.spacing === 'steps' ? { steps: n } : { distance: n });
+      }}
+    />
+  {/if}
+  <button
+    type="button"
+    data-vector-blend-action="orient"
+    class={vectorButtonClass}
+    aria-pressed={o.orientToSpine}
+    title="Orient steps to the spine"
+    aria-label="Orient to spine"
+    onclick={() => applyVectorBlendOptions(controller, { orientToSpine: !o.orientToSpine })}>⤿</button
+  >
+  <button
+    type="button"
+    data-vector-blend-action="spine"
+    class={vectorButtonClass}
+    title="Replace Spine (select a blend and a path)"
+    aria-label="Replace Spine"
+    disabled={!blend.canReplaceSpine}
+    onclick={() => controller.replaceBlendSpine()}>⌇</button
+  >
+  <button type="button" data-vector-blend-action="expand" class={vectorButtonClass} title="Expand Blend" aria-label="Expand Blend" disabled={!selected} onclick={() => controller.expandBlend()}>⧉</button>
+  <button type="button" data-vector-blend-action="release" class={vectorButtonClass} title="Release Blend" aria-label="Release Blend" disabled={!selected} onclick={() => controller.releaseBlend()}>⧄</button>
+</div>

package/dist/vector/VectorBlendControls.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type VectorEditorController } from '@pixerate/editor/vector';
+type $$ComponentProps = {
+    controller: VectorEditorController;
+};
+declare const VectorBlendControls: import("svelte").Component<$$ComponentProps, {}, "">;
+type VectorBlendControls = ReturnType<typeof VectorBlendControls>;
+export default VectorBlendControls;
+//# sourceMappingURL=VectorBlendControls.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorBlendControls.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorBlendControls.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAMH,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AAIlC,KAAK,gBAAgB,GAAI;IAAE,UAAU,EAAE,sBAAsB,CAAA;CAAE,CAAC;AAqCjE,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/vector/VectorCanvas.svelte

@@ -228,6 +228,25 @@
         <circle cx={w.x} cy={w.y} r={1.5} fill={accentColor} />
       </g>
     {/each}
+    {#each overlay.blend.spines as sp (sp.id)}
+      <g data-vector-blend-spine={sp.id} data-replaced={sp.replaced || undefined}>
+        <path d={sp.d} fill="none" stroke={accentColor} stroke-dasharray="4 3" />
+        {#each sp.keys as k, i (i)}
+          <circle cx={k.x} cy={k.y} r={THEME.handleRadius} fill={THEME.handleFill} stroke={accentColor} />
+        {/each}
+      </g>
+    {/each}
+    {#if overlay.blend.start}
+      <g data-vector-blend-start="">
+        <path d={overlay.blend.start.d} fill="none" stroke={accentColor} stroke-width="2" />
+        {#if overlay.blend.start.anchor}
+          <circle cx={overlay.blend.start.anchor.x} cy={overlay.blend.start.anchor.y} r={THEME.handleRadius + 1} fill={accentColor} />
+        {/if}
+      </g>
+    {/if}
+    {#each overlay.blend.anchors as a, i (i)}
+      <rect data-vector-blend-anchor={i} x={a.x - as / 2} y={a.y - as / 2} width={as} height={as} fill={a.hovered ? accentColor : THEME.handleFill} stroke={accentColor} />
+    {/each}
     {#if overlay.widthSpot}
       <g data-vector-width-spot="">
         <line x1={overlay.widthSpot.left.x} y1={overlay.widthSpot.left.y} x2={overlay.widthSpot.right.x} y2={overlay.widthSpot.right.y} stroke={accentColor} stroke-dasharray="3 2" />

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

@@ -1 +1 @@
-{"version":3,"file":"VectorCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorCanvas.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EAQH,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AAOjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkPH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"VectorCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorCanvas.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EAQH,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AAOjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAqQH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/vector/VectorToolbar.svelte

@@ -13,6 +13,7 @@
   } from '@pixerate/editor/vector';
   import { vectorStateOf } from './subscribe.svelte.js';
   import { vectorButtonClass } from './styles.js';
+  import VectorBlendControls from './VectorBlendControls.svelte';
 
   interface Props {
     controller: VectorEditorController;
@@ -30,10 +31,15 @@
      * those tools are active (default `true`).
      */
     showPathEdit?: boolean;
+    /**
+     * Blend: Make Blend, spacing (steps, distance or smooth colour), steps / distance, orient to
+     * spine, Replace Spine, Expand and Release (default `true`).
+     */
+    showBlend?: boolean;
     class?: string;
   }
 
-  let { controller, tools = VECTOR_TOOLS, showHistory = true, showArrange = true, showSnap = true, showPathEdit = true, class: className = '' }: Props = $props();
+  let { controller, tools = VECTOR_TOOLS, showHistory = true, showArrange = true, showSnap = true, showPathEdit = true, showBlend = true, class: className = '' }: Props = $props();
 
   const snapTitle = 'Snap to objects';
   const modKey = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform ?? '') ? '⌘' : 'Ctrl';
@@ -182,6 +188,9 @@
       {/if}
     </div>
   {/if}
+  {#if showBlend}
+    <VectorBlendControls {controller} />
+  {/if}
   {#if showArrange}
     <div class="ml-1 flex items-center gap-1" role="group" aria-label="Combine">
       {#each combine as item (item.title)}{@render action(item)}{/each}

package/dist/vector/VectorToolbar.svelte.d.ts

@@ -15,6 +15,11 @@ interface Props {
      * those tools are active (default `true`).
      */
     showPathEdit?: boolean;
+    /**
+     * Blend: Make Blend, spacing (steps, distance or smooth colour), steps / distance, orient to
+     * spine, Replace Spine, Expand and Release (default `true`).
+     */
+    showBlend?: boolean;
     class?: string;
 }
 declare const VectorToolbar: import("svelte").Component<Props, {}, "">;

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

@@ -1 +1 @@
-{"version":3,"file":"VectorToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EASH,KAAK,sBAAsB,EAC3B,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AAKjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsHH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"VectorToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EASH,KAAK,sBAAsB,EAC3B,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AAMjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0HH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/package.json

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