kritzel-react 0.1.30 → 0.1.32

package/dist/kritzel-stencil/src/classes/managers/cursor.manager.js

@@ -0,0 +1,117 @@
+import { KritzelCursorHelper } from '../../helpers/cursor.helper';
+/**
+ * Manages cursor state and updates across the application.
+ * Handles cursor changes based on handle hovers, tool states, and interactions.
+ */
+export class KritzelCursorManager {
+    constructor(core) {
+        this._targetElement = null;
+        this._shadowRoot = null;
+        this._core = core;
+    }
+    /**
+     * Sets the target element where cursor styles will be applied.
+     * Also sets the pointer cursor CSS variable for child components.
+     */
+    setTargetElement(element) {
+        // Reset cursor on old target
+        if (this._targetElement) {
+            this._targetElement.style.cursor = '';
+            this._targetElement.style.removeProperty('--kritzel-global-pointer-cursor');
+        }
+        this._targetElement = element;
+        // Set the pointer cursor CSS variable for child components to use
+        if (this._targetElement) {
+            this._targetElement.style.setProperty('--kritzel-global-pointer-cursor', KritzelCursorHelper.getPointerCursor());
+        }
+    }
+    /**
+     * Gets the current cursor target element.
+     */
+    getTargetElement() {
+        return this._targetElement;
+    }
+    /**
+     * Sets the shadow root for element detection.
+     */
+    setShadowRoot(shadowRoot) {
+        this._shadowRoot = shadowRoot;
+    }
+    /**
+     * Resets cursor to default state.
+     * Should be called when all pointers are released.
+     */
+    resetToDefault() {
+        this._core.store.state.cursor = { icon: 'default', iconActive: 'default' };
+    }
+    /**
+     * Detects handle hover states using elementsFromPoint() to work with overlapped elements.
+     * This approach finds all elements at the pointer position instead of relying on pointerenter/pointerleave.
+     */
+    updateHoverState(ev) {
+        var _a;
+        if (this._core.store.isPointerDown)
+            return;
+        if (!this._shadowRoot)
+            return;
+        const elementsAtPoint = this._shadowRoot.elementsFromPoint(ev.clientX, ev.clientY);
+        if (!elementsAtPoint || elementsAtPoint.length === 0)
+            return;
+        // Check for resize handle overlays (selection group)
+        const resizeHandleOverlay = elementsAtPoint.find(el => el.classList.contains('resize-handle-overlay'));
+        if (resizeHandleOverlay) {
+            const selectionGroup = this._core.store.selectionGroup;
+            const rotationDegrees = (_a = selectionGroup === null || selectionGroup === void 0 ? void 0 : selectionGroup.rotationDegrees) !== null && _a !== void 0 ? _a : 0;
+            // Determine rotation offset based on handle position
+            const isTopLeft = resizeHandleOverlay.classList.contains('top-left');
+            const isBottomRight = resizeHandleOverlay.classList.contains('bottom-right');
+            const rotationOffset = (isTopLeft || isBottomRight) ? -45 : 45;
+            this._core.store.state.cursor = { icon: 'move-vertical', rotation: rotationDegrees + rotationOffset };
+            return;
+        }
+        // Check for rotation handle overlay
+        const rotationHandleOverlay = elementsAtPoint.find(el => el.classList.contains('rotation-handle-overlay'));
+        if (rotationHandleOverlay) {
+            this._core.store.state.cursor = { icon: 'hand', iconActive: 'hand-grab' };
+            return;
+        }
+        // Check for line handle overlays (selection line)
+        const lineHandleOverlay = elementsAtPoint.find(el => el.classList.contains('selection-line-handle-overlay'));
+        if (lineHandleOverlay) {
+            this._core.store.state.cursor = { icon: 'hand', iconActive: 'hand-grab' };
+            return;
+        }
+        // Reset cursor if not hovering any handle
+        this._core.store.state.cursor = { icon: 'default', iconActive: 'default' };
+    }
+    /**
+     * Applies the current cursor state to the target element.
+     * Should be called in the render loop.
+     */
+    applyCursor() {
+        var _a, _b, _c, _d;
+        const state = this._core.store.state;
+        const isPointerDown = this._core.store.isPointerDown;
+        const icon = (_a = state.cursor) === null || _a === void 0 ? void 0 : _a.icon;
+        const iconActive = (_c = (_b = state.cursor) === null || _b === void 0 ? void 0 : _b.iconActive) !== null && _c !== void 0 ? _c : icon;
+        const rotation = (_d = state.cursor) === null || _d === void 0 ? void 0 : _d.rotation;
+        const cursor = KritzelCursorHelper.getCursor({
+            iconName: isPointerDown ? iconActive : icon,
+            rotation: rotation,
+        });
+        if (this._targetElement) {
+            this._targetElement.style.cursor = cursor;
+        }
+    }
+    /**
+     * Cleans up cursor state when the component is disconnected.
+     */
+    cleanup() {
+        if (this._targetElement) {
+            this._targetElement.style.cursor = '';
+            this._targetElement.style.removeProperty('--kritzel-pointer-cursor');
+        }
+        this._targetElement = null;
+        this._shadowRoot = null;
+    }
+}

