kritzel-stencil 0.3.18 → 0.3.20

package/dist/collection/classes/managers/clipboard.manager.js

@@ -0,0 +1,401 @@
+import { KritzelImage } from "../objects/image.class";
+import { KritzelText } from "../objects/text.class";
+import { KritzelSelectionGroup } from "../objects/selection-group.class";
+import { KritzelClassHelper } from "../../helpers/class.helper";
+import { KritzelReviver } from "../core/reviver.class";
+import imageCompression from "browser-image-compression";
+const CLIPBOARD_PAYLOAD_PREFIX = 'kritzel-clipboard/v1:';
+/**
+ * Manages clipboard operations (copy/cut/paste) for a core instance.
+ *
+ * The system clipboard is the single source of truth: copy serializes the current
+ * selection into a Kritzel payload, paste reads + revives it. No copied objects are
+ * cached on the engine state.
+ */
+export class KritzelClipboardManager {
+    _core;
+    /**
+     * In-memory cascade offset (world units) applied to successive pastes of the same
+     * clipboard content so they don't stack exactly on top of each other. Reset on copy/cut.
+     */
+    _pasteOffset = 0;
+    constructor(core) {
+        this._core = core;
+    }
+    /**
+     * Serializes an object for the clipboard payload. Groups additionally embed their
+     * (recursively serialized) children under `__children__` so the payload is self-contained.
+     */
+    serializeForClipboard(object) {
+        const serialized = (typeof object.serialize === 'function' ? object.serialize() : object);
+        if (KritzelClassHelper.isInstanceOf(object, 'KritzelGroup')) {
+            serialized.__children__ = object.children.map(child => this.serializeForClipboard(child));
+        }
+        return serialized;
+    }
+    serializeClipboardPayload(payload) {
+        return `${CLIPBOARD_PAYLOAD_PREFIX}${JSON.stringify(payload)}`;
+    }
+    parseClipboardPayload(text) {
+        if (!text || !text.startsWith(CLIPBOARD_PAYLOAD_PREFIX)) {
+            return null;
+        }
+        try {
+            const parsed = JSON.parse(text.slice(CLIPBOARD_PAYLOAD_PREFIX.length));
+            if (parsed?.version !== 1 || !Array.isArray(parsed.objects)) {
+                return null;
+            }
+            return parsed;
+        }
+        catch {
+            return null;
+        }
+    }
+    determineTextPasteIntent(text) {
+        const payload = this.parseClipboardPayload(text);
+        if (payload) {
+            return { type: 'kritzel_objects', payload };
+        }
+        if (text && text.trim().length > 0) {
+            return { type: 'plain_text', text };
+        }
+        return null;
+    }
+    async writeBrowserClipboardPayload(payload, event) {
+        const serialized = this.serializeClipboardPayload(payload);
+        if (event?.clipboardData) {
+            event.clipboardData.setData('text/plain', serialized);
+            return;
+        }
+        if (typeof navigator === 'undefined' || !navigator.clipboard?.writeText) {
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(serialized);
+        }
+        catch {
+            // Ignore clipboard permission failures and keep the local clipboard working.
+        }
+    }
+    /**
+     * Revives a single serialized clipboard object (and its embedded group children).
+     * IDs are NOT regenerated here; see regenerateIdsAndRemapAnchors.
+     */
+    reviveClipboardObject(serialized) {
+        const reviver = new KritzelReviver(this._core);
+        const { __children__, ...objectData } = serialized;
+        const revived = reviver.revive(objectData);
+        if (!revived) {
+            return null;
+        }
+        if (__children__ && KritzelClassHelper.isInstanceOf(revived, 'KritzelGroup')) {
+            const children = __children__.map(child => this.reviveClipboardObject(child)).filter((child) => child != null);
+            revived._pendingChildren = children;
+            revived.childIds = children.map(child => child.id);
+        }
+        return revived;
+    }
+    /**
+     * Assigns fresh unique IDs to every revived object (including nested group children),
+     * keeping group.childIds in sync and remapping line anchors that reference copied
+     * siblings to their new IDs. Anchors pointing at objects outside the pasted set are
+     * left untouched so they stay connected to the existing object.
+     */
+    regenerateIdsAndRemapAnchors(topLevel) {
+        const all = [];
+        const collect = (objects) => {
+            for (const object of objects) {
+                all.push(object);
+                if (KritzelClassHelper.isInstanceOf(object, 'KritzelGroup')) {
+                    collect(object._pendingChildren);
+                }
+            }
+        };
+        collect(topLevel);
+        const idMap = new Map();
+        for (const object of all) {
+            const newId = object.generateId();
+            idMap.set(object.id, newId);
+            object.id = newId;
+            object.isMounted = false;
+        }
+        for (const object of all) {
+            if (KritzelClassHelper.isInstanceOf(object, 'KritzelGroup')) {
+                object.childIds = object.childIds.map(id => idMap.get(id) ?? id);
+            }
+            if (KritzelClassHelper.isInstanceOf(object, 'KritzelLine')) {
+                if (object.startAnchor && idMap.has(object.startAnchor.objectId)) {
+                    object.startAnchor = { objectId: idMap.get(object.startAnchor.objectId) };
+                }
+                if (object.endAnchor && idMap.has(object.endAnchor.objectId)) {
+                    object.endAnchor = { objectId: idMap.get(object.endAnchor.objectId) };
+                }
+            }
+        }
+    }
+    /**
+     * Evaluates the clipboard event to determine exactly what the user is trying to paste.
+     * Returns a PasteIntent covering the 3 main cases: Kritzel objects, Images, or Plain text.
+     */
+    async determinePasteIntent(event) {
+        if (event?.clipboardData) {
+            const data = event.clipboardData;
+            const imageFiles = Array.from(data.files ?? []).filter(file => file.type.startsWith('image/'));
+            if (imageFiles.length > 0) {
+                return { type: 'image_files', files: imageFiles };
+            }
+            if (data.types.includes('text/plain')) {
+                const textIntent = this.determineTextPasteIntent(data.getData('text/plain'));
+                if (textIntent)
+                    return textIntent;
+            }
+            return { type: 'unknown' };
+        }
+        if (typeof navigator === 'undefined' || !navigator.clipboard) {
+            return { type: 'unknown' };
+        }
+        const { clipboard } = navigator;
+        const permissionState = await this._core.permissionManager.checkPermission('clipboard-read');
+        if (permissionState !== 'granted') {
+            const requestedState = await this._core.permissionManager.requestPermission('clipboard-read');
+            if (requestedState !== 'granted') {
+                return { type: 'unknown' };
+            }
+        }
+        if (clipboard.read) {
+            try {
+                const items = await clipboard.read();
+                const { imageFiles, text } = await this.processClipboardItems(items);
+                if (imageFiles.length > 0) {
+                    return { type: 'image_files', files: imageFiles };
+                }
+                if (text !== null) {
+                    const textIntent = this.determineTextPasteIntent(text);
+                    if (textIntent)
+                        return textIntent;
+                }
+            }
+            catch {
+                // Fall back to readText below when read() is denied or unavailable at runtime.
+            }
+        }
+        if (clipboard.readText) {
+            const textIntent = this.determineTextPasteIntent(await clipboard.readText());
+            if (textIntent)
+                return textIntent;
+        }
+        return { type: 'unknown' };
+    }
+    /**
+     * Helper to parse clipboard items in parallel
+     */
+    async processClipboardItems(items) {
+        const imageFiles = [];
+        let text = null;
+        // Process items concurrently
+        await Promise.all(items.map(async (item) => {
+            const imageType = item.types.find(type => type.startsWith('image/'));
+            if (imageType) {
+                const blob = await item.getType(imageType);
+                imageFiles.push(new File([blob], 'pasted-image', { type: imageType }));
+                return;
+            }
+            if (text === null && item.types.includes('text/plain')) {
+                const blob = await item.getType('text/plain');
+                text = await blob.text();
+            }
+        }));
+        return { imageFiles, text };
+    }
+    /**
+     * Copies currently selected objects into internal clipboard state.
+     */
+    copy(event) {
+        const selectionGroup = this._core.store.selectionGroup;
+        if (!selectionGroup) {
+            return;
+        }
+        const payload = {
+            version: 1,
+            sourceWorkspaceId: this._core.store.state.activeWorkspace?.id,
+            objects: selectionGroup.objects.sort((a, b) => a.zIndex - b.zIndex).map(obj => this.serializeForClipboard(obj)),
+        };
+        // A fresh copy resets the cascade so the first paste lands at the default offset.
+        this._pasteOffset = 0;
+        void this.writeBrowserClipboardPayload(payload, event);
+    }
+    /**
+     * Cuts currently selected objects (copy then delete).
+     */
+    cut(event) {
+        const selectionGroup = this._core.store.selectionGroup;
+        if (!selectionGroup) {
+            return;
+        }
+        this.copy(event);
+        this._core.delete();
+    }
+    materializeKritzelObjects(intent) {
+        const objects = intent.payload.objects.map(object => this.reviveClipboardObject(object)).filter((object) => object != null);
+        this.regenerateIdsAndRemapAnchors(objects);
+        return objects;
+    }
+    async materializeImageFiles(intent) {
+        try {
+            const scale = this._core.store.state.scale;
+            const offset = 25 / scale;
+            const preparePromises = intent.files.map(async (file, index) => {
+                // Use the default image compression size of 1200
+                const compressed = await imageCompression(file, { maxWidthOrHeight: 1200 });
+                return KritzelImage.fromBlob(this._core, compressed, {
+                    translateX: index * offset,
+                    translateY: index * offset,
+                });
+            });
+            return await Promise.all(preparePromises);
+        }
+        catch (err) {
+            console.error('Failed to import pasted image files:', err);
+            return null;
+        }
+    }
+    async materializePlainText(intent) {
+        const textObject = KritzelText.create(this._core);
+        const paragraphs = intent.text.split('\n').map(line => {
+            if (line.length === 0) {
+                return { type: 'paragraph' }; // Empty paragraph
+            }
+            return {
+                type: 'paragraph',
+                content: [{ type: 'text', text: line }],
+            };
+        });
+        textObject.setContent({
+            type: 'doc',
+            content: paragraphs,
+        });
+        return [textObject];
+    }
+    /**
+     * Pastes objects from clipboard with optional explicit world coordinates.
+     */
+    async paste(x, y, event) {
+        const pasteIntent = await this.determinePasteIntent(event);
+        let objects = null;
+        if (pasteIntent.type === 'kritzel_objects') {
+            objects = this.materializeKritzelObjects(pasteIntent);
+        }
+        else if (pasteIntent.type === 'image_files') {
+            objects = await this.materializeImageFiles(pasteIntent);
+        }
+        else if (pasteIntent.type === 'plain_text') {
+            objects = await this.materializePlainText(pasteIntent);
+        }
+        if (!objects || objects.length === 0) {
+            return;
+        }
+        await this.insertMaterializedObjects(objects, pasteIntent, x, y);
+    }
+    async insertMaterializedObjects(copiedObjects, pasteIntent, x, y) {
+        const activeWorkspace = this._core.store.state.activeWorkspace;
+        if (!activeWorkspace) {
+            return;
+        }
+        // Determine if we should center the objects in the viewport.
+        // This happens if the user specifically pasted from a different workspace,
+        // OR if we're inserting brand new external items (like images or text).
+        const isDifferentWorkspace = copiedObjects.some(obj => obj.workspaceId !== activeWorkspace.id);
+        const isNewExternalContent = pasteIntent.type !== 'kritzel_objects';
+        const shouldCenterInViewport = isDifferentWorkspace || isNewExternalContent;
+        const hasExplicitPastePosition = x !== undefined && y !== undefined;
+        const minX = Math.min(...copiedObjects.map(obj => obj.translateX));
+        const minY = Math.min(...copiedObjects.map(obj => obj.translateY));
+        let pasteX;
+        let pasteY;
+        const step = 25 / this._core.store.state.scale;
+        if (x !== undefined && y !== undefined) {
+            pasteX = x;
+            pasteY = y;
+        }
+        else if (shouldCenterInViewport) {
+            pasteX = minX;
+            pasteY = minY;
+        }
+        else {
+            pasteX = minX + step + this._pasteOffset;
+            pasteY = minY + step + this._pasteOffset;
+            // Advance the cascade so the next same-content paste is offset further.
+            this._pasteOffset += step;
+        }
+        const offsetX = pasteX - minX;
+        const offsetY = pasteY - minY;
+        this._core.removeSelectionGroup();
+        this._core.removeSelectionBox();
+        const selectionGroup = KritzelSelectionGroup.create(this._core);
+        const baseZIndex = this._core.store.currentZIndex;
+        this._core.store.objects.transaction(() => {
+            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;
+                    if (KritzelClassHelper.isInstanceOf(child, 'KritzelGroup')) {
+                        flushPendingChildren(child, child.zIndex);
+                    }
+                    this._core.addObject(child);
+                });
+                group.finalize();
+            };
+            const newlyAddedObjects = [];
+            copiedObjects.forEach((obj, i) => {
+                if (obj.workspaceId !== activeWorkspace.id) {
+                    obj.workspaceId = activeWorkspace.id;
+                }
+                obj.updatePosition(obj.translateX + offsetX, obj.translateY + offsetY);
+                obj.zIndex = baseZIndex + i;
+                if (KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup')) {
+                    flushPendingChildren(obj, obj.zIndex);
+                }
+                this._core.addObject(obj);
+                newlyAddedObjects.push(obj);
+                selectionGroup.addOrRemove(obj);
+            });
+            this._core.engine.emitObjectsAdded(newlyAddedObjects);
+        });
+        this._core.anchorManager.rebuildIndex();
+        selectionGroup.isSelected = true;
+        if (copiedObjects.length === 1) {
+            selectionGroup.rotation = copiedObjects[0].rotation;
+        }
+        if (shouldCenterInViewport && !hasExplicitPastePosition) {
+            selectionGroup.centerInViewport();
+        }
+        this._core.addSelectionGroup(selectionGroup);
+        this._core.engine.viewport?.bringIntoViewIfNeeded(selectionGroup);
+        this._core.store.state.isSelecting = false;
+        // Use a double requestAnimationFrame to ensure the browser has fully rendered the DOM,
+        // and objects like KritzelText have executed their own internal size-adjustment rAF calls.
+        await new Promise(resolve => {
+            requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+        });
+        // Re-evaluate bounding box dimensions now that any DOM nodes (like ProseMirror text editors)
+        // have mounted and calculated their actual bounds.
+        selectionGroup.refreshObjectDimensions();
+        // We should update it if the centerInViewport or width adjustments changed it significantly
+        if (shouldCenterInViewport && !hasExplicitPastePosition) {
+            selectionGroup.centerInViewport();
+        }
+        this._core.engine.emitObjectsChange();
+        this._core.rerender();
+        this._core.store.setState('activeTool', this._core.toolRegistry.getTool('selection'));
+        this._core.engine.emitObjectsChange();
+        this._core.rerender();
+    }
+}

