@pixerate/editor-svelte 0.115.0 → 0.116.0

package/dist/image-editor/CanvasSizePanel.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+  import type { ImageEditorController, TransformAnchor } from '@pixerate/editor/image-editor';
+  import { CANVAS_SIZE_PRESETS, isTransformAnchor } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+  import { imagePrimaryButtonClass, imageSelectClass } from './styles.js';
+
+  interface Props {
+    controller: ImageEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    return untrack(() => c.subscribe(() => tick++));
+  });
+
+  const natural = $derived.by(() => {
+    void tick;
+    return controller.getCanvasSize();
+  });
+
+  let width = $state(800);
+  let height = $state(600);
+  let lockAspect = $state(false);
+  let anchor = $state<TransformAnchor>('center');
+  let error = $state<string | null>(null);
+
+  // Sync initial dimensions with current canvas size
+  $effect(() => {
+    width = natural.width;
+    height = natural.height;
+  });
+
+  const ANCHOR_GRID: TransformAnchor[][] = [
+    ['top-left', 'top', 'top-right'],
+    ['left', 'center', 'right'],
+    ['bottom-left', 'bottom', 'bottom-right'],
+  ];
+
+  function onWidthChange(val: number) {
+    if (lockAspect && natural.width > 0) {
+      const ratio = natural.height / natural.width;
+      height = Math.max(1, Math.round(val * ratio));
+    }
+    width = val;
+  }
+
+  function onHeightChange(val: number) {
+    if (lockAspect && natural.height > 0) {
+      const ratio = natural.width / natural.height;
+      width = Math.max(1, Math.round(val * ratio));
+    }
+    height = val;
+  }
+
+  function onPresetSelect(e: Event) {
+    const target = e.currentTarget as HTMLSelectElement;
+    const presetId = target.value;
+    target.value = '';
+    const preset = CANVAS_SIZE_PRESETS.find((p) => p.id === presetId);
+    if (!preset) return;
+    width = preset.width;
+    height = preset.height;
+  }
+
+
+  function apply() {
+    error = null;
+    try {
+      controller.resizeCanvas({ width, height, anchor });
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    }
+  }
+</script>
+
+<div class="flex flex-col gap-3 text-xs text-foreground {className}" data-image-panel="canvas-size" data-testid="canvas-size-panel">
+  <div class="font-medium text-sm text-foreground">Canvas Size</div>
+
+  {#if error}
+    <div class="text-xs text-destructive bg-destructive/10 p-1.5 rounded">{error}</div>
+  {/if}
+
+  <div class="flex flex-col gap-1.5">
+    <label for="canvas-size-preset" class="text-muted-foreground text-[11px]">Preset</label>
+    <select
+      id="canvas-size-preset"
+      class="{imageSelectClass} w-full"
+      onchange={onPresetSelect}
+      aria-label="Preset canvas sizes"
+    >
+      <option value="">Choose preset…</option>
+      {#each CANVAS_SIZE_PRESETS as preset (preset.id)}
+        <option value={preset.id}>{preset.label} ({preset.width} × {preset.height})</option>
+      {/each}
+    </select>
+  </div>
+
+  <div class="grid grid-cols-2 gap-2 items-center">
+    <div class="flex flex-col gap-1">
+      <label for="canvas-size-width" class="text-muted-foreground text-[11px]">Width (px)</label>
+      <input
+        id="canvas-size-width"
+        type="number"
+        min="1"
+        max="16384"
+        class="w-full bg-background border border-border rounded px-2 py-1 text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+        value={width}
+        oninput={(e) => onWidthChange(Number((e.currentTarget as HTMLInputElement).value))}
+      />
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <label for="canvas-size-height" class="text-muted-foreground text-[11px]">Height (px)</label>
+      <input
+        id="canvas-size-height"
+        type="number"
+        min="1"
+        max="16384"
+        class="w-full bg-background border border-border rounded px-2 py-1 text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+        value={height}
+        oninput={(e) => onHeightChange(Number((e.currentTarget as HTMLInputElement).value))}
+      />
+    </div>
+  </div>
+
+  <div class="flex items-center gap-2">
+    <label class="flex items-center gap-1.5 cursor-pointer text-muted-foreground select-none">
+      <input
+        type="checkbox"
+        class="rounded border-border text-primary focus:ring-primary"
+        checked={lockAspect}
+        onchange={(e) => (lockAspect = (e.currentTarget as HTMLInputElement).checked)}
+      />
+      <span>Lock aspect ratio</span>
+    </label>
+  </div>
+
+  <div class="flex flex-col gap-1.5">
+    <span class="text-muted-foreground text-[11px]">Anchor</span>
+    <div class="grid grid-cols-3 gap-1 w-24 h-24 p-1 bg-muted/40 border border-border rounded" role="radiogroup" aria-label="Resize anchor">
+      {#each ANCHOR_GRID as row}
+        {#each row as a (a)}
+          <button
+            type="button"
+            role="radio"
+            aria-checked={anchor === a}
+            aria-label={a}
+            class="w-full h-full rounded flex items-center justify-center transition-colors {anchor === a ? 'bg-primary text-primary-foreground' : 'bg-background hover:bg-muted text-muted-foreground'}"
+            onclick={() => (anchor = a)}
+          >
+            <div class="w-1.5 h-1.5 rounded-full {anchor === a ? 'bg-primary-foreground' : 'bg-muted-foreground/60'}"></div>
+          </button>
+        {/each}
+      {/each}
+    </div>
+  </div>
+
+  <div class="pt-2">
+    <button
+      type="button"
+      class="{imagePrimaryButtonClass} w-full"
+      onclick={apply}
+    >
+      Apply Canvas Size
+    </button>
+  </div>
+</div>

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

@@ -0,0 +1,8 @@
+import type { ImageEditorController } from '@pixerate/editor/image-editor';
+interface Props {
+    controller: ImageEditorController;
+    class?: string;
+}
+declare const CanvasSizePanel: import("svelte").Component<Props, {}, "">;
+type CanvasSizePanel = ReturnType<typeof CanvasSizePanel>;
+export default CanvasSizePanel;

package/dist/image-editor/ImageEditorCanvas.svelte

@@ -86,8 +86,10 @@
     locate?: (ref: PlaybackRef) => PlaybackRect | null;
     /** Your own element for a playback ref, anywhere on the page; its box is mapped to document pixels. */
     locateElement?: (ref: PlaybackRef) => Element | null;
-    /** Show a panel for an `open` step (default: click its `[data-image-tab]` under `chromeRoot`). */
+    /** Show a panel for an `open` step (default: click its `[data-image-tab]` or `[data-image-panel]` under `chromeRoot`). */
     open?: (ref: PlaybackRef) => void | Promise<void>;
+    /** Whether wheel zoom and middle/space drag panning are enabled (default true). */
+    viewportGestures?: boolean;
     class?: string;
     style?: string;
   }
@@ -112,10 +114,16 @@
     locate,
     locateElement,
     open,
+    viewportGestures = true,
     class: className = '',
     style = '',
   }: Props = $props();
 
+  /** Fits the image to view, resetting zoom to 1 and pan to (0, 0). */
+  export function fitToView(): void {
+    editor.controller.resetZoom();
+  }
+
   let canvasEl = $state<HTMLCanvasElement | null>(null);
   let containerEl = $state<HTMLDivElement | null>(null);
   let rootEl = $state<HTMLDivElement | null>(null);
@@ -187,7 +195,64 @@
     reveal: () => onplaybackreveal?.(),
   }));
 
