@pixerate/editor-svelte 0.156.0 → 0.157.0

package/dist/image-editor/ImageEditor.svelte

@@ -19,6 +19,7 @@
     FreeTransformTool,
     DEFAULT_SHAPE_TOOL_OPTIONS,
     DEFAULT_TYPE_TOOL_OPTIONS,
+    imageToolLabel,
     type SelectionToolOptions,
     type ShapeToolOptions,
     type TextEditSession,
@@ -702,16 +703,16 @@
 
       {#if activeTab === 'annotate'}
         <div class="flex flex-col gap-3 text-xs">
-          <span class={imageSectionTitleClass}>Shape & Type Layers</span>
+          <span class={imageSectionTitleClass}>Shape & Type Layers, Paths</span>
           <div class="grid grid-cols-2 gap-1.5">
-            {#each ['shape', 'type'] as const as t (t)}
+            {#each ['shape', 'type', 'path-pen', 'path-select', 'direct-select'] as const as t (t)}
               <button
                 type="button"
                 aria-pressed={editor.state.activeTool === t}
                 onclick={() => editor.setTool(t)}
                 class="py-1.5 px-2 rounded-lg font-medium border transition-colors {editor.state.activeTool === t
                   ? 'bg-primary border-primary text-primary-foreground'
-                  : 'bg-muted border-border text-foreground hover:bg-accent'}">{t === 'shape' ? 'Shape' : 'Type'}</button>
+                  : 'bg-muted border-border text-foreground hover:bg-accent'}">{imageToolLabel(t)}</button>
             {/each}
           </div>
           {#if editor.state.activeTool === 'shape'}
@@ -742,7 +743,7 @@
                   ? 'bg-primary border-primary text-primary-foreground'
                   : 'bg-muted border-border text-foreground hover:bg-accent'}"
               >
-                {t}
+                {t === 'pen' ? 'freehand' : t}
               </button>
             {/each}
           </div>

package/dist/image-editor/ImageEditorCanvas.svelte

@@ -27,6 +27,8 @@
     handleQuickMaskKey,
     handleMaskViewKey,
     ShapeDrawGesture,
+    PathEditGesture,
+    isPathEditTool,
     TypeToolGesture,
     DEFAULT_SHAPE_TOOL_OPTIONS,
     DEFAULT_TYPE_TOOL_OPTIONS,
@@ -279,6 +281,8 @@
 
   // Shape and type tools; type is edited on the canvas through a hidden textarea.
   const shapeGesture = $derived(new ShapeDrawGesture(editor.controller, () => shapeOptions));
+  // Path tools (Path Selection, Direct Selection, Pen): edit the active path, shape or vector mask.
+  const pathGesture = $derived(new PathEditGesture(editor.controller));
   const typeTool = $derived(new TypeToolGesture(editor.controller, () => typeOptions));
   let typeInputEl = $state<HTMLTextAreaElement | null>(null);
   $effect(() => {
@@ -521,7 +525,10 @@
     const viewport = measureCanvasViewport(containerEl);
     view = { width: viewport.width, height: viewport.height };
     // The transform overlay's rotate handle sits a fixed distance out on screen.
-    transformTool.setView(getViewportProjection(editor.controller.getState(), view.width, view.height, mode === 'crop').scale);
+    const viewScale = getViewportProjection(editor.controller.getState(), view.width, view.height, mode === 'crop').scale;
+    transformTool.setView(viewScale);
+    pathGesture.setView(viewScale);
+    const activeTool = editor.controller.getState().activeTool;
 
     await editor.controller.render(canvasEl, {
       viewportWidth: viewport.width,
@@ -542,6 +549,7 @@
           : null,
       freeTransform: transformTool.overlay() ?? layerFrame(),
       textEdit: typeTool.session?.alive ? typeTool.session.overlay() : null,
+      pathEdit: mode === 'annotate' && isPathEditTool(activeTool) ? pathGesture.overlay(activeTool) : null,
     });
   }
 
@@ -623,6 +631,24 @@
     return () => window.removeEventListener('keydown', onKey);
   });
 
