kritzel-react 0.1.30 → 0.1.32

package/dist/kritzel-stencil/src/components/ui/kritzel-context-menu/kritzel-context-menu.js

@@ -0,0 +1,137 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Component, Host, Prop, Event, State, Watch, Listen, Element } from '@stencil/core';
+const VIEWPORT_PADDING = 8;
+let KritzelContextMenu = class KritzelContextMenu {
+    constructor() {
+        this.processedItems = [];
+    }
+    onItemsChanged() {
+        this.updateMenuItems();
+    }
+    handleOutsideClick(event) {
+        const path = event.composedPath();
+        if (!path.includes(this.host)) {
+            this.close.emit();
+        }
+    }
+    componentWillLoad() {
+        this.updateMenuItems();
+    }
+    componentDidLoad() {
+        this.adjustPositionToViewport();
+    }
+    componentDidUpdate() {
+        this.adjustPositionToViewport();
+    }
+    adjustPositionToViewport() {
+        const rect = this.host.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const currentLeft = parseFloat(this.host.style.left) || 0;
+        const currentTop = parseFloat(this.host.style.top) || 0;
+        let newLeft = currentLeft;
+        let newTop = currentTop;
+        // Check if menu extends beyond right edge
+        if (rect.right > viewportWidth - VIEWPORT_PADDING) {
+            newLeft = viewportWidth - rect.width - VIEWPORT_PADDING;
+        }
+        // Check if menu extends beyond bottom edge
+        if (rect.bottom > viewportHeight - VIEWPORT_PADDING) {
+            newTop = viewportHeight - rect.height - VIEWPORT_PADDING;
+        }
+        // Ensure menu doesn't go beyond left edge
+        if (newLeft < VIEWPORT_PADDING) {
+            newLeft = VIEWPORT_PADDING;
+        }
+        // Ensure menu doesn't go beyond top edge
+        if (newTop < VIEWPORT_PADDING) {
+            newTop = VIEWPORT_PADDING;
+        }
+        // Only update if position changed to avoid infinite loops
+        if (newLeft !== currentLeft || newTop !== currentTop) {
+            this.host.style.left = `${newLeft}px`;
+            this.host.style.top = `${newTop}px`;
+        }
+    }
+    handleItemClick(item, isDisabled) {
+        if (!isDisabled) {
+            this.actionSelected.emit(item);
+        }
+    }
+    updateMenuItems() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const processed = [];
+            for (const item of this.items) {
+                const isVisible = yield this.evaluateProperty(item.visible, true);
+                if (isVisible) {
+                    const isDisabled = yield this.evaluateProperty(item.disabled, false);
+                    processed.push({ item, isDisabled });
+                }
+            }
+            this.processedItems = processed;
+        });
+    }
+    evaluateProperty(value, defaultValue) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (typeof value === 'boolean') {
+                return value;
+            }
+            if (typeof value === 'function') {
+                return yield Promise.resolve(value(null, this.objects));
+            }
+            return defaultValue;
+        });
+    }
+    render() {
+        return (React.createElement(Host, null,
+            React.createElement("div", { class: "menu-container" }, this.processedItems.map(({ item, isDisabled }, index) => (React.createElement("button", { key: `${item.label}-${index}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, isDisabled), disabled: isDisabled },
+                item.icon && React.createElement("kritzel-icon", { name: item.icon, size: 16 }),
+                React.createElement("span", { class: "label" }, item.label)))))));
+    }
+};
+__decorate([
+    Element()
+], KritzelContextMenu.prototype, "host", void 0);
+__decorate([
+    Prop()
+], KritzelContextMenu.prototype, "items", void 0);
+__decorate([
+    Watch('items')
+], KritzelContextMenu.prototype, "onItemsChanged", null);
+__decorate([
+    Prop()
+], KritzelContextMenu.prototype, "objects", void 0);
+__decorate([
+    Event()
+], KritzelContextMenu.prototype, "actionSelected", void 0);
+__decorate([
+    Event()
+], KritzelContextMenu.prototype, "close", void 0);
+__decorate([
+    State()
+], KritzelContextMenu.prototype, "processedItems", void 0);
+__decorate([
+    Listen('pointerdown', { target: 'window' })
+], KritzelContextMenu.prototype, "handleOutsideClick", null);
+KritzelContextMenu = __decorate([
+    Component({
+        tag: 'kritzel-context-menu',
+        styleUrl: 'kritzel-context-menu.css',
+        shadow: true,
+    })
+], KritzelContextMenu);
+export { KritzelContextMenu };

package/dist/kritzel-stencil/src/configs/default-brush-tool.config.js

@@ -0,0 +1,9 @@
+import { DEFAULT_COLOR_PALETTE } from '../constants/color-palette.constants';
+export const DEFAULT_BRUSH_CONFIG = {
+    type: 'pen',
+    color: DEFAULT_COLOR_PALETTE[0],
+    size: 16,
+    palettes: {
+        pen: [...DEFAULT_COLOR_PALETTE],
+    },
+};

package/dist/kritzel-stencil/src/configs/default-engine-config.js

@@ -0,0 +1,63 @@
+export const DEFAULT_ENGINE_CONFIG = {
+    activeWorkspace: null,
+    activeTool: null,
+    copiedObjects: null,
+    objects: null,
+    snapCandidate: null,
+    resizeHandleType: null,
+    lineHandleType: null,
+    hasViewportChanged: false,
+    hasObjectsChanged: false,
+    isReady: false,
+    isEnabled: true,
+    isScaling: false,
+    isPanning: false,
+    isSelecting: false,
+    isResizing: false,
+    isResizeHandleHovered: false,
+    isResizeHandleSelected: false,
+    isRotating: false,
+    isRotationHandleHovered: false,
+    isRotationHandleSelected: false,
+    isLineHandleSelected: false,
+    isLineHandleDragging: false,
+    isDragging: false,
+    isDrawing: false,
+    isErasing: false,
+    isWriting: false,
+    isCtrlKeyPressed: false,
+    isContextMenuVisible: false,
+    contextMenuItems: [],
+    contextMenuX: 0,
+    contextMenuY: 0,
+    skipContextMenu: false,
+    debugInfo: {
+        showObjectInfo: false,
+        showViewportInfo: false
+    },
+    host: null,
+    pointerX: 0,
+    pointerY: 0,
+    scale: 1,
+    scaleMax: 1,
+    scaleMin: 1,
+    startX: 0,
+    startY: 0,
+    translateX: 0,
+    translateXMax: 400,
+    translateXMin: 0,
+    translateY: 0,
+    translateYMax: 400,
+    translateYMin: 0,
+    viewportWidth: 0,
+    viewportHeight: 0,
+    longTouchTimeout: null,
+    longTouchDelay: 300,
+    pointers: new Map(),
+    workspaces: [],
+    cursor: {
+        icon: 'default',
+        iconActive: 'default'
+    },
+    lockDrawingScale: true
+};

package/dist/kritzel-stencil/src/configs/default-line-tool.config.js

@@ -0,0 +1,9 @@
+import { DEFAULT_COLOR_PALETTE } from '../constants/color-palette.constants';
+export const DEFAULT_LINE_TOOL_CONFIG = {
+    color: DEFAULT_COLOR_PALETTE[0],
+    size: 4,
+    palette: [...DEFAULT_COLOR_PALETTE],
+    arrows: {
+        end: { enabled: true, style: 'triangle' },
+    },
+};

package/dist/kritzel-stencil/src/configs/default-sync.config.js

@@ -0,0 +1,9 @@
+import { IndexedDBSyncProvider } from '../classes/providers/indexeddb-sync-provider.class';
+/**
+ * Default sync configuration - IndexedDB + BroadcastChannel
+ */
+export const DEFAULT_SYNC_CONFIG = {
+    providers: [
+        IndexedDBSyncProvider
+    ],
+};

package/dist/kritzel-stencil/src/configs/default-text-tool.config.js

@@ -0,0 +1,7 @@
+import { DEFAULT_COLOR_PALETTE } from "../constants/color-palette.constants";
+export const DEFAULT_TEXT_CONFIG = {
+    color: DEFAULT_COLOR_PALETTE[0],
+    size: 8,
+    fontFamily: 'Arial',
+    palette: [...DEFAULT_COLOR_PALETTE],
+};

package/dist/kritzel-stencil/src/constants/color-palette.constants.js

@@ -0,0 +1,37 @@
+/**
+ * Helper function to resolve a color value for a specific theme
+ */
+export function resolveColor(color, theme) {
+    return color[theme];
+}
+/**
+ * Default color palette shared across all tool configurations.
+ * This ensures consistency in color options throughout the application.
+ * All colors support theme-specific variations.
+ */
+export const DEFAULT_COLOR_PALETTE = [
+    { light: '#000000', dark: '#ffffff', label: 'Primary' },
+    { light: '#ff5252', dark: '#ff5252' },
+    { light: '#ffbc00', dark: '#ffbc00' },
+    { light: '#00c853', dark: '#00c853' },
+    { light: '#0000FF', dark: '#0000FF' },
+    { light: '#d500f9', dark: '#d500f9' },
+    { light: '#fafafa', dark: '#212121', label: 'Background' },
+    { light: '#a52714', dark: '#a52714' },
+    { light: '#ee8100', dark: '#ee8100' },
+    { light: '#558b2f', dark: '#558b2f' },
+    { light: '#01579b', dark: '#01579b' },
+    { light: '#8e24aa', dark: '#8e24aa' },
+    { light: '#90a4ae', dark: '#607d8b', label: 'Neutral' },
+    { light: '#ff4081', dark: '#ff4081' },
+    { light: '#ff6e40', dark: '#ff6e40' },
+    { light: '#aeea00', dark: '#aeea00' },
+    { light: '#304ffe', dark: '#304ffe' },
+    { light: '#7c4dff', dark: '#7c4dff' },
+    { light: '#cfd8dc', dark: '#455a64' },
+    { light: '#f8bbd0', dark: '#ec407a' },
+    { light: '#ffccbc', dark: '#ff7043' },
+    { light: '#f0f4c3', dark: '#c0ca33' },
+    { light: '#9fa8da', dark: '#5c6bc0' },
+    { light: '#d1c4e9', dark: '#9575cd' },
+];

package/dist/kritzel-stencil/src/constants/engine.constants.js

@@ -0,0 +1,2 @@
+export const ABSOLUTE_SCALE_MAX = 1000;
+export const ABSOLUTE_SCALE_MIN = 0.0001;

package/dist/kritzel-stencil/src/enums/event-button.enum.js

@@ -0,0 +1,6 @@
+export var KritzelMouseButton;
+(function (KritzelMouseButton) {
+    KritzelMouseButton[KritzelMouseButton["Left"] = 0] = "Left";
+    KritzelMouseButton[KritzelMouseButton["Middle"] = 1] = "Middle";
+    KritzelMouseButton[KritzelMouseButton["Right"] = 2] = "Right";
+})(KritzelMouseButton || (KritzelMouseButton = {}));

package/dist/kritzel-stencil/src/enums/handle-type.enum.js

@@ -0,0 +1,7 @@
+export var KritzelHandleType;
+(function (KritzelHandleType) {
+    KritzelHandleType["TopLeft"] = "top-left";
+    KritzelHandleType["TopRight"] = "top-right";
+    KritzelHandleType["BottomLeft"] = "bottom-left";
+    KritzelHandleType["BottomRight"] = "bottom-right";
+})(KritzelHandleType || (KritzelHandleType = {}));

package/dist/kritzel-stencil/src/enums/shape-type.enum.js

@@ -0,0 +1,6 @@
+export var ShapeType;
+(function (ShapeType) {
+    ShapeType["Rectangle"] = "rectangle";
+    ShapeType["Ellipse"] = "ellipse";
+    ShapeType["Triangle"] = "triangle";
+})(ShapeType || (ShapeType = {}));

package/dist/kritzel-stencil/src/helpers/class.helper.js

@@ -0,0 +1,5 @@
+export class KritzelClassHelper {
+    static isInstanceOf(object, className) {
+        return !!object && object.__class__ === className;
+    }
+}

package/dist/kritzel-stencil/src/helpers/color.helper.js

@@ -0,0 +1,106 @@
+import { resolveColor } from '../constants/color-palette.constants';
+import { KritzelThemeManager } from '../classes/managers/theme.manager';
+export class KritzelColorHelper {
+    /**
+     * Resolves a color value based on the current theme.
+     * Handles both simple string colors and theme-aware color objects.
+     * @param color - The color to resolve (string or ThemeAwareColor)
+     * @param theme - Optional theme to use. If not provided, uses current theme from ThemeManager
+     * @returns The resolved hex color string, or empty string if color is undefined
+     */
+    static resolveThemeColor(color, theme) {
+        if (!color) {
+            return '';
+        }
+        const currentTheme = theme !== null && theme !== void 0 ? theme : KritzelThemeManager.getStoredTheme();
+        return resolveColor(color, currentTheme);
+    }
+    /**
+     * Applies opacity to a theme-aware color and returns an rgba string.
+     * @param color - The theme-aware color object
+     * @param opacity - The opacity value between 0 and 1
+     * @param theme - Optional theme to use. If not provided, uses current theme from ThemeManager
+     * @returns The color as an rgba string, or the resolved hex if opacity is 1
+     */
+    static applyOpacity(color, opacity, theme) {
+        const hexColor = this.resolveThemeColor(color, theme);
+        if (!hexColor || opacity >= 1)
+            return hexColor;
+        const sanitizedHex = hexColor.startsWith('#') ? hexColor.slice(1) : hexColor;
+        let r, g, b;
+        if (sanitizedHex.length === 3) {
+            r = parseInt(sanitizedHex[0] + sanitizedHex[0], 16);
+            g = parseInt(sanitizedHex[1] + sanitizedHex[1], 16);
+            b = parseInt(sanitizedHex[2] + sanitizedHex[2], 16);
+        }
+        else if (sanitizedHex.length === 6) {
+            r = parseInt(sanitizedHex.substring(0, 2), 16);
+            g = parseInt(sanitizedHex.substring(2, 4), 16);
+            b = parseInt(sanitizedHex.substring(4, 6), 16);
+        }
+        else {
+            return hexColor;
+        }
+        if (isNaN(r) || isNaN(g) || isNaN(b)) {
+            return hexColor;
+        }
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    }
+    /**
+     * Determines the appropriate contrast color (black or white) based on the luminance of the given hex color.
+     * Uses the relative luminance formula: 0.299*R + 0.587*G + 0.114*B
+     * @param hexColor - The hex color string (with or without #)
+     * @returns '#000000' for light backgrounds, '#ffffff' for dark backgrounds
+     */
+    static getContrastColor(hexColor) {
+        const sanitizedHex = hexColor.startsWith('#') ? hexColor.slice(1) : hexColor;
+        let r, g, b;
+        if (sanitizedHex.length === 3) {
+            r = parseInt(sanitizedHex[0] + sanitizedHex[0], 16);
+            g = parseInt(sanitizedHex[1] + sanitizedHex[1], 16);
+            b = parseInt(sanitizedHex[2] + sanitizedHex[2], 16);
+        }
+        else if (sanitizedHex.length === 6) {
+            r = parseInt(sanitizedHex.substring(0, 2), 16);
+            g = parseInt(sanitizedHex.substring(2, 4), 16);
+            b = parseInt(sanitizedHex.substring(4, 6), 16);
+        }
+        else {
+            // Default to black for invalid colors
+            return '#000000';
+        }
+        if (isNaN(r) || isNaN(g) || isNaN(b)) {
+            return '#000000';
+        }
+        // Calculate relative luminance
+        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
+        // Use threshold of 150 (midpoint) for balanced contrast
+        return luminance > 150 ? '#000000' : '#ffffff';
+    }
+    /**
+     * Determines the appropriate text color for both light and dark themes based on the fill color.
+     * Returns default theme-appropriate colors if the fill is transparent.
+     * @param fillColor - The theme-aware fill color
+     * @returns A theme-aware color object with appropriate text colors for both themes
+     */
+    static determineTextColor(fillColor) {
+        // Check if fillColor is transparent for both themes
+        const isTransparentLight = fillColor.light === 'transparent';
+        const isTransparentDark = fillColor.dark === 'transparent';
+        if (isTransparentLight && isTransparentDark) {
+            // Return default theme-appropriate colors for transparent fills
+            return { light: '#000000', dark: '#ffffff' };
+        }
+        // Determine text color for each theme based on fill brightness
+        const lightThemeTextColor = isTransparentLight
+            ? '#000000'
+            : this.getContrastColor(fillColor.light);
+        const darkThemeTextColor = isTransparentDark
+            ? '#ffffff'
+            : this.getContrastColor(fillColor.dark);
+        return {
+            light: lightThemeTextColor,
+            dark: darkThemeTextColor,
+        };
+    }
+}

package/dist/kritzel-stencil/src/helpers/cursor.helper.js

@@ -0,0 +1,57 @@
+import { KritzelIconRegistry } from '../classes/registries/icon-registry.class';
+export class KritzelCursorHelper {
+    /**
+     * Returns the custom pointer cursor CSS value.
+     * This can be used instead of `cursor: pointer` for consistent styling.
+     */
+    static getPointerCursor() {
+        if (!this._pointerCursor) {
+            this._pointerCursor = this.getCursor({ iconName: 'pointer' });
+        }
+        return this._pointerCursor;
+    }
+    /**
+     * Returns a custom cursor CSS value with support for rotation.
+     * The icon is retrieved from the KritzelIconRegistry.
+     */
+    static getCursor(options) {
+        const iconName = options.iconName === 'default' ? 'mouse-pointer' : options.iconName;
+        const iconSvg = KritzelIconRegistry.get(iconName);
+        if (!iconSvg) {
+            console.warn(`Icon "${iconName}" not found in registry.`);
+            return 'auto';
+        }
+        const size = options.size || 24;
+        const rotation = options.rotation || 0;
+        const color = options.color || 'black';
+        // Default cursor (mouse-pointer) has hotspot at (4, 4), others at center
+        const hotspot = options.hotspot || (options.iconName === 'default' ? { x: 4, y: 4 } : { x: size / 2, y: size / 2 });
+        // Modify the SVG string to set size and color
+        // We replace width and height to match the requested size
+        // We replace currentColor with the requested color
+        let content = iconSvg
+            .replace(/width="\d+"/, `width="${size}"`)
+            .replace(/height="\d+"/, `height="${size}"`)
+            .replace(/currentColor/g, color);
+        // Create the SVG string
+        // We rotate around the center of the SVG canvas
+        const center = size / 2;
+        // We use a group to apply the rotation
+        const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+        <g transform="rotate(${rotation} ${center} ${center})">
+          ${content}
+        </g>
+      </svg>
+    `;
+        // Encode the SVG for use in a data URI
+        // We need to be careful with encoding to ensure it works across browsers
+        const encodedSvg = encodeURIComponent(svg.replace(/\s+/g, ' ').trim())
+            .replace(/'/g, '%27')
+            .replace(/"/g, '%22');
+        const dataUri = `data:image/svg+xml;charset=utf-8,${encodedSvg}`;
+        // Return the cursor style string
+        return `url('${dataUri}') ${hotspot.x} ${hotspot.y}, auto`;
+    }
+}
+KritzelCursorHelper._pointerCursor = null;

package/dist/kritzel-stencil/src/helpers/devices.helper.js

@@ -0,0 +1,28 @@
+export class KritzelDevicesHelper {
+    static isTouchDevice() {
+        return window.matchMedia('(any-pointer: coarse)').matches;
+    }
+    static isAndroid() {
+        return /android/i.test(navigator.userAgent);
+    }
+    static isIOS() {
+        return /iPad|iPhone|iPod/.test(navigator.userAgent);
+    }
+    static detectOS() {
+        if (this.isIOS()) {
+            return 'iOS';
+        }
+        else if (this.isAndroid()) {
+            return 'Android';
+        }
+        else {
+            return 'Other';
+        }
+    }
+    static isMobile() {
+        return this.isIOS() || this.isAndroid();
+    }
+    static isFirefox() {
+        return /firefox/i.test(navigator.userAgent);
+    }
+}

package/dist/kritzel-stencil/src/helpers/event.helper.js

@@ -0,0 +1,58 @@
+import { KritzelMouseButton } from '../enums/event-button.enum';
+export class KritzelEventHelper {
+    static isRightClick(ev) {
+        return ev.button === KritzelMouseButton.Right;
+    }
+    static isLeftClick(ev) {
+        return ev.button === KritzelMouseButton.Left;
+    }
+    static isPointerEventOnContextMenu(event) {
+        const path = event.composedPath();
+        const contextMenu = path.find(element => element.classList && element.classList.contains('context-menu'));
+        return !!contextMenu;
+    }
+    static onLongPress(event, onSuccess, onCancel) {
+        if (event.pointerType !== 'touch') {
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+            return () => { };
+        }
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const target = event.target;
+        if (!target) {
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+            return () => { };
+        }
+        const longPressTimeout = 400;
+        const moveThreshold = 10;
+        const timer = setTimeout(() => {
+            removeListeners();
+            onSuccess(event);
+        }, longPressTimeout);
+        const cancel = () => {
+            clearTimeout(timer);
+            removeListeners();
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        };
+        const onPointerMove = (e) => {
+            if (Math.abs(e.clientX - startX) > moveThreshold || Math.abs(e.clientY - startY) > moveThreshold) {
+                cancel();
+            }
+        };
+        const onPointerUp = () => {
+            cancel();
+        };
+        const onPointerCancel = () => {
+            cancel();
+        };
+        const removeListeners = () => {
+            target.removeEventListener('pointermove', onPointerMove);
+            target.removeEventListener('pointerup', onPointerUp);
+            target.removeEventListener('pointercancel', onPointerCancel);
+        };
+        target.addEventListener('pointermove', onPointerMove, { passive: true });
+        target.addEventListener('pointerup', onPointerUp, { once: true });
+        target.addEventListener('pointercancel', onPointerCancel, { once: true });
+        return cancel;
+    }
+}