kritzel-react 0.1.32 → 0.1.34

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

@@ -1,412 +0,0 @@
-var __rest = (this && this.__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;
-};
-import { KritzelToolRegistry } from '../registries/tool.registry';
-import { KritzelBaseObject } from './base-object.class';
-import { KritzelKeyboardHelper } from '../../helpers/keyboard.helper';
-import { KritzelDevicesHelper } from '../../helpers/devices.helper';
-import { KritzelGeometryHelper } from '../../helpers/geometry.helper';
-import { ShapeType } from '../../enums/shape-type.enum';
-import { EditorState, TextSelection } from 'prosemirror-state';
-import { EditorView } from 'prosemirror-view';
-import { Schema } from 'prosemirror-model';
-import { schema } from 'prosemirror-schema-basic';
-import { addListNodes } from 'prosemirror-schema-list';
-import { keymap } from 'prosemirror-keymap';
-import { baseKeymap } from 'prosemirror-commands';
-import { KritzelColorHelper } from '../../helpers/color.helper';
-export class KritzelShape extends KritzelBaseObject {
-    /**
-     * Returns the viewBox for the shape's SVG, using screen-space coordinates.
-     * This follows the same pattern as KritzelPath.viewBox.
-     */
-    get viewBox() {
-        return `${this.x} ${this.y} ${this.width} ${this.height}`;
-    }
-    constructor(config) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        super();
-        this.__class__ = 'KritzelShape';
-        this.shapeType = ShapeType.Rectangle;
-        this.fillColor = { light: 'transparent', dark: 'transparent' };
-        this.strokeColor = { light: '#000000', dark: '#ffffff' };
-        this.strokeWidth = 4;
-        this.fontFamily = 'Arial';
-        this.fontSize = 16;
-        this.fontColor = { light: '#000000', dark: '#ffffff' };
-        /** Screen-space x coordinate of the shape's top-left corner (like Path.x) */
-        this.x = 0;
-        /** Screen-space y coordinate of the shape's top-left corner (like Path.y) */
-        this.y = 0;
-        this.scale = 1;
-        this.scaleFactor = 1;
-        this.isDebugInfoVisible = true;
-        this.isEditable = true;
-        this.isEditing = false;
-        this.editor = null;
-        this.content = null;
-        this._schema = new Schema({
-            nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
-            marks: schema.spec.marks,
-        });
-        this.uneditedObject = null;
-        if (config) {
-            this.x = (_a = config.x) !== null && _a !== void 0 ? _a : 0;
-            this.y = (_b = config.y) !== null && _b !== void 0 ? _b : 0;
-            this.translateX = (_c = config.translateX) !== null && _c !== void 0 ? _c : 0;
-            this.translateY = (_d = config.translateY) !== null && _d !== void 0 ? _d : 0;
-            this.width = (_e = config.width) !== null && _e !== void 0 ? _e : 100;
-            this.height = (_f = config.height) !== null && _f !== void 0 ? _f : 100;
-            this.shapeType = (_g = config.shapeType) !== null && _g !== void 0 ? _g : ShapeType.Rectangle;
-            this.fillColor = (_h = config.fillColor) !== null && _h !== void 0 ? _h : { light: 'transparent', dark: 'transparent' };
-            this.strokeColor = (_j = config.strokeColor) !== null && _j !== void 0 ? _j : { light: '#000000', dark: '#ffffff' };
-            this.strokeWidth = (_k = config.strokeWidth) !== null && _k !== void 0 ? _k : 4;
-            this.fontSize = (_l = config.fontSize) !== null && _l !== void 0 ? _l : 16;
-            this.fontFamily = (_m = config.fontFamily) !== null && _m !== void 0 ? _m : 'Arial';
-            this.fontColor = (_o = config.fontColor) !== null && _o !== void 0 ? _o : KritzelColorHelper.determineTextColor(this.fillColor);
-            this.scale = (_p = config.scale) !== null && _p !== void 0 ? _p : 1;
-            this.scaleFactor = (_q = config.scaleX) !== null && _q !== void 0 ? _q : 1;
-        }
-    }
-    /**
-     * Creates a new KritzelShape with screen-space coordinates.
-     * Following the same pattern as KritzelPath.create():
-     * - x, y are screen-space coordinates of the shape's top-left corner
-     * - translateX, translateY should be set to -viewportTranslateX, -viewportTranslateY
-     * - width, height are in screen-space
-     * - scale is the viewport scale at creation time
-     */
-    static create(core, config) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        const object = new KritzelShape();
-        object._core = core;
-        object.id = object.generateId();
-        object.workspaceId = core.store.state.activeWorkspace.id;
-        object.x = (_a = config === null || config === void 0 ? void 0 : config.x) !== null && _a !== void 0 ? _a : 0;
-        object.y = (_b = config === null || config === void 0 ? void 0 : config.y) !== null && _b !== void 0 ? _b : 0;
-        object.translateX = (_c = config === null || config === void 0 ? void 0 : config.translateX) !== null && _c !== void 0 ? _c : 0;
-        object.translateY = (_d = config === null || config === void 0 ? void 0 : config.translateY) !== null && _d !== void 0 ? _d : 0;
-        object.width = (_e = config === null || config === void 0 ? void 0 : config.width) !== null && _e !== void 0 ? _e : 100;
-        object.height = (_f = config === null || config === void 0 ? void 0 : config.height) !== null && _f !== void 0 ? _f : 100;
-        object.shapeType = (_g = config === null || config === void 0 ? void 0 : config.shapeType) !== null && _g !== void 0 ? _g : ShapeType.Rectangle;
-        object.fillColor = (_h = config === null || config === void 0 ? void 0 : config.fillColor) !== null && _h !== void 0 ? _h : { light: 'transparent', dark: 'transparent' };
-        object.strokeColor = (_j = config === null || config === void 0 ? void 0 : config.strokeColor) !== null && _j !== void 0 ? _j : { light: '#000000', dark: '#ffffff' };
-        object.strokeWidth = (_k = config === null || config === void 0 ? void 0 : config.strokeWidth) !== null && _k !== void 0 ? _k : 4;
-        object.opacity = (_l = config === null || config === void 0 ? void 0 : config.opacity) !== null && _l !== void 0 ? _l : 1;
-        object.fontSize = (_m = config === null || config === void 0 ? void 0 : config.fontSize) !== null && _m !== void 0 ? _m : 16;
-        object.fontFamily = (_o = config === null || config === void 0 ? void 0 : config.fontFamily) !== null && _o !== void 0 ? _o : 'Arial';
-        object.fontColor = (_p = config === null || config === void 0 ? void 0 : config.fontColor) !== null && _p !== void 0 ? _p : KritzelColorHelper.determineTextColor(object.fillColor);
-        object.backgroundColor = { light: 'transparent', dark: 'transparent' };
-        object.scaleFactor = 1;
-        object.scale = (_q = config === null || config === void 0 ? void 0 : config.scale) !== null && _q !== void 0 ? _q : core.store.state.scale;
-        object.zIndex = core.store.currentZIndex;
-        object.editor = object.createEditor();
-        // Compute world-space translateX/Y from screen-space coordinates
-        // This follows the same pattern as KritzelPath.updateDimensions()
-        object.updateDimensions();
-        return object;
-    }
-    /**
-     * Updates the translateX/Y to world coordinates based on screen-space x, y.
-     * This follows the same pattern as KritzelPath.updateDimensions().
-     *
-     * The formula: translateX = (x + initialTranslateX) / scale
-     * where initialTranslateX was -viewportTranslateX
-     *
-     * This converts screen-space position to world coordinates.
-     */
-    updateDimensions() {
-        this.translateX = (this.x + this.translateX) / this.scale;
-        this.translateY = (this.y + this.translateY) / this.scale;
-    }
-    mount(element) {
-        if (element === null || this.isInViewport() === false) {
-            return;
-        }
-        if (this.isMounted && this.elementRef === element && this.editor.dom.parentElement === element) {
-            return;
-        }
-        this.elementRef = element;
-        this.isMounted = true;
-    }
-    mountTextEditor(element) {
-        if (element === null) {
-            return;
-        }
-        element.style.fontFamily = this.fontFamily;
-        element.style.fontSize = `${this.fontSize}pt`;
-        element.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor);
-        element.style.whiteSpace = 'pre-wrap';
-        element.style.wordWrap = 'break-word';
-        if (this.editor.dom.parentElement === element) {
-            return;
-        }
-        element.innerHTML = '';
-        element.appendChild(this.editor.dom);
-    }
-    createEditor() {
-        const doc = this._schema.node('doc', null, [this._schema.node('paragraph')]);
-        return new EditorView(null, {
-            state: EditorState.create({
-                doc: doc,
-                plugins: [keymap(baseKeymap)],
-            }),
-            editable: () => false,
-            dispatchTransaction: transaction => {
-                const newState = this.editor.state.apply(transaction);
-                this.editor.updateState(newState);
-                if (transaction.docChanged) {
-                    this.content = newState.doc.toJSON();
-                    if (!transaction.getMeta('fromRemote')) {
-                        this._core.store.state.objects.update(this, { temporary: true });
-                    }
-                }
-            },
-        });
-    }
-    setContent(content) {
-        this.content = content;
-        if (this.editor && content) {
-            const newDoc = this.editor.state.schema.nodeFromJSON(content);
-            const tr = this.editor.state.tr.replaceWith(0, this.editor.state.doc.content.size, newDoc.content);
-            tr.setMeta('fromRemote', true);
-            this.editor.dispatch(tr);
-        }
-    }
-    resize(x, y, width, height) {
-        if (width <= 1 || height <= 1) {
-            return;
-        }
-        this.width = width;
-        this.height = height;
-        this.translateX = x;
-        this.translateY = y;
-        this._core.store.state.objects.update(this);
-    }
-    focus(coords) {
-        if (this.editor) {
-            const doc = this.editor.state.doc;
-            if ((coords === null || coords === void 0 ? void 0 : coords.x) && (coords === null || coords === void 0 ? void 0 : coords.y)) {
-                const pos = this.editor.posAtCoords({ left: coords.x, top: coords.y });
-                if (pos) {
-                    this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(doc, pos.pos)));
-                    this.editor.focus();
-                    if (KritzelDevicesHelper.isIOS()) {
-                        this.scrollIntoViewOnIOS();
-                    }
-                    return;
-                }
-            }
-            const end = Math.max(1, doc.content.size - 1);
-            this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(doc, end)));
-            this.editor.focus();
-            if (KritzelDevicesHelper.isIOS()) {
-                this.scrollIntoViewOnIOS();
-            }
-        }
-    }
-    scrollIntoViewOnIOS() {
-        setTimeout(() => {
-            if (this.editor && this.editor.dom) {
-                this.editor.dom.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'center',
-                    inline: 'nearest',
-                });
-            }
-        }, 300);
-    }
-    edit(event) {
-        KritzelKeyboardHelper.disableInteractiveWidget();
-        this.uneditedObject = this.clone();
-        this._core.store.setState('activeTool', KritzelToolRegistry.getTool('shape'));
-        this.editor.setProps({ editable: () => true });
-        this.isEditing = true;
-        this._core.rerender();
-        this.focus({ x: event === null || event === void 0 ? void 0 : event.clientX, y: event === null || event === void 0 ? void 0 : event.clientY });
-        KritzelKeyboardHelper.enableInteractiveWidget();
-    }
-    save() {
-        this.content = this.editor.state.doc.toJSON();
-        this.editor.setProps({ editable: () => false });
-        this.editor.dom.blur();
-        this.isEditing = false;
-        this._core.store.state.objects.consolidateTemporaryItems();
-        this._core.store.state.objects.update(this);
-        this._core.engine.emitObjectsChange();
-    }
-    handlePointerDown(event) {
-        if (!this.isEditing) {
-            return;
-        }
-        if (!this._core.store.state.pointers.has(event.pointerId)) {
-            event.stopPropagation();
-        }
-    }
-    handlePointerMove(event) {
-        if (!this.isEditing) {
-            return;
-        }
-        if (!this._core.store.state.pointers.has(event.pointerId)) {
-            event.stopPropagation();
-        }
-    }
-    handlePointerUp(event) {
-        if (!this.isEditing) {
-            return;
-        }
-        if (!this._core.store.state.pointers.has(event.pointerId)) {
-            event.stopPropagation();
-        }
-    }
-    copy() {
-        const copiedObject = super.copy();
-        copiedObject.editor = copiedObject.createEditor();
-        if (this.content) {
-            copiedObject.setContent(this.content);
-        }
-        return copiedObject;
-    }
-    serialize() {
-        const _a = this, { _core, _elementRef, _schema, element, totalWidth, totalHeight, editor, uneditedObject } = _a, remainingProps = __rest(_a, ["_core", "_elementRef", "_schema", "element", "totalWidth", "totalHeight", "editor", "uneditedObject"]);
-        const clonedProps = structuredClone(remainingProps);
-        if (element && typeof element === 'object' && 'nodeType' in element && element.nodeType === 1) {
-            clonedProps.element = element.cloneNode(true);
-        }
-        return clonedProps;
-    }
-    deserialize(object) {
-        super.deserialize(object);
-        if (object.content) {
-            this.setContent(object.content);
-        }
-        return this;
-    }
-    /**
-     * Called after properties are updated via updateObject.
-     * Automatically adjusts text color based on fill color brightness.
-     */
-    onAfterUpdate(changedProperties) {
-        var _a, _b, _c, _d;
-        if (changedProperties.includes('fillColor')) {
-            this.fontColor = KritzelColorHelper.determineTextColor(this.fillColor);
-            // Update the editor's text color immediately
-            if ((_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.dom) === null || _b === void 0 ? void 0 : _b.parentElement) {
-                this.editor.dom.parentElement.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor);
-            }
-        }
-        else if (changedProperties.includes('fontColor')) {
-            // Also update editor when fontColor changes directly
-            if ((_d = (_c = this.editor) === null || _c === void 0 ? void 0 : _c.dom) === null || _d === void 0 ? void 0 : _d.parentElement) {
-                this.editor.dom.parentElement.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor);
-            }
-        }
-    }
-    /**
-     * Returns the clipping polygon for arrow intersection.
-     * For ellipse: returns a many-sided polygon approximation
-     * For triangle: returns the 3 corners
-     * For rectangle: returns null (uses default rotatedPolygon)
-     *
-     * Includes padding for half the stroke width so arrow heads don't overlap the stroke.
-     */
-    getClipPolygon() {
-        // Calculate world-space center and dimensions
-        const worldWidth = this.totalWidth / this.scale;
-        const worldHeight = this.totalHeight / this.scale;
-        const centerX = this.translateX + worldWidth / 2;
-        const centerY = this.translateY + worldHeight / 2;
-        // Add padding for stroke width so arrows don't overlap the stroke
-        const strokePadding = (this.strokeWidth / this.scale) / 2;
-        switch (this.shapeType) {
-            case ShapeType.Ellipse:
-                // Return a 32-segment polygon approximation of the ellipse
-                // Add stroke padding to radii
-                return KritzelGeometryHelper.getEllipsePolygonApproximation(centerX, centerY, worldWidth / 2 + strokePadding, worldHeight / 2 + strokePadding, 32, this.rotation);
-            case ShapeType.Triangle:
-                // Return the 3 corners of the triangle in world coordinates
-                // Triangle: top-center, bottom-right, bottom-left
-                // Expand each vertex outward from center by strokePadding
-                const expandVertex = (vx, vy) => {
-                    const dx = vx - centerX;
-                    const dy = vy - centerY;
-                    const dist = Math.sqrt(dx * dx + dy * dy);
-                    if (dist === 0)
-                        return { x: vx, y: vy };
-                    const scale = (dist + strokePadding) / dist;
-                    return {
-                        x: centerX + dx * scale,
-                        y: centerY + dy * scale
-                    };
-                };
-                const topX = this.translateX + worldWidth / 2;
-                const topY = this.translateY;
-                const bottomLeftX = this.translateX;
-                const bottomLeftY = this.translateY + worldHeight;
-                const bottomRightX = this.translateX + worldWidth;
-                const bottomRightY = this.translateY + worldHeight;
-                const expandedTop = expandVertex(topX, topY);
-                const expandedBottomRight = expandVertex(bottomRightX, bottomRightY);
-                const expandedBottomLeft = expandVertex(bottomLeftX, bottomLeftY);
-                // Apply rotation around center if rotated
-                if (this.rotation !== 0) {
-                    const cos = Math.cos(this.rotation);
-                    const sin = Math.sin(this.rotation);
-                    const rotate = (p) => {
-                        const dx = p.x - centerX;
-                        const dy = p.y - centerY;
-                        return {
-                            x: centerX + dx * cos - dy * sin,
-                            y: centerY + dx * sin + dy * cos
-                        };
-                    };
-                    return [
-                        rotate(expandedTop),
-                        rotate(expandedBottomRight),
-                        rotate(expandedBottomLeft)
-                    ];
-                }
-                return [expandedTop, expandedBottomRight, expandedBottomLeft];
-            case ShapeType.Rectangle:
-            default:
-                // For rectangles, return null to use the default rotatedPolygon
-                return null;
-        }
-    }
-    /**
-     * Returns the SVG path for rendering the shape.
-     * The path uses screen-space coordinates relative to (x, y).
-     */
-    getSvgPath() {
-        const w = this.width;
-        const h = this.height;
-        switch (this.shapeType) {
-            case ShapeType.Rectangle:
-                return `M ${this.x} ${this.y} L ${this.x + w} ${this.y} L ${this.x + w} ${this.y + h} L ${this.x} ${this.y + h} Z`;
-            case ShapeType.Ellipse:
-                const cx = this.x + w / 2;
-                const cy = this.y + h / 2;
-                const rx = w / 2;
-                const ry = h / 2;
-                return `M ${cx - rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx + rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx - rx} ${cy}`;
-            case ShapeType.Triangle:
-                const topX = this.x + w / 2;
-                const topY = this.y;
-                const bottomLeftX = this.x;
-                const bottomLeftY = this.y + h;
-                const bottomRightX = this.x + w;
-                const bottomRightY = this.y + h;
-                return `M ${topX} ${topY} L ${bottomRightX} ${bottomRightY} L ${bottomLeftX} ${bottomLeftY} Z`;
-            default:
-                return `M ${this.x} ${this.y} L ${this.x + w} ${this.y} L ${this.x + w} ${this.y + h} L ${this.x} ${this.y + h} Z`;
-        }
-    }
-}