@pixerate/editor-svelte 0.135.0 → 0.137.0

package/dist/image-editor/ChannelsPanel.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+  import { imageSectionTitleClass } from './styles.js';
+  import type { AlphaChannel, ImageEditorController } from '@pixerate/editor/image-editor';
+  import { MASK_FILE_ACCEPT, channelThumbnail, downloadMaskImage, openMaskFile, selectionModeFromModifiers } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+
+  interface Props {
+    controller: ImageEditorController;
+    /** Thumbnail size in CSS pixels (default 32). */
+    thumbnailSize?: number;
+    class?: string;
+  }
+
+  let { controller, thumbnailSize = 32, class: className = '' }: Props = $props();
+
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  const snapshot = $derived.by(() => {
+    void tick;
+    return {
+      channels: controller.getChannels(),
+      hasSelection: Boolean(controller.getSelection()),
+      quickMask: controller.quickMaskEditing,
+    };
+  });
+  let activeId = $state<string | null>(null);
+  let renaming = $state<string | null>(null);
+  let error = $state<string | null>(null);
+  let fileInput = $state<HTMLInputElement | null>(null);
+  const active = $derived(snapshot.channels.find((c) => c.id === activeId) ?? null);
+
+  function attempt(fn: () => unknown) {
+    error = null;
+    try {
+      fn();
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    }
+  }
+
+  async function importFile(file: File | undefined) {
+    if (!file) return;
+    error = null;
+    try {
+      activeId = (await openMaskFile(controller, file)).id;
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    }
+  }
+
+  /** Draws a channel's thumbnail (nothing without a 2D context). */
+  function thumb(canvas: HTMLCanvasElement, channel: AlphaChannel) {
+    const draw = (c: AlphaChannel) => {
+      const ctx = canvas.getContext('2d');
+      if (!ctx || typeof ctx.createImageData !== 'function') return;
+      const px = channelThumbnail(c, 64);
+      canvas.width = px.width;
+      canvas.height = px.height;
+      const img = ctx.createImageData(px.width, px.height);
+      img.data.set(px.data);
+      ctx.putImageData(img, 0, 0);
+    };
+    draw(channel);
+    return { update: draw };
+  }
+
+  const btn = (on = false) =>
+    `px-2 py-1 rounded-md border text-[11px] transition-colors disabled:opacity-40 ${
+      on ? 'bg-primary border-primary text-primary-foreground' : 'bg-background border-border text-foreground hover:bg-accent hover:text-accent-foreground'
+    }`;
+</script>
+
+<!--
+  The Channels panel: alpha channels (saved selections) with thumbnails, an eye to show each as a
+  tint, click to load it as the selection (Shift adds, Alt subtracts, both intersect), double-click
+  to rename; Save Selection, Add to Channel, Duplicate and Delete; Import (a mask image into a new
+  channel) and Export PNG (the active channel, else the selection); and the Quick Mask mode switch.
+-->
+<div data-testid="channels-panel" class="flex flex-col gap-2 text-xs {className}">
+  <div class="flex items-center justify-between">
+    <span class={imageSectionTitleClass}>Channels</span>
+    <button type="button" aria-pressed={snapshot.quickMask} class={btn(snapshot.quickMask)} title="Paint the selection: white selects, black deselects (Q)" onclick={() => controller.setQuickMaskMode(!snapshot.quickMask)}>Quick Mask</button>
+  </div>
+  {#if snapshot.channels.length === 0}
+    <p class="text-muted-foreground">No channels. Save a selection to keep it.</p>
+  {/if}
+  <ul role="list" class="flex flex-col gap-0.5">
+    {#each snapshot.channels as c (c.id)}
+      <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+      <li
+        data-testid="channel-row"
+        aria-current={c.id === activeId ? "true" : undefined}
+        class="flex items-center gap-1.5 px-1.5 py-1 rounded cursor-pointer select-none {c.id === activeId ? 'bg-primary/30 ring-1 ring-primary' : 'hover:bg-muted'}"
+        onclick={(e) => {
+          activeId = c.id;
+          attempt(() => controller.loadSelectionFromChannel(c.id, { mode: selectionModeFromModifiers(e, 'replace') }));
+        }}
+        ondblclick={() => (renaming = c.id)}
+      >
+        <button
+          type="button"
+          aria-label={`${c.visible ? 'Hide' : 'Show'} ${c.name}`}
+          aria-pressed={c.visible}
+          class="w-4 text-muted-foreground"
+          onclick={(e) => {
+            e.stopPropagation();
+            attempt(() => controller.setChannelProperties(c.id, { visible: !c.visible }));
+          }}>{c.visible ? '●' : '○'}</button>
+        <canvas use:thumb={c} aria-hidden="true" style="width: {thumbnailSize}px; height: {thumbnailSize}px" class="shrink-0 rounded object-contain ring-1 ring-border bg-black"></canvas>
+        {#if renaming === c.id}
+          <!-- svelte-ignore a11y_autofocus -->
+          <input
+            autofocus
+            aria-label="Channel name"
+            value={c.name}
+            class="min-w-0 flex-1 bg-background border border-border rounded px-1 py-0.5 text-foreground"
+            onclick={(e) => e.stopPropagation()}
+            onblur={(e) => {
+              const v = (e.currentTarget as HTMLInputElement).value;
+              renaming = null;
+              if (v.trim() && v !== c.name) attempt(() => controller.setChannelProperties(c.id, { name: v }));
+            }}
+            onkeydown={(e) => {
+              if (e.key === 'Enter') (e.currentTarget as HTMLInputElement).blur();
+              if (e.key === 'Escape') renaming = null;
+            }}
+          />
+        {:else}
+          <span class="min-w-0 flex-1 truncate">{c.name}</span>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+  <div class="flex flex-wrap gap-1">
+    <button type="button" class={btn()} disabled={!snapshot.hasSelection} onclick={() => attempt(() => (activeId = controller.saveSelection().id))}>Save Selection</button>
+    <button type="button" class={btn()} disabled={!active || !snapshot.hasSelection} title="Add the selection to the channel" onclick={() => attempt(() => controller.saveSelection({ channelId: active!.id, mode: 'add' }))}>Add to Channel</button>
+    <button type="button" class={btn()} disabled={!active} onclick={() => attempt(() => (activeId = controller.duplicateChannel(active!.id).id))}>Duplicate</button>
+    <button
+      type="button"
+      class={btn()}
+      disabled={!active}
+      onclick={() =>
+        attempt(() => {
+          controller.deleteChannel(active!.id);
+          activeId = null;
+        })}>Delete</button>
+    <button type="button" class={btn()} title="Load a mask image (white = selected) into a new channel" onclick={() => fileInput?.click()}>Import…</button>
+    <button
+      type="button"
+      class={btn()}
+      disabled={!active && !snapshot.hasSelection}
+      title={active ? 'Save the channel as a greyscale PNG' : 'Save the selection as a greyscale PNG'}
+      onclick={() => attempt(() => downloadMaskImage(controller, active ? { channelId: active.id } : 'selection', active?.name ?? 'selection'))}>Export PNG</button>
+    <input
+      bind:this={fileInput}
+      type="file"
+      accept={MASK_FILE_ACCEPT}
+      hidden
+      data-testid="channel-import-input"
+      onchange={(e) => {
+        const input = e.currentTarget as HTMLInputElement;
+        void importFile(input.files?.[0]);
+        input.value = '';
+      }}
+    />
+  </div>
+  {#if error}
+    <p role="alert" class="text-destructive">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,10 @@
+import type { ImageEditorController } from '@pixerate/editor/image-editor';
+interface Props {
+    controller: ImageEditorController;
+    /** Thumbnail size in CSS pixels (default 32). */
+    thumbnailSize?: number;
+    class?: string;
+}
+declare const ChannelsPanel: import("svelte").Component<Props, {}, "">;
+type ChannelsPanel = ReturnType<typeof ChannelsPanel>;
+export default ChannelsPanel;

package/dist/image-editor/ImageEditor.svelte

@@ -34,6 +34,7 @@
   import BrushOptionsBar from './BrushOptionsBar.svelte';
   import SelectionOptionsBar from './SelectionOptionsBar.svelte';
   import RefineEdgePanel from './RefineEdgePanel.svelte';
+  import ChannelsPanel from './ChannelsPanel.svelte';
   import FreeTransformOptionsBar from './FreeTransformOptionsBar.svelte';
   import ShapeOptionsBar from './ShapeOptionsBar.svelte';
   import TypeOptionsBar from './TypeOptionsBar.svelte';
@@ -978,6 +979,7 @@
             selection={editor.state.selection ?? null}
             layers={editor.state.adjustments.layers}
           />
+          <ChannelsPanel controller={editor.controller} />
         </div>
       {/if}
 

package/dist/image-editor/ImageEditorCanvas.svelte

@@ -24,6 +24,7 @@
     watchCanvasViewport,
     startMarchingAnts,
     handleSelectionShortcut,
+    handleQuickMaskKey,
     ShapeDrawGesture,
     TypeToolGesture,
     DEFAULT_SHAPE_TOOL_OPTIONS,
@@ -604,6 +605,10 @@
       if (target?.closest?.('input, textarea, select, [contenteditable="true"]')) return;
       // Leave Copy to the page while text on it is selected.
       if (window.getSelection?.()?.toString()) return;
+      if (handleQuickMaskKey(editor.controller, e)) {
+        e.preventDefault();
+        return;
+      }
       if (handleSelectionShortcut(editor.controller, e, (message) => report('select', message))) {
         e.preventDefault();
         return;

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

@@ -8,6 +8,7 @@ import type CurvesEditorComponent from "./CurvesEditor.svelte";
 import type ControlSliderComponent from "./ControlSlider.svelte";
 import type SelectionOptionsBarComponent from "./SelectionOptionsBar.svelte";
 import type RefineEdgePanelComponent from "./RefineEdgePanel.svelte";
+import type ChannelsPanelComponent from "./ChannelsPanel.svelte";
 import type LayersPanelComponent from "./LayersPanel.svelte";
 import type ColorProfilePanelComponent from "./ColorProfilePanel.svelte";
 import type LayerEffectsPanelComponent from "./LayerEffectsPanel.svelte";
@@ -31,6 +32,7 @@ export { default as CurvesEditor } from './CurvesEditor.svelte';
 export { default as ControlSlider } from './ControlSlider.svelte';
 export { default as SelectionOptionsBar } from './SelectionOptionsBar.svelte';
 export { default as RefineEdgePanel } from './RefineEdgePanel.svelte';
+export { default as ChannelsPanel } from './ChannelsPanel.svelte';
 export { default as LayersPanel } from './LayersPanel.svelte';
 export { default as ColorProfilePanel } from './ColorProfilePanel.svelte';
 export { default as LayerEffectsPanel } from './LayerEffectsPanel.svelte';
@@ -56,6 +58,7 @@ export type CurvesEditorProps = ComponentProps<typeof CurvesEditorComponent>;
 export type ControlSliderProps = ComponentProps<typeof ControlSliderComponent>;
 export type SelectionOptionsBarProps = ComponentProps<typeof SelectionOptionsBarComponent>;
 export type RefineEdgePanelProps = ComponentProps<typeof RefineEdgePanelComponent>;
+export type ChannelsPanelProps = ComponentProps<typeof ChannelsPanelComponent>;
 export type LayersPanelProps = ComponentProps<typeof LayersPanelComponent>;
 export type ColorProfilePanelProps = ComponentProps<typeof ColorProfilePanelComponent>;
 export type LayerEffectsPanelProps = ComponentProps<typeof LayerEffectsPanelComponent>;

package/dist/image-editor/index.js

@@ -10,6 +10,7 @@ export { default as CurvesEditor } from './CurvesEditor.svelte';
 export { default as ControlSlider } from './ControlSlider.svelte';
 export { default as SelectionOptionsBar } from './SelectionOptionsBar.svelte';
 export { default as RefineEdgePanel } from './RefineEdgePanel.svelte';
+export { default as ChannelsPanel } from './ChannelsPanel.svelte';
 export { default as LayersPanel } from './LayersPanel.svelte';
 export { default as ColorProfilePanel } from './ColorProfilePanel.svelte';
 export { default as LayerEffectsPanel } from './LayerEffectsPanel.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.135.0",
+  "version": "0.137.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.185.0"
+    "@pixerate/editor": "0.187.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",