@kritzel/engine 0.4.31

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

@@ -0,0 +1,133 @@
+import { KritzelEventHelper } from "../../helpers/event.helper";
+import { KritzelBaseTool } from "./base-tool.class";
+/**
+ * Eraser tool for removing objects from the canvas.
+ * Objects touched by the eraser during a drag gesture are marked for removal
+ * and deleted when the gesture completes. Supports mouse, touch, and pen input.
+ */
+export class KritzelEraserTool extends KritzelBaseTool {
+    toolType = 'eraser';
+    /** Timeout handle for delayed touch start activation to prevent accidental erasing */
+    touchStartTimeout = null;
+    /**
+     * Creates a new instance of KritzelEraserTool.
+     * @param core - The KritzelCore instance that provides access to application state and functionality
+     */
+    constructor(core) {
+        super(core);
+    }
+    /**
+     * Handles pointer down events to start the erasing gesture.
+     * For mouse input, immediately activates erasing on left-click.
+     * For touch/pen input, uses a delayed activation to prevent accidental erasing.
+     * @param event - The PointerEvent containing pointer position and input type information
+     */
+    handlePointerDown(event) {
+        if (event.pointerType === 'mouse') {
+            if (KritzelEventHelper.isLeftClick(event)) {
+                this._core.store.state.isErasing = true;
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            this.touchStartTimeout = setTimeout(() => {
+                if (this._core.store.state.pointers.size === 1 && !this._core.store.state.isScaling) {
+                    this._core.store.state.isErasing = true;
+                }
+            }, 80);
+        }
+    }
+    /**
+     * Handles pointer move events to mark objects for removal during erasing.
+     * Performs hit testing on objects under the pointer and marks them for removal.
+     * Objects are visually indicated as being erased but not yet removed from the canvas.
+     * @param event - The PointerEvent containing the current pointer position
+     */
+    handlePointerMove(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._core.store.state.isErasing) {
+                const selectedObjects = this._core.getObjectsFromPointerEvent(event, '.object');
+                if (selectedObjects.length === 0)
+                    return;
+                const x = this._core.store.state.pointerX;
+                const y = this._core.store.state.pointerY;
+                selectedObjects.forEach(selectedObject => {
+                    selectedObject.markedForRemoval = selectedObject.hitTest(x, y);
+                });
+                this._core.rerender();
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            if (this._core.store.state.pointers.size === 1 && this._core.store.state.isErasing) {
+                const shadowRoot = this._core.store.state.host?.shadowRoot;
+                if (!shadowRoot)
+                    return;
+                const selectedObjects = this._core.getObjectsFromPointerEvent(event, '.object');
+                if (selectedObjects.length === 0)
+                    return;
+                const x = this._core.store.state.pointerX;
+                const y = this._core.store.state.pointerY;
+                selectedObjects.forEach(selectedObject => {
+                    selectedObject.markedForRemoval = selectedObject.hitTest(x, y);
+                });
+                this._core.rerender();
+            }
+        }
+    }
+    /**
+     * Handles pointer up events to complete the erasing gesture.
+     * Removes all objects that were marked for removal during the gesture.
+     * Clears the erasing state and emits an objects change event if any objects were removed.
+     * @param event - The PointerEvent indicating the end of the erasing gesture
+     */
+    handlePointerUp(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._core.store.state.isErasing) {
+                const objectsToRemove = this._core.store.allObjects.filter(object => object.markedForRemoval);
+                if (objectsToRemove.length > 0) {
+                    // Seal the previous undo step so create+delete of the same object
+                    // (e.g. just-drawn shape) don't collapse into a no-op on undo.
+                    this._core.store.objects.stopUndoCapturing();
+                    // Group all removals from this sweep into a single undo step.
+                    this._core.store.objects.transaction(() => {
+                        objectsToRemove.forEach(object => {
+                            object.markedForRemoval = false;
+                            this._core.removeObject(object);
+                        });
+                    });
+                    this._core.rerender();
+                }
+                this._core.store.state.isErasing = false;
+                this._core.engine.emitObjectsChange();
+                if (objectsToRemove.length > 0) {
+                    this._core.engine.emitObjectsRemoved(objectsToRemove);
+                    this._core.store.objects.stopUndoCapturing();
+                }
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            clearTimeout(this.touchStartTimeout);
+            if (this._core.store.state.isErasing) {
+                const objectsToRemove = this._core.store.allObjects.filter(object => object.markedForRemoval);
+                if (objectsToRemove.length > 0) {
+                    // Seal the previous undo step so create+delete of the same object
+                    // (e.g. just-drawn shape) don't collapse into a no-op on undo.
+                    this._core.store.objects.stopUndoCapturing();
+                    // Group all removals from this sweep into a single undo step.
+                    this._core.store.objects.transaction(() => {
+                        objectsToRemove.forEach(object => {
+                            object.markedForRemoval = false;
+                            this._core.removeObject(object);
+                        });
+                    });
+                    this._core.rerender();
+                }
+                this._core.store.state.isErasing = false;
+                this._core.engine.emitObjectsChange();
+                if (objectsToRemove.length > 0) {
+                    this._core.engine.emitObjectsRemoved(objectsToRemove);
+                    this._core.store.objects.stopUndoCapturing();
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,152 @@
+import { KritzelImage } from "../objects/image.class";
+import { KritzelBaseTool } from "./base-tool.class";
+import imageCompression from "browser-image-compression";
+import { KritzelImageFileHelper } from "../../helpers/image-file.helper";
+/**
+ * Image tool for importing and placing images on the canvas.
+ *
+ * Flow:
+ *   1. User picks a file.
+ *   2. Static images are compressed via `browser-image-compression` (bandwidth win).
+ *      GIF files retain their original bytes so animation is preserved.
+ *   3. Intrinsic dimensions are measured from a temporary object URL.
+ *   4. Bytes are uploaded through the asset resolver (write-through:
+ *      local IndexedDB immediately, remote providers in the background).
+ *   5. A `KritzelImage` is created carrying only the resulting asset id
+ *      and MIME type, then added to the canvas. The renderer resolves
+ *      the id to a URL via the asset resolver.
+ */
+export class KritzelImageTool extends KritzelBaseTool {
+    toolType = 'image';
+    /** Hidden file input element for image selection */
+    fileInput = null;
+    /** Maximum dimension (width or height) for image compression in pixels */
+    maxCompressionSize = 1200;
+    /** Diagonal offset (in world units) applied between images when multiple are imported at once */
+    multiImportOffset = 20;
+    /**
+     * Creates a new instance of KritzelImageTool.
+     * Sets up the hidden file input element for image selection.
+     * @param core - The KritzelCore instance that provides access to application state and functionality
+     */
+    constructor(core) {
+        super(core);
+        this.setupFileInput();
+    }
+    /**
+     * Called when the image tool becomes active.
+     * Automatically opens the file picker dialog.
+     */
+    onActivate() {
+        this.openFilePicker();
+    }
+    /**
+     * Opens the native file picker dialog for image selection.
+     * Does nothing if the canvas is in disabled state.
+     */
+    openFilePicker() {
+        if (this._core.store.isDisabled) {
+            return;
+        }
+        this.fileInput?.click();
+    }
+    /**
+     * Creates and configures the hidden file input element.
+     * Sets up event listeners for file selection and cancellation.
+     */
+    setupFileInput() {
+        this.fileInput = document.createElement('input');
+        this.fileInput.type = 'file';
+        this.fileInput.accept = 'image/*';
+        this.fileInput.multiple = true;
+        this.fileInput.style.display = 'none';
+        this.fileInput.addEventListener('change', this.handleFileSelect.bind(this));
+        this.fileInput.addEventListener('cancel', this.handleCancel.bind(this));
+        document.body.appendChild(this.fileInput);
+    }
+    /**
+     * Handles the file selection event from the file input.
+     * Compresses each selected image if necessaryand places them as a batch on the canvas.
+     * Resets the file input value after processing.
+     * @param event - The change event from the file input element
+     */
+    handleFileSelect(event) {
+        const input = event.target;
+        const files = input.files ? Array.from(input.files) : [];
+        if (files.length === 0) {
+            console.info('File selection cancelled by user.');
+            this.handleCancel();
+            if (input) {
+                input.value = '';
+            }
+            return;
+        }
+        const prepared = files.map(async (file) => {
+            const preparedFile = await this.prepareImageFile(file);
+            return KritzelImage.fromBlob(this._core, preparedFile);
+        });
+        Promise.allSettled(prepared)
+            .then(results => {
+            const images = [];
+            for (const result of results) {
+                if (result.status === 'fulfilled') {
+                    images.push(result.value);
+                }
+                else {
+                    console.error('Error during image compression or processing:', result.reason);
+                }
+            }
+            if (images.length === 0) {
+                this.handleCancel();
+                return;
+            }
+            this.addImagesToStore(images);
+        });
+        if (input) {
+            input.value = '';
+        }
+    }
+    /**
+     * Prepares an image file for insertion by compressing it if necessary.
+     * @param file
+     * @returns
+     */
+    async prepareImageFile(file) {
+        if (KritzelImageFileHelper.isGifFile(file)) {
+            return file;
+        }
+        return imageCompression(file, { maxWidthOrHeight: this.maxCompressionSize });
+    }
+    /**
+     * Adds a batch of prepared images to the canvas store and switches
+     * to the selection tool. The first image is centered in the viewport;
+     * each subsequent image is offset diagonally so multiple imports do
+     * not fully overlap. All images are selected together and a single
+     * batch change/added event is emitted.
+     *
+     * @param images - The prepared `KritzelImage` objects to add
+     */
+    addImagesToStore(images) {
+        const baseZIndex = this._core.store.currentZIndex;
+        images.forEach((image, index) => {
+            image.zIndex = baseZIndex + index;
+            image.centerInViewport();
+            if (index > 0) {
+                const offset = index * this.multiImportOffset;
+                image.updatePosition(image.translateX + offset, image.translateY + offset);
+            }
+            this._core.addObject(image);
+        });
+        this._core.store.setState('activeTool', this._core.toolRegistry.getTool('selection'));
+        this._core.selectObjects(images);
+        this._core.engine.emitObjectsChange();
+        this._core.engine.emitObjectsAdded(images);
+    }
+    /**
+     * Handles cancellation of the file picker or errors during image processing.
+     * Switches back to the selection tool without adding any image.
+     */
+    handleCancel() {
+        this._core.store.setState('activeTool', this._core.toolRegistry.getTool('selection'));
+    }
+}

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

@@ -0,0 +1,249 @@
+import { KritzelEventHelper } from "../../helpers/event.helper";
+import { KritzelLine } from "../objects/line.class";
+import { KritzelBaseTool } from "./base-tool.class";
+import { KritzelSelectionGroup } from "../objects/selection-group.class";
+import { DEFAULT_COLOR_PALETTE } from "../../constants/color-palette.constants";
+import { DEFAULT_STROKE_SIZES } from "../../constants/stroke-size.constants";
+/**
+ * Line tool for drawing straight lines on the canvas.
+ * Creates lines by tracking the start and end points of a drag gesture.
+ * Supports configurable stroke color, width, opacity, and arrow heads.
+ * Automatically switches to selection tool after line completion.
+ */
+export class KritzelLineTool extends KritzelBaseTool {
+    toolType = 'line';
+    /** The stroke color of the line (supports theme-aware light/dark colors) */
+    color = DEFAULT_COLOR_PALETTE[0];
+    /** The stroke width of the line in pixels */
+    size = 4;
+    /** The opacity of the line (0-1) */
+    opacity = 1;
+    /** Available color palette for the line tool */
+    palette = [...DEFAULT_COLOR_PALETTE];
+    /** Available stroke size presets for the line tool */
+    sizes = [...DEFAULT_STROKE_SIZES];
+    /** Arrow head configuration for lines created with this tool */
+    arrows;
+    /** X coordinate of the line's starting point */
+    _startX = 0;
+    /** Y coordinate of the line's starting point */
+    _startY = 0;
+    /** Tracks the ID of the line currently being drawn */
+    _currentLineId = null;
+    /**
+     * Creates a new instance of KritzelLineTool.
+     * @param core - The KritzelCore instance that provides access to application state and functionality
+     */
+    constructor(core) {
+        super(core);
+    }
+    /**
+     * Handles pointer down events to start drawing a new line.
+     * Creates a new KritzelLine object at the pointer position with start and end points at the same location.
+     * Supports both mouse (left-click) and touch/pen input.
+     * @param event - The PointerEvent containing pointer position and input type information
+     */
+    handlePointerDown(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        if (event.pointerType === 'mouse') {
+            if (KritzelEventHelper.isLeftClick(event)) {
+                this._core.store.state.isDrawing = true;
+                const viewportScale = this._core.store.state.scale;
+                const lockScale = this._core.store.state.lockDrawingScale;
+                const divider = lockScale ? viewportScale : 1;
+                const x = (event.clientX - this._core.store.offsetX) / divider;
+                const y = (event.clientY - this._core.store.offsetY) / divider;
+                this._startX = x;
+                this._startY = y;
+                const line = KritzelLine.create(this._core, {
+                    startX: x,
+                    startY: y,
+                    endX: x,
+                    endY: y,
+                    translateX: -this._core.store.state.translateX / divider,
+                    translateY: -this._core.store.state.translateY / divider,
+                    scale: lockScale ? 1 : viewportScale,
+                    stroke: this.color,
+                    strokeWidth: this.size,
+                    opacity: this.opacity,
+                    arrows: this.arrows,
+                });
+                line.isCompleted = false;
+                this._currentLineId = line.id;
+                this._core.store.objects.insert(line);
+                this._core.store.objects?.setActiveDrawingObject(line.id);
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            if (activePointers.length === 1) {
+                const viewportScale = this._core.store.state.scale;
+                const lockScale = this._core.store.state.lockDrawingScale;
+                const divider = lockScale ? viewportScale : 1;
+                const x = Math.round((activePointers[0].clientX - this._core.store.offsetX) / divider);
+                const y = Math.round((activePointers[0].clientY - this._core.store.offsetY) / divider);
+                this._core.store.state.isDrawing = true;
+                this._startX = x;
+                this._startY = y;
+                const line = KritzelLine.create(this._core, {
+                    startX: x,
+                    startY: y,
+                    endX: x,
+                    endY: y,
+                    translateX: -this._core.store.state.translateX / divider,
+                    translateY: -this._core.store.state.translateY / divider,
+                    scale: lockScale ? 1 : viewportScale,
+                    stroke: this.color,
+                    strokeWidth: this.size,
+                    opacity: this.opacity,
+                    arrows: this.arrows,
+                });
+                line.isCompleted = false;
+                this._currentLineId = line.id;
+                this._core.store.objects.insert(line);
+                this._core.store.objects?.setActiveDrawingObject(line.id);
+            }
+        }
+    }
+    /**
+     * Handles pointer move events to update the line's end point while drawing.
+     * Updates the current line's end coordinates to follow the pointer position.
+     * Only processes events when actively drawing (isDrawing state is true).
+     * @param event - The PointerEvent containing the current pointer position
+     */
+    handlePointerMove(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        if (event.pointerType === 'mouse') {
+            if (this._core.store.state.isDrawing && this._currentLineId) {
+                const currentLine = this._core.store.objects.findById(this._currentLineId);
+                if (currentLine) {
+                    const viewportScale = this._core.store.state.scale;
+                    const lockScale = this._core.store.state.lockDrawingScale;
+                    const divider = lockScale ? viewportScale : 1;
+                    const x = (event.clientX - this._core.store.offsetX) / divider;
+                    const y = (event.clientY - this._core.store.offsetY) / divider;
+                    const updatedLine = KritzelLine.create(this._core, {
+                        startX: this._startX,
+                        startY: this._startY,
+                        endX: x,
+                        endY: y,
+                        translateX: -this._core.store.state.translateX / divider,
+                        translateY: -this._core.store.state.translateY / divider,
+                        scale: lockScale ? 1 : viewportScale,
+                        stroke: this.color,
+                        strokeWidth: this.size,
+                        opacity: this.opacity,
+                        arrows: this.arrows,
+                    });
+                    updatedLine.id = currentLine.id;
+                    updatedLine.workspaceId = currentLine.workspaceId;
+                    updatedLine.zIndex = currentLine.zIndex;
+                    updatedLine.isCompleted = false;
+                    this._core.store.objects.update(updatedLine);
+                }
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            if (activePointers.length === 1 && this._currentLineId) {
+                const currentLine = this._core.store.objects.findById(this._currentLineId);
+                if (currentLine) {
+                    const viewportScale = this._core.store.state.scale;
+                    const lockScale = this._core.store.state.lockDrawingScale;
+                    const divider = lockScale ? viewportScale : 1;
+                    const x = Math.round((activePointers[0].clientX - this._core.store.offsetX) / divider);
+                    const y = Math.round((activePointers[0].clientY - this._core.store.offsetY) / divider);
+                    const updatedLine = KritzelLine.create(this._core, {
+                        startX: this._startX,
+                        startY: this._startY,
+                        endX: x,
+                        endY: y,
+                        translateX: -this._core.store.state.translateX / divider,
+                        translateY: -this._core.store.state.translateY / divider,
+                        scale: lockScale ? 1 : viewportScale,
+                        stroke: this.color,
+                        strokeWidth: this.size,
+                        opacity: this.opacity,
+                        arrows: this.arrows,
+                    });
+                    updatedLine.id = currentLine.id;
+                    updatedLine.workspaceId = currentLine.workspaceId;
+                    updatedLine.zIndex = currentLine.zIndex;
+                    updatedLine.isCompleted = false;
+                    this._core.store.objects.update(updatedLine);
+                }
+            }
+        }
+    }
+    /**
+     * Handles pointer up events to complete the current line.
+     * Marks the line as completed, updates the store, emits an objects change event,
+     * and switches to selection tool with the drawn line selected.
+     * @param event - The PointerEvent indicating the end of the drawing gesture
+     */
+    handlePointerUp(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        if (event.pointerType === 'mouse') {
+            if (this._core.store.state.isDrawing) {
+                this._core.store.state.isDrawing = false;
+                if (this._currentLineId) {
+                    const currentLine = this._core.store.objects.findById(this._currentLineId);
+                    if (currentLine) {
+                        currentLine.isCompleted = true;
+                        this._core.store.objects.update(currentLine);
+                        this._core.engine.emitObjectsChange();
+                        this._core.engine.emitObjectsAdded([currentLine]);
+                        // Switch to selection tool and select the drawn line
+                        this.selectLineAndSwitchTool(currentLine);
+                    }
+                    this._core.store.objects?.setActiveDrawingObject(null);
+                    this._currentLineId = null;
+                    this._core.store.objects?.stopUndoCapturing();
+                }
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            if (this._core.store.state.isDrawing) {
+                this._core.store.state.isDrawing = false;
+                if (this._currentLineId) {
+                    const currentLine = this._core.store.objects.findById(this._currentLineId);
+                    if (currentLine) {
+                        currentLine.isCompleted = true;
+                        this._core.store.objects.update(currentLine);
+                        this._core.engine.emitObjectsChange();
+                        this._core.engine.emitObjectsAdded([currentLine]);
+                        // Switch to selection tool and select the drawn line
+                        this.selectLineAndSwitchTool(currentLine);
+                    }
+                    this._core.store.objects?.setActiveDrawingObject(null);
+                    this._currentLineId = null;
+                    this._core.store.objects?.stopUndoCapturing();
+                }
+            }
+        }
+    }
+    /**
+     * Creates a selection group with the drawn line, selects it, and switches to the selection tool.
+     * This provides immediate editing capability for the newly drawn line.
+     * @param line - The KritzelLine object to select
+     */
+    selectLineAndSwitchTool(line) {
+        // Create a selection group with the drawn line
+        const selectionGroup = KritzelSelectionGroup.create(this._core);
+        selectionGroup.addOrRemove(line);
+        selectionGroup.isSelected = true;
+        selectionGroup.rotation = line.rotation;
+        // Add the selection group
+        this._core.addSelectionGroup(selectionGroup);
+        // Switch to selection tool
+        this._core.store.setState('activeTool', this._core.toolRegistry.getTool('selection'));
+        // Rerender
+        this._core.rerender();
+    }
+}