+  $effect(() => {
+    if (mode !== 'annotate' || typeof window === 'undefined') return;
+    const gesture = pathGesture;
+    // The path tools: Delete removes the selected anchors, Enter / Escape end the Pen's subpath.
+    const onKey = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (target?.closest?.('input, textarea, select, [contenteditable="true"]')) return;
+      if (!isPathEditTool(editor.controller.getState().activeTool)) return;
+      if (gesture.key(e.key)) {
+        e.preventDefault();
+        report('path', gesture.error);
+        void renderCanvas();
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  });
+
   $effect(() => {
     if (mode !== 'paint' || typeof window === 'undefined') return;
     const c = editor.controller;
@@ -728,6 +754,13 @@
       return;
     }
 
+    if (mode === 'annotate' && isPathEditTool(editor.state.activeTool)) {
+      pathGesture.down(canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false), editor.state.activeTool, { shift: e.shiftKey, alt: e.altKey });
+      report('path', pathGesture.error);
+      void renderCanvas();
+      return;
+    }
+
     if (mode === 'annotate' && (editor.state.activeTool === 'shape' || editor.state.activeTool === 'type')) {
       const imgPt = canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false);
       report(editor.state.activeTool, null);
@@ -854,6 +887,16 @@
       return;
     }
 
+    if (mode === 'annotate' && isPathEditTool(editor.state.activeTool)) {
+      const imgPt = canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false);
+      if (pathGesture.active) {
+        pathGesture.move(imgPt, { shift: e.shiftKey, alt: e.altKey });
+        if (pathGesture.error) report('path', pathGesture.error);
+      } else pathGesture.hover(imgPt);
+      void renderCanvas();
+      return;
+    }
+
     if (mode === 'annotate' && editor.state.activeTool === 'shape') {
       if (shapeGesture.active) {
         shapeGesture.move(canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false), { shift: e.shiftKey, alt: e.altKey });
@@ -975,6 +1018,11 @@
       return;
     }
 
+    if (mode === 'annotate' && isPathEditTool(editor.state.activeTool)) {
+      pathGesture.up();
+      void renderCanvas();
+      return;
+    }
     if (mode === 'annotate' && editor.state.activeTool === 'shape') {
       shapeGesture.up();
       return;
@@ -1080,7 +1128,7 @@
       }}
       data-testid="image-editor-canvas"
       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' : ''}"
+      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' || editor.state.activeTool === 'path-pen') ? 'cursor-crosshair' : mode === 'annotate' && isPathEditTool(editor.state.activeTool) ? 'cursor-default' : ''}"
     ></canvas>
     {#if typeSession}
       <textarea

package/dist/image-editor/PathsPanel.svelte

@@ -9,7 +9,8 @@
    * thumbnails. Click selects a path, double-click renames it (renaming the Work Path saves it).
    * Load as Selection (Shift adds, Alt subtracts), Make Work Path from the selection, Fill and
    * Stroke on the active layer with a colour and width, Add Vector Mask to the active layer,
-   * Duplicate and Delete. Every change is one undo step on the controller.
+   * Duplicate and Delete. Clicking empty space deselects the path. Every change is one undo step on
+   * the controller.
    */
   interface Props {
     controller: ImageEditorController;
@@ -62,12 +63,15 @@
     }`;
 </script>
 
-<div data-testid="paths-panel" class="flex flex-col gap-2 text-xs {className}">
+<!-- Clicking the panel's empty space deselects the path (the path tools then edit the active layer). -->
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+<div data-testid="paths-panel" class="flex flex-col gap-2 text-xs {className}" onclick={(e) => e.target === e.currentTarget && attempt(() => controller.setActivePath(null))}>
   <span class={imageSectionTitleClass}>Paths</span>
   {#if paths.length === 0}
     <p class="text-muted-foreground">No paths. Make a work path from a selection.</p>
   {/if}
-  <ul role="list" class="flex flex-col gap-0.5">
+  <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+  <ul role="list" class="flex flex-col gap-0.5 min-h-4" onclick={(e) => e.target === e.currentTarget && attempt(() => controller.setActivePath(null))}>
     {#each paths as p (p.id)}
       <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
       <li

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

@@ -4,7 +4,8 @@ import type { ImageEditorController } from '@pixerate/editor/image-editor';
  * thumbnails. Click selects a path, double-click renames it (renaming the Work Path saves it).
  * Load as Selection (Shift adds, Alt subtracts), Make Work Path from the selection, Fill and
  * Stroke on the active layer with a colour and width, Add Vector Mask to the active layer,
- * Duplicate and Delete. Every change is one undo step on the controller.
+ * Duplicate and Delete. Clicking empty space deselects the path. Every change is one undo step on
+ * the controller.
  */
 interface Props {
     controller: ImageEditorController;

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' | 'transform' | 'none';
 /** Which gesture an `ImageEditorCanvas` `onerror` report comes from. */
-export type ImageEditorCanvasErrorSource = 'paint' | 'select' | 'shape' | 'type' | 'transform';
+export type ImageEditorCanvasErrorSource = 'paint' | 'select' | 'shape' | 'type' | 'transform' | 'path';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.156.0",
+  "version": "0.157.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.212.0"
+    "@pixerate/editor": "0.213.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",