package/dist/kritzel-stencil/src/classes/managers/theme.manager.js

@@ -0,0 +1,103 @@
+import { lightTheme } from '../../themes/light-theme';
+import { darkTheme } from '../../themes/dark-theme';
+import { ThemeHelper } from '../../helpers/theme.helper';
+const THEME_STORAGE_KEY = 'kritzel-theme';
+const DEFAULT_THEME = 'light';
+/**
+ * Manages theme state and application across the Kritzel editor.
+ * Handles theme persistence, retrieval, and CSS variable application.
+ */
+export class KritzelThemeManager {
+    constructor(core) {
+        this._currentTheme = DEFAULT_THEME;
+        this._targetElement = null;
+        this._core = core;
+        this._currentTheme = KritzelThemeManager.getStoredTheme();
+        void this._core;
+    }
+    /**
+     * Gets the current active theme name.
+     */
+    get currentTheme() {
+        return this._currentTheme;
+    }
+    /**
+     * Sets the target element where theme CSS variables will be applied.
+     */
+    setTargetElement(element) {
+        this._targetElement = element;
+        if (this._targetElement) {
+            this.applyTheme(this._currentTheme);
+        }
+    }
+    /**
+     * Gets the current target element.
+     */
+    getTargetElement() {
+        return this._targetElement;
+    }
+    /**
+     * Gets the theme object by name.
+     */
+    getThemeByName(themeName) {
+        return themeName === 'dark' ? darkTheme : lightTheme;
+    }
+    /**
+     * Gets the stored theme name from localStorage.
+     * Can be called statically without a manager instance.
+     * @returns The stored theme name, or 'light' as default
+     */
+    static getStoredTheme() {
+        if (typeof localStorage === 'undefined') {
+            return DEFAULT_THEME;
+        }
+        const stored = localStorage.getItem(THEME_STORAGE_KEY);
+        if (stored === 'dark' || stored === 'light') {
+            return stored;
+        }
+        return DEFAULT_THEME;
+    }
+    /**
+     * Saves the theme name to localStorage.
+     */
+    saveTheme(themeName) {
+        if (typeof localStorage === 'undefined') {
+            return;
+        }
+        localStorage.setItem(THEME_STORAGE_KEY, themeName);
+    }
+    /**
+     * Sets the current theme, saves it to storage, and applies it to the target element.
+     */
+    setTheme(themeName) {
+        this._currentTheme = themeName;
+        this.saveTheme(themeName);
+        if (this._targetElement) {
+            this.applyTheme(themeName);
+        }
+    }
+    /**
+     * Checks if the current theme is dark.
+     */
+    isDarkTheme() {
+        return this._currentTheme === 'dark';
+    }
+    /**
+     * Applies a theme to the target element by setting CSS custom properties.
+     * Uses the generic theme utility to automatically derive CSS variable names
+     * from the theme interface structure.
+     */
+    applyTheme(themeName) {
+        if (!this._targetElement) {
+            return;
+        }
+        const theme = this.getThemeByName(themeName);
+        ThemeHelper.applyThemeToElement(this._targetElement, theme);
+    }
+    /**
+     * Cleans up theme manager state.
+     */
+    cleanup() {
+        this._targetElement = null;
+    }
+}

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

