kritzel-stencil 0.0.126 → 0.0.128

package/dist/collection/classes/tools/text-tool.class.js

@@ -0,0 +1,116 @@
+import { KritzelText } from "../objects/text.class";
+import { KritzelBaseTool } from "./base-tool.class";
+import { AddObjectCommand } from "../commands/add-object.command";
+import { KritzelEventHelper } from "../../helpers/event.helper";
+import { KritzelToolRegistry } from "../registries/tool.registry";
+import { KritzelKeyboardHelper } from "../../helpers/keyboard.helper";
+export class KritzelTextTool extends KritzelBaseTool {
+    constructor(store) {
+        super(store);
+        this.fontFamily = 'Arial';
+        this.fontSize = 16;
+        this.fontColor = '#000000';
+        this.palette = [
+            '#000000',
+            '#FFFFFF',
+            '#FF0000',
+            '#00FF00',
+            '#0000FF',
+            '#FFFF00',
+            '#FF00FF',
+            '#00FFFF',
+            '#808080',
+            '#C0C0C0',
+            '#800000',
+            '#008000',
+            '#000080',
+            '#808000',
+            '#800080',
+        ];
+    }
+    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._store.findObjectById(objectElement === null || objectElement === void 0 ? void 0 : objectElement.id);
+            if (this._store.state.activeText === null && object && object instanceof KritzelText) {
+                this._store.state.activeText = object;
+                object.focus();
+                return;
+            }
+            if (this._store.state.activeText !== null && object instanceof KritzelText) {
+                object.focus();
+                return;
+            }
+            if (this._store.state.activeText !== null) {
+                this._store.resetActiveText();
+                this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+                return;
+            }
+            if (KritzelEventHelper.isLeftClick(event) === false) {
+                return;
+            }
+            const clientX = event.clientX - this._store.offsetX;
+            const clientY = event.clientY - this._store.offsetY;
+            const text = KritzelText.create(this._store, this.fontSize, this.fontFamily);
+            text.fontColor = this.fontColor;
+            text.translateX = (clientX - this._store.state.translateX) / this._store.state.scale;
+            text.translateY = (clientY - this._store.state.translateY) / this._store.state.scale;
+            text.zIndex = this._store.currentZIndex;
+            this._store.state.activeText = text;
+            this._store.history.executeCommand(new AddObjectCommand(this._store, this, text));
+        }
+        if (event.pointerType === 'touch') {
+            const activePointers = Array.from(this._store.state.pointers.values());
+            const path = event.composedPath().slice(1);
+            const objectElement = path.find(element => element.classList && element.classList.contains('object'));
+            const object = this._store.findObjectById(objectElement === null || objectElement === void 0 ? void 0 : objectElement.id);
+            if (this._store.state.activeText === null && object && object instanceof KritzelText) {
+                this._store.state.activeText = object;
+                object.focus();
+                return;
+            }
+            if (this._store.state.activeText !== null && object instanceof KritzelText) {
+                object.focus();
+                return;
+            }
+            if (this._store.state.activeText !== null) {
+                this._store.resetActiveText();
+                this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+                return;
+            }
+            if (activePointers.length > 1) {
+                return;
+            }
+            KritzelKeyboardHelper.disableInteractiveWidget();
+            const clientX = Math.round(activePointers[0].clientX - this._store.offsetX);
+            const clientY = Math.round(activePointers[0].clientY - this._store.offsetY);
+            const text = KritzelText.create(this._store, this.fontSize, this.fontFamily);
+            text.fontColor = this.fontColor;
+            text.translateX = (clientX - this._store.state.translateX) / this._store.state.scale;
+            text.translateY = (clientY - this._store.state.translateY) / this._store.state.scale;
+            text.zIndex = this._store.currentZIndex;
+            this._store.state.activeText = text;
+            this._store.history.executeCommand(new AddObjectCommand(this._store, this, text));
+        }
+    }
+    handlePointerUp(event) {
+        var _a, _b, _c, _d;
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        if (event.pointerType === 'mouse') {
+            (_a = this._store.state.activeText) === null || _a === void 0 ? void 0 : _a.updateTextareaDimensions();
+            (_b = this._store.state.activeText) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        if (event.pointerType === 'touch') {
+            (_c = this._store.state.activeText) === null || _c === void 0 ? void 0 : _c.updateTextareaDimensions();
+            (_d = this._store.state.activeText) === null || _d === void 0 ? void 0 : _d.focus();
+            KritzelKeyboardHelper.enableInteractiveWidget();
+        }
+    }
+}
+//# sourceMappingURL=text-tool.class.js.map