package/dist/collection/classes/objects/image.class.js

@@ -429,6 +429,48 @@ export class KritzelImage extends KritzelBaseObject {
             img.src = src;
         });
     }
+    /**
+     * Creates a fully initialized KritzelImage from a Blob.
+     * Uploads the blob via the asset resolver and sets up dimensions/asset references.
+     *
+     * @param core - The KritzelCore instance providing the asset resolver and state.
+     * @param blob - The image Blob (e.g. from clipboard or file picker).
+     * @param config - Optional configuration to merge into the new image.
+     * @returns A promise resolving to a fully loaded KritzelImage object.
+     */
+    static async fromBlob(core, blob, config) {
+        const objectUrl = URL.createObjectURL(blob);
+        try {
+            const dimensions = await new Promise((resolve, reject) => {
+                const img = new Image();
+                img.onload = () => resolve({ naturalWidth: img.naturalWidth, naturalHeight: img.naturalHeight });
+                img.onerror = err => reject(err);
+                img.src = objectUrl;
+            });
+            const mimeType = blob.type || 'image/png';
+            const asset = await core.assetResolver.put(blob, {
+                mimeType,
+                kind: 'image',
+                width: dimensions.naturalWidth,
+                height: dimensions.naturalHeight,
+            });
+            const image = KritzelImage.create(core, config);
+            image.assetId = asset.id;
+            image.mimeType = asset.mimeType;
+            const { scaledWidth, scaledHeight } = image.calculateScaledDimensions({
+                width: dimensions.naturalWidth,
+                height: dimensions.naturalHeight,
+            });
+            image.width = scaledWidth;
+            image.height = scaledHeight;
+            image.resolvedSrc = await core.assetResolver.resolve(asset.id);
+            image.loadState = 'ready';
+            return image;
+        }
+        finally {
+            URL.revokeObjectURL(objectUrl);
+        }
+    }
     /**
      * Calculates scaled dimensions for an image while respecting maxWidth and maxHeight constraints.
      * Maintains the original aspect ratio by using the smaller of the two scale ratios.

package/dist/collection/classes/tools/image-tool.class.js

@@ -79,7 +79,7 @@ export class KritzelImageTool extends KritzelBaseTool {
             }
             return;
         }
-        const prepared = files.map(file => imageCompression(file, { maxWidthOrHeight: this.maxCompressionSize }).then(compressedFile => this.prepareImage(compressedFile)));
+        const prepared = files.map(file => imageCompression(file, { maxWidthOrHeight: this.maxCompressionSize }).then(compressedFile => KritzelImage.fromBlob(this._core, compressedFile)));
         Promise.allSettled(prepared)
             .then(results => {
             const images = [];
@@ -101,64 +101,6 @@ export class KritzelImageTool extends KritzelBaseTool {
             input.value = '';
         }
     }
-    /**
-     * Compresses-then-measures an already compressed blob, uploads it
-     * through the asset resolver, and returns a fully configured
-     * `KritzelImage` that has not yet been added to the canvas.
-     *
-     * @param blob - Compressed image bytes to store and render
-     */
-    async prepareImage(blob) {
-        let tempUrl = null;
-        try {
-            const mimeType = blob.type || 'image/png';
-            tempUrl = URL.createObjectURL(blob);
-            const dimensions = await this.measureImage(tempUrl);
-            const asset = await this._core.assetResolver.put(blob, {
-                mimeType,
-                kind: 'image',
-                width: dimensions.naturalWidth,
-                height: dimensions.naturalHeight,
-            });
-            const image = KritzelImage.create(this._core);
-            image.assetId = asset.id;
-            image.mimeType = asset.mimeType;
-            const { scaledWidth, scaledHeight } = image.calculateScaledDimensions({
-                width: dimensions.naturalWidth,
-                height: dimensions.naturalHeight,
-            });
-            image.width = scaledWidth;
-            image.height = scaledHeight;
-            // Seed the resolved URL so the renderer can display the image
-            // without waiting for a resolver round-trip.
-            image.resolvedSrc = await this._core.assetResolver.resolve(asset.id);
-            image.loadState = 'ready';
-            return image;
-        }
-        finally {
-            if (tempUrl) {
-                try {
-                    URL.revokeObjectURL(tempUrl);
-                }
-                catch {
-                    /* ignore */
-                }
-            }
-        }
-    }
-    /**
-     * Measures the natural dimensions of an image from a URL. Used to
-     * provide width/height hints when uploading and to compute the
-     * scaled canvas dimensions.
-     */
-    measureImage(url) {
-        return new Promise((resolve, reject) => {
-            const img = new Image();
-            img.onload = () => resolve({ naturalWidth: img.naturalWidth, naturalHeight: img.naturalHeight });
-            img.onerror = err => reject(err);
-            img.src = url;
-        });
-    }
     /**
      * Adds a batch of prepared images to the canvas store and switches
      * to the selection tool. The first image is centered in the viewport;

package/dist/collection/collection-manifest.json

@@ -39,6 +39,7 @@
     "components/ui/kritzel-export/kritzel-export.js",
     "components/ui/kritzel-login-dialog/kritzel-login-dialog.js",
     "components/ui/kritzel-more-menu/kritzel-more-menu.js",
+    "components/ui/kritzel-notification-card/kritzel-notification-card.js",
     "components/ui/kritzel-settings/kritzel-settings.js",
     "components/ui/kritzel-share-dialog/kritzel-share-dialog.js",
     "components/ui/kritzel-tool-config/kritzel-tool-config.js",

package/dist/collection/components/core/kritzel-editor/kritzel-editor.css

@@ -44,6 +44,59 @@ kritzel-controls.keyboard-open {
   gap: 8px;
 }
 
+.top-center-notification-layer {
+  position: absolute;
+  top: var(--kritzel-editor-top-center-notification-top, 14px);
+  left: 0;
+  right: 0;
+  z-index: var(--kritzel-editor-top-center-notification-z-index, 10001);
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.top-center-notification-container {
+  width: min(90vw, 420px);
+  pointer-events: auto;
+  animation: kritzel-notification-slide-in var(--kritzel-editor-notification-animation-duration, 220ms)
+    var(--kritzel-editor-notification-animation-easing, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+.top-center-notification-container.is-dismissing {
+  animation: kritzel-notification-fade-out var(--kritzel-editor-notification-dismiss-animation-duration, 180ms)
+    var(--kritzel-editor-notification-dismiss-animation-easing, ease-in) forwards;
+}
+
+@keyframes kritzel-notification-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes kritzel-notification-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .top-center-notification-container {
+    animation: none;
+  }
+}
+
 .top-right-buttons {
   position: absolute;
   top: var(--kritzel-editor-top-right-buttons-top, 14px);