-  // Selection tools (magic wand, marquees, lasso): the pointer gesture.
+  let isSpacePressed = $state(false);
+  let isPanning = $state(false);
+  let panStartPoint: { clientX: number; clientY: number } | null = null;
+  let panStartOffset: { x: number; y: number } = { x: 0, y: 0 };
+
+  function handleWheel(e: WheelEvent) {
+    if (!viewportGestures || !canvasEl) return;
+    e.preventDefault();
+
+    const rect = canvasEl.getBoundingClientRect();
+    const sx = rect.width > 0 ? view.width / rect.width : 1;
+    const sy = rect.height > 0 ? view.height / rect.height : 1;
+    const canvasPt = {
+      x: (e.clientX - rect.left) * sx,
+      y: (e.clientY - rect.top) * sy,
+    };
+
+    const s = editor.controller.getState();
+    const currentZoom = s.zoom || 1;
+    const factor = e.deltaY < 0 ? 1.1 : 0.9;
+    const nextZoom = Math.min(10, Math.max(0.1, currentZoom * factor));
+
+    // Zoom centered at cursor:
+    // in canvas coordinates: img = (canvasPt - pan - center) / zoom
+    // We want canvasPt to remain invariant after zoom:
+    // (canvasPt - center - newPan) / newZoom = (canvasPt - center - oldPan) / oldZoom
+    // newPan = canvasPt - center - (canvasPt - center - oldPan) * (newZoom / oldZoom)
+    const centerX = view.width / 2;
+    const centerY = view.height / 2;
+    const curPan = s.pan || { x: 0, y: 0 };
+    const ratio = nextZoom / currentZoom;
+
+    const newPanX = canvasPt.x - centerX - (canvasPt.x - centerX - curPan.x) * ratio;
+    const newPanY = canvasPt.y - centerY - (canvasPt.y - centerY - curPan.y) * ratio;
+
+    editor.controller.setZoom(nextZoom);
+    editor.controller.setPan({ x: Math.round(newPanX), y: Math.round(newPanY) });
+  }
+
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.code === 'Space' && !e.repeat && document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') {
+        isSpacePressed = true;
+      }
+    };
+    const onKeyUp = (e: KeyboardEvent) => {
+      if (e.code === 'Space') {
+        isSpacePressed = false;
+      }
+    };
+    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener('keyup', onKeyUp);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('keyup', onKeyUp);
+    };
+  });
   const selectionGesture = $derived(new SelectionGesture(editor.controller, () => selectionOptions));
   let selectionDraft = $state.raw<ImagePoint[] | null>(null);
   // Paint tools (Move, Brush, Eraser): the pointer gesture and the brush cursor.