package/dist/collection/classes/tools/text-tool.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-tool.class.js","sourceRoot":"","sources":["../../../src/classes/tools/text-tool.class.ts"],"names":[],"mappings":"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","sourcesContent":["import { KritzelText } from '../objects/text.class';\r\nimport { KritzelStore } from '../store.class';\r\nimport { KritzelBaseTool } from './base-tool.class';\r\nimport { AddObjectCommand } from '../commands/add-object.command';\r\nimport { KritzelEventHelper } from '../../helpers/event.helper';\r\nimport { KritzelToolRegistry } from '../registries/tool.registry';\r\nimport { KritzelKeyboardHelper } from '../../helpers/keyboard.helper';\r\n\r\nexport class KritzelTextTool extends KritzelBaseTool {\r\n  fontFamily: string = 'Arial';\r\n  fontSize: number = 16;\r\n  fontColor: string = '#000000';\r\n\r\n  palette: string[] = [\r\n    '#000000',\r\n    '#FFFFFF',\r\n    '#FF0000',\r\n    '#00FF00',\r\n    '#0000FF',\r\n    '#FFFF00',\r\n    '#FF00FF',\r\n    '#00FFFF',\r\n    '#808080',\r\n    '#C0C0C0',\r\n    '#800000',\r\n    '#008000',\r\n    '#000080',\r\n    '#808000',\r\n    '#800080',\r\n  ];\r\n\r\n  constructor(store: KritzelStore) {\r\n    super(store);\r\n  }\r\n\r\n  handlePointerDown(event: PointerEvent): void {\r\n    if (event.cancelable) {\r\n      event.preventDefault();\r\n    }\r\n\r\n    if (event.pointerType === 'mouse') {\r\n      const path = event.composedPath().slice(1) as HTMLElement[];\r\n      const objectElement = path.find(element => element.classList && element.classList.contains('object'));\r\n      const object = this._store.findObjectById(objectElement?.id);\r\n\r\n      if (this._store.state.activeText === null && object && object instanceof KritzelText) {\r\n        this._store.state.activeText = object;\r\n        object.focus();\r\n        return;\r\n      }\r\n\r\n      if (this._store.state.activeText !== null && object instanceof KritzelText) {\r\n        object.focus();\r\n        return;\r\n      }\r\n\r\n      if (this._store.state.activeText !== null) {\r\n        this._store.resetActiveText();\r\n        this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));\r\n        return;\r\n      }\r\n\r\n      if (KritzelEventHelper.isLeftClick(event) === false) {\r\n        return;\r\n      }\r\n\r\n      const clientX = event.clientX - this._store.offsetX;\r\n      const clientY = event.clientY - this._store.offsetY;\r\n      const text = KritzelText.create(this._store, this.fontSize, this.fontFamily);\r\n\r\n      text.fontColor = this.fontColor;\r\n      text.translateX = (clientX - this._store.state.translateX) / this._store.state.scale;\r\n      text.translateY = (clientY - this._store.state.translateY) / this._store.state.scale;\r\n      text.zIndex = this._store.currentZIndex;\r\n\r\n      this._store.state.activeText = text;\r\n\r\n      this._store.history.executeCommand(new AddObjectCommand(this._store, this, text));\r\n    }\r\n\r\n    if (event.pointerType === 'touch') {\r\n      const activePointers = Array.from(this._store.state.pointers.values());\r\n\r\n      const path = event.composedPath().slice(1) as HTMLElement[];\r\n      const objectElement = path.find(element => element.classList && element.classList.contains('object'));\r\n      const object = this._store.findObjectById(objectElement?.id);\r\n\r\n      if (this._store.state.activeText === null && object && object instanceof KritzelText) {\r\n        this._store.state.activeText = object;\r\n        object.focus();\r\n        return;\r\n      }\r\n\r\n      if (this._store.state.activeText !== null && object instanceof KritzelText) {\r\n        object.focus();\r\n        return;\r\n      }\r\n\r\n      if (this._store.state.activeText !== null) {\r\n        this._store.resetActiveText();\r\n        this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));\r\n        return;\r\n      }\r\n\r\n      if (activePointers.length > 1) {\r\n        return;\r\n      }\r\n\r\n      KritzelKeyboardHelper.disableInteractiveWidget();\r\n\r\n      const clientX = Math.round(activePointers[0].clientX - this._store.offsetX);\r\n      const clientY = Math.round(activePointers[0].clientY - this._store.offsetY);\r\n      const text = KritzelText.create(this._store, this.fontSize, this.fontFamily);\r\n\r\n      text.fontColor = this.fontColor;\r\n      text.translateX = (clientX - this._store.state.translateX) / this._store.state.scale;\r\n      text.translateY = (clientY - this._store.state.translateY) / this._store.state.scale;\r\n      text.zIndex = this._store.currentZIndex;\r\n\r\n      this._store.state.activeText = text;\r\n\r\n      this._store.history.executeCommand(new AddObjectCommand(this._store, this, text));\r\n    }\r\n  }\r\n\r\n  handlePointerUp(event: PointerEvent): void {\r\n    if (event.cancelable) {\r\n      event.preventDefault();\r\n    }\r\n\r\n    if (event.pointerType === 'mouse') {\r\n      this._store.state.activeText?.updateTextareaDimensions();\r\n      this._store.state.activeText?.focus();\r\n    }\r\n\r\n    if (event.pointerType === 'touch') {\r\n      this._store.state.activeText?.updateTextareaDimensions();\r\n      this._store.state.activeText?.focus();\r\n\r\n      KritzelKeyboardHelper.enableInteractiveWidget();\r\n    }\r\n  }\r\n}\r\n"]}

