kritzel-react 0.1.32 → 0.1.34

package/dist/kritzel-stencil/src/classes/objects/path.class.js

@@ -1,401 +0,0 @@
-import { getStroke } from 'perfect-freehand';
-import { KritzelMathHelper } from '../../helpers/math.helper';
-import { KritzelBaseObject } from './base-object.class';
-import { KritzelGeometryHelper } from '../../helpers/geometry.helper';
-export class KritzelPath extends KritzelBaseObject {
-    get viewBox() {
-        return `${this.x} ${this.y} ${this.width} ${this.height}`;
-    }
-    constructor(config) {
-        var _a, _b, _c, _d, _e, _f;
-        super();
-        this.__class__ = 'KritzelPath';
-        this.stroke = { light: 'none', dark: 'none' };
-        this.lineSlack = 0.5;
-        this.x = 0;
-        this.y = 0;
-        this.height = 0;
-        this.width = 0;
-        this.scale = 1;
-        this.isVisible = true;
-        this.isDebugInfoVisible = true;
-        this.isCompleted = false;
-        this._adjustedPoints = null;
-        this.options = config;
-        this.points = (_a = config === null || config === void 0 ? void 0 : config.points) !== null && _a !== void 0 ? _a : [];
-        this.translateX = (_b = config === null || config === void 0 ? void 0 : config.translateX) !== null && _b !== void 0 ? _b : 0;
-        this.translateY = (_c = config === null || config === void 0 ? void 0 : config.translateY) !== null && _c !== void 0 ? _c : 0;
-        this.scale = (_d = config === null || config === void 0 ? void 0 : config.scale) !== null && _d !== void 0 ? _d : 1;
-        this.strokeWidth = (_e = config === null || config === void 0 ? void 0 : config.strokeWidth) !== null && _e !== void 0 ? _e : 8;
-        this.fill = (_f = config === null || config === void 0 ? void 0 : config.fill) !== null && _f !== void 0 ? _f : { light: '#000000', dark: '#ffffff' };
-        this.d = this.generateSvgPath();
-        this.updateDimensions();
-    }
-    static create(core, options) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const object = new KritzelPath();
-        object._core = core;
-        object.id = object.generateId();
-        object.workspaceId = core.store.state.activeWorkspace.id;
-        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 : { light: '#000000', dark: '#ffffff' };
-        object.opacity = (_g = options === null || options === void 0 ? void 0 : options.opacity) !== null && _g !== void 0 ? _g : 1;
-        object.zIndex = core.store.currentZIndex;
-        object.d = object.generateSvgPath();
-        object.updateDimensions();
-        return object;
-    }
-    copy() {
-        const copiedObject = super.copy();
-        if (this.points) {
-            copiedObject.points = this.points.map(p => [...p]);
-        }
-        return copiedObject;
-    }
-    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;
-        if (this.points.length === 1) {
-            const p = this.points[0];
-            const spreadX = Math.max(0, width - this.strokeWidth) / scaleX;
-            const spreadY = Math.max(0, height - this.strokeWidth) / scaleY;
-            this.points.push([p[0] + spreadX, p[1] + spreadY]);
-        }
-        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;
-        this._adjustedPoints = null;
-        this._core.store.state.objects.update(this);
-    }
-    rotate(value) {
-        this.rotation = value;
-        this._adjustedPoints = null;
-        this._core.store.state.objects.update(this);
-    }
-    move(startX, startY, endX, endY) {
-        const deltaX = (startX - endX) / this._core.store.state.scale;
-        const deltaY = (startY - endY) / this._core.store.state.scale;
-        this.translateX += deltaX;
-        this.translateY += deltaY;
-        this._adjustedPoints = null;
-        this._core.store.state.objects.update(this);
-    }
-    hitTest(x, y) {
-        const halfStroke = this.strokeWidth / this.scale / 2;
-        if (this._adjustedPoints === null) {
-            this._adjustedPoints = this.computeAdjustedPoints();
-        }
-        if (this._adjustedPoints.length === 1) {
-            const p1 = this._adjustedPoints[0];
-            const distance = this.pointToLineSegmentDistance(x, y, p1[0], p1[1], p1[0], p1[1]);
-            return distance <= halfStroke;
-        }
-        for (let i = 0; i < this._adjustedPoints.length - 1; i++) {
-            const p1 = this._adjustedPoints[i];
-            const p2 = this._adjustedPoints[i + 1];
-            const distance = this.pointToLineSegmentDistance(x, y, p1[0], p1[1], p2[0], p2[1]);
-            if (distance <= halfStroke) {
-                return true;
-            }
-        }
-        return false;
-    }
-    hitTestPolygon(polygon) {
-        const halfStroke = this.strokeWidth / this.scale / 2;
-        if (this._adjustedPoints === null) {
-            this._adjustedPoints = this.computeAdjustedPoints();
-        }
-        const polyPoints = [
-            { x: polygon.bottomLeft.x, y: polygon.bottomLeft.y },
-            { x: polygon.bottomRight.x, y: polygon.bottomRight.y },
-            { x: polygon.topRight.x, y: polygon.topRight.y },
-            { x: polygon.topLeft.x, y: polygon.topLeft.y },
-        ];
-        for (const [px, py] of this._adjustedPoints) {
-            if (KritzelGeometryHelper.isPointInPolygon({ x: px, y: py }, polyPoints)) {
-                return true;
-            }
-        }
-        for (const pt of polyPoints) {
-            if (this.hitTest(pt.x, pt.y)) {
-                return true;
-            }
-        }
-        for (let i = 0; i < this._adjustedPoints.length - 1; i++) {
-            const p1 = { x: this._adjustedPoints[i][0], y: this._adjustedPoints[i][1] };
-            const p2 = { x: this._adjustedPoints[i + 1][0], y: this._adjustedPoints[i + 1][1] };
-            for (let j = 0; j < polyPoints.length; j++) {
-                const q1 = polyPoints[j];
-                const q2 = polyPoints[(j + 1) % polyPoints.length];
-                if (KritzelGeometryHelper.intersectLines(p1, p2, q1, q2)) {
-                    return true;
-                }
-            }
-        }
-        for (let i = 0; i < this._adjustedPoints.length - 1; i++) {
-            const p1 = this._adjustedPoints[i];
-            const p2 = this._adjustedPoints[i + 1];
-            for (let j = 0; j < polyPoints.length; j++) {
-                const q1 = polyPoints[j];
-                const q2 = polyPoints[(j + 1) % polyPoints.length];
-                const d1 = this.pointToLineSegmentDistance(q1.x, q1.y, p1[0], p1[1], p2[0], p2[1]);
-                const d2 = this.pointToLineSegmentDistance(q2.x, q2.y, p1[0], p1[1], p2[0], p2[1]);
-                const d3 = this.pointToLineSegmentDistance(p1[0], p1[1], q1.x, q1.y, q2.x, q2.y);
-                const d4 = this.pointToLineSegmentDistance(p2[0], p2[1], q1.x, q1.y, q2.x, q2.y);
-                const minD = Math.min(d1, d2, d3, d4);
-                if (minD <= halfStroke) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-    updatePosition(x, y) {
-        this.translateX = x;
-        this.translateY = y;
-        this._adjustedPoints = null;
-        this._core.store.state.objects.update(this);
-    }
-    onAfterUpdate(changedProperties) {
-        if (changedProperties.includes('strokeWidth')) {
-            this.d = this.generateSvgPath();
-            this.updateBoundingBox();
-            this._adjustedPoints = null;
-        }
-    }
-    computeAdjustedPoints() {
-        var _a;
-        if (!((_a = this.points) === null || _a === void 0 ? void 0 : _a.length)) {
-            return [];
-        }
-        const angle = this.rotation;
-        const cos = Math.cos(angle);
-        const sin = Math.sin(angle);
-        const xs = this.points.map(p => p[0]);
-        const ys = this.points.map(p => p[1]);
-        const pivot = {
-            x: (Math.min(...xs) + Math.max(...xs)) / 2,
-            y: (Math.min(...ys) + Math.max(...ys)) / 2,
-        };
-        const { x: cx, y: cy } = pivot;
-        const rotatedPoints = this.points.map(([x, y]) => {
-            const dx = x - cx;
-            const dy = y - cy;
-            return [cx + dx * cos - dy * sin, cy + dx * sin + dy * cos];
-        });
-        return rotatedPoints.map(([px, py]) => [Math.abs(px - this.x) / this.scale + this.translateX, Math.abs(py - this.y) / this.scale + this.translateY]);
-    }
-    pointToLineSegmentDistance(x, y, x1, y1, x2, y2) {
-        const A = x - x1;
-        const B = y - y1;
-        const C = x2 - x1;
-        const D = y2 - y1;
-        const dot = A * C + B * D;
-        const len_sq = C * C + D * D;
-        let param = -1;
-        if (len_sq !== 0) {
-            // in case of 0 length line
-            param = dot / len_sq;
-        }
-        let xx, yy;
-        if (param < 0) {
-            xx = x1;
-            yy = y1;
-        }
-        else if (param > 1) {
-            xx = x2;
-            yy = y2;
-        }
-        else {
-            xx = x1 + param * C;
-            yy = y1 + param * D;
-        }
-        const dx = x - xx;
-        const dy = y - yy;
-        return Math.sqrt(dx * dx + dy * dy);
-    }
-    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;
-        this.height = maxY - minY + this.lineSlack;
-        this.x = minX;
-        this.y = minY;
-        this.translateX = (this.x + this.translateX) / this.scale;
-        this.translateY = (this.y + this.translateY) / this.scale;
-    }
-    /**
-     * Updates width, height, x, y based on current points and strokeWidth.
-     * Does NOT modify translateX/translateY (use updateDimensions for initial setup).
-     */
-    updateBoundingBox() {
-        const minX = Math.min(...this.points.map(p => p[0])) - this.strokeWidth / 2;
-        const minY = Math.min(...this.points.map(p => p[1])) - this.strokeWidth / 2;
-        const maxX = Math.max(...this.points.map(p => p[0])) + this.strokeWidth / 2;
-        const maxY = Math.max(...this.points.map(p => p[1])) + this.strokeWidth / 2;
-        this.width = maxX - minX + this.lineSlack;
-        this.height = maxY - minY + this.lineSlack;
-        this.x = minX;
-        this.y = minY;
-    }
-    generateSvgPath() {
-        const stroke = this.getStrokeFromPoints(this.points, this.strokeWidth);
-        return this.getSvgPathFromStroke(stroke);
-    }
-    getStrokeFromPoints(points, strokeWidth) {
-        return 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;
-    }
-    isLowRes() {
-        if (!this._core) {
-            return false;
-        }
-        const viewportScale = this._core.store.state.scale;
-        const scaledWidth = this.boundingBox.width * viewportScale;
-        const scaledHeight = this.boundingBox.height * viewportScale;
-        return (scaledWidth * scaledHeight) < 500;
-    }
-    /**
-     * Finds the point where a line from outsidePoint to the path's center
-     * intersects the stroke edge. Returns null if no intersection found.
-     * This is used for arrow clipping at the actual stroke edge.
-     */
-    getClipPoint(outsidePoint) {
-        const centerX = this.centerX;
-        const centerY = this.centerY;
-        const halfStroke = this.strokeWidth / this.scale / 2;
-        // Ensure adjusted points are computed
-        if (this._adjustedPoints === null) {
-            this._adjustedPoints = this.computeAdjustedPoints();
-        }
-        if (this._adjustedPoints.length < 1) {
-            return null;
-        }
-        // Sample along the line from outsidePoint to center to find stroke edge
-        const steps = 32;
-        let prevOutside = true;
-        for (let i = 1; i <= steps; i++) {
-            const t = i / steps;
-            const sampleX = outsidePoint.x + (centerX - outsidePoint.x) * t;
-            const sampleY = outsidePoint.y + (centerY - outsidePoint.y) * t;
-            // Check distance to path stroke
-            let minDistance = Infinity;
-            if (this._adjustedPoints.length === 1) {
-                const p = this._adjustedPoints[0];
-                const dx = sampleX - p[0];
-                const dy = sampleY - p[1];
-                minDistance = Math.sqrt(dx * dx + dy * dy);
-            }
-            else {
-                for (let j = 0; j < this._adjustedPoints.length - 1; j++) {
-                    const p1 = this._adjustedPoints[j];
-                    const p2 = this._adjustedPoints[j + 1];
-                    const dist = this.pointToLineSegmentDistance(sampleX, sampleY, p1[0], p1[1], p2[0], p2[1]);
-                    if (dist < minDistance) {
-                        minDistance = dist;
-                    }
-                }
-            }
-            const isInside = minDistance <= halfStroke;
-            // Found the edge: transition from outside to inside
-            if (prevOutside && isInside) {
-                // Refine the intersection point using binary search
-                let tLow = (i - 1) / steps;
-                let tHigh = t;
-                for (let k = 0; k < 8; k++) {
-                    const tMid = (tLow + tHigh) / 2;
-                    const midX = outsidePoint.x + (centerX - outsidePoint.x) * tMid;
-                    const midY = outsidePoint.y + (centerY - outsidePoint.y) * tMid;
-                    let midDist = Infinity;
-                    if (this._adjustedPoints.length === 1) {
-                        const p = this._adjustedPoints[0];
-                        const dx = midX - p[0];
-                        const dy = midY - p[1];
-                        midDist = Math.sqrt(dx * dx + dy * dy);
-                    }
-                    else {
-                        for (let j = 0; j < this._adjustedPoints.length - 1; j++) {
-                            const p1 = this._adjustedPoints[j];
-                            const p2 = this._adjustedPoints[j + 1];
-                            const dist = this.pointToLineSegmentDistance(midX, midY, p1[0], p1[1], p2[0], p2[1]);
-                            if (dist < midDist) {
-                                midDist = dist;
-                            }
-                        }
-                    }
-                    if (midDist <= halfStroke) {
-                        tHigh = tMid;
-                    }
-                    else {
-                        tLow = tMid;
-                    }
-                }
-                const finalT = (tLow + tHigh) / 2;
-                return {
-                    x: outsidePoint.x + (centerX - outsidePoint.x) * finalT,
-                    y: outsidePoint.y + (centerY - outsidePoint.y) * finalT,
-                };
-            }
-            prevOutside = !isInside;
-        }
-        return null;
-    }
-}

package/dist/kritzel-stencil/src/classes/objects/selection-box.class.js

@@ -1,21 +0,0 @@
-import { KritzelBaseObject } from './base-object.class';
-export class KritzelSelectionBox extends KritzelBaseObject {
-    constructor() {
-        super(...arguments);
-        this.__class__ = 'KritzelSelectionBox';
-    }
-    static create(core) {
-        const object = new KritzelSelectionBox();
-        object._core = core;
-        object.id = object.generateId();
-        object.workspaceId = core.store.state.activeWorkspace.id;
-        object.scale = core.store.state.scale;
-        object.zIndex = 99999;
-        object.backgroundColor = { light: 'rgba(0, 122, 255, 0.2)', dark: 'rgba(0, 122, 255, 0.2)' };
-        object.borderColor = { light: 'rgba(0, 122, 255, 0.5)', dark: 'rgba(0, 122, 255, 0.5)' };
-        object.borderWidth = 2;
-        object.height = 0;
-        object.width = 0;
-        return object;
-    }
-}