kritzel-stencil 0.0.104 → 0.0.106

package/dist/components/p-BcQCX1Z6.js

@@ -0,0 +1,813 @@
+var KritzelMouseButton;
+(function (KritzelMouseButton) {
+    KritzelMouseButton[KritzelMouseButton["Left"] = 0] = "Left";
+    KritzelMouseButton[KritzelMouseButton["Middle"] = 1] = "Middle";
+    KritzelMouseButton[KritzelMouseButton["Right"] = 2] = "Right";
+})(KritzelMouseButton || (KritzelMouseButton = {}));
+
+class KritzelEventHelper {
+    static isRightClick(ev) {
+        return ev.button === KritzelMouseButton.Right;
+    }
+    static isLeftClick(ev) {
+        return ev.button === KritzelMouseButton.Left;
+    }
+    static isMainMouseWheel(event) {
+        return Math.abs(event.deltaY) > 0 && Math.abs(event.deltaX) === 0 && Number.isInteger(event.deltaY);
+    }
+    static detectDoubleTap() {
+        const currentTime = Date.now();
+        const tapLength = currentTime - KritzelEventHelper.lastTapTimestamp;
+        if (KritzelEventHelper.tapTimeoutId) {
+            clearTimeout(KritzelEventHelper.tapTimeoutId);
+            KritzelEventHelper.tapTimeoutId = null;
+        }
+        if (tapLength < KritzelEventHelper.doubleTapTimeout && tapLength > 0) {
+            KritzelEventHelper.lastTapTimestamp = 0;
+            return true;
+        }
+        else {
+            KritzelEventHelper.lastTapTimestamp = currentTime;
+            KritzelEventHelper.tapTimeoutId = setTimeout(() => {
+                KritzelEventHelper.tapTimeoutId = null;
+            }, KritzelEventHelper.doubleTapTimeout);
+            return false;
+        }
+    }
+}
+KritzelEventHelper.lastTapTimestamp = 0;
+KritzelEventHelper.tapTimeoutId = null;
+KritzelEventHelper.doubleTapTimeout = 300;
+
+class KritzelBaseCommand {
+    constructor(store, initiator) {
+        var _a, _b;
+        this._store = store;
+        this.initiator = (_b = (_a = initiator === null || initiator === void 0 ? void 0 : initiator.constructor) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'Unknown';
+        this.isUndoable = true;
+    }
+    execute() {
+        throw new Error('Method not implemented.');
+    }
+    undo() {
+        throw new Error('Method not implemented.');
+    }
+}
+
+class AddObjectCommand extends KritzelBaseCommand {
+    constructor(store, initiator, object) {
+        super(store, initiator);
+        this.object = object;
+    }
+    execute() {
+        this._store.state.objectsOctree.insert(this.object);
+    }
+    undo() {
+        this._store.state.objectsOctree.remove(object => object.id === this.object.id);
+    }
+}
+
+var cjs = {};
+
+var hasRequiredCjs;
+
+function requireCjs () {
+	if (hasRequiredCjs) return cjs;
+	hasRequiredCjs = 1;
+	(function (exports) {
+		var pe=Object.defineProperty;var ge=e=>pe(e,"__esModule",{value:true});var de=(e,t)=>{ge(e);for(var s in t)pe(e,s,{get:t[s],enumerable:true});};de(exports,{default:()=>ve,getStroke:()=>ne,getStrokeOutlinePoints:()=>te,getStrokePoints:()=>re});function $(e,t,s,x=h=>h){return e*x(.5-t*(.5-s))}function ce(e){return [-e[0],-e[1]]}function l(e,t){return [e[0]+t[0],e[1]+t[1]]}function a(e,t){return [e[0]-t[0],e[1]-t[1]]}function b(e,t){return [e[0]*t,e[1]*t]}function xe(e,t){return [e[0]/t,e[1]/t]}function R(e){return [e[1],-e[0]]}function B(e,t){return e[0]*t[0]+e[1]*t[1]}function me(e,t){return e[0]===t[0]&&e[1]===t[1]}function Se(e){return Math.hypot(e[0],e[1])}function Pe(e){return e[0]*e[0]+e[1]*e[1]}function A(e,t){return Pe(a(e,t))}function G(e){return xe(e,Se(e))}function ae(e,t){return Math.hypot(e[1]-t[1],e[0]-t[0])}function L(e,t,s){let x=Math.sin(s),h=Math.cos(s),y=e[0]-t[0],n=e[1]-t[1],f=y*h-n*x,d=y*x+n*h;return [f+t[0],d+t[1]]}function K(e,t,s){return l(e,b(a(t,e),s))}function ee(e,t,s){return l(e,b(t,s))}var{min:C,PI:ke}=Math,le=.275,V=ke+1e-4;function te(e,t={}){let{size:s=16,smoothing:x=.5,thinning:h=.5,simulatePressure:y=true,easing:n=r=>r,start:f={},end:d={},last:D=false}=t,{cap:S=true,easing:j=r=>r*(2-r)}=f,{cap:q=true,easing:c=r=>--r*r*r+1}=d;if(e.length===0||s<=0)return [];let p=e[e.length-1].runningLength,g=f.taper===false?0:f.taper===true?Math.max(s,p):f.taper,T=d.taper===false?0:d.taper===true?Math.max(s,p):d.taper,oe=Math.pow(s*x,2),_=[],M=[],H=e.slice(0,10).reduce((r,i)=>{let o=i.pressure;if(y){let u=C(1,i.distance/s),W=C(1,1-u);o=C(1,r+(W-r)*(u*le));}return (r+o)/2},e[0].pressure),m=$(s,h,e[e.length-1].pressure,n),U,X=e[0].vector,z=e[0].point,F=z,O=z,E=F,J=false;for(let r=0;r<e.length;r++){let{pressure:i}=e[r],{point:o,vector:u,distance:W,runningLength:I}=e[r];if(r<e.length-1&&p-I<3)continue;if(h){if(y){let v=C(1,W/s),Z=C(1,1-v);i=C(1,H+(Z-H)*(v*le));}m=$(s,h,i,n);}else m=s/2;U===void 0&&(U=m);let fe=I<g?j(I/g):1,be=p-I<T?c((p-I)/T):1;m=Math.max(.01,m*Math.min(fe,be));let se=(r<e.length-1?e[r+1]:e[r]).vector,Y=r<e.length-1?B(u,se):1,he=B(u,X)<0&&!J,ue=Y!==null&&Y<0;if(he||ue){let v=b(R(X),m);for(let Z=1/13,w=0;w<=1;w+=Z)O=L(a(o,v),o,V*w),_.push(O),E=L(l(o,v),o,V*-w),M.push(E);z=O,F=E,ue&&(J=true);continue}if(J=false,r===e.length-1){let v=b(R(u),m);_.push(a(o,v)),M.push(l(o,v));continue}let ie=b(R(K(se,u,Y)),m);O=a(o,ie),(r<=1||A(z,O)>oe)&&(_.push(O),z=O),E=l(o,ie),(r<=1||A(F,E)>oe)&&(M.push(E),F=E),H=i,X=u;}let P=e[0].point.slice(0,2),k=e.length>1?e[e.length-1].point.slice(0,2):l(e[0].point,[1,1]),Q=[],N=[];if(e.length===1){if(!(g||T)||D){let r=ee(P,G(R(a(P,k))),-(U||m)),i=[];for(let o=1/13,u=o;u<=1;u+=o)i.push(L(r,P,V*2*u));return i}}else {if(!(g||T&&e.length===1))if(S)for(let i=1/13,o=i;o<=1;o+=i){let u=L(M[0],P,V*o);Q.push(u);}else {let i=a(_[0],M[0]),o=b(i,.5),u=b(i,.51);Q.push(a(P,o),a(P,u),l(P,u),l(P,o));}let r=R(ce(e[e.length-1].vector));if(T||g&&e.length===1)N.push(k);else if(q){let i=ee(k,r,m);for(let o=1/29,u=o;u<1;u+=o)N.push(L(i,k,V*3*u));}else N.push(l(k,b(r,m)),l(k,b(r,m*.99)),a(k,b(r,m*.99)),a(k,b(r,m)));}return _.concat(N,M.reverse(),Q)}function re(e,t={}){var q;let{streamline:s=.5,size:x=16,last:h=false}=t;if(e.length===0)return [];let y=.15+(1-s)*.85,n=Array.isArray(e[0])?e:e.map(({x:c,y:p,pressure:g=.5})=>[c,p,g]);if(n.length===2){let c=n[1];n=n.slice(0,-1);for(let p=1;p<5;p++)n.push(K(n[0],c,p/4));}n.length===1&&(n=[...n,[...l(n[0],[1,1]),...n[0].slice(2)]]);let f=[{point:[n[0][0],n[0][1]],pressure:n[0][2]>=0?n[0][2]:.25,vector:[1,1],distance:0,runningLength:0}],d=false,D=0,S=f[0],j=n.length-1;for(let c=1;c<n.length;c++){let p=h&&c===j?n[c].slice(0,2):K(S.point,n[c],y);if(me(S.point,p))continue;let g=ae(p,S.point);if(D+=g,c<j&&!d){if(D<x)continue;d=true;}S={point:p,pressure:n[c][2]>=0?n[c][2]:.5,vector:G(a(S.point,p)),distance:g,runningLength:D},f.push(S);}return f[0].vector=((q=f[1])==null?void 0:q.vector)||[0,0],f}function ne(e,t={}){return te(re(e,t),t)}var ve=ne; 
+	} (cjs));
+	return cjs;
+}
+
+var cjsExports = requireCjs();
+
+class KritzelMathHelper {
+    static average(a, b) {
+        return (a + b) / 2;
+    }
+}
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+class ObjectHelper {
+    static generateUUID() {
+        return Math.random().toString(36).substr(2, 9);
+    }
+    static clone(objOrObjs) {
+        const cloneObject = (obj) => {
+            const remainingProps = __rest(obj, ["_store", "_elementRef", "totalWidth", "totalHeight"]);
+            return structuredClone(remainingProps);
+        };
+        if (Array.isArray(objOrObjs)) {
+            return objOrObjs.map(cloneObject);
+        }
+        return cloneObject(objOrObjs);
+    }
+    static isEmpty(obj) {
+        if (obj === null || obj === undefined) {
+            return true;
+        }
+        return (Object === null || Object === void 0 ? void 0 : Object.keys(obj).length) === 0 && (obj === null || obj === void 0 ? void 0 : obj.constructor) === Object;
+    }
+}
+
+class KritzelBaseObject {
+    get totalWidth() {
+        return this.width + this.padding * 2;
+    }
+    get totalHeight() {
+        return this.height + this.padding * 2;
+    }
+    set elementRef(element) {
+        this._elementRef = element;
+    }
+    get elementRef() {
+        return this._elementRef;
+    }
+    get boundingBox() {
+        return {
+            x: this.translateX,
+            y: this.translateY,
+            z: this.scale,
+            width: this.totalWidth / this.scale,
+            height: this.totalHeight / this.scale,
+            depth: 0,
+        };
+    }
+    get rotatedBoundingBox() {
+        return {
+            x: this.minXRotated,
+            y: this.minYRotated,
+            z: this.scale,
+            width: this.maxXRotated - this.minXRotated,
+            height: this.maxYRotated - this.minYRotated,
+            depth: 0,
+        };
+    }
+    get rotatedPolygon() {
+        const cx = (this.translateX + this.totalWidth / 2 / this.scale);
+        const cy = (this.translateY + this.totalHeight / 2 / this.scale);
+        const angle = this.rotation;
+        const adjustedWidth = this.totalWidth / this.scale;
+        const adjustedHeight = this.totalHeight / this.scale;
+        const corners = {
+            topLeft: { x: this.translateX, y: this.translateY },
+            topRight: { x: this.translateX + adjustedWidth, y: this.translateY },
+            bottomRight: { x: this.translateX + adjustedWidth, y: this.translateY + adjustedHeight },
+            bottomLeft: { x: this.translateX, y: this.translateY + adjustedHeight },
+        };
+        const rotatedCorners = Object.keys(corners).reduce((acc, key) => {
+            const corner = corners[key];
+            const rotatedX = Math.cos(angle) * (corner.x - cx) - Math.sin(angle) * (corner.y - cy) + cx;
+            const rotatedY = Math.sin(angle) * (corner.x - cx) + Math.cos(angle) * (corner.y - cy) + cy;
+            acc[key] = { x: rotatedX, y: rotatedY };
+            return acc;
+        }, {});
+        return rotatedCorners;
+    }
+    get minXRotated() {
+        const corners = [
+            this.rotatedPolygon.topLeft.x,
+            this.rotatedPolygon.topRight.x,
+            this.rotatedPolygon.bottomRight.x,
+            this.rotatedPolygon.bottomLeft.x,
+        ];
+        return Math.min(...corners);
+    }
+    get minYRotated() {
+        const corners = [
+            this.rotatedPolygon.topLeft.y,
+            this.rotatedPolygon.topRight.y,
+            this.rotatedPolygon.bottomRight.y,
+            this.rotatedPolygon.bottomLeft.y,
+        ];
+        return Math.min(...corners);
+    }
+    get maxXRotated() {
+        const corners = [
+            this.rotatedPolygon.topLeft.x,
+            this.rotatedPolygon.topRight.x,
+            this.rotatedPolygon.bottomRight.x,
+            this.rotatedPolygon.bottomLeft.x,
+        ];
+        return Math.max(...corners);
+    }
+    get maxYRotated() {
+        const corners = [
+            this.rotatedPolygon.topLeft.y,
+            this.rotatedPolygon.topRight.y,
+            this.rotatedPolygon.bottomRight.y,
+            this.rotatedPolygon.bottomLeft.y,
+        ];
+        return Math.max(...corners);
+    }
+    get transformationMatrix() {
+        const scale = 1 / this.scale;
+        const translateX = this.translateX;
+        const translateY = this.translateY;
+        return `matrix(${scale}, 0, 0, ${scale}, ${translateX}, ${translateY})`;
+    }
+    get rotationDegrees() {
+        return this.rotation * (180 / Math.PI);
+    }
+    get centerX() {
+        return this.translateX + this.totalWidth / 2;
+    }
+    get centerY() {
+        return this.translateY + this.totalHeight / 2;
+    }
+    constructor() {
+        this.__class__ = 'KritzelBaseObject';
+        this.visible = true;
+        this.borderWidth = 0;
+        this.opacity = 1;
+        this.padding = 0;
+        this.selected = false;
+        this.resizing = false;
+        this.rotation = 0;
+        this.markedForRemoval = false;
+        this.isMounted = false;
+        this.zIndex = 0;
+        this.debugInfoVisible = false;
+        this.id = this.generateId();
+    }
+    static create(store) {
+        const object = new KritzelBaseObject();
+        object._store = store;
+        object.zIndex = store.currentZIndex;
+        return object;
+    }
+    mount(element) {
+        if (this.isMounted) {
+            return;
+        }
+        this.elementRef = element;
+        this.isMounted = true;
+    }
+    generateId() {
+        return ObjectHelper.generateUUID();
+    }
+    isInViewport() {
+        const viewportBounds = {
+            x: -this._store.state.translateX / this._store.state.scale,
+            y: -this._store.state.translateY / this._store.state.scale,
+            width: this._store.state.viewportWidth / this._store.state.scale,
+            height: this._store.state.viewportHeight / this._store.state.scale};
+        return this.boundingBox.x < viewportBounds.x + viewportBounds.width &&
+            this.boundingBox.x + this.boundingBox.width > viewportBounds.x &&
+            this.boundingBox.y < viewportBounds.y + viewportBounds.height &&
+            this.boundingBox.y + this.boundingBox.height > viewportBounds.y;
+    }
+    centerInViewport() {
+        const scale = this._store.state.scale;
+        this.translateX = (this._store.state.viewportWidth / 2 - this.totalWidth / 2 - this._store.state.translateX) / scale;
+        this.translateY = (this._store.state.viewportHeight / 2 - this.totalHeight / 2 - this._store.state.translateY) / scale;
+    }
+    move(startX, startY, endX, endY) {
+        const deltaX = (startX - endX) / this._store.state.scale;
+        const deltaY = (startY - endY) / this._store.state.scale;
+        this.translateX += deltaX;
+        this.translateY += deltaY;
+    }
+    resize(x, y, width, height) {
+        if (width <= 1 || height <= 1) {
+            return;
+        }
+        this.width = width;
+        this.height = height;
+        this.translateX = x;
+        this.translateY = y;
+    }
+    rotate(value) {
+        this.rotation = value;
+    }
+    copy() {
+        const copiedObject = Object.create(Object.getPrototypeOf(this));
+        Object.assign(copiedObject, this);
+        copiedObject.id = this.generateId();
+        copiedObject.isMounted = false;
+        return copiedObject;
+    }
+    revive(object) {
+        Object.assign(this, object);
+        return this;
+    }
+}
+
+class KritzelPath extends KritzelBaseObject {
+    constructor() {
+        super(...arguments);
+        this.__class__ = 'KritzelPath';
+        this.stroke = 'none';
+        this.lineSlack = 0.5;
+        this.x = 0;
+        this.y = 0;
+        this.height = 0;
+        this.width = 0;
+        this.scale = 1;
+        this.visible = true;
+        this.debugInfoVisible = true;
+    }
+    get viewBox() {
+        return `${this.x} ${this.y} ${this.width} ${this.height}`;
+    }
+    static create(store, options) {
+        var _a, _b, _c, _d, _e, _f;
+        const object = new KritzelPath();
+        object._store = store;
+        object.id = object.generateId();
+        object.options = options;
+        object.points = (_a = options === null || options === void 0 ? void 0 : options.points) !== null && _a !== void 0 ? _a : [];
+        object.translateX = (_b = options === null || options === void 0 ? void 0 : options.translateX) !== null && _b !== void 0 ? _b : 0;
+        object.translateY = (_c = options === null || options === void 0 ? void 0 : options.translateY) !== null && _c !== void 0 ? _c : 0;
+        object.scale = (_d = options === null || options === void 0 ? void 0 : options.scale) !== null && _d !== void 0 ? _d : 1;
+        object.strokeWidth = (_e = options === null || options === void 0 ? void 0 : options.strokeWidth) !== null && _e !== void 0 ? _e : 8;
+        object.fill = (_f = options === null || options === void 0 ? void 0 : options.fill) !== null && _f !== void 0 ? _f : '#000000';
+        object.zIndex = store.currentZIndex;
+        object.d = object.generateSvgPath();
+        object.updateDimensions();
+        return object;
+    }
+    resize(x, y, width, height) {
+        if (width <= 1 || height <= 1) {
+            return;
+        }
+        const scaleX = width / this.width;
+        const scaleY = height / this.height;
+        this.width = width;
+        this.height = height;
+        this.points = this.points.map(([x, y]) => [x * scaleX, y * scaleY]);
+        this.d = this.generateSvgPath();
+        this.width = Math.max(...this.points.map(p => p[0])) - Math.min(...this.points.map(p => p[0])) + this.strokeWidth;
+        this.height = Math.max(...this.points.map(p => p[1])) - Math.min(...this.points.map(p => p[1])) + this.strokeWidth;
+        this.x = Math.min(...this.points.map(p => p[0])) - this.strokeWidth / 2;
+        this.y = Math.min(...this.points.map(p => p[1])) - this.strokeWidth / 2;
+        this.translateX = x;
+        this.translateY = y;
+    }
+    rotate(value) {
+        super.rotate(value);
+        this.updateDimensions();
+    }
+    updateDimensions() {
+        const rotatedPoints = this.points.map(([x, y]) => {
+            const rotatedX = x * Math.cos(this.rotation) - y * Math.sin(this.rotation);
+            const rotatedY = x * Math.sin(this.rotation) + y * Math.cos(this.rotation);
+            return [rotatedX, rotatedY];
+        });
+        const minX = Math.min(...rotatedPoints.map(p => p[0] - this.strokeWidth / 2));
+        const minY = Math.min(...rotatedPoints.map(p => p[1] - this.strokeWidth / 2));
+        const maxX = Math.max(...rotatedPoints.map(p => p[0] + this.strokeWidth / 2));
+        const maxY = Math.max(...rotatedPoints.map(p => p[1] + this.strokeWidth / 2));
+        this.width = maxX - minX + this.lineSlack; // Add 0.5 to avoid rounding issues
+        this.height = maxY - minY + this.lineSlack; // Add 0.5 to avoid rounding issues
+        this.x = minX;
+        this.y = minY;
+        this.translateX = (this.x + this.translateX) / this.scale;
+        this.translateY = (this.y + this.translateY) / this.scale;
+    }
+    generateSvgPath() {
+        const stroke = this.getStrokeFromPoints(this.points, this.strokeWidth);
+        return this.getSvgPathFromStroke(stroke);
+    }
+    getStrokeFromPoints(points, strokeWidth) {
+        return cjsExports.getStroke(points, {
+            size: strokeWidth,
+            thinning: 0.5,
+            smoothing: 0.5,
+            streamline: 0.5,
+            easing: t => t,
+            simulatePressure: true,
+            last: true,
+            start: {
+                cap: true,
+                taper: 0,
+                easing: t => t,
+            },
+            end: {
+                cap: true,
+                taper: 0,
+                easing: t => t,
+            },
+        });
+    }
+    getSvgPathFromStroke(points, closed = true) {
+        const len = points.length;
+        if (len < 4) {
+            return ``;
+        }
+        let a = points[0];
+        let b = points[1];
+        const c = points[2];
+        let result = `M${a[0].toFixed(2)},${a[1].toFixed(2)} Q${b[0].toFixed(2)},${b[1].toFixed(2)} ${KritzelMathHelper.average(b[0], c[0]).toFixed(2)},${KritzelMathHelper.average(b[1], c[1]).toFixed(2)} T`;
+        for (let i = 2, max = len - 1; i < max; i++) {
+            a = points[i];
+            b = points[i + 1];
+            result += `${KritzelMathHelper.average(a[0], b[0]).toFixed(2)},${KritzelMathHelper.average(a[1], b[1]).toFixed(2)} `;
+        }
+        if (closed) {
+            result += 'Z';
+        }
+        return result;
+    }
+}
+
+class KritzelBaseTool {
+    constructor(store) {
+        this.__class__ = this.constructor.name;
+        this.name = 'base-tool';
+        this._store = store;
+    }
+    onActivate() {
+        // default implementation
+    }
+    onDeactivate() {
+        // default implementation
+    }
+    handleMouseDown(_event) {
+        // default implementation
+    }
+    handleMouseMove(_event) {
+        // default implementation
+    }
+    handleMouseUp(_event) {
+        // default implementation
+    }
+    handleDoubleClick(_event) {
+        // default implementation
+    }
+    handleDoubleTap(_event) {
+        // default implementation
+    }
+    handleTouchStart(_event) {
+        // default implementation
+    }
+    handleTouchMove(_event) {
+        // default implementation
+    }
+    handleTouchEnd(_event) {
+        // default implementation
+    }
+    handleWheel(_event) {
+        // default implementation
+    }
+    revive(object) {
+        Object.assign(this, object);
+        return this;
+    }
+}
+
+class KritzelBrushTool extends KritzelBaseTool {
+    constructor(store) {
+        super(store);
+        this.type = 'pen';
+        this.color = '#000000';
+        this.size = 6;
+        this.palettes = {
+            pen: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#808080', '#C0C0C0', '#800000', '#008000', '#000080', '#808000', '#800080'],
+            highlighter: ['#ffff00', '#ffb347', '#b4ffb4'],
+        };
+    }
+    handleMouseDown(event) {
+        if (KritzelEventHelper.isLeftClick(event)) {
+            this._store.state.isDrawing = true;
+            const x = event.clientX - this._store.offsetX;
+            const y = event.clientY - this._store.offsetY;
+            this._store.state.currentPath = KritzelPath.create(this._store, {
+                points: [[x, y]],
+                translateX: -this._store.state.translateX,
+                translateY: -this._store.state.translateY,
+                scale: this._store.state.scale,
+                fill: this.color,
+                strokeWidth: this.size,
+            });
+        }
+    }
+    handleMouseMove(event) {
+        if (this._store.state.isDrawing) {
+            const x = event.clientX - this._store.offsetX;
+            const y = event.clientY - this._store.offsetY;
+            this._store.state.currentPath = KritzelPath.create(this._store, {
+                points: [...this._store.state.currentPath.points, [x, y]],
+                translateX: -this._store.state.translateX,
+                translateY: -this._store.state.translateY,
+                scale: this._store.state.scale,
+                fill: this.color,
+                strokeWidth: this.size,
+            });
+            this._store.rerender();
+        }
+    }
+    handleMouseUp(_event) {
+        if (this._store.state.isDrawing) {
+            this._store.state.isDrawing = false;
+            if (this._store.state.currentPath) {
+                this._store.state.currentPath.zIndex = this._store.currentZIndex;
+                this._store.history.executeCommand(new AddObjectCommand(this._store, this, this._store.state.currentPath));
+            }
+            this._store.state.currentPath = undefined;
+        }
+    }
+    handleTouchStart(event) {
+        if (this._store.state.touchCount === 1) {
+            const x = Math.round(event.touches[0].clientX - this._store.offsetX);
+            const y = Math.round(event.touches[0].clientY - this._store.offsetY);
+            this._store.state.isDrawing = true;
+            this._store.state.currentPath = KritzelPath.create(this._store, {
+                points: [[x, y]],
+                translateX: -this._store.state.translateX,
+                translateY: -this._store.state.translateY,
+                scale: this._store.state.scale,
+                fill: this.color,
+                strokeWidth: this.size,
+            });
+            this._store.rerender();
+        }
+    }
+    handleTouchMove(event) {
+        if (this._store.state.touchCount === 1) {
+            const x = Math.round(event.touches[0].clientX - this._store.offsetX);
+            const y = Math.round(event.touches[0].clientY - this._store.offsetY);
+            this._store.state.currentPath = KritzelPath.create(this._store, {
+                points: [...this._store.state.currentPath.points, [x, y]],
+                translateX: -this._store.state.translateX,
+                translateY: -this._store.state.translateY,
+                scale: this._store.state.scale,
+                fill: this.color,
+                strokeWidth: this.size,
+            });
+            this._store.rerender();
+        }
+    }
+    handleTouchEnd(_event) {
+        if (this._store.state.isDrawing) {
+            this._store.state.isDrawing = false;
+            if (this._store.state.currentPath) {
+                this._store.state.currentPath.zIndex = this._store.currentZIndex;
+                this._store.history.executeCommand(new AddObjectCommand(this._store, this, this._store.state.currentPath));
+            }
+            this._store.state.currentPath = undefined;
+            this._store.rerender();
+        }
+    }
+}
+
+class KritzelText extends KritzelBaseObject {
+    get isReadonly() {
+        return !(this._store.state.activeTool instanceof KritzelTextTool);
+    }
+    constructor(config) {
+        super();
+        this.__class__ = 'KritzelText';
+        this.value = '';
+        this.fontFamily = 'Arial';
+        this.fontSize = 8;
+        this.fontColor = '#000000';
+        this.initialWidth = 3;
+        this.isNew = true;
+        this.debugInfoVisible = true;
+        this.rows = 1;
+        if (config) {
+            this.value = config.value || ' ';
+            this.translateX = config.translateX || 0;
+            this.translateY = config.translateY || 0;
+            this.fontSize = config.fontSize || 8;
+            this.fontFamily = config.fontFamily || 'Arial';
+            this.fontColor = config.fontColor || '#000000';
+            this.height = config.height || (this.fontSize * 1.2);
+            this.width = config.width || 0;
+            this.scale = config.scale || 1;
+        }
+    }
+    static create(store, fontSize, fontFamily) {
+        const object = new KritzelText();
+        object._store = store;
+        object.fontSize = fontSize;
+        object.fontFamily = fontFamily;
+        object.translateX = 0;
+        object.translateY = 0;
+        object.width = object.initialWidth / (object._store.state.scale < 0 ? object._store.state.scale : 1);
+        object.height = (object.fontSize * 1.2) / (object._store.state.scale < 0 ? object._store.state.scale : 1);
+        object.padding = 5;
+        object.backgroundColor = 'transparent';
+        object.scale = object._store.state.scale;
+        object.value = ' ';
+        object.zIndex = store.currentZIndex;
+        return object;
+    }
+    mount(element) {
+        if ((this.isMounted && this.elementRef === element) || this.isInViewport() === false) {
+            return;
+        }
+        this.elementRef = element;
+        this.isMounted = true;
+    }
+    resize(x, y, width, height) {
+        if (width <= 1 || height <= 1) {
+            return;
+        }
+        const scaleFactor = height / this.height;
+        this.fontSize = this.fontSize * scaleFactor;
+        this.width = this.width * scaleFactor;
+        this.height = height;
+        this.translateX = x;
+        this.translateY = y;
+    }
+    handleKeyDown(event) {
+        if (this.isReadonly) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    handleInput(event) {
+        const target = event.target;
+        if (target.value === '') {
+            this.value = ' ';
+            target.value = ' ';
+            target.selectionStart = target.selectionEnd = target.value.length;
+        }
+        else {
+            this.value = target.value.trim();
+        }
+        this.adjustTextareaSize();
+    }
+    adjustTextareaSize() {
+        if (this.elementRef) {
+            const span = document.createElement('span');
+            span.style.position = 'absolute';
+            span.style.whiteSpace = 'pre-wrap';
+            span.style.visibility = 'hidden';
+            span.style.fontSize = window.getComputedStyle(this.elementRef).fontSize;
+            span.style.fontFamily = window.getComputedStyle(this.elementRef).fontFamily;
+            span.innerHTML = this.elementRef.value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>') + '<br>';
+            document.body.appendChild(span);
+            const textWidth = span.offsetWidth;
+            const textHeight = span.offsetHeight;
+            document.body.removeChild(span);
+            this.width = textWidth;
+            this.height = textHeight;
+            this._store.rerender();
+        }
+    }
+    focus() {
+        if (this.elementRef) {
+            this.elementRef.focus();
+        }
+    }
+    selectAll() {
+        if (this.elementRef) {
+            this.elementRef.select();
+        }
+    }
+    insertFromClipboard() {
+        if (this.elementRef) {
+            this.elementRef.focus();
+            try {
+                navigator.clipboard.readText().then(text => {
+                    const start = this.elementRef.selectionStart;
+                    const end = this.elementRef.selectionEnd;
+                    const value = this.elementRef.value;
+                    this.elementRef.value = value.substring(0, start) + text + value.substring(end);
+                    this.elementRef.selectionStart = this.elementRef.selectionEnd = start + text.length;
+                    this.value = this.elementRef.value;
+                    this.adjustTextareaSize();
+                });
+            }
+            catch (err) {
+                console.error('Failed to read clipboard contents:', err);
+            }
+        }
+    }
+}
+
+class KritzelToolRegistry {
+    static registerTool(toolName, constructor, store) {
+        const toolInstance = new constructor(store);
+        toolInstance.name = toolName;
+        this.registry[toolName] = toolInstance;
+        return toolInstance;
+    }
+    static getTool(toolName) {
+        const toolInstance = this.registry[toolName];
+        if (!toolInstance) {
+            console.warn(`Unknown tool: ${toolName}`);
+            return null;
+        }
+        return toolInstance;
+    }
+}
+KritzelToolRegistry.registry = {};
+
+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',
+        ];
+    }
+    handleMouseDown(event) {
+        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;
+        text.adjustTextareaSize();
+        this._store.state.activeText = text;
+        this._store.history.executeCommand(new AddObjectCommand(this._store, this, text));
+    }
+    handleMouseUp(_event) {
+        var _a, _b;
+        (_a = this._store.state.activeText) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = this._store.state.activeText) === null || _b === void 0 ? void 0 : _b.adjustTextareaSize();
+    }
+    handleTouchStart(event) {
+        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 (this._store.state.touchCount > 1) {
+            return;
+        }
+        const clientX = Math.round(event.touches[0].clientX - this._store.offsetX);
+        const clientY = Math.round(event.touches[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));
+    }
+    handleTouchEnd(_event) {
+        var _a, _b;
+        (_a = this._store.state.activeText) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = this._store.state.activeText) === null || _b === void 0 ? void 0 : _b.adjustTextareaSize();
+    }
+}
+
+export { AddObjectCommand as A, KritzelBrushTool as K, ObjectHelper as O, KritzelTextTool as a, KritzelText as b, KritzelBaseCommand as c, KritzelBaseTool as d, KritzelEventHelper as e, KritzelBaseObject as f, KritzelToolRegistry as g, KritzelPath as h };
+//# sourceMappingURL=p-BcQCX1Z6.js.map
+
+//# sourceMappingURL=p-BcQCX1Z6.js.map