package/dist/collection/classes/viewport.class.js

@@ -0,0 +1,152 @@
+import { KritzelMouseButton } from "../enums/event-button.enum";
+import { KritzelEventHelper } from "../helpers/event.helper";
+export class KritzelViewport {
+    constructor(store, host) {
+        this.initialTouchDistance = 0;
+        this.startX = 0;
+        this.startY = 0;
+        this._store = store;
+        this._store.state.host = host;
+        this._store.state.viewportWidth = host.clientWidth;
+        this._store.state.viewportHeight = host.clientHeight;
+        this._store.state.startX = 0;
+        this._store.state.startY = 0;
+        this._store.state.translateX = 0;
+        this._store.state.translateY = 0;
+    }
+    handleResize() {
+        this._store.state.viewportWidth = this._store.state.host.clientWidth;
+        this._store.state.viewportHeight = this._store.state.host.clientHeight;
+        this._store.state.hasViewportChanged = true;
+        this._store.rerender();
+    }
+    handlePointerDown(event) {
+        if (event.pointerType === 'mouse') {
+            const adjustedClientX = event.clientX - this._store.offsetX;
+            const adjustedClientY = event.clientY - this._store.offsetY;
+            if (event.button === KritzelMouseButton.Right) {
+                this._store.state.isPanning = true;
+                this._store.state.startX = adjustedClientX;
+                this._store.state.startY = adjustedClientY;
+            }
+        }
+        if (event.pointerType === 'touch') {
+            const activePointers = Array.from(this._store.state.pointers.values());
+            if (activePointers.length === 2) {
+                this._store.state.currentPath = null;
+                this._store.state.isScaling = true;
+                const firstTouchX = activePointers[0].clientX - this._store.offsetX;
+                const firstTouchY = activePointers[0].clientY - this._store.offsetY;
+                const secondTouchX = activePointers[1].clientX - this._store.offsetX;
+                const secondTouchY = activePointers[1].clientY - this._store.offsetY;
+                this.initialTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));
+                this.startX = (firstTouchX + secondTouchX) / 2;
+                this.startY = (firstTouchY + secondTouchY) / 2;
+                this._store.rerender();
+            }
+        }
+    }
+    handlePointerMove(event) {
+        if (event.pointerType === 'mouse') {
+            const hostRect = this._store.state.host.getBoundingClientRect();
+            const xRelativeToHost = event.clientX - hostRect.left;
+            const yRelativeToHost = event.clientY - hostRect.top;
+            this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
+            this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
+            if (this._store.state.isPanning) {
+                this._store.state.translateX -= this._store.state.startX - xRelativeToHost;
+                this._store.state.translateY -= this._store.state.startY - yRelativeToHost;
+                this._store.state.startX = xRelativeToHost;
+                this._store.state.startY = yRelativeToHost;
+                this._store.state.hasViewportChanged = true;
+                this._store.state.skipContextMenu = true;
+                this._store.rerender();
+                this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
+            }
+        }
+        if (event.pointerType === 'touch') {
+            const hostRect = this._store.state.host.getBoundingClientRect();
+            const xRelativeToHost = event.clientX - hostRect.left;
+            const yRelativeToHost = event.clientY - hostRect.top;
+            this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
+            this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
+            const activePointers = Array.from(this._store.state.pointers.values());
+            if (activePointers.length === 2) {
+                const firstTouchX = activePointers[0].clientX - this._store.offsetX;
+                const firstTouchY = activePointers[0].clientY - this._store.offsetY;
+                const secondTouchX = activePointers[1].clientX - this._store.offsetX;
+                const secondTouchY = activePointers[1].clientY - this._store.offsetY;
+                const currentTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));
+                const midpointX = (firstTouchX + secondTouchX) / 2;
+                const midpointY = (firstTouchY + secondTouchY) / 2;
+                const scaleRatio = currentTouchDistance / this.initialTouchDistance;
+                const newScale = this._store.state.scale * scaleRatio;
+                if (newScale > this._store.state.scaleMax || newScale < this._store.state.scaleMin) {
+                    this._store.state.translateX += midpointX - this.startX;
+                    this._store.state.translateY += midpointY - this.startY;
+                }
+                else {
+                    const translateXAdjustment = (midpointX - this._store.state.translateX) * (scaleRatio - 1);
+                    const translateYAdjustment = (midpointY - this._store.state.translateY) * (scaleRatio - 1);
+                    this._store.state.translateX += midpointX - this.startX - translateXAdjustment;
+                    this._store.state.translateY += midpointY - this.startY - translateYAdjustment;
+                    this._store.state.scale = newScale;
+                    this.initialTouchDistance = currentTouchDistance;
+                }
+                this.startX = midpointX;
+                this.startY = midpointY;
+                this._store.state.hasViewportChanged = true;
+                this._store.rerender();
+                this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
+            }
+        }
+    }
+    handlePointerUp(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._store.state.isPanning) {
+                this._store.state.isPanning = false;
+                this._store.rerender();
+            }
+        }
+        if (event.pointerType === 'touch') {
+            this._store.state.isScaling = false;
+            this._store.rerender();
+        }
+    }
+    handleWheel(event) {
+        event.preventDefault();
+        if (event.ctrlKey === true && KritzelEventHelper.isMainMouseWheel(event)) {
+            this.handleZoom(event);
+        }
+        if (!event.ctrlKey) {
+            this.handlePan(event);
+        }
+    }
+    handleZoom(event) {
+        const rect = this._store.state.host.getBoundingClientRect();
+        const xRelativeToHost = event.clientX - rect.left;
+        const yRelativeToHost = event.clientY - rect.top;
+        this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
+        this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
+        const delta = event.deltaY > 0 ? -this._store.state.scaleStep * this._store.state.scale : this._store.state.scaleStep * this._store.state.scale;
+        const newScale = Math.min(this._store.state.scaleMax, Math.max(this._store.state.scaleMin, this._store.state.scale + delta));
+        const scaleRatio = newScale / this._store.state.scale;
+        const translateXAdjustment = (xRelativeToHost - this._store.state.translateX) * (scaleRatio - 1);
+        const translateYAdjustment = (yRelativeToHost - this._store.state.translateY) * (scaleRatio - 1);
+        this._store.state.scale = newScale;
+        this._store.state.translateX -= translateXAdjustment;
+        this._store.state.translateY -= translateYAdjustment;
+        this._store.state.hasViewportChanged = true;
+        this._store.rerender();
+        this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
+    }
+    handlePan(event) {
+        const panSpeed = 0.8;
+        this._store.state.translateX -= event.deltaX * panSpeed;
+        this._store.state.translateY -= event.deltaY * panSpeed;
+        this._store.state.hasViewportChanged = true;
+        this._store.rerender();
+        this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
+    }
+}
+//# sourceMappingURL=viewport.class.js.map

