kritzel-stencil 0.0.121 → 0.0.122

package/dist/stencil/stencil.esm.js

@@ -1,2 +1,2 @@
-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)}));
+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-fa584641",[[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/types/classes/history.class.d.ts

@@ -15,4 +15,5 @@ export declare class KritzelHistory {
     executeCommand(command: KritzelBaseCommand): void;
     undo(): void;
     redo(): void;
+    private addUpdateViewportCommand;
 }

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

@@ -5,8 +5,9 @@ import { KritzelSerializable } from '../../interfaces/serializable.interface';
 import { KritzelStore } from '../store.class';
 export declare class KritzelBaseObject<T extends Element = HTMLElement | SVGElement> implements KritzelObject<T>, KritzelSerializable {
     __class__: string;
+    _store: KritzelStore;
+    _elementRef: T;
     id: string;
-    visible: boolean;
     x: number;
     y: number;
     translateX: number;
@@ -19,16 +20,16 @@ export declare class KritzelBaseObject<T extends Element = HTMLElement | SVGElem
     opacity: number;
     padding: number;
     scale: number;
-    selected: boolean;
     resizing: boolean;
     rotation: number;
     markedForRemoval: boolean;
-    isMounted: boolean;
     zIndex: number;
+    isVisible: boolean;
+    isSelected: boolean;
+    isMounted: boolean;
     isEditable: boolean;
-    debugInfoVisible: boolean;
-    _store: KritzelStore;
-    _elementRef: T;
+    isInteractive: boolean;
+    isDebugInfoVisible: boolean;
     get totalWidth(): number;
     get totalHeight(): number;
     set elementRef(element: T);
@@ -47,6 +48,8 @@ export declare class KritzelBaseObject<T extends Element = HTMLElement | SVGElem
     constructor();
     static create(store: KritzelStore): KritzelBaseObject<Element>;
     mount(element: T): void;
+    unmount(): void;
+    remount(): void;
     generateId(): string;
     isInViewport(): boolean;
     centerInViewport(): void;
@@ -58,4 +61,5 @@ export declare class KritzelBaseObject<T extends Element = HTMLElement | SVGElem
     revive(object: any): KritzelBaseObject<T>;
     isClass<T extends KritzelBaseObject>(this: T, className: string): this is T;
     edit(): void;
+    hitTest(_x: number, _y: number): boolean;
 }

package/dist/types/classes/objects/custom-element.class.d.ts

@@ -0,0 +1,26 @@
+import { KritzelStore } from '../store.class';
+import { KritzelBaseObject } from './base-object.class';
+export declare class KritzelCustomElement extends KritzelBaseObject<HTMLElement> {
+    __class__: string;
+    element: HTMLElement;
+    isInteractive: boolean;
+    constructor(config?: {
+        element: HTMLElement;
+        translateX?: number;
+        translateY?: number;
+        scale?: number;
+        height?: number;
+        width?: number;
+    });
+    static create(store: KritzelStore, config?: {
+        element: HTMLElement;
+        translateX?: number;
+        translateY?: number;
+        scale?: number;
+        height?: number;
+        width?: number;
+    }): KritzelBaseObject<Element>;
+    mount(element: HTMLElement): void;
+    resize(x: number, y: number, width: number, height: number): void;
+    copy(): KritzelCustomElement;
+}

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

