@pixerate/editor-svelte 0.125.0 → 0.127.0

package/dist/image-editor/ImageEditorCanvas.svelte

@@ -93,6 +93,11 @@
     open?: (ref: PlaybackRef) => void | Promise<void>;
     /** Whether wheel zoom and middle/space drag panning are enabled (default true). */
     viewportGestures?: boolean;
+    /**
+     * Pan mode (a host's hand tool): a primary drag pans the view in every mode, as holding Space
+     * does, and the canvas's own gestures pause. Needs `viewportGestures`. Default false.
+     */
+    panMode?: boolean;
     class?: string;
     style?: string;
   }
@@ -118,6 +123,7 @@
     locateElement,
     open,
     viewportGestures = true,
+    panMode = false,
     class: className = '',
     style = '',
   }: Props = $props();
@@ -200,6 +206,8 @@
 
   let isSpacePressed = $state(false);
   let isPanning = $state(false);
+  // A primary drag pans: Space held, or the host's pan mode.
+  const panning = $derived(viewportGestures && (isSpacePressed || panMode));
   let panStartPoint: { clientX: number; clientY: number } | null = null;
   let panStartOffset: { x: number; y: number } = { x: 0, y: 0 };
 
@@ -373,7 +381,7 @@
   function handleFramePointerDown(e: PointerEvent): boolean {
     if (mode !== 'transform' || transformTool.active || !canvasEl) return false;
     // Middle-button and Space drags pan (see handleMouseDown).
-    if (e.button !== 0 || (viewportGestures && isSpacePressed)) return false;
+    if (e.button !== 0 || panning) return false;
     const c = editor.controller;
     const { pt, tolerance } = transformPoint(e);
     const frame = layerFrame();
@@ -498,6 +506,7 @@
       viewportWidth: viewport.width,
       viewportHeight: viewport.height,
       pixelRatio: viewport.pixelRatio,
+      hostScale: viewport.hostScale,
       fit,
       showCropOverlay: mode === 'crop',
       showSelectionOverlay: true,
@@ -528,6 +537,8 @@
     }));
   }
   function handlePaintPointerDown(e: PointerEvent) {
+    // Panning: the drag moves the view (handleMouseDown), not the document.
+    if (panning && e.button === 0) return;
     if (handleTransformPointerDown(e)) return;
     if (handleFramePointerDown(e)) return;
     if (mode !== 'paint' || e.button !== 0 || !canvasEl) return;
@@ -540,6 +551,7 @@
     report('paint', paintGesture.down({ ...paintSamples(e)[0], altKey: e.altKey }));
   }
   function handlePaintPointerMove(e: PointerEvent) {
+    if (panning && !transformTool.active) return;
     if (handleTransformPointerMove(e)) return;
     if (mode === 'transform' && canvasEl) {
       const { pt, tolerance } = transformPoint(e);
@@ -614,7 +626,7 @@
   function handleMouseDown(e: MouseEvent) {
     if (!canvasEl) return;
 
-    if (viewportGestures && (e.button === 1 || (e.button === 0 && isSpacePressed))) {
+    if (viewportGestures && (e.button === 1 || (e.button === 0 && panning))) {
       e.preventDefault();
       isPanning = true;
       panStartPoint = { clientX: e.clientX, clientY: e.clientY };
@@ -729,8 +741,9 @@
       return;
     }
 
-    if (viewportGestures && isSpacePressed) {
+    if (panning) {
       canvasEl.style.cursor = 'grab';
+      return;
     }
 
     if (transformTool.active) return;
@@ -1013,7 +1026,7 @@
         endFrameDrag(true);
       }}
       data-testid="image-editor-canvas"
-      style="width: 100%; height: 100%;{transformActive || mode === 'transform' ? ` cursor: ${transformCursor};` : ''}"
+      style="width: 100%; height: 100%;{panning ? ` cursor: ${isPanning ? 'grabbing' : 'grab'};` : transformActive || mode === 'transform' ? ` cursor: ${transformCursor};` : ''}"
       class="absolute inset-0 w-full h-full block {transformActive || mode === 'transform' ? 'touch-none' : mode === 'paint' ? 'touch-none cursor-crosshair' : mode === 'annotate' && editor.state.activeTool === 'type' ? 'cursor-text' : mode === 'annotate' && editor.state.activeTool === 'shape' ? 'cursor-crosshair' : ''}"
     ></canvas>
     {#if typeSession}

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

@@ -58,6 +58,11 @@ interface Props {
     open?: (ref: PlaybackRef) => void | Promise<void>;
     /** Whether wheel zoom and middle/space drag panning are enabled (default true). */
     viewportGestures?: boolean;
+    /**
+     * Pan mode (a host's hand tool): a primary drag pans the view in every mode, as holding Space
+     * does, and the canvas's own gestures pause. Needs `viewportGestures`. Default false.
+     */
+    panMode?: boolean;
     class?: string;
     style?: string;
 }

package/dist/image-editor/ImageProviderEffectsPanel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { imageOutlineButtonClass } from './styles.js';
-  import { findLayer, type ImageEditorController, type ImageLayer, type SmartObjectLayer } from '@pixerate/editor/image-editor';
+  import { EFFECT_LAYER_USES, findLayer, type ImageEditorController, type ImageLayer, type SmartObjectLayer } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
   import EffectsBrowser from '../effects/EffectsBrowser.svelte';
   import ImageEffectControls from './ImageEffectControls.svelte';
@@ -64,7 +64,7 @@
     <EffectsBrowser {provider} uses={['filter']} title="Filters" onpick={(e) => ((browse = null), run(() => controller.applyEffectFilter(id, e.id)))} />
   {/if}
   {#if browse === 'layer'}
-    <EffectsBrowser {provider} uses={['generator', 'overlay', 'title']} title="Generators and overlays" onpick={(e) => ((browse = null), run(() => controller.addEffectLayer(e.id)))} />
+    <EffectsBrowser {provider} uses={EFFECT_LAYER_USES} title="Generators and overlays" onpick={(e) => ((browse = null), run(() => controller.addEffectLayer(e.id)))} />
   {/if}
   {#if generator && layer}
     {@const id = layer.id}

package/dist/image-editor/LayerPanel.svelte

@@ -15,6 +15,7 @@
   import TypeOptionsBar from './TypeOptionsBar.svelte';
   import AdjustmentLayersPanel from './AdjustmentLayersPanel.svelte';
   import SelectionOptionsBar from './SelectionOptionsBar.svelte';
+  import ImageProviderEffectsPanel from './ImageProviderEffectsPanel.svelte';
 
   interface Props {
     controller: ImageEditorController;
@@ -98,6 +99,8 @@
       <div class="font-medium text-sm text-foreground">Smart Filters</div>
       <LayerEffectsPanel {controller} />
     </div>
+  {:else if panelId === 'provider-effects'}
+    <ImageProviderEffectsPanel {controller} />
   {:else if panelId === 'selection'}
     <div class="flex flex-col gap-3">
       <div class="font-medium text-sm text-foreground">Selection</div>

package/package.json

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