@kritzel/editor 0.4.31

package/dist/collection/components/kritzel-context-menu/kritzel-context-menu.js

@@ -0,0 +1,368 @@
+import { Host, h } from "@stencil/core";
+const VIEWPORT_PADDING = 8;
+const SUBMENU_DELAY = 150;
+const ESTIMATED_SUBMENU_WIDTH = 160; // Estimated width for pre-calculation
+export class KritzelContextMenu {
+    host;
+    items;
+    onItemsChanged() {
+        this.updateMenuItems();
+    }
+    objects;
+    actionSelected;
+    close;
+    processedItems = [];
+    /** Current open submenu path (e.g. '0.2.1'). Empty if none. */
+    openSubmenuPath = '';
+    submenuPositions = {};
+    submenuTimer = null;
+    submenuRefs = new Map();
+    menuItemWrapperRefs = new Map();
+    handleOutsideClick(event) {
+        const path = event.composedPath();
+        if (!path.includes(this.host)) {
+            this.close.emit();
+        }
+    }
+    componentWillLoad() {
+        this.updateMenuItems();
+    }
+    componentDidLoad() {
+        this.adjustPositionToViewport();
+    }
+    componentDidUpdate() {
+        this.adjustPositionToViewport();
+        this.adjustSubmenuPositions();
+        this.pruneStaleRefs();
+    }
+    disconnectedCallback() {
+        if (this.submenuTimer) {
+            clearTimeout(this.submenuTimer);
+        }
+    }
+    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`;
+        }
+    }
+    adjustSubmenuPositions() {
+        if (!this.openSubmenuPath)
+            return;
+        const viewportHeight = window.innerHeight;
+        // Adjust every open submenu in the chain (every prefix of openSubmenuPath).
+        for (const path of this.getOpenSubmenuPaths()) {
+            const submenuEl = this.submenuRefs.get(path);
+            const wrapperEl = this.menuItemWrapperRefs.get(path);
+            if (!submenuEl || !wrapperEl)
+                continue;
+            const wrapperRect = wrapperEl.getBoundingClientRect();
+            const submenuHeight = submenuEl.offsetHeight; // Constant regardless of current top shift
+            const naturalBottom = wrapperRect.top + submenuHeight;
+            if (naturalBottom > viewportHeight - VIEWPORT_PADDING) {
+                let overflow = naturalBottom - (viewportHeight - VIEWPORT_PADDING);
+                // Don't shift up so far that the top goes above the viewport
+                if (wrapperRect.top - overflow < VIEWPORT_PADDING) {
+                    overflow = wrapperRect.top - VIEWPORT_PADDING;
+                }
+                submenuEl.style.top = `${-overflow}px`;
+            }
+            else {
+                submenuEl.style.top = '0px';
+            }
+        }
+    }
+    getOpenSubmenuPaths() {
+        if (!this.openSubmenuPath)
+            return [];
+        const parts = this.openSubmenuPath.split('.');
+        const paths = [];
+        for (let i = 1; i <= parts.length; i++) {
+            paths.push(parts.slice(0, i).join('.'));
+        }
+        return paths;
+    }
+    isSubmenuOpen(path) {
+        return this.openSubmenuPath === path || this.openSubmenuPath.startsWith(path + '.');
+    }
+    getParentPath(path) {
+        const idx = path.lastIndexOf('.');
+        return idx === -1 ? '' : path.substring(0, idx);
+    }
+    getMenuDepth(path) {
+        if (!path)
+            return 0;
+        return path.split('.').length;
+    }
+    pruneStaleRefs() {
+        const openPaths = new Set(this.getOpenSubmenuPaths());
+        for (const key of Array.from(this.submenuRefs.keys())) {
+            if (!openPaths.has(key)) {
+                this.submenuRefs.delete(key);
+            }
+        }
+        // Keep root-level wrapper refs (single-segment paths) always rendered; prune deeper
+        // wrappers whose parent submenu is no longer open.
+        for (const key of Array.from(this.menuItemWrapperRefs.keys())) {
+            const parent = this.getParentPath(key);
+            if (parent !== '' && !openPaths.has(parent)) {
+                this.menuItemWrapperRefs.delete(key);
+            }
+        }
+    }
+    handleItemClick(item, isDisabled, hasChildren) {
+        if (isDisabled)
+            return;
+        if (hasChildren) {
+            // Hover handles open/close; click on a parent is a no-op.
+            return;
+        }
+        if (item.action) {
+            this.actionSelected.emit(item);
+        }
+    }
+    handleItemMouseEnter(path, hasChildren) {
+        if (this.submenuTimer) {
+            clearTimeout(this.submenuTimer);
+            this.submenuTimer = null;
+        }
+        const parentPath = this.getParentPath(path);
+        if (hasChildren) {
+            this.submenuTimer = setTimeout(() => {
+                // Pre-calculate horizontal position before opening to avoid flicker.
+                const wrapperEl = this.menuItemWrapperRefs.get(path);
+                let position = 'right';
+                if (wrapperEl) {
+                    const rect = wrapperEl.getBoundingClientRect();
+                    const viewportWidth = window.innerWidth;
+                    const wouldOverflowRight = rect.right + ESTIMATED_SUBMENU_WIDTH > viewportWidth - VIEWPORT_PADDING;
+                    position = wouldOverflowRight ? 'left' : 'right';
+                }
+                this.submenuPositions = { ...this.submenuPositions, [path]: position };
+                this.openSubmenuPath = path;
+            }, SUBMENU_DELAY);
+        }
+        else {
+            // Hovering a sibling without children: collapse to the parent chain so any
+            // sibling-rooted submenu closes, but the ancestor chain stays open.
+            this.submenuTimer = setTimeout(() => {
+                this.openSubmenuPath = parentPath;
+            }, SUBMENU_DELAY);
+        }
+    }
+    handleSubmenuMouseEnter() {
+        if (this.submenuTimer) {
+            clearTimeout(this.submenuTimer);
+            this.submenuTimer = null;
+        }
+    }
+    handleSubmenuMouseLeave(path) {
+        // Close this submenu (and any deeper levels) but keep the ancestor chain open.
+        const parentPath = this.getParentPath(path);
+        this.submenuTimer = setTimeout(() => {
+            this.openSubmenuPath = parentPath;
+        }, SUBMENU_DELAY);
+    }
+    async updateMenuItems() {
+        this.processedItems = await this.processItems(this.items);
+    }
+    async processItems(items) {
+        const processed = [];
+        for (const item of items) {
+            const isVisible = await this.evaluateProperty(item.isVisible, true);
+            if (isVisible) {
+                const isDisabled = await this.evaluateProperty(item.isDisabled, false);
+                let processedChildren;
+                if (item.children && item.children.length > 0) {
+                    processedChildren = await this.processItems(item.children);
+                }
+                processed.push({ item, isDisabled, processedChildren });
+            }
+        }
+        return processed;
+    }
+    async evaluateProperty(value, defaultValue) {
+        if (typeof value === 'boolean') {
+            return value;
+        }
+        if (typeof value === 'function') {
+            return await Promise.resolve(value(null, this.objects));
+        }
+        return defaultValue;
+    }
+    renderItems(items, parentPath) {
+        return items.map(({ item, isDisabled, processedChildren }, index) => {
+            const path = parentPath === '' ? String(index) : `${parentPath}.${index}`;
+            const prevItem = index > 0 ? items[index - 1].item : null;
+            const showDivider = prevItem && prevItem.group !== item.group;
+            const hasChildren = !!processedChildren && processedChildren.length > 0;
+            const submenuOpen = hasChildren && this.isSubmenuOpen(path);
+            return [
+                showDivider && h("div", { class: "menu-divider", key: `divider-${path}` }),
+                h("div", { class: "menu-item-wrapper", key: `wrapper-${path}`, ref: el => el && this.menuItemWrapperRefs.set(path, el), onMouseEnter: () => this.handleItemMouseEnter(path, hasChildren) }, h("button", { key: `${item.label}-${path}`, class: { 'menu-item': true, 'disabled': isDisabled, 'has-children': hasChildren, 'submenu-open': submenuOpen }, onClick: () => this.handleItemClick(item, isDisabled, hasChildren), disabled: isDisabled && !hasChildren }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label), hasChildren && h("kritzel-icon", { name: "chevron-right", size: 12, class: "submenu-arrow" })), hasChildren && submenuOpen && this.renderSubmenu(processedChildren, path)),
+            ];
+        });
+    }
+    renderSubmenu(processedChildren, path) {
+        const position = this.submenuPositions[path] === 'left' ? 'left' : 'right';
+        const zIndex = this.getMenuDepth(path) + 1;
+        return (h("div", { class: { 'submenu-container': true, 'position-left': position === 'left' }, key: `submenu-${path}`, style: { zIndex: String(zIndex) }, ref: el => el && this.submenuRefs.set(path, el), onMouseEnter: () => this.handleSubmenuMouseEnter(), onMouseLeave: () => this.handleSubmenuMouseLeave(path) }, this.renderItems(processedChildren, path)));
+    }
+    render() {
+        if (!this.processedItems || this.processedItems.length === 0) {
+            return null;
+        }
+        return (h(Host, null, h("div", { class: "menu-container" }, this.renderItems(this.processedItems, ''))));
+    }
+    static get is() { return "kritzel-context-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-context-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-context-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ContextMenuItem[]",
+                    "resolved": "ContextMenuItem[]",
+                    "references": {
+                        "ContextMenuItem": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::ContextMenuItem",
+                            "referenceLocation": "ContextMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "objects": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelBaseObject[]",
+                    "resolved": "KritzelBaseObject<HTMLElement | SVGElement>[]",
+                    "references": {
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/classes/objects/base-object.class.d.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "processedItems": {},
+            "openSubmenuPath": {},
+            "submenuPositions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "actionSelected",
+                "name": "actionSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ContextMenuItem",
+                    "resolved": "ContextMenuItem",
+                    "references": {
+                        "ContextMenuItem": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::ContextMenuItem",
+                            "referenceLocation": "ContextMenuItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "onItemsChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "pointerdown",
+                "method": "handleOutsideClick",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/kritzel-current-user/kritzel-current-user.css

@@ -0,0 +1,11 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  -webkit-tap-highlight-color: transparent;
+}
+
+kritzel-avatar {
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border-radius: 50%;
+}

package/dist/collection/components/kritzel-current-user/kritzel-current-user.js

@@ -0,0 +1,109 @@
+import { Host, h } from "@stencil/core";
+export class KritzelCurrentUser {
+    /**
+     * The current user to display
+     */
+    user;
+    /**
+     * Avatar size in pixels
+     */
+    avatarSize = 40;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    render() {
+        return (h(Host, { key: '27a6be0c90f290588190f9810608041eb713ac75' }, h("kritzel-avatar", { key: 'f06de8b0e904cbcf3fb72ed2cc50da559ca2c9c4', user: this.user, size: this.avatarSize })));
+    }
+    static get is() { return "kritzel-current-user"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-current-user.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-current-user.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "user": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IKritzelUser",
+                    "resolved": "IKritzelUser",
+                    "references": {
+                        "IKritzelUser": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelUser",
+                            "referenceLocation": "IKritzelUser"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The current user to display"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "avatarSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar size in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-size",
+                "defaultValue": "40"
+            },
+            "terms": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<Record<KritzelTermKey, string>>",
+                    "resolved": "\"backToContent.label\" | \"currentUser.dialogTitle\" | \"editor.loading\" | \"export.dialogTitle\" | \"export.exportButton\" | \"export.filename.label\" | \"export.filename.placeholder\" | \"export.format.label\" | \"export.tabs.viewport\" | \"export.tabs.workspace\" | \"login.dialogTitle\" | \"menu.align\" | \"menu.alignBottom\" | \"menu.alignCenterHorizontal\" | \"menu.alignCenterVertical\" | \"menu.alignLeft\" | \"menu.alignRight\" | \"menu.alignTop\" | \"menu.bringToFront\" | \"menu.copy\" | \"menu.cut\" | \"menu.delete\" | \"menu.export\" | \"menu.exportAsPng\" | \"menu.exportAsSvg\" | \"menu.group\" | \"menu.import\" | \"menu.logout\" | \"menu.moveDown\" | \"menu.moveUp\" | \"menu.order\" | \"menu.paste\" | \"menu.selectAll\" | \"menu.sendToBack\" | \"menu.settings\" | \"menu.share\" | \"menu.ungroup\" | \"moreMenu.ariaLabel\" | \"settings.about.description\" | \"settings.about.title\" | \"settings.categories.about\" | \"settings.categories.developer\" | \"settings.categories.general\" | \"settings.categories.shortcuts\" | \"settings.categories.viewport\" | \"settings.developer.showMigrationInfo.description\" | \"settings.developer.showMigrationInfo.label\" | \"settings.developer.showObjectInfo.description\" | \"settings.developer.showObjectInfo.label\" | \"settings.developer.showSyncProviderInfo.description\" | \"settings.developer.showSyncProviderInfo.label\" | \"settings.developer.showViewportInfo.description\" | \"settings.developer.showViewportInfo.label\" | \"settings.developer.title\" | \"settings.dialogTitle\" | \"settings.general.language.description\" | \"settings.general.language.label\" | \"settings.general.lockDrawingScale.description\" | \"settings.general.lockDrawingScale.label\" | \"settings.general.theme.description\" | \"settings.general.theme.label\" | \"settings.general.title\" | \"settings.shortcuts.title\" | \"settings.viewport.boundaryBottom.description\" | \"settings.viewport.boundaryBottom.label\" | \"settings.viewport.boundaryLeft.description\" | \"settings.viewport.boundaryLeft.label\" | \"settings.viewport.boundaryPlaceholder\" | \"settings.viewport.boundaryRight.description\" | \"settings.viewport.boundaryRight.label\" | \"settings.viewport.boundaryTop.description\" | \"settings.viewport.boundaryTop.label\" | \"settings.viewport.maxZoom.description\" | \"settings.viewport.maxZoom.label\" | \"settings.viewport.minZoom.description\" | \"settings.viewport.minZoom.label\" | \"settings.viewport.title\" | \"share.copyLink.copied\" | \"share.copyLink.title\" | \"share.dialogTitle\" | \"share.linkSharing.disabledDescription\" | \"share.linkSharing.enabledDescription\" | \"share.linkSharing.label\" | \"share.linkSharing.toggleLabel\" | \"toolConfig.collapse\" | \"toolConfig.expand\" | \"utility.delete\" | \"utility.redo\" | \"utility.undo\" | \"watermark.poweredBy\" | \"workspace.delete\" | \"workspace.rename\" | \"workspace.sharedTooltip\" | \"zoom.zoomIn\" | \"zoom.zoomOut\" | string",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "KritzelTermKey": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::KritzelTermKey",
+                            "referenceLocation": "KritzelTermKey"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved localized strings keyed by term key, supplied by the editor."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            }
+        };
+    }
+}

package/dist/collection/components/kritzel-current-user-dialog/kritzel-current-user-dialog.css

@@ -0,0 +1,39 @@
+:host {
+  display: contents;
+}
+
+kritzel-dialog {
+  --kritzel-dialog-width-small: 380px;
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+}
+
+.user-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--kritzel-current-user-dialog-name-color, #333333);
+  text-align: center;
+  margin-top: 8px;
+}
+
+.user-email {
+  font-size: 14px;
+  color: var(--kritzel-current-user-dialog-email-color, #666666);
+  text-align: center;
+}
+
+.logout-button {
+  margin-top: 16px;
+  width: 100%;
+  --kritzel-button-width: 100%;
+  --kritzel-button-primary-background-color: var(--kritzel-current-user-dialog-logout-button-background-color, #007AFF);
+  --kritzel-button-primary-hover-background-color: var(--kritzel-current-user-dialog-logout-button-hover-background-color, #006ae6);
+  --kritzel-button-primary-active-background-color: var(--kritzel-current-user-dialog-logout-button-active-background-color, #005bbf);
+  --kritzel-button-primary-color: var(--kritzel-current-user-dialog-logout-button-color, #ffffff);
+}