kritzel-react 0.1.30 → 0.1.32

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

@@ -0,0 +1,412 @@
+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`;
+        }
+    }
+}