@@ -0,0 +1,249 @@
+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 { ObjectHelper } from '../../helpers/object.helper';
+import { KritzelGeometryHelper } from '../../helpers/geometry.helper';
+export class KritzelBaseObject {
+    get totalWidth() {
+        return this.width + this.padding * 2;
+    }
+    get totalHeight() {
+        return this.height + this.padding * 2;
+    }
+    set elementRef(element) {
+        this._elementRef = element;
+    }
+    get elementRef() {
+        return this._elementRef;
+    }
+    get boundingBox() {
+        return {
+            x: this.translateX,
+            y: this.translateY,
+            z: this.scale,
+            width: this.totalWidth / this.scale,
+            height: this.totalHeight / this.scale,
+        };
+    }
+    get rotatedBoundingBox() {
+        const polygon = this.rotatedPolygon;
+        const xValues = [polygon.topLeft.x, polygon.topRight.x, polygon.bottomRight.x, polygon.bottomLeft.x];
+        const yValues = [polygon.topLeft.y, polygon.topRight.y, polygon.bottomRight.y, polygon.bottomLeft.y];
+        const minX = Math.min(...xValues);
+        const maxX = Math.max(...xValues);
+        const minY = Math.min(...yValues);
+        const maxY = Math.max(...yValues);
+        return {
+            x: minX,
+            y: minY,
+            z: this.scale,
+            width: maxX - minX,
+            height: maxY - minY,
+        };
+    }
+    get rotatedPolygon() {
+        const cx = this.translateX + this.totalWidth / 2 / this.scale;
+        const cy = this.translateY + this.totalHeight / 2 / this.scale;
+        const angle = this.rotation;
+        // Optimization: Precomputes cos/sin once
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const adjustedWidth = this.totalWidth / this.scale;
+        const adjustedHeight = this.totalHeight / this.scale;
+        const x1 = this.translateX;
+        const y1 = this.translateY;
+        const x2 = x1 + adjustedWidth;
+        const y2 = y1 + adjustedHeight;
+        // Helper to rotate a point around center
+        const rotate = (x, y) => ({
+            x: cos * (x - cx) - sin * (y - cy) + cx,
+            y: sin * (x - cx) + cos * (y - cy) + cy,
+        });
+        return {
+            topLeft: rotate(x1, y1),
+            topRight: rotate(x2, y1),
+            bottomRight: rotate(x2, y2),
+            bottomLeft: rotate(x1, y2),
+        };
+    }
+    get minXRotated() {
+        const corners = [this.rotatedPolygon.topLeft.x, this.rotatedPolygon.topRight.x, this.rotatedPolygon.bottomRight.x, this.rotatedPolygon.bottomLeft.x];
+        return Math.min(...corners);
+    }
+    get minYRotated() {
+        const corners = [this.rotatedPolygon.topLeft.y, this.rotatedPolygon.topRight.y, this.rotatedPolygon.bottomRight.y, this.rotatedPolygon.bottomLeft.y];
+        return Math.min(...corners);
+    }
+    get maxXRotated() {
+        const corners = [this.rotatedPolygon.topLeft.x, this.rotatedPolygon.topRight.x, this.rotatedPolygon.bottomRight.x, this.rotatedPolygon.bottomLeft.x];
+        return Math.max(...corners);
+    }
+    get maxYRotated() {
+        const corners = [this.rotatedPolygon.topLeft.y, this.rotatedPolygon.topRight.y, this.rotatedPolygon.bottomRight.y, this.rotatedPolygon.bottomLeft.y];
+        return Math.max(...corners);
+    }
+    get transformationMatrix() {
+        const scale = 1 / this.scale;
+        const translateX = this.translateX;
+        const translateY = this.translateY;
+        return `matrix(${scale}, 0, 0, ${scale}, ${translateX}, ${translateY})`;
+    }
+    get rotationDegrees() {
+        return this.rotation * (180 / Math.PI);
+    }
+    get centerX() {
+        return this.translateX + this.totalWidth / 2 / this.scale;
+    }
+    get centerY() {
+        return this.translateY + this.totalHeight / 2 / this.scale;
+    }
+    constructor() {
+        this.__class__ = 'KritzelBaseObject';
+        this.borderWidth = 0;
+        this.opacity = 1;
+        this.padding = 0;
+        this.resizing = false;
+        this.rotation = 0;
+        this.markedForRemoval = false;
+        this.zIndex = 0;
+        this.isVisible = true;
+        this.isSelected = false;
+        this.isHovered = false;
+        this.isMounted = false;
+        this.isEditable = false;
+        this.isInteractive = false;
+        this.isDebugInfoVisible = false;
+        this.id = this.generateId();
+    }
+    static create(core) {
+        const object = new KritzelBaseObject();
+        object._core = core;
+        object.zIndex = core.store.currentZIndex;
+        object.workspaceId = core.store.state.activeWorkspace.id;
+        return object;
+    }
+    mount(element) {
+        if (this.isMounted) {
+            return;
+        }
+        this.elementRef = element;
+        this.isMounted = true;
+    }
+    generateId() {
+        return ObjectHelper.generateUUID();
+    }
+    isInViewport() {
+        const viewportScale = this._core.store.state.scale;
+        const scaledWidth = this.boundingBox.width * viewportScale;
+        const scaledHeight = this.boundingBox.height * viewportScale;
+        if (scaledWidth * scaledHeight < 0.5) {
+            return false;
+        }
+        const viewportBounds = {
+            x: -this._core.store.state.translateX / this._core.store.state.scale,
+            y: -this._core.store.state.translateY / this._core.store.state.scale,
+            z: this._core.store.state.scale,
+            width: this._core.store.state.viewportWidth / this._core.store.state.scale,
+            height: this._core.store.state.viewportHeight / this._core.store.state.scale,
+        };
+        return (this.rotatedBoundingBox.x < viewportBounds.x + viewportBounds.width &&
+            this.rotatedBoundingBox.x + this.rotatedBoundingBox.width > viewportBounds.x &&
+            this.rotatedBoundingBox.y < viewportBounds.y + viewportBounds.height &&
+            this.rotatedBoundingBox.y + this.rotatedBoundingBox.height > viewportBounds.y);
+    }
+    centerInViewport() {
+        const { viewportWidth, viewportHeight, translateX: viewportTranslateX, translateY: viewportTranslateY, scale: viewportScale } = this._core.store.state;
+        const { x, y, width, height } = this.rotatedBoundingBox;
+        const objectCenterX = x + width / 2;
+        const objectCenterY = y + height / 2;
+        const targetCenterX = (viewportWidth / 2 - viewportTranslateX) / viewportScale;
+        const targetCenterY = (viewportHeight / 2 - viewportTranslateY) / viewportScale;
+        const deltaX = targetCenterX - objectCenterX;
+        const deltaY = targetCenterY - objectCenterY;
+        this.updatePosition(this.translateX + deltaX, this.translateY + deltaY);
+    }
+    update() {
+        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._core.store.state.objects.update(this);
+    }
+    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);
+        // Update any lines that are anchored to this object (after position is updated)
+        this._core.anchorManager.updateAnchorsForObject(this.id);
+    }
+    rotate(value) {
+        this.rotation = value;
+        this._core.store.state.objects.update(this);
+    }
+    clone() {
+        const clone = Object.create(Object.getPrototypeOf(this));
+        Object.assign(clone, this);
+        clone.id = this.id;
+        return clone;
+    }
+    copy() {
+        const copiedObject = Object.create(Object.getPrototypeOf(this));
+        Object.assign(copiedObject, this);
+        copiedObject.id = this.generateId();
+        copiedObject.isMounted = false;
+        return copiedObject;
+    }
+    serialize() {
+        const _a = this, { _core, _elementRef, element, totalWidth, totalHeight } = _a, remainingProps = __rest(_a, ["_core", "_elementRef", "element", "totalWidth", "totalHeight"]);
+        const clonedProps = structuredClone(remainingProps);
+        if (element && typeof element === 'object' && 'nodeType' in element && element.nodeType === 1) {
+            clonedProps.element = element.cloneNode(true);
+        }
+        return clonedProps;
+    }
+    deserialize(object) {
+        Object.assign(this, object);
+        return this;
+    }
+    isClass(className) {
+        return this.__class__ === className;
+    }
+    edit(_event) {
+        // This method can be overridden by subclasses to handle edit actions.
+    }
+    /**
+     * Called after properties are updated via updateObject.
+     * Override in subclasses to perform custom logic when specific properties change.
+     */
+    onAfterUpdate(_changedProperties) {
+        // Default implementation does nothing
+    }
+    hitTest(_x, _y) {
+        return true; // Default implementation, can be overridden by subclasses
+    }
+    hitTestPolygon(polygon) {
+        const objectPolygon = this.rotatedPolygon;
+        return KritzelGeometryHelper.doPolygonsIntersect(objectPolygon, polygon);
+    }
+    updatePosition(x, y) {
+        this.translateX = x;
+        this.translateY = y;
+        this._core.store.state.objects.update(this);
+    }
+}

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

