kritzel-react 0.1.30 → 0.1.32

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

@@ -0,0 +1,100 @@
+import { KritzelText } from '../objects/text.class';
+import { KritzelBaseTool } from './base-tool.class';
+import { KritzelEventHelper } from '../../helpers/event.helper';
+import { KritzelToolRegistry } from '../registries/tool.registry';
+import { DEFAULT_COLOR_PALETTE } from '../../constants/color-palette.constants';
+export class KritzelTextTool extends KritzelBaseTool {
+    constructor(core) {
+        super(core);
+        this.fontFamily = 'Arial';
+        this.fontSize = 16;
+        this.fontColor = DEFAULT_COLOR_PALETTE[0];
+        this.opacity = 1;
+        this.palette = [...DEFAULT_COLOR_PALETTE];
+    }
+    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 activeText = this._core.store.activeText;
+            if (activeText === null && object instanceof KritzelText) {
+                object.edit(event);
+                return;
+            }
+            if (activeText !== null && object instanceof KritzelText) {
+                activeText.save();
+                object.edit(event);
+                return;
+            }
+            if (activeText !== null && object instanceof KritzelText === false) {
+                this._core.resetActiveText();
+                this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+                return;
+            }
+            if (KritzelEventHelper.isLeftClick(event) === false) {
+                return;
+            }
+            const clientX = event.clientX - this._core.store.offsetX;
+            const clientY = event.clientY - this._core.store.offsetY;
+            const viewportScale = this._core.store.state.scale;
+            const lockScale = this._core.store.state.lockDrawingScale;
+            const text = KritzelText.create(this._core, this.fontSize, this.fontFamily, lockScale ? 1 : viewportScale);
+            text.fontColor = this.fontColor;
+            text.opacity = this.opacity;
+            text.translateX = (clientX - this._core.store.state.translateX) / viewportScale;
+            text.translateY = (clientY - this._core.store.state.translateY) / viewportScale;
+            text.zIndex = this._core.store.currentZIndex;
+            this._core.store.state.objects.insert(text);
+            this._core.rerender();
+            text.edit(event);
+        }
+        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 activeText = this._core.store.activeText;
+            if (activeText === null && object instanceof KritzelText) {
+                object.edit(event);
+                return;
+            }
+            if (activeText !== null && object instanceof KritzelText) {
+                activeText.save();
+                object.edit(event);
+                return;
+            }
+            if (activeText !== null && object instanceof KritzelText === false) {
+                this._core.resetActiveText();
+                this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+                return;
+            }
+            if (activePointers.length > 1) {
+                return;
+            }
+            const clientX = Math.round(activePointers[0].clientX - this._core.store.offsetX);
+            const clientY = Math.round(activePointers[0].clientY - this._core.store.offsetY);
+            const viewportScale = this._core.store.state.scale;
+            const lockScale = this._core.store.state.lockDrawingScale;
+            const text = KritzelText.create(this._core, this.fontSize, this.fontFamily, lockScale ? 1 : viewportScale);
+            text.fontColor = this.fontColor;
+            text.opacity = this.opacity;
+            text.translateX = (clientX - this._core.store.state.translateX) / viewportScale;
+            text.translateY = (clientY - this._core.store.state.translateY) / viewportScale;
+            text.zIndex = this._core.store.currentZIndex;
+            this._core.store.state.objects.insert(text);
+            this._core.rerender();
+            text.edit(event);
+        }
+    }
+    handlePointerUp(event) {
+        var _a;
+        const activeText = this._core.store.activeText;
+        if (activeText && activeText.isMounted && !((_a = activeText.editor) === null || _a === void 0 ? void 0 : _a.hasFocus())) {
+            activeText.focus({ x: event.clientX, y: event.clientY });
+        }
+    }
+}