kritzel-stencil 0.0.143 → 0.0.145

package/dist/components/{p-CoFmi-t6.js → p-COGwCbe1.js}

@@ -226,11 +226,15 @@ class KritzelBaseObject {
         const deltaY = targetCenterY - objectCenterY;
         this.updatePosition(this.translateX + deltaX, this.translateY + deltaY);
     }
+    update() {
+        this._core.store.state.objectsMap.update(this);
+    }
     move(startX, startY, endX, endY) {
         const deltaX = (startX - endX) / this._core.store.state.scale;
         const deltaY = (startY - endY) / this._core.store.state.scale;
         this.translateX += deltaX;
         this.translateY += deltaY;
+        this._core.store.state.objectsMap.update(this);
     }
     resize(x, y, width, height) {
         if (width <= 1 || height <= 1) {
@@ -240,9 +244,11 @@ class KritzelBaseObject {
         this.height = height;
         this.translateX = x;
         this.translateY = y;
+        this._core.store.state.objectsMap.update(this);
     }
     rotate(value) {
         this.rotation = value;
+        this._core.store.state.objectsMap.update(this);
     }
     clone() {
         const clone = Object.create(Object.getPrototypeOf(this));
@@ -257,9 +263,6 @@ class KritzelBaseObject {
         copiedObject.isMounted = false;
         return copiedObject;
     }
-    onSelectedClick() {
-        // This method can be overridden by subclasses to handle click events when the object is selected.
-    }
     serialize() {
         const { _core, _elementRef, element, totalWidth, totalHeight, ...remainingProps } = this;
         const clonedProps = structuredClone(remainingProps);
@@ -290,18 +293,6 @@ class KritzelBaseObject {
         this.translateY = y;
         this._core.store.state.objectsMap.update(this);
     }
-    onExecuteAddCommand(_object) {
-        // This method can be overridden by subclasses to handle actions after an add command is executed.
-    }
-    onUndoAddCommand(_object) {
-        // This method can be overridden by subclasses to handle actions after an add command is undone.
-    }
-    onExecuteUpdateCommand(_updatedProperties) {
-        // This method can be overridden by subclasses to handle actions after an update command is executed.
-    }
-    onUndoUpdateCommand(_previousProperties) {
-        // This method can be overridden by subclasses to handle actions after an update command is undone.
-    }
 }
 
 class KritzelKeyboardHelper {
@@ -353,62 +344,6 @@ class KritzelKeyboardHelper {
     }
 }
 
-class KritzelBaseCommand {
-    _core;
-    initiator;
-    skipHistory;
-    timestamp;
-    constructor(core, initiator, skipHistory = false) {
-        this._core = core;
-        this.initiator = initiator?.constructor?.name ?? 'Unknown';
-        this.skipHistory = skipHistory;
-        this.timestamp = new Date();
-    }
-    execute() {
-        throw new Error('Method not implemented.');
-    }
-    undo() {
-        throw new Error('Method not implemented.');
-    }
-}
-
-class UpdateObjectCommand extends KritzelBaseCommand {
-    object;
-    updatedProperties;
-    previousProperties;
-    constructor(core, initiator, object, updatedProperties, skipHistory = false) {
-        super(core, initiator, skipHistory);
-        this.object = object;
-        this.updatedProperties = updatedProperties;
-        this.previousProperties = {};
-        for (const key in updatedProperties) {
-            if (updatedProperties.hasOwnProperty(key)) {
-                this.previousProperties[key] = this.object[key];
-            }
-        }
-    }
-    execute() {
-        for (const key in this.updatedProperties) {
-            if (this.updatedProperties.hasOwnProperty(key)) {
-                this.object[key] = this.updatedProperties[key];
-            }
-        }
-        this.object.onExecuteUpdateCommand(this.updatedProperties);
-        this._core.store.state.objectsMap.update(this.object);
-        this._core.updateObjectInDatabase(this.object);
-    }
-    undo() {
-        for (const key in this.previousProperties) {
-            if (this.previousProperties.hasOwnProperty(key)) {
-                this.object[key] = this.previousProperties[key];
-            }
-        }
-        this.object.onUndoUpdateCommand(this.previousProperties);
-        this._core.store.state.objectsMap.update(this.object);
-        this._core.updateObjectInDatabase(this.object);
-    }
-}
-
 // ::- Persistent data structure representing an ordered mapping from
 // strings to values, with some convenient update methods.
 function OrderedMap(content) {
@@ -4988,13 +4923,17 @@ can be lifted. Will not go across
 function liftTarget(range) {
     let parent = range.parent;
     let content = parent.content.cutByIndex(range.startIndex, range.endIndex);
-    for (let depth = range.depth;; --depth) {
+    for (let depth = range.depth, contentBefore = 0, contentAfter = 0;; --depth) {
         let node = range.$from.node(depth);
-        let index = range.$from.index(depth), endIndex = range.$to.indexAfter(depth);
+        let index = range.$from.index(depth) + contentBefore, endIndex = range.$to.indexAfter(depth) - contentAfter;
         if (depth < range.depth && node.canReplace(index, endIndex, content))
             return depth;
         if (depth == 0 || node.type.spec.isolating || !canCut(node, index, endIndex))
             break;
+        if (index)
+            contentBefore = 1;
+        if (endIndex < node.childCount)
+            contentAfter = 1;
     }
     return null;
 }
@@ -5576,7 +5515,7 @@ function replaceRange(tr, from, to, slice) {
     let $from = tr.doc.resolve(from), $to = tr.doc.resolve(to);
     if (fitsTrivially($from, $to, slice))
         return tr.step(new ReplaceStep(from, to, slice));
-    let targetDepths = coveredDepths($from, tr.doc.resolve(to));
+    let targetDepths = coveredDepths($from, $to);
     // Can't replace the whole document, so remove 0 if it's present
     if (targetDepths[targetDepths.length - 1] == 0)
         targetDepths.pop();
@@ -13866,23 +13805,6 @@ Depending on the detected platform, this will hold
 */
 const baseKeymap = mac ? macBaseKeymap : pcBaseKeymap;
 
-class AddObjectCommand extends KritzelBaseCommand {
-    object;
-    constructor(core, initiator, object, skipHistory = false) {
-        super(core, initiator, skipHistory);
-        this.object = object;
-    }
-    execute() {
-        this._core.store.state.objectsMap.insert(this.object);
-        this._core.addObjectToDatabase(this.object);
-    }
-    undo() {
-        this.object.isMounted = false;
-        this._core.store.state.objectsMap.remove(object => object.id === this.object.id);
-        this._core.deleteObjectFromDatabase(this.object.id);
-    }
-}
-
 class KritzelText extends KritzelBaseObject {
     __class__ = 'KritzelText';
     fontFamily = 'Arial';
@@ -13892,7 +13814,6 @@ class KritzelText extends KritzelBaseObject {
     initialHeight = 1;
     scale = 1;
     scaleFactor = 1;
-    isNew = true;
     isDebugInfoVisible = true;
     isEditable = true;
     isEditing = false;
@@ -13976,19 +13897,30 @@ class KritzelText extends KritzelBaseObject {
             }),
             editable: () => false,
             dispatchTransaction: transaction => {
+                // Apply the transaction to get the new state
                 const newState = this.editor.state.apply(transaction);
+                // Update the editor state first
                 this.editor.updateState(newState);
-                this.adjustSizeOnInput();
-                this._core.store.state.objectsMap.update(this);
-                this._core.rerender();
+                // Only update content and adjust size if the document actually changed
+                // AND it's not from a remote source (to prevent infinite loops)
+                if (transaction.docChanged) {
+                    this.content = newState.doc.toJSON();
+                    this.adjustSizeOnInput();
+                    if (!transaction.getMeta('fromRemote')) {
+                        // Mark updates as temporary while editing - they'll be consolidated on save
+                        this._core.store.state.objectsMap.update(this, { temporary: true });
+                    }
+                }
             },
         });
     }
     setContent(content) {
         this.content = content;
-        if (this.editor) {
+        if (this.editor && content) {
             const newDoc = this.editor.state.schema.nodeFromJSON(content);
             const tr = this.editor.state.tr.replaceWith(0, this.editor.state.doc.content.size, newDoc.content);
+            // Mark this transaction as coming from remote/external source
+            tr.setMeta('fromRemote', true);
             this.editor.dispatch(tr);
         }
     }
@@ -14004,8 +13936,8 @@ class KritzelText extends KritzelBaseObject {
             if (this.rotation !== 0) {
                 const newTotalWidth = this.totalWidth;
                 const newTotalHeight = this.totalHeight;
-                const deltaWidth = (newTotalWidth - previousTotalWidth) / 2;
-                const deltaHeight = (newTotalHeight - previousTotalHeight) / 2;
+                const deltaWidth = (newTotalWidth - previousTotalWidth) / 2 / this.scale;
+                const deltaHeight = (newTotalHeight - previousTotalHeight) / 2 / this.scale;
                 if (deltaWidth !== 0 || deltaHeight !== 0) {
                     const cos = Math.cos(this.rotation);
                     const sin = Math.sin(this.rotation);
@@ -14016,10 +13948,6 @@ class KritzelText extends KritzelBaseObject {
                 }
             }
         }
-        if (this._core) {
-            this._core.store.state.objectsMap.update(this);
-            this._core.rerender();
-        }
     }
     resize(x, y, width, height) {
         if (width <= 1 || height <= 1) {
@@ -14034,6 +13962,7 @@ class KritzelText extends KritzelBaseObject {
         this.height = originalHeight * this.scaleFactor;
         this.translateX = x;
         this.translateY = y;
+        this._core.store.state.objectsMap.update(this);
     }
     focus(coords) {
         if (this.editor) {
@@ -14055,20 +13984,22 @@ class KritzelText extends KritzelBaseObject {
         KritzelKeyboardHelper.disableInteractiveWidget();
         this.uneditedObject = this.clone();
         this._core.store.setState('activeTool', KritzelToolRegistry.getTool('text'));
-        this._core.store.state.activeText = this;
         if (this.editor) {
             this.editor.setProps({ editable: () => true });
         }
         this.isEditing = true;
-        if (event) {
-            this.focus({ x: event.clientX, y: event.clientY });
-        }
-        else {
-            this.focus();
-        }
         this._core.rerender();
-        requestAnimationFrame(() => this.adjustSizeOnInput());
-        KritzelKeyboardHelper.enableInteractiveWidget();
+        requestAnimationFrame(() => {
+            this.adjustSizeOnInput();
+            // Focus after the DOM has been updated
+            if (event) {
+                this.focus({ x: event.clientX, y: event.clientY });
+            }
+            else {
+                this.focus();
+            }
+            KritzelKeyboardHelper.enableInteractiveWidget();
+        });
     }
     save() {
         requestAnimationFrame(() => this.adjustSizeOnInput());
@@ -14076,15 +14007,10 @@ class KritzelText extends KritzelBaseObject {
         this.editor.setProps({ editable: () => false });
         this.editor.dom.blur();
         this.isEditing = false;
-        let saveCommand;
-        if (this.isNew) {
-            this.isNew = false;
-            saveCommand = new AddObjectCommand(this._core, this, this);
-        }
-        else {
-            saveCommand = new UpdateObjectCommand(this._core, this, this.uneditedObject, { ...this });
-        }
-        this._core.commandManager.executeCommand(saveCommand);
+        // Consolidate all temporary keystrokes into a single undo item
+        this._core.store.state.objectsMap.consolidateTemporaryItems();
+        // Final update with normal origin
+        this._core.store.state.objectsMap.update(this);
     }
     handlePointerDown(event) {
         if (!this.isEditing) {
@@ -14122,18 +14048,10 @@ class KritzelText extends KritzelBaseObject {
     }
     deserialize(object) {
         super.deserialize(object);
-        this.setContent(object.content);
-        return this;
-    }
-    onExecuteUpdateCommand(updatedProperties) {
-        if ('content' in updatedProperties) {
-            this.setContent(updatedProperties.content);
-        }
-    }
-    onUndoUpdateCommand(previousProperties) {
-        if ('content' in previousProperties && this.editor) {
-            this.setContent(previousProperties.content);
+        if (object.content) {
+            this.setContent(object.content);
         }
+        return this;
     }
 }
 
@@ -14174,6 +14092,7 @@ class KritzelPath extends KritzelBaseObject {
     options;
     isVisible = true;
     isDebugInfoVisible = true;
+    isCompleted = false;
     _adjustedPoints = null;
     get viewBox() {
         return `${this.x} ${this.y} ${this.width} ${this.height}`;
@@ -14224,10 +14143,12 @@ class KritzelPath extends KritzelBaseObject {
         this.translateX = x;
         this.translateY = y;
         this._adjustedPoints = null;
+        this._core.store.state.objectsMap.update(this);
     }
     rotate(value) {
         this.rotation = value;
         this._adjustedPoints = null;
+        this._core.store.state.objectsMap.update(this);
     }
     move(startX, startY, endX, endY) {
         const deltaX = (startX - endX) / this._core.store.state.scale;
@@ -14235,6 +14156,7 @@ class KritzelPath extends KritzelBaseObject {
         this.translateX += deltaX;
         this.translateY += deltaY;
         this._adjustedPoints = null;
+        this._core.store.state.objectsMap.update(this);
     }
     hitTest(x, y) {
         const halfStroke = this.strokeWidth / this.scale / 2;
@@ -14532,7 +14454,7 @@ class KritzelBrushTool extends KritzelBaseTool {
                 this._core.store.state.isDrawing = true;
                 const x = event.clientX - this._core.store.offsetX;
                 const y = event.clientY - this._core.store.offsetY;
-                this._core.store.state.currentPath = KritzelPath.create(this._core, {
+                const path = KritzelPath.create(this._core, {
                     points: [[x, y]],
                     translateX: -this._core.store.state.translateX,
                     translateY: -this._core.store.state.translateY,
@@ -14540,6 +14462,8 @@ class KritzelBrushTool extends KritzelBaseTool {
                     fill: this.color,
                     strokeWidth: this.size,
                 });
+                path.isCompleted = false;
+                this._core.store.state.objectsMap.insert(path);
             }
         }
         if (event.pointerType === 'touch') {
@@ -14548,7 +14472,7 @@ class KritzelBrushTool extends KritzelBaseTool {
                 const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
                 const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
                 this._core.store.state.isDrawing = true;
-                this._core.store.state.currentPath = KritzelPath.create(this._core, {
+                const path = KritzelPath.create(this._core, {
                     points: [[x, y]],
                     translateX: -this._core.store.state.translateX,
                     translateY: -this._core.store.state.translateY,
@@ -14556,7 +14480,8 @@ class KritzelBrushTool extends KritzelBaseTool {
                     fill: this.color,
                     strokeWidth: this.size,
                 });
-                this._core.rerender();
+                path.isCompleted = false;
+                this._core.store.state.objectsMap.insert(path);
             }
         }
     }
@@ -14566,33 +14491,45 @@ class KritzelBrushTool extends KritzelBaseTool {
         }
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isDrawing) {
-                const x = event.clientX - this._core.store.offsetX;
-                const y = event.clientY - this._core.store.offsetY;
-                this._core.store.state.currentPath = KritzelPath.create(this._core, {
-                    points: [...this._core.store.state.currentPath.points, [x, y]],
-                    translateX: -this._core.store.state.translateX,
-                    translateY: -this._core.store.state.translateY,
-                    scale: this._core.store.state.scale,
-                    fill: this.color,
-                    strokeWidth: this.size,
-                });
-                this._core.rerender();
+                const currentPath = this._core.store.currentPath;
+                if (currentPath) {
+                    const x = event.clientX - this._core.store.offsetX;
+                    const y = event.clientY - this._core.store.offsetY;
+                    const updatedPath = KritzelPath.create(this._core, {
+                        points: [...currentPath.points, [x, y]],
+                        translateX: -this._core.store.state.translateX,
+                        translateY: -this._core.store.state.translateY,
+                        scale: this._core.store.state.scale,
+                        fill: this.color,
+                        strokeWidth: this.size,
+                    });
+                    updatedPath.id = currentPath.id;
+                    updatedPath.workspaceId = currentPath.workspaceId;
+                    updatedPath.isCompleted = false;
+                    this._core.store.state.objectsMap.update(updatedPath);
+                }
             }
         }
         if (event.pointerType === 'touch') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 1) {
-                const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
-                const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
-                this._core.store.state.currentPath = KritzelPath.create(this._core, {
-                    points: [...this._core.store.state.currentPath.points, [x, y]],
-                    translateX: -this._core.store.state.translateX,
-                    translateY: -this._core.store.state.translateY,
-                    scale: this._core.store.state.scale,
-                    fill: this.color,
-                    strokeWidth: this.size,
-                });
-                this._core.rerender();
+                const currentPath = this._core.store.currentPath;
+                if (currentPath) {
+                    const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
+                    const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
+                    const updatedPath = KritzelPath.create(this._core, {
+                        points: [...currentPath.points, [x, y]],
+                        translateX: -this._core.store.state.translateX,
+                        translateY: -this._core.store.state.translateY,
+                        scale: this._core.store.state.scale,
+                        fill: this.color,
+                        strokeWidth: this.size,
+                    });
+                    updatedPath.id = currentPath.id;
+                    updatedPath.workspaceId = currentPath.workspaceId;
+                    updatedPath.isCompleted = false;
+                    this._core.store.state.objectsMap.update(updatedPath);
+                }
             }
         }
     }
@@ -14603,26 +14540,23 @@ class KritzelBrushTool extends KritzelBaseTool {
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isDrawing) {
                 this._core.store.state.isDrawing = false;
-                if (this._core.store.state.currentPath) {
-                    const currentPath = this._core.store.state.currentPath;
+                const currentPath = this._core.store.currentPath;
+                if (currentPath) {
+                    currentPath.isCompleted = true;
                     currentPath.zIndex = this._core.store.currentZIndex;
-                    this._core.store.state.currentPath = currentPath;
-                    this._core.commandManager.executeCommand(new AddObjectCommand(this._core, this, this._core.store.state.currentPath));
+                    this._core.store.state.objectsMap.update(currentPath);
                 }
-                this._core.store.state.currentPath = undefined;
             }
         }
         if (event.pointerType === 'touch') {
             if (this._core.store.state.isDrawing) {
                 this._core.store.state.isDrawing = false;
-                if (this._core.store.state.currentPath) {
-                    const currentPath = this._core.store.state.currentPath;
+                const currentPath = this._core.store.currentPath;
+                if (currentPath) {
+                    currentPath.isCompleted = true;
                     currentPath.zIndex = this._core.store.currentZIndex;
-                    this._core.store.state.currentPath = currentPath;
-                    this._core.commandManager.executeCommand(new AddObjectCommand(this._core, this, currentPath));
+                    this._core.store.state.objectsMap.update(currentPath);
                 }
-                this._core.store.state.currentPath = undefined;
-                this._core.rerender();
             }
         }
     }
@@ -14660,18 +14594,17 @@ class KritzelTextTool extends KritzelBaseTool {
             const path = event.composedPath().slice(1);
             const objectElement = path.find(element => element.classList && element.classList.contains('object'));
             const object = this._core.findObjectById(objectElement?.id);
-            if (this._core.store.state.activeText === null && object instanceof KritzelText) {
-                this._core.store.state.activeText = object;
+            const activeText = this._core.store.activeText;
+            if (activeText === null && object instanceof KritzelText) {
                 object.edit(event);
                 return;
             }
-            if (this._core.store.state.activeText !== null && object instanceof KritzelText) {
-                this._core.store.state.activeText.save();
-                this._core.store.state.activeText = object;
+            if (activeText !== null && object instanceof KritzelText) {
+                activeText.save();
                 object.edit(event);
                 return;
             }
-            if (this._core.store.state.activeText !== null && object instanceof KritzelText === false) {
+            if (activeText !== null && object instanceof KritzelText === false) {
                 this._core.resetActiveText();
                 this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
                 return;
@@ -14682,12 +14615,10 @@ class KritzelTextTool extends KritzelBaseTool {
             const clientX = event.clientX - this._core.store.offsetX;
             const clientY = event.clientY - this._core.store.offsetY;
             const text = KritzelText.create(this._core, this.fontSize, this.fontFamily);
-            text.isNew = true;
             text.fontColor = this.fontColor;
             text.translateX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
             text.translateY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
             text.zIndex = this._core.store.currentZIndex;
-            this._core.store.state.activeText = text;
             this._core.store.state.objectsMap.insert(text);
             this._core.rerender();
             requestAnimationFrame(() => text.edit(event));
@@ -14697,18 +14628,17 @@ class KritzelTextTool extends KritzelBaseTool {
             const path = event.composedPath().slice(1);
             const objectElement = path.find(element => element.classList && element.classList.contains('object'));
             const object = this._core.findObjectById(objectElement?.id);
-            if (this._core.store.state.activeText === null && object instanceof KritzelText) {
-                this._core.store.state.activeText = object;
+            const activeText = this._core.store.activeText;
+            if (activeText === null && object instanceof KritzelText) {
                 object.edit(event);
                 return;
             }
-            if (this._core.store.state.activeText !== null && object instanceof KritzelText) {
-                this._core.store.state.activeText.save();
-                this._core.store.state.activeText = object;
+            if (activeText !== null && object instanceof KritzelText) {
+                activeText.save();
                 object.edit(event);
                 return;
             }
-            if (this._core.store.state.activeText !== null && object instanceof KritzelText === false) {
+            if (activeText !== null && object instanceof KritzelText === false) {
                 this._core.resetActiveText();
                 this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
                 return;
@@ -14720,12 +14650,10 @@ class KritzelTextTool extends KritzelBaseTool {
             const clientX = Math.round(activePointers[0].clientX - this._core.store.offsetX);
             const clientY = Math.round(activePointers[0].clientY - this._core.store.offsetY);
             const text = KritzelText.create(this._core, this.fontSize, this.fontFamily);
-            text.isNew = true;
             text.fontColor = this.fontColor;
             text.translateX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
             text.translateY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
             text.zIndex = this._core.store.currentZIndex;
-            this._core.store.state.activeText = text;
             this._core.store.state.objectsMap.insert(text);
             this._core.rerender();
         }
@@ -14735,16 +14663,16 @@ class KritzelTextTool extends KritzelBaseTool {
             event.preventDefault();
         }
         if (event.pointerType === 'mouse') {
-            this._core.store.state.activeText?.edit(event);
+            this._core.store.activeText?.edit(event);
         }
         if (event.pointerType === 'touch') {
-            this._core.store.state.activeText?.edit(event);
+            this._core.store.activeText?.edit(event);
             KritzelKeyboardHelper.enableInteractiveWidget();
         }
     }
 }
 
-export { AddObjectCommand as A, KritzelText as K, UpdateObjectCommand as U, KritzelPath as a, KritzelBrushTool as b, KritzelTextTool as c, KritzelKeyboardHelper as d, KritzelBaseObject as e, KritzelBaseCommand as f, KritzelBaseTool as g, KritzelEventHelper as h, KritzelToolRegistry as i };
-//# sourceMappingURL=p-CoFmi-t6.js.map
+export { KritzelText as K, KritzelPath as a, KritzelBrushTool as b, KritzelTextTool as c, KritzelKeyboardHelper as d, KritzelBaseObject as e, KritzelBaseTool as f, KritzelEventHelper as g, KritzelToolRegistry as h };
+//# sourceMappingURL=p-COGwCbe1.js.map
 
-//# sourceMappingURL=p-CoFmi-t6.js.map
+//# sourceMappingURL=p-COGwCbe1.js.map