kritzel-react 0.1.30 → 0.1.32

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

@@ -0,0 +1,161 @@
+import { KritzelEventHelper } from '../../helpers/event.helper';
+import { KritzelPath } from '../objects/path.class';
+import { KritzelBaseTool } from './base-tool.class';
+import { DEFAULT_COLOR_PALETTE } from '../../constants/color-palette.constants';
+export class KritzelBrushTool extends KritzelBaseTool {
+    constructor(core) {
+        super(core);
+        this.color = DEFAULT_COLOR_PALETTE[0];
+        this.size = 6;
+        this.opacity = 1;
+        this.palette = [...DEFAULT_COLOR_PALETTE];
+        this._currentPathId = null;
+    }
+    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;
+                const path = KritzelPath.create(this._core, {
+                    points: [[x, y]],
+                    translateX: -this._core.store.state.translateX / divider,
+                    translateY: -this._core.store.state.translateY / divider,
+                    scale: lockScale ? 1 : viewportScale,
+                    fill: this.color,
+                    strokeWidth: this.size,
+                    opacity: this.opacity,
+                });
+                path.isCompleted = false;
+                this._currentPathId = path.id;
+                this._core.store.state.objects.insert(path);
+            }
+        }
+        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;
+                const path = KritzelPath.create(this._core, {
+                    points: [[x, y]],
+                    translateX: -this._core.store.state.translateX / divider,
+                    translateY: -this._core.store.state.translateY / divider,
+                    scale: lockScale ? 1 : viewportScale,
+                    fill: this.color,
+                    strokeWidth: this.size,
+                    opacity: this.opacity,
+                });
+                path.isCompleted = false;
+                this._currentPathId = path.id;
+                this._core.store.state.objects.insert(path);
+            }
+        }
+    }
+    handlePointerMove(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        if (event.pointerType === 'mouse') {
+            if (this._core.store.state.isDrawing && this._currentPathId) {
+                const matchingObjects = this._core.store.state.objects.filter(o => o.id === this._currentPathId);
+                const currentPath = matchingObjects.length > 0 ? matchingObjects[0] : null;
+                if (currentPath) {
+                    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 updatedPath = KritzelPath.create(this._core, {
+                        points: [...currentPath.points, [x, y]],
+                        translateX: -this._core.store.state.translateX / divider,
+                        translateY: -this._core.store.state.translateY / divider,
+                        scale: lockScale ? 1 : viewportScale,
+                        fill: this.color,
+                        strokeWidth: this.size,
+                        opacity: this.opacity,
+                    });
+                    updatedPath.id = currentPath.id;
+                    updatedPath.workspaceId = currentPath.workspaceId;
+                    updatedPath.zIndex = currentPath.zIndex;
+                    updatedPath.isCompleted = false;
+                    this._core.store.state.objects.update(updatedPath);
+                }
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            if (activePointers.length === 1) {
+                if (this._currentPathId) {
+                    const matchingObjects = this._core.store.state.objects.filter(o => o.id === this._currentPathId);
+                    const currentPath = matchingObjects.length > 0 ? matchingObjects[0] : null;
+                    if (currentPath) {
+                        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 updatedPath = KritzelPath.create(this._core, {
+                            points: [...currentPath.points, [x, y]],
+                            translateX: -this._core.store.state.translateX / divider,
+                            translateY: -this._core.store.state.translateY / divider,
+                            scale: lockScale ? 1 : viewportScale,
+                            fill: this.color,
+                            strokeWidth: this.size,
+                            opacity: this.opacity,
+                        });
+                        updatedPath.id = currentPath.id;
+                        updatedPath.workspaceId = currentPath.workspaceId;
+                        updatedPath.zIndex = currentPath.zIndex;
+                        updatedPath.isCompleted = false;
+                        this._core.store.state.objects.update(updatedPath);
+                    }
+                }
+            }
+        }
+    }
+    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._currentPathId) {
+                    const matchingObjects = this._core.store.state.objects.filter(o => o.id === this._currentPathId);
+                    const currentPath = matchingObjects.length > 0 ? matchingObjects[0] : null;
+                    if (currentPath) {
+                        currentPath.isCompleted = true;
+                        this._core.store.state.objects.update(currentPath);
+                        this._core.engine.emitObjectsChange();
+                    }
+                    this._currentPathId = null;
+                }
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            if (this._core.store.state.isDrawing) {
+                this._core.store.state.isDrawing = false;
+                if (this._currentPathId) {
+                    const matchingObjects = this._core.store.state.objects.filter(o => o.id === this._currentPathId);
+                    const currentPath = matchingObjects.length > 0 ? matchingObjects[0] : null;
+                    if (currentPath) {
+                        currentPath.isCompleted = true;
+                        this._core.store.state.objects.update(currentPath);
+                        this._core.engine.emitObjectsChange();
+                    }
+                    this._currentPathId = null;
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,85 @@
+import { KritzelEventHelper } from '../../helpers/event.helper';
+import { KritzelBaseTool } from './base-tool.class';
+export class KritzelEraserTool extends KritzelBaseTool {
+    constructor(core) {
+        super(core);
+        this.touchStartTimeout = null;
+    }
+    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);
+        }
+    }
+    handlePointerMove(event) {
+        var _a;
+        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 = (_a = this._core.store.state.host) === null || _a === void 0 ? void 0 : _a.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();
+            }
+        }
+    }
+    handlePointerUp(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._core.store.state.isErasing) {
+                const objectsToRemove = this._core.store.allObjects.filter(object => object.markedForRemoval);
+                objectsToRemove.forEach(object => {
+                    object.markedForRemoval = false;
+                    this._core.removeObject(object);
+                });
+                if (objectsToRemove.length > 0) {
+                    this._core.rerender();
+                }
+                this._core.store.state.isErasing = false;
+                this._core.engine.emitObjectsChange();
+            }
+        }
+        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);
+                objectsToRemove.forEach(object => {
+                    object.markedForRemoval = false;
+                    this._core.removeObject(object);
+                });
+                if (objectsToRemove.length > 0) {
+                    this._core.rerender();
+                }
+                this._core.store.state.isErasing = false;
+                this._core.engine.emitObjectsChange();
+            }
+        }
+    }
+}

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

