@pixerate/editor-svelte 0.162.1 → 0.163.0

package/dist/image-editor/LayersPanel.svelte

@@ -24,6 +24,7 @@
   import { untrack } from 'svelte';
   import LayerEffectsPanel from './LayerEffectsPanel.svelte';
   import EdgeColorPanel from './EdgeColorPanel.svelte';
+  import VectorMaskEdgesPanel from './VectorMaskEdgesPanel.svelte';
 
   interface Props {
     controller: ImageEditorController;
@@ -289,6 +290,9 @@
       <EdgeColorPanel {controller} layer={snapshot.active} class="border-t border-border pt-1.5" />
     {/key}
   {/if}
+  {#if snapshot.active?.vectorMask}
+    <VectorMaskEdgesPanel {controller} layer={snapshot.active} class="border-t border-border pt-1.5" />
+  {/if}
 
   {#if effects && snapshot.active && snapshot.active.type !== 'adjustment'}
     <LayerEffectsPanel {controller} class="border-t border-border pt-1.5" />

package/dist/image-editor/VectorMaskEdgesPanel.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import type { ImageEditorController, ImageLayer, VectorMaskEdge } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+
+  /**
+   * Hybrid mask edges: the soft segments of a layer's vector mask (feather or matte), with their
+   * settings, as `set_vector_mask_edge` sets them. Alt+Shift-click a segment with Direct Selection
+   * to cycle its mode on the canvas. Every change is one undo step.
+   */
+  interface Props {
+    controller: ImageEditorController;
+    /** The layer whose vector mask to edit. */
+    layer: ImageLayer;
+    class?: string;
+  }
+
+  let { controller, layer, class: className = '' }: Props = $props();
+
+  const MODES = ['hard', 'feather', 'matte'] as const;
+  const input = 'w-12 bg-background border border-border rounded px-1 py-0.5 text-foreground';
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  let error = $state<string | null>(null);
+  const info = $derived.by(() => {
+    void tick;
+    return controller.getVectorMask(layer.id);
+  });
+
+  function set(e: VectorMaskEdge, mode: VectorMaskEdge['mode'], options: { radius?: number; inner?: number; outer?: number } = {}) {
+    error = null;
+    try {
+      controller.setVectorMaskEdge(layer.id, { component: e.component, subpath: e.subpath, segment: e.segment }, mode, options);
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    }
+  }
+  const num = (v: string, fallback: number) => (Number.isFinite(Number(v)) && Number(v) > 0 ? Number(v) : fallback);
+  const value = (ev: Event) => (ev.currentTarget as HTMLInputElement | HTMLSelectElement).value;
+</script>
+
+{#if info}
+  <div class="flex flex-col gap-1.5 text-xs {className}" data-testid="vector-mask-edges">
+    <span class="text-muted-foreground">Vector mask edges</span>
+    <p class="text-muted-foreground">Alt+Shift-click a segment with Direct Selection to make it feathered or a hair matte.</p>
+    {#if info.edges.length === 0}
+      <p class="text-muted-foreground">Every segment is hard.</p>
+    {/if}
+    <ul class="flex flex-col gap-1">
+      {#each info.edges as e (`${e.component}:${e.subpath}:${e.segment}`)}
+        <li data-testid="vector-mask-edge" class="flex flex-wrap items-center gap-1.5">
+          <span class="font-mono text-muted-foreground">{e.component}/{e.subpath}/{e.segment}</span>
+          <select aria-label="Edge mode" value={e.mode} onchange={(ev) => set(e, value(ev) as VectorMaskEdge['mode'])} class="bg-background border border-border rounded px-1 py-0.5 text-foreground">
+            {#each MODES as m (m)}
+              <option value={m}>{m}</option>
+            {/each}
+          </select>
+          {#if e.mode === 'feather'}
+            <label class="flex items-center gap-1 text-muted-foreground">
+              radius
+              <input type="number" min="0.5" max="250" step="0.5" aria-label="Edge feather radius" value={e.radius} oninput={(ev) => set(e, 'feather', { radius: num(value(ev), 4) })} class={input} />
+            </label>
+          {/if}
+          {#if e.mode === 'matte'}
+            <label class="flex items-center gap-1 text-muted-foreground">
+              in
+              <input type="number" min="0.5" max="200" step="0.5" aria-label="Edge matte inner" value={e.inner} oninput={(ev) => set(e, 'matte', { inner: num(value(ev), 4), outer: e.outer })} class={input} />
+            </label>
+            <label class="flex items-center gap-1 text-muted-foreground">
+              out
+              <input type="number" min="0.5" max="200" step="0.5" aria-label="Edge matte outer" value={e.outer} oninput={(ev) => set(e, 'matte', { inner: e.inner, outer: num(value(ev), 8) })} class={input} />
+            </label>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+    {#if error}
+      <p role="alert" class="text-destructive">{error}</p>
+    {/if}
+  </div>
+{/if}

package/dist/image-editor/VectorMaskEdgesPanel.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ImageEditorController, ImageLayer } from '@pixerate/editor/image-editor';
+/**
+ * Hybrid mask edges: the soft segments of a layer's vector mask (feather or matte), with their
+ * settings, as `set_vector_mask_edge` sets them. Alt+Shift-click a segment with Direct Selection
+ * to cycle its mode on the canvas. Every change is one undo step.
+ */
+interface Props {
+    controller: ImageEditorController;
+    /** The layer whose vector mask to edit. */
+    layer: ImageLayer;
+    class?: string;
+}
+declare const VectorMaskEdgesPanel: import("svelte").Component<Props, {}, "">;
+type VectorMaskEdgesPanel = ReturnType<typeof VectorMaskEdgesPanel>;
+export default VectorMaskEdgesPanel;

package/dist/image-editor/index.d.ts

@@ -19,6 +19,7 @@ import type LayersPanelComponent from "./LayersPanel.svelte";
 import type ColorProfilePanelComponent from "./ColorProfilePanel.svelte";
 import type LayerEffectsPanelComponent from "./LayerEffectsPanel.svelte";
 import type EdgeColorPanelComponent from "./EdgeColorPanel.svelte";
+import type VectorMaskEdgesPanelComponent from "./VectorMaskEdgesPanel.svelte";
 import type BrushOptionsBarComponent from "./BrushOptionsBar.svelte";
 import type FreeTransformOptionsBarComponent from "./FreeTransformOptionsBar.svelte";
 import type ShapeOptionsBarComponent from "./ShapeOptionsBar.svelte";
@@ -50,6 +51,7 @@ export { default as LayersPanel } from './LayersPanel.svelte';
 export { default as ColorProfilePanel } from './ColorProfilePanel.svelte';
 export { default as LayerEffectsPanel } from './LayerEffectsPanel.svelte';
 export { default as EdgeColorPanel } from './EdgeColorPanel.svelte';
+export { default as VectorMaskEdgesPanel } from './VectorMaskEdgesPanel.svelte';
 export { default as BrushOptionsBar } from './BrushOptionsBar.svelte';
 export { default as FreeTransformOptionsBar } from './FreeTransformOptionsBar.svelte';
 export { default as ShapeOptionsBar } from './ShapeOptionsBar.svelte';
@@ -83,6 +85,7 @@ export type LayersPanelProps = ComponentProps<typeof LayersPanelComponent>;
 export type ColorProfilePanelProps = ComponentProps<typeof ColorProfilePanelComponent>;
 export type LayerEffectsPanelProps = ComponentProps<typeof LayerEffectsPanelComponent>;
 export type EdgeColorPanelProps = ComponentProps<typeof EdgeColorPanelComponent>;
+export type VectorMaskEdgesPanelProps = ComponentProps<typeof VectorMaskEdgesPanelComponent>;
 export type BrushOptionsBarProps = ComponentProps<typeof BrushOptionsBarComponent>;
 export type FreeTransformOptionsBarProps = ComponentProps<typeof FreeTransformOptionsBarComponent>;
 export type ShapeOptionsBarProps = ComponentProps<typeof ShapeOptionsBarComponent>;

package/dist/image-editor/index.js

@@ -21,6 +21,7 @@ export { default as LayersPanel } from './LayersPanel.svelte';
 export { default as ColorProfilePanel } from './ColorProfilePanel.svelte';
 export { default as LayerEffectsPanel } from './LayerEffectsPanel.svelte';
 export { default as EdgeColorPanel } from './EdgeColorPanel.svelte';
+export { default as VectorMaskEdgesPanel } from './VectorMaskEdgesPanel.svelte';
 export { default as BrushOptionsBar } from './BrushOptionsBar.svelte';
 export { default as FreeTransformOptionsBar } from './FreeTransformOptionsBar.svelte';
 export { default as ShapeOptionsBar } from './ShapeOptionsBar.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.162.1",
+  "version": "0.163.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -165,7 +165,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@pixerate/editor": "0.219.1"
+    "@pixerate/editor": "0.220.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",