@anu3ev/fabric-image-editor 0.10.2 → 0.10.3

package/README.md

@@ -26,6 +26,8 @@ A modern, powerful browser-based image editor built with [FabricJS](https://fabr
 - **Font Loader** - FontManager handles Google Fonts + custom sources with automatic `@font-face` registration
 - **Configurable Toolbar** - Dynamic toolbar with context-sensitive actions
 - **Clipboard Integration** - Native copy/paste support with system clipboard
+- **Deletion Guards** - Application-defined rules can prevent user deletion for protected objects
+- **Clone Preparation** - Applications can sanitize object clones before copy, paste, duplicate, or cut
 
 ### Developer Features
 - **TypeScript Support** - Full type definitions included
@@ -72,6 +74,44 @@ document.addEventListener('DOMContentLoaded', async () => {
 })
 ```
 
+### Deletion Guards and Clone Preparation
+
+The editor does not know application-specific object roles. If an application needs to protect a domain object from user deletion, pass a rule through `canDeleteObject`.
+
+```javascript
+const MAIN_IMAGE_HANDLE = 'main-image'
+
+const editor = await initEditor('editor', {
+  canDeleteObject: (object) => {
+    return object.customData?.handle !== MAIN_IMAGE_HANDLE
+  }
+})
+```
+
+The rule is checked by shared delete operations, so keyboard deletion, toolbar deletion, direct `DeletionManager` calls, and `cut()` use the same result. Locked objects are still skipped by the editor itself. If a technical operation must delete a protected object, call deletion with `ignoreDeleteGuard: true`.
+
+When deletion is skipped by the guard, the editor fires `editor:objects-delete-skipped`. The event is only a notification for UI code; it does not cancel deletion, because the decision was already made by `canDeleteObject`.
+
+```javascript
+editor.canvas.on('editor:objects-delete-skipped', ({ skippedObjects }) => {
+  console.log('Some objects were not deleted:', skippedObjects)
+})
+```
+
+Use `prepareObjectClone` when copied objects must not keep a domain marker from the source object. The callback receives only clones. The editor calls it for the root clone and for nested objects inside groups or active selections.
+
+```javascript
+const editor = await initEditor('editor', {
+  prepareObjectClone: (object) => {
+    if (object.customData?.handle !== MAIN_IMAGE_HANDLE) return
+
+    delete object.customData.handle
+  }
+})
+```
+
+This hook is used by `copy()`, `cut()`, `copyPaste()`, and `paste()`. Before the hook is called, the editor detaches `customData` on the clone so the callback does not accidentally mutate the original object.
+
 ### Working with Images
 
 ```javascript
@@ -398,9 +438,9 @@ The editor follows a modular architecture with specialized managers:
 
 ### Utility Managers
 - **`SelectionManager`** - Object selection and multi-selection handling
-- **`ClipboardManager`** - Copy/paste with system clipboard integration
+- **`ClipboardManager`** - Copy/paste, cut, duplicate, clone preparation, and system clipboard integration
 - **`GroupingManager`** - Object grouping and ungrouping operations
-- **`DeletionManager`** - Object deletion with group handling
+- **`DeletionManager`** - Object deletion, delete guards, skipped-delete events, and group handling
 - **`ShapeManager`** - Preset-based shape groups with inner text, layout, scaling, and style controls
 - **`ObjectLockManager`** - Object locking and unlocking functionality
 - **`SnappingManager`** - Alignment guides and equal-spacing snaps while moving objects
@@ -451,7 +491,13 @@ initEditor(containerId, options): Promise<ImageEditor>
   acceptContentTypes: ['image/png', 'image/jpeg', 'image/svg+xml'],
 
   // Callback when ready
-  _onReadyCallback: (editor) => console.log('Ready!')
+  _onReadyCallback: (editor) => console.log('Ready!'),
+
+  // Optional user-delete rule. Return false to skip this object.
+  canDeleteObject: (object) => true,
+
+  // Optional clone preparation for copy, cut, duplicate, and paste.
+  prepareObjectClone: (object) => {}
 }
 ```
 

package/dist/assets/{worker-CA0Zz9Rg.js → worker-Ds8wxpzF.js}

@@ -1,2 +1,2 @@
 (function(){self.onmessage=async e=>{let{action:t,payload:n,requestId:r}=e.data;try{switch(t){case`resizeImage`:{let{dataURL:e,maxWidth:i,maxHeight:a,minWidth:o,minHeight:s,contentType:c,quality:l,sizeType:u}=n,d=await createImageBitmap(await(await fetch(e)).blob()),{width:f,height:p}=d,m=Math.min(i/f,a/p);u===`min`&&(m=Math.max(o/f,s/p)),f=Math.floor(f*m),p=Math.floor(p*m);let h=new OffscreenCanvas(f,p),g=h.getContext(`2d`);if(!g)throw Error(`Failed to get 2D context from OffscreenCanvas`);g.drawImage(d,0,0,f,p);let _=await h.convertToBlob({type:c,quality:l});self.postMessage({requestId:r,action:t,success:!0,data:_});break}case`toDataURL`:{let{bitmap:e,contentType:i,quality:a,returnBlob:o}=n,{width:s,height:c}=e,l=new OffscreenCanvas(e.width,e.height),u=l.getContext(`2d`);if(!u)throw Error(`Failed to get 2D context from OffscreenCanvas`);u.drawImage(e,0,0,s,c);let d=await l.convertToBlob({type:i,quality:a});if(o){self.postMessage({requestId:r,action:t,success:!0,data:d});break}let f=await new Promise(e=>{let t=new FileReader;t.onload=()=>e(t.result),t.readAsDataURL(d)});self.postMessage({requestId:r,action:t,success:!0,data:f});break}default:throw Error(`Unknown action ${t}`)}}catch(e){self.postMessage({requestId:r,action:t,success:!1,error:e.message})}}})();
-//# sourceMappingURL=worker-CA0Zz9Rg.js.map
+//# sourceMappingURL=worker-Ds8wxpzF.js.map