kritzel-react 0.1.30 → 0.1.32

package/dist/kritzel-stencil/src/classes/objects/selection-group.class.js

@@ -0,0 +1,409 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { KritzelGeometryHelper } from '../../helpers/geometry.helper';
+import { KritzelBaseObject } from './base-object.class';
+import { KritzelGroup } from './group.class';
+export class KritzelSelectionGroup extends KritzelBaseObject {
+    constructor() {
+        super(...arguments);
+        this.__class__ = 'KritzelSelectionGroup';
+        // Store only object IDs instead of full objects
+        this._objectIds = [];
+        // Cached objects array - invalidated when objectIds changes
+        this._cachedObjects = null;
+        this._cachedObjectIdsHash = '';
+        // Store snapshots of object state for transformations (rotation, resize)
+        this.unchangedObjectSnapshots = new Map();
+        this.snapshotRotation = 0;
+    }
+    get objectIds() {
+        return this._objectIds;
+    }
+    set objectIds(value) {
+        this._objectIds = value;
+        this._cachedObjects = null; // Invalidate cache
+    }
+    /**
+     * Invalidate the cached objects array. Call this when objects might have changed
+     * externally (e.g., after undo/redo operations).
+     */
+    invalidateObjectsCache() {
+        this._cachedObjects = null;
+    }
+    // Getter to retrieve actual objects from the store by their IDs
+    // Optimized: Caches result and only recomputes when objectIds changes
+    get objects() {
+        const currentHash = this._objectIds.join(',');
+        if (this._cachedObjects !== null && this._cachedObjectIdsHash === currentHash) {
+            return this._cachedObjects;
+        }
+        const idSet = new Set(this._objectIds);
+        const foundObjects = this._core.store.state.objects.filter(obj => idSet.has(obj.id));
+        // Preserve the original order from objectIds
+        const objectMap = new Map(foundObjects.map(obj => [obj.id, obj]));
+        this._cachedObjects = this._objectIds
+            .map(id => objectMap.get(id))
+            .filter((obj) => obj !== undefined);
+        this._cachedObjectIdsHash = currentHash;
+        return this._cachedObjects;
+    }
+    get length() {
+        return this.objectIds.length;
+    }
+    static create(core) {
+        const object = new KritzelSelectionGroup();
+        object._core = core;
+        object.id = object.generateId();
+        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.scale = core.store.state.scale;
+        object.zIndex = 99999;
+        return object;
+    }
+    addOrRemove(object) {
+        const index = this._objectIds.findIndex(id => id === object.id);
+        if (index === -1) {
+            this._objectIds.push(object.id);
+        }
+        else {
+            this._objectIds.splice(index, 1);
+        }
+        this._cachedObjects = null; // Invalidate cache
+        const children = this.objects; // Get cached objects once
+        this.captureUnchangedSnapshots(children);
+        this.refreshObjectDimensions(children);
+    }
+    /**
+     * Prepares the selection group and its children for a transform interaction (rotate/resize).
+     * Ensures snapshot state is aligned with the current visual state.
+     */
+    beginTransform() {
+        const children = this.objects; // Get cached objects once
+        // Keep the selection group's bounding box current before snapshotting.
+        this.refreshObjectDimensions(children);
+        this.captureUnchangedSnapshots(children);
+        // Groups need their own child snapshots aligned with the current transform.
+        for (const obj of children) {
+            if (obj instanceof KritzelGroup) {
+                obj.finalize();
+            }
+        }
+    }
+    deselectAllChildren() {
+        const children = this.objects;
+        for (const obj of children) {
+            obj.isSelected = false;
+        }
+    }
+    updateWorkspaceId(workspaceId) {
+        this.workspaceId = workspaceId;
+        const children = this.objects;
+        for (const obj of children) {
+            obj.workspaceId = workspaceId;
+        }
+    }
+    updateZIndices(startZIndex) {
+        const children = this.objects;
+        for (let i = 0; i < children.length; i++) {
+            children[i].zIndex = startZIndex + i;
+        }
+    }
+    updatePosition(x, y) {
+        const children = this.objects;
+        for (const obj of children) {
+            const deltaX = obj.translateX - this.translateX;
+            const deltaY = obj.translateY - this.translateY;
+            obj.updatePosition(x + deltaX, y + deltaY);
+        }
+        // Update snapshots
+        this.unchangedObjectSnapshots.forEach(snapshot => {
+            const deltaX = snapshot.translateX - this.translateX;
+            const deltaY = snapshot.translateY - this.translateY;
+            snapshot.translateX = x + deltaX;
+            snapshot.translateY = y + deltaY;
+        });
+        this.translateX = x;
+        this.translateY = y;
+        this._core.store.state.objects.update(this);
+    }
+    /**
+     * Capture snapshots of current object states for undo/redo operations
+     * @param cachedObjects Optional pre-fetched objects array to avoid redundant getter calls
+     */
+    captureUnchangedSnapshots(cachedObjects) {
+        this.unchangedObjectSnapshots.clear();
+        this.snapshotRotation = this.rotation;
+        const children = cachedObjects !== null && cachedObjects !== void 0 ? cachedObjects : this.objects;
+        children.forEach(obj => {
+            this.unchangedObjectSnapshots.set(obj.id, {
+                id: obj.id,
+                translateX: obj.translateX,
+                translateY: obj.translateY,
+                rotation: obj.rotation,
+                width: obj.width,
+                height: obj.height,
+                totalWidth: obj.totalWidth,
+                totalHeight: obj.totalHeight,
+                scale: obj.scale,
+            });
+        });
+    }
+    serialize() {
+        const _a = this, { _core, _elementRef, element, totalWidth, totalHeight, unchangedObjectSnapshots, _cachedObjects, _cachedObjectIdsHash } = _a, remainingProps = __rest(_a, ["_core", "_elementRef", "element", "totalWidth", "totalHeight", "unchangedObjectSnapshots", "_cachedObjects", "_cachedObjectIdsHash"]);
+        const clonedProps = structuredClone(remainingProps);
+        // Ensure objectIds is serialized with the correct key name (getter returns _objectIds)
+        clonedProps.objectIds = this.objectIds;
+        delete clonedProps._objectIds;
+        if (element && typeof element === 'object' && 'nodeType' in element && element.nodeType === 1) {
+            clonedProps.element = element.cloneNode(true);
+        }
+        // Convert Map to plain object for serialization
+        clonedProps.unchangedObjectSnapshots = Object.fromEntries(this.unchangedObjectSnapshots);
+        return clonedProps;
+    }
+    deserialize(object) {
+        // First, deserialize all base properties using parent's deserialize
+        super.deserialize(object);
+        // Restore objectIds through setter
+        if (object.objectIds) {
+            this.objectIds = object.objectIds;
+        }
+        // Restore the Map from serialized object
+        if (object.unchangedObjectSnapshots) {
+            this.unchangedObjectSnapshots = new Map(Object.entries(object.unchangedObjectSnapshots));
+        }
+        return this;
+    }
+    update() {
+        // Only update the selection group itself
+        // Child objects are already updated during move/resize/rotate operations
+        // Updating them again here would create redundant y.js updates
+        this._core.store.state.objects.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.objects.transaction(() => {
+            this._core.store.state.objects.update(this);
+            const children = this.objects;
+            for (const obj of children) {
+                obj.move(startX, startY, endX, endY);
+                // Update any lines that are anchored to this object
+                this._core.anchorManager.updateAnchorsForObject(obj.id);
+            }
+        });
+        // Update snapshots
+        this.unchangedObjectSnapshots.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(() => {
+            // Cache objects once to avoid repeated getter calls during resize
+            const children = this.objects;
+            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 (align with group axes)
+                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;
+                // New child top-left
+                // Calculate relative rotation
+                const relativeRotation = child.rotation - rotation;
+                const cosRel = Math.cos(relativeRotation);
+                const sinRel = Math.sin(relativeRotation);
+                // Project the group's scale factors onto the child's local axes
+                // We use absolute values because scaling is magnitude-based
+                // If the child is aligned (0 deg), cos=1, sin=0 -> scales match
+                // If the child is 90 deg, cos=0, sin=1 -> scales swap
+                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 any lines that are anchored to this child object
+                this._core.anchorManager.updateAnchorsForObject(child.id);
+            });
+            // Refresh dimensions and update the SelectionGroup to propagate changes to other tabs
+            this.refreshObjectDimensions(children);
+            this.captureUnchangedSnapshots(children);
+            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);
+        // Cache objects once to avoid repeated getter calls during rotation
+        const children = this.objects;
+        this._core.store.state.objects.transaction(() => {
+            // Update the SelectionGroup itself to propagate rotation to other tabs
+            this._core.store.state.objects.update(this);
+            const childCount = children.length;
+            for (const child of children) {
+                const unchangedSnapshot = this.unchangedObjectSnapshots.get(child.id);
+                if (!unchangedSnapshot)
+                    continue;
+                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(childCount === 1 ? value : unchangedSnapshot.rotation + angle);
+            }
+        });
+    }
+    copy() {
+        const selectionGroup = KritzelSelectionGroup.create(this._core);
+        const children = this.objects;
+        // Sort children by zIndex and copy them
+        const sortedChildren = [...children].sort((a, b) => a.zIndex - b.zIndex);
+        for (const obj of sortedChildren) {
+            const copiedObject = obj.copy();
+            selectionGroup.addOrRemove(copiedObject);
+        }
+        selectionGroup.captureUnchangedSnapshots();
+        if (children.length === 1) {
+            selectionGroup.rotation = children[0].rotation;
+        }
+        return selectionGroup;
+    }
+    /**
+     * Refreshes the selection group's bounding box dimensions based on contained objects.
+     * @param cachedObjects Optional pre-fetched objects array to avoid redundant getter calls
+     * @param skipPersist If true, only updates local state without persisting to Yjs (used during undo/redo)
+     */
+    refreshObjectDimensions(cachedObjects, skipPersist = false) {
+        const children = cachedObjects !== null && cachedObjects !== void 0 ? cachedObjects : this.objects;
+        if (children.length === 1) {
+            const obj = children[0];
+            this.minX = obj.boundingBox.x / this.scale;
+            this.maxX = obj.boundingBox.x / this.scale + obj.boundingBox.width;
+            this.minY = obj.boundingBox.y / this.scale;
+            this.maxY = obj.boundingBox.y / this.scale + obj.boundingBox.height;
+            this.translateX = (this.minX - this.padding) * this.scale;
+            this.translateY = (this.minY - this.padding) * this.scale;
+            this.width = (this.maxX - this.minX - this.padding) * this.scale;
+            this.height = (this.maxY - this.minY - this.padding) * this.scale;
+        }
+        else {
+            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;
+            children.forEach(obj => {
+                const polygon = obj.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;
+        }
+        if (!skipPersist) {
+            this._core.store.state.objects.update(this);
+        }
+    }
+    getOffsetXToCenterFromSnapshot(snapshot) {
+        const objCenterX = snapshot.translateX + snapshot.totalWidth / snapshot.scale / 2;
+        const groupCenterX = this.translateX + this.totalWidth / this.scale / 2;
+        return objCenterX - groupCenterX;
+    }
+    getOffsetYToCenterFromSnapshot(snapshot) {
+        const objCenterY = snapshot.translateY + snapshot.totalHeight / snapshot.scale / 2;
+        const groupCenterY = this.translateY + this.totalHeight / this.scale / 2;
+        return objCenterY - groupCenterY;
+    }
+    hitTest(x, y) {
+        const children = this.objects;
+        const isSingleLine = children.length === 1 && children[0].__class__ === 'KritzelLine';
+        if (isSingleLine) {
+            return children[0].hitTest(x, y);
+        }
+        const polygon = this.rotatedPolygon;
+        const polyPoints = [polygon.topLeft, polygon.topRight, polygon.bottomRight, polygon.bottomLeft];
+        if (KritzelGeometryHelper.isPointInPolygon({ x, y }, polyPoints)) {
+            return true;
+        }
+        for (const obj of children) {
+            if (obj.hitTest(x, y)) {
+                return true;
+            }
+        }
+        return false;
+    }
+}