snice 3.2.0 → 3.3.0

package/dist/components/draw/snice-draw.js

@@ -0,0 +1,709 @@
+import { __esDecorate, __runInitializers } from 'tslib';
+import { element, property, query, styles, ready, dispose, render, on, dispatch, css, html } from 'snice';
+
+var drawStyles = ":host{display:block;width:100%;position:relative;user-select:none;-webkit-user-select:none}.draw-container{position:relative;width:100%;height:100%;overflow:hidden;background:var(--draw-bg,#fff);border-radius:var(--draw-border-radius,0);touch-action:none}.draw-canvas{display:block;width:100%;height:100%;cursor:crosshair}.draw-canvas.disabled{cursor:not-allowed;opacity:.5}.draw-canvas.tool-pen{cursor:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"2\" fill=\"black\"/></svg>') 12 12,crosshair}.draw-canvas.tool-eraser{cursor:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><rect x=\"8\" y=\"8\" width=\"8\" height=\"8\" fill=\"white\" stroke=\"black\"/></svg>') 12 12,crosshair}.lazy-brush-point{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--primary-color,#2196f3);pointer-events:none;opacity:0;transition:opacity .2s}.lazy-brush-point.active{opacity:.6}.lazy-brush-radius{position:absolute;border:1px dashed var(--primary-color,#2196f3);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .2s}.lazy-brush-radius.active{opacity:.3}";
+
+const ease = (t) => t * (2 - t);
+class DrawPoint {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+    update(point) {
+        this.x = point.x;
+        this.y = point.y;
+        return this;
+    }
+    moveByAngle(angle, distance, friction) {
+        const angleRotated = angle + Math.PI / 2;
+        if (friction) {
+            this.x = this.x + Math.sin(angleRotated) * distance * ease(1 - friction);
+            this.y = this.y - Math.cos(angleRotated) * distance * ease(1 - friction);
+        }
+        else {
+            this.x = this.x + Math.sin(angleRotated) * distance;
+            this.y = this.y - Math.cos(angleRotated) * distance;
+        }
+        return this;
+    }
+    equalsTo(point) {
+        return this.x === point.x && this.y === point.y;
+    }
+    getDifferenceTo(point) {
+        return new DrawPoint(this.x - point.x, this.y - point.y);
+    }
+    getDistanceTo(point) {
+        const diff = this.getDifferenceTo(point);
+        return Math.sqrt(Math.pow(diff.x, 2) + Math.pow(diff.y, 2));
+    }
+    getAngleTo(point) {
+        const diff = this.getDifferenceTo(point);
+        return Math.atan2(diff.y, diff.x);
+    }
+    toObject() {
+        return { x: this.x, y: this.y };
+    }
+}
+class DrawBrush {
+    constructor(options = {}) {
+        const initialPoint = options.initialPoint || { x: 0, y: 0 };
+        this.radius = options.radius || 30;
+        this._isEnabled = options.enabled === false ? false : true;
+        this.pointer = new DrawPoint(initialPoint.x, initialPoint.y);
+        this.brush = new DrawPoint(initialPoint.x, initialPoint.y);
+        this.angle = 0;
+        this.distance = 0;
+        this._hasMoved = false;
+    }
+    enable() {
+        this._isEnabled = true;
+    }
+    disable() {
+        this._isEnabled = false;
+    }
+    isEnabled() {
+        return this._isEnabled;
+    }
+    setRadius(radius) {
+        this.radius = radius;
+    }
+    getRadius() {
+        return this.radius;
+    }
+    getBrushCoordinates() {
+        return this.brush.toObject();
+    }
+    getPointerCoordinates() {
+        return this.pointer.toObject();
+    }
+    getBrush() {
+        return this.brush;
+    }
+    getPointer() {
+        return this.pointer;
+    }
+    getAngle() {
+        return this.angle;
+    }
+    getDistance() {
+        return this.distance;
+    }
+    brushHasMoved() {
+        return this._hasMoved;
+    }
+    update(newPointerPoint, options = {}) {
+        this._hasMoved = false;
+        if (this.pointer.equalsTo(newPointerPoint) && !options.both && !options.friction) {
+            return false;
+        }
+        this.pointer.update(newPointerPoint);
+        if (options.both) {
+            this._hasMoved = true;
+            this.brush.update(newPointerPoint);
+            return true;
+        }
+        if (this._isEnabled) {
+            this.distance = this.pointer.getDistanceTo(this.brush);
+            this.angle = this.pointer.getAngleTo(this.brush);
+            const isOutside = Math.round((this.distance - this.radius) * 10) / 10 > 0;
+            const friction = options.friction && options.friction < 1 && options.friction > 0
+                ? options.friction
+                : undefined;
+            if (isOutside) {
+                this.brush.moveByAngle(this.angle, this.distance - this.radius, friction);
+                this._hasMoved = true;
+            }
+        }
+        else {
+            this.distance = 0;
+            this.angle = 0;
+            this.brush.update(newPointerPoint);
+            this._hasMoved = true;
+        }
+        return true;
+    }
+}
+let SniceDraw = (() => {
+    let _classDecorators = [element('snice-draw')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _width_decorators;
+    let _width_initializers = [];
+    let _width_extraInitializers = [];
+    let _height_decorators;
+    let _height_initializers = [];
+    let _height_extraInitializers = [];
+    let _tool_decorators;
+    let _tool_initializers = [];
+    let _tool_extraInitializers = [];
+    let _color_decorators;
+    let _color_initializers = [];
+    let _color_extraInitializers = [];
+    let _strokeWidth_decorators;
+    let _strokeWidth_initializers = [];
+    let _strokeWidth_extraInitializers = [];
+    let _backgroundColor_decorators;
+    let _backgroundColor_initializers = [];
+    let _backgroundColor_extraInitializers = [];
+    let _lazy_decorators;
+    let _lazy_initializers = [];
+    let _lazy_extraInitializers = [];
+    let _lazyRadius_decorators;
+    let _lazyRadius_initializers = [];
+    let _lazyRadius_extraInitializers = [];
+    let _friction_decorators;
+    let _friction_initializers = [];
+    let _friction_extraInitializers = [];
+    let _smoothing_decorators;
+    let _smoothing_initializers = [];
+    let _smoothing_extraInitializers = [];
+    let _autoPolygon_decorators;
+    let _autoPolygon_initializers = [];
+    let _autoPolygon_extraInitializers = [];
+    let _polygonCurvePoints_decorators;
+    let _polygonCurvePoints_initializers = [];
+    let _polygonCurvePoints_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _canvasElement_decorators;
+    let _canvasElement_initializers = [];
+    let _canvasElement_extraInitializers = [];
+    let _styles_decorators;
+    let _onReady_decorators;
+    let _onDispose_decorators;
+    let _render_decorators;
+    let _handlePointerDown_decorators;
+    let _handlePointerMove_decorators;
+    let _handlePointerUp_decorators;
+    let _emitDrawStart_decorators;
+    let _emitDrawEnd_decorators;
+    let _emitDrawClear_decorators;
+    let _emitDrawUndo_decorators;
+    let _emitDrawRedo_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _width_decorators = [property({ type: Number })];
+            _height_decorators = [property({ type: Number })];
+            _tool_decorators = [property({ type: String })];
+            _color_decorators = [property({ type: String })];
+            _strokeWidth_decorators = [property({ type: Number, attribute: 'stroke-width' })];
+            _backgroundColor_decorators = [property({ type: String, attribute: 'background-color' })];
+            _lazy_decorators = [property({ type: Boolean })];
+            _lazyRadius_decorators = [property({ type: Number, attribute: 'lazy-radius' })];
+            _friction_decorators = [property({ type: Number })];
+            _smoothing_decorators = [property({ type: Number })];
+            _autoPolygon_decorators = [property({ type: Boolean, attribute: 'auto-polygon' })];
+            _polygonCurvePoints_decorators = [property({ type: Number, attribute: 'polygon-curve-points' })];
+            _disabled_decorators = [property({ type: Boolean })];
+            _canvasElement_decorators = [query('.draw-canvas')];
+            _styles_decorators = [styles()];
+            _onReady_decorators = [ready()];
+            _onDispose_decorators = [dispose()];
+            _render_decorators = [render()];
+            _handlePointerDown_decorators = [on('pointerdown', { target: 'canvas' })];
+            _handlePointerMove_decorators = [on('pointermove', { target: 'canvas' })];
+            _handlePointerUp_decorators = [on('pointerup', { target: 'canvas' })];
+            _emitDrawStart_decorators = [dispatch('@snice/draw-start', { bubbles: true, composed: true })];
+            _emitDrawEnd_decorators = [dispatch('@snice/draw-end', { bubbles: true, composed: true })];
+            _emitDrawClear_decorators = [dispatch('@snice/draw-clear', { bubbles: true, composed: true })];
+            _emitDrawUndo_decorators = [dispatch('@snice/draw-undo', { bubbles: true, composed: true })];
+            _emitDrawRedo_decorators = [dispatch('@snice/draw-redo', { bubbles: true, composed: true })];
+            __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onReady_decorators, { kind: "method", name: "onReady", static: false, private: false, access: { has: obj => "onReady" in obj, get: obj => obj.onReady }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onDispose_decorators, { kind: "method", name: "onDispose", static: false, private: false, access: { has: obj => "onDispose" in obj, get: obj => obj.onDispose }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handlePointerDown_decorators, { kind: "method", name: "handlePointerDown", static: false, private: false, access: { has: obj => "handlePointerDown" in obj, get: obj => obj.handlePointerDown }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handlePointerMove_decorators, { kind: "method", name: "handlePointerMove", static: false, private: false, access: { has: obj => "handlePointerMove" in obj, get: obj => obj.handlePointerMove }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handlePointerUp_decorators, { kind: "method", name: "handlePointerUp", static: false, private: false, access: { has: obj => "handlePointerUp" in obj, get: obj => obj.handlePointerUp }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitDrawStart_decorators, { kind: "method", name: "emitDrawStart", static: false, private: false, access: { has: obj => "emitDrawStart" in obj, get: obj => obj.emitDrawStart }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitDrawEnd_decorators, { kind: "method", name: "emitDrawEnd", static: false, private: false, access: { has: obj => "emitDrawEnd" in obj, get: obj => obj.emitDrawEnd }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitDrawClear_decorators, { kind: "method", name: "emitDrawClear", static: false, private: false, access: { has: obj => "emitDrawClear" in obj, get: obj => obj.emitDrawClear }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitDrawUndo_decorators, { kind: "method", name: "emitDrawUndo", static: false, private: false, access: { has: obj => "emitDrawUndo" in obj, get: obj => obj.emitDrawUndo }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitDrawRedo_decorators, { kind: "method", name: "emitDrawRedo", static: false, private: false, access: { has: obj => "emitDrawRedo" in obj, get: obj => obj.emitDrawRedo }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _width_decorators, { kind: "field", name: "width", static: false, private: false, access: { has: obj => "width" in obj, get: obj => obj.width, set: (obj, value) => { obj.width = value; } }, metadata: _metadata }, _width_initializers, _width_extraInitializers);
+            __esDecorate(null, null, _height_decorators, { kind: "field", name: "height", static: false, private: false, access: { has: obj => "height" in obj, get: obj => obj.height, set: (obj, value) => { obj.height = value; } }, metadata: _metadata }, _height_initializers, _height_extraInitializers);
+            __esDecorate(null, null, _tool_decorators, { kind: "field", name: "tool", static: false, private: false, access: { has: obj => "tool" in obj, get: obj => obj.tool, set: (obj, value) => { obj.tool = value; } }, metadata: _metadata }, _tool_initializers, _tool_extraInitializers);
+            __esDecorate(null, null, _color_decorators, { kind: "field", name: "color", static: false, private: false, access: { has: obj => "color" in obj, get: obj => obj.color, set: (obj, value) => { obj.color = value; } }, metadata: _metadata }, _color_initializers, _color_extraInitializers);
+            __esDecorate(null, null, _strokeWidth_decorators, { kind: "field", name: "strokeWidth", static: false, private: false, access: { has: obj => "strokeWidth" in obj, get: obj => obj.strokeWidth, set: (obj, value) => { obj.strokeWidth = value; } }, metadata: _metadata }, _strokeWidth_initializers, _strokeWidth_extraInitializers);
+            __esDecorate(null, null, _backgroundColor_decorators, { kind: "field", name: "backgroundColor", static: false, private: false, access: { has: obj => "backgroundColor" in obj, get: obj => obj.backgroundColor, set: (obj, value) => { obj.backgroundColor = value; } }, metadata: _metadata }, _backgroundColor_initializers, _backgroundColor_extraInitializers);
+            __esDecorate(null, null, _lazy_decorators, { kind: "field", name: "lazy", static: false, private: false, access: { has: obj => "lazy" in obj, get: obj => obj.lazy, set: (obj, value) => { obj.lazy = value; } }, metadata: _metadata }, _lazy_initializers, _lazy_extraInitializers);
+            __esDecorate(null, null, _lazyRadius_decorators, { kind: "field", name: "lazyRadius", static: false, private: false, access: { has: obj => "lazyRadius" in obj, get: obj => obj.lazyRadius, set: (obj, value) => { obj.lazyRadius = value; } }, metadata: _metadata }, _lazyRadius_initializers, _lazyRadius_extraInitializers);
+            __esDecorate(null, null, _friction_decorators, { kind: "field", name: "friction", static: false, private: false, access: { has: obj => "friction" in obj, get: obj => obj.friction, set: (obj, value) => { obj.friction = value; } }, metadata: _metadata }, _friction_initializers, _friction_extraInitializers);
+            __esDecorate(null, null, _smoothing_decorators, { kind: "field", name: "smoothing", static: false, private: false, access: { has: obj => "smoothing" in obj, get: obj => obj.smoothing, set: (obj, value) => { obj.smoothing = value; } }, metadata: _metadata }, _smoothing_initializers, _smoothing_extraInitializers);
+            __esDecorate(null, null, _autoPolygon_decorators, { kind: "field", name: "autoPolygon", static: false, private: false, access: { has: obj => "autoPolygon" in obj, get: obj => obj.autoPolygon, set: (obj, value) => { obj.autoPolygon = value; } }, metadata: _metadata }, _autoPolygon_initializers, _autoPolygon_extraInitializers);
+            __esDecorate(null, null, _polygonCurvePoints_decorators, { kind: "field", name: "polygonCurvePoints", static: false, private: false, access: { has: obj => "polygonCurvePoints" in obj, get: obj => obj.polygonCurvePoints, set: (obj, value) => { obj.polygonCurvePoints = value; } }, metadata: _metadata }, _polygonCurvePoints_initializers, _polygonCurvePoints_extraInitializers);
+            __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(null, null, _canvasElement_decorators, { kind: "field", name: "canvasElement", static: false, private: false, access: { has: obj => "canvasElement" in obj, get: obj => obj.canvasElement, set: (obj, value) => { obj.canvasElement = value; } }, metadata: _metadata }, _canvasElement_initializers, _canvasElement_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        constructor() {
+            super();
+            this.width = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _width_initializers, 800));
+            this.height = (__runInitializers(this, _width_extraInitializers), __runInitializers(this, _height_initializers, 600));
+            this.tool = (__runInitializers(this, _height_extraInitializers), __runInitializers(this, _tool_initializers, 'pen'));
+            this.color = (__runInitializers(this, _tool_extraInitializers), __runInitializers(this, _color_initializers, '#000000'));
+            this.strokeWidth = (__runInitializers(this, _color_extraInitializers), __runInitializers(this, _strokeWidth_initializers, 2));
+            this.backgroundColor = (__runInitializers(this, _strokeWidth_extraInitializers), __runInitializers(this, _backgroundColor_initializers, '#ffffff'));
+            this.lazy = (__runInitializers(this, _backgroundColor_extraInitializers), __runInitializers(this, _lazy_initializers, false));
+            this.lazyRadius = (__runInitializers(this, _lazy_extraInitializers), __runInitializers(this, _lazyRadius_initializers, 60));
+            this.friction = (__runInitializers(this, _lazyRadius_extraInitializers), __runInitializers(this, _friction_initializers, 0.1));
+            this.smoothing = (__runInitializers(this, _friction_extraInitializers), __runInitializers(this, _smoothing_initializers, 0.5));
+            this.autoPolygon = (__runInitializers(this, _smoothing_extraInitializers), __runInitializers(this, _autoPolygon_initializers, false));
+            this.polygonCurvePoints = (__runInitializers(this, _autoPolygon_extraInitializers), __runInitializers(this, _polygonCurvePoints_initializers, 10));
+            this.disabled = (__runInitializers(this, _polygonCurvePoints_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+            this.canvasElement = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _canvasElement_initializers, void 0));
+            this.canvas = (__runInitializers(this, _canvasElement_extraInitializers), null);
+            this.ctx = null;
+            this.isDrawing = false;
+            this.isPressing = false;
+            this.currentStroke = [];
+            this.strokes = [];
+            this.undoneStrokes = [];
+            this.lastPoint = null;
+            this.rafId = null;
+            this.mouseX = 0;
+            this.mouseY = 0;
+            this.drawBrush = new DrawBrush({
+                radius: this.lazyRadius,
+                enabled: this.lazy
+            });
+        }
+        styles() {
+            return css /*css*/ `${drawStyles}`;
+        }
+        onReady() {
+            requestAnimationFrame(() => {
+                this.initCanvas();
+                this.startLoop();
+            });
+        }
+        onDispose() {
+            this.stopLoop();
+        }
+        render() {
+            return html `
+      <div class="draw-container">
+        <canvas
+          width="${this.width}"
+          height="${this.height}"
+          class="draw-canvas tool-${this.tool} ${this.disabled ? 'disabled' : ''}">
+        </canvas>
+      </div>
+    `;
+        }
+        initCanvas() {
+            this.canvas = this.canvasElement || null;
+            if (!this.canvas)
+                return;
+            // Handle high DPI displays
+            const dpr = window.devicePixelRatio || 1;
+            this.canvas.getBoundingClientRect();
+            // Set canvas buffer size (accounting for DPI)
+            this.canvas.width = this.width * dpr;
+            this.canvas.height = this.height * dpr;
+            // Set display size
+            this.canvas.style.width = `${this.width}px`;
+            this.canvas.style.height = `${this.height}px`;
+            this.ctx = this.canvas.getContext('2d', { willReadFrequently: true });
+            if (!this.ctx)
+                return;
+            // Scale canvas drawing to match DPI
+            this.ctx.scale(dpr, dpr);
+            // Enable anti-aliasing for smooth lines
+            this.ctx.imageSmoothingEnabled = true;
+            this.ctx.imageSmoothingQuality = 'high';
+            // Set background
+            this.ctx.fillStyle = this.backgroundColor;
+            this.ctx.fillRect(0, 0, this.width, this.height);
+            // Redraw existing strokes
+            this.redraw();
+        }
+        handlePointerDown(e) {
+            if (this.disabled)
+                return;
+            e.preventDefault();
+            const point = this.getPointerPosition(e);
+            this.mouseX = point.x;
+            this.mouseY = point.y;
+            // Update brush to pointer position immediately
+            this.drawBrush.update(point, { both: true });
+            this.isPressing = true;
+            this.canvas?.setPointerCapture(e.pointerId);
+            this.emitDrawStart(point);
+        }
+        handlePointerMove(e) {
+            if (this.disabled)
+                return;
+            e.preventDefault();
+            const point = this.getPointerPosition(e);
+            this.mouseX = point.x;
+            this.mouseY = point.y;
+        }
+        handlePointerUp(e) {
+            if (!this.isPressing)
+                return;
+            e.preventDefault();
+            this.isPressing = false;
+            this.isDrawing = false;
+            if (this.currentStroke.length > 0) {
+                // Process polygon if auto-polygon is enabled
+                const points = this.autoPolygon
+                    ? this.processPolygon([...this.currentStroke])
+                    : [...this.currentStroke];
+                const stroke = {
+                    id: this.generateId(),
+                    tool: this.tool,
+                    color: this.color,
+                    width: this.strokeWidth,
+                    points,
+                    timestamp: Date.now()
+                };
+                this.strokes.push(stroke);
+                this.currentStroke = [];
+                // Redraw immediately to show the processed polygon
+                this.redraw();
+                this.emitDrawEnd(stroke);
+            }
+            this.canvas?.releasePointerCapture(e.pointerId);
+        }
+        getPointerPosition(e) {
+            if (!this.canvas)
+                return { x: 0, y: 0, pressure: 0 };
+            const rect = this.canvas.getBoundingClientRect();
+            // Map from screen coordinates to logical canvas coordinates
+            const x = (e.clientX - rect.left) * (this.width / rect.width);
+            const y = (e.clientY - rect.top) * (this.height / rect.height);
+            return {
+                x,
+                y,
+                pressure: e.pressure
+            };
+        }
+        startLoop() {
+            const loop = () => {
+                this.updateLazyBrush();
+                this.rafId = requestAnimationFrame(loop);
+            };
+            loop();
+        }
+        stopLoop() {
+            if (this.rafId !== null) {
+                cancelAnimationFrame(this.rafId);
+                this.rafId = null;
+            }
+        }
+        midPointBtw(p1, p2) {
+            return {
+                x: p1.x + (p2.x - p1.x) / 2,
+                y: p1.y + (p2.y - p1.y) / 2
+            };
+        }
+        updateLazyBrush() {
+            if (!this.ctx)
+                return;
+            this.drawBrush.update({ x: this.mouseX, y: this.mouseY }, { friction: this.isDrawing ? this.friction : 1 });
+            !this.drawBrush.isEnabled();
+            this.drawBrush.brushHasMoved();
+            // Start drawing if pressing and not yet drawing
+            if (this.isPressing && !this.isDrawing) {
+                this.isDrawing = true;
+                this.currentStroke = [];
+                this.undoneStrokes = [];
+                this.currentStroke.push(this.drawBrush.getBrushCoordinates());
+            }
+            if (this.isDrawing) {
+                // Clear canvas and fill background
+                this.ctx.fillStyle = this.backgroundColor;
+                this.ctx.fillRect(0, 0, this.width, this.height);
+                // Redraw all completed strokes
+                this.strokes.forEach(stroke => {
+                    this.drawStroke(stroke);
+                });
+                // Add current point
+                this.currentStroke.push(this.drawBrush.getBrushCoordinates());
+                // Draw current stroke with smoothing
+                if (this.currentStroke.length > 1) {
+                    this.ctx.lineJoin = 'round';
+                    this.ctx.lineCap = 'round';
+                    this.ctx.strokeStyle = this.tool === 'eraser' ? this.backgroundColor : this.color;
+                    this.ctx.lineWidth = this.strokeWidth * 2;
+                    let p1 = this.currentStroke[0];
+                    let p2 = this.currentStroke[1];
+                    this.ctx.moveTo(p2.x, p2.y);
+                    this.ctx.beginPath();
+                    for (let i = 1, len = this.currentStroke.length; i < len; i++) {
+                        const midPoint = this.midPointBtw(p1, p2);
+                        this.ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
+                        p1 = this.currentStroke[i];
+                        p2 = this.currentStroke[i + 1];
+                    }
+                    // Draw last line as straight line while waiting for next point
+                    this.ctx.lineTo(p1.x, p1.y);
+                    this.ctx.stroke();
+                }
+            }
+        }
+        redraw() {
+            if (!this.ctx)
+                return;
+            // Clear and set background
+            this.ctx.fillStyle = this.backgroundColor;
+            this.ctx.fillRect(0, 0, this.width, this.height);
+            // Redraw all strokes
+            this.strokes.forEach(stroke => {
+                this.drawStroke(stroke);
+            });
+        }
+        drawStroke(stroke) {
+            if (!this.ctx || stroke.points.length === 0)
+                return;
+            this.ctx.lineJoin = 'round';
+            this.ctx.lineCap = 'round';
+            this.ctx.strokeStyle = stroke.tool === 'eraser' ? this.backgroundColor : stroke.color;
+            this.ctx.lineWidth = stroke.width * 2;
+            if (stroke.points.length === 1) {
+                // Single point - just draw a dot
+                this.ctx.beginPath();
+                this.ctx.arc(stroke.points[0].x, stroke.points[0].y, stroke.width, 0, Math.PI * 2);
+                this.ctx.fill();
+                return;
+            }
+            let p1 = stroke.points[0];
+            let p2 = stroke.points[1];
+            this.ctx.moveTo(p2.x, p2.y);
+            this.ctx.beginPath();
+            for (let i = 1, len = stroke.points.length; i < len; i++) {
+                const midPoint = this.midPointBtw(p1, p2);
+                this.ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
+                p1 = stroke.points[i];
+                p2 = stroke.points[i + 1];
+            }
+            this.ctx.lineTo(p1.x, p1.y);
+            this.ctx.stroke();
+        }
+        clear() {
+            if (!this.ctx)
+                return;
+            this.strokes = [];
+            this.undoneStrokes = [];
+            this.ctx.fillStyle = this.backgroundColor;
+            this.ctx.fillRect(0, 0, this.width, this.height);
+            this.emitDrawClear();
+        }
+        undo() {
+            if (this.strokes.length === 0)
+                return;
+            const stroke = this.strokes.pop();
+            if (stroke) {
+                this.undoneStrokes.push(stroke);
+                this.redraw();
+                this.emitDrawUndo();
+            }
+        }
+        redo() {
+            if (this.undoneStrokes.length === 0)
+                return;
+            const stroke = this.undoneStrokes.pop();
+            if (stroke) {
+                this.strokes.push(stroke);
+                this.drawStroke(stroke);
+                this.emitDrawRedo();
+            }
+        }
+        toDataURL(type = 'image/png', quality = 0.92) {
+            if (!this.canvas)
+                return '';
+            return this.canvas.toDataURL(type, quality);
+        }
+        async toBlob(type = 'image/png', quality = 0.92) {
+            if (!this.canvas)
+                throw new Error('Canvas not initialized');
+            return new Promise((resolve, reject) => {
+                this.canvas?.toBlob((blob) => {
+                    if (blob)
+                        resolve(blob);
+                    else
+                        reject(new Error('Failed to create blob'));
+                }, type, quality);
+            });
+        }
+        download(filename = `drawing-${Date.now()}.png`) {
+            const dataURL = this.toDataURL();
+            const a = document.createElement('a');
+            a.href = dataURL;
+            a.download = filename;
+            a.click();
+        }
+        async loadImage(url) {
+            if (!this.ctx)
+                throw new Error('Canvas not initialized');
+            return new Promise((resolve, reject) => {
+                const img = new Image();
+                img.crossOrigin = 'anonymous';
+                img.onload = () => {
+                    this.ctx.drawImage(img, 0, 0, this.width, this.height);
+                    resolve();
+                };
+                img.onerror = () => reject(new Error('Failed to load image'));
+                img.src = url;
+            });
+        }
+        getStrokes() {
+            return [...this.strokes];
+        }
+        setStrokes(strokes) {
+            this.strokes = [...strokes];
+            this.undoneStrokes = [];
+            this.redraw();
+        }
+        generateId() {
+            return `stroke-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        }
+        // Polygon processing methods
+        processPolygon(points) {
+            if (!this.autoPolygon || points.length < 4)
+                return points;
+            // Simplify to line segments (sample every Nth point for performance)
+            const simplified = this.simplifyPoints(points, 5);
+            // Check for self-intersection
+            const intersection = this.findFirstIntersection(simplified);
+            if (intersection) {
+                // Trim at intersection point
+                return this.trimAtIntersection(points, intersection);
+            }
+            else {
+                // Check if shape should be closed
+                const start = points[0];
+                const end = points[points.length - 1];
+                const distance = Math.sqrt(Math.pow(end.x - start.x, 2) + Math.pow(end.y - start.y, 2));
+                // If start and end are far apart (more than 20px), close the shape with a curve
+                if (distance > 20) {
+                    const curvePoints = this.createClosingCurve(end, start, this.polygonCurvePoints);
+                    return [...points, ...curvePoints];
+                }
+            }
+            return points;
+        }
+        simplifyPoints(points, step) {
+            const simplified = [];
+            for (let i = 0; i < points.length; i += step) {
+                simplified.push(points[i]);
+            }
+            // Always include the last point
+            if (simplified[simplified.length - 1] !== points[points.length - 1]) {
+                simplified.push(points[points.length - 1]);
+            }
+            return simplified;
+        }
+        findFirstIntersection(points) {
+            // Check each line segment against all others
+            for (let i = 0; i < points.length - 1; i++) {
+                const p1 = points[i];
+                const p2 = points[i + 1];
+                // Start checking from i+2 to avoid adjacent segments
+                for (let j = i + 2; j < points.length - 1; j++) {
+                    const p3 = points[j];
+                    const p4 = points[j + 1];
+                    // Don't check the last segment against the first (they should connect)
+                    if (i === 0 && j === points.length - 2)
+                        continue;
+                    const intersection = this.lineIntersection(p1, p2, p3, p4);
+                    if (intersection) {
+                        return { i, j, point: intersection };
+                    }
+                }
+            }
+            return null;
+        }
+        lineIntersection(p1, p2, p3, p4) {
+            const x1 = p1.x, y1 = p1.y;
+            const x2 = p2.x, y2 = p2.y;
+            const x3 = p3.x, y3 = p3.y;
+            const x4 = p4.x, y4 = p4.y;
+            const denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
+            if (Math.abs(denom) < 0.0001)
+                return null; // Parallel lines
+            const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / denom;
+            const u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / denom;
+            if (t >= 0 && t <= 1 && u >= 0 && u <= 1) {
+                return {
+                    x: x1 + t * (x2 - x1),
+                    y: y1 + t * (y2 - y1),
+                    pressure: 0
+                };
+            }
+            return null;
+        }
+        trimAtIntersection(points, intersection) {
+            // Find the actual indices in the full point array based on simplified indices
+            const step = 5;
+            const actualI = Math.min(intersection.i * step, points.length - 1);
+            // Keep points up to the intersection, add the intersection point, then close
+            return [...points.slice(0, actualI + 1), intersection.point];
+        }
+        createClosingCurve(start, end, numPoints) {
+            if (numPoints < 2)
+                return [end];
+            const curvePoints = [];
+            // Calculate control point for the curve
+            // Use a point perpendicular to the line between start and end
+            const midX = (start.x + end.x) / 2;
+            const midY = (start.y + end.y) / 2;
+            // Vector from start to end
+            const dx = end.x - start.x;
+            const dy = end.y - start.y;
+            // Perpendicular vector (rotated 90 degrees)
+            const perpX = -dy;
+            const perpY = dx;
+            // Control point is offset from midpoint along perpendicular
+            // Offset is proportional to distance to create a natural curve
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            const offset = distance * 0.2; // 20% of distance
+            const controlX = midX + (perpX / distance) * offset;
+            const controlY = midY + (perpY / distance) * offset;
+            // Interpolate points along the quadratic Bezier curve
+            for (let i = 1; i <= numPoints; i++) {
+                const t = i / (numPoints + 1);
+                // Quadratic Bezier formula: B(t) = (1-t)²P0 + 2(1-t)tP1 + t²P2
+                const x = Math.pow(1 - t, 2) * start.x +
+                    2 * (1 - t) * t * controlX +
+                    Math.pow(t, 2) * end.x;
+                const y = Math.pow(1 - t, 2) * start.y +
+                    2 * (1 - t) * t * controlY +
+                    Math.pow(t, 2) * end.y;
+                curvePoints.push({ x, y, pressure: 0 });
+            }
+            // Add the end point
+            curvePoints.push(end);
+            return curvePoints;
+        }
+        emitDrawStart(point) {
+            return { draw: this, point };
+        }
+        emitDrawEnd(stroke) {
+            return { draw: this, stroke };
+        }
+        emitDrawClear() {
+            return { draw: this };
+        }
+        emitDrawUndo() {
+            return { draw: this };
+        }
+        emitDrawRedo() {
+            return { draw: this };
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceDraw };
+//# sourceMappingURL=snice-draw.js.map