kritzel-stencil 0.0.119 → 0.0.121

package/dist/stencil/stencil.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as t}from"./p-CGHvfMWF.js";export{s as setNonce}from"./p-CGHvfMWF.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-6c35ba88",[[0,"kritzel-editor",{controls:[16],customSvgIcons:[16,"custom-svg-icons"],hideControls:[4,"hide-controls"],isEngineReady:[32],isControlsReady:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64]},[[0,"dblclick","handleTouchStart"],[8,"keydown","handleKeyDown"]],{isEngineReady:["onIsEngineReady"],isControlsReady:["onIsControlsReady"]}],[1,"kritzel-controls",{controls:[16],activeControl:[1040,"active-control"],firstConfig:[32],tooltipVisible:[32],isTouchDevice:[32],closeTooltip:[64]},[[4,"activeToolChange","handleActiveToolChange"],[4,"click","handleClick"]]],[1,"kritzel-engine",{activeTool:[16,"active-tool"],globalContextMenuItems:[16,"global-context-menu-items"],objectContextMenuItems:[16,"object-context-menu-items"],forceUpdate:[32],registerTool:[64],changeActiveTool:[64],setFocus:[64],disable:[64],enable:[64],delete:[64],copy:[64],paste:[64],bringForward:[64],sendBackward:[64],moveToTop:[64],moveToBottom:[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]},[[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"]]],[1,"kritzel-control-text-config",{tool:[1040],isExpanded:[1028,"is-expanded"]}],[1,"kritzel-control-brush-config",{tool:[1040],isExpanded:[1028,"is-expanded"],palette:[32]},null,{tool:["handleToolChange"]}],[1,"kritzel-context-menu",{items:[16]}],[1,"kritzel-utility-panel"],[1,"kritzel-cursor-trail",{store:[16],cursorTrailPoints:[32],isLeftButtonDown:[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[1,"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"]]],[1,"kritzel-brush-style",{type:[1],brushOptions:[16,"brush-options"]}],[1,"kritzel-font-family",{fontOptions:[16,"font-options"],selectedFontFamily:[1025,"selected-font-family"]}],[1,"kritzel-font-size",{sizes:[16],selectedSize:[1026,"selected-size"],fontFamily:[1,"font-family"]}],[1,"kritzel-stroke-size",{sizes:[16],selectedSize:[1026,"selected-size"]}],[1,"kritzel-color-palette",{colors:[16],selectedColor:[1025,"selected-color"],isExpanded:[4,"is-expanded"],isOpaque:[4,"is-opaque"]}],[1,"kritzel-font",{fontFamily:[1,"font-family"],size:[2],color:[1]}],[1,"kritzel-color",{value:[1],size:[2]}],[1,"kritzel-dropdown",{options:[16],value:[1],width:[1],selectStyles:[8,"select-styles"],internalValue:[32],hasSuffixContent:[32],hasPrefixContent:[32]},null,{value:["externalValueChanged"],options:["optionsChanged"]}],[1,"kritzel-icon",{name:[1],label:[1],size:[2]}]]]],e)}));
+import{p as e,b as t}from"./p-BPFXWTBp.js";export{s as setNonce}from"./p-BPFXWTBp.js";import{g as o}from"./p-DQuL1Twl.js";var i=()=>{const t=import.meta.url;const o={};if(t!==""){o.resourcesUrl=new URL(".",t).href}return e(o)};i().then((async e=>{await o();return t([["p-3797c300",[[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],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64]},[[0,"dblclick","handleTouchStart"],[8,"keydown","handleKeyDown"]],{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,"activeToolChange","handleActiveToolChange"],[4,"click","handleClick"]]],[257,"kritzel-engine",{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],moveToTop:[64],moveToBottom:[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]},[[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"]],{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-context-menu",{items:[16],objects:[16],disabledStates:[32],visibleItems:[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-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/stencil/stencil.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"stencil.esm.js","sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.35.3 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":[],"mappings":";;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC","x_google_ignoreList":[0]}
+{"version":3,"file":"stencil.esm.js","sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.36.1 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":[],"mappings":";;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC","x_google_ignoreList":[0]}

package/dist/types/classes/objects/base-object.class.d.ts

@@ -3,7 +3,7 @@ import { KritzelObject } from '../../interfaces/object.interface';
 import { KritzelPolygon } from '../../interfaces/polygon.interface';
 import { KritzelSerializable } from '../../interfaces/serializable.interface';
 import { KritzelStore } from '../store.class';
-export declare class KritzelBaseObject<T extends Element = HTMLElement> implements KritzelObject<T>, KritzelSerializable {
+export declare class KritzelBaseObject<T extends Element = HTMLElement | SVGElement> implements KritzelObject<T>, KritzelSerializable {
     __class__: string;
     id: string;
     visible: boolean;
@@ -25,6 +25,7 @@ export declare class KritzelBaseObject<T extends Element = HTMLElement> implemen
     markedForRemoval: boolean;
     isMounted: boolean;
     zIndex: number;
+    isEditable: boolean;
     debugInfoVisible: boolean;
     _store: KritzelStore;
     _elementRef: T;
@@ -56,4 +57,5 @@ export declare class KritzelBaseObject<T extends Element = HTMLElement> implemen
     onSelectedClick(): void;
     revive(object: any): KritzelBaseObject<T>;
     isClass<T extends KritzelBaseObject>(this: T, className: string): this is T;
+    edit(): void;
 }

package/dist/types/classes/objects/image.class.d.ts

@@ -3,7 +3,15 @@ import { KritzelBaseObject } from './base-object.class';
 export declare class KritzelImage extends KritzelBaseObject<HTMLImageElement> {
     __class__: string;
     src: string;
+    maxWidth: number;
+    maxHeight: number;
+    maxCompressionSize: number;
     debugInfoVisible: boolean;
+    constructor(config?: Partial<KritzelImage>);
     static create(store: KritzelStore): KritzelImage;
     resize(x: number, y: number, width: number, height: number): void;
+    calculateScaledDimensions(img: HTMLImageElement): {
+        scaledWidth: number;
+        scaledHeight: number;
+    };
 }

package/dist/types/classes/objects/path.class.d.ts

@@ -20,6 +20,15 @@ export declare class KritzelPath extends KritzelBaseObject<SVGElement> {
     options: KritzelPathOptions | undefined;
     debugInfoVisible: boolean;
     get viewBox(): string;
+    constructor(config?: {
+        points: number[][];
+        translateX?: number;
+        translateY?: number;
+        scale?: number;
+        strokeWidth?: number;
+        fill?: string;
+        lineSlack?: number;
+    });
     static create(store: KritzelStore, options?: KritzelPathOptions): KritzelPath;
     resize(x: number | null, y: number | null, width: number, height: number): void;
     rotate(value: number): void;

package/dist/types/classes/objects/text.class.d.ts

@@ -9,6 +9,7 @@ export declare class KritzelText extends KritzelBaseObject<HTMLTextAreaElement>
     initialWidth: number;
     isNew: boolean;
     debugInfoVisible: boolean;
+    isEditable: boolean;
     readonly rows: number;
     get isReadonly(): boolean;
     constructor(config?: {
@@ -31,5 +32,5 @@ export declare class KritzelText extends KritzelBaseObject<HTMLTextAreaElement>
     focus(): void;
     selectAll(): void;
     insertFromClipboard(): void;
-    onSelectedClick(): void;
+    edit(): void;
 }

package/dist/types/classes/store.class.d.ts

@@ -34,5 +34,5 @@ export declare class KritzelStore {
     selectAllObjectsInViewport(): void;
     clearSelection(): void;
     resetActiveText(): void;
-    getObjectFromPointerEvent(event: TouchEvent | MouseEvent, selector?: string): KritzelBaseObject<any> | null;
+    getObjectFromPointerEvent(event: PointerEvent, selector?: string): KritzelBaseObject<any> | null;
 }

package/dist/types/classes/tools/image-tool.class.d.ts

@@ -2,8 +2,6 @@ import { KritzelStore } from '../store.class';
 import { KritzelBaseTool } from './base-tool.class';
 export declare class KritzelImageTool extends KritzelBaseTool {
     fileInput: HTMLInputElement | null;
-    maxWidth: number;
-    maxHeight: number;
     maxCompressionSize: number;
     constructor(store: KritzelStore);
     onActivate(): void;
@@ -11,8 +9,6 @@ export declare class KritzelImageTool extends KritzelBaseTool {
     private setupFileInput;
     private handleFileSelect;
     private readFile;
-    private processImage;
-    private calculateScaledDimensions;
     private createKritzelImage;
     private addImageToStore;
     private handleCancel;

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

@@ -1,10 +1,16 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';
 import { KritzelBaseObject } from '../../../classes/objects/base-object.class';
+import { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';
 export declare class KritzelEditor {
+    scaleMax: number;
+    scaleMin: number;
     controls: KritzelToolbarControl[];
+    globalContextMenuItems: ContextMenuItem[];
+    objectContextMenuItems: ContextMenuItem[];
     customSvgIcons: Record<string, string>;
-    hideControls: boolean;
+    isControlsVisible: boolean;
+    isUtilityPanelVisible: boolean;
     isReady: EventEmitter<HTMLElement>;
     host: HTMLElement;
     isEngineReady: boolean;
@@ -19,8 +25,8 @@ export declare class KritzelEditor {
     selectObjects(objects: KritzelBaseObject[]): Promise<void>;
     selectAllObjectsInViewport(): Promise<void>;
     clearSelection(): Promise<void>;
-    centerObjectInViewport(object: KritzelBaseObject): Promise<KritzelBaseObject<HTMLElement>>;
-    handleTouchStart(event: TouchEvent): void;
+    centerObjectInViewport(object: KritzelBaseObject): Promise<KritzelBaseObject<HTMLElement | SVGElement>>;
+    handleTouchStart(event: MouseEvent): void;
     handleKeyDown(event: any): void;
     engineRef: HTMLKritzelEngineElement;
     controlsRef: HTMLKritzelControlsElement;

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

@@ -9,13 +9,17 @@ import { KritzelBrushToolConfig, KritzelTextToolConfig } from '../../../interfac
 import { KritzelContextMenuHandler } from '../../../classes/handlers/context-menu.handler';
 import { KritzelBaseObject } from '../../../classes/objects/base-object.class';
 export declare class KritzelEngine {
-    host: HTMLElement;
     activeTool: KritzelTool;
     globalContextMenuItems: ContextMenuItem[];
     objectContextMenuItems: ContextMenuItem[];
-    forceUpdate: number;
+    scaleMax: number;
+    scaleMin: number;
     isEngineReady: EventEmitter<void>;
     activeToolChange: EventEmitter<KritzelBaseTool>;
+    host: HTMLElement;
+    forceUpdate: number;
+    validateScaleMax(newValue: number): void;
+    validateScaleMin(newValue: number): void;
     store: KritzelStore;
     viewport: KritzelViewport;
     contextMenuHandler: KritzelContextMenuHandler;
@@ -24,6 +28,7 @@ export declare class KritzelEngine {
     get isSelecting(): boolean;
     get isSelectionActive(): boolean;
     constructor();
+    componentWillLoad(): void;
     componentDidLoad(): void;
     handleWheel(ev: any): void;
     handlePointerDown(ev: PointerEvent): void;
@@ -35,7 +40,6 @@ export declare class KritzelEngine {
     handleKeyDown(ev: any): void;
     handleKeyUp(ev: any): void;
     updateFocus(ev: any): void;
-    handleContextMenuAction(event: CustomEvent<ContextMenuItem>): void;
     registerTool(toolName: string, toolClass: any, toolConfig?: KritzelTextToolConfig | KritzelBrushToolConfig): Promise<KritzelBaseTool>;
     changeActiveTool(tool: KritzelBaseTool): Promise<void>;
     setFocus(): Promise<void>;
@@ -59,6 +63,10 @@ export declare class KritzelEngine {
     selectObjects(objects: KritzelBaseObject[]): Promise<void>;
     selectAllObjectsInViewport(): Promise<void>;
     clearSelection(): Promise<void>;
-    centerObjectInViewport(object: KritzelBaseObject): Promise<KritzelBaseObject<HTMLElement>>;
+    centerObjectInViewport(object: KritzelBaseObject): Promise<KritzelBaseObject<HTMLElement | SVGElement>>;
+    getCopiedObjects(): Promise<KritzelBaseObject[]>;
+    private _registerStateChangeListeners;
+    private _handleActiveToolChange;
+    private _handleIsFocusedChange;
     render(): any;
 }

package/dist/types/components/ui/kritzel-context-menu/kritzel-context-menu.d.ts

@@ -1,9 +1,17 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';
+import { KritzelBaseObject } from '../../../classes/objects/base-object.class';
 export declare class KritzelContextMenu {
     items: ContextMenuItem[];
+    objects: KritzelBaseObject[];
     actionSelected: EventEmitter<ContextMenuItem>;
     hostElement: HTMLElement;
+    private disabledStates;
+    private visibleItems;
+    componentWillLoad(): void;
+    onItemsChanged(): void;
     private handleItemClick;
+    private resolveVisibleItems;
+    private resolveDisabledStates;
     render(): any;
 }

package/dist/types/components/ui/kritzel-controls/kritzel-controls.d.ts

@@ -6,9 +6,10 @@ type ToolConfig = Record<string, any>;
 export declare class KritzelControls {
     controls: KritzelToolbarControl[];
     activeControl: KritzelToolbarControl | null;
+    isUtilityPanelVisible: boolean;
     isControlsReady: EventEmitter<void>;
     firstConfig: ToolConfig | null;
-    tooltipVisible: boolean;
+    isTooltipVisible: boolean;
     isTouchDevice: boolean;
     host: HTMLElement;
     handleActiveToolChange(event: CustomEvent): Promise<void>;

package/dist/types/components.d.ts

@@ -7,23 +7,23 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BrushStyleOption } from "./components/shared/kritzel-brush-style/kritzel-brush-style";
 import { ContextMenuItem } from "./interfaces/context-menu-item.interface";
+import { KritzelBaseObject } from "./classes/objects/base-object.class";
 import { KritzelBrushTool } from "./classes/tools/brush-tool.class";
 import { KritzelTextTool } from "./classes/tools/text-tool.class";
 import { KritzelBrushToolConfig, KritzelTextToolConfig, KritzelToolbarControl } from "./interfaces/toolbar-control.interface";
 import { KritzelStore } from "./classes/store.class";
 import { DropdownOption } from "./components/shared/kritzel-dropdown/kritzel-dropdown";
-import { KritzelBaseObject } from "./classes/objects/base-object.class";
 import { KritzelTool } from "./interfaces/tool.interface";
 import { KritzelBaseTool } from "./classes/tools/base-tool.class";
 import { FontOption } from "./components/shared/kritzel-font-family/kritzel-font-family";
 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";
 export { KritzelBrushTool } from "./classes/tools/brush-tool.class";
 export { KritzelTextTool } from "./classes/tools/text-tool.class";
 export { KritzelBrushToolConfig, KritzelTextToolConfig, KritzelToolbarControl } from "./interfaces/toolbar-control.interface";
 export { KritzelStore } from "./classes/store.class";
 export { DropdownOption } from "./components/shared/kritzel-dropdown/kritzel-dropdown";
-export { KritzelBaseObject } from "./classes/objects/base-object.class";
 export { KritzelTool } from "./interfaces/tool.interface";
 export { KritzelBaseTool } from "./classes/tools/base-tool.class";
 export { FontOption } from "./components/shared/kritzel-font-family/kritzel-font-family";
@@ -65,6 +65,7 @@ export namespace Components {
     }
     interface KritzelContextMenu {
         "items": ContextMenuItem[];
+        "objects": KritzelBaseObject[];
     }
     interface KritzelControlBrushConfig {
         /**
@@ -90,6 +91,10 @@ export namespace Components {
           * @default []
          */
         "controls": KritzelToolbarControl[];
+        /**
+          * @default true
+         */
+        "isUtilityPanelVisible": boolean;
     }
     interface KritzelCursorTrail {
         "store": KritzelStore;
@@ -108,10 +113,10 @@ export namespace Components {
     }
     interface KritzelEditor {
         "addObject": <T extends KritzelBaseObject>(object: T) => Promise<T | null>;
-        "centerObjectInViewport": (object: KritzelBaseObject) => Promise<KritzelBaseObject<HTMLElement>>;
+        "centerObjectInViewport": (object: KritzelBaseObject) => Promise<KritzelBaseObject<HTMLElement | SVGElement>>;
         "clearSelection": () => Promise<void>;
         /**
-          * @default DEFAULT_KRITZEL_CONTROLS
+          * @default [     {       name: 'selection',       type: 'tool',       tool: KritzelSelectionTool,       icon: 'cursor',     },     {       name: 'brush',       type: 'tool',       tool: KritzelBrushTool,       isDefault: true,       icon: 'pen',       config: DEFAULT_BRUSH_CONFIG,     },     {       name: 'eraser',       type: 'tool',       tool: KritzelEraserTool,       icon: 'eraser',     },     {       name: 'text',       type: 'tool',       tool: KritzelTextTool,       icon: 'type',       config: DEFAULT_TEXT_CONFIG,     },     {       name: 'image',       type: 'tool',       tool: KritzelImageTool,       icon: 'image',     },     {       name: 'divider',       type: 'divider',     },     {       name: 'config',       type: 'config',     },   ]
          */
         "controls": KritzelToolbarControl[];
         /**
@@ -121,10 +126,30 @@ export namespace Components {
         "getObjectById": <T extends KritzelBaseObject>(id: string) => Promise<T | null>;
         "getSelectedObjects": () => Promise<KritzelBaseObject[]>;
         /**
-          * @default false
+          * @default [     {       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() },   ]
          */
-        "hideControls": boolean;
+        "globalContextMenuItems": ContextMenuItem[];
+        /**
+          * @default true
+         */
+        "isControlsVisible": boolean;
+        /**
+          * @default true
+         */
+        "isUtilityPanelVisible": boolean;
+        /**
+          * @default [     {       label: 'Edit',       icon: 'pen',       visible: (_, objects) => objects.length === 1 && objects[0].isEditable,       action: (_, objects) => {         if (objects.length === 1) {           const object = objects[0];           if (object.isEditable) {             object.edit();           }         }       }     },     { 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.moveToTop() },     { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.moveToBottom() },   ]
+         */
+        "objectContextMenuItems": ContextMenuItem[];
         "removeObject": <T extends KritzelBaseObject>(object: T) => Promise<T | null>;
+        /**
+          * @default ABSOLUTE_SCALE_MAX
+         */
+        "scaleMax": number;
+        /**
+          * @default ABSOLUTE_SCALE_MIN
+         */
+        "scaleMin": number;
         "selectAllObjectsInViewport": () => Promise<void>;
         "selectObjects": (objects: KritzelBaseObject[]) => Promise<void>;
         "updateObject": <T extends KritzelBaseObject>(object: T, updatedProperties: Partial<T>) => Promise<T | null>;
@@ -133,30 +158,33 @@ export namespace Components {
         "activeTool": KritzelTool;
         "addObject": <T extends KritzelBaseObject>(object: T) => Promise<T | null>;
         "bringForward": (object?: KritzelBaseObject<any>) => Promise<void>;
-        "centerObjectInViewport": (object: KritzelBaseObject) => Promise<KritzelBaseObject<HTMLElement>>;
+        "centerObjectInViewport": (object: KritzelBaseObject) => Promise<KritzelBaseObject<HTMLElement | SVGElement>>;
         "changeActiveTool": (tool: KritzelBaseTool) => Promise<void>;
         "clearSelection": () => Promise<void>;
         "copy": () => Promise<void>;
         "delete": () => Promise<void>;
         "disable": () => Promise<void>;
         "enable": () => Promise<void>;
+        "getCopiedObjects": () => Promise<KritzelBaseObject[]>;
         "getObjectById": <T extends KritzelBaseObject>(id: string) => Promise<T | null>;
         "getSelectedObjects": () => Promise<KritzelBaseObject<any>[]>;
-        /**
-          * @default [     {       label: 'Paste',       icon: 'paste',       disabled: () => this.store.state.copiedObjects === null,       action: () => {         const x = (-this.store.state.translateX + this.store.state.contextMenuX) / this.store.state.scale;         const y = (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale;         this.paste(x, y);       },     },     { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },   ]
-         */
         "globalContextMenuItems": ContextMenuItem[];
         "hideContextMenu": () => Promise<void>;
         "moveToBottom": (object?: KritzelBaseObject<any>) => Promise<void>;
         "moveToTop": (object?: KritzelBaseObject<any>) => Promise<void>;
-        /**
-          * @default [     { label: 'Copy', icon: 'copy', action: () => this.copy() },     {       label: 'Paste',       icon: 'paste',       disabled: () => this.store.state.copiedObjects === null,       action: () => {         const x = (-this.store.state.translateX + this.store.state.contextMenuX) / this.store.state.scale;         const y = (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale;         this.paste(x, y);       },     },     { label: 'Delete', icon: 'delete', action: () => this.delete() },     { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.moveToTop() },     { label: 'Send to Back', icon: 'send-to-back', action: () => this.moveToBottom() },   ]
-         */
         "objectContextMenuItems": ContextMenuItem[];
         "paste": (x: number, y: number) => Promise<void>;
         "redo": () => Promise<void>;
         "registerTool": (toolName: string, toolClass: any, toolConfig?: KritzelTextToolConfig | KritzelBrushToolConfig) => Promise<KritzelBaseTool>;
         "removeObject": <T extends KritzelBaseObject>(object: T) => Promise<T | null>;
+        /**
+          * @default ABSOLUTE_SCALE_MAX
+         */
+        "scaleMax": number;
+        /**
+          * @default ABSOLUTE_SCALE_MIN
+         */
+        "scaleMin": number;
         "selectAllObjectsInViewport": () => Promise<void>;
         "selectObjects": (objects: KritzelBaseObject[]) => Promise<void>;
         "sendBackward": (object?: KritzelBaseObject<any>) => Promise<void>;
@@ -603,6 +631,7 @@ declare namespace LocalJSX {
     }
     interface KritzelContextMenu {
         "items"?: ContextMenuItem[];
+        "objects"?: KritzelBaseObject[];
         "onActionSelected"?: (event: KritzelContextMenuCustomEvent<ContextMenuItem>) => void;
     }
     interface KritzelControlBrushConfig {
@@ -630,6 +659,10 @@ declare namespace LocalJSX {
           * @default []
          */
         "controls"?: KritzelToolbarControl[];
+        /**
+          * @default true
+         */
+        "isUtilityPanelVisible"?: boolean;
         "onIsControlsReady"?: (event: KritzelControlsCustomEvent<void>) => void;
     }
     interface KritzelCursorTrail {
@@ -650,7 +683,7 @@ declare namespace LocalJSX {
     }
     interface KritzelEditor {
         /**
-          * @default DEFAULT_KRITZEL_CONTROLS
+          * @default [     {       name: 'selection',       type: 'tool',       tool: KritzelSelectionTool,       icon: 'cursor',     },     {       name: 'brush',       type: 'tool',       tool: KritzelBrushTool,       isDefault: true,       icon: 'pen',       config: DEFAULT_BRUSH_CONFIG,     },     {       name: 'eraser',       type: 'tool',       tool: KritzelEraserTool,       icon: 'eraser',     },     {       name: 'text',       type: 'tool',       tool: KritzelTextTool,       icon: 'type',       config: DEFAULT_TEXT_CONFIG,     },     {       name: 'image',       type: 'tool',       tool: KritzelImageTool,       icon: 'image',     },     {       name: 'divider',       type: 'divider',     },     {       name: 'config',       type: 'config',     },   ]
          */
         "controls"?: KritzelToolbarControl[];
         /**
@@ -658,23 +691,45 @@ declare namespace LocalJSX {
          */
         "customSvgIcons"?: Record<string, string>;
         /**
-          * @default false
+          * @default [     {       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() },   ]
          */
-        "hideControls"?: boolean;
+        "globalContextMenuItems"?: ContextMenuItem[];
+        /**
+          * @default true
+         */
+        "isControlsVisible"?: boolean;
+        /**
+          * @default true
+         */
+        "isUtilityPanelVisible"?: boolean;
+        /**
+          * @default [     {       label: 'Edit',       icon: 'pen',       visible: (_, objects) => objects.length === 1 && objects[0].isEditable,       action: (_, objects) => {         if (objects.length === 1) {           const object = objects[0];           if (object.isEditable) {             object.edit();           }         }       }     },     { 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.moveToTop() },     { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.moveToBottom() },   ]
+         */
+        "objectContextMenuItems"?: ContextMenuItem[];
         "onIsReady"?: (event: KritzelEditorCustomEvent<HTMLElement>) => void;
-    }
-    interface KritzelEngine {
-        "activeTool"?: KritzelTool;
         /**
-          * @default [     {       label: 'Paste',       icon: 'paste',       disabled: () => this.store.state.copiedObjects === null,       action: () => {         const x = (-this.store.state.translateX + this.store.state.contextMenuX) / this.store.state.scale;         const y = (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale;         this.paste(x, y);       },     },     { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },   ]
+          * @default ABSOLUTE_SCALE_MAX
          */
-        "globalContextMenuItems"?: ContextMenuItem[];
+        "scaleMax"?: number;
         /**
-          * @default [     { label: 'Copy', icon: 'copy', action: () => this.copy() },     {       label: 'Paste',       icon: 'paste',       disabled: () => this.store.state.copiedObjects === null,       action: () => {         const x = (-this.store.state.translateX + this.store.state.contextMenuX) / this.store.state.scale;         const y = (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale;         this.paste(x, y);       },     },     { label: 'Delete', icon: 'delete', action: () => this.delete() },     { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.moveToTop() },     { label: 'Send to Back', icon: 'send-to-back', action: () => this.moveToBottom() },   ]
+          * @default ABSOLUTE_SCALE_MIN
          */
+        "scaleMin"?: number;
+    }
+    interface KritzelEngine {
+        "activeTool"?: KritzelTool;
+        "globalContextMenuItems"?: ContextMenuItem[];
         "objectContextMenuItems"?: ContextMenuItem[];
         "onActiveToolChange"?: (event: KritzelEngineCustomEvent<KritzelBaseTool>) => void;
         "onIsEngineReady"?: (event: KritzelEngineCustomEvent<void>) => void;
+        /**
+          * @default ABSOLUTE_SCALE_MAX
+         */
+        "scaleMax"?: number;
+        /**
+          * @default ABSOLUTE_SCALE_MIN
+         */
+        "scaleMin"?: number;
     }
     interface KritzelFont {
         /**

package/dist/types/configs/default-brush-tool.config.d.ts

@@ -0,0 +1,2 @@
+import { KritzelBrushToolConfig } from '../interfaces/toolbar-control.interface';
+export declare const DEFAULT_BRUSH_CONFIG: KritzelBrushToolConfig;

package/dist/types/configs/default-text-tool.config.d.ts

@@ -0,0 +1,2 @@
+import { KritzelTextToolConfig } from "../interfaces/toolbar-control.interface";
+export declare const DEFAULT_TEXT_CONFIG: KritzelTextToolConfig;

package/dist/types/constants/engine.constants.d.ts

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

package/dist/types/index.d.ts

@@ -11,3 +11,11 @@ export type * from './components';
 export * from './classes/objects/text.class';
 export * from './classes/objects/path.class';
 export * from './classes/objects/image.class';
+export * from './classes/tools/brush-tool.class';
+export * from './classes/tools/eraser-tool.class';
+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 './configs/default-brush-tool.config';
+export * from './configs/default-text-tool.config';

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

@@ -1,6 +1,17 @@
+import { KritzelBaseObject } from "../classes/objects/base-object.class";
 export interface ContextMenuItem {
     label: string;
-    action: () => void;
+    action: (menu: {
+        x: number;
+        y: number;
+    }, objects: KritzelBaseObject[]) => void;
     icon?: string;
-    disabled?: boolean | (() => boolean);
+    visible?: boolean | ((menu: {
+        x: number;
+        y: number;
+    }, objects: KritzelBaseObject[]) => boolean | Promise<boolean>);
+    disabled?: boolean | ((menu: {
+        x: number;
+        y: number;
+    }, objects: KritzelBaseObject[]) => boolean | Promise<boolean>);
 }

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

@@ -49,7 +49,11 @@ export interface KritzelEngineState {
     startX: number;
     startY: number;
     translateX: number;
+    translateXMax: number;
+    translateXMin: number;
     translateY: number;
+    translateYMax: number;
+    translateYMin: number;
     viewportWidth: number;
     viewportHeight: number;
     historyBufferSize: number;

package/dist/types/interfaces/object.interface.d.ts

@@ -20,6 +20,7 @@ export interface KritzelObject<T = Element> {
     markedForRemoval: boolean;
     isMounted: boolean;
     zIndex: number;
+    isEditable: boolean;
     _elementRef: T;
     set elementRef(element: T);
     get elementRef(): T;
@@ -39,4 +40,5 @@ export interface KritzelObject<T = Element> {
     copy(): KritzelBaseObject<Element>;
     onSelectedClick(): void;
     isClass<T extends KritzelBaseObject>(this: T, type: string): this is T;
+    edit(): void;
 }

package/package.json

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