kritzel-stencil 0.0.129 → 0.0.130

package/dist/stencil/stencil.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as t}from"./p-NiIEUDzj.js";export{s as setNonce}from"./p-NiIEUDzj.js";import{g as o}from"./p-DQuL1Twl.js";var n=()=>{const t=import.meta.url;const o={};if(t!==""){o.resourcesUrl=new URL(".",t).href}return e(o)};n().then((async e=>{await o();return t([["p-43202395",[[256,"kritzel-editor",{scaleMax:[2,"scale-max"],scaleMin:[2,"scale-min"],controls:[16],globalContextMenuItems:[16,"global-context-menu-items"],objectContextMenuItems:[16,"object-context-menu-items"],customSvgIcons:[16,"custom-svg-icons"],isControlsVisible:[4,"is-controls-visible"],isUtilityPanelVisible:[4,"is-utility-panel-visible"],isEngineReady:[32],isControlsReady:[32],isWorkspaceManagerReady:[32],workspaces:[32],activeWorkspace:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64]},[[0,"dblclick","handleTouchStart"]],{isEngineReady:["onIsEngineReady"],isControlsReady:["onIsControlsReady"]}],[257,"kritzel-controls",{controls:[16],activeControl:[1040,"active-control"],isUtilityPanelVisible:[4,"is-utility-panel-visible"],firstConfig:[32],isTooltipVisible:[32],isTouchDevice:[32],closeTooltip:[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[257,"kritzel-workspace-manager",{workspaces:[16],activeWorkspace:[1040,"active-workspace"],editingIndex:[32],newWorkspace:[32]}],[257,"kritzel-engine",{workspace:[16],activeTool:[16,"active-tool"],globalContextMenuItems:[16,"global-context-menu-items"],objectContextMenuItems:[16,"object-context-menu-items"],scaleMax:[1026,"scale-max"],scaleMin:[1026,"scale-min"],forceUpdate:[32],registerTool:[64],changeActiveTool:[64],setFocus:[64],disable:[64],enable:[64],delete:[64],copy:[64],paste:[64],bringForward:[64],sendBackward:[64],bringToFront:[64],sendToBack:[64],undo:[64],redo:[64],hideContextMenu:[64],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],getCopiedObjects:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[9,"mousedown","updateFocus"],[0,"click","handleClick"]],{workspace:["onWorkspaceChange"],scaleMax:["validateScaleMax"],scaleMin:["validateScaleMin"]}],[257,"kritzel-control-text-config",{tool:[1040],isExpanded:[1028,"is-expanded"]}],[257,"kritzel-control-brush-config",{tool:[1040],isExpanded:[1028,"is-expanded"],palette:[32]},null,{tool:["handleToolChange"]}],[257,"kritzel-split-button",{buttonText:[1,"button-text"],buttonIcon:[1,"button-icon"],dropdownIcon:[1,"dropdown-icon"],options:[16],disabled:[4],activeItemIndex:[2,"active-item-index"],editingIndex:[2,"editing-index"],isMenuOpen:[32],isTouchDevice:[32],openMenu:[64],closeMenu:[64]}],[257,"kritzel-context-menu",{items:[16],objects:[16],processedItems:[32]},null,{items:["onItemsChanged"]}],[257,"kritzel-utility-panel"],[257,"kritzel-cursor-trail",{store:[16],cursorTrailPoints:[32],isLeftButtonDown:[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[257,"kritzel-tooltip",{isVisible:[4,"is-visible"],anchorElement:[16,"anchor-element"],arrowSize:[2,"arrow-size"],offsetY:[2,"offset-y"],positionX:[32],arrowOffset:[32],isMobileView:[32]},[[9,"resize","handleWindowResize"]]],[257,"kritzel-brush-style",{type:[1],brushOptions:[16,"brush-options"]}],[257,"kritzel-font-family",{fontOptions:[16,"font-options"],selectedFontFamily:[1025,"selected-font-family"]}],[257,"kritzel-font-size",{sizes:[16],selectedSize:[1026,"selected-size"],fontFamily:[1,"font-family"]}],[257,"kritzel-stroke-size",{sizes:[16],selectedSize:[1026,"selected-size"]}],[257,"kritzel-menu",{items:[16],parentIndex:[2,"parent-index"],parent:[16],activeItemIndex:[2,"active-item-index"],editingIndex:[2,"editing-index"],openChildMenuIndex:[32],isTouchDevice:[32]},[[9,"pointerup","handleWindowClick"],[8,"keydown","handleEscape"],[8,"keydown","handleEnter"]],{editingIndex:["onEditingIndexChange"]}],[257,"kritzel-color-palette",{colors:[16],selectedColor:[1025,"selected-color"],isExpanded:[4,"is-expanded"],isOpaque:[4,"is-opaque"]}],[257,"kritzel-font",{fontFamily:[1,"font-family"],size:[2],color:[1]}],[257,"kritzel-portal",{anchor:[16],offsetX:[2,"offset-x"],offsetY:[2,"offset-y"],autoFocus:[4,"auto-focus"]},[[11,"resize","handleResize"]],{anchor:["anchorChanged"]}],[257,"kritzel-color",{value:[1],size:[2]}],[257,"kritzel-dropdown",{options:[16],value:[1],width:[1],selectStyles:[8,"select-styles"],internalValue:[32],hasSuffixContent:[32],hasPrefixContent:[32]},null,{value:["externalValueChanged"],options:["optionsChanged"]}],[257,"kritzel-icon",{name:[1],label:[1],size:[2]}]]]],e)}));
+import{p as e,b as t}from"./p-NiIEUDzj.js";export{s as setNonce}from"./p-NiIEUDzj.js";import{g as o}from"./p-DQuL1Twl.js";var n=()=>{const t=import.meta.url;const o={};if(t!==""){o.resourcesUrl=new URL(".",t).href}return e(o)};n().then((async e=>{await o();return t([["p-eebdbf65",[[256,"kritzel-editor",{scaleMax:[2,"scale-max"],scaleMin:[2,"scale-min"],controls:[16],globalContextMenuItems:[16,"global-context-menu-items"],objectContextMenuItems:[16,"object-context-menu-items"],customSvgIcons:[16,"custom-svg-icons"],isControlsVisible:[4,"is-controls-visible"],isUtilityPanelVisible:[4,"is-utility-panel-visible"],isEngineReady:[32],isControlsReady:[32],isWorkspaceManagerReady:[32],workspaces:[32],activeWorkspace:[32],isVirtualKeyboardOpen:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64]},[[0,"dblclick","handleTouchStart"]],{isEngineReady:["onIsEngineReady"],isControlsReady:["onIsControlsReady"]}],[257,"kritzel-controls",{controls:[16],activeControl:[1040,"active-control"],isUtilityPanelVisible:[4,"is-utility-panel-visible"],firstConfig:[32],isTooltipVisible:[32],isTouchDevice:[32],closeTooltip:[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[257,"kritzel-workspace-manager",{activeWorkspace:[16,"active-workspace"],workspaces:[16],childMenuAnchor:[32],openChildMenuItem:[32],newWorkspace:[32],editingItemId:[32]}],[257,"kritzel-engine",{workspace:[16],activeTool:[16,"active-tool"],globalContextMenuItems:[16,"global-context-menu-items"],objectContextMenuItems:[16,"object-context-menu-items"],scaleMax:[1026,"scale-max"],scaleMin:[1026,"scale-min"],forceUpdate:[32],registerTool:[64],changeActiveTool:[64],setFocus:[64],disable:[64],enable:[64],delete:[64],copy:[64],paste:[64],bringForward:[64],sendBackward:[64],bringToFront:[64],sendToBack:[64],undo:[64],redo:[64],hideContextMenu:[64],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],getCopiedObjects:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[9,"mousedown","updateFocus"],[0,"click","handleClick"]],{workspace:["onWorkspaceChange"],scaleMax:["validateScaleMax"],scaleMin:["validateScaleMin"]}],[257,"kritzel-control-text-config",{tool:[1040],isExpanded:[1028,"is-expanded"]}],[257,"kritzel-control-brush-config",{tool:[1040],isExpanded:[1028,"is-expanded"],palette:[32]},null,{tool:["handleToolChange"]}],[257,"kritzel-split-button",{buttonIcon:[1,"button-icon"],dropdownIcon:[1,"dropdown-icon"],items:[16],mainButtonDisabled:[4,"main-button-disabled"],menuButtonDisabled:[4,"menu-button-disabled"],isMenuOpen:[32],isTouchDevice:[32],anchorElement:[32],open:[64]}],[257,"kritzel-context-menu",{items:[16],objects:[16],processedItems:[32]},null,{items:["onItemsChanged"]}],[257,"kritzel-utility-panel"],[257,"kritzel-cursor-trail",{store:[16],cursorTrailPoints:[32],isLeftButtonDown:[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[257,"kritzel-tooltip",{isVisible:[4,"is-visible"],anchorElement:[16,"anchor-element"],arrowSize:[2,"arrow-size"],offsetY:[2,"offset-y"],positionX:[32],arrowOffset:[32],isMobileView:[32]},[[9,"resize","handleWindowResize"]]],[257,"kritzel-brush-style",{type:[1],brushOptions:[16,"brush-options"]}],[257,"kritzel-font-family",{fontOptions:[16,"font-options"],selectedFontFamily:[1025,"selected-font-family"]}],[257,"kritzel-font-size",{sizes:[16],selectedSize:[1026,"selected-size"],fontFamily:[1,"font-family"]}],[257,"kritzel-stroke-size",{sizes:[16],selectedSize:[1026,"selected-size"]}],[257,"kritzel-color-palette",{colors:[16],selectedColor:[1025,"selected-color"],isExpanded:[4,"is-expanded"],isOpaque:[4,"is-opaque"]}],[257,"kritzel-font",{fontFamily:[1,"font-family"],size:[2],color:[1]}],[257,"kritzel-menu",{items:[16],parent:[16],selectedIndex:[32],setFocus:[64]}],[257,"kritzel-menu-item",{item:[16],parent:[16],isDirty:[32]},null,{item:["onItemChange"]}],[257,"kritzel-portal",{anchor:[16],offsetX:[2,"offset-x"],offsetY:[2,"offset-y"],autoFocus:[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"]],{anchor:["anchorChanged"]}],[257,"kritzel-color",{value:[1],size:[2]}],[257,"kritzel-dropdown",{options:[16],value:[1],width:[1],selectStyles:[8,"select-styles"],internalValue:[32],hasSuffixContent:[32],hasPrefixContent:[32]},null,{value:["externalValueChanged"],options:["optionsChanged"]}],[257,"kritzel-icon",{name:[1],label:[1],size:[2]}]]]],e)}));
 //# sourceMappingURL=stencil.esm.js.map

package/dist/types/classes/structures/object-map.structure.d.ts

@@ -0,0 +1,11 @@
+import { KritzelBaseObject } from '../objects/base-object.class';
+export declare class KritzelObjectMap<T extends KritzelBaseObject<any>> {
+    private map;
+    constructor();
+    reset(): void;
+    insert(object: T): boolean;
+    update(object: T): boolean;
+    remove(predicate: (object: T) => boolean): void;
+    filter(predicate: (object: T) => boolean): T[];
+    allObjects(): T[];
+}

package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts

@@ -20,6 +20,7 @@ export declare class KritzelEditor {
     isWorkspaceManagerReady: boolean;
     workspaces: KritzelWorkspace[];
     activeWorkspace: KritzelWorkspace;
+    isVirtualKeyboardOpen: boolean;
     onIsEngineReady(newValue: boolean): void;
     onIsControlsReady(newValue: boolean): void;
     getObjectById<T extends KritzelBaseObject>(id: string): Promise<T | null>;
@@ -34,9 +35,11 @@ export declare class KritzelEditor {
     handleTouchStart(event: MouseEvent): void;
     engineRef: HTMLKritzelEngineElement;
     controlsRef: HTMLKritzelControlsElement;
+    splitButtonRef: HTMLKritzelSplitButtonElement;
     componentDidLoad(): void;
     checkIsReady(): Promise<void>;
     onEngineReady(event: CustomEvent<KritzelEngineState>): void;
     private registerCustomSvgIcons;
+    private listenForMobileKeyboard;
     render(): any;
 }

package/dist/types/components/shared/kritzel-menu/kritzel-menu.d.ts

@@ -1,26 +1,24 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { KritzelMenuItem } from '../../../interfaces/menu-item.interface';
+import { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';
 export declare class KritzelMenu {
     host: HTMLElement;
-    items: KritzelMenuItem[];
-    parentIndex: number | null;
-    parent: KritzelMenuItem;
-    activeItemIndex: number | null;
-    editingIndex: number | null;
+    items: IKritzelMenuItem[];
+    parent: IKritzelMenuItem;
+    itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;
+    itemSave: EventEmitter<IKritzelMenuItem>;
+    itemCancel: EventEmitter<IKritzelMenuItem>;
+    itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;
+    itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;
     close: EventEmitter<void>;
-    openChildMenuIndex: number | null;
-    isTouchDevice: boolean;
-    private editInput?;
-    private childMenuAnchor?;
-    private childMenu?;
-    private cancelButton?;
-    private saveButton?;
-    onEditingIndexChange(newValue: number | null): void;
-    handleWindowClick(event: PointerEvent): void;
-    handleEscape(event: KeyboardEvent): void;
-    handleEnter(event: KeyboardEvent): void;
-    componentDidLoad(): void;
-    isViewMode(index: number): boolean;
-    handleSelect(item: KritzelMenuItem): void;
+    selectedIndex: number | null;
+    setFocus(): Promise<void>;
+    get openChildMenuItem(): IKritzelMenuItem<any>;
+    get editingMenuItem(): IKritzelMenuItem<any>;
+    private onOverlayClick;
+    private handleItemSelect;
+    private handleSave;
+    private handleCancel;
+    private handleToggleChildMenu;
+    private handleCloseChildMenu;
     render(): any;
 }

package/dist/types/components/shared/kritzel-menu-item/kritzel-menu-item.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';
+export declare class KritzelMenuItem {
+    host: HTMLElement;
+    item: IKritzelMenuItem;
+    onItemChange(newValue: IKritzelMenuItem, oldValue: IKritzelMenuItem): void;
+    parent: IKritzelMenuItem;
+    itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;
+    itemSave: EventEmitter<IKritzelMenuItem>;
+    itemCancel: EventEmitter<IKritzelMenuItem>;
+    itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;
+    itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;
+    isDirty: boolean;
+    private inputRef;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    private handleItemSelect;
+    private handleInputChange;
+    private handleSave;
+    private handleCancel;
+    private handleMenuToggle;
+    private handleMenuClose;
+    private renderViewMode;
+    private renderEditMode;
+    render(): any;
+}

package/dist/types/components/shared/kritzel-portal/kritzel-portal.d.ts

@@ -1,24 +1,29 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class KritzelPortal {
+    host: HTMLElement;
     anchor: HTMLElement;
     anchorChanged(newValue: HTMLElement): void;
     offsetX: number;
     offsetY: number;
     autoFocus: boolean;
     close: EventEmitter<void>;
-    private portal;
-    private element;
-    private moved;
-    private scrollableParent;
+    handleOutsideClick(event: MouseEvent): void;
+    handleKeyDown(event: KeyboardEvent): void;
     handleResize(): void;
-    private handleScroll;
+    private portal;
+    private id;
+    private defaultOffset;
+    private minLeft;
+    private focusFirstElement;
+    private getDeepActiveElement;
+    private trapFocus;
+    private getFocusableElements;
+    private get firstFocusableElement();
+    private get lastAddedPortal();
     private calculateLeft;
     private calculateTop;
-    private createPortal;
-    private moveElementToPortal;
+    private openPortal;
+    private closePortal;
     private calculatePosition;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
-    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/shared/kritzel-split-button/kritzel-split-button.d.ts

@@ -1,25 +1,33 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { KritzelMenuItem } from '../../../interfaces/menu-item.interface';
+import { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';
 export declare class KritzelSplitButton {
-    buttonText: string;
+    host: HTMLElement;
     buttonIcon: string;
     dropdownIcon: string;
-    options: KritzelMenuItem[];
-    disabled: boolean;
-    activeItemIndex: number | null;
-    editingIndex: number | null;
+    items: IKritzelMenuItem[];
+    mainButtonDisabled: boolean;
+    menuButtonDisabled: boolean;
     buttonClick: EventEmitter<void>;
-    optionSelect: EventEmitter<KritzelMenuItem>;
-    menuOpened: EventEmitter<void>;
-    menuClosed: EventEmitter<void>;
-    host: HTMLElement;
+    itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;
+    itemSave: EventEmitter<IKritzelMenuItem>;
+    itemCancel: EventEmitter<IKritzelMenuItem>;
+    itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;
+    itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;
+    close: EventEmitter<void>;
     isMenuOpen: boolean;
     isTouchDevice: boolean;
-    splitMenuButton: HTMLButtonElement;
-    openMenu(): Promise<void>;
-    closeMenu(): Promise<void>;
-    private handleDocumentClick;
-    private toggleMenu;
+    anchorElement: HTMLElement;
+    splitMenuButtonRef: HTMLButtonElement;
+    menuRef: HTMLKritzelMenuElement;
+    open(): Promise<void>;
     private handleButtonClick;
+    private toggleMenu;
+    private openMenu;
+    private closeMenu;
+    private handleItemSelect;
+    private handleItemSave;
+    private handleItemCancel;
+    private handleItemToggleChildMenu;
+    private handleItemCloseChildMenu;
     render(): any;
 }

package/dist/types/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.d.ts

@@ -1,25 +1,29 @@
-import { EventEmitter } from '../../../stencil-public-runtime';
 import { KritzelWorkspace } from '../../../classes/workspace.class';
+import { IKritzelMenuItem } from '../../../interfaces/menu-item.interface';
+import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class KritzelWorkspaceManager {
-    workspaces: KritzelWorkspace[];
+    host: HTMLElement;
     activeWorkspace: KritzelWorkspace;
-    editingIndex: number | null;
-    newWorkspace: KritzelWorkspace | null;
+    workspaces: KritzelWorkspace[];
     isWorkspaceManagerReady: EventEmitter<void>;
     workspaceChange: EventEmitter<KritzelWorkspace>;
-    host: HTMLElement;
-    kritzelEngine: HTMLKritzelEngineElement | null;
+    childMenuAnchor: HTMLElement;
+    openChildMenuItem: IKritzelMenuItem;
+    newWorkspace: KritzelWorkspace | null;
+    editingItemId: string | null;
+    kritzelEngineRef: HTMLKritzelEngineElement | null;
     splitButtonRef: HTMLKritzelSplitButtonElement;
     get sortedWorkspaces(): KritzelWorkspace[];
-    get activeItemIndex(): number;
     componentWillLoad(): Promise<void>;
     private initializeEngine;
-    private handleSelect;
-    private handleNewWorkspace;
-    private handleMenuClosed;
-    private handleSave;
-    private handleRename;
-    private handleDelete;
-    private selectWorkspace;
+    private select;
+    private add;
+    private edit;
+    private save;
+    private cancel;
+    private delete;
+    private toggleChildMenu;
+    private closeChildMenu;
+    private closeMenu;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -18,7 +18,7 @@ import { KritzelTool } from "./interfaces/tool.interface";
 import { KritzelEngineState } from "./interfaces/engine-state.interface";
 import { KritzelBaseTool } from "./classes/tools/base-tool.class";
 import { FontOption } from "./components/shared/kritzel-font-family/kritzel-font-family";
-import { KritzelMenuItem } from "./interfaces/menu-item.interface";
+import { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from "./interfaces/menu-item.interface";
 export { BrushStyleOption } from "./components/shared/kritzel-brush-style/kritzel-brush-style";
 export { ContextMenuItem } from "./interfaces/context-menu-item.interface";
 export { KritzelBaseObject } from "./classes/objects/base-object.class";
@@ -32,7 +32,7 @@ export { KritzelTool } from "./interfaces/tool.interface";
 export { KritzelEngineState } from "./interfaces/engine-state.interface";
 export { KritzelBaseTool } from "./classes/tools/base-tool.class";
 export { FontOption } from "./components/shared/kritzel-font-family/kritzel-font-family";
-export { KritzelMenuItem } from "./interfaces/menu-item.interface";
+export { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from "./interfaces/menu-item.interface";
 export namespace Components {
     interface KritzelBrushStyle {
         /**
@@ -247,26 +247,19 @@ export namespace Components {
         "size": number;
     }
     interface KritzelMenu {
+        "items": IKritzelMenuItem[];
         /**
           * @default null
          */
-        "activeItemIndex": number | null;
-        /**
-          * @default null
-         */
-        "editingIndex": number | null;
-        /**
-          * @default []
-         */
-        "items": KritzelMenuItem[];
-        /**
-          * @default null
-         */
-        "parent": KritzelMenuItem;
+        "parent": IKritzelMenuItem;
+        "setFocus": () => Promise<void>;
+    }
+    interface KritzelMenuItem {
+        "item": IKritzelMenuItem;
         /**
           * @default null
          */
-        "parentIndex": number | null;
+        "parent": IKritzelMenuItem;
     }
     interface KritzelPortal {
         "anchor": HTMLElement;
@@ -279,29 +272,26 @@ export namespace Components {
     }
     interface KritzelSplitButton {
         /**
-          * @default null
+          * @default 'plus'
          */
-        "activeItemIndex": number | null;
         "buttonIcon": string;
-        "buttonText": string;
-        "closeMenu": () => Promise<void>;
-        /**
-          * @default false
-         */
-        "disabled": boolean;
         /**
           * @default 'chevron-down'
          */
         "dropdownIcon": string;
         /**
-          * @default null
+          * @default []
          */
-        "editingIndex": number | null;
-        "openMenu": () => Promise<void>;
+        "items": IKritzelMenuItem[];
         /**
-          * @default []
+          * @default false
+         */
+        "mainButtonDisabled": boolean;
+        /**
+          * @default false
          */
-        "options": KritzelMenuItem[];
+        "menuButtonDisabled": boolean;
+        "open": () => Promise<void>;
     }
     interface KritzelStrokeSize {
         /**
@@ -386,6 +376,10 @@ export interface KritzelMenuCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLKritzelMenuElement;
 }
+export interface KritzelMenuItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKritzelMenuItemElement;
+}
 export interface KritzelPortalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLKritzelPortalElement;
@@ -621,6 +615,11 @@ declare global {
         new (): HTMLKritzelIconElement;
     };
     interface HTMLKritzelMenuElementEventMap {
+        "itemSelect": IKritzelMenuItemSelectEvent;
+        "itemSave": IKritzelMenuItem;
+        "itemCancel": IKritzelMenuItem;
+        "itemToggleChildMenu": IKritzelMenuItemToggleChildMenuEvent;
+        "itemCloseChildMenu": IKritzelMenuItem;
         "close": void;
     }
     interface HTMLKritzelMenuElement extends Components.KritzelMenu, HTMLStencilElement {
@@ -637,6 +636,27 @@ declare global {
         prototype: HTMLKritzelMenuElement;
         new (): HTMLKritzelMenuElement;
     };
+    interface HTMLKritzelMenuItemElementEventMap {
+        "itemSelect": IKritzelMenuItemSelectEvent;
+        "itemSave": IKritzelMenuItem;
+        "itemCancel": IKritzelMenuItem;
+        "itemToggleChildMenu": IKritzelMenuItemToggleChildMenuEvent;
+        "itemCloseChildMenu": IKritzelMenuItem;
+    }
+    interface HTMLKritzelMenuItemElement extends Components.KritzelMenuItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLKritzelMenuItemElementEventMap>(type: K, listener: (this: HTMLKritzelMenuItemElement, ev: KritzelMenuItemCustomEvent<HTMLKritzelMenuItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLKritzelMenuItemElementEventMap>(type: K, listener: (this: HTMLKritzelMenuItemElement, ev: KritzelMenuItemCustomEvent<HTMLKritzelMenuItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLKritzelMenuItemElement: {
+        prototype: HTMLKritzelMenuItemElement;
+        new (): HTMLKritzelMenuItemElement;
+    };
     interface HTMLKritzelPortalElementEventMap {
         "close": void;
     }
@@ -656,9 +676,12 @@ declare global {
     };
     interface HTMLKritzelSplitButtonElementEventMap {
         "buttonClick": void;
-        "optionSelect": KritzelMenuItem;
-        "menuOpened": void;
-        "menuClosed": void;
+        "itemSelect": IKritzelMenuItemSelectEvent;
+        "itemSave": IKritzelMenuItem;
+        "itemCancel": IKritzelMenuItem;
+        "itemToggleChildMenu": IKritzelMenuItemToggleChildMenuEvent;
+        "itemCloseChildMenu": IKritzelMenuItem;
+        "close": void;
     }
     interface HTMLKritzelSplitButtonElement extends Components.KritzelSplitButton, HTMLStencilElement {
         addEventListener<K extends keyof HTMLKritzelSplitButtonElementEventMap>(type: K, listener: (this: HTMLKritzelSplitButtonElement, ev: KritzelSplitButtonCustomEvent<HTMLKritzelSplitButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -751,6 +774,7 @@ declare global {
         "kritzel-font-size": HTMLKritzelFontSizeElement;
         "kritzel-icon": HTMLKritzelIconElement;
         "kritzel-menu": HTMLKritzelMenuElement;
+        "kritzel-menu-item": HTMLKritzelMenuItemElement;
         "kritzel-portal": HTMLKritzelPortalElement;
         "kritzel-split-button": HTMLKritzelSplitButtonElement;
         "kritzel-stroke-size": HTMLKritzelStrokeSizeElement;
@@ -947,27 +971,29 @@ declare namespace LocalJSX {
         "size"?: number;
     }
     interface KritzelMenu {
-        /**
-          * @default null
-         */
-        "activeItemIndex"?: number | null;
-        /**
-          * @default null
-         */
-        "editingIndex"?: number | null;
-        /**
-          * @default []
-         */
-        "items"?: KritzelMenuItem[];
+        "items"?: IKritzelMenuItem[];
         "onClose"?: (event: KritzelMenuCustomEvent<void>) => void;
+        "onItemCancel"?: (event: KritzelMenuCustomEvent<IKritzelMenuItem>) => void;
+        "onItemCloseChildMenu"?: (event: KritzelMenuCustomEvent<IKritzelMenuItem>) => void;
+        "onItemSave"?: (event: KritzelMenuCustomEvent<IKritzelMenuItem>) => void;
+        "onItemSelect"?: (event: KritzelMenuCustomEvent<IKritzelMenuItemSelectEvent>) => void;
+        "onItemToggleChildMenu"?: (event: KritzelMenuCustomEvent<IKritzelMenuItemToggleChildMenuEvent>) => void;
         /**
           * @default null
          */
-        "parent"?: KritzelMenuItem;
+        "parent"?: IKritzelMenuItem;
+    }
+    interface KritzelMenuItem {
+        "item"?: IKritzelMenuItem;
+        "onItemCancel"?: (event: KritzelMenuItemCustomEvent<IKritzelMenuItem>) => void;
+        "onItemCloseChildMenu"?: (event: KritzelMenuItemCustomEvent<IKritzelMenuItem>) => void;
+        "onItemSave"?: (event: KritzelMenuItemCustomEvent<IKritzelMenuItem>) => void;
+        "onItemSelect"?: (event: KritzelMenuItemCustomEvent<IKritzelMenuItemSelectEvent>) => void;
+        "onItemToggleChildMenu"?: (event: KritzelMenuItemCustomEvent<IKritzelMenuItemToggleChildMenuEvent>) => void;
         /**
           * @default null
          */
-        "parentIndex"?: number | null;
+        "parent"?: IKritzelMenuItem;
     }
     interface KritzelPortal {
         "anchor"?: HTMLElement;
@@ -981,31 +1007,32 @@ declare namespace LocalJSX {
     }
     interface KritzelSplitButton {
         /**
-          * @default null
+          * @default 'plus'
          */
-        "activeItemIndex"?: number | null;
         "buttonIcon"?: string;
-        "buttonText"?: string;
-        /**
-          * @default false
-         */
-        "disabled"?: boolean;
         /**
           * @default 'chevron-down'
          */
         "dropdownIcon"?: string;
         /**
-          * @default null
+          * @default []
          */
-        "editingIndex"?: number | null;
-        "onButtonClick"?: (event: KritzelSplitButtonCustomEvent<void>) => void;
-        "onMenuClosed"?: (event: KritzelSplitButtonCustomEvent<void>) => void;
-        "onMenuOpened"?: (event: KritzelSplitButtonCustomEvent<void>) => void;
-        "onOptionSelect"?: (event: KritzelSplitButtonCustomEvent<KritzelMenuItem>) => void;
+        "items"?: IKritzelMenuItem[];
         /**
-          * @default []
+          * @default false
          */
-        "options"?: KritzelMenuItem[];
+        "mainButtonDisabled"?: boolean;
+        /**
+          * @default false
+         */
+        "menuButtonDisabled"?: boolean;
+        "onButtonClick"?: (event: KritzelSplitButtonCustomEvent<void>) => void;
+        "onClose"?: (event: KritzelSplitButtonCustomEvent<void>) => void;
+        "onItemCancel"?: (event: KritzelSplitButtonCustomEvent<IKritzelMenuItem>) => void;
+        "onItemCloseChildMenu"?: (event: KritzelSplitButtonCustomEvent<IKritzelMenuItem>) => void;
+        "onItemSave"?: (event: KritzelSplitButtonCustomEvent<IKritzelMenuItem>) => void;
+        "onItemSelect"?: (event: KritzelSplitButtonCustomEvent<IKritzelMenuItemSelectEvent>) => void;
+        "onItemToggleChildMenu"?: (event: KritzelSplitButtonCustomEvent<IKritzelMenuItemToggleChildMenuEvent>) => void;
     }
     interface KritzelStrokeSize {
         "onSizeChange"?: (event: KritzelStrokeSizeCustomEvent<number>) => void;
@@ -1064,6 +1091,7 @@ declare namespace LocalJSX {
         "kritzel-font-size": KritzelFontSize;
         "kritzel-icon": KritzelIcon;
         "kritzel-menu": KritzelMenu;
+        "kritzel-menu-item": KritzelMenuItem;
         "kritzel-portal": KritzelPortal;
         "kritzel-split-button": KritzelSplitButton;
         "kritzel-stroke-size": KritzelStrokeSize;
@@ -1092,6 +1120,7 @@ declare module "@stencil/core" {
             "kritzel-font-size": LocalJSX.KritzelFontSize & JSXBase.HTMLAttributes<HTMLKritzelFontSizeElement>;
             "kritzel-icon": LocalJSX.KritzelIcon & JSXBase.HTMLAttributes<HTMLKritzelIconElement>;
             "kritzel-menu": LocalJSX.KritzelMenu & JSXBase.HTMLAttributes<HTMLKritzelMenuElement>;
+            "kritzel-menu-item": LocalJSX.KritzelMenuItem & JSXBase.HTMLAttributes<HTMLKritzelMenuItemElement>;
             "kritzel-portal": LocalJSX.KritzelPortal & JSXBase.HTMLAttributes<HTMLKritzelPortalElement>;
             "kritzel-split-button": LocalJSX.KritzelSplitButton & JSXBase.HTMLAttributes<HTMLKritzelSplitButtonElement>;
             "kritzel-stroke-size": LocalJSX.KritzelStrokeSize & JSXBase.HTMLAttributes<HTMLKritzelStrokeSizeElement>;

package/dist/types/helpers/keyboard.helper.d.ts

@@ -2,4 +2,5 @@ export declare class KritzelKeyboardHelper {
     static forceHideKeyboard(): void;
     static enableInteractiveWidget(): void;
     static disableInteractiveWidget(): void;
+    static onKeyboardVisibleChanged(callback: (isOpen: boolean) => void): () => void;
 }

package/dist/types/index.d.ts

@@ -17,5 +17,6 @@ export * from './classes/tools/image-tool.class';
 export * from './classes/tools/text-tool.class';
 export * from './classes/tools/selection-tool.class';
 export * from './interfaces/toolbar-control.interface';
+export * from './interfaces/menu-item.interface';
 export * from './configs/default-brush-tool.config';
 export * from './configs/default-text-tool.config';

package/dist/types/interfaces/engine-state.interface.d.ts

@@ -3,7 +3,7 @@ import { KritzelPath } from "../classes/objects/path.class";
 import { KrtizelSelectionBox } from "../classes/objects/selection-box.class";
 import { KritzelSelectionGroup } from "../classes/objects/selection-group.class";
 import { KritzelText } from "../classes/objects/text.class";
-import { KritzelOctree } from "../classes/structures/octree.structure";
+import { KritzelObjectMap } from "../classes/structures/object-map.structure";
 import { KritzelBaseTool } from "../classes/tools/base-tool.class";
 import { KritzelWorkspace } from "../classes/workspace.class";
 import { KritzelHandleType } from "../enums/handle-type.enum";
@@ -15,7 +15,7 @@ export interface KritzelEngineState {
     activeText: KritzelText;
     currentPath?: KritzelPath;
     copiedObjects?: KritzelSelectionGroup;
-    objectsOctree: KritzelOctree<KritzelBaseObject<Element>>;
+    objectsMap: KritzelObjectMap<KritzelBaseObject<Element>>;
     selectionBox?: KrtizelSelectionBox;
     selectionGroup?: KritzelSelectionGroup;
     resizeHandleType: KritzelHandleType;

package/dist/types/interfaces/menu-item.interface.d.ts

@@ -1,9 +1,23 @@
-export interface KritzelMenuItem<T = any> {
-    value: T;
+export interface IKritzelMenuItem<T = any> {
+    id: string;
     label: string;
-    select?: (item: KritzelMenuItem) => void;
-    save?: (item: KritzelMenuItem) => void;
-    cancel?: (item: KritzelMenuItem) => void;
-    disabled?: boolean;
-    children?: KritzelMenuItem[];
+    value?: T;
+    children?: IKritzelMenuItem[];
+    isSelectable?: boolean;
+    isSelected?: boolean;
+    isEditing?: boolean;
+    isDisabled?: boolean;
+    isChildMenuOpen?: boolean;
+    isNewItem?: boolean;
+    childMenuAnchor?: HTMLElement;
+    unchangedState?: Partial<IKritzelMenuItem>;
+    action?: (item: IKritzelMenuItem, parent: IKritzelMenuItem) => void;
+}
+export interface IKritzelMenuItemSelectEvent {
+    item: IKritzelMenuItem;
+    parent: IKritzelMenuItem;
+}
+export interface IKritzelMenuItemToggleChildMenuEvent {
+    item: IKritzelMenuItem;
+    childMenuAnchor: HTMLElement;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kritzel-stencil",
-  "version": "0.0.129",
+  "version": "0.0.130",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",