kritzel-react 0.1.30 → 0.1.32

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

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

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