@@ -6,7 +6,7 @@ export declare class KritzelImage extends KritzelBaseObject<HTMLImageElement> {
     maxWidth: number;
     maxHeight: number;
     maxCompressionSize: number;
-    debugInfoVisible: boolean;
+    isDebugInfoVisible: boolean;
     constructor(config?: Partial<KritzelImage>);
     static create(store: KritzelStore): KritzelImage;
     resize(x: number, y: number, width: number, height: number): void;

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

@@ -4,6 +4,7 @@ import { KritzelStore } from '../store.class';
 export declare class KritzelPath extends KritzelBaseObject<SVGElement> {
     __class__: string;
     points: number[][];
+    adjustedPoints: number[][];
     d: string;
     stroke: string;
     strokeWidth: number;
@@ -16,9 +17,9 @@ export declare class KritzelPath extends KritzelBaseObject<SVGElement> {
     height: number;
     width: number;
     scale: number;
-    visible: boolean;
     options: KritzelPathOptions | undefined;
-    debugInfoVisible: boolean;
+    isVisible: boolean;
+    isDebugInfoVisible: boolean;
     get viewBox(): string;
     constructor(config?: {
         points: number[][];
@@ -32,6 +33,8 @@ export declare class KritzelPath extends KritzelBaseObject<SVGElement> {
     static create(store: KritzelStore, options?: KritzelPathOptions): KritzelPath;
     resize(x: number | null, y: number | null, width: number, height: number): void;
     rotate(value: number): void;
+    hitTest(x: number, y: number): boolean;
+    private pointToLineSegmentDistance;
     private updateDimensions;
     private generateSvgPath;
     private getStrokeFromPoints;

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

@@ -8,7 +8,7 @@ export declare class KritzelText extends KritzelBaseObject<HTMLTextAreaElement>
     fontColor: string;
     initialWidth: number;
     isNew: boolean;
-    debugInfoVisible: boolean;
+    isDebugInfoVisible: boolean;
     isEditable: boolean;
     readonly rows: number;
     get isReadonly(): boolean;

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

@@ -35,4 +35,9 @@ export declare class KritzelStore {
     clearSelection(): void;
     resetActiveText(): void;
     getObjectFromPointerEvent(event: PointerEvent, selector?: string): KritzelBaseObject<any> | null;
+    getObjectsFromPointerEvent(event: PointerEvent, selector?: string): KritzelBaseObject<any>[];
+    getCanvasPoint(event: PointerEvent): {
+        x: number;
+        y: number;
+    };
 }

package/dist/types/components.d.ts

@@ -116,7 +116,7 @@ export namespace Components {
         "centerObjectInViewport": (object: KritzelBaseObject) => Promise<KritzelBaseObject<HTMLElement | SVGElement>>;
         "clearSelection": () => Promise<void>;
         /**
-          * @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',     },   ]
+          * @default [     {       name: 'selection',       type: 'tool',       tool: KritzelSelectionTool,       icon: 'cursor',     },     {       name: 'brush',       type: 'tool',       tool: KritzelBrushTool,       icon: 'pen',       isDefault: true,       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[];
         /**
@@ -138,7 +138,7 @@ export namespace Components {
          */
         "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() },   ]
+          * @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>;
@@ -683,7 +683,7 @@ declare namespace LocalJSX {
     }
     interface KritzelEditor {
         /**
-          * @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',     },   ]
+          * @default [     {       name: 'selection',       type: 'tool',       tool: KritzelSelectionTool,       icon: 'cursor',     },     {       name: 'brush',       type: 'tool',       tool: KritzelBrushTool,       icon: 'pen',       isDefault: true,       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[];
         /**
@@ -703,7 +703,7 @@ declare namespace LocalJSX {
          */
         "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() },   ]
+          * @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;

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

@@ -0,0 +1,3 @@
+export declare class KritzelKeyboardHelper {
+    static getNumericValueFromStyle(element: HTMLElement, property: string): number;
+}

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

@@ -40,8 +40,8 @@ export interface KritzelEngineState {
     skipContextMenu: boolean;
     debugInfo: KritzelDebugInfo;
     host: HTMLElement;
-    cursorX: number;
-    cursorY: number;
+    pointerX: number;
+    pointerY: number;
     scale: number;
     scaleMax: number;
     scaleMin: number;

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

@@ -1,8 +1,8 @@
 import { KritzelBaseObject } from '../classes/objects/base-object.class';
 import { KritzelBoundingBox } from './bounding-box.interface';
 export interface KritzelObject<T = Element> {
+    _elementRef: T;
     id: string;
-    visible: boolean;
     x: number;
     y: number;
     translateX: number;
@@ -14,14 +14,16 @@ export interface KritzelObject<T = Element> {
     borderWidth: number;
     opacity: number;
     scale: number;
-    selected: boolean;
     resizing: boolean;
     rotation: number;
     markedForRemoval: boolean;
-    isMounted: boolean;
     zIndex: number;
+    isVisible: boolean;
+    isSelected: boolean;
+    isMounted: boolean;
     isEditable: boolean;
-    _elementRef: T;
+    isInteractive: boolean;
+    isDebugInfoVisible: boolean;
     set elementRef(element: T);
     get elementRef(): T;
     get boundingBox(): KritzelBoundingBox;
@@ -31,6 +33,8 @@ export interface KritzelObject<T = Element> {
     get centerX(): number;
     get centerY(): number;
     mount(element: T): void;
+    unmount(): void;
+    remount(): void;
     generateId(): string;
     isInViewport(viewport: KritzelBoundingBox, scale: number): boolean;
     centerInViewport(): void;
@@ -41,4 +45,5 @@ export interface KritzelObject<T = Element> {
     onSelectedClick(): void;
     isClass<T extends KritzelBaseObject>(this: T, type: string): this is T;
     edit(): void;
+    hitTest(x: number, y: number): boolean;
 }

package/package.json

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