kritzel-stencil 0.0.169 → 0.0.170

package/dist/esm/{default-line-tool.config-PvsWHpO2.js → default-line-tool.config-CuBm2vpW.js}

@@ -14766,7 +14766,8 @@ class KritzelLine extends KritzelBaseObject {
         this._core.store.state.objects.update(this);
     }
     hitTest(x, y) {
-        const strokeWidth = Math.max(this.strokeWidth, 10);
+        const minHitThreshold = 20;
+        const strokeWidth = Math.max(this.strokeWidth, minHitThreshold);
         const halfStroke = strokeWidth / this.scale / 2;
         if (this._adjustedPoints === null) {
             this._adjustedPoints = this.computeAdjustedPoints();
@@ -15199,6 +15200,399 @@ class KritzelLine extends KritzelBaseObject {
     }
 }
 
+/**
+ * KritzelGroup represents a permanent grouping of objects that act as a single unit.
+ *
+ * Unlike KritzelSelectionGroup (which is ephemeral and used for temporary multi-selection),
+ * KritzelGroup is persisted and saved with the workspace. Grouped objects move, resize,
+ * rotate, copy, and delete together as one unit.
+ *
+ * Key features:
+ * - Supports nested groups (groups can contain other groups)
+ * - Clicking any child selects the entire group
+ * - Can be ungrouped to restore children to top-level objects
+ */
+class KritzelGroup extends KritzelBaseObject {
+    __class__ = 'KritzelGroup';
+    /**
+     * IDs of child objects within this group.
+     * Children can be any KritzelBaseObject, including other KritzelGroups for nesting.
+     */
+    childIds = [];
+    /**
+     * Snapshots of child states for transformation operations (resize, rotate).
+     * Similar pattern to KritzelSelectionGroup.
+     */
+    unchangedChildSnapshots = new Map();
+    snapshotRotation = 0;
+    snapshotTranslateX = 0;
+    snapshotTranslateY = 0;
+    snapshotTotalWidth = 0;
+    snapshotTotalHeight = 0;
+    snapshotScale = 1;
+    /**
+     * Retrieves the actual child objects from the store by their IDs.
+     */
+    get children() {
+        return this.childIds
+            .map(id => {
+            const found = this._core.store.state.objects.filter(obj => obj.id === id);
+            return found.length > 0 ? found[0] : null;
+        })
+            .filter((obj) => obj !== null);
+    }
+    /**
+     * Returns the number of children in this group.
+     */
+    get length() {
+        return this.childIds.length;
+    }
+    /**
+     * Creates a new empty KritzelGroup.
+     */
+    static create(core) {
+        const group = new KritzelGroup();
+        group._core = core;
+        group.id = group.generateId();
+        group.workspaceId = core.store.state.activeWorkspace.id;
+        group.scale = core.store.state.scale;
+        group.zIndex = core.store.currentZIndex;
+        return group;
+    }
+    /**
+     * Creates a KritzelGroup from an array of objects.
+     * The objects are added as children and their bounding box is calculated.
+     */
+    static createFromObjects(core, objects) {
+        const group = KritzelGroup.create(core);
+        // Add all objects as children
+        objects.forEach(obj => {
+            group.childIds.push(obj.id);
+        });
+        // Calculate bounding box from children
+        group.refreshBoundingBox();
+        group.captureChildSnapshots();
+        return group;
+    }
+    /**
+     * Finds the parent KritzelGroup that contains the given object as a child.
+     * Returns null if the object is not a child of any group.
+     */
+    static findParentGroup(core, objectId) {
+        const allGroups = core.store.state.objects
+            .filter(obj => obj.__class__ === 'KritzelGroup');
+        for (const group of allGroups) {
+            if (group.childIds.includes(objectId)) {
+                return group;
+            }
+        }
+        return null;
+    }
+    /**
+     * Adds a child object to this group.
+     */
+    addChild(object) {
+        if (!this.childIds.includes(object.id)) {
+            this.childIds.push(object.id);
+            this.refreshBoundingBox();
+            this.captureChildSnapshots();
+        }
+    }
+    /**
+     * Removes a child object from this group.
+     */
+    removeChild(objectId) {
+        const index = this.childIds.indexOf(objectId);
+        if (index !== -1) {
+            this.childIds.splice(index, 1);
+            this.refreshBoundingBox();
+            this.captureChildSnapshots();
+        }
+    }
+    /**
+     * Ungroups this group, returning all children to top-level objects.
+     * The group itself should be removed after calling this.
+     */
+    ungroup() {
+        return this.children;
+    }
+    /**
+     * Finalizes the group after children have been positioned (e.g., after paste).
+     * Refreshes the bounding box and captures child snapshots.
+     */
+    finalize() {
+        this.refreshBoundingBox();
+        this.captureChildSnapshots();
+    }
+    /**
+     * Recalculates the group's bounding box based on its children.
+     */
+    refreshBoundingBox() {
+        if (this.children.length === 0) {
+            this.width = 0;
+            this.height = 0;
+            this.translateX = 0;
+            this.translateY = 0;
+            return;
+        }
+        if (this.children.length === 1) {
+            // Single child: inherit its bounding box
+            const child = this.children[0];
+            this.translateX = child.boundingBox.x;
+            this.translateY = child.boundingBox.y;
+            this.width = child.boundingBox.width * this.scale;
+            this.height = child.boundingBox.height * this.scale;
+            return;
+        }
+        // Multiple children: calculate encompassing bounding box
+        const rotation = this.rotation;
+        const cos = Math.cos(-rotation);
+        const sin = Math.sin(-rotation);
+        let minX = Infinity;
+        let maxX = -Infinity;
+        let minY = Infinity;
+        let maxY = -Infinity;
+        this.children.forEach(child => {
+            const polygon = child.rotatedPolygon;
+            const corners = [polygon.topLeft, polygon.topRight, polygon.bottomRight, polygon.bottomLeft];
+            corners.forEach(corner => {
+                // Rotate corner into local space (aligned with group rotation)
+                const rx = corner.x * cos - corner.y * sin;
+                const ry = corner.x * sin + corner.y * cos;
+                if (rx < minX)
+                    minX = rx;
+                if (rx > maxX)
+                    maxX = rx;
+                if (ry < minY)
+                    minY = ry;
+                if (ry > maxY)
+                    maxY = ry;
+            });
+        });
+        // Dimensions in world units (unrotated)
+        const worldWidth = maxX - minX;
+        const worldHeight = maxY - minY;
+        this.width = (worldWidth - this.padding) * this.scale;
+        this.height = (worldHeight - this.padding) * this.scale;
+        // Center of the box in rotated space
+        const cRx = (minX + maxX) / 2;
+        const cRy = (minY + maxY) / 2;
+        // Rotate center back to world space
+        const cosR = Math.cos(rotation);
+        const sinR = Math.sin(rotation);
+        const cx = cRx * cosR - cRy * sinR;
+        const cy = cRx * sinR + cRy * cosR;
+        this.translateX = cx - (this.width / this.scale + 2 * this.padding) / 2;
+        this.translateY = cy - (this.height / this.scale + 2 * this.padding) / 2;
+    }
+    /**
+     * Captures snapshots of child states for transformation operations.
+     */
+    captureChildSnapshots() {
+        this.unchangedChildSnapshots.clear();
+        this.snapshotRotation = this.rotation;
+        this.snapshotTranslateX = this.translateX;
+        this.snapshotTranslateY = this.translateY;
+        this.snapshotTotalWidth = this.totalWidth;
+        this.snapshotTotalHeight = this.totalHeight;
+        this.snapshotScale = this.scale || 1;
+        this.children.forEach(child => {
+            this.unchangedChildSnapshots.set(child.id, {
+                id: child.id,
+                translateX: child.translateX,
+                translateY: child.translateY,
+                rotation: child.rotation,
+                width: child.width,
+                height: child.height,
+                totalWidth: child.totalWidth,
+                totalHeight: child.totalHeight,
+                scale: child.scale,
+            });
+        });
+    }
+    // ─────────────────────────────────────────────────────────────────────────────
+    // TRANSFORMATION METHODS
+    // ─────────────────────────────────────────────────────────────────────────────
+    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.objects.transaction(() => {
+            this._core.store.state.objects.update(this);
+            this.children.forEach(child => {
+                child.move(startX, startY, endX, endY);
+                // Update any lines anchored to this child
+                this._core.anchorManager.updateAnchorsForObject(child.id);
+            });
+        });
+        // Update snapshots
+        this.unchangedChildSnapshots.forEach(snapshot => {
+            snapshot.translateX += deltaX;
+            snapshot.translateY += deltaY;
+        });
+    }
+    resize(x, y, width, height) {
+        const widthScaleFactor = width / this.width;
+        const heightScaleFactor = height / this.height;
+        // Calculate old center
+        const oldCenterX = this.translateX + this.totalWidth / 2 / this.scale;
+        const oldCenterY = this.translateY + this.totalHeight / 2 / this.scale;
+        // Calculate new center
+        const newTotalWidth = width + this.padding * 2;
+        const newTotalHeight = height + this.padding * 2;
+        const newCenterX = x + newTotalWidth / 2 / this.scale;
+        const newCenterY = y + newTotalHeight / 2 / this.scale;
+        const rotation = this.rotation;
+        const cos = Math.cos(-rotation);
+        const sin = Math.sin(-rotation);
+        const cosR = Math.cos(rotation);
+        const sinR = Math.sin(rotation);
+        this._core.store.state.objects.transaction(() => {
+            this.children.forEach(child => {
+                // Calculate child center
+                const childCenterX = child.translateX + child.totalWidth / 2 / child.scale;
+                const childCenterY = child.translateY + child.totalHeight / 2 / child.scale;
+                // Vector from old group center to child center
+                const dx = childCenterX - oldCenterX;
+                const dy = childCenterY - oldCenterY;
+                // Rotate to local space
+                const localX = dx * cos - dy * sin;
+                const localY = dx * sin + dy * cos;
+                // Scale in local space
+                const scaledLocalX = localX * widthScaleFactor;
+                const scaledLocalY = localY * heightScaleFactor;
+                // Rotate back to world space
+                const rotatedX = scaledLocalX * cosR - scaledLocalY * sinR;
+                const rotatedY = scaledLocalX * sinR + scaledLocalY * cosR;
+                // New child center
+                const newChildCenterX = newCenterX + rotatedX;
+                const newChildCenterY = newCenterY + rotatedY;
+                // Calculate relative rotation for scaling
+                const relativeRotation = child.rotation - rotation;
+                const cosRel = Math.cos(relativeRotation);
+                const sinRel = Math.sin(relativeRotation);
+                const newChildWidthScale = Math.sqrt(Math.pow(widthScaleFactor * cosRel, 2) + Math.pow(heightScaleFactor * sinRel, 2));
+                const newChildHeightScale = Math.sqrt(Math.pow(widthScaleFactor * sinRel, 2) + Math.pow(heightScaleFactor * cosRel, 2));
+                const updatedWidth = child.width * newChildWidthScale;
+                const updatedHeight = child.height * newChildHeightScale;
+                const updatedTotalWidth = updatedWidth + child.padding * 2;
+                const updatedTotalHeight = updatedHeight + child.padding * 2;
+                const updatedX = newChildCenterX - updatedTotalWidth / 2 / child.scale;
+                const updatedY = newChildCenterY - updatedTotalHeight / 2 / child.scale;
+                child.resize(updatedX, updatedY, updatedWidth, updatedHeight);
+                // Update anchored lines
+                this._core.anchorManager.updateAnchorsForObject(child.id);
+            });
+            this.refreshBoundingBox();
+            this.captureChildSnapshots();
+            this._core.store.state.objects.update(this);
+        });
+    }
+    rotate(value) {
+        this.rotation = value;
+        const centerX = this.translateX + this.totalWidth / 2 / this.scale;
+        const centerY = this.translateY + this.totalHeight / 2 / this.scale;
+        const angle = value - this.snapshotRotation;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        this._core.store.state.objects.transaction(() => {
+            this._core.store.state.objects.update(this);
+            this.children.forEach(child => {
+                const unchangedSnapshot = this.unchangedChildSnapshots.get(child.id);
+                if (!unchangedSnapshot)
+                    return;
+                const offsetX = this.getOffsetXToCenterFromSnapshot(unchangedSnapshot);
+                const offsetY = this.getOffsetYToCenterFromSnapshot(unchangedSnapshot);
+                const rotatedX = cos * offsetX - sin * offsetY;
+                const rotatedY = sin * offsetX + cos * offsetY;
+                child.translateX = centerX + rotatedX - child.totalWidth / 2 / child.scale;
+                child.translateY = centerY + rotatedY - child.totalHeight / 2 / child.scale;
+                child.rotate(this.children.length === 1 ? value : unchangedSnapshot.rotation + angle);
+            });
+        });
+    }
+    getOffsetXToCenterFromSnapshot(snapshot) {
+        const childCenterX = snapshot.translateX + snapshot.totalWidth / snapshot.scale / 2;
+        const groupScale = this.snapshotScale || this.scale || 1;
+        const groupCenterX = this.snapshotTranslateX + this.snapshotTotalWidth / groupScale / 2;
+        return childCenterX - groupCenterX;
+    }
+    getOffsetYToCenterFromSnapshot(snapshot) {
+        const childCenterY = snapshot.translateY + snapshot.totalHeight / snapshot.scale / 2;
+        const groupScale = this.snapshotScale || this.scale || 1;
+        const groupCenterY = this.snapshotTranslateY + this.snapshotTotalHeight / groupScale / 2;
+        return childCenterY - groupCenterY;
+    }
+    // ─────────────────────────────────────────────────────────────────────────────
+    // HIT TESTING
+    // ─────────────────────────────────────────────────────────────────────────────
+    hitTest(x, y) {
+        // Check if point is inside any child
+        return this.children.some(child => child.hitTest(x, y));
+    }
+    hitTestPolygon(polygon) {
+        // Check if polygon intersects with any child
+        return this.children.some(child => child.hitTestPolygon(polygon));
+    }
+    // ─────────────────────────────────────────────────────────────────────────────
+    // COPY & SERIALIZATION
+    // ─────────────────────────────────────────────────────────────────────────────
+    copy() {
+        const copiedGroup = KritzelGroup.create(this._core);
+        // Deep copy all children but DON'T add to store yet
+        // Store the copied children temporarily for paste() to handle
+        const copiedChildren = [];
+        this.children
+            .sort((a, b) => a.zIndex - b.zIndex)
+            .forEach(child => {
+            const copiedChild = child.copy();
+            copiedChildren.push(copiedChild);
+            copiedGroup.childIds.push(copiedChild.id);
+        });
+        // Store copied children on the group for paste() to access
+        copiedGroup._pendingChildren = copiedChildren;
+        // Copy group properties
+        copiedGroup.rotation = this.rotation;
+        copiedGroup.translateX = this.translateX;
+        copiedGroup.translateY = this.translateY;
+        copiedGroup.width = this.width;
+        copiedGroup.height = this.height;
+        return copiedGroup;
+    }
+    serialize() {
+        const { _core, _elementRef, element, totalWidth, totalHeight, unchangedChildSnapshots, ...remainingProps } = this;
+        const clonedProps = structuredClone(remainingProps);
+        // Convert Map to plain object for serialization
+        clonedProps.unchangedChildSnapshots = Object.fromEntries(this.unchangedChildSnapshots);
+        return clonedProps;
+    }
+    deserialize(object) {
+        super.deserialize(object);
+        // Restore the Map from serialized object
+        if (object.unchangedChildSnapshots) {
+            this.unchangedChildSnapshots = new Map(Object.entries(object.unchangedChildSnapshots));
+        }
+        return this;
+    }
+    update() {
+        this._core.store.state.objects.update(this);
+    }
+    /**
+     * Updates the workspace ID for this group and all its children.
+     */
+    updateWorkspaceId(workspaceId) {
+        this.workspaceId = workspaceId;
+        this.children.forEach(child => {
+            child.workspaceId = workspaceId;
+            // Recursively update nested groups
+            if (child instanceof KritzelGroup) {
+                child.updateWorkspaceId(workspaceId);
+            }
+        });
+    }
+}
+
 var KritzelMouseButton;
 (function (KritzelMouseButton) {
     KritzelMouseButton[KritzelMouseButton["Left"] = 0] = "Left";
@@ -15219,11 +15613,19 @@ class KritzelEventHelper {
         return !!contextMenu;
     }
     static onLongPress(event, onSuccess, onCancel) {
-        const longPressTimeout = 400;
-        const moveThreshold = 10;
+        if (event.pointerType !== 'touch') {
+            onCancel?.();
+            return () => { };
+        }
         const startX = event.clientX;
         const startY = event.clientY;
         const target = event.target;
+        if (!target) {
+            onCancel?.();
+            return () => { };
+        }
+        const longPressTimeout = 400;
+        const moveThreshold = 10;
         const timer = setTimeout(() => {
             removeListeners();
             onSuccess(event);
@@ -15481,6 +15883,21 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         this.captureUnchangedSnapshots();
         this.refreshObjectDimensions();
     }
+    /**
+     * Prepares the selection group and its children for a transform interaction (rotate/resize).
+     * Ensures snapshot state is aligned with the current visual state.
+     */
+    beginTransform() {
+        // Keep the selection group's bounding box current before snapshotting.
+        this.refreshObjectDimensions();
+        this.captureUnchangedSnapshots();
+        // Groups need their own child snapshots aligned with the current transform.
+        this.objects.forEach(obj => {
+            if (obj instanceof KritzelGroup) {
+                obj.finalize();
+            }
+        });
+    }
     deselectAllChildren() {
         this.objects.forEach(obj => (obj.isSelected = false));
     }
@@ -15741,9 +16158,9 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         return objCenterY - groupCenterY;
     }
     hitTest(x, y) {
-        const containsOnlyLines = this.objects.every(obj => obj.__class__ === 'KritzelLine');
-        if (containsOnlyLines) {
-            return this.objects.some(obj => obj.hitTest(x, y));
+        const isSingleLine = this.objects.length === 1 && this.objects[0].__class__ === 'KritzelLine';
+        if (isSingleLine) {
+            return this.objects[0].hitTest(x, y);
         }
         const polygon = this.rotatedPolygon;
         const polyPoints = [polygon.topLeft, polygon.topRight, polygon.bottomRight, polygon.bottomLeft];
@@ -16246,6 +16663,8 @@ KritzelIconRegistry.registerIcons({
     'ellipsis-vertical': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-vertical-icon lucide-ellipsis-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>',
     'x': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
     'check': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>',
+    'group': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-group-icon lucide-group"><path d="M3 7V5c0-1.1.9-2 2-2h2"/><path d="M17 3h2c1.1 0 2 .9 2 2v2"/><path d="M21 17v2c0 1.1-.9 2-2 2h-2"/><path d="M7 21H5c-1.1 0-2-.9-2-2v-2"/><rect width="7" height="5" x="7" y="7" rx="1"/><rect width="7" height="5" x="10" y="12" rx="1"/></svg>',
+    'ungroup': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ungroup-icon lucide-ungroup"><rect width="8" height="6" x="5" y="4" rx="1"/><rect width="8" height="6" x="11" y="14" rx="1"/></svg>',
     'move-vertical': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-move-vertical-icon lucide-move-vertical" version="1.1" id="svg3"> <defs id="defs3" /> <path d="M12 2v20" id="path1" /> <path style="fill:#ffffff;stroke-width:2.5;stroke-dasharray:none;stroke-linejoin:round;paint-order:stroke fill markers" d="m 11.735575,22.661865 c -0.09259,-0.02798 -0.204674,-0.07661 -0.249076,-0.108068 -0.04441,-0.03147 -1.167275,-0.979853 -2.4952713,-2.10755 -1.8557024,-1.57581 -2.4300904,-2.079639 -2.4817336,-2.17687 -0.086514,-0.162885 -0.089504,-0.422449 -0.00664,-0.576334 0.1483053,-0.275409 0.437667,-0.436207 0.7830634,-0.435147 0.3692925,0.0011 0.3517326,-0.01122 2.168748,1.525599 L 11.12348,20.194964 V 11.999996 3.8050256 L 9.4546663,5.2164943 C 7.6376509,6.7533118 7.6552109,6.7409594 7.2859184,6.7420935 6.6681409,6.7439906 6.253658,6.1955854 6.5159903,5.723396 6.5738626,5.6192278 7.1368766,5.1267427 9.0629381,3.4955044 11.738128,1.2298067 11.640395,1.3026868 12.00355,1.3026868 c 0.363154,0 0.265421,-0.07288 2.940611,2.1928176 1.926062,1.6312383 2.489076,2.1237234 2.546948,2.2278916 0.262332,0.4721894 -0.15215,1.0205946 -0.769928,1.0186975 -0.369293,-0.00114 -0.351733,0.011218 -2.168748,-1.5255992 L 12.88362,3.8050256 v 8.1949704 8.194968 l 1.668813,-1.411469 c 1.817015,-1.536817 1.799455,-1.524464 2.168748,-1.525599 0.617772,-0.0019 1.032269,0.546521 0.769928,1.018687 -0.103474,0.18623 -4.919006,4.273935 -5.130582,4.355136 -0.20796,0.07981 -0.425829,0.09033 -0.624952,0.03014 z" id="path4" /> </svg>',
     'hand': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hand-icon lucide-hand" version="1.1" id="svg4"> <defs id="defs4" /> <path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" id="path1" /> <path d="M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" id="path2" /> <path d="M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" id="path3" /> <path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" id="path4" /> <path style="fill:#ffffff;stroke-width:0.0423032" d="M 11.478261,21.222477 C 9.6854059,21.139331 8.3341788,20.647346 7.1297169,19.639159 6.9698298,19.505327 5.949644,18.508708 4.8626374,17.42445 3.0780314,15.644357 2.8775851,15.435367 2.7968392,15.270602 2.5896561,14.847836 2.616354,14.436649 2.8771894,14.033085 c 0.136522,-0.211226 0.3837159,-0.398688 0.6367632,-0.482897 0.1529977,-0.05091 0.2326803,-0.05992 0.4470908,-0.05054 0.2250407,0.0098 0.2876577,0.02439 0.4554568,0.105827 0.1747854,0.08483 0.2933718,0.192702 1.1675186,1.062064 0.7182021,0.714271 1.0062041,0.982633 1.0998825,1.024878 0.1680197,0.07577 0.4756439,0.07817 0.6368269,0.005 0.1370772,-0.06226 0.2976691,-0.220818 0.3691296,-0.364463 0.072561,-0.145855 0.071573,-0.543545 -0.00169,-0.681911 -0.028747,-0.05429 -0.2476439,-0.296131 -0.4864385,-0.537426 l -0.4341716,-0.438718 0.00753,-3.989014 0.00753,-3.9890137 0.089246,-0.1883791 c 0.244787,-0.516692 0.7711718,-0.809716 1.3059705,-0.7269981 0.3973687,0.061462 0.7569953,0.3284904 0.9363122,0.6952277 l 0.093853,0.1919473 0.014101,2.4958872 0.014101,2.4958877 0.067385,0.149123 c 0.1186861,0.262654 0.4140438,0.457222 0.6940724,0.457222 0.2764172,0 0.5690532,-0.187563 0.6965992,-0.446482 l 0.06486,-0.131661 0.0141,-3.4970626 0.0141,-3.4970623 0.08982,-0.1896121 C 11.096301,3.0422103 11.506844,2.7755634 12,2.7755634 c 0.493156,0 0.903699,0.2666469 1.122868,0.7293016 l 0.08982,0.1896121 0.0141,3.2432432 c 0.01405,3.2315947 0.01432,3.2437077 0.07397,3.3726737 0.124721,0.269649 0.355908,0.424566 0.661411,0.443206 0.237954,0.01452 0.429018,-0.0627 0.591626,-0.239109 0.223655,-0.242637 0.208338,-0.06565 0.224113,-2.5896966 l 0.0141,-2.2561693 0.09385,-0.1919473 c 0.179317,-0.3667373 0.538944,-0.6337662 0.936313,-0.6952277 0.609359,-0.09425 1.208067,0.3054956 1.370981,0.9153772 0.03013,0.1127929 0.03773,0.6662436 0.038,2.7657391 3.74e-4,2.9328416 -0.008,2.8034316 0.197044,3.0364016 0.234927,0.266892 0.603828,0.337117 0.920407,0.175213 0.181933,-0.09304 0.329759,-0.261686 0.376309,-0.4293 0.01848,-0.06654 0.02929,-0.683932 0.0295,-1.684364 1.78e-4,-0.8783075 0.01239,-1.6530128 0.02751,-1.745346 0.08579,-0.5238478 0.505382,-0.9420803 1.039546,-1.0361716 0.607538,-0.1070155 1.25615,0.3485846 1.385876,0.973471 0.02211,0.1064847 0.02843,1.1397236 0.02169,3.5455556 -0.0093,3.324725 -0.01078,3.403075 -0.07062,3.770606 -0.126399,0.776213 -0.328814,1.41352 -0.669031,2.106456 -0.36657,0.746612 -0.72118,1.250303 -1.297841,1.843464 -1.185731,1.21966 -2.604527,1.933174 -4.300822,2.162889 -0.38234,0.05178 -2.604621,0.0785 -3.412456,0.04104 z" id="path16" /> </svg>',
     'hand-grab': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hand-grab-icon lucide-hand-grab" version="1.1" id="svg5"> <defs id="defs5" /> <path d="M18 11.5V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1.4" id="path1" /> <path d="M14 10V8a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" id="path2" /> <path d="M10 9.9V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v5" id="path3" /> <path d="M6 14a2 2 0 0 0-2-2a2 2 0 0 0-2 2" id="path4" /> <path d="M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-4a8 8 0 0 1-8-8 2 2 0 1 1 4 0" id="path5" /> <path style="fill:#ffffff;stroke-width:0.0423032" d="M 9.5887192,21.221364 C 8.0526856,21.128375 6.6533474,20.587008 5.4571093,19.622953 5.3019976,19.497947 5.0101058,19.225967 4.8084606,19.018552 4.2300382,18.423579 3.8474097,17.879011 3.4960953,17.150756 3.1017715,16.333345 2.9014937,15.633198 2.8052391,14.735605 c -0.097577,-0.909922 -0.019834,-1.263323 0.3569794,-1.622742 0.753018,-0.718257 1.9463784,-0.256949 2.0619296,0.797066 0.037839,0.345154 0.089701,0.477674 0.2472582,0.631806 0.2464521,0.241095 0.5958008,0.287445 0.9036474,0.119894 0.1478567,-0.08047 0.2303871,-0.16866 0.3266699,-0.349056 0.050118,-0.0939 0.05337,-0.2326 0.066784,-2.848413 L 6.7826087,8.7144536 6.8458627,8.559342 C 6.9736603,8.2459558 7.2463773,7.9734987 7.5581669,7.8477164 c 0.1253804,-0.050581 0.2118709,-0.062705 0.4512338,-0.063254 0.275392,-6.312e-4 0.3094658,0.00564 0.4867271,0.089609 0.264676,0.1253746 0.4771417,0.334346 0.6070085,0.5970252 l 0.1048543,0.212087 0.017338,0.7488899 c 0.019395,0.8377165 0.026343,0.8713745 0.2242006,1.0860245 0.1591067,0.172611 0.3522021,0.249908 0.5883018,0.235502 0.305503,-0.01864 0.53669,-0.173557 0.661411,-0.443206 0.05734,-0.123963 0.0605,-0.181852 0.07486,-1.3703236 0.01626,-1.3456629 0.0141,-1.3267758 0.182667,-1.5938092 0.257891,-0.4085268 0.77099,-0.6442307 1.228943,-0.5645435 0.471012,0.08196 0.850379,0.4102836 0.989676,0.8565175 0.04663,0.149383 0.0514,0.2860903 0.0514,1.4721724 0,0.8344844 0.01108,1.3591794 0.03064,1.4503554 0.04109,0.191585 0.179844,0.390224 0.342505,0.490321 0.27721,0.170587 0.693425,0.126085 0.92529,-0.09893 0.228986,-0.222224 0.234357,-0.25046 0.251582,-1.3227071 l 0.0152,-0.9463484 0.104855,-0.2120434 c 0.129872,-0.2626357 0.342372,-0.471626 0.607008,-0.5969817 0.177262,-0.083967 0.211335,-0.09024 0.486727,-0.089609 0.239363,5.486e-4 0.325854,0.012673 0.451234,0.063254 0.31179,0.1257823 0.584507,0.3982394 0.712304,0.7116256 0.0621,0.1522783 0.06351,0.1824139 0.07736,1.649824 0.01408,1.492435 0.0142,1.494914 0.07947,1.627432 0.0771,0.156535 0.2216,0.291061 0.395058,0.367789 0.09695,0.04289 0.169789,0.05275 0.325757,0.04411 0.230544,-0.01277 0.363779,-0.06826 0.506411,-0.21089 0.177062,-0.177061 0.198302,-0.25307 0.219359,-0.784959 0.02002,-0.505773 0.05012,-0.6549 0.175297,-0.868492 0.498409,-0.850471 1.728484,-0.8041941 2.173478,0.08177 0.131751,0.262312 0.134447,0.313526 0.122615,2.328965 -0.0104,1.771638 -0.01517,1.923481 -0.0714,2.273746 -0.123689,0.770512 -0.327108,1.411813 -0.668163,2.106456 -0.36657,0.746612 -0.72118,1.250303 -1.297841,1.843464 -1.180268,1.214041 -2.600612,1.930754 -4.287083,2.163284 -0.28697,0.03957 -0.685446,0.04782 -2.636536,0.05459 -1.26416,0.0044 -2.4698005,-0.0024 -2.6792012,-0.01507 z" id="path6" /> </svg>',
@@ -16317,6 +16736,8 @@ class KritzelBaseHandler {
     }
 }
 
+/** Threshold in screen pixels for disconnecting anchored lines during drag */
+const ANCHOR_DISCONNECT_THRESHOLD = 30;
 class KritzelMoveHandler extends KritzelBaseHandler {
     dragStartX;
     dragStartY;
@@ -16324,6 +16745,11 @@ class KritzelMoveHandler extends KritzelBaseHandler {
     startY;
     endX;
     endY;
+    /** Initial position when drag started (for calculating total accumulated distance) */
+    initialDragX = 0;
+    initialDragY = 0;
+    /** Set of line IDs that have been disconnected from anchors during this drag */
+    disconnectedLineIds = new Set();
     hasMoved = false;
     trackedPointerId = null;
     constructor(core) {
@@ -16336,6 +16762,9 @@ class KritzelMoveHandler extends KritzelBaseHandler {
         this.startY = 0;
         this.endX = 0;
         this.endY = 0;
+        this.initialDragX = 0;
+        this.initialDragY = 0;
+        this.disconnectedLineIds.clear();
         this.hasMoved = false;
         this.trackedPointerId = null;
     }
@@ -16355,6 +16784,9 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                     this.dragStartY = clientY;
                     this.startX = this.dragStartX;
                     this.startY = this.dragStartY;
+                    this.initialDragX = clientX;
+                    this.initialDragY = clientY;
+                    this.disconnectedLineIds.clear();
                     this.trackedPointerId = event.pointerId;
                 }
                 else {
@@ -16380,6 +16812,9 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                     this.dragStartY = y;
                     this.startX = x;
                     this.startY = y;
+                    this.initialDragX = x;
+                    this.initialDragY = y;
+                    this.disconnectedLineIds.clear();
                     this.trackedPointerId = event.pointerId;
                 }
                 else {
@@ -16403,6 +16838,8 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                 const moveDeltaY = Math.abs(clientY - this.startY);
                 const moveThreshold = 5;
                 if (moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) {
+                    // Check for anchor disconnect threshold on lines
+                    this.checkAndDisconnectAnchors(clientX, clientY);
                     selectionGroup.move(clientX, clientY, this.dragStartX, this.dragStartY);
                     this.dragStartX = clientX;
                     this.dragStartY = clientY;
@@ -16428,6 +16865,8 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                 const moveThreshold = 5;
                 if (moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) {
                     clearTimeout(this._core.store.state.longTouchTimeout);
+                    // Check for anchor disconnect threshold on lines
+                    this.checkAndDisconnectAnchors(x, y);
                     selectionGroup.move(x, y, this.dragStartX, this.dragStartY);
                     this.dragStartX = x;
                     this.dragStartY = y;
@@ -16462,6 +16901,48 @@ class KritzelMoveHandler extends KritzelBaseHandler {
         }
         this.reset();
     }
+    /**
+     * Checks if the total accumulated drag distance exceeds the anchor disconnect threshold.
+     * If so, disconnects all anchors from any KritzelLine objects in the selection group.
+     * This allows anchored lines to be freely moved after dragging beyond the threshold.
+     */
+    checkAndDisconnectAnchors(currentX, currentY) {
+        const totalDeltaX = currentX - this.initialDragX;
+        const totalDeltaY = currentY - this.initialDragY;
+        const totalDistance = Math.sqrt(totalDeltaX * totalDeltaX + totalDeltaY * totalDeltaY);
+        if (totalDistance < ANCHOR_DISCONNECT_THRESHOLD) {
+            return;
+        }
+        const selectionGroup = this._core.store.selectionGroup;
+        if (!selectionGroup) {
+            return;
+        }
+        // Find and disconnect anchors from all anchored lines in the selection
+        for (const obj of selectionGroup.objects) {
+            // Skip if already disconnected in this drag session
+            if (this.disconnectedLineIds.has(obj.id)) {
+                continue;
+            }
+            // Check if this is a line with anchors
+            if (obj instanceof KritzelLine) {
+                const line = obj;
+                const hasAnchors = line.startAnchor || line.endAnchor;
+                if (hasAnchors) {
+                    // Disconnect both anchors
+                    if (line.startAnchor) {
+                        this._core.anchorManager.removeAnchor(line.id, 'start');
+                    }
+                    if (line.endAnchor) {
+                        this._core.anchorManager.removeAnchor(line.id, 'end');
+                    }
+                    // Mark as disconnected so we don't try again
+                    this.disconnectedLineIds.add(line.id);
+                    // Update the line to persist the change
+                    this._core.store.state.objects.update(line);
+                }
+            }
+        }
+    }
 }
 
 var KritzelHandleType;
@@ -16693,6 +17174,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
             if (KritzelEventHelper.isLeftClick(event)) {
                 const selectionGroup = this._core.store.selectionGroup;
                 if (selectionGroup && this._core.store.state.isRotationHandleSelected) {
+                    selectionGroup.beginTransform();
                     const clientX = event.clientX - this._core.store.offsetX;
                     const clientY = event.clientY - this._core.store.offsetY;
                     this._core.store.state.isRotating = true;
@@ -16716,6 +17198,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
             if (activePointers.length === 1) {
                 const selectionGroup = this._core.store.selectionGroup;
                 if (selectionGroup && this._core.store.state.isRotationHandleSelected) {
+                    selectionGroup.beginTransform();
                     const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
                     const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
                     this._core.store.state.isRotating = true;
@@ -17026,11 +17509,14 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (!object) {
             return;
         }
-        object.isSelected = false;
+        // Resolve child objects to their parent groups
+        const parentGroup = KritzelGroup.findParentGroup(this._core, object.id);
+        const objectToSelect = parentGroup || object;
+        objectToSelect.isSelected = false;
         const selectionGroup = KritzelSelectionGroup.create(this._core);
-        selectionGroup.addOrRemove(object);
+        selectionGroup.addOrRemove(objectToSelect);
         selectionGroup.isSelected = true;
-        selectionGroup.rotation = object.rotation;
+        selectionGroup.rotation = objectToSelect.rotation;
         this._core.addSelectionGroup(selectionGroup);
         this._core.rerender();
     }
@@ -17039,10 +17525,24 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (selectedObjects.length === 0) {
             return;
         }
+        // Resolve child objects to their parent groups to avoid double-move
+        const resolvedObjects = new Map();
+        selectedObjects.forEach(obj => {
+            // Check if this object is a child of a KritzelGroup
+            const parentGroup = KritzelGroup.findParentGroup(this._core, obj.id);
+            if (parentGroup) {
+                // Add the parent group instead of the child
+                resolvedObjects.set(parentGroup.id, parentGroup);
+            }
+            else {
+                // Not a child of any group, add the object itself
+                resolvedObjects.set(obj.id, obj);
+            }
+            obj.isSelected = false;
+        });
         const selectionGroup = KritzelSelectionGroup.create(this._core);
-        selectedObjects.forEach(o => {
+        resolvedObjects.forEach(o => {
             selectionGroup.addOrRemove(o);
-            o.isSelected = false;
         });
         selectionGroup.isSelected = true;
         if (selectionGroup.length === 1) {
@@ -33865,7 +34365,7 @@ const DEFAULT_LINE_TOOL_CONFIG = {
     },
 };
 
-export { Schema as $, isNode as A, min$2 as B, pow as C, HocuspocusProviderWebsocket as D, KritzelPath as E, KritzelImage as F, KritzelLine as G, HocuspocusProvider as H, KritzelBrushTool as I, KritzelLineTool as J, KritzelText as K, KritzelEraserTool as L, KritzelImageTool as M, KritzelTextTool as N, Observable$1 as O, KritzelCursorHelper as P, KritzelSelectionTool as Q, IndexedDBSyncProvider as R, KritzelAppStateMap as S, KritzelWorkspace as T, KritzelAnchorManager as U, DEFAULT_BRUSH_CONFIG as V, DEFAULT_TEXT_CONFIG as W, DEFAULT_LINE_TOOL_CONFIG as X, KritzelDevicesHelper as Y, KritzelMouseButton as Z, KritzelBaseObject as _, writeVarUint8Array$2 as a, schema as a0, addListNodes as a1, EditorView as a2, EditorState as a3, keymap as a4, TextSelection as a5, KritzelKeyboardHelper as a6, KritzelToolRegistry as a7, KritzelGeometryHelper as a8, baseKeymap as a9, KritzelBaseTool as aa, KritzelEventHelper as ab, KritzelIconRegistry as ac, KritzelBaseHandler as ad, KritzelSelectionBox as ae, KritzelSelectionGroup as af, Doc as ag, DEFAULT_SYNC_CONFIG as ah, UndoManager as ai, ObjectHelper as aj, KritzelClassHelper as ak, readVarUint8Array$2 as b, applyUpdate as c, encodeStateVector as d, encodeStateAsUpdate as e, createEncoder$1 as f, createDecoder$1 as g, create$8 as h, fromBase64 as i, toBase64 as j, createUint8ArrayFromArrayBuffer as k, offChange as l, readVarString$2 as m, floor$2 as n, onChange as o, getUnixTime$1 as p, equalityDeep$1 as q, readVarUint$2 as r, setIfUndefined$1 as s, toUint8Array$1 as t, writeVarString$2 as u, varStorage as v, writeVarUint$2 as w, map as x, ObservableV2 as y, length$3 as z };
-//# sourceMappingURL=default-line-tool.config-PvsWHpO2.js.map
+export { KritzelBaseObject as $, isNode as A, min$2 as B, pow as C, HocuspocusProviderWebsocket as D, KritzelPath as E, KritzelImage as F, KritzelLine as G, HocuspocusProvider as H, KritzelGroup as I, KritzelBrushTool as J, KritzelText as K, KritzelLineTool as L, KritzelEraserTool as M, KritzelImageTool as N, Observable$1 as O, KritzelTextTool as P, KritzelCursorHelper as Q, KritzelSelectionTool as R, IndexedDBSyncProvider as S, KritzelAppStateMap as T, KritzelWorkspace as U, KritzelAnchorManager as V, DEFAULT_BRUSH_CONFIG as W, DEFAULT_TEXT_CONFIG as X, DEFAULT_LINE_TOOL_CONFIG as Y, KritzelDevicesHelper as Z, KritzelMouseButton as _, writeVarUint8Array$2 as a, Schema as a0, schema as a1, addListNodes as a2, EditorView as a3, EditorState as a4, keymap as a5, TextSelection as a6, KritzelKeyboardHelper as a7, KritzelToolRegistry as a8, KritzelGeometryHelper as a9, baseKeymap as aa, KritzelBaseTool as ab, KritzelEventHelper as ac, KritzelIconRegistry as ad, KritzelBaseHandler as ae, KritzelSelectionBox as af, KritzelSelectionGroup as ag, Doc as ah, DEFAULT_SYNC_CONFIG as ai, UndoManager as aj, ObjectHelper as ak, KritzelClassHelper as al, readVarUint8Array$2 as b, applyUpdate as c, encodeStateVector as d, encodeStateAsUpdate as e, createEncoder$1 as f, createDecoder$1 as g, create$8 as h, fromBase64 as i, toBase64 as j, createUint8ArrayFromArrayBuffer as k, offChange as l, readVarString$2 as m, floor$2 as n, onChange as o, getUnixTime$1 as p, equalityDeep$1 as q, readVarUint$2 as r, setIfUndefined$1 as s, toUint8Array$1 as t, writeVarString$2 as u, varStorage as v, writeVarUint$2 as w, map as x, ObservableV2 as y, length$3 as z };
+//# sourceMappingURL=default-line-tool.config-CuBm2vpW.js.map
 
-//# sourceMappingURL=default-line-tool.config-PvsWHpO2.js.map
+//# sourceMappingURL=default-line-tool.config-CuBm2vpW.js.map