kritzel-stencil 0.3.18 → 0.3.20

package/dist/collection/classes/core/core.class.js

@@ -17,6 +17,8 @@ import { KritzelCursorManager } from "../managers/cursor.manager";
 import { KritzelThemeManager } from "../managers/theme.manager";
 import { KritzelLocalizationManager } from "../managers/localization.manager";
 import { KritzelLicenseManager } from "../managers/license.manager";
+import { KritzelBrowserPermissionManager } from "../managers/browser-permission.manager";
+import { KritzelClipboardManager } from "../managers/clipboard.manager";
 import { KritzelClassHelper } from "../../helpers/class.helper";
 /**
  * Central orchestrator class for the Kritzel canvas system.
@@ -46,6 +48,10 @@ export class KritzelCore {
     _localizationManager;
     /** Manager for license validation and watermark gating */
     _licenseManager;
+    /** Manager for browser permission checks and permission prompts */
+    _permissionManager;
+    /** Manager for clipboard copy/cut/paste orchestration */
+    _clipboardManager;
     /** Per-core registry of drawing tools (one instance per editor). */
     _toolRegistry;
     /** Optional unique identifier for namespacing storage keys across multiple editor instances */
@@ -108,6 +114,13 @@ export class KritzelCore {
     get licenseManager() {
         return this._licenseManager;
     }
+    /**
+     * Gets the browser permission manager.
+     * @returns The KritzelBrowserPermissionManager for browser permission checks and requests
+     */
+    get permissionManager() {
+        return this._permissionManager;
+    }
     /**
      * Gets the tool registry scoped to this core instance.
      * @returns The KritzelToolRegistry owned by this core
@@ -115,6 +128,13 @@ export class KritzelCore {
     get toolRegistry() {
         return this._toolRegistry;
     }
+    /**
+     * Gets the clipboard manager scoped to this core instance.
+     * @returns The KritzelClipboardManager owned by this core
+     */
+    get clipboardManager() {
+        return this._clipboardManager;
+    }
     /**
      * Gets the editor ID used for namespacing storage keys.
      * @returns The editor ID or undefined if not set
@@ -162,6 +182,8 @@ export class KritzelCore {
         this._themeManager = new KritzelThemeManager(this);
         this._localizationManager = new KritzelLocalizationManager(this);
         this._licenseManager = new KritzelLicenseManager(this);
+        this._permissionManager = new KritzelBrowserPermissionManager(this);
+        this._clipboardManager = new KritzelClipboardManager(this);
         this._toolRegistry = new KritzelToolRegistry(this);
         this._assetResolver = new KritzelAssetResolver();
     }
@@ -659,216 +681,6 @@ export class KritzelCore {
             this.rerender();
         }
     }
-    /**
-     * Copies the currently selected objects to the clipboard.
-     * Creates deep copies of objects and tracks ID mappings for anchor remapping.
-     */
-    copy() {
-        const selectionGroup = this._store.selectionGroup;
-        if (selectionGroup) {
-            // Copy each object and store them in an array, also track the ID mapping
-            const idMapping = new Map();
-            const copiedObjects = selectionGroup.objects
-                .sort((a, b) => a.zIndex - b.zIndex)
-                .map(obj => {
-                const copiedObj = obj.copy();
-                // Map: newId -> originalId
-                idMapping.set(copiedObj.id, obj.id);
-                return copiedObj;
-            });
-            this._store.state.copiedObjects = copiedObjects;
-            this._store.state.copiedObjectIdMapping = idMapping;
-        }
-    }
-    /**
-     * Cuts the currently selected objects (copy then delete).
-     * Objects are copied to clipboard and then removed from the canvas.
-     */
-    cut() {
-        const selectionGroup = this._store.selectionGroup;
-        if (!selectionGroup) {
-            return;
-        }
-        // Copy first, then delete
-        this.copy();
-        this.delete();
-    }
-    /**
-     * Pastes objects from the clipboard to the canvas.
-     * Handles positioning (explicit, offset, or centered for cross-workspace paste),
-     * workspace assignment, z-index ordering, group children, and anchor remapping.
-     * Creates a selection group containing the pasted objects.
-     * @param x - Optional explicit X position for paste
-     * @param y - Optional explicit Y position for paste
-     */
-    paste(x, y) {
-        const copiedObjects = this._store.state.copiedObjects;
-        if (!copiedObjects || copiedObjects.length === 0) {
-            return;
-        }
-        const activeWorkspace = this._store.state.activeWorkspace;
-        const originalIdMapping = this._store.state.copiedObjectIdMapping;
-        // Check if we're pasting from a different workspace
-        const isDifferentWorkspace = copiedObjects.some(obj => obj.workspaceId !== activeWorkspace.id);
-        // Calculate the bounding box of all copied objects
-        const minX = Math.min(...copiedObjects.map(obj => obj.translateX));
-        const minY = Math.min(...copiedObjects.map(obj => obj.translateY));
-        // Determine the paste position
-        let pasteX;
-        let pasteY;
-        if (x !== undefined && y !== undefined) {
-            // Explicit position provided (e.g., right-click paste)
-            pasteX = x;
-            pasteY = y;
-        }
-        else if (isDifferentWorkspace) {
-            // Pasting to different workspace without explicit position
-            // Keep original position; will be centered by centerInViewport() later
-            pasteX = minX;
-            pasteY = minY;
-        }
-        else {
-            // Same workspace paste: offset by 25 pixels from original position
-            pasteX = minX + 25 / this._store.state.scale;
-            pasteY = minY + 25 / this._store.state.scale;
-        }
-        // Calculate the offset to apply to all objects
-        const offsetX = pasteX - minX;
-        const offsetY = pasteY - minY;
-        this.removeSelectionGroup();
-        this.removeSelectionBox();
-        // Create a new selection group for the pasted objects
-        const selectionGroup = KritzelSelectionGroup.create(this);
-        // Build a reverse mapping: originalId -> newCopiedObjectId
-        // This is used to remap anchor references from original IDs to the copied object IDs
-        const originalToNewIdMap = new Map();
-        if (originalIdMapping) {
-            originalIdMapping.forEach((originalId, copiedId) => {
-                originalToNewIdMap.set(originalId, copiedId);
-            });
-        }
-        // Precompute zIndex once to avoid O(N * total_objects) repeated scans
-        const baseZIndex = this._store.currentZIndex;
-        // Batch all inserts and updates in a single Y.js transaction to avoid
-        // N separate observer callbacks and N rerenders (fires only once at commit)
-        this._store.objects.transaction(() => {
-            // Recursively flush a group's pending children (and any nested groups'
-            // pending children) into the store. Without recursion, nested groups
-            // would have their grandchildren stranded in `_pendingChildren` and they
-            // would never appear on the canvas, even though the parent group's
-            // bounding box looks correct.
-            const flushPendingChildren = (group, parentZIndex) => {
-                if (group._pendingChildren.length === 0) {
-                    return;
-                }
-                const pendingChildren = group._pendingChildren;
-                group._pendingChildren = [];
-                pendingChildren.forEach((child, childIndex) => {
-                    if (child.workspaceId !== activeWorkspace.id) {
-                        child.workspaceId = activeWorkspace.id;
-                    }
-                    child.updatePosition(child.translateX + offsetX, child.translateY + offsetY);
-                    child.zIndex = parentZIndex + childIndex + 1;
-                    // Recurse before adding so grandchildren are inserted as well
-                    if (KritzelClassHelper.isInstanceOf(child, 'KritzelGroup')) {
-                        flushPendingChildren(child, child.zIndex);
-                    }
-                    this.addObject(child);
-                });
-                group.finalize();
-            };
-            const newlyAddedObjects = [];
-            // First add all copied objects to the objectsMap with updated positions
-            copiedObjects.forEach((obj, i) => {
-                // Update workspace if pasting to a different workspace
-                if (obj.workspaceId !== activeWorkspace.id) {
-                    obj.workspaceId = activeWorkspace.id;
-                }
-                // Update position
-                obj.updatePosition(obj.translateX + offsetX, obj.translateY + offsetY);
-                // Update z-index
-                obj.zIndex = baseZIndex + i;
-                // Handle KritzelGroup: also add pending children (and grandchildren) with offset
-                if (KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup')) {
-                    flushPendingChildren(obj, obj.zIndex);
-                }
-                // Add to objectsMap
-                this.addObject(obj);
-                newlyAddedObjects.push(obj);
-                // Add to selection group
-                selectionGroup.addOrRemove(obj);
-            });
-            this.engine.emitObjectsAdded(newlyAddedObjects);
-            // Update line anchors to point to the newly pasted objects
-            // Only remap if the anchor target was also part of the copied selection
-            copiedObjects.forEach(obj => {
-                if (KritzelClassHelper.isInstanceOf(obj, 'KritzelLine')) {
-                    let updated = false;
-                    if (obj.startAnchor && originalToNewIdMap.has(obj.startAnchor.objectId)) {
-                        obj.startAnchor = { objectId: originalToNewIdMap.get(obj.startAnchor.objectId) };
-                        updated = true;
-                    }
-                    if (obj.endAnchor && originalToNewIdMap.has(obj.endAnchor.objectId)) {
-                        obj.endAnchor = { objectId: originalToNewIdMap.get(obj.endAnchor.objectId) };
-                        updated = true;
-                    }
-                    // If anchors were updated, rebuild the anchor index and persist the change
-                    if (updated) {
-                        this._store.objects.update(obj);
-                    }
-                }
-            });
-        });
-        // Rebuild anchor index after all anchor updates
-        this._anchorManager.rebuildIndex();
-        // Mark selection group as selected
-        selectionGroup.isSelected = true;
-        // Set rotation for single object
-        if (copiedObjects.length === 1) {
-            selectionGroup.rotation = copiedObjects[0].rotation;
-        }
-        // For cross-workspace paste, set the selection group's position before inserting
-        // it into the store. This mirrors the existing pattern where objects have
-        // updatePosition called before addObject, so the correct position is captured
-        // in the single initial insert with no separate Yjs update (and no extra undo step).
-        if (isDifferentWorkspace) {
-            if (x !== undefined && y !== undefined) {
-                // Explicit cursor position provided (e.g. right-click paste)
-                selectionGroup.updatePosition(x, y);
-            }
-            else {
-                // Ctrl+V paste: center objects in the current viewport
-                selectionGroup.centerInViewport();
-            }
-        }
-        // Add the selection group (inserts with the already-adjusted position)
-        this.addSelectionGroup(selectionGroup);
-        // Bring pasted objects into view with a smooth animation if they are not
-        // fully visible. These only mutate in-memory viewport state (scale, translateX/Y)
-        // and do not produce any Yjs writes, so they have no impact on the undo history.
-        this.engine.viewport.bringIntoViewIfNeeded(selectionGroup);
-        this._store.state.isSelecting = false;
-        // Defer creating copies for future pastes to next frame to avoid
-        // doubling the object creation cost in the current paste frame
-        requestAnimationFrame(() => {
-            const newSelectionGroup = this._store.selectionGroup;
-            if (newSelectionGroup) {
-                const newIdMapping = new Map();
-                const newCopiedObjects = newSelectionGroup.objects
-                    .sort((a, b) => a.zIndex - b.zIndex)
-                    .map(obj => {
-                    const copiedObj = obj.copy();
-                    newIdMapping.set(copiedObj.id, obj.id);
-                    return copiedObj;
-                });
-                this._store.state.copiedObjects = newCopiedObjects;
-                this._store.state.copiedObjectIdMapping = newIdMapping;
-            }
-        });
-        this._store.setState('activeTool', this._toolRegistry.getTool('selection'));
-        this.engine.emitObjectsChange();
-        this.rerender();
-    }
     /**
      * Moves objects one step forward in the z-order stack.
      * @param object - Optional specific object to move; defaults to all selected objects

package/dist/collection/classes/handlers/key.handler.js

@@ -3,7 +3,7 @@ import { KritzelBaseHandler } from "./base.handler";
 const NUDGE_AMOUNT = 10;
 /**
  * Handles keyboard events and manages keyboard shortcuts for the Kritzel canvas.
- * Provides functionality for tool switching, clipboard operations, object manipulation,
+ * Provides functionality for tool switching, object manipulation,
  * undo/redo, and navigation via keyboard input.
  */
 export class KritzelKeyHandler extends KritzelBaseHandler {
@@ -46,27 +46,6 @@ export class KritzelKeyHandler extends KritzelBaseHandler {
         { key: '7', ctrl: true, label: 'Tool 7', category: 'Tool Selection', action: () => this.switchToolByIndex(6) },
         { key: '8', ctrl: true, label: 'Tool 8', category: 'Tool Selection', action: () => this.switchToolByIndex(7) },
         { key: '9', ctrl: true, label: 'Tool 9', category: 'Tool Selection', action: () => this.switchToolByIndex(8) },
-        // Clipboard
-        {
-            key: 'c',
-            ctrl: true,
-            label: 'Copy',
-            category: 'Clipboard',
-            condition: c => !!c.store.selectionGroup,
-            action: c => {
-                c.copy();
-                c.rerender();
-            },
-        },
-        { key: 'x', ctrl: true, label: 'Cut', category: 'Clipboard', condition: c => !!c.store.selectionGroup, action: c => c.cut() },
-        {
-            key: 'v',
-            ctrl: true,
-            label: 'Paste',
-            category: 'Clipboard',
-            condition: c => !!c.store.state.copiedObjects && !c.store.activeText && !c.store.activeShape,
-            action: c => c.paste(),
-        },
         // Object layering
         { key: '+', ctrl: true, label: 'Bring Forward', category: 'Object Layering', condition: c => !!c.store.selectionGroup, action: c => c.bringForward() },
         { key: '-', ctrl: true, label: 'Send Backward', category: 'Object Layering', condition: c => !!c.store.selectionGroup, action: c => c.sendBackward() },

package/dist/collection/classes/managers/browser-permission.manager.js

@@ -0,0 +1,64 @@
+/**
+ * Manages browser permission checks and prompts for a core instance.
+ *
+ * Permission-specific prompt logic is routed through a handler registry so new
+ * permissions can be added without changing the core control flow.
+ */
+export class KritzelBrowserPermissionManager {
+    _isFirefox = /firefox|fxios/i.test(navigator.userAgent);
+    _isSafari = /safari/i.test(navigator.userAgent) && !/chrome|chromium|crios|android|edg/i.test(navigator.userAgent);
+    _requestHandlers = new Map();
+    /**
+     * Creates a new KritzelBrowserPermissionManager instance.
+     * @param core - The KritzelCore instance this manager belongs to
+     */
+    constructor(_core) {
+        this.registerRequestPermissionHandler('clipboard-read', async () => {
+            // Firefox and Safari open native paste menus when readText() is called
+            // proactively, so rely on the permission state instead of an eager read.
+            if (this._isFirefox || this._isSafari) {
+                return 'granted';
+            }
+            try {
+                await navigator.clipboard.readText();
+                return 'granted';
+            }
+            catch {
+                return 'denied';
+            }
+        });
+    }
+    /**
+     * Registers a custom request handler for a browser permission name.
+     * Existing handlers are replaced, which makes the registry easy to extend.
+     *
+     * @param permissionName - The browser permission name to handle
+     * @param handler - The request implementation for that permission
+     */
+    registerRequestPermissionHandler(permissionName, handler) {
+        this._requestHandlers.set(permissionName, handler);
+    }
+    /**
+     * Checks the current state for a browser permission via the Permissions API.
+     *
+     * @param permissionName - The browser permission name to inspect
+     */
+    async checkPermission(permissionName) {
+        const status = await navigator.permissions.query({ name: permissionName });
+        return status.state;
+    }
+    /**
+     * Requests a browser permission using the registered handler for the given
+     * permission name, then falls back to a permission check when no handler is
+     * registered.
+     *
+     * @param permissionName - The browser permission name to request
+     */
+    async requestPermission(permissionName) {
+        const handler = this._requestHandlers.get(permissionName);
+        if (handler) {
+            return handler();
+        }
+        return this.checkPermission(permissionName);
+    }
+}