kritzel-react 0.1.30 → 0.1.32

package/dist/kritzel-stencil/src/classes/structures/object-map.structure.js

@@ -0,0 +1,414 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import * as Y from 'yjs';
+import { KritzelReviver } from '../core/reviver.class';
+import { KritzelSelectionBox } from '../objects/selection-box.class';
+import { KritzelSelectionGroup } from '../objects/selection-group.class';
+import { DEFAULT_SYNC_CONFIG } from '../../configs/default-sync.config';
+import { KritzelQuadtree } from './quadtree.structure';
+export class KritzelObjectMap {
+    get isReady() {
+        return this._isReady;
+    }
+    get undoManager() {
+        return this._undoManager;
+    }
+    get workspaceId() {
+        return this._workspaceId;
+    }
+    get undoState() {
+        return {
+            canUndo: this._undoManager ? this._undoManager.canUndo() : false,
+            canRedo: this._undoManager ? this._undoManager.canRedo() : false,
+            undoStackSize: this._undoManager ? this._undoManager.undoStack.length : 0,
+            redoStackSize: this._undoManager ? this._undoManager.redoStack.length : 0,
+        };
+    }
+    get totalCount() {
+        return this.quadtree.size;
+    }
+    constructor() {
+        this._ydoc = null;
+        this._objectsMap = null;
+        this._providers = [];
+        this._undoManager = null;
+        this._reviver = null;
+        this._core = null;
+        this._workspaceId = null;
+        this._isReady = false;
+        this._temporaryItemsCount = 0;
+        // Store observer/listener references for cleanup
+        this._objectsObserver = null;
+        this._stackItemAddedHandler = null;
+        this._stackItemPoppedHandler = null;
+        this.quadtree = new KritzelQuadtree({
+            x: -Infinity,
+            y: -Infinity,
+            z: 0,
+            width: Infinity,
+            height: Infinity,
+        }, 8);
+    }
+    initialize(core, workspaceId, config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._core = core;
+            this._workspaceId = workspaceId;
+            this._reviver = new KritzelReviver(core);
+            // Create a dedicated Y.Doc for this workspace
+            this._ydoc = new Y.Doc();
+            this._objectsMap = this._ydoc.getMap('objects');
+            const docName = `kritzel-workspace-${workspaceId}`;
+            const finalConfig = config !== null && config !== void 0 ? config : DEFAULT_SYNC_CONFIG;
+            // Instantiate providers from configuration
+            for (const providerConfig of finalConfig.providers) {
+                let provider;
+                // Check if it's a class constructor or a factory
+                if (typeof providerConfig === 'function') {
+                    // It's a class constructor
+                    provider = new providerConfig(docName, this._ydoc);
+                }
+                else {
+                    // It's a factory with a create method
+                    provider = providerConfig.create(docName, this._ydoc);
+                }
+                this._providers.push(provider);
+            }
+            // Set up undo/redo manager for this workspace
+            this._undoManager = new Y.UndoManager([this._objectsMap], {
+                captureTimeout: 200,
+                trackedOrigins: new Set(['local', 'temporary']),
+                ignoreRemoteMapChanges: true,
+            });
+            // Store handler references for cleanup
+            this._stackItemAddedHandler = event => {
+                if (event.type === 'undo') {
+                    // Track if this was a temporary item
+                    if (event.origin === 'temporary') {
+                        this._temporaryItemsCount++;
+                    }
+                }
+            };
+            this._stackItemPoppedHandler = event => {
+                if (event.type === 'undo') {
+                    // Reduce temporary count when items are undone
+                    if (event.origin === 'temporary' && this._temporaryItemsCount > 0) {
+                        this._temporaryItemsCount--;
+                    }
+                }
+            };
+            this._undoManager.on('stack-item-added', this._stackItemAddedHandler);
+            this._undoManager.on('stack-item-popped', this._stackItemPoppedHandler);
+            // Observe changes to objects and sync with application state
+            this._objectsObserver = event => {
+                this.handleObjectsChange(event);
+            };
+            this._objectsMap.observe(this._objectsObserver);
+            // Connect all providers in parallel
+            yield Promise.all(this._providers.map(p => p.connect()));
+            this._isReady = true;
+            // Load objects from Yjs
+            this.loadFromYjs();
+        });
+    }
+    handleObjectsChange(event) {
+        var _a, _b, _c;
+        // Skip Map updates for local changes (already done), but still trigger re-render
+        // 'temporary' is also a local change that shouldn't be re-deserialized
+        if (event.transaction.origin === 'local' || event.transaction.origin === 'temporary') {
+            (_a = this._core) === null || _a === void 0 ? void 0 : _a.rerender();
+            return;
+        }
+        const changedKeys = Array.from(event.keysChanged);
+        const objectsToUpdate = [];
+        const selectionGroupsToUpdate = [];
+        const objectsToDelete = [];
+        changedKeys.forEach(key => {
+            const change = event.changes.keys.get(key);
+            if (change && change.action === 'delete') {
+                objectsToDelete.push(key);
+            }
+            else {
+                const serialized = this._objectsMap.get(key);
+                if (serialized) {
+                    const object = this._reviver.revive(serialized);
+                    // Separate SelectionGroups to process them after regular objects
+                    if (object instanceof KritzelSelectionGroup) {
+                        selectionGroupsToUpdate.push(object);
+                    }
+                    else {
+                        objectsToUpdate.push(object);
+                    }
+                }
+            }
+        });
+        // Delete objects from local map
+        objectsToDelete.forEach(objectId => {
+            this.quadtree.remove(o => o.id === objectId);
+        });
+        // First, update or insert regular objects
+        objectsToUpdate.forEach(object => {
+            const existed = this.quadtree.filter(o => o.id === object.id).length > 0;
+            if (existed) {
+                this.quadtree.update(object);
+            }
+            else {
+                this.quadtree.insert(object);
+            }
+        });
+        // Then, update or insert SelectionGroups
+        const updatedSelectionGroupIds = new Set();
+        selectionGroupsToUpdate.forEach(object => {
+            const existed = this.quadtree.filter(o => o.id === object.id).length > 0;
+            if (existed) {
+                this.quadtree.update(object);
+            }
+            else {
+                this.quadtree.insert(object);
+            }
+            updatedSelectionGroupIds.add(object.id);
+            // After undo/redo, the SelectionGroup's dimensions may be stale because:
+            // 1. The serialized state contains the old bounding box
+            // 2. The child objects have been reverted to their previous positions
+            // We need to invalidate the cache and recalculate dimensions
+            // skipPersist=true prevents creating new undo entries
+            object.invalidateObjectsCache();
+            object.refreshObjectDimensions(undefined, true);
+            object.captureUnchangedSnapshots();
+            // Update quadtree again with corrected dimensions
+            this.quadtree.update(object);
+        });
+        // If regular objects were changed but their SelectionGroup wasn't explicitly updated,
+        // we still need to refresh that SelectionGroup's dimensions
+        if (objectsToUpdate.length > 0 || objectsToDelete.length > 0) {
+            const changedObjectIds = new Set([
+                ...objectsToUpdate.map(o => o.id),
+                ...objectsToDelete
+            ]);
+            // Find any existing SelectionGroups that contain changed objects
+            const existingSelectionGroups = this.quadtree.filter(o => o instanceof KritzelSelectionGroup && !updatedSelectionGroupIds.has(o.id));
+            for (const selectionGroup of existingSelectionGroups) {
+                const hasChangedChildren = selectionGroup.objectIds.some(id => changedObjectIds.has(id));
+                if (hasChangedChildren) {
+                    selectionGroup.invalidateObjectsCache();
+                    selectionGroup.refreshObjectDimensions(undefined, true);
+                    selectionGroup.captureUnchangedSnapshots();
+                    // Update quadtree with corrected dimensions
+                    this.quadtree.update(selectionGroup);
+                }
+            }
+        }
+        // Invalidate the store's selection cache so it fetches the updated SelectionGroup
+        (_b = this._core) === null || _b === void 0 ? void 0 : _b.store.invalidateSelectionCache();
+        (_c = this._core) === null || _c === void 0 ? void 0 : _c.rerender();
+    }
+    transaction(callback) {
+        if (this._ydoc) {
+            this._ydoc.transact(callback, 'local');
+        }
+    }
+    loadFromYjs() {
+        if (!this._objectsMap || !this._reviver) {
+            return;
+        }
+        this.quadtree.reset();
+        this._objectsMap.forEach(serialized => {
+            const object = this._reviver.revive(serialized);
+            this.quadtree.insert(object);
+        });
+    }
+    reset() {
+        this.quadtree.reset();
+        this._ydoc.transact(() => {
+            this._objectsMap.clear();
+        }, 'local');
+    }
+    insert(object) {
+        if (!object.id) {
+            return false;
+        }
+        this.quadtree.insert(object);
+        if (this._objectsMap && this.isPersistable(object)) {
+            const serialized = object.serialize();
+            this._ydoc.transact(() => {
+                this._objectsMap.set(object.id, serialized);
+            }, 'local');
+        }
+        return true;
+    }
+    update(object, options = {}) {
+        if (!object.id) {
+            return false;
+        }
+        const existed = this.quadtree.filter(o => o.id === object.id).length > 0;
+        if (!existed) {
+            return false;
+        }
+        this.quadtree.update(object);
+        if (this._objectsMap && this.isPersistable(object)) {
+            const serialized = object.serialize();
+            const origin = options.temporary ? 'temporary' : 'local';
+            this._ydoc.transact(() => {
+                this._objectsMap.set(object.id, serialized);
+            }, origin);
+        }
+        return true;
+    }
+    remove(predicate) {
+        const objectsToRemove = this.quadtree.filter(predicate);
+        for (const object of objectsToRemove) {
+            this.quadtree.remove(o => o.id === object.id);
+            if (this._objectsMap && this.isPersistable(object)) {
+                this._ydoc.transact(() => {
+                    this._objectsMap.delete(object.id);
+                }, 'local');
+            }
+        }
+    }
+    filter(predicate) {
+        return this.quadtree.filter(predicate);
+    }
+    allObjects() {
+        return this.quadtree.allObjects();
+    }
+    query(range) {
+        return this.quadtree.query(range);
+    }
+    isPersistable(object) {
+        if (object instanceof KritzelSelectionBox) {
+            return false;
+        }
+        return true;
+    }
+    undo() {
+        if (this._undoManager && this._undoManager.canUndo()) {
+            this._undoManager.undo();
+            this._core.engine.emitObjectsChange();
+        }
+    }
+    redo() {
+        if (this._undoManager && this._undoManager.canRedo()) {
+            this._undoManager.redo();
+            this._core.engine.emitObjectsChange();
+        }
+    }
+    canUndo() {
+        return this._undoManager ? this._undoManager.canUndo() : false;
+    }
+    canRedo() {
+        return this._undoManager ? this._undoManager.canRedo() : false;
+    }
+    clearHistory() {
+        if (this._undoManager) {
+            this._undoManager.clear();
+            this._temporaryItemsCount = 0;
+        }
+    }
+    /**
+     * Consolidates all temporary items in the undo stack into a single undo item.
+     * Call this when you want to merge multiple temporary changes (e.g., keystrokes) into one.
+     */
+    consolidateTemporaryItems() {
+        if (!this._undoManager || this._temporaryItemsCount === 0) {
+            return;
+        }
+        // Get current stack length
+        const stackLength = this._undoManager.undoStack.length;
+        if (stackLength === 0) {
+            this._temporaryItemsCount = 0;
+            return;
+        }
+        // Stop tracking temporarily
+        this._undoManager.stopCapturing();
+        // The temporary items should be at the end of the stack
+        // We'll need to undo them all, then redo as a single transaction
+        const itemsToConsolidate = Math.min(this._temporaryItemsCount, stackLength);
+        if (itemsToConsolidate > 1) {
+            // Store the current state before undoing
+            const undoneItems = [];
+            // Undo all temporary items
+            for (let i = 0; i < itemsToConsolidate; i++) {
+                if (this._undoManager.canUndo()) {
+                    undoneItems.push(this._undoManager.undoStack[this._undoManager.undoStack.length - 1]);
+                    this._undoManager.undo();
+                }
+            }
+            // Now redo them all as a single 'local' transaction
+            // This will consolidate them into one undo item
+            this._ydoc.transact(() => {
+                for (let i = itemsToConsolidate - 1; i >= 0; i--) {
+                    if (this._undoManager.canRedo()) {
+                        this._undoManager.redo();
+                    }
+                }
+            }, 'local');
+        }
+        else if (itemsToConsolidate === 1) {
+            // If only one temporary item, just change its origin to 'local'
+            // This is implicit - next transaction will be separate
+        }
+        this._temporaryItemsCount = 0;
+    }
+    /**
+     * Removes all temporary items from the undo stack without consolidating them.
+     * Use this to discard temporary changes completely.
+     */
+    clearTemporaryItems() {
+        if (!this._undoManager || this._temporaryItemsCount === 0) {
+            return;
+        }
+        const stackLength = this._undoManager.undoStack.length;
+        const itemsToRemove = Math.min(this._temporaryItemsCount, stackLength);
+        // Remove items from the end of the stack
+        for (let i = 0; i < itemsToRemove; i++) {
+            if (this._undoManager.undoStack.length > 0) {
+                this._undoManager.undoStack.pop();
+            }
+        }
+        this._temporaryItemsCount = 0;
+    }
+    destroy() {
+        // Unobserve the objects map
+        if (this._objectsMap && this._objectsObserver) {
+            this._objectsMap.unobserve(this._objectsObserver);
+            this._objectsObserver = null;
+        }
+        // Remove undo manager event listeners
+        if (this._undoManager) {
+            if (this._stackItemAddedHandler) {
+                this._undoManager.off('stack-item-added', this._stackItemAddedHandler);
+                this._stackItemAddedHandler = null;
+            }
+            if (this._stackItemPoppedHandler) {
+                this._undoManager.off('stack-item-popped', this._stackItemPoppedHandler);
+                this._stackItemPoppedHandler = null;
+            }
+            this._undoManager.destroy();
+            this._undoManager = null;
+        }
+        // Reset quadtree
+        this.quadtree.reset();
+        // Destroy providers
+        this._providers.forEach(p => p.destroy());
+        this._providers = [];
+        // Clear object map reference
+        this._objectsMap = null;
+        // Destroy Y.Doc
+        if (this._ydoc) {
+            this._ydoc.destroy();
+            this._ydoc = null;
+        }
+        // Clear remaining references
+        this._core = null;
+        this._reviver = null;
+        this._workspaceId = null;
+        this._isReady = false;
+        this._temporaryItemsCount = 0;
+    }
+}

