@pixerate/editor-svelte 0.137.1 → 0.139.0

package/dist/image-editor/ImageEditorCanvas.svelte

@@ -25,6 +25,7 @@
     startMarchingAnts,
     handleSelectionShortcut,
     handleQuickMaskKey,
+    handleMaskViewKey,
     ShapeDrawGesture,
     TypeToolGesture,
     DEFAULT_SHAPE_TOOL_OPTIONS,
@@ -605,7 +606,7 @@
       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)) {
+      if (handleQuickMaskKey(editor.controller, e) || handleMaskViewKey(editor.controller, e)) {
         e.preventDefault();
         return;
       }

package/dist/image-editor/LayersPanel.svelte

@@ -9,6 +9,8 @@
     dropPlacement,
     dropZone,
     maskThumbnailClick,
+    vectorMaskThumbnail,
+    vectorMaskThumbnailClick,
     layerThumbnailClick,
     layerBadge,
     layerEffectsBadge,
@@ -51,6 +53,7 @@
       layers: s.layers,
       activeLayerId: s.activeLayerId,
       activeTarget: s.activeTarget,
+      maskView: controller.getMaskView(),
       rows: layerPanelRows(s.layers, s.activeLayerId),
       active: controller.getActiveLayer() ?? null,
       menu: layerMenu(controller),
@@ -144,6 +147,11 @@
     void tick;
     return layerHasThumbnail(layer) ? controller.getLayerThumbnail(layer.id, { maxSide: 64 }) : null;
   }
+  function vectorThumb(layer: ImageLayer): PixelBuffer | null {
+    void tick;
+    const { width, height } = controller.getState().imageDimensions;
+    return layer.vectorMask ? vectorMaskThumbnail(layer.vectorMask, width, height, 64) : null;
+  }
   function maskThumb(layer: ImageLayer): PixelBuffer | null {
     void tick;
     return layer.mask && !layer.mask.source ? controller.getLayerThumbnail(layer.id, { maxSide: 64, mask: true }) : null;
@@ -374,7 +382,8 @@
             use:paint={maskThumb(layer)}
             role="button"
             tabindex="0"
-            aria-label={`${row.label} mask${layer.mask.enabled === false ? ' (disabled)' : ''}`}
+            aria-label={`${row.label} mask${layer.mask.enabled === false ? ' (disabled)' : ''}${snapshot.maskView?.layerId === layer.id ? ' (shown)' : ''}`}
+            title="Alt-click: show the mask alone · Alt+Shift-click: as an overlay"
             data-testid="layer-mask-thumbnail"
             style="width: {thumbnailSize}px; height: {thumbnailSize}px"
             class={thumbClass(row.active && snapshot.activeTarget === 'mask')}
@@ -384,6 +393,22 @@
             }}
           ></canvas>
         {/if}
+        {#if layer.vectorMask}
+          <canvas
+            use:paint={vectorThumb(layer)}
+            role="button"
+            tabindex="0"
+            aria-label={`${row.label} vector mask${layer.vectorMask.enabled === false ? ' (disabled)' : ''}`}
+            title="Ctrl/⌘-click: load the path as the selection · Shift-click: turn it off or on"
+            data-testid="layer-vector-mask-thumbnail"
+            style="width: {thumbnailSize}px; height: {thumbnailSize}px"
+            class={thumbClass(false)}
+            onclick={(e) => {
+              e.stopPropagation();
+              attempt(() => vectorMaskThumbnailClick(controller, layer, e));
+            }}
+          ></canvas>
+        {/if}
         {#if renaming === layer.id}
           <!-- svelte-ignore a11y_autofocus -->
           <input

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.137.1",
+  "version": "0.139.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.188.0"
+    "@pixerate/editor": "0.190.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",