@@ -476,7 +541,36 @@
   }
 
   function handleMouseDown(e: MouseEvent) {
-    if (!canvasEl || transformTool.active) return;
+    if (!canvasEl) return;
+
+    if (viewportGestures && (e.button === 1 || (e.button === 0 && isSpacePressed))) {
+      e.preventDefault();
+      isPanning = true;
+      panStartPoint = { clientX: e.clientX, clientY: e.clientY };
+      const curPan = editor.controller.getState().pan || { x: 0, y: 0 };
+      panStartOffset = { ...curPan };
+      return;
+    }
+
+    if (mode === 'transform') {
+      const canvasPt = getCanvasEventPoint(e);
+      const imgPt = canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false);
+      const hitLayerId = editor.controller.layerAt(imgPt);
+      if (hitLayerId) {
+        editor.controller.setActiveLayer(hitLayerId);
+        if (!transformTool.active) {
+          transformTool.begin();
+        }
+      } else {
+        editor.controller.setActiveLayer(null);
+        if (transformTool.active) {
+          transformTool.cancel();
+        }
+      }
+      return;
+    }
+
+    if (transformTool.active) return;
     const canvasPt = getCanvasEventPoint(e);
 
     if (mode === 'select') {
@@ -567,7 +661,23 @@
   }
 
   function handleMouseMove(e: MouseEvent) {
-    if (!canvasEl || transformTool.active) return;
+    if (!canvasEl) return;
+
+    if (isPanning && panStartPoint) {
+      const dx = e.clientX - panStartPoint.clientX;
+      const dy = e.clientY - panStartPoint.clientY;
+      editor.controller.setPan({
+        x: Math.round(panStartOffset.x + dx),
+        y: Math.round(panStartOffset.y + dy),
+      });
+      return;
+    }
+
+    if (viewportGestures && isSpacePressed) {
+      canvasEl.style.cursor = 'grab';
+    }
+
+    if (transformTool.active) return;
     const canvasPt = getCanvasEventPoint(e);
 
     if (mode === 'select') {
@@ -713,6 +823,11 @@
   }
 
   function handleMouseUp(e: MouseEvent) {
+    if (isPanning) {
+      isPanning = false;
+      panStartPoint = null;
+      return;
+    }
     if (!canvasEl || transformTool.active) return;
     const canvasPt = getCanvasEventPoint(e);
 
@@ -822,7 +937,12 @@
   React's `<ImageEditorCanvas>`.
 -->
 <div bind:this={rootEl} class="relative {className}" {style} data-testid="image-editor-canvas-root">
-  <div bind:this={containerEl} class="absolute inset-0 overflow-hidden select-none">
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    bind:this={containerEl}
+    onwheel={handleWheel}
+    class="absolute inset-0 overflow-hidden select-none"
+  >
     <canvas
       bind:this={canvasEl}
       onmousedown={handleMouseDown}

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

@@ -54,11 +54,15 @@ interface Props {
     locate?: (ref: PlaybackRef) => PlaybackRect | null;
     /** Your own element for a playback ref, anywhere on the page; its box is mapped to document pixels. */
     locateElement?: (ref: PlaybackRef) => Element | null;
-    /** Show a panel for an `open` step (default: click its `[data-image-tab]` under `chromeRoot`). */
+    /** Show a panel for an `open` step (default: click its `[data-image-tab]` or `[data-image-panel]` under `chromeRoot`). */
     open?: (ref: PlaybackRef) => void | Promise<void>;
+    /** Whether wheel zoom and middle/space drag panning are enabled (default true). */
+    viewportGestures?: boolean;
     class?: string;
     style?: string;
 }
-declare const ImageEditorCanvas: import("svelte").Component<Props, {}, "typeSession">;
+declare const ImageEditorCanvas: import("svelte").Component<Props, {
+    fitToView: () => void;
+}, "typeSession">;
 type ImageEditorCanvas = ReturnType<typeof ImageEditorCanvas>;
 export default ImageEditorCanvas;

package/dist/image-editor/LayerPanel.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import type { ImageEditorController, ImageLayer } from '@pixerate/editor/image-editor';
+  import {
+    ADJUSTMENT_LAYER_OPACITY_CONTROL,
+    DEFAULT_SHAPE_TOOL_OPTIONS,
+    DEFAULT_TYPE_TOOL_OPTIONS,
+    DEFAULT_SELECTION_TOOL_OPTIONS,
+  } from '@pixerate/editor/image-editor';
+  import CanvasSizePanel from './CanvasSizePanel.svelte';
+  import ControlSlider from './ControlSlider.svelte';
+  import LayerEffectsPanel from './LayerEffectsPanel.svelte';
+  import BrushOptionsBar from './BrushOptionsBar.svelte';
+  import ShapeOptionsBar from './ShapeOptionsBar.svelte';
+  import TypeOptionsBar from './TypeOptionsBar.svelte';
+  import AdjustmentLayersPanel from './AdjustmentLayersPanel.svelte';
+  import SelectionOptionsBar from './SelectionOptionsBar.svelte';
+
+  interface Props {
+    controller: ImageEditorController;
+    panelId: string;
+    class?: string;
+  }
+
+  let { controller, panelId, class: className = '' }: Props = $props();
+
+  const activeLayer = $derived(controller.getActiveLayer());
+  let shapeOptions = $state({ ...DEFAULT_SHAPE_TOOL_OPTIONS });
+  let typeOptions = $state({ ...DEFAULT_TYPE_TOOL_OPTIONS });
+  let selectionOptions = $state({ ...DEFAULT_SELECTION_TOOL_OPTIONS });
+</script>
+
+<div class="layer-panel-container {className}" data-image-panel={panelId} data-testid="layer-panel-{panelId}">
+  {#if panelId === 'canvas-size'}
+    <CanvasSizePanel {controller} />
+  {:else if panelId === 'properties'}
+    <div class="flex flex-col gap-3 text-xs text-foreground">
+      <div class="font-medium text-sm">Properties</div>
+      {#if activeLayer}
+        <div class="flex flex-col gap-2">
+          <div class="flex items-center justify-between">
+            <span class="text-muted-foreground">Name</span>
+            <span class="font-medium">{activeLayer.name || activeLayer.id}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-muted-foreground">Type</span>
+            <span class="capitalize">{activeLayer.type}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-muted-foreground">Blend Mode</span>
+            <span class="capitalize">{activeLayer.blend}</span>
+          </div>
+          <ControlSlider
+            spec={ADJUSTMENT_LAYER_OPACITY_CONTROL}
+            label="Opacity"
+            value={Math.round(activeLayer.opacity * 100)}
+            onchange={(val) => controller.setLayerProperties(activeLayer.id, { opacity: val / 100 })}
+          />
+        </div>
+      {:else}
+        <div class="text-muted-foreground">No active layer selected.</div>
+      {/if}
+    </div>
+  {:else if panelId === 'paint'}
+    <div class="flex flex-col gap-3">
+      <div class="font-medium text-sm text-foreground">Brush & Paint</div>
+      <BrushOptionsBar {controller} />
+    </div>
+  {:else if panelId === 'effects'}
+    <div class="flex flex-col gap-3">
+      <div class="font-medium text-sm text-foreground">Layer Effects</div>
+      <LayerEffectsPanel {controller} />
+    </div>
+  {:else if panelId === 'adjustment'}
+    <AdjustmentLayersPanel {controller} />
+  {:else if panelId === 'type'}
+    <div class="flex flex-col gap-3">
+      <div class="font-medium text-sm text-foreground">Typography</div>
+      <TypeOptionsBar {controller} options={typeOptions} onchange={(o) => (typeOptions = o)} />
+    </div>
+  {:else if panelId === 'shape'}
+    <div class="flex flex-col gap-3">
+      <div class="font-medium text-sm text-foreground">Shape Options</div>
+      <ShapeOptionsBar {controller} options={shapeOptions} onchange={(o) => (shapeOptions = o)} />
+    </div>
+  {:else if panelId === 'smart-filters'}
+    <div class="flex flex-col gap-3">
+      <div class="font-medium text-sm text-foreground">Smart Filters</div>
+      <LayerEffectsPanel {controller} />
+    </div>
+  {:else if panelId === 'selection'}
+    <div class="flex flex-col gap-3">
+      <div class="font-medium text-sm text-foreground">Selection</div>
+      <SelectionOptionsBar {controller} options={selectionOptions} onOptionsChange={(o) => (selectionOptions = o)} />
+    </div>
+  {:else}
+    <div class="text-xs text-muted-foreground">Panel {panelId}</div>
+  {/if}
+</div>

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

@@ -0,0 +1,9 @@
+import type { ImageEditorController } from '@pixerate/editor/image-editor';
+interface Props {
+    controller: ImageEditorController;
+    panelId: string;
+    class?: string;
+}
+declare const LayerPanel: import("svelte").Component<Props, {}, "">;
+type LayerPanel = ReturnType<typeof LayerPanel>;
+export default LayerPanel;

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

@@ -1,4 +1,4 @@
 /** What pointer gestures on `ImageEditorCanvas` do (and whether the crop overlay shows). */
-export type ImageEditorCanvasMode = 'crop' | 'select' | 'paint' | 'annotate' | 'none';
+export type ImageEditorCanvasMode = 'crop' | 'select' | 'paint' | 'annotate' | 'transform' | 'none';
 /** Which gesture an `ImageEditorCanvas` `onerror` report comes from. */
-export type ImageEditorCanvasErrorSource = 'paint' | 'select' | 'shape' | 'type';
+export type ImageEditorCanvasErrorSource = 'paint' | 'select' | 'shape' | 'type' | 'transform';

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

@@ -16,8 +16,12 @@ import type FreeTransformOptionsBarComponent from "./FreeTransformOptionsBar.sve
 import type ShapeOptionsBarComponent from "./ShapeOptionsBar.svelte";
 import type TypeOptionsBarComponent from "./TypeOptionsBar.svelte";
 import type ImageProviderEffectsPanelComponent from "./ImageProviderEffectsPanel.svelte";
+import type CanvasSizePanelComponent from "./CanvasSizePanel.svelte";
+import type LayerPanelComponent from "./LayerPanel.svelte";
 export { default as ImageEditor } from './ImageEditor.svelte';
 export { default as ImageEditorCanvas } from './ImageEditorCanvas.svelte';
+export { default as CanvasSizePanel } from './CanvasSizePanel.svelte';
+export { default as LayerPanel } from './LayerPanel.svelte';
 export { default as ImageEffectControls } from './ImageEffectControls.svelte';
 export type { ImageEditorCanvasMode, ImageEditorCanvasErrorSource } from './canvasTypes.js';
 export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
@@ -38,6 +42,8 @@ export { default as ImageProviderEffectsPanel } from './ImageProviderEffectsPane
 export * from './imageEditorState.svelte.js';
 export type ImageEditorProps = ComponentProps<typeof ImageEditorComponent>;
 export type ImageEditorCanvasProps = ComponentProps<typeof ImageEditorCanvasComponent>;
+export type CanvasSizePanelProps = ComponentProps<typeof CanvasSizePanelComponent>;
+export type LayerPanelPropsComponent = ComponentProps<typeof LayerPanelComponent>;
 export type ImageEffectControlsProps = ComponentProps<typeof ImageEffectControlsComponent>;
 export type HistogramProps = ComponentProps<typeof HistogramComponent>;
 export type AdjustmentLayersPanelProps = ComponentProps<typeof AdjustmentLayersPanelComponent>;

package/dist/image-editor/index.js

@@ -1,5 +1,7 @@
 export { default as ImageEditor } from './ImageEditor.svelte';
 export { default as ImageEditorCanvas } from './ImageEditorCanvas.svelte';
+export { default as CanvasSizePanel } from './CanvasSizePanel.svelte';
+export { default as LayerPanel } from './LayerPanel.svelte';
 export { default as ImageEffectControls } from './ImageEffectControls.svelte';
 export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as Histogram } from './Histogram.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.115.0",
+  "version": "0.116.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -160,7 +160,7 @@
     "@tiptap/extension-bubble-menu": "^2.27.3",
     "@tiptap/extension-placeholder": "^2.27.3",
     "@tiptap/starter-kit": "^2.27.3",
-    "@pixerate/editor": "0.157.0"
+    "@pixerate/editor": "0.158.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",