package/dist/kritzel-stencil/src/classes/structures/quadtree.structure.js

@@ -0,0 +1,151 @@
+export class KritzelQuadtree {
+    /** Total number of objects in the quadtree (O(1) access) */
+    get size() {
+        return this._size;
+    }
+    constructor(bounds, capacity = 16) {
+        this.objects = [];
+        this.children = null;
+        this._size = 0;
+        this.bounds = bounds;
+        this.capacity = capacity;
+    }
+    reset() {
+        this.objects = [];
+        this.children = null;
+        this._size = 0;
+    }
+    insert(object) {
+        if (!this.intersects(object.rotatedBoundingBox, this.bounds)) {
+            return false;
+        }
+        if (this.objects.length < this.capacity && this.children === null) {
+            this.objects.push(object);
+            this._size++;
+            return true;
+        }
+        if (this.children === null) {
+            this.subdivide();
+        }
+        for (const child of this.children) {
+            if (child.insert(object)) {
+                this._size++;
+                return true;
+            }
+        }
+        return false;
+    }
+    update(object) {
+        const index = this.objects.findIndex(o => o.id === object.id);
+        if (index !== -1) {
+            this.objects[index] = object;
+            return true;
+        }
+        if (this.children !== null) {
+            for (const child of this.children) {
+                if (child.update(object)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    remove(predicate) {
+        let removed = 0;
+        const index = this.objects.findIndex(o => predicate(o));
+        if (index !== -1) {
+            this.objects.splice(index, 1);
+            removed++;
+        }
+        if (this.children !== null) {
+            for (const child of this.children) {
+                removed += child.remove(predicate);
+            }
+        }
+        this._size -= removed;
+        return removed;
+    }
+    query(range) {
+        const results = [];
+        this._queryInto(range, results);
+        return results;
+    }
+    /**
+     * Internal method that collects query results into a pre-allocated array.
+     * Avoids creating intermediate arrays from spread operators.
+     */
+    _queryInto(range, results) {
+        if (!this.intersects(range, this.bounds)) {
+            return;
+        }
+        for (const object of this.objects) {
+            if (this.intersects(object.rotatedBoundingBox, range)) {
+                results.push(object);
+            }
+        }
+        if (this.children !== null) {
+            for (const child of this.children) {
+                child._queryInto(range, results);
+            }
+        }
+    }
+    filter(predicate) {
+        const results = [];
+        this._filterInto(predicate, results);
+        return results;
+    }
+    /**
+     * Internal method that collects filter results into a pre-allocated array.
+     * Avoids creating intermediate arrays from spread operators.
+     */
+    _filterInto(predicate, results) {
+        for (const obj of this.objects) {
+            if (predicate(obj)) {
+                results.push(obj);
+            }
+        }
+        if (this.children !== null) {
+            for (const child of this.children) {
+                child._filterInto(predicate, results);
+            }
+        }
+    }
+    allObjects() {
+        const results = [];
+        this._collectAllInto(results);
+        return results;
+    }
+    /**
+     * Internal method that collects all objects into a pre-allocated array.
+     * Avoids creating intermediate arrays from spread operators.
+     */
+    _collectAllInto(results) {
+        for (const obj of this.objects) {
+            results.push(obj);
+        }
+        if (this.children !== null) {
+            for (const child of this.children) {
+                child._collectAllInto(results);
+            }
+        }
+    }
+    subdivide() {
+        const { x, y, z, width, height } = this.bounds;
+        const halfWidth = width / 2;
+        const halfHeight = height / 2;
+        // Create 4 quadrants: NW, NE, SW, SE
+        this.children = [
+            new KritzelQuadtree({ x, y, z, width: halfWidth, height: halfHeight }, this.capacity), // Northwest
+            new KritzelQuadtree({ x: x + halfWidth, y, z, width: halfWidth, height: halfHeight }, this.capacity), // Northeast
+            new KritzelQuadtree({ x, y: y + halfHeight, z, width: halfWidth, height: halfHeight }, this.capacity), // Southwest
+            new KritzelQuadtree({ x: x + halfWidth, y: y + halfHeight, z, width: halfWidth, height: halfHeight }, this.capacity), // Southeast
+        ];
+    }
+    intersects(a, b) {
+        return !(a.x >= b.x + b.width || // a is completely to the right of b
+            a.x + a.width <= b.x || // a is completely to the left of b
+            a.y >= b.y + b.height || // a is completely below b
+            a.y + a.height <= b.y // a is completely above b
+        );
+    }
+}

package/dist/kritzel-stencil/src/classes/tools/base-tool.class.js

@@ -0,0 +1,36 @@
+export class KritzelBaseTool {
+    constructor(core) {
+        this.__class__ = this.constructor.name;
+        this.name = 'base-tool';
+        this._core = core;
+        void this._core; // Avoid unused variable warning
+    }
+    onActivate() {
+        // default implementation
+    }
+    onDeactivate() {
+        // default implementation
+    }
+    handlePointerDown(_event) {
+        // default implementation
+    }
+    handlePointerMove(_event) {
+        // default implementation
+    }
+    handlePointerUp(_event) {
+        // default implementation
+    }
+    handleWheel(_event) {
+        // default implementation
+    }
+    serialize() {
+        return {
+            __class__: this.__class__,
+            name: this.name,
+        };
+    }
+    deserialize(object) {
+        Object.assign(this, object);
+        return this;
+    }
+}