package/dist/collection/classes/viewport.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.class.js","sourceRoot":"","sources":["../../src/classes/viewport.class.ts"],"names":[],"mappings":"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","sourcesContent":["import { KritzelMouseButton } from '../enums/event-button.enum';\r\nimport { KritzelEventHelper } from '../helpers/event.helper';\r\nimport { KritzelStore } from './store.class';\r\n\r\nexport class KritzelViewport {\r\n  private readonly _store: KritzelStore;\r\n\r\n  initialTouchDistance: number = 0;\r\n  startX: number = 0;\r\n  startY: number = 0;\r\n\r\n  constructor(store: KritzelStore, host: HTMLElement) {\r\n    this._store = store;\r\n    this._store.state.host = host;\r\n    this._store.state.viewportWidth = host.clientWidth;\r\n    this._store.state.viewportHeight = host.clientHeight;\r\n    this._store.state.startX = 0;\r\n    this._store.state.startY = 0;\r\n    this._store.state.translateX = 0;\r\n    this._store.state.translateY = 0;\r\n  }\r\n\r\n  handleResize(): void {\r\n    this._store.state.viewportWidth = this._store.state.host.clientWidth;\r\n    this._store.state.viewportHeight = this._store.state.host.clientHeight;\r\n    this._store.state.hasViewportChanged = true;\r\n    this._store.rerender();\r\n  }\r\n\r\n  handlePointerDown(event: PointerEvent): void {\r\n    if (event.pointerType === 'mouse') {\r\n      const adjustedClientX = event.clientX - this._store.offsetX;\r\n      const adjustedClientY = event.clientY - this._store.offsetY;\r\n\r\n      if (event.button === KritzelMouseButton.Right) {\r\n        this._store.state.isPanning = true;\r\n        this._store.state.startX = adjustedClientX;\r\n        this._store.state.startY = adjustedClientY;\r\n      }\r\n    }\r\n\r\n    if (event.pointerType === 'touch') {\r\n      const activePointers = Array.from(this._store.state.pointers.values());\r\n\r\n      if (activePointers.length === 2) {\r\n        this._store.state.currentPath = null;\r\n        this._store.state.isScaling = true;\r\n\r\n        const firstTouchX = activePointers[0].clientX - this._store.offsetX;\r\n        const firstTouchY = activePointers[0].clientY - this._store.offsetY;\r\n\r\n        const secondTouchX = activePointers[1].clientX - this._store.offsetX;\r\n        const secondTouchY = activePointers[1].clientY - this._store.offsetY;\r\n\r\n        this.initialTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));\r\n\r\n        this.startX = (firstTouchX + secondTouchX) / 2;\r\n        this.startY = (firstTouchY + secondTouchY) / 2;\r\n        this._store.rerender();\r\n      }\r\n    }\r\n  }\r\n\r\n  handlePointerMove(event: PointerEvent): void {\r\n    if (event.pointerType === 'mouse') {\r\n      const hostRect = this._store.state.host.getBoundingClientRect();\r\n      const xRelativeToHost = event.clientX - hostRect.left;\r\n      const yRelativeToHost = event.clientY - hostRect.top;\r\n\r\n      this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;\r\n      this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;\r\n\r\n      if (this._store.state.isPanning) {\r\n        this._store.state.translateX -= this._store.state.startX - xRelativeToHost;\r\n        this._store.state.translateY -= this._store.state.startY - yRelativeToHost;\r\n        this._store.state.startX = xRelativeToHost;\r\n        this._store.state.startY = yRelativeToHost;\r\n        this._store.state.hasViewportChanged = true;\r\n        this._store.state.skipContextMenu = true;\r\n\r\n        this._store.rerender();\r\n        this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);\r\n      }\r\n    }\r\n\r\n    if (event.pointerType === 'touch') {\r\n      const hostRect = this._store.state.host.getBoundingClientRect();\r\n      const xRelativeToHost = event.clientX - hostRect.left;\r\n      const yRelativeToHost = event.clientY - hostRect.top;\r\n\r\n      this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;\r\n      this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;\r\n\r\n      const activePointers = Array.from(this._store.state.pointers.values());\r\n\r\n      if (activePointers.length === 2) {\r\n        const firstTouchX = activePointers[0].clientX - this._store.offsetX;\r\n        const firstTouchY = activePointers[0].clientY - this._store.offsetY;\r\n\r\n        const secondTouchX = activePointers[1].clientX - this._store.offsetX;\r\n        const secondTouchY = activePointers[1].clientY - this._store.offsetY;\r\n\r\n        const currentTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));\r\n\r\n        const midpointX = (firstTouchX + secondTouchX) / 2;\r\n        const midpointY = (firstTouchY + secondTouchY) / 2;\r\n\r\n        const scaleRatio = currentTouchDistance / this.initialTouchDistance!;\r\n        const newScale = this._store.state.scale * scaleRatio;\r\n\r\n        if (newScale > this._store.state.scaleMax || newScale < this._store.state.scaleMin) {\r\n          this._store.state.translateX += midpointX - this.startX;\r\n          this._store.state.translateY += midpointY - this.startY;\r\n        } else {\r\n          const translateXAdjustment = (midpointX - this._store.state.translateX) * (scaleRatio - 1);\r\n          const translateYAdjustment = (midpointY - this._store.state.translateY) * (scaleRatio - 1);\r\n\r\n          this._store.state.translateX += midpointX - this.startX - translateXAdjustment;\r\n          this._store.state.translateY += midpointY - this.startY - translateYAdjustment;\r\n          this._store.state.scale = newScale;\r\n\r\n          this.initialTouchDistance = currentTouchDistance;\r\n        }\r\n\r\n        this.startX = midpointX;\r\n        this.startY = midpointY;\r\n\r\n        this._store.state.hasViewportChanged = true;\r\n\r\n        this._store.rerender();\r\n        this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);\r\n      }\r\n    }\r\n  }\r\n\r\n  handlePointerUp(event: PointerEvent): void {\r\n    if (event.pointerType === 'mouse') {\r\n      if (this._store.state.isPanning) {\r\n        this._store.state.isPanning = false;\r\n        this._store.rerender();\r\n      }\r\n    }\r\n\r\n    if (event.pointerType === 'touch') {\r\n      this._store.state.isScaling = false;\r\n      this._store.rerender();\r\n    }\r\n  }\r\n\r\n  handleWheel(event: WheelEvent): void {\r\n    event.preventDefault();\r\n\r\n    if (event.ctrlKey === true && KritzelEventHelper.isMainMouseWheel(event)) {\r\n      this.handleZoom(event);\r\n    }\r\n\r\n    if (!event.ctrlKey) {\r\n      this.handlePan(event);\r\n    }\r\n  }\r\n\r\n  private handleZoom(event: WheelEvent): void {\r\n    const rect = this._store.state.host.getBoundingClientRect();\r\n    const xRelativeToHost = event.clientX - rect.left;\r\n    const yRelativeToHost = event.clientY - rect.top;\r\n\r\n    this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;\r\n    this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;\r\n\r\n    const delta = event.deltaY > 0 ? -this._store.state.scaleStep * this._store.state.scale : this._store.state.scaleStep * this._store.state.scale;\r\n    const newScale = Math.min(this._store.state.scaleMax, Math.max(this._store.state.scaleMin, this._store.state.scale + delta));\r\n\r\n    const scaleRatio = newScale / this._store.state.scale;\r\n    const translateXAdjustment = (xRelativeToHost - this._store.state.translateX) * (scaleRatio - 1);\r\n    const translateYAdjustment = (yRelativeToHost - this._store.state.translateY) * (scaleRatio - 1);\r\n\r\n    this._store.state.scale = newScale;\r\n\r\n    this._store.state.translateX -= translateXAdjustment;\r\n    this._store.state.translateY -= translateYAdjustment;\r\n\r\n    this._store.state.hasViewportChanged = true;\r\n\r\n    this._store.rerender();\r\n    this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);\r\n  }\r\n\r\n  private handlePan(event: WheelEvent): void {\r\n    const panSpeed = 0.8;\r\n\r\n    this._store.state.translateX -= event.deltaX * panSpeed;\r\n    this._store.state.translateY -= event.deltaY * panSpeed;\r\n\r\n    this._store.state.hasViewportChanged = true;\r\n\r\n    this._store.rerender();\r\n    this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);\r\n  }\r\n}\r\n"]}

