kritzel-react 0.1.32 → 0.1.34

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

@@ -1,429 +0,0 @@
-import { KritzelEventHelper } from '../../helpers/event.helper';
-import { KritzelColorHelper } from '../../helpers/color.helper';
-import { KritzelMoveHandler } from '../handlers/move.handler';
-import { KritzelResizeHandler } from '../handlers/resize.handler';
-import { KritzelRotationHandler } from '../handlers/rotation.handler';
-import { KritzelSelectionHandler } from '../handlers/selection.handler';
-import { KritzelSelectionGroup } from '../objects/selection-group.class';
-import { KritzelGroup } from '../objects/group.class';
-import { KritzelBaseTool } from './base-tool.class';
-import { KritzelHoverHandler } from '../handlers/hover.handler';
-import { KritzelLineHandleHandler } from '../handlers/line-handle.handler';
-import { KritzelPath } from '../objects/path.class';
-import { KritzelLine } from '../objects/line.class';
-import { KritzelShape } from '../objects/shape.class';
-import { KritzelText } from '../objects/text.class';
-import { KritzelImage } from '../objects/image.class';
-import { DEFAULT_COLOR_PALETTE } from '../../constants/color-palette.constants';
-export class KritzelSelectionTool extends KritzelBaseTool {
-    /** Returns true if there are objects in the selection group */
-    hasSelection() {
-        return !!this._core.store.selectionGroup && this._core.store.selectionGroup.objects.length > 0;
-    }
-    /** Returns the selected objects or empty array */
-    getSelectedObjects() {
-        var _a, _b;
-        return (_b = (_a = this._core.store.selectionGroup) === null || _a === void 0 ? void 0 : _a.objects) !== null && _b !== void 0 ? _b : [];
-    }
-    flattenObjects(objects) {
-        let result = [];
-        for (const obj of objects) {
-            if (obj instanceof KritzelGroup) {
-                result = result.concat(this.flattenObjects(obj.children));
-            }
-            else {
-                result.push(obj);
-            }
-        }
-        return result;
-    }
-    get color() {
-        const objects = this.flattenObjects(this.getSelectedObjects());
-        if (objects.length === 0)
-            return DEFAULT_COLOR_PALETTE[0];
-        for (const obj of objects) {
-            if (obj instanceof KritzelPath)
-                return obj.fill;
-            if (obj instanceof KritzelLine)
-                return obj.stroke;
-            if (obj instanceof KritzelText)
-                return obj.fontColor;
-            if (obj instanceof KritzelShape)
-                return obj.strokeColor;
-        }
-        return DEFAULT_COLOR_PALETTE[0];
-    }
-    set color(value) {
-        const objects = this.flattenObjects(this.getSelectedObjects());
-        objects.forEach(obj => {
-            if (obj instanceof KritzelPath)
-                this._core.updateObject(obj, { fill: value });
-            if (obj instanceof KritzelLine)
-                this._core.updateObject(obj, { stroke: value });
-            if (obj instanceof KritzelText)
-                this._core.updateObject(obj, { fontColor: value });
-            if (obj instanceof KritzelShape)
-                this._core.updateObject(obj, { strokeColor: value });
-        });
-        this._core.rerender();
-    }
-    get opacity() {
-        const objects = this.flattenObjects(this.getSelectedObjects());
-        if (objects.length === 0)
-            return 1;
-        return objects[0].opacity;
-    }
-    set opacity(value) {
-        const objects = this.flattenObjects(this.getSelectedObjects());
-        objects.forEach(obj => this._core.updateObject(obj, { opacity: value }));
-        this._core.rerender();
-    }
-    get size() {
-        const objects = this.flattenObjects(this.getSelectedObjects());
-        if (objects.length === 0)
-            return 1;
-        for (const obj of objects) {
-            if (obj instanceof KritzelPath)
-                return obj.strokeWidth;
-            if (obj instanceof KritzelLine)
-                return obj.strokeWidth;
-            if (obj instanceof KritzelText)
-                return obj.fontSize;
-            if (obj instanceof KritzelShape)
-                return obj.strokeWidth;
-        }
-        return 1;
-    }
-    set size(value) {
-        const objects = this.flattenObjects(this.getSelectedObjects());
-        objects.forEach(obj => {
-            if (obj instanceof KritzelPath)
-                this._core.updateObject(obj, { strokeWidth: value });
-            if (obj instanceof KritzelLine)
-                this._core.updateObject(obj, { strokeWidth: value });
-            if (obj instanceof KritzelText)
-                this._core.updateObject(obj, { fontSize: value });
-            if (obj instanceof KritzelShape)
-                this._core.updateObject(obj, { strokeWidth: value });
-        });
-        this._core.rerender();
-        this.refreshSelectionGroupDimensions();
-    }
-    get fillColor() {
-        const objects = this.flattenObjects(this.getSelectedObjects());
-        for (const obj of objects) {
-            if (obj instanceof KritzelShape)
-                return obj.fillColor;
-        }
-        return { light: 'transparent', dark: 'transparent' };
-    }
-    set fillColor(value) {
-        const objects = this.flattenObjects(this.getSelectedObjects());
-        objects.forEach(obj => {
-            if (obj instanceof KritzelShape) {
-                // Calculate new font color based on fill color
-                const newFontColor = KritzelColorHelper.determineTextColor(value);
-                this._core.updateObject(obj, { fillColor: value, fontColor: newFontColor });
-                // When switching to fill mode, also update stroke color to match
-                const isTransparent = typeof value === 'string' ? value === 'transparent' :
-                    (value.light === 'transparent' && value.dark === 'transparent');
-                if (!isTransparent) {
-                    this._core.updateObject(obj, { strokeColor: value });
-                }
-            }
-        });
-        this._core.rerender();
-    }
-    get fontFamily() {
-        const objects = this.flattenObjects(this.getSelectedObjects());
-        for (const obj of objects) {
-            if (obj instanceof KritzelText)
-                return obj.fontFamily;
-            if (obj instanceof KritzelShape)
-                return obj.fontFamily;
-        }
-        return 'Arial';
-    }
-    set fontFamily(value) {
-        const objects = this.flattenObjects(this.getSelectedObjects());
-        objects.forEach(obj => {
-            if (obj instanceof KritzelText)
-                this._core.updateObject(obj, { fontFamily: value });
-            if (obj instanceof KritzelShape)
-                this._core.updateObject(obj, { fontFamily: value });
-        });
-        this._core.rerender();
-        this.refreshSelectionGroupDimensions();
-    }
-    get arrows() {
-        const objects = this.flattenObjects(this.getSelectedObjects());
-        for (const obj of objects) {
-            if (obj instanceof KritzelLine)
-                return obj.arrows;
-        }
-        return { start: { enabled: false }, end: { enabled: false } };
-    }
-    set arrows(value) {
-        const objects = this.flattenObjects(this.getSelectedObjects());
-        objects.forEach(obj => {
-            if (obj instanceof KritzelLine)
-                this._core.updateObject(obj, { arrows: value });
-        });
-        this._core.rerender();
-        this.refreshSelectionGroupDimensions();
-    }
-    /** Returns the tool config for selected objects, or null if no selection */
-    getToolConfig() {
-        if (!this.hasSelection())
-            return null;
-        const objects = this.flattenObjects(this.getSelectedObjects());
-        const controls = [];
-        const hasShape = objects.some(o => o instanceof KritzelShape);
-        const hasText = objects.some(o => o instanceof KritzelText);
-        const hasLine = objects.some(o => o instanceof KritzelLine);
-        const hasImage = objects.some(o => o instanceof KritzelImage);
-        const hasStroke = objects.some(o => o instanceof KritzelPath || o instanceof KritzelLine || o instanceof KritzelShape);
-        // If only images are selected, return config with opacity only (no palette, no controls)
-        if (hasImage && !hasShape && !hasText && !hasLine && !hasStroke) {
-            return {
-                type: 'selection',
-                colorProperty: 'color',
-                sizeProperty: 'size',
-                opacityProperty: 'opacity',
-                paletteSource: 'none',
-                controls: [],
-            };
-        }
-        if (hasText && !hasStroke) {
-            controls.push({ type: 'font-size', propertyName: 'size' });
-            controls.push({ type: 'font-family', propertyName: 'fontFamily' });
-        }
-        else if (hasStroke && !hasText) {
-            controls.push({ type: 'stroke-size', propertyName: 'size' });
-        }
-        else {
-            if (hasStroke)
-                controls.push({ type: 'stroke-size', propertyName: 'size' });
-            if (hasText)
-                controls.push({ type: 'font-family', propertyName: 'fontFamily' });
-        }
-        if (hasLine) {
-            controls.push({ type: 'line-endings', propertyName: 'arrows' });
-        }
-        if (hasShape) {
-            controls.push({ type: 'shape-fill', propertyName: 'fillColor' });
-        }
-        return {
-            type: 'selection',
-            colorProperty: 'color',
-            sizeProperty: 'size',
-            opacityProperty: 'opacity',
-            paletteSource: 'palette',
-            controls,
-        };
-    }
-    /**
-     * Refreshes the selection group's dimensions after object properties that affect size have changed.
-     * Uses requestAnimationFrame to ensure the DOM has been updated before measuring.
-     */
-    refreshSelectionGroupDimensions() {
-        const selectionGroup = this._core.store.selectionGroup;
-        if (selectionGroup) {
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    selectionGroup.refreshObjectDimensions();
-                    this._core.rerender();
-                });
-            });
-        }
-    }
-    constructor(core) {
-        super(core);
-        this.palette = [...DEFAULT_COLOR_PALETTE];
-        this.selectionHandler = new KritzelSelectionHandler(this._core);
-        this.moveHandler = new KritzelMoveHandler(this._core);
-        this.hoverHandler = new KritzelHoverHandler(this._core);
-        this.resizeHandler = new KritzelResizeHandler(this._core);
-        this.rotationHandler = new KritzelRotationHandler(this._core);
-        this.lineHandleHandler = new KritzelLineHandleHandler(this._core);
-    }
-    handlePointerDown(event) {
-        if (event.cancelable) {
-            event.preventDefault();
-        }
-        if (event.pointerType === 'mouse') {
-            if (KritzelEventHelper.isLeftClick(event)) {
-                this._core.store.state.isResizeHandleSelected = this.isHandleSelected(event);
-                this._core.store.state.isRotationHandleSelected = this.isRotationHandleSelected(event);
-                this._core.store.state.isLineHandleSelected = this.isLineHandleSelected(event);
-                this._core.store.state.resizeHandleType = this.getHandleType(event);
-                this._core.store.state.lineHandleType = this.getLineHandleType(event);
-                const selectedObject = this.getSelectedObject(event);
-                const selectionGroup = this._core.store.selectionGroup;
-                const isDifferentObject = selectedObject && selectionGroup && selectedObject.id !== selectionGroup.id;
-                if ((selectedObject === null || isDifferentObject) &&
-                    selectionGroup &&
-                    !this._core.store.state.isResizeHandleSelected &&
-                    !this._core.store.state.isRotationHandleSelected &&
-                    !this._core.store.state.isLineHandleSelected) {
-                    this._core.removeSelectionGroup();
-                    this._core.rerender();
-                }
-                if (selectedObject && selectedObject.isSelected === false && (selectedObject === null || selectedObject === void 0 ? void 0 : selectedObject.objects.length) === 1 && selectedObject.objects[0].isInteractive) {
-                    return;
-                }
-            }
-            this.lineHandleHandler.handlePointerDown(event);
-            this.moveHandler.handlePointerDown(event);
-            this.selectionHandler.handlePointerDown(event);
-            this.resizeHandler.handlePointerDown(event);
-            this.rotationHandler.handlePointerDown(event);
-            this._core.rerender();
-        }
-        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
-            if (this._core.store.state.isScaling === true) {
-                return;
-            }
-            if (this._core.store.state.pointers.size === 1) {
-                this._core.store.state.isResizeHandleSelected = this.isHandleSelected(event);
-                this._core.store.state.isRotationHandleSelected = this.isRotationHandleSelected(event);
-                this._core.store.state.isLineHandleSelected = this.isLineHandleSelected(event);
-                this._core.store.state.resizeHandleType = this.getHandleType(event);
-                this._core.store.state.lineHandleType = this.getLineHandleType(event);
-                const selectedObject = this.getSelectedObject(event);
-                const selectionGroup = this._core.store.selectionGroup;
-                const isDifferentObject = selectedObject && selectionGroup && selectedObject.id !== selectionGroup.id;
-                if (!selectionGroup && selectedObject) {
-                    this._core.store.state.skipContextMenu = true;
-                }
-                if ((selectedObject === null || isDifferentObject) &&
-                    selectionGroup &&
-                    !this._core.store.state.isResizeHandleSelected &&
-                    !this._core.store.state.isRotationHandleSelected &&
-                    !this._core.store.state.isLineHandleSelected) {
-                    this._core.removeSelectionGroup();
-                    this._core.rerender();
-                }
-            }
-            this.lineHandleHandler.handlePointerDown(event);
-            this.rotationHandler.handlePointerDown(event);
-            this.resizeHandler.handlePointerDown(event);
-            this.moveHandler.handlePointerDown(event);
-            this.selectionHandler.handlePointerDown(event);
-            this._core.rerender();
-        }
-    }
-    handlePointerMove(event) {
-        if (event.cancelable) {
-            event.preventDefault();
-        }
-        if (event.pointerType === 'mouse') {
-            this.lineHandleHandler.handlePointerMove(event);
-            this.moveHandler.handlePointerMove(event);
-            this.hoverHandler.handlePointerMove(event);
-            this.selectionHandler.handlePointerMove(event);
-            this.resizeHandler.handlePointerMove(event);
-            this.rotationHandler.handlePointerMove(event);
-            this._core.rerender();
-        }
-        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
-            if (this._core.store.state.isScaling === true) {
-                return;
-            }
-            this.lineHandleHandler.handlePointerMove(event);
-            this.rotationHandler.handlePointerMove(event);
-            this.resizeHandler.handlePointerMove(event);
-            this.moveHandler.handlePointerMove(event);
-            this.selectionHandler.handlePointerMove(event);
-            this._core.rerender();
-        }
-    }
-    handlePointerUp(event) {
-        if (event.cancelable) {
-            event.preventDefault();
-        }
-        if (event.pointerType === 'mouse') {
-            this.lineHandleHandler.handlePointerUp(event);
-            this.moveHandler.handlePointerUp(event);
-            this.resizeHandler.handlePointerUp(event);
-            this.rotationHandler.handlePointerUp(event);
-            this.selectionHandler.handlePointerUp(event);
-            this._core.rerender();
-        }
-        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
-            if (this._core.store.state.isScaling === true) {
-                return;
-            }
-            this.lineHandleHandler.handlePointerUp(event);
-            this.rotationHandler.handlePointerUp(event);
-            this.resizeHandler.handlePointerUp(event);
-            this.moveHandler.handlePointerUp(event);
-            this.selectionHandler.handlePointerUp(event);
-            this._core.rerender();
-        }
-    }
-    getSelectedObject(event) {
-        const path = event.composedPath().slice(1);
-        const objectElement = path.find(element => element.classList && element.classList.contains('object'));
-        const object = this._core.findObjectById(objectElement === null || objectElement === void 0 ? void 0 : objectElement.id);
-        if (!object) {
-            return null;
-        }
-        const { x, y } = this._core.getCanvasPoint(event);
-        if (!object.hitTest(x, y)) {
-            return null;
-        }
-        if (object instanceof KritzelSelectionGroup) {
-            return object;
-        }
-        else {
-            const group = KritzelSelectionGroup.create(this._core);
-            group.translateX = 0;
-            group.translateY = 0;
-            group.addOrRemove(object);
-            return group;
-        }
-    }
-    getHandleType(event) {
-        var _a;
-        const shadowRoot = (_a = this._core.store.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
-        if (!shadowRoot)
-            return;
-        const elementsAtPoint = shadowRoot.elementsFromPoint(event.clientX, event.clientY);
-        const handle = elementsAtPoint.find(el => el.classList.contains('resize-handle-overlay'));
-        return handle === null || handle === void 0 ? void 0 : handle.classList[1];
-    }
-    isHandleSelected(event) {
-        var _a;
-        const shadowRoot = (_a = this._core.store.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
-        if (!shadowRoot)
-            return false;
-        const elementsAtPoint = shadowRoot.elementsFromPoint(event.clientX, event.clientY);
-        return elementsAtPoint.some(el => el.classList.contains('resize-handle-overlay'));
-    }
-    isRotationHandleSelected(event) {
-        var _a;
-        const shadowRoot = (_a = this._core.store.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
-        if (!shadowRoot)
-            return false;
-        const elementsAtPoint = shadowRoot.elementsFromPoint(event.clientX, event.clientY);
-        return elementsAtPoint.some(el => el.classList.contains('rotation-handle-overlay'));
-    }
-    isLineHandleSelected(event) {
-        var _a;
-        const shadowRoot = (_a = this._core.store.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
-        if (!shadowRoot)
-            return false;
-        const elementsAtPoint = shadowRoot.elementsFromPoint(event.clientX, event.clientY);
-        return elementsAtPoint.some(el => el.classList.contains('selection-line-handle-overlay'));
-    }
-    getLineHandleType(event) {
-        var _a;
-        const shadowRoot = (_a = this._core.store.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
-        if (!shadowRoot)
-            return;
-        const elementsAtPoint = shadowRoot.elementsFromPoint(event.clientX, event.clientY);
-        const handle = elementsAtPoint.find(el => el.classList.contains('selection-line-handle-overlay'));
-        return handle === null || handle === void 0 ? void 0 : handle.classList[1];
-    }
-}

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

@@ -1,196 +0,0 @@
-import { KritzelShape } from '../objects/shape.class';
-import { KritzelBaseTool } from './base-tool.class';
-import { KritzelEventHelper } from '../../helpers/event.helper';
-import { KritzelToolRegistry } from '../registries/tool.registry';
-import { ShapeType } from '../../enums/shape-type.enum';
-import { DEFAULT_COLOR_PALETTE } from '../../constants/color-palette.constants';
-export class KritzelShapeTool extends KritzelBaseTool {
-    constructor(core) {
-        super(core);
-        this.shapeType = ShapeType.Rectangle;
-        this.fillColor = { light: 'transparent', dark: 'transparent' };
-        this.strokeColor = DEFAULT_COLOR_PALETTE[0];
-        this.strokeWidth = 4;
-        this.opacity = 1;
-        this.fontFamily = 'Arial';
-        this.fontSize = 16;
-        this.fontColor = DEFAULT_COLOR_PALETTE[0];
-        this.palette = [...DEFAULT_COLOR_PALETTE];
-        this.startX = 0;
-        this.startY = 0;
-        this.isDrawing = false;
-        this.currentShape = null;
-    }
-    handlePointerDown(event) {
-        if (event.cancelable) {
-            event.preventDefault();
-        }
-        if (event.pointerType === 'mouse') {
-            const path = event.composedPath().slice(1);
-            const objectElement = path.find(element => element.classList && element.classList.contains('object'));
-            const object = this._core.findObjectById(objectElement === null || objectElement === void 0 ? void 0 : objectElement.id);
-            const activeShape = this._core.store.activeShape;
-            if (activeShape === null && object instanceof KritzelShape) {
-                object.edit(event);
-                return;
-            }
-            if (activeShape !== null && object instanceof KritzelShape) {
-                activeShape.save();
-                object.edit(event);
-                return;
-            }
-            if (activeShape !== null && object instanceof KritzelShape === false) {
-                this._core.resetActiveShape();
-                this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-                return;
-            }
-            if (KritzelEventHelper.isLeftClick(event) === false) {
-                return;
-            }
-            this.startDrawing(event.clientX, event.clientY);
-        }
-        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
-            const activePointers = Array.from(this._core.store.state.pointers.values());
-            const path = event.composedPath().slice(1);
-            const objectElement = path.find(element => element.classList && element.classList.contains('object'));
-            const object = this._core.findObjectById(objectElement === null || objectElement === void 0 ? void 0 : objectElement.id);
-            const activeShape = this._core.store.activeShape;
-            if (activeShape === null && object instanceof KritzelShape) {
-                object.edit(event);
-                return;
-            }
-            if (activeShape !== null && object instanceof KritzelShape) {
-                activeShape.save();
-                object.edit(event);
-                return;
-            }
-            if (activeShape !== null && object instanceof KritzelShape === false) {
-                this._core.resetActiveShape();
-                this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-                return;
-            }
-            if (activePointers.length > 1) {
-                return;
-            }
-            const clientX = Math.round(activePointers[0].clientX);
-            const clientY = Math.round(activePointers[0].clientY);
-            this.startDrawing(clientX, clientY);
-        }
-    }
-    handlePointerMove(event) {
-        if (event.cancelable) {
-            event.preventDefault();
-        }
-        if (!this.isDrawing || !this.currentShape) {
-            return;
-        }
-        if (event.pointerType === 'mouse') {
-            this.updateShapeSize(event.clientX, event.clientY);
-        }
-        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
-            const activePointers = Array.from(this._core.store.state.pointers.values());
-            if (activePointers.length === 1) {
-                const clientX = Math.round(activePointers[0].clientX);
-                const clientY = Math.round(activePointers[0].clientY);
-                this.updateShapeSize(clientX, clientY);
-            }
-        }
-    }
-    handlePointerUp(event) {
-        if (event.cancelable) {
-            event.preventDefault();
-        }
-        if (!this.isDrawing || !this.currentShape) {
-            return;
-        }
-        this.finishDrawing();
-    }
-    /**
-     * Start drawing a shape. Following the same pattern as LineTool/BrushTool:
-     * - Store screen coordinates for startX, startY
-     * - Set translateX/Y to -viewportTranslateX/Y (viewport offset)
-     * - Set x, y to the actual screen position
-     * - Let updateDimensions() convert to world coordinates
-     */
-    startDrawing(clientX, clientY) {
-        // Store screen coordinates (relative to host element)
-        const viewportScale = this._core.store.state.scale;
-        const lockScale = this._core.store.state.lockDrawingScale;
-        const divider = lockScale ? viewportScale : 1;
-        this.startX = (clientX - this._core.store.offsetX) / divider;
-        this.startY = (clientY - this._core.store.offsetY) / divider;
-        this.isDrawing = true;
-        // Create shape using screen coordinates, following Path/Line pattern
-        this.currentShape = KritzelShape.create(this._core, {
-            x: this.startX,
-            y: this.startY,
-            translateX: -this._core.store.state.translateX / divider,
-            translateY: -this._core.store.state.translateY / divider,
-            width: 1,
-            height: 1,
-            shapeType: this.shapeType,
-            fillColor: this.fillColor,
-            strokeColor: this.strokeColor,
-            strokeWidth: this.strokeWidth,
-            opacity: this.opacity,
-            fontSize: this.fontSize,
-            fontFamily: this.fontFamily,
-            scale: lockScale ? 1 : viewportScale,
-        });
-        this._core.store.state.objects.insert(this.currentShape);
-        this._core.rerender();
-    }
-    /**
-     * Update shape size during drawing. Following the same pattern as LineTool:
-     * - Use screen coordinates directly
-     * - The shape's x, y, width, height are all in screen space
-     * - updateDimensions() handles conversion to world coordinates
-     */
-    updateShapeSize(clientX, clientY) {
-        if (!this.currentShape) {
-            return;
-        }
-        const viewportScale = this._core.store.state.scale;
-        const lockScale = this._core.store.state.lockDrawingScale;
-        const divider = lockScale ? viewportScale : 1;
-        const currentX = (clientX - this._core.store.offsetX) / divider;
-        const currentY = (clientY - this._core.store.offsetY) / divider;
-        // Calculate bounding box in screen coordinates
-        const minX = Math.min(this.startX, currentX);
-        const minY = Math.min(this.startY, currentY);
-        const width = Math.abs(currentX - this.startX);
-        const height = Math.abs(currentY - this.startY);
-        // Update shape with screen coordinates
-        this.currentShape.x = minX;
-        this.currentShape.y = minY;
-        this.currentShape.width = Math.max(1, width);
-        this.currentShape.height = Math.max(1, height);
-        // Recalculate world-space translateX/Y
-        // Reset translateX/Y to initial value before updateDimensions
-        this.currentShape.translateX = -this._core.store.state.translateX / divider;
-        this.currentShape.translateY = -this._core.store.state.translateY / divider;
-        this.currentShape.updateDimensions();
-        this._core.store.state.objects.update(this.currentShape);
-    }
-    finishDrawing() {
-        if (!this.currentShape) {
-            return;
-        }
-        // Remove shape if it's too small (likely an accidental click)
-        // Compare in screen space
-        if (this.currentShape.width < 10 && this.currentShape.height < 10) {
-            const shapeId = this.currentShape.id;
-            this._core.store.state.objects.remove(o => o.id === shapeId);
-        }
-        else {
-            this.currentShape.zIndex = this._core.store.currentZIndex;
-            this._core.store.state.objects.update(this.currentShape);
-            this._core.engine.emitObjectsChange();
-            this._core.selectObjects([this.currentShape]);
-            this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-        }
-        this.isDrawing = false;
-        this.currentShape = null;
-        this._core.rerender();
-    }
-}