kritzel-react 0.1.32 → 0.1.34

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

@@ -1,161 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,187 +0,0 @@
-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();
-    }
-}