package/dist/collection/classes/workspace.class.js

@@ -0,0 +1,10 @@
+export class KritzelWorkspace {
+    constructor(id, name, viewport = { translateX: 0, translateY: 0, scale: 1 }) {
+        this.id = id;
+        this.name = name;
+        this.createdAt = new Date();
+        this.updatedAt = new Date();
+        this.viewport = viewport;
+    }
+}
+//# sourceMappingURL=workspace.class.js.map

package/dist/collection/classes/workspace.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace.class.js","sourceRoot":"","sources":["../../src/classes/workspace.class.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,gBAAgB;IAW3B,YAAY,EAAU,EAAE,IAAY,EAAE,WAAsE,EAAE,UAAU,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;QACpJ,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;QAC5B,IAAI,CAAC,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;CACF","sourcesContent":["export class KritzelWorkspace {\r\n  id: string;\r\n  name: string;\r\n  createdAt: Date;\r\n  updatedAt: Date;\r\n  viewport: {\r\n    translateX: number;\r\n    translateY: number;\r\n    scale: number;\r\n  };\r\n\r\n  constructor(id: string, name: string, viewport: { translateX: number; translateY: number; scale: number } = { translateX: 0, translateY: 0, scale: 1 }) {\r\n    this.id = id;\r\n    this.name = name;\r\n    this.createdAt = new Date();\r\n    this.updatedAt = new Date();\r\n    this.viewport = viewport;\r\n  }\r\n}\r\n"]}

