npm - kritzel-stencil - Versions diffs - 0.0.127 → 0.0.128 - Mend

kritzel-stencil 0.0.127 → 0.0.128

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (291) hide show

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js CHANGED Viewed

@@ -12,23 +12,28 @@ export class KritzelControls {
         this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
         this.kritzelEngine = null;
     }
-    async handleActiveToolChange(event) {
-        var _a;
-        this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
-        await ((_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.setFocus());
-    }
-    handleClick(event) {
+    handleDocumentClick(event) {
         const element = event.target;
         if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
             return;
         }
         this.isTooltipVisible = false;
-        this.kritzelEngine.enable();
     }
-    async closeTooltip() {
+    handleKeyDown(event) {
         var _a;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closeTooltip();
+            (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.enable();
+        }
+    }
+    async handleActiveToolChange(event) {
+        var _a;
+        this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
+        await ((_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.setFocus());
+    }
+    async closeTooltip() {
         this.isTooltipVisible = false;
-        (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.enable();
     }
     get activeToolAsTextTool() {
         var _a;
@@ -76,9 +81,10 @@ export class KritzelControls {
         }
     }
     handleConfigClick(event) {
+        var _a;
         event.stopPropagation();
         this.isTooltipVisible = !this.isTooltipVisible;
-        this.kritzelEngine.disable();
+        (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.disable();
     }
     async handleToolChange(event) {
         this.activeControl = Object.assign(Object.assign({}, this.activeControl), { tool: event.detail });
@@ -87,13 +93,13 @@ export class KritzelControls {
     render() {
         var _a, _b;
         const hasNoConfig = ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.config) === undefined || ((_b = this.activeControl) === null || _b === void 0 ? void 0 : _b.config) === null;
-        return (h(Host, { key: 'dfb17219cf1d27d86148bc918b8303d74244700c', class: {
+        return (h(Host, { key: 'af04746b6eaa04a51482cd9d25ba3ab303d631f1', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'a5eb7c6b59a193ba0bdde53812882c355a7658d4', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'd6ecb1087a332162f3fc809ed4321fc48f72c3e7', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } })), h("div", { key: 'b51e49664bf6330f22fb07ef64116459ec3832b3', class: "kritzel-controls" }, this.controls.map(control => {
+            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } })), h("div", { key: '34723e47249d53fd544848d2d577deba4df1f131', class: "kritzel-controls" }, this.controls.map(control => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (control.type === 'tool') {
                 return (h("button", { class: {
@@ -251,14 +257,20 @@ export class KritzelControls {
     static get elementRef() { return "host"; }
     static get listeners() {
         return [{
-                "name": "activeToolChange",
-                "method": "handleActiveToolChange",
+                "name": "click",
+                "method": "handleDocumentClick",
                 "target": "document",
                 "capture": false,
                 "passive": false
             }, {
-                "name": "click",
-                "method": "handleClick",
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "activeToolChange",
+                "method": "handleActiveToolChange",
                 "target": "document",
                 "capture": false,
                 "passive": false

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-controls.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-controls/kritzel-controls.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Host, Listen, Event, EventEmitter, Method } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\nimport { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseTool } from '../../../classes/tools/base-tool.class';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\n\r\ntype ToolConfig = Record<string, any>;\r\n\r\n@Component({\r\n tag: 'kritzel-controls',\r\n styleUrl: 'kritzel-controls.css',\r\n shadow: true,\r\n assetsDirs: ['../assets'],\r\n})\r\nexport class KritzelControls {\r\n @Prop()\r\n controls: KritzelToolbarControl[] = [];\r\n\r\n @Prop({ mutable: true })\r\n activeControl: KritzelToolbarControl \| null = null;\r\n\r\n @Prop()\r\n isUtilityPanelVisible: boolean = true;\r\n\r\n @Event()\r\n isControlsReady: EventEmitter<void>;\r\n\r\n @State()\r\n firstConfig: ToolConfig \| null = null;\r\n\r\n @State()\r\n isTooltipVisible: boolean = false;\r\n\r\n @State()\r\n isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n\r\n @Element()\r\n host!: HTMLElement;\r\n\r\n @Listen('activeToolChange', { target: 'document' })\r\n async handleActiveToolChange(event: CustomEvent) {\r\n this.activeControl = this.controls.find(control => control.tool === event.detail) \|\| null;\r\n await this.kritzelEngine?.setFocus();\r\n }\r\n\r\n @Listen('click', { target: 'document' })\r\n handleClick(event: MouseEvent) {\r\n const element = event.target as HTMLElement;\r\n\r\n if (!this.kritzelEngine \|\| element.closest('.kritzel-tooltip')) {\r\n return;\r\n }\r\n\r\n this.isTooltipVisible = false;\r\n this.kritzelEngine.enable();\r\n }\r\n\r\n @Method()\r\n async closeTooltip() {\r\n this.isTooltipVisible = false;\r\n this.kritzelEngine?.enable();\r\n }\r\n\r\n kritzelEngine: HTMLKritzelEngineElement \| null = null;\r\n\r\n get activeToolAsTextTool() {\r\n return this.activeControl?.tool as KritzelTextTool;\r\n }\r\n\r\n get activeToolAsBrushTool() {\r\n return this.activeControl?.tool as KritzelBrushTool;\r\n }\r\n\r\n async componentWillLoad() {\r\n await this.initializeEngine();\r\n await this.initializeTools();\r\n this.isControlsReady.emit();\r\n }\r\n\r\n private async initializeEngine() {\r\n await customElements.whenDefined('kritzel-engine');\r\n this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n if (!this.kritzelEngine) {\r\n throw new Error('kritzel-engine not found in parent element.');\r\n }\r\n }\r\n\r\n private async initializeTools() {\r\n for (const c of this.controls) {\r\n if (c.type === 'tool' && c.tool) {\r\n c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);\r\n }\r\n\r\n if (c.type === 'tool' && c.isDefault && c.tool) {\r\n await this.kritzelEngine.changeActiveTool(c.tool as KritzelBaseTool);\r\n this.activeControl = c;\r\n }\r\n\r\n if (c.type === 'config') {\r\n if (this.firstConfig === null) {\r\n this.firstConfig = c;\r\n } else {\r\n console.warn('Only one config control is allowed. The first one will be used.');\r\n }\r\n }\r\n }\r\n }\r\n\r\n private async handleControlClick(control: KritzelToolbarControl) {\r\n this.activeControl = control;\r\n\r\n if (this.activeControl.type === 'tool') {\r\n await this.kritzelEngine.changeActiveTool(this.activeControl.tool as KritzelBaseTool);\r\n }\r\n }\r\n\r\n private handleConfigClick(event: MouseEvent) {\r\n event.stopPropagation();\r\n this.isTooltipVisible = !this.isTooltipVisible;\r\n this.kritzelEngine.disable();\r\n }\r\n\r\n private async handleToolChange(event: CustomEvent) {\r\n this.activeControl = { ...this.activeControl, tool: event.detail };\r\n await this.kritzelEngine.changeActiveTool((this.activeControl as any).tool);\r\n }\r\n\r\n render() {\r\n const hasNoConfig = this.activeControl?.config === undefined \|\| this.activeControl?.config === null;\r\n\r\n return (\r\n <Host\r\n class={{\r\n mobile: this.isTouchDevice,\r\n }}\r\n >\r\n {this.isUtilityPanelVisible && (\r\n <kritzel-utility-panel\r\n style={{\r\n position: 'absolute',\r\n bottom: '56px',\r\n left: '12px',\r\n }}\r\n onUndo={() => this.kritzelEngine?.undo()}\r\n onRedo={() => this.kritzelEngine?.redo()}\r\n onDelete={() => this.kritzelEngine?.delete()}\r\n ></kritzel-utility-panel>\r\n )}\r\n\r\n <div class=\"kritzel-controls\">\r\n {this.controls.map(control => {\r\n if (control.type === 'tool') {\r\n return (\r\n <button\r\n class={{\r\n 'kritzel-control': true,\r\n 'selected': this.activeControl?.name === control?.name,\r\n }}\r\n key={control.name}\r\n onClick={_event => this.handleControlClick?.(control)}\r\n >\r\n <kritzel-icon name={control.icon}></kritzel-icon>\r\n </button>\r\n );\r\n }\r\n\r\n if (control.type === 'divider') {\r\n return <div class=\"kritzel-divider\" key={control.name}></div>;\r\n }\r\n\r\n if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {\r\n return (\r\n <div class=\"kritzel-config-container\" key={control.name}>\r\n <kritzel-tooltip isVisible={this.isTooltipVisible} anchorElement={this.host.shadowRoot?.querySelector('.kritzel-config-container') as HTMLElement}>\r\n <div style={{ width: '294px', height: '100%' }}>\r\n {this.activeControl.name === 'brush' && (\r\n <kritzel-control-brush-config tool={this.activeToolAsBrushTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-brush-config>\r\n )}\r\n\r\n {this.activeControl.name === 'text' && (\r\n <kritzel-control-text-config tool={this.activeToolAsTextTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-text-config>\r\n )}\r\n </div>\r\n </kritzel-tooltip>\r\n\r\n <div\r\n class=\"kritzel-config\"\r\n onClick={event => this.handleConfigClick?.(event)}\r\n style={{\r\n cursor: this.activeControl.config ? 'pointer' : 'default',\r\n pointerEvents: hasNoConfig ? 'none' : 'auto',\r\n }}\r\n >\r\n {this.activeControl.tool instanceof KritzelBrushTool && (\r\n <div class=\"color-container\">\r\n <kritzel-color\r\n value={this.activeToolAsBrushTool?.color}\r\n size={this.activeToolAsBrushTool?.size}\r\n style={{\r\n borderRadius: '50%',\r\n border: 'none',\r\n }}\r\n ></kritzel-color>\r\n </div>\r\n )}\r\n\r\n {this.activeControl.tool instanceof KritzelTextTool && (\r\n <div class=\"font-container\">\r\n <kritzel-font\r\n fontFamily={this.activeToolAsTextTool?.fontFamily}\r\n size={this.activeToolAsTextTool?.fontSize}\r\n color={this.activeToolAsTextTool?.fontColor}\r\n ></kritzel-font>\r\n </div>\r\n )}\r\n\r\n {hasNoConfig && <div class=\"no-config\"></div>}\r\n </div>\r\n </div>\r\n );\r\n }\r\n })}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"kritzel-controls.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-controls/kritzel-controls.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Host, Listen, Event, EventEmitter, Method } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\nimport { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseTool } from '../../../classes/tools/base-tool.class';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\n\r\ntype ToolConfig = Record<string, any>;\r\n\r\n@Component({\r\n tag: 'kritzel-controls',\r\n styleUrl: 'kritzel-controls.css',\r\n shadow: true,\r\n assetsDirs: ['../assets'],\r\n})\r\nexport class KritzelControls {\r\n @Prop()\r\n controls: KritzelToolbarControl[] = [];\r\n\r\n @Prop({ mutable: true })\r\n activeControl: KritzelToolbarControl \| null = null;\r\n\r\n @Prop()\r\n isUtilityPanelVisible: boolean = true;\r\n\r\n @Event()\r\n isControlsReady: EventEmitter<void>;\r\n\r\n @State()\r\n firstConfig: ToolConfig \| null = null;\r\n\r\n @State()\r\n isTooltipVisible: boolean = false;\r\n\r\n @State()\r\n isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n\r\n @Element()\r\n host!: HTMLElement;\r\n\r\n @Listen('click', { target: 'document' })\r\n handleDocumentClick(event: MouseEvent) {\r\n const element = event.target as HTMLElement;\r\n\r\n if (!this.kritzelEngine \|\| element.closest('.kritzel-tooltip')) {\r\n return;\r\n }\r\n\r\n this.isTooltipVisible = false;\r\n }\r\n\r\n @Listen('keydown', { target: 'window' })\r\n handleKeyDown(event) {\r\n if (event.key === 'Escape') {\r\n event.preventDefault();\r\n this.closeTooltip();\r\n this.kritzelEngine?.enable();\r\n }\r\n }\r\n\r\n @Listen('activeToolChange', { target: 'document' })\r\n async handleActiveToolChange(event: CustomEvent) {\r\n this.activeControl = this.controls.find(control => control.tool === event.detail) \|\| null;\r\n await this.kritzelEngine?.setFocus();\r\n }\r\n\r\n @Method()\r\n async closeTooltip() {\r\n this.isTooltipVisible = false;\r\n }\r\n\r\n kritzelEngine: HTMLKritzelEngineElement \| null = null;\r\n\r\n get activeToolAsTextTool() {\r\n return this.activeControl?.tool as KritzelTextTool;\r\n }\r\n\r\n get activeToolAsBrushTool() {\r\n return this.activeControl?.tool as KritzelBrushTool;\r\n }\r\n\r\n async componentWillLoad() {\r\n await this.initializeEngine();\r\n await this.initializeTools();\r\n this.isControlsReady.emit();\r\n }\r\n\r\n private async initializeEngine() {\r\n await customElements.whenDefined('kritzel-engine');\r\n this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n if (!this.kritzelEngine) {\r\n throw new Error('kritzel-engine not found in parent element.');\r\n }\r\n }\r\n\r\n private async initializeTools() {\r\n for (const c of this.controls) {\r\n if (c.type === 'tool' && c.tool) {\r\n c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);\r\n }\r\n\r\n if (c.type === 'tool' && c.isDefault && c.tool) {\r\n await this.kritzelEngine.changeActiveTool(c.tool as KritzelBaseTool);\r\n this.activeControl = c;\r\n }\r\n\r\n if (c.type === 'config') {\r\n if (this.firstConfig === null) {\r\n this.firstConfig = c;\r\n } else {\r\n console.warn('Only one config control is allowed. The first one will be used.');\r\n }\r\n }\r\n }\r\n }\r\n\r\n private async handleControlClick(control: KritzelToolbarControl) {\r\n this.activeControl = control;\r\n\r\n if (this.activeControl.type === 'tool') {\r\n await this.kritzelEngine.changeActiveTool(this.activeControl.tool as KritzelBaseTool);\r\n }\r\n }\r\n\r\n private handleConfigClick(event: MouseEvent) {\r\n event.stopPropagation();\r\n this.isTooltipVisible = !this.isTooltipVisible;\r\n this.kritzelEngine?.disable();\r\n }\r\n\r\n private async handleToolChange(event: CustomEvent) {\r\n this.activeControl = { ...this.activeControl, tool: event.detail };\r\n await this.kritzelEngine.changeActiveTool((this.activeControl as any).tool);\r\n }\r\n\r\n render() {\r\n const hasNoConfig = this.activeControl?.config === undefined \|\| this.activeControl?.config === null;\r\n\r\n return (\r\n <Host\r\n class={{\r\n mobile: this.isTouchDevice,\r\n }}\r\n >\r\n {this.isUtilityPanelVisible && (\r\n <kritzel-utility-panel\r\n style={{\r\n position: 'absolute',\r\n bottom: '56px',\r\n left: '12px',\r\n }}\r\n onUndo={() => this.kritzelEngine?.undo()}\r\n onRedo={() => this.kritzelEngine?.redo()}\r\n onDelete={() => this.kritzelEngine?.delete()}\r\n ></kritzel-utility-panel>\r\n )}\r\n\r\n <div class=\"kritzel-controls\">\r\n {this.controls.map(control => {\r\n if (control.type === 'tool') {\r\n return (\r\n <button\r\n class={{\r\n 'kritzel-control': true,\r\n 'selected': this.activeControl?.name === control?.name,\r\n }}\r\n key={control.name}\r\n onClick={_event => this.handleControlClick?.(control)}\r\n >\r\n <kritzel-icon name={control.icon}></kritzel-icon>\r\n </button>\r\n );\r\n }\r\n\r\n if (control.type === 'divider') {\r\n return <div class=\"kritzel-divider\" key={control.name}></div>;\r\n }\r\n\r\n if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {\r\n return (\r\n <div class=\"kritzel-config-container\" key={control.name}>\r\n <kritzel-tooltip isVisible={this.isTooltipVisible} anchorElement={this.host.shadowRoot?.querySelector('.kritzel-config-container') as HTMLElement}>\r\n <div style={{ width: '294px', height: '100%' }}>\r\n {this.activeControl.name === 'brush' && (\r\n <kritzel-control-brush-config tool={this.activeToolAsBrushTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-brush-config>\r\n )}\r\n\r\n {this.activeControl.name === 'text' && (\r\n <kritzel-control-text-config tool={this.activeToolAsTextTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-text-config>\r\n )}\r\n </div>\r\n </kritzel-tooltip>\r\n\r\n <div\r\n class=\"kritzel-config\"\r\n onClick={event => this.handleConfigClick?.(event)}\r\n style={{\r\n cursor: this.activeControl.config ? 'pointer' : 'default',\r\n pointerEvents: hasNoConfig ? 'none' : 'auto',\r\n }}\r\n >\r\n {this.activeControl.tool instanceof KritzelBrushTool && (\r\n <div class=\"color-container\">\r\n <kritzel-color\r\n value={this.activeToolAsBrushTool?.color}\r\n size={this.activeToolAsBrushTool?.size}\r\n style={{\r\n borderRadius: '50%',\r\n border: 'none',\r\n }}\r\n ></kritzel-color>\r\n </div>\r\n )}\r\n\r\n {this.activeControl.tool instanceof KritzelTextTool && (\r\n <div class=\"font-container\">\r\n <kritzel-font\r\n fontFamily={this.activeToolAsTextTool?.fontFamily}\r\n size={this.activeToolAsTextTool?.fontSize}\r\n color={this.activeToolAsTextTool?.fontColor}\r\n ></kritzel-font>\r\n </div>\r\n )}\r\n\r\n {hasNoConfig && <div class=\"no-config\"></div>}\r\n </div>\r\n </div>\r\n );\r\n }\r\n })}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js CHANGED Viewed

@@ -13,7 +13,7 @@ export class KritzelUtilityPanel {
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: 'f381fac2cb032ca19c6945ef4f39673ea0bd0cc5' }, h("button", { key: '1f7200672970baf1d0cfcaa116fa3f8f9a39832a', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '755d9201d80d8db086f07b38e90a01a06e980b50', name: "undo" })), h("button", { key: '06e4d5c2956f23245c3d48f21c15d54e8bef8119', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '13eb6b31c45b67ac399fc7c84b941ddce04c5c86', name: "redo" })), h("div", { key: '7f03a576a37649db679b93604c2654d29cc81da4', class: "utility-separator" }), h("button", { key: '0c40613e9f6a049cec872d71e9f948d685ec1dbe', class: "utility-button" }, h("kritzel-icon", { key: '8cba73bcb02ef8b7c182ba2fd16d98d6855f1c1b', name: "delete", onClick: () => this.delete.emit() }))));
+        return (h(Host, { key: 'cf7b5c501b6535fda22b17ea218e90bd60223c6e' }, h("button", { key: '05db2cee7f2e191674167ef503e70718200bf904', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '10412c038b9d4e66851c8a0c9b51b99607bac397', name: "undo" })), h("button", { key: 'edf0289de8ce5cddd9341bc1855eae095274226c', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '46263e3d3f166b224c9a18ba383085e020fac51a', name: "redo" })), h("div", { key: '3a6c0eca21f44887683d6308ca5741b095eceb77', class: "utility-separator" }), h("button", { key: 'ced83e0c47fc920edabdc5b3379a8805f1827374', class: "utility-button" }, h("kritzel-icon", { key: 'd49c6412d778d34fe21e86482f2114631621106a', name: "delete", onClick: () => this.delete.emit() }))));
     }
     static get is() { return "kritzel-utility-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.css ADDED Viewed

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+}

package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js ADDED Viewed

@@ -0,0 +1,209 @@
+import { Host, h } from "@stencil/core";
+import { KritzelWorkspace } from "../../../classes/workspace.class";
+import { ObjectHelper } from "../../../helpers/object.helper";
+export class KritzelWorkspaceManager {
+    constructor() {
+        this.workspaces = [];
+        this.editingIndex = null;
+        this.newWorkspace = null;
+        this.kritzelEngine = null;
+        this.handleNewWorkspace = async () => {
+            var _a;
+            await ((_a = this.splitButtonRef) === null || _a === void 0 ? void 0 : _a.openMenu());
+            requestAnimationFrame(() => {
+                this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');
+                this.editingIndex = 0;
+            });
+        };
+        this.handleMenuClosed = () => {
+            this.editingIndex = null;
+            this.newWorkspace = null;
+        };
+        this.handleSave = async (item) => {
+            const workspace = item.value;
+            const updatedWorkspace = Object.assign(Object.assign({}, workspace), { name: item.label });
+            if (this.newWorkspace) {
+                await this.kritzelEngine.createWorkspace(updatedWorkspace);
+                this.selectWorkspace(updatedWorkspace);
+            }
+            else {
+                await this.kritzelEngine.updateWorkspace(updatedWorkspace);
+            }
+            this.editingIndex = null;
+            this.newWorkspace = null;
+        };
+        this.handleRename = (index) => {
+            this.editingIndex = index;
+        };
+        this.handleDelete = async (workspaceToDelete) => {
+            var _a;
+            await this.kritzelEngine.deleteWorkspace(workspaceToDelete);
+            if (((_a = this.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id) === workspaceToDelete.id) {
+                const newActiveWorkspace = this.sortedWorkspaces.find(w => w.id !== workspaceToDelete.id) || null;
+                this.selectWorkspace(newActiveWorkspace);
+            }
+        };
+    }
+    get sortedWorkspaces() {
+        const uniqueWorkspaces = [...new Map(this.workspaces.map(workspace => [workspace.id, workspace])).values()];
+        return [this.newWorkspace, ...uniqueWorkspaces].filter(ws => ws !== null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+    }
+    get activeItemIndex() {
+        return this.sortedWorkspaces.findIndex(ws => { var _a; return ws.id === ((_a = this.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id); });
+    }
+    async componentWillLoad() {
+        await this.initializeEngine();
+        this.isWorkspaceManagerReady.emit();
+    }
+    async initializeEngine() {
+        await customElements.whenDefined('kritzel-engine');
+        this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
+        if (!this.kritzelEngine) {
+            throw new Error('kritzel-engine not found in parent element.');
+        }
+    }
+    handleSelect(workspace) {
+        this.selectWorkspace(workspace);
+    }
+    selectWorkspace(workspace) {
+        if (this.editingIndex !== null)
+            return;
+        this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);
+        this.workspaceChange.emit(workspace);
+    }
+    render() {
+        const workspaceSelectionOptions = this.sortedWorkspaces.map((ws, index) => ({
+            label: ws.name,
+            value: ws,
+            select: () => this.handleSelect(ws),
+            cancel: this.handleMenuClosed,
+            save: this.handleSave,
+            children: [
+                {
+                    label: 'Rename',
+                    value: 'rename',
+                    select: () => this.handleRename(index),
+                },
+                {
+                    label: 'Delete',
+                    value: 'delete',
+                    disabled: this.sortedWorkspaces.length <= 1,
+                    select: () => this.handleDelete(ws),
+                },
+            ],
+        }));
+        return (h(Host, { key: '1703451717d5583d6520edfbcdbe38a5b8f6840f' }, h("kritzel-split-button", { key: 'efd5d9b714ee72b23fd28c9b20ea6985957fe9b9', ref: el => (this.splitButtonRef = el), buttonIcon: "plus", options: workspaceSelectionOptions, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onButtonClick: this.handleNewWorkspace, onMenuClosed: this.handleMenuClosed })));
+    }
+    static get is() { return "kritzel-workspace-manager"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-workspace-manager.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-workspace-manager.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "workspaces": {
+                "type": "unknown",
+                "attribute": "workspaces",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelWorkspace[]",
+                    "resolved": "KritzelWorkspace[]",
+                    "references": {
+                        "KritzelWorkspace": {
+                            "location": "import",
+                            "path": "../../../classes/workspace.class",
+                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "activeWorkspace": {
+                "type": "unknown",
+                "attribute": "active-workspace",
+                "mutable": true,
+                "complexType": {
+                    "original": "KritzelWorkspace",
+                    "resolved": "KritzelWorkspace",
+                    "references": {
+                        "KritzelWorkspace": {
+                            "location": "import",
+                            "path": "../../../classes/workspace.class",
+                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "editingIndex": {},
+            "newWorkspace": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "isWorkspaceManagerReady",
+                "name": "isWorkspaceManagerReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "workspaceChange",
+                "name": "workspaceChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KritzelWorkspace",
+                    "resolved": "KritzelWorkspace",
+                    "references": {
+                        "KritzelWorkspace": {
+                            "location": "import",
+                            "path": "../../../classes/workspace.class",
+                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=kritzel-workspace-manager.js.map

package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"kritzel-workspace-manager.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport { KritzelWorkspace } from '../../../classes/workspace.class';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { KritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n tag: 'kritzel-workspace-manager',\r\n styleUrl: 'kritzel-workspace-manager.css',\r\n shadow: true,\r\n})\r\nexport class KritzelWorkspaceManager {\r\n @Prop()\r\n workspaces: KritzelWorkspace[] = [];\r\n\r\n @Prop({ mutable: true })\r\n activeWorkspace: KritzelWorkspace;\r\n\r\n @State()\r\n editingIndex: number | null = null;\r\n\r\n @State()\r\n newWorkspace: KritzelWorkspace | null = null;\r\n\r\n @Event()\r\n isWorkspaceManagerReady: EventEmitter<void>;\r\n\r\n @Event()\r\n workspaceChange: EventEmitter<KritzelWorkspace>;\r\n\r\n @Element()\r\n host!: HTMLElement;\r\n\r\n kritzelEngine: HTMLKritzelEngineElement | null = null;\r\n\r\n splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n get sortedWorkspaces() {\r\n const uniqueWorkspaces = [...new Map(this.workspaces.map(workspace => [workspace.id, workspace])).values()];\r\n return [this.newWorkspace, ...uniqueWorkspaces].filter(ws => ws !== null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());\r\n }\r\n\r\n get activeItemIndex() {\r\n return this.sortedWorkspaces.findIndex(ws => ws.id === this.activeWorkspace?.id);\r\n }\r\n\r\n async componentWillLoad() {\r\n await this.initializeEngine();\r\n this.isWorkspaceManagerReady.emit();\r\n }\r\n\r\n private async initializeEngine() {\r\n await customElements.whenDefined('kritzel-engine');\r\n this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n if (!this.kritzelEngine) {\r\n throw new Error('kritzel-engine not found in parent element.');\r\n }\r\n }\r\n\r\n private handleSelect(workspace: KritzelWorkspace) {\r\n this.selectWorkspace(workspace);\r\n }\r\n\r\n private handleNewWorkspace = async () => {\r\n await this.splitButtonRef?.openMenu();\r\n\r\n requestAnimationFrame(() => {\r\n this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');\r\n this.editingIndex = 0;\r\n });\r\n };\r\n\r\n private handleMenuClosed = () => {\r\n this.editingIndex = null;\r\n this.newWorkspace = null;\r\n };\r\n\r\n private handleSave = async (item: KritzelMenuItem<KritzelWorkspace>) => {\r\n const workspace = item.value;\r\n const updatedWorkspace = { ...workspace, name: item.label };\r\n\r\n if (this.newWorkspace) {\r\n await this.kritzelEngine.createWorkspace(updatedWorkspace);\r\n this.selectWorkspace(updatedWorkspace);\r\n } else {\r\n await this.kritzelEngine.updateWorkspace(updatedWorkspace);\r\n }\r\n this.editingIndex = null;\r\n this.newWorkspace = null;\r\n };\r\n\r\n private handleRename = (index: number) => {\r\n this.editingIndex = index;\r\n };\r\n\r\n private handleDelete = async (workspaceToDelete: KritzelWorkspace) => {\r\n await this.kritzelEngine.deleteWorkspace(workspaceToDelete);\r\n\r\n if (this.activeWorkspace?.id === workspaceToDelete.id) {\r\n const newActiveWorkspace = this.sortedWorkspaces.find(w => w.id !== workspaceToDelete.id) || null;\r\n this.selectWorkspace(newActiveWorkspace);\r\n }\r\n };\r\n\r\n private selectWorkspace(workspace: KritzelWorkspace) {\r\n if (this.editingIndex !== null) return;\r\n this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);\r\n this.workspaceChange.emit(workspace);\r\n }\r\n\r\n render() {\r\n const workspaceSelectionOptions: KritzelMenuItem<KritzelWorkspace>[] = this.sortedWorkspaces.map((ws, index) => ({\r\n label: ws.name,\r\n value: ws,\r\n select: () => this.handleSelect(ws),\r\n cancel: this.handleMenuClosed,\r\n save: this.handleSave,\r\n children: [\r\n {\r\n label: 'Rename',\r\n value: 'rename',\r\n select: () => this.handleRename(index),\r\n },\r\n {\r\n label: 'Delete',\r\n value: 'delete',\r\n disabled: this.sortedWorkspaces.length <= 1,\r\n select: () => this.handleDelete(ws),\r\n },\r\n ],\r\n }));\r\n\r\n return (\r\n <Host>\r\n <kritzel-split-button\r\n ref={el => (this.splitButtonRef = el)}\r\n buttonIcon=\"plus\"\r\n options={workspaceSelectionOptions}\r\n activeItemIndex={this.activeItemIndex}\r\n editingIndex={this.editingIndex}\r\n onButtonClick={this.handleNewWorkspace}\r\n onMenuClosed={this.handleMenuClosed}\r\n ></kritzel-split-button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/configs/default-engine-state.js CHANGED Viewed

@@ -1,4 +1,5 @@
 export const DEFAULT_ENGINE_STATE = {
+    activeWorkspace: null,
     activeTool: null,
     activeText: null,
     currentPath: null,
@@ -32,6 +33,7 @@ export const DEFAULT_ENGINE_STATE = {
         showObjectInfo: false,
         showViewportInfo: false,
         logCommands: false,
+        logDatabase: false,
     },
     host: null,
     pointerX: 0,
@@ -39,7 +41,7 @@ export const DEFAULT_ENGINE_STATE = {
     scale: 1,
     scaleMax: 1,
     scaleMin: 1,
-    scaleStep: 0.05,
+    scaleStep: 0.075,
     startX: 0,
     startY: 0,
     translateX: 0,
@@ -53,6 +55,7 @@ export const DEFAULT_ENGINE_STATE = {
     historyBufferSize: 1000,
     longTouchTimeout: null,
     longTouchDelay: 300,
-    pointers: new Map()
+    pointers: new Map(),
+    workspaces: [],
 };
 //# sourceMappingURL=default-engine-state.js.map

package/dist/collection/configs/default-engine-state.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"default-engine-state.js","sourceRoot":"","sources":["../../src/configs/default-engine-state.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAuB;IACtD,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;IACjB,aAAa,EAAE,IAAI;IACnB,aAAa,EAAE,IAAI;IACnB,YAAY,EAAE,IAAI;IAClB,cAAc,EAAE,IAAI;IACpB,gBAAgB,EAAE,IAAI;IACtB,kBAAkB,EAAE,KAAK;IACzB,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,WAAW,EAAE,KAAK;IAClB,UAAU,EAAE,KAAK;IACjB,sBAAsB,EAAE,KAAK;IAC7B,UAAU,EAAE,KAAK;IACjB,wBAAwB,EAAE,KAAK;IAC/B,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,gBAAgB,EAAE,KAAK;IACvB,oBAAoB,EAAE,KAAK;IAC3B,gBAAgB,EAAE,EAAE;IACpB,YAAY,EAAE,CAAC;IACf,YAAY,EAAE,CAAC;IACf,eAAe,EAAE,KAAK;IACtB,SAAS,EAAE;QACT,cAAc,EAAE,KAAK;QACrB,gBAAgB,EAAE,KAAK;QACvB,WAAW,EAAE,KAAK;KACnB;IACD,IAAI,EAAE,IAAI;IACV,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC;IACX,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,~~IAAI~~;~~IACf~~,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,GAAG;IAClB,aAAa,EAAE,CAAC;IAChB,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,GAAG;IAClB,aAAa,EAAE,CAAC;IAChB,aAAa,EAAE,CAAC;IAChB,cAAc,EAAE,CAAC;IACjB,iBAAiB,EAAE,IAAI;IACvB,gBAAgB,EAAE,IAAI;IACtB,cAAc,EAAE,GAAG;IACnB,QAAQ,EAAE,IAAI,GAAG,EAAwB;~~CAC1C~~,CAAC","sourcesContent":["import { KritzelEngineState } from \"../interfaces/engine-state.interface\";\r\n\r\nexport const DEFAULT_ENGINE_STATE: KritzelEngineState = {\r\n activeTool: null,\r\n activeText: null,\r\n currentPath: null,\r\n copiedObjects: null,\r\n objectsOctree: null,\r\n selectionBox: null,\r\n selectionGroup: null,\r\n resizeHandleType: null,\r\n hasViewportChanged: false,\r\n isReady: false,\r\n isEnabled: true,\r\n isScaling: false,\r\n isPanning: false,\r\n isFocused: false,\r\n isSelecting: false,\r\n isResizing: false,\r\n isResizeHandleSelected: false,\r\n isRotating: false,\r\n isRotationHandleSelected: false,\r\n isDragging: false,\r\n isDrawing: false,\r\n isErasing: false,\r\n isWriting: false,\r\n isCtrlKeyPressed: false,\r\n isContextMenuVisible: false,\r\n contextMenuItems: [],\r\n contextMenuX: 0,\r\n contextMenuY: 0,\r\n skipContextMenu: false,\r\n debugInfo: {\r\n showObjectInfo: false,\r\n showViewportInfo: false,\r\n logCommands: false,\r\n },\r\n host: null,\r\n pointerX: 0,\r\n pointerY: 0,\r\n scale: 1,\r\n scaleMax: 1,\r\n scaleMin: 1,\r\n scaleStep: 0.05,\r\n startX: 0,\r\n startY: 0,\r\n translateX: 0,\r\n translateXMax: 400,\r\n translateXMin: 0,\r\n translateY: 0,\r\n translateYMax: 400,\r\n translateYMin: 0,\r\n viewportWidth: 0,\r\n viewportHeight: 0,\r\n historyBufferSize: 1000,\r\n longTouchTimeout: null,\r\n longTouchDelay: 300,\r\n pointers: new Map<number, PointerEvent>()\r\n};"]}
1	+ {"version":3,"file":"default-engine-state.js","sourceRoot":"","sources":["../../src/configs/default-engine-state.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAuB;IACtD,eAAe,EAAE,IAAI;IACrB,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;IACjB,aAAa,EAAE,IAAI;IACnB,aAAa,EAAE,IAAI;IACnB,YAAY,EAAE,IAAI;IAClB,cAAc,EAAE,IAAI;IACpB,gBAAgB,EAAE,IAAI;IACtB,kBAAkB,EAAE,KAAK;IACzB,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,WAAW,EAAE,KAAK;IAClB,UAAU,EAAE,KAAK;IACjB,sBAAsB,EAAE,KAAK;IAC7B,UAAU,EAAE,KAAK;IACjB,wBAAwB,EAAE,KAAK;IAC/B,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,gBAAgB,EAAE,KAAK;IACvB,oBAAoB,EAAE,KAAK;IAC3B,gBAAgB,EAAE,EAAE;IACpB,YAAY,EAAE,CAAC;IACf,YAAY,EAAE,CAAC;IACf,eAAe,EAAE,KAAK;IACtB,SAAS,EAAE;QACT,cAAc,EAAE,KAAK;QACrB,gBAAgB,EAAE,KAAK;QACvB,WAAW,EAAE,KAAK;QAClB,WAAW,EAAE,KAAK;KACnB;IACD,IAAI,EAAE,IAAI;IACV,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC;IACX,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,KAAK;IAChB,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,GAAG;IAClB,aAAa,EAAE,CAAC;IAChB,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,GAAG;IAClB,aAAa,EAAE,CAAC;IAChB,aAAa,EAAE,CAAC;IAChB,cAAc,EAAE,CAAC;IACjB,iBAAiB,EAAE,IAAI;IACvB,gBAAgB,EAAE,IAAI;IACtB,cAAc,EAAE,GAAG;IACnB,QAAQ,EAAE,IAAI,GAAG,EAAwB;IACzC,UAAU,EAAE,EAAE;CACf,CAAC","sourcesContent":["import { KritzelEngineState } from \"../interfaces/engine-state.interface\";\r\n\r\nexport const DEFAULT_ENGINE_STATE: KritzelEngineState = {\r\n activeWorkspace: null,\r\n activeTool: null,\r\n activeText: null,\r\n currentPath: null,\r\n copiedObjects: null,\r\n objectsOctree: null,\r\n selectionBox: null,\r\n selectionGroup: null,\r\n resizeHandleType: null,\r\n hasViewportChanged: false,\r\n isReady: false,\r\n isEnabled: true,\r\n isScaling: false,\r\n isPanning: false,\r\n isFocused: false,\r\n isSelecting: false,\r\n isResizing: false,\r\n isResizeHandleSelected: false,\r\n isRotating: false,\r\n isRotationHandleSelected: false,\r\n isDragging: false,\r\n isDrawing: false,\r\n isErasing: false,\r\n isWriting: false,\r\n isCtrlKeyPressed: false,\r\n isContextMenuVisible: false,\r\n contextMenuItems: [],\r\n contextMenuX: 0,\r\n contextMenuY: 0,\r\n skipContextMenu: false,\r\n debugInfo: {\r\n showObjectInfo: false,\r\n showViewportInfo: false,\r\n logCommands: false,\r\n logDatabase: false,\r\n },\r\n host: null,\r\n pointerX: 0,\r\n pointerY: 0,\r\n scale: 1,\r\n scaleMax: 1,\r\n scaleMin: 1,\r\n scaleStep: 0.075,\r\n startX: 0,\r\n startY: 0,\r\n translateX: 0,\r\n translateXMax: 400,\r\n translateXMin: 0,\r\n translateY: 0,\r\n translateYMax: 400,\r\n translateYMin: 0,\r\n viewportWidth: 0,\r\n viewportHeight: 0,\r\n historyBufferSize: 1000,\r\n longTouchTimeout: null,\r\n longTouchDelay: 300,\r\n pointers: new Map<number, PointerEvent>(),\r\n workspaces: [],\r\n};"]}

package/dist/collection/helpers/class.helper.js CHANGED Viewed

@@ -1,6 +1,6 @@
 export class KritzelClassHelper {
     static isInstanceOf(object, className) {
-        return object.__class__ === className;
+        return !!object && object.__class__ === className;
     }
 }
 //# sourceMappingURL=class.helper.js.map

package/dist/collection/helpers/class.helper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"class.helper.js","sourceRoot":"","sources":["../../src/helpers/class.helper.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,kBAAkB;IAC7B,MAAM,CAAC,YAAY,CAAI,MAAW,EAAE,SAAiB;QACnD,OAAO,MAAM,CAAC,SAAS,KAAK,SAAS,CAAC;~~IACxC~~,CAAC;CACF","sourcesContent":["export class KritzelClassHelper {\r\n static isInstanceOf<T>(object: any, className: string): object is T {\r\n return object.__class__ === className;\r\n }\r\n}"]}
1	+ {"version":3,"file":"class.helper.js","sourceRoot":"","sources":["../../src/helpers/class.helper.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,kBAAkB;IAC7B,MAAM,CAAC,YAAY,CAAI,MAAW,EAAE,SAAiB;QACnD,OAAO,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,SAAS,KAAK,SAAS,CAAC;IACpD,CAAC;CACF","sourcesContent":["export class KritzelClassHelper {\r\n static isInstanceOf<T>(object: any, className: string): object is T {\r\n return !!object && object.__class__ === className;\r\n }\r\n}"]}

package/dist/collection/helpers/html.helper.js CHANGED Viewed

@@ -1,7 +1,36 @@
-export class KritzelKeyboardHelper {
+export class KritzelHTMLHelper {
     static getNumericValueFromStyle(element, property) {
         const value = window.getComputedStyle(element).getPropertyValue(property);
         return parseFloat(value) || 0;
     }
+    static getScrollableParent(element) {
+        var _a, _b;
+        if (!element) {
+            return window;
+        }
+        const parent = (_b = (_a = element.parentNode) === null || _a === void 0 ? void 0 : _a.host) !== null && _b !== void 0 ? _b : element.parentElement;
+        if (!parent || parent.tagName === 'BODY') {
+            return window;
+        }
+        const style = window.getComputedStyle(parent);
+        if (style.overflow === 'auto' || style.overflowY === 'auto' || style.overflow === 'scroll' || style.overflowY === 'scroll') {
+            return parent;
+        }
+        return this.getScrollableParent(parent);
+    }
+    static isElementInViewport(element) {
+        if (!element) {
+            return false;
+        }
+        const scrollableParent = this.getScrollableParent(element);
+        const rect = element.getBoundingClientRect();
+        if (scrollableParent === window) {
+            const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+            const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+            return rect.top >= 0 && rect.left >= 0 && rect.bottom <= viewportHeight && rect.right <= viewportWidth;
+        }
+        const parentRect = scrollableParent.getBoundingClientRect();
+        return rect.top >= parentRect.top && rect.left >= parentRect.left && rect.bottom <= parentRect.bottom && rect.right <= parentRect.right;
+    }
 }
 //# sourceMappingURL=html.helper.js.map

package/dist/collection/helpers/html.helper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"html.helper.js","sourceRoot":"","sources":["../../src/helpers/html.helper.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,~~qBAAqB~~;~~IACjC~~,MAAM,CAAC,wBAAwB,CAAC,OAAoB,EAAE,QAAgB;QACpE,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC1E,OAAO,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;~~CACD~~","sourcesContent":["export class ~~KritzelKeyboardHelper~~ {\r\n static getNumericValueFromStyle(element: HTMLElement, property: string): number {\r\n const value = window.getComputedStyle(element).getPropertyValue(property);\r\n return parseFloat(value) \|\| 0;\r\n }\r\n}"]}
1	+ {"version":3,"file":"html.helper.js","sourceRoot":"","sources":["../../src/helpers/html.helper.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,iBAAiB;IAC7B,MAAM,CAAC,wBAAwB,CAAC,OAAoB,EAAE,QAAgB;QACpE,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC1E,OAAO,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAED,MAAM,CAAC,mBAAmB,CAAC,OAAoB;;QAC5C,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,MAAM,MAAM,GAAG,MAAC,MAAC,OAAO,CAAC,UAAyB,0CAAE,IAAoB,mCAAI,OAAO,CAAC,aAAa,CAAC;QAElG,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,KAAK,MAAM,EAAE,CAAC;YACzC,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QAC9C,IAAI,KAAK,CAAC,QAAQ,KAAK,MAAM,IAAI,KAAK,CAAC,SAAS,KAAK,MAAM,IAAI,KAAK,CAAC,QAAQ,KAAK,QAAQ,IAAI,KAAK,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC;YAC3H,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,OAAO,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM,CAAC,mBAAmB,CAAC,OAAoB;QAC7C,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,KAAK,CAAC;QACf,CAAC;QAED,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;QAC3D,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;QAE7C,IAAI,gBAAgB,KAAK,MAAM,EAAE,CAAC;YAChC,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;YACnF,MAAM,aAAa,GAAG,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;YAEhF,OAAO,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,cAAc,IAAI,IAAI,CAAC,KAAK,IAAI,aAAa,CAAC;QACzG,CAAC;QAED,MAAM,UAAU,GAAI,gBAAgC,CAAC,qBAAqB,EAAE,CAAC;QAE7E,OAAO,IAAI,CAAC,GAAG,IAAI,UAAU,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,IAAI,UAAU,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,UAAU,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC;IAC1I,CAAC;CACF","sourcesContent":["export class KritzelHTMLHelper {\r\n static getNumericValueFromStyle(element: HTMLElement, property: string): number {\r\n const value = window.getComputedStyle(element).getPropertyValue(property);\r\n return parseFloat(value) \|\| 0;\r\n }\r\n\r\n static getScrollableParent(element: HTMLElement): HTMLElement \| Window {\r\n if (!element) {\r\n return window;\r\n }\r\n\r\n const parent = ((element.parentNode as ShadowRoot)?.host as HTMLElement) ?? element.parentElement;\r\n\r\n if (!parent \|\| parent.tagName === 'BODY') {\r\n return window;\r\n }\r\n\r\n const style = window.getComputedStyle(parent);\r\n if (style.overflow === 'auto' \|\| style.overflowY === 'auto' \|\| style.overflow === 'scroll' \|\| style.overflowY === 'scroll') {\r\n return parent;\r\n }\r\n\r\n return this.getScrollableParent(parent);\r\n }\r\n\r\n static isElementInViewport(element: HTMLElement): boolean {\r\n if (!element) {\r\n return false;\r\n }\r\n\r\n const scrollableParent = this.getScrollableParent(element);\r\n const rect = element.getBoundingClientRect();\r\n\r\n if (scrollableParent === window) {\r\n const viewportHeight = window.innerHeight \|\| document.documentElement.clientHeight;\r\n const viewportWidth = window.innerWidth \|\| document.documentElement.clientWidth;\r\n\r\n return rect.top >= 0 && rect.left >= 0 && rect.bottom <= viewportHeight && rect.right <= viewportWidth;\r\n }\r\n\r\n const parentRect = (scrollableParent as HTMLElement).getBoundingClientRect();\r\n\r\n return rect.top >= parentRect.top && rect.left >= parentRect.left && rect.bottom <= parentRect.bottom && rect.right <= parentRect.right;\r\n }\r\n}"]}

package/dist/collection/helpers/object.helper.js CHANGED Viewed

@@ -18,7 +18,7 @@ export class ObjectHelper {
         const cloneObject = (obj) => {
             const _a = obj, { _store, _elementRef, totalWidth, totalHeight, element } = _a, remainingProps = __rest(_a, ["_store", "_elementRef", "totalWidth", "totalHeight", "element"]);
             const clonedProps = structuredClone(remainingProps);
-            if (element && element instanceof HTMLElement) {
+            if (element && typeof element === 'object' && 'nodeType' in element && element.nodeType === 1) {
                 clonedProps.element = element.cloneNode(true);
             }
             return clonedProps;

package/dist/collection/helpers/object.helper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"object.helper.js","sourceRoot":"","sources":["../../src/helpers/object.helper.ts"],"names":[],"mappings":";;;;;;;;;;;AAEA,MAAM,OAAO,YAAY;IACvB,MAAM,CAAC,YAAY;QACjB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACjD,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,SAA4D;QACvE,MAAM,WAAW,GAAG,CAAC,GAA2B,EAAE,EAAE;YAClD,MAAM,KAA+E,GAAU,EAAzF,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,OAAkC,EAA7B,cAAc,cAA1E,iEAA4E,CAAa,CAAC;YAEhG,MAAM,WAAW,GAAG,eAAe,CAAC,cAAc,CAAC,CAAC;YAEpD,IAAI,OAAO,IAAI,OAAO,~~YAAY~~,~~WAAW~~,EAAE,CAAC;~~gBAC9C~~,WAAW,CAAC,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,CAAgB,CAAC;YAC/D,CAAC;YAED,OAAO,WAAW,CAAC;QACrB,CAAC,CAAC;QAEF,IAAI,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;YAC7B,OAAO,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACpC,CAAC;QAED,OAAO,WAAW,CAAC,SAAS,CAAC,CAAC;IAChC,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,GAAQ;QACrB,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,GAAG,EAAE,MAAM,MAAK,CAAC,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,WAAW,MAAK,MAAM,CAAC;IACvE,CAAC;CACF","sourcesContent":["import { KritzelBaseObject } from '../classes/objects/base-object.class';\r\n\r\nexport class ObjectHelper {\r\n static generateUUID(): string {\r\n return Math.random().toString(36).substr(2, 9);\r\n }\r\n\r\n static clone(objOrObjs: KritzelBaseObject<any> \| KritzelBaseObject<any>[]): any {\r\n const cloneObject = (obj: KritzelBaseObject<any>) => {\r\n const { _store, _elementRef, totalWidth, totalHeight, element, ...remainingProps } = obj as any;\r\n\r\n const clonedProps = structuredClone(remainingProps);\r\n\r\n if (element && element ~~instanceof~~ ~~HTMLElement~~) {\r\n clonedProps.element = element.cloneNode(true) as HTMLElement;\r\n }\r\n\r\n return clonedProps;\r\n };\r\n\r\n if (Array.isArray(objOrObjs)) {\r\n return objOrObjs.map(cloneObject);\r\n }\r\n\r\n return cloneObject(objOrObjs);\r\n }\r\n\r\n static isEmpty(obj: any): boolean {\r\n if (obj === null \|\| obj === undefined) {\r\n return true;\r\n }\r\n return Object?.keys(obj).length === 0 && obj?.constructor === Object;\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"object.helper.js","sourceRoot":"","sources":["../../src/helpers/object.helper.ts"],"names":[],"mappings":";;;;;;;;;;;AAEA,MAAM,OAAO,YAAY;IACvB,MAAM,CAAC,YAAY;QACjB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACjD,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,SAA4D;QACvE,MAAM,WAAW,GAAG,CAAC,GAA2B,EAAE,EAAE;YAClD,MAAM,KAA+E,GAAU,EAAzF,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,OAAkC,EAA7B,cAAc,cAA1E,iEAA4E,CAAa,CAAC;YAEhG,MAAM,WAAW,GAAG,eAAe,CAAC,cAAc,CAAC,CAAC;YAEpD,IAAI,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,UAAU,IAAI,OAAO,IAAI,OAAO,CAAC,QAAQ,KAAK,CAAC,EAAE,CAAC;gBAC9F,WAAW,CAAC,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,CAAgB,CAAC;YAC/D,CAAC;YAED,OAAO,WAAW,CAAC;QACrB,CAAC,CAAC;QAEF,IAAI,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;YAC7B,OAAO,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACpC,CAAC;QAED,OAAO,WAAW,CAAC,SAAS,CAAC,CAAC;IAChC,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,GAAQ;QACrB,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,GAAG,EAAE,MAAM,MAAK,CAAC,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,WAAW,MAAK,MAAM,CAAC;IACvE,CAAC;CACF","sourcesContent":["import { KritzelBaseObject } from '../classes/objects/base-object.class';\r\n\r\nexport class ObjectHelper {\r\n static generateUUID(): string {\r\n return Math.random().toString(36).substr(2, 9);\r\n }\r\n\r\n static clone(objOrObjs: KritzelBaseObject<any> \| KritzelBaseObject<any>[]): any {\r\n const cloneObject = (obj: KritzelBaseObject<any>) => {\r\n const { _store, _elementRef, totalWidth, totalHeight, element, ...remainingProps } = obj as any;\r\n\r\n const clonedProps = structuredClone(remainingProps);\r\n\r\n if (element && typeof element === 'object' && 'nodeType' in element && element.nodeType === 1) {\r\n clonedProps.element = element.cloneNode(true) as HTMLElement;\r\n }\r\n\r\n return clonedProps;\r\n };\r\n\r\n if (Array.isArray(objOrObjs)) {\r\n return objOrObjs.map(cloneObject);\r\n }\r\n\r\n return cloneObject(objOrObjs);\r\n }\r\n\r\n static isEmpty(obj: any): boolean {\r\n if (obj === null \|\| obj === undefined) {\r\n return true;\r\n }\r\n return Object?.keys(obj).length === 0 && obj?.constructor === Object;\r\n }\r\n}\r\n"]}

package/dist/collection/interfaces/command.interface.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"command.interface.js","sourceRoot":"","sources":["../../src/interfaces/command.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface KritzelCommand {\r\n initiator: string;\r\n ~~isUndoable~~: boolean;\r\n execute(): void;\r\n undo?(): void;\r\n}"]}
1	+ {"version":3,"file":"command.interface.js","sourceRoot":"","sources":["../../src/interfaces/command.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface KritzelCommand {\r\n initiator: string;\r\n skipHistory: boolean;\r\n execute(): void;\r\n undo?(): void;\r\n}"]}

package/dist/collection/interfaces/debug-info.interface.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"debug-info.interface.js","sourceRoot":"","sources":["../../src/interfaces/debug-info.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface KritzelDebugInfo {\r\n showViewportInfo: boolean;\r\n showObjectInfo: boolean;\r\n logCommands: boolean;\r\n}\r\n"]}
1	+ {"version":3,"file":"debug-info.interface.js","sourceRoot":"","sources":["../../src/interfaces/debug-info.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface KritzelDebugInfo {\r\n showViewportInfo: boolean;\r\n showObjectInfo: boolean;\r\n logCommands: boolean;\r\n logDatabase: boolean;\r\n}\r\n"]}

package/dist/collection/interfaces/engine-state.interface.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"engine-state.interface.js","sourceRoot":"","sources":["../../src/interfaces/engine-state.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { KritzelBaseObject } from \"../classes/objects/base-object.class\";\r\nimport { KritzelPath } from \"../classes/objects/path.class\";\r\nimport { KrtizelSelectionBox } from \"../classes/objects/selection-box.class\";\r\nimport { KritzelSelectionGroup } from \"../classes/objects/selection-group.class\";\r\nimport { KritzelText } from \"../classes/objects/text.class\";\r\nimport { KritzelOctree } from \"../classes/structures/octree.structure\";\r\nimport { KritzelBaseTool } from \"../classes/tools/base-tool.class\";\r\nimport { KritzelHandleType } from \"../enums/handle-type.enum\";\r\nimport { ContextMenuItem } from \"./context-menu-item.interface\";\r\nimport { KritzelDebugInfo } from \"./debug-info.interface\";\r\n\r\nexport interface KritzelEngineState {\r\n activeTool: KritzelBaseTool;\r\n activeText: KritzelText;\r\n currentPath?: KritzelPath;\r\n copiedObjects?: KritzelSelectionGroup;\r\n objectsOctree: KritzelOctree<KritzelBaseObject<Element>>;\r\n selectionBox?: KrtizelSelectionBox;\r\n selectionGroup?: KritzelSelectionGroup;\r\n resizeHandleType: KritzelHandleType;\r\n hasViewportChanged: boolean;\r\n isReady: boolean;\r\n isEnabled: boolean;\r\n isScaling: boolean;\r\n isPanning: boolean;\r\n isFocused: boolean;\r\n isSelecting: boolean;\r\n isResizing: boolean;\r\n isResizeHandleSelected: boolean;\r\n isRotating: boolean;\r\n isRotationHandleSelected: boolean;\r\n isDragging: boolean;\r\n isDrawing: boolean;\r\n isErasing: boolean;\r\n isWriting: boolean;\r\n isCtrlKeyPressed: boolean;\r\n isContextMenuVisible: boolean;\r\n contextMenuItems: ContextMenuItem[];\r\n contextMenuX: number;\r\n contextMenuY: number;\r\n skipContextMenu: boolean;\r\n debugInfo: KritzelDebugInfo;\r\n host: HTMLElement;\r\n pointerX: number;\r\n pointerY: number;\r\n scale: number;\r\n scaleMax: number;\r\n scaleMin: number;\r\n scaleStep: number;\r\n startX: number;\r\n startY: number;\r\n translateX: number;\r\n translateXMax: number;\r\n translateXMin: number;\r\n translateY: number;\r\n translateYMax: number;\r\n translateYMin: number;\r\n viewportWidth: number;\r\n viewportHeight: number;\r\n historyBufferSize: number;\r\n longTouchTimeout: number;\r\n longTouchDelay: number;\r\n pointers: Map<number, PointerEvent>;\r\n}"]}
1	+ {"version":3,"file":"engine-state.interface.js","sourceRoot":"","sources":["../../src/interfaces/engine-state.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { KritzelBaseObject } from \"../classes/objects/base-object.class\";\r\nimport { KritzelPath } from \"../classes/objects/path.class\";\r\nimport { KrtizelSelectionBox } from \"../classes/objects/selection-box.class\";\r\nimport { KritzelSelectionGroup } from \"../classes/objects/selection-group.class\";\r\nimport { KritzelText } from \"../classes/objects/text.class\";\r\nimport { KritzelOctree } from \"../classes/structures/octree.structure\";\r\nimport { KritzelBaseTool } from \"../classes/tools/base-tool.class\";\r\nimport { KritzelWorkspace } from \"../classes/workspace.class\";\r\nimport { KritzelHandleType } from \"../enums/handle-type.enum\";\r\nimport { ContextMenuItem } from \"./context-menu-item.interface\";\r\nimport { KritzelDebugInfo } from \"./debug-info.interface\";\r\n\r\nexport interface KritzelEngineState {\r\n activeWorkspace: KritzelWorkspace;\r\n activeTool: KritzelBaseTool;\r\n activeText: KritzelText;\r\n currentPath?: KritzelPath;\r\n copiedObjects?: KritzelSelectionGroup;\r\n objectsOctree: KritzelOctree<KritzelBaseObject<Element>>;\r\n selectionBox?: KrtizelSelectionBox;\r\n selectionGroup?: KritzelSelectionGroup;\r\n resizeHandleType: KritzelHandleType;\r\n hasViewportChanged: boolean;\r\n isReady: boolean;\r\n isEnabled: boolean;\r\n isScaling: boolean;\r\n isPanning: boolean;\r\n isFocused: boolean;\r\n isSelecting: boolean;\r\n isResizing: boolean;\r\n isResizeHandleSelected: boolean;\r\n isRotating: boolean;\r\n isRotationHandleSelected: boolean;\r\n isDragging: boolean;\r\n isDrawing: boolean;\r\n isErasing: boolean;\r\n isWriting: boolean;\r\n isCtrlKeyPressed: boolean;\r\n isContextMenuVisible: boolean;\r\n contextMenuItems: ContextMenuItem[];\r\n contextMenuX: number;\r\n contextMenuY: number;\r\n skipContextMenu: boolean;\r\n debugInfo: KritzelDebugInfo;\r\n host: HTMLElement;\r\n pointerX: number;\r\n pointerY: number;\r\n scale: number;\r\n scaleMax: number;\r\n scaleMin: number;\r\n scaleStep: number;\r\n startX: number;\r\n startY: number;\r\n translateX: number;\r\n translateXMax: number;\r\n translateXMin: number;\r\n translateY: number;\r\n translateYMax: number;\r\n translateYMin: number;\r\n viewportWidth: number;\r\n viewportHeight: number;\r\n historyBufferSize: number;\r\n longTouchTimeout: number;\r\n longTouchDelay: number;\r\n pointers: Map<number, PointerEvent>;\r\n workspaces: KritzelWorkspace[];\r\n}"]}

package/dist/collection/interfaces/menu-item.interface.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=menu-item.interface.js.map

package/dist/collection/interfaces/menu-item.interface.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"menu-item.interface.js","sourceRoot":"","sources":["../../src/interfaces/menu-item.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface KritzelMenuItem<T = any> {\r\n value: T;\r\n label: string;\r\n select?: (item: KritzelMenuItem) => void;\r\n save?: (item: KritzelMenuItem) => void;\r\n cancel?: (item: KritzelMenuItem) => void;\r\n disabled?: boolean;\r\n children?: KritzelMenuItem[];\r\n}"]}

package/dist/collection/interfaces/object.interface.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"object.interface.js","sourceRoot":"","sources":["../../src/interfaces/object.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { KritzelBaseObject } from '../classes/objects/base-object.class';\r\nimport { KritzelBoundingBox } from './bounding-box.interface';\r\nimport { KritzelPolygon } from './polygon.interface';\r\n\r\nexport interface KritzelObject<T = Element> {\r\n _elementRef: T;\r\n\r\n id: string;\r\n x: number;\r\n y: number;\r\n translateX: number;\r\n translateY: number;\r\n height: number;\r\n width: number;\r\n backgroundColor: string;\r\n borderColor: string;\r\n borderWidth: number;\r\n opacity: number;\r\n scale: number;\r\n resizing: boolean;\r\n rotation: number;\r\n markedForRemoval: boolean;\r\n zIndex: number;\r\n\r\n isVisible: boolean;\r\n isSelected: boolean;\r\n isHovered: boolean;\r\n isMounted: boolean;\r\n isEditable: boolean;\r\n isInteractive: boolean;\r\n isDebugInfoVisible: boolean;\r\n\r\n set elementRef(element: T);\r\n get elementRef(): T;\r\n get boundingBox(): KritzelBoundingBox;\r\n get totalWidth(): number;\r\n get totalHeight(): number;\r\n get rotationDegrees(): number;\r\n get centerX(): number;\r\n get centerY(): number;\r\n\r\n mount(element: T): void;\r\n unmount(): void;\r\n remount(): void;\r\n generateId(): string;\r\n isInViewport(viewport: KritzelBoundingBox, scale: number): boolean;\r\n centerInViewport(): void;\r\n move(startX: number, startY: number, endX: number, endY: number): void;\r\n resize(x: number, y: number, width: number, height: number): void;\r\n rotate(value: number): void;\r\n copy(): KritzelBaseObject<Element>;\r\n onSelectedClick(): void;\r\n isClass<T extends KritzelBaseObject>(this: T, type: string): this is T;\r\n edit(): void;\r\n hitTest(x: number, y: number): boolean;\r\n hitTestPolygon(polygon: KritzelPolygon): boolean;\r\n updatePosition(x: number, y: number): void;\r\n}\r\n"]}
1	+ {"version":3,"file":"object.interface.js","sourceRoot":"","sources":["../../src/interfaces/object.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { KritzelBaseObject } from '../classes/objects/base-object.class';\r\nimport { KritzelBoundingBox } from './bounding-box.interface';\r\nimport { KritzelPolygon } from './polygon.interface';\r\n\r\nexport interface KritzelObject<T = Element> {\r\n _elementRef: T;\r\n\r\n id: string;\r\n workspaceId: string;\r\n x: number;\r\n y: number;\r\n translateX: number;\r\n translateY: number;\r\n height: number;\r\n width: number;\r\n backgroundColor: string;\r\n borderColor: string;\r\n borderWidth: number;\r\n opacity: number;\r\n scale: number;\r\n resizing: boolean;\r\n rotation: number;\r\n markedForRemoval: boolean;\r\n zIndex: number;\r\n\r\n isVisible: boolean;\r\n isSelected: boolean;\r\n isHovered: boolean;\r\n isMounted: boolean;\r\n isEditable: boolean;\r\n isInteractive: boolean;\r\n isDebugInfoVisible: boolean;\r\n\r\n set elementRef(element: T);\r\n get elementRef(): T;\r\n get boundingBox(): KritzelBoundingBox;\r\n get totalWidth(): number;\r\n get totalHeight(): number;\r\n get rotationDegrees(): number;\r\n get centerX(): number;\r\n get centerY(): number;\r\n\r\n mount(element: T): void;\r\n unmount(): void;\r\n remount(): void;\r\n generateId(): string;\r\n isInViewport(viewport: KritzelBoundingBox, scale: number): boolean;\r\n centerInViewport(): void;\r\n move(startX: number, startY: number, endX: number, endY: number): void;\r\n resize(x: number, y: number, width: number, height: number): void;\r\n rotate(value: number): void;\r\n copy(): KritzelBaseObject<Element>;\r\n onSelectedClick(): void;\r\n isClass<T extends KritzelBaseObject>(this: T, type: string): this is T;\r\n edit(): void;\r\n hitTest(x: number, y: number): boolean;\r\n hitTestPolygon(polygon: KritzelPolygon): boolean;\r\n updatePosition(x: number, y: number): void;\r\n}\r\n"]}