@@ -0,0 +1,83 @@
+import { KritzelImage } from '../objects/image.class';
+import { KritzelBaseTool } from './base-tool.class';
+import imageCompression from 'browser-image-compression';
+import { KritzelToolRegistry } from '../registries/tool.registry';
+export class KritzelImageTool extends KritzelBaseTool {
+    constructor(core) {
+        super(core);
+        this.fileInput = null;
+        this.maxCompressionSize = 300;
+        this.setupFileInput();
+    }
+    onActivate() {
+        this.openFilePicker();
+    }
+    openFilePicker() {
+        if (this._core.store.isDisabled) {
+            return;
+        }
+        this.fileInput.click();
+    }
+    setupFileInput() {
+        this.fileInput = document.createElement('input');
+        this.fileInput.type = 'file';
+        this.fileInput.accept = 'image/*';
+        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);
+    }
+    handleFileSelect(event) {
+        const input = event.target;
+        if (input.files && input.files[0]) {
+            const file = input.files[0];
+            imageCompression(file, {
+                maxWidthOrHeight: this.maxCompressionSize,
+            })
+                .then(compressedFile => {
+                this.readFile(compressedFile);
+            })
+                .catch(error => {
+                console.error('Error during image compression or processing:', error);
+                this.handleCancel();
+            });
+        }
+        else {
+            console.info('File selection cancelled by user.');
+            this.handleCancel();
+        }
+        if (input) {
+            input.value = '';
+        }
+    }
+    readFile(file) {
+        const reader = new FileReader();
+        reader.onload = e => {
+            var _a;
+            const img = new Image();
+            img.src = (_a = e.target) === null || _a === void 0 ? void 0 : _a.result;
+            img.onload = () => this.createKritzelImage(img);
+        };
+        reader.readAsDataURL(file);
+    }
+    createKritzelImage(img) {
+        const image = KritzelImage.create(this._core);
+        const { scaledWidth, scaledHeight } = image.calculateScaledDimensions(img);
+        image.src = img.src;
+        image.width = scaledWidth;
+        image.height = scaledHeight;
+        image.zIndex = this._core.store.currentZIndex;
+        image.centerInViewport();
+        this.addImageToStore(image);
+        return image;
+    }
+    addImageToStore(image) {
+        this._core.addObject(image);
+        this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this._core.selectObjects([image]);
+        this._core.engine.emitObjectsChange();
+    }
+    handleCancel() {
+        this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+    }
+}

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

@@ -0,0 +1,187 @@
+import { KritzelEventHelper } from '../../helpers/event.helper';
+import { KritzelLine } from '../objects/line.class';
+import { KritzelBaseTool } from './base-tool.class';
+import { KritzelToolRegistry } from '../registries/tool.registry';
+import { KritzelSelectionGroup } from '../objects/selection-group.class';
+import { DEFAULT_COLOR_PALETTE } from '../../constants/color-palette.constants';
+export class KritzelLineTool extends KritzelBaseTool {
+    constructor(core) {
+        super(core);
+        this.color = DEFAULT_COLOR_PALETTE[0];
+        this.size = 4;
+        this.opacity = 1;
+        this.palette = [...DEFAULT_COLOR_PALETTE];
+        this._startX = 0;
+        this._startY = 0;
+    }
+    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._core.store.state.objects.insert(line);
+            }
+        }
+        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._core.store.state.objects.insert(line);
+            }
+        }
+    }
+    handlePointerMove(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        if (event.pointerType === 'mouse') {
+            if (this._core.store.state.isDrawing) {
+                const currentLine = this._core.store.currentLine;
+                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.state.objects.update(updatedLine);
+                }
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            if (activePointers.length === 1) {
+                const currentLine = this._core.store.currentLine;
+                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.state.objects.update(updatedLine);
+                }
+            }
+        }
+    }
+    handlePointerUp(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        if (event.pointerType === 'mouse') {
+            if (this._core.store.state.isDrawing) {
+                this._core.store.state.isDrawing = false;
+                const currentLine = this._core.store.currentLine;
+                if (currentLine) {
+                    currentLine.isCompleted = true;
+                    this._core.store.state.objects.update(currentLine);
+                    this._core.engine.emitObjectsChange();
+                    // Switch to selection tool and select the drawn line
+                    this.selectLineAndSwitchTool(currentLine);
+                }
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            if (this._core.store.state.isDrawing) {
+                this._core.store.state.isDrawing = false;
+                const currentLine = this._core.store.currentLine;
+                if (currentLine) {
+                    currentLine.isCompleted = true;
+                    this._core.store.state.objects.update(currentLine);
+                    this._core.engine.emitObjectsChange();
+                    // Switch to selection tool and select the drawn line
+                    this.selectLineAndSwitchTool(currentLine);
+                }
+            }
+        }
+    }
+    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', KritzelToolRegistry.getTool('selection'));
+        // Rerender
+        this._core.rerender();
+    }
+}