package/dist/collection/collection-manifest.json

@@ -0,0 +1,33 @@
+{
+  "entries": [
+    "components/shared/kritzel-dropdown/kritzel-dropdown.js",
+    "components/shared/kritzel-brush-style/kritzel-brush-style.js",
+    "components/core/kritzel-engine/kritzel-engine.js",
+    "components/ui/kritzel-context-menu/kritzel-context-menu.js",
+    "components/shared/kritzel-font-family/kritzel-font-family.js",
+    "components/core/kritzel-cursor-trail/kritzel-cursor-trail.js",
+    "components/core/kritzel-editor/kritzel-editor.js",
+    "components/shared/kritzel-color/kritzel-color.js",
+    "components/shared/kritzel-color-palette/kritzel-color-palette.js",
+    "components/shared/kritzel-font/kritzel-font.js",
+    "components/shared/kritzel-font-size/kritzel-font-size.js",
+    "components/shared/kritzel-icon/kritzel-icon.js",
+    "components/shared/kritzel-menu/kritzel-menu.js",
+    "components/shared/kritzel-portal/kritzel-portal.js",
+    "components/shared/kritzel-split-button/kritzel-split-button.js",
+    "components/shared/kritzel-stroke-size/kritzel-stroke-size.js",
+    "components/shared/kritzel-tooltip/kritzel-tooltip.js",
+    "components/ui/kritzel-control-brush-config/kritzel-control-brush-config.js",
+    "components/ui/kritzel-control-text-config/kritzel-control-text-config.js",
+    "components/ui/kritzel-controls/kritzel-controls.js",
+    "components/ui/kritzel-utility-panel/kritzel-utility-panel.js",
+    "components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.37.0",
+    "typescriptVersion": "5.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.css

@@ -0,0 +1,10 @@
+:host {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 9000;
+}

package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js

@@ -0,0 +1,154 @@
+import { Host, h } from "@stencil/core";
+import { KritzelMouseButton } from "../../../enums/event-button.enum";
+export class KritzelCursorTrail {
+    constructor() {
+        this.cursorTrailPoints = [];
+        this.isLeftButtonDown = false;
+        this.TRAIL_DURATION_MS = 100;
+        this.MAX_TRAIL_POINTS = 50;
+    }
+    componentDidLoad() {
+        this.trailCleanupIntervalId = window.setInterval(() => {
+            const now = Date.now();
+            const newTrailPoints = this.cursorTrailPoints.filter(p => now - p.timestamp < this.TRAIL_DURATION_MS);
+            if (newTrailPoints.length !== this.cursorTrailPoints.length) {
+                this.cursorTrailPoints = newTrailPoints;
+            }
+        }, 50);
+    }
+    disconnectedCallback() {
+        if (this.trailCleanupIntervalId) {
+            window.clearInterval(this.trailCleanupIntervalId);
+        }
+    }
+    handleMouseDown(ev) {
+        if (ev.pointerType === 'mouse') {
+            if (ev.button === KritzelMouseButton.Left) {
+                this.isLeftButtonDown = true;
+                this.cursorTrailPoints = [];
+            }
+        }
+        if (ev.pointerType === 'touch') {
+            if (this.store.state.pointers.size === 1) {
+                this.isLeftButtonDown = true;
+                this.cursorTrailPoints = [];
+            }
+        }
+    }
+    handlePointerMove(ev) {
+        if (!this.isLeftButtonDown) {
+            return;
+        }
+        const newPoint = { x: ev.clientX, y: ev.clientY, timestamp: Date.now() };
+        const updatedTrail = [newPoint, ...this.cursorTrailPoints];
+        if (updatedTrail.length > this.MAX_TRAIL_POINTS) {
+            this.cursorTrailPoints = updatedTrail.slice(0, this.MAX_TRAIL_POINTS);
+        }
+        else {
+            this.cursorTrailPoints = updatedTrail;
+        }
+    }
+    handlePointerUp(ev) {
+        if (ev.pointerType === 'mouse') {
+            if (ev.button === KritzelMouseButton.Left) {
+                this.isLeftButtonDown = false;
+                this.cursorTrailPoints = [];
+            }
+        }
+        if (ev.pointerType === 'touch') {
+            if (this.store.state.pointers.size === 0) {
+                this.isLeftButtonDown = false;
+                this.cursorTrailPoints = [];
+            }
+        }
+    }
+    render() {
+        return (h(Host, { key: 'c519ab89ffb793de887a870bafe8772f7584f097' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'db7ac0975c5a39c0b68d8fd4af4edd4d15f439f3', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+                position: 'absolute',
+                left: '0',
+                top: '0',
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none',
+                opacity: 'var(--kritzel-cursor-trail-opacity, 0.6)',
+                zIndex: '9000',
+            } }, this.cursorTrailPoints.slice(1).map((point, index) => {
+            const prevPoint = this.cursorTrailPoints[index];
+            const now = Date.now();
+            const age = now - point.timestamp;
+            const progress = Math.max(0, Math.min(1, age / this.TRAIL_DURATION_MS));
+            if (progress >= 1)
+                return null;
+            const baseStrokeWidth = Math.max(2, 15 * (1 - progress));
+            return (h("line", { key: `trail-segment-${point.timestamp}`, x1: prevPoint.x.toString(), y1: prevPoint.y.toString(), x2: point.x.toString(), y2: point.y.toString(), stroke: "var(--kritzel-cursor-trail-color, rgb(228, 228, 228))", "stroke-width": baseStrokeWidth.toString(), "stroke-linecap": "round" }));
+        })))));
+    }
+    static get is() { return "kritzel-cursor-trail"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-cursor-trail.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-cursor-trail.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "store": {
+                "type": "unknown",
+                "attribute": "store",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelStore",
+                    "resolved": "KritzelStore",
+                    "references": {
+                        "KritzelStore": {
+                            "location": "import",
+                            "path": "../../../classes/store.class",
+                            "id": "src/classes/store.class.ts::KritzelStore"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "cursorTrailPoints": {},
+            "isLeftButtonDown": {}
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "pointerdown",
+                "method": "handleMouseDown",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "pointermove",
+                "method": "handlePointerMove",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "pointerup",
+                "method": "handlePointerUp",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=kritzel-cursor-trail.js.map

package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-cursor-trail.js","sourceRoot":"","sources":["../../../../src/components/core/kritzel-cursor-trail/kritzel-cursor-trail.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, State, h } from '@stencil/core';\r\nimport { KritzelMouseButton } from '../../../enums/event-button.enum';\r\nimport { KritzelStore } from '../../../classes/store.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-cursor-trail',\r\n  styleUrl: 'kritzel-cursor-trail.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelCursorTrail {\r\n  @Prop()\r\n  store: KritzelStore;\r\n\r\n  @State()\r\n  cursorTrailPoints: Array<{ x: number; y: number; timestamp: number }> = [];\r\n\r\n  @State()\r\n  isLeftButtonDown: boolean = false;\r\n\r\n  private trailCleanupIntervalId: number;\r\n\r\n  private readonly TRAIL_DURATION_MS = 100;\r\n\r\n  private readonly MAX_TRAIL_POINTS = 50;\r\n\r\n  componentDidLoad() {\r\n    this.trailCleanupIntervalId = window.setInterval(() => {\r\n      const now = Date.now();\r\n      const newTrailPoints = this.cursorTrailPoints.filter(p => now - p.timestamp < this.TRAIL_DURATION_MS);\r\n      if (newTrailPoints.length !== this.cursorTrailPoints.length) {\r\n        this.cursorTrailPoints = newTrailPoints;\r\n      }\r\n    }, 50);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    if (this.trailCleanupIntervalId) {\r\n      window.clearInterval(this.trailCleanupIntervalId);\r\n    }\r\n  }\r\n\r\n  @Listen('pointerdown', { target: 'window', passive: true })\r\n  handleMouseDown(ev: PointerEvent) {\r\n    if (ev.pointerType === 'mouse') {\r\n      if (ev.button === KritzelMouseButton.Left) {\r\n        this.isLeftButtonDown = true;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n\r\n    if (ev.pointerType === 'touch') {\r\n      if (this.store.state.pointers.size === 1) {\r\n        this.isLeftButtonDown = true;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n  }\r\n\r\n  @Listen('pointermove', { target: 'window', passive: true })\r\n  handlePointerMove(ev: PointerEvent) {\r\n     if (!this.isLeftButtonDown) {\r\n      return;\r\n    }\r\n    const newPoint = { x: ev.clientX, y: ev.clientY, timestamp: Date.now() };\r\n    const updatedTrail = [newPoint, ...this.cursorTrailPoints];\r\n    if (updatedTrail.length > this.MAX_TRAIL_POINTS) {\r\n      this.cursorTrailPoints = updatedTrail.slice(0, this.MAX_TRAIL_POINTS);\r\n    } else {\r\n      this.cursorTrailPoints = updatedTrail;\r\n    }\r\n  }\r\n\r\n  @Listen('pointerup', { target: 'window', passive: true })\r\n  handlePointerUp(ev: PointerEvent) {\r\n    if (ev.pointerType === 'mouse') {\r\n      if(ev.button === KritzelMouseButton.Left){\r\n        this.isLeftButtonDown = false;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n\r\n    if (ev.pointerType === 'touch') {\r\n      if(this.store.state.pointers.size === 0){\r\n        this.isLeftButtonDown = false;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {this.cursorTrailPoints.length > 1 && (\r\n          <svg\r\n            class=\"cursor-trail-svg\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            style={{\r\n              position: 'absolute',\r\n              left: '0',\r\n              top: '0',\r\n              width: '100%',\r\n              height: '100%',\r\n              pointerEvents: 'none',\r\n              opacity: 'var(--kritzel-cursor-trail-opacity, 0.6)',\r\n              zIndex: '9000',\r\n            }}\r\n          >\r\n            {this.cursorTrailPoints.slice(1).map((point, index) => {\r\n              const prevPoint = this.cursorTrailPoints[index];\r\n              const now = Date.now();\r\n              const age = now - point.timestamp;\r\n              const progress = Math.max(0, Math.min(1, age / this.TRAIL_DURATION_MS));\r\n\r\n              if (progress >= 1) return null;\r\n\r\n              const baseStrokeWidth = Math.max(2, 15 * (1 - progress));\r\n\r\n              return (\r\n                <line\r\n                  key={`trail-segment-${point.timestamp}`}\r\n                  x1={prevPoint.x.toString()}\r\n                  y1={prevPoint.y.toString()}\r\n                  x2={point.x.toString()}\r\n                  y2={point.y.toString()}\r\n                  stroke=\"var(--kritzel-cursor-trail-color, rgb(228, 228, 228))\"\r\n                  stroke-width={baseStrokeWidth.toString()}\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              );\r\n            })}\r\n          </svg>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/core/kritzel-editor/kritzel-editor.css

@@ -0,0 +1,29 @@
+kritzel-editor{
+  display: flex;
+  margin: 0;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  touch-action: manipulation;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;           
+}
+
+kritzel-workspace-manager {
+  position: absolute;
+  top: 14px;
+  left: 14px;
+}
+
+kritzel-controls {
+  position: absolute;
+  bottom: 28px;
+}