@@ -0,0 +1,60 @@
+import { KritzelBaseObject } from './base-object.class';
+export class KritzelCustomElement extends KritzelBaseObject {
+    constructor(config) {
+        super();
+        this.__class__ = 'KritzelCustomElement';
+        this.isInteractive = true;
+        if (config) {
+            this.translateX = config.translateX || 0;
+            this.translateY = config.translateY || 0;
+            this.scale = config.scale || 1;
+            this.element = config.element;
+            this.height = config.height || 0;
+            this.width = config.width || 0;
+        }
+    }
+    static create(core, config) {
+        const object = new KritzelCustomElement(config);
+        object._core = core;
+        object.id = object.generateId();
+        object.workspaceId = core.store.state.activeWorkspace.id;
+        return object;
+    }
+    mount(element) {
+        if (element === null) {
+            return;
+        }
+        // If already mounted to the same element and content is still attached, skip
+        if (this.isMounted && this.elementRef === element && this.element.parentElement === element) {
+            return;
+        }
+        this.elementRef = element;
+        this.isMounted = true;
+        // Clear existing content and append the element
+        this.elementRef.innerHTML = '';
+        this.elementRef.appendChild(this.element);
+    }
+    resize(x, y, width, height) {
+        if (width <= 1 || height <= 1) {
+            return;
+        }
+        this.width = width;
+        this.height = height;
+        this.translateX = x;
+        this.translateY = y;
+        if (this.element) {
+            this.element.style.width = `${width}px`;
+            this.element.style.height = `${height}px`;
+        }
+        // Update to sync changes to y.js and propagate to other tabs
+        this._core.store.state.objects.update(this);
+    }
+    copy() {
+        const copiedObject = Object.create(Object.getPrototypeOf(this));
+        Object.assign(copiedObject, this);
+        copiedObject.id = this.generateId();
+        copiedObject.isMounted = false;
+        copiedObject.element = this.element.cloneNode(true);
+        return copiedObject;
+    }
+}