kritzel-stencil 0.0.172 → 0.1.1

package/dist/components/kritzel-editor.js

@@ -1,605 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
-import { K as KritzelIconRegistry, d as defineCustomElement$a } from './p-CIts5Uma.js';
-import { S as ShapeType, R as ABSOLUTE_SCALE_MAX, T as ABSOLUTE_SCALE_MIN, M as KritzelSelectionTool, G as KritzelLineTool, I as KritzelEraserTool, U as KritzelShapeTool, J as KritzelImageTool, V as defineCustomElement$e } from './p-fqLbEfE0.js';
-import { b as KritzelBrushTool, c as KritzelTextTool, d as KritzelKeyboardHelper } from './p-BUsg2vtg.js';
-import { K as KritzelWorkspace } from './p-n789Y3S-.js';
-import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
-import { d as defineCustomElement$m } from './p-CIlIrPRp.js';
-import { d as defineCustomElement$l } from './p-c7AGmG3p.js';
-import { d as defineCustomElement$k } from './p-Bo-NQ68K.js';
-import { d as defineCustomElement$j } from './p-B80ry-r4.js';
-import { d as defineCustomElement$i } from './p-vLN8eXFe.js';
-import { d as defineCustomElement$h } from './p-C92UCXyc.js';
-import { d as defineCustomElement$g } from './p-CAxHKvww.js';
-import { d as defineCustomElement$f } from './p-Cdw55iW6.js';
-import { d as defineCustomElement$d } from './p-DI7JQMsC.js';
-import { d as defineCustomElement$c } from './p-BC5-_yPs.js';
-import { d as defineCustomElement$b } from './p-qWf2T62p.js';
-import { d as defineCustomElement$8, a as defineCustomElement$9 } from './p-CD9cCvhR.js';
-import { d as defineCustomElement$7 } from './p-fm-bG_zL.js';
-import { d as defineCustomElement$6 } from './p-DoD6F7Y4.js';
-import { d as defineCustomElement$5 } from './p-DyVWaSSc.js';
-import { d as defineCustomElement$4 } from './p-WLXyD_eY.js';
-import { d as defineCustomElement$3 } from './p-DmYjCy-z.js';
-import { d as defineCustomElement$2 } from './p-C720oASC.js';
-
-const DEFAULT_BRUSH_CONFIG = {
-    type: 'pen',
-    color: '#000000',
-    size: 16,
-    palettes: {
-        pen: [
-            '#000000',
-            '#ff5252',
-            '#ffbc00',
-            '#00c853',
-            '#0000FF',
-            '#d500f9',
-            '#fafafa',
-            '#a52714',
-            '#ee8100',
-            '#558b2f',
-            '#01579b',
-            '#8e24aa',
-            '#90a4ae',
-            '#ff4081',
-            '#ff6e40',
-            '#aeea00',
-            '#304ffe',
-            '#7c4dff',
-            '#cfd8dc',
-            '#f8bbd0',
-            '#ffccbc',
-            '#f0f4c3',
-            '#9fa8da',
-            '#d1c4e9',
-        ],
-        highlighter: [
-            '#0000006e',
-            '#ff52526e',
-            '#ffbb006e',
-            '#00c8536e',
-            '#0000FF6e',
-            '#d500f96e',
-            '#fafafa6e',
-            '#a527146e',
-            '#ee81006e',
-            '#558b2f6e',
-            '#01579b6e',
-            '#8e24aa6e',
-            '#90a4ae6e',
-            '#ff40816e',
-            '#ff6e406e',
-            '#aeea006e',
-            '#304ffe6e',
-            '#7c4dff6e',
-            '#cfd8dc6e',
-            '#f8bbd06e',
-            '#ffccbc6e',
-            '#f0f4c36e',
-            '#9fa8da6e',
-            '#d1c4e96e',
-        ],
-    },
-};
-
-const DEFAULT_TEXT_CONFIG = {
-    color: '#000000',
-    size: 8,
-    fontFamily: 'Arial',
-    palette: [
-        '#000000',
-        '#ff5252',
-        '#ffbc00',
-        '#00c853',
-        '#0000FF',
-        '#d500f9',
-        '#fafafa',
-        '#a52714',
-        '#ee8100',
-        '#558b2f',
-        '#01579b',
-        '#8e24aa',
-        '#90a4ae',
-        '#ff4081',
-        '#ff6e40',
-        '#aeea00',
-        '#304ffe',
-        '#7c4dff',
-        '#cfd8dc',
-        '#f8bbd0',
-        '#ffccbc',
-        '#f0f4c3',
-        '#9fa8da',
-        '#d1c4e9',
-    ],
-};
-
-const DEFAULT_LINE_TOOL_CONFIG = {
-    color: '#000000',
-    size: 4,
-    palette: [
-        '#000000',
-        '#ff5252',
-        '#ffbc00',
-        '#00c853',
-        '#0000FF',
-        '#d500f9',
-        '#fafafa',
-        '#a52714',
-        '#ee8100',
-        '#558b2f',
-        '#01579b',
-        '#8e24aa',
-        '#90a4ae',
-        '#ff4081',
-        '#ff6e40',
-        '#aeea00',
-        '#304ffe',
-        '#7c4dff',
-        '#cfd8dc',
-        '#f8bbd0',
-        '#ffccbc',
-        '#f0f4c3',
-        '#b3e5fc',
-        '#e1bee7',
-    ],
-    arrows: {
-        end: { enabled: true, style: 'triangle' },
-    },
-};
-
-const DEFAULT_SHAPE_CONFIG = {
-    shapeType: ShapeType.Rectangle,
-    fillColor: 'transparent',
-    strokeColor: '#000000',
-    strokeWidth: 4,
-    fontColor: '#000000',
-    fontSize: 16,
-    fontFamily: 'Arial',
-    palette: [
-        '#000000',
-        '#ff5252',
-        '#ffbc00',
-        '#00c853',
-        '#0000FF',
-        '#d500f9',
-        '#fafafa',
-        '#a52714',
-        '#ee8100',
-        '#558b2f',
-        '#01579b',
-        '#8e24aa',
-        '#90a4ae',
-    ],
-};
-
-const kritzelEditorCss = "kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-workspace-manager{position:absolute;top:var(--kritzel-editor-workspace-manager-top, 14px);left:var(--kritzel-editor-workspace-manager-left, 14px)}kritzel-controls{position:absolute;bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}";
-
-const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.isReady = createEvent(this, "isReady");
-        this.objectsChange = createEvent(this, "objectsChange");
-        this.undoStateChange = createEvent(this, "undoStateChange");
-    }
-    get host() { return this; }
-    scaleMax = ABSOLUTE_SCALE_MAX;
-    scaleMin = ABSOLUTE_SCALE_MIN;
-    controls = [
-        {
-            name: 'selection',
-            type: 'tool',
-            isDefault: true,
-            tool: KritzelSelectionTool,
-            icon: 'cursor',
-        },
-        {
-            name: 'brush',
-            type: 'tool',
-            tool: KritzelBrushTool,
-            icon: 'pen',
-            config: DEFAULT_BRUSH_CONFIG,
-        },
-        {
-            name: 'line',
-            type: 'tool',
-            tool: KritzelLineTool,
-            icon: 'arrow',
-            config: DEFAULT_LINE_TOOL_CONFIG,
-        },
-        {
-            name: 'eraser',
-            type: 'tool',
-            tool: KritzelEraserTool,
-            icon: 'eraser',
-        },
-        {
-            name: 'text',
-            type: 'tool',
-            tool: KritzelTextTool,
-            icon: 'type',
-            config: DEFAULT_TEXT_CONFIG,
-        },
-        {
-            name: 'shape',
-            type: 'tool',
-            tool: KritzelShapeTool,
-            icon: 'shape-rectangle',
-            config: DEFAULT_SHAPE_CONFIG,
-            subOptions: [
-                { id: 'rectangle', icon: 'shape-rectangle', label: 'Rectangle', value: ShapeType.Rectangle, toolProperty: 'shapeType' },
-                { id: 'ellipse', icon: 'shape-ellipse', label: 'Ellipse', value: ShapeType.Ellipse, toolProperty: 'shapeType' },
-                { id: 'triangle', icon: 'shape-triangle', label: 'Triangle', value: ShapeType.Triangle, toolProperty: 'shapeType' },
-            ],
-        },
-        {
-            name: 'image',
-            type: 'tool',
-            tool: KritzelImageTool,
-            icon: 'image',
-        },
-        {
-            name: 'config',
-            type: 'config',
-        },
-    ];
-    globalContextMenuItems = [
-        {
-            label: 'Paste',
-            icon: 'paste',
-            disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
-            action: menu => this.engineRef.paste(menu.x, menu.y),
-        },
-        { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },
-    ];
-    objectContextMenuItems = [
-        { label: 'Copy', icon: 'copy', action: () => this.engineRef.copy() },
-        {
-            label: 'Paste',
-            icon: 'paste',
-            disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
-            action: (menu, _) => this.engineRef.paste(menu.x, menu.y),
-        },
-        { label: 'Delete', icon: 'delete', action: () => this.engineRef.delete() },
-        { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },
-        { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },
-        {
-            label: 'Group',
-            icon: 'group',
-            disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,
-            action: () => this.engineRef.group(),
-        },
-        {
-            label: 'Ungroup',
-            icon: 'ungroup',
-            disabled: async () => {
-                const selectedObjects = await this.engineRef.getSelectedObjects();
-                return !selectedObjects.some(obj => obj.__class__ === 'KritzelGroup');
-            },
-            action: () => this.engineRef.ungroup(),
-        },
-    ];
-    customSvgIcons = {};
-    isControlsVisible = true;
-    isUtilityPanelVisible = true;
-    syncConfig;
-    isReady;
-    objectsChange;
-    undoStateChange;
-    isEngineReady = false;
-    isControlsReady = false;
-    isWorkspaceManagerReady = false;
-    workspaces = [];
-    activeWorkspace;
-    isVirtualKeyboardOpen = false;
-    undoState = null;
-    onIsEngineReady(newValue) {
-        if (newValue && this.isControlsReady) {
-            this.checkIsReady();
-        }
-    }
-    onIsControlsReady(newValue) {
-        if (newValue && this.isEngineReady) {
-            this.checkIsReady();
-        }
-    }
-    onWorkspacesChange(newWorkspaces) {
-        if (this.activeWorkspace) {
-            const updatedActiveWorkspace = newWorkspaces.find(ws => ws.id === this.activeWorkspace.id);
-            if (updatedActiveWorkspace && updatedActiveWorkspace !== this.activeWorkspace) {
-                this.activeWorkspace = updatedActiveWorkspace;
-            }
-        }
-    }
-    onTouchStart(event) {
-        if (event.cancelable) {
-            event.preventDefault();
-        }
-    }
-    async getObjectById(id) {
-        return this.engineRef.getObjectById(id);
-    }
-    async addObject(object) {
-        return this.engineRef.addObject(object);
-    }
-    async updateObject(object, updatedProperties) {
-        return this.engineRef.updateObject(object, updatedProperties);
-    }
-    async removeObject(object) {
-        return this.engineRef.removeObject(object);
-    }
-    async getSelectedObjects() {
-        return this.engineRef.getSelectedObjects();
-    }
-    async selectObjects(objects) {
-        return this.engineRef.selectObjects(objects);
-    }
-    async selectAllObjectsInViewport() {
-        return this.engineRef.selectAllObjectsInViewport();
-    }
-    async clearSelection() {
-        this.engineRef.clearSelection();
-    }
-    async centerObjectInViewport(object) {
-        return this.engineRef.centerObjectInViewport(object);
-    }
-    async createWorkspace(name, viewport) {
-        const workspace = new KritzelWorkspace(`workspace-${Date.now()}`, name, viewport);
-        return this.engineRef.createWorkspace(workspace);
-    }
-    async updateWorkspace(workspace) {
-        return this.engineRef.updateWorkspace(workspace);
-    }
-    async deleteWorkspace(workspace) {
-        return this.engineRef.deleteWorkspace(workspace);
-    }
-    async getWorkspaces() {
-        return this.engineRef.getWorkspaces();
-    }
-    async getActiveWorkspace() {
-        return this.engineRef.getActiveWorkspace();
-    }
-    engineRef;
-    controlsRef;
-    splitButtonRef;
-    componentDidLoad() {
-        this.registerCustomSvgIcons();
-        this.listenForMobileKeyboard();
-        this.setOsSpecificCssVariables();
-    }
-    async checkIsReady() {
-        await customElements.whenDefined('kritzel-editor');
-        await customElements.whenDefined('kritzel-workspace-manager');
-        await customElements.whenDefined('kritzel-controls');
-        await customElements.whenDefined('kritzel-engine');
-        if (!this.isEngineReady || !this.isControlsReady || !this.isWorkspaceManagerReady) {
-            return;
-        }
-        this.isReady.emit(this.host);
-    }
-    onEngineReady(event) {
-        this.isEngineReady = true;
-        this.activeWorkspace = event.detail.activeWorkspace;
-        this.workspaces = event.detail.workspaces;
-    }
-    handleWorkspacesChange(event) {
-        this.workspaces = event.detail;
-    }
-    handleObjectsChange(event) {
-        this.objectsChange.emit(event.detail);
-    }
-    handleUndoStateChange(event) {
-        this.undoStateChange.emit(event.detail);
-        this.undoState = event.detail;
-    }
-    registerCustomSvgIcons() {
-        for (const [name, svg] of Object.entries(this.customSvgIcons)) {
-            KritzelIconRegistry.register(name, svg);
-        }
-    }
-    listenForMobileKeyboard() {
-        KritzelKeyboardHelper.onKeyboardVisibleChanged(isOpen => {
-            this.isVirtualKeyboardOpen = isOpen;
-        });
-    }
-    setOsSpecificCssVariables() {
-        const os = KritzelDevicesHelper.detectOS();
-        switch (os) {
-            case 'iOS':
-                // iOS specific adjustments
-                this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');
-                this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');
-                this.host.style.setProperty('--kritzel-editor-controls-bottom', '14px');
-                this.host.style.setProperty('--kritzel-editor-controls-transition', 'cubic-bezier(0.25, 0.1, 0.25, 1.0)');
-                this.host.style.setProperty('--kritzel-editor-controls-transform', 'translateY(200%)');
-                this.host.style.setProperty('--kritzel-editor-controls-transition-duration', '0.25s');
-                break;
-            case 'Android':
-                // Android specific adjustments
-                this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');
-                this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');
-                this.host.style.setProperty('--kritzel-editor-controls-bottom', '24px');
-                break;
-            default:
-                // Default for Windows/Linux
-                this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');
-                this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');
-                this.host.style.setProperty('--kritzel-editor-controls-bottom', '14px');
-                break;
-        }
-    }
-    render() {
-        return (h(Host, { key: 'dd67bea86f807f0ccd5905183e73713a015d6bee' }, h("kritzel-workspace-manager", { key: '557edc7e3a131d338be6df91698ba6923e7bc50e', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '98969d0f2bb5a9a365885fb4765e0c04c1394caa', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), h("kritzel-controls", { key: '6092f393562af07643622c07d432f6100497aaf0', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
-    }
-    static get watchers() { return {
-        "isEngineReady": ["onIsEngineReady"],
-        "isControlsReady": ["onIsControlsReady"],
-        "workspaces": ["onWorkspacesChange"]
-    }; }
-    static get style() { return kritzelEditorCss; }
-}, [768, "kritzel-editor", {
-        "scaleMax": [2, "scale-max"],
-        "scaleMin": [2, "scale-min"],
-        "controls": [16],
-        "globalContextMenuItems": [16],
-        "objectContextMenuItems": [16],
-        "customSvgIcons": [16],
-        "isControlsVisible": [4, "is-controls-visible"],
-        "isUtilityPanelVisible": [4, "is-utility-panel-visible"],
-        "syncConfig": [16],
-        "isEngineReady": [32],
-        "isControlsReady": [32],
-        "isWorkspaceManagerReady": [32],
-        "workspaces": [32],
-        "activeWorkspace": [32],
-        "isVirtualKeyboardOpen": [32],
-        "undoState": [32],
-        "getObjectById": [64],
-        "addObject": [64],
-        "updateObject": [64],
-        "removeObject": [64],
-        "getSelectedObjects": [64],
-        "selectObjects": [64],
-        "selectAllObjectsInViewport": [64],
-        "clearSelection": [64],
-        "centerObjectInViewport": [64],
-        "createWorkspace": [64],
-        "updateWorkspace": [64],
-        "deleteWorkspace": [64],
-        "getWorkspaces": [64],
-        "getActiveWorkspace": [64]
-    }, [[0, "dblclick", "onTouchStart"]], {
-        "isEngineReady": ["onIsEngineReady"],
-        "isControlsReady": ["onIsControlsReady"],
-        "workspaces": ["onWorkspacesChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["kritzel-editor", "kritzel-color", "kritzel-color-palette", "kritzel-context-menu", "kritzel-control-brush-config", "kritzel-control-text-config", "kritzel-controls", "kritzel-cursor-trail", "kritzel-dropdown", "kritzel-engine", "kritzel-font", "kritzel-font-family", "kritzel-font-size", "kritzel-icon", "kritzel-menu", "kritzel-menu-item", "kritzel-portal", "kritzel-split-button", "kritzel-stroke-size", "kritzel-tooltip", "kritzel-utility-panel", "kritzel-workspace-manager"];
-    components.forEach(tagName => { switch (tagName) {
-        case "kritzel-editor":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, KritzelEditor$1);
-            }
-            break;
-        case "kritzel-color":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$m();
-            }
-            break;
-        case "kritzel-color-palette":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$l();
-            }
-            break;
-        case "kritzel-context-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$k();
-            }
-            break;
-        case "kritzel-control-brush-config":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$j();
-            }
-            break;
-        case "kritzel-control-text-config":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$i();
-            }
-            break;
-        case "kritzel-controls":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$h();
-            }
-            break;
-        case "kritzel-cursor-trail":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$g();
-            }
-            break;
-        case "kritzel-dropdown":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$f();
-            }
-            break;
-        case "kritzel-engine":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$e();
-            }
-            break;
-        case "kritzel-font":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$d();
-            }
-            break;
-        case "kritzel-font-family":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "kritzel-font-size":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "kritzel-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "kritzel-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "kritzel-menu-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "kritzel-portal":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "kritzel-split-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "kritzel-stroke-size":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "kritzel-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "kritzel-utility-panel":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "kritzel-workspace-manager":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const KritzelEditor = KritzelEditor$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DEFAULT_BRUSH_CONFIG as D, KritzelEditor, DEFAULT_TEXT_CONFIG as a, DEFAULT_LINE_TOOL_CONFIG as b, defineCustomElement };
-//# sourceMappingURL=kritzel-editor.js.map
-
-//# sourceMappingURL=kritzel-editor.js.map
+import{p as e,H as t,c as s,h as o,d as a,t as i}from"./p-Bj_Og27M.js";import{K as r,d as n}from"./p-DTezr6w9.js";import{S as c,R as l,T as p,M as f,G as d,I as m,U as k,J as h,V as b}from"./p-exWKDgI8.js";import{b as u,c as g,d as y}from"./p-Cp15toXH.js";import{K as z}from"./p-n789Y3S-.js";import{K as j}from"./p-l10It7Nm.js";import{d as C}from"./p-CXzfYQ_u.js";import{d as w}from"./p-Du1vxHy8.js";import{d as E}from"./p-IAqZFssU.js";import{d as x}from"./p-CeKT_dTd.js";import{d as I}from"./p-C3UriJh7.js";import{d as R}from"./p-D4n7UbGY.js";import{d as O}from"./p-D1tfzpy8.js";import{d as W}from"./p-g0N9j_uT.js";import{d as v}from"./p-C4krHoUl.js";import{d as S}from"./p-C-d2IH4v.js";import{d as F}from"./p-BXaWhpO2.js";import{d as M,a as V}from"./p-1z-ds26_.js";import{d as D}from"./p-Cy77SpWt.js";import{d as T}from"./p-D5ZsALCP.js";import{d as A}from"./p-CF5L2Gdl.js";import{d as U}from"./p-BtuXeItZ.js";import{d as K}from"./p-XGgKC_Fe.js";import{d as P}from"./p-4FEa4ADy.js";const B={type:"pen",color:"#000000",size:16,palettes:{pen:["#000000","#ff5252","#ffbc00","#00c853","#0000FF","#d500f9","#fafafa","#a52714","#ee8100","#558b2f","#01579b","#8e24aa","#90a4ae","#ff4081","#ff6e40","#aeea00","#304ffe","#7c4dff","#cfd8dc","#f8bbd0","#ffccbc","#f0f4c3","#9fa8da","#d1c4e9"],highlighter:["#0000006e","#ff52526e","#ffbb006e","#00c8536e","#0000FF6e","#d500f96e","#fafafa6e","#a527146e","#ee81006e","#558b2f6e","#01579b6e","#8e24aa6e","#90a4ae6e","#ff40816e","#ff6e406e","#aeea006e","#304ffe6e","#7c4dff6e","#cfd8dc6e","#f8bbd06e","#ffccbc6e","#f0f4c36e","#9fa8da6e","#d1c4e96e"]}},G={color:"#000000",size:8,fontFamily:"Arial",palette:["#000000","#ff5252","#ffbc00","#00c853","#0000FF","#d500f9","#fafafa","#a52714","#ee8100","#558b2f","#01579b","#8e24aa","#90a4ae","#ff4081","#ff6e40","#aeea00","#304ffe","#7c4dff","#cfd8dc","#f8bbd0","#ffccbc","#f0f4c3","#9fa8da","#d1c4e9"]},_={color:"#000000",size:4,palette:["#000000","#ff5252","#ffbc00","#00c853","#0000FF","#d500f9","#fafafa","#a52714","#ee8100","#558b2f","#01579b","#8e24aa","#90a4ae","#ff4081","#ff6e40","#aeea00","#304ffe","#7c4dff","#cfd8dc","#f8bbd0","#ffccbc","#f0f4c3","#b3e5fc","#e1bee7"],arrows:{end:{enabled:!0,style:"triangle"}}},X={shapeType:c.Rectangle,fillColor:"transparent",strokeColor:"#000000",strokeWidth:4,fontColor:"#000000",fontSize:16,fontFamily:"Arial",palette:["#000000","#ff5252","#ffbc00","#00c853","#0000FF","#d500f9","#fafafa","#a52714","#ee8100","#558b2f","#01579b","#8e24aa","#90a4ae"]},Y=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.isReady=s(this,"isReady"),this.objectsChange=s(this,"objectsChange"),this.undoStateChange=s(this,"undoStateChange")}get host(){return this}scaleMax=l;scaleMin=p;controls=[{name:"selection",type:"tool",isDefault:!0,tool:f,icon:"cursor"},{name:"brush",type:"tool",tool:u,icon:"pen",config:B},{name:"line",type:"tool",tool:d,icon:"arrow",config:_},{name:"eraser",type:"tool",tool:m,icon:"eraser"},{name:"text",type:"tool",tool:g,icon:"type",config:G},{name:"shape",type:"tool",tool:k,icon:"shape-rectangle",config:X,subOptions:[{id:"rectangle",icon:"shape-rectangle",label:"Rectangle",value:c.Rectangle,toolProperty:"shapeType"},{id:"ellipse",icon:"shape-ellipse",label:"Ellipse",value:c.Ellipse,toolProperty:"shapeType"},{id:"triangle",icon:"shape-triangle",label:"Triangle",value:c.Triangle,toolProperty:"shapeType"}]},{name:"image",type:"tool",tool:h,icon:"image"},{name:"config",type:"config"}];globalContextMenuItems=[{label:"Paste",icon:"paste",disabled:async()=>0===(await this.engineRef.getCopiedObjects()).length,action:e=>this.engineRef.paste(e.x,e.y)},{label:"Select All",icon:"select-all",action:()=>this.selectAllObjectsInViewport()}];objectContextMenuItems=[{label:"Copy",icon:"copy",action:()=>this.engineRef.copy()},{label:"Paste",icon:"paste",disabled:async()=>0===(await this.engineRef.getCopiedObjects()).length,action:e=>this.engineRef.paste(e.x,e.y)},{label:"Delete",icon:"delete",action:()=>this.engineRef.delete()},{label:"Bring to Front",icon:"bring-to-front",action:()=>this.engineRef.bringToFront()},{label:"Send to Back",icon:"send-to-back",action:()=>this.engineRef.sendToBack()},{label:"Group",icon:"group",disabled:async()=>(await this.engineRef.getSelectedObjects()).length<2,action:()=>this.engineRef.group()},{label:"Ungroup",icon:"ungroup",disabled:async()=>!(await this.engineRef.getSelectedObjects()).some((e=>"KritzelGroup"===e.__class__)),action:()=>this.engineRef.ungroup()}];customSvgIcons={};isControlsVisible=!0;isUtilityPanelVisible=!0;syncConfig;isReady;objectsChange;undoStateChange;isEngineReady=!1;isControlsReady=!1;isWorkspaceManagerReady=!1;workspaces=[];activeWorkspace;isVirtualKeyboardOpen=!1;undoState=null;onIsEngineReady(e){e&&this.isControlsReady&&this.checkIsReady()}onIsControlsReady(e){e&&this.isEngineReady&&this.checkIsReady()}onWorkspacesChange(e){if(this.activeWorkspace){const t=e.find((e=>e.id===this.activeWorkspace.id));t&&t!==this.activeWorkspace&&(this.activeWorkspace=t)}}onTouchStart(e){e.cancelable&&e.preventDefault()}async getObjectById(e){return this.engineRef.getObjectById(e)}async addObject(e){return this.engineRef.addObject(e)}async updateObject(e,t){return this.engineRef.updateObject(e,t)}async removeObject(e){return this.engineRef.removeObject(e)}async getSelectedObjects(){return this.engineRef.getSelectedObjects()}async selectObjects(e){return this.engineRef.selectObjects(e)}async selectAllObjectsInViewport(){return this.engineRef.selectAllObjectsInViewport()}async clearSelection(){this.engineRef.clearSelection()}async centerObjectInViewport(e){return this.engineRef.centerObjectInViewport(e)}async createWorkspace(e,t){const s=new z("workspace-"+Date.now(),e,t);return this.engineRef.createWorkspace(s)}async updateWorkspace(e){return this.engineRef.updateWorkspace(e)}async deleteWorkspace(e){return this.engineRef.deleteWorkspace(e)}async getWorkspaces(){return this.engineRef.getWorkspaces()}async getActiveWorkspace(){return this.engineRef.getActiveWorkspace()}engineRef;controlsRef;splitButtonRef;componentDidLoad(){this.registerCustomSvgIcons(),this.listenForMobileKeyboard(),this.setOsSpecificCssVariables()}async checkIsReady(){await customElements.whenDefined("kritzel-editor"),await customElements.whenDefined("kritzel-workspace-manager"),await customElements.whenDefined("kritzel-controls"),await customElements.whenDefined("kritzel-engine"),this.isEngineReady&&this.isControlsReady&&this.isWorkspaceManagerReady&&this.isReady.emit(this.host)}onEngineReady(e){this.isEngineReady=!0,this.activeWorkspace=e.detail.activeWorkspace,this.workspaces=e.detail.workspaces}handleWorkspacesChange(e){this.workspaces=e.detail}handleObjectsChange(e){this.objectsChange.emit(e.detail)}handleUndoStateChange(e){this.undoStateChange.emit(e.detail),this.undoState=e.detail}registerCustomSvgIcons(){for(const[e,t]of Object.entries(this.customSvgIcons))r.register(e,t)}listenForMobileKeyboard(){y.onKeyboardVisibleChanged((e=>{this.isVirtualKeyboardOpen=e}))}setOsSpecificCssVariables(){switch(j.detectOS()){case"iOS":this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px"),this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px"),this.host.style.setProperty("--kritzel-editor-controls-transition","cubic-bezier(0.25, 0.1, 0.25, 1.0)"),this.host.style.setProperty("--kritzel-editor-controls-transform","translateY(200%)"),this.host.style.setProperty("--kritzel-editor-controls-transition-duration","0.25s");break;case"Android":this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px"),this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","24px");break;default:this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px"),this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px")}}render(){return o(a,{key:"dd67bea86f807f0ccd5905183e73713a015d6bee"},o("kritzel-workspace-manager",{key:"557edc7e3a131d338be6df91698ba6923e7bc50e",workspaces:this.workspaces,activeWorkspace:this.activeWorkspace,onWorkspaceChange:e=>this.activeWorkspace=e.detail,onIsWorkspaceManagerReady:()=>this.isWorkspaceManagerReady=!0}),o("kritzel-engine",{key:"98969d0f2bb5a9a365885fb4765e0c04c1394caa",ref:e=>this.engineRef=e,workspace:this.activeWorkspace,syncConfig:this.syncConfig,scaleMax:this.scaleMax,scaleMin:this.scaleMin,globalContextMenuItems:this.globalContextMenuItems,objectContextMenuItems:this.objectContextMenuItems,onIsEngineReady:e=>this.onEngineReady(e),onWorkspacesChange:e=>this.handleWorkspacesChange(e),onObjectsChange:e=>this.handleObjectsChange(e),onUndoStateChange:e=>this.handleUndoStateChange(e)}),o("kritzel-controls",{key:"6092f393562af07643622c07d432f6100497aaf0",class:{"keyboard-open":this.isVirtualKeyboardOpen},style:{display:this.isControlsVisible?"flex":"none"},ref:e=>this.controlsRef=e,controls:this.controls,isUtilityPanelVisible:this.isUtilityPanelVisible,undoState:this.undoState,onIsControlsReady:()=>this.isControlsReady=!0}))}static get watchers(){return{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}]}}static get style(){return"kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-workspace-manager{position:absolute;top:var(--kritzel-editor-workspace-manager-top, 14px);left:var(--kritzel-editor-workspace-manager-left, 14px)}kritzel-controls{position:absolute;bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}"}},[512,"kritzel-editor",{scaleMax:[2,"scale-max"],scaleMin:[2,"scale-min"],controls:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],customSvgIcons:[16],isControlsVisible:[4,"is-controls-visible"],isUtilityPanelVisible:[4,"is-utility-panel-visible"],syncConfig:[16],isEngineReady:[32],isControlsReady:[32],isWorkspaceManagerReady:[32],workspaces:[32],activeWorkspace:[32],isVirtualKeyboardOpen:[32],undoState:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[0,"dblclick","onTouchStart"]],{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}]}]),H=Y,L=function(){"undefined"!=typeof customElements&&["kritzel-editor","kritzel-color","kritzel-color-palette","kritzel-context-menu","kritzel-control-brush-config","kritzel-control-text-config","kritzel-controls","kritzel-cursor-trail","kritzel-dropdown","kritzel-engine","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal","kritzel-split-button","kritzel-stroke-size","kritzel-tooltip","kritzel-utility-panel","kritzel-workspace-manager"].forEach((e=>{switch(e){case"kritzel-editor":customElements.get(i(e))||customElements.define(i(e),Y);break;case"kritzel-color":customElements.get(i(e))||C();break;case"kritzel-color-palette":customElements.get(i(e))||w();break;case"kritzel-context-menu":customElements.get(i(e))||E();break;case"kritzel-control-brush-config":customElements.get(i(e))||x();break;case"kritzel-control-text-config":customElements.get(i(e))||I();break;case"kritzel-controls":customElements.get(i(e))||R();break;case"kritzel-cursor-trail":customElements.get(i(e))||O();break;case"kritzel-dropdown":customElements.get(i(e))||W();break;case"kritzel-engine":customElements.get(i(e))||b();break;case"kritzel-font":customElements.get(i(e))||v();break;case"kritzel-font-family":customElements.get(i(e))||S();break;case"kritzel-font-size":customElements.get(i(e))||F();break;case"kritzel-icon":customElements.get(i(e))||n();break;case"kritzel-menu":customElements.get(i(e))||V();break;case"kritzel-menu-item":customElements.get(i(e))||M();break;case"kritzel-portal":customElements.get(i(e))||D();break;case"kritzel-split-button":customElements.get(i(e))||T();break;case"kritzel-stroke-size":customElements.get(i(e))||A();break;case"kritzel-tooltip":customElements.get(i(e))||U();break;case"kritzel-utility-panel":customElements.get(i(e))||K();break;case"kritzel-workspace-manager":customElements.get(i(e))||P()}}))};export{B as D,H as KritzelEditor,G as a,_ as b,L as defineCustomElement}

package/dist/components/kritzel-engine.js

@@ -1,9 +1 @@
-import { W as KritzelEngine$1, V as defineCustomElement$1 } from './p-fqLbEfE0.js';
-
-const KritzelEngine = KritzelEngine$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { KritzelEngine, defineCustomElement };
-//# sourceMappingURL=kritzel-engine.js.map
-
-//# sourceMappingURL=kritzel-engine.js.map
+import{W as o,V as s}from"./p-exWKDgI8.js";const p=o,r=s;export{p as KritzelEngine,r as defineCustomElement}

package/dist/components/kritzel-font-family.js

@@ -1,9 +1 @@
-import { K as KritzelFontFamily$1, d as defineCustomElement$1 } from './p-BC5-_yPs.js';
-
-const KritzelFontFamily = KritzelFontFamily$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { KritzelFontFamily, defineCustomElement };
-//# sourceMappingURL=kritzel-font-family.js.map
-
-//# sourceMappingURL=kritzel-font-family.js.map
+import{K as o,d as s}from"./p-C-d2IH4v.js";const p=o,r=s;export{p as KritzelFontFamily,r as defineCustomElement}

package/dist/components/kritzel-font-size.js

@@ -1,9 +1 @@
-import { K as KritzelFontSize$1, d as defineCustomElement$1 } from './p-qWf2T62p.js';
-
-const KritzelFontSize = KritzelFontSize$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { KritzelFontSize, defineCustomElement };
-//# sourceMappingURL=kritzel-font-size.js.map
-
-//# sourceMappingURL=kritzel-font-size.js.map
+import{K as o,d as p}from"./p-BXaWhpO2.js";const s=o,a=p;export{s as KritzelFontSize,a as defineCustomElement}

package/dist/components/kritzel-font.js

@@ -1,9 +1 @@
-import { K as KritzelFont$1, d as defineCustomElement$1 } from './p-DI7JQMsC.js';
-
-const KritzelFont = KritzelFont$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { KritzelFont, defineCustomElement };
-//# sourceMappingURL=kritzel-font.js.map
-
-//# sourceMappingURL=kritzel-font.js.map
+import{K as o,d as r}from"./p-C4krHoUl.js";const s=o,p=r;export{s as KritzelFont,p as defineCustomElement}