kritzel-stencil 0.0.116 → 0.0.118

package/dist/esm/kritzel-brush-style_18.entry.js

@@ -347,7 +347,7 @@ const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select
 const KritzelControls = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.controlsReady = createEvent(this, "controlsReady");
+        this.isControlsReady = createEvent(this, "isControlsReady");
         this.controls = [];
         this.activeControl = null;
         this.firstConfig = null;
@@ -384,9 +384,7 @@ const KritzelControls = class {
     async componentWillLoad() {
         await this.initializeEngine();
         await this.initializeTools();
-    }
-    componentDidLoad() {
-        this.controlsReady.emit();
+        this.isControlsReady.emit();
     }
     async initializeEngine() {
         await customElements.whenDefined('kritzel-engine');
@@ -432,13 +430,13 @@ const KritzelControls = class {
     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: 'c20b7cbc7228f1b13a7e17f7ea94c96151e11608', class: {
+        return (h(Host, { key: 'fecdf68cef50c38670d8117cd4da92b572c940a5', class: {
                 mobile: this.isTouchDevice,
-            } }, h("kritzel-utility-panel", { key: '0e56c27c57d5cd7302ec80f6809fe4673afddae5', style: {
+            } }, h("kritzel-utility-panel", { key: '82c6af0d540137a2c24aac659f41e24b783b6555', 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: '6454509e3c524a42345e383270e3c1220f87dab6', 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: 'a59d0611b6cd88779b7b72970a0fda50c7808686', class: "kritzel-controls" }, this.controls.map(control => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (control.type === 'tool') {
                 return (h("button", { class: {
@@ -2118,6 +2116,18 @@ const KritzelEditor = class {
         this.controls = DEFAULT_KRITZEL_CONTROLS;
         this.customSvgIcons = {};
         this.hideControls = false;
+        this.isEngineReady = false;
+        this.isControlsReady = false;
+    }
+    onIsEngineReady(newValue) {
+        if (newValue && this.isControlsReady) {
+            this.checkIsReady();
+        }
+    }
+    onIsControlsReady(newValue) {
+        if (newValue && this.isEngineReady) {
+            this.checkIsReady();
+        }
     }
     async getObjectById(id) {
         return this.engineRef.getObjectById(id);
@@ -2143,6 +2153,9 @@ const KritzelEditor = class {
     async clearSelection() {
         this.engineRef.clearSelection();
     }
+    async centerObjectInViewport(object) {
+        return this.engineRef.centerObjectInViewport(object);
+    }
     handleTouchStart(event) {
         if (event.cancelable) {
             event.preventDefault();
@@ -2155,13 +2168,17 @@ const KritzelEditor = class {
             (_a = this.controlsRef) === null || _a === void 0 ? void 0 : _a.closeTooltip();
         }
     }
-    async onEngineReady() {
+    componentDidLoad() {
+        this.registerCustomSvgIcons();
+    }
+    async checkIsReady() {
         await customElements.whenDefined('kritzel-editor');
         await customElements.whenDefined('kritzel-controls');
         await customElements.whenDefined('kritzel-engine');
-        this.registerCustomSvgIcons();
-        console.log('Editor in stencil is read');
-        this.isReady.emit();
+        if (!this.isEngineReady || !this.isControlsReady) {
+            return;
+        }
+        this.isReady.emit(this.host);
     }
     registerCustomSvgIcons() {
         for (const [name, svg] of Object.entries(this.customSvgIcons)) {
@@ -2169,9 +2186,13 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (h(Host, { key: '83aa8122498b051ab605dcbfeadb2a2595324ef2' }, h("kritzel-engine", { key: '4ba9ac23b99e0d42d65badc8ddc6be603857267c', ref: el => (this.engineRef = el), onIsEngineReady: () => this.onEngineReady() }), h("kritzel-controls", { key: '2eb28eed27ebec46dc37221b75f888f8bfe7ffbc', ref: el => (this.controlsRef = el), controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' } })));
+        return (h(Host, { key: '6621a06171194680b6df309dfa328e96ce7723c5' }, h("kritzel-engine", { key: '623628c15564168b8e508dbe45afbf2e5f5b1ed5', ref: el => (this.engineRef = el), onIsEngineReady: () => (this.isEngineReady = true) }), h("kritzel-controls", { key: 'dc56bb4c327d17236443c648fd3ca37eeaadc515', ref: el => (this.controlsRef = el), controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' }, onIsControlsReady: () => (this.isControlsReady = true) })));
     }
     get host() { return getElement(this); }
+    static get watchers() { return {
+        "isEngineReady": ["onIsEngineReady"],
+        "isControlsReady": ["onIsControlsReady"]
+    }; }
 };
 KritzelEditor.style = kritzelEditorCss;
 
@@ -3283,21 +3304,27 @@ const KritzelEngine = class {
     async clearSelection() {
         this.store.clearSelection();
     }
+    async centerObjectInViewport(object) {
+        object.centerInViewport();
+        const command = new UpdateObjectCommand(this.store, this, object, object);
+        this.store.history.executeCommand(command);
+        return object;
+    }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
         const computedStyle = window.getComputedStyle(this.host);
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (h(Host, { key: 'b45e4ad6645643d642c94a91cafaa49a75bb3505' }, h("div", { key: 'c87b2fc89aae574b79b304299383e220a0c80ed2', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '09e6308374584f5e454abe11cd219370c9920f78' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), h("div", { key: 'df5b645b782fdce83c54361aca038a5a638183cd' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), h("div", { key: '12c251313bac25cf0d99090306e269e81949e168' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), h("div", { key: '48bcc8b9318e9ff1ad97ac34c6a1b7bca6b23443' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), h("div", { key: '81d47be11636989548b5b593368e74342abe655d' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '48313baf47c284b3780bf789fa15daee8b06027a' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), h("div", { key: '8e7a32e747f85612cb9a405d596cc39c41048667' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
-            _g.name), h("div", { key: '2c80e5568525c9852cc34f3ac0ffdbc20676feab' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: 'db6d20659f7ab19baf63842f402018f3e5816e85' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: '243e6aab8b40c08a4e4d278e1c915b7cd82ffafc' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '183bccbf711ae3e29474152e01a77fcfaf29130c' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: 'c520ed2a0afb60e7fd73be7006e7fdef4d306df1' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '9e52bfec4a1ea0ad4ae09f3d006ae8689140da4a' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'f917c984963ff98a99068c0286a74fd3910fa2f2' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '5811fa41a32f84aa38b76958e39b8529edc222ee' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '56e074738abaea466381c1a6aa219476dd4eaa89' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '9a9fb9893bec08bb88d9c95a80b9df646ad803ec' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'bfee6adc9b6638a294924051a508c7c75e44aa51' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'c70e2e780804ce63a3ee3839e5da8a6edf0c8f85' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.cursorX), h("div", { key: '434f4eafc7182f48bf90390ae719ddc46d3bec48' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.cursorY)), h("div", { key: '7997269880dab3dbc8b920f340a3ed01127bd5bf', class: "origin", style: {
+        return (h(Host, { key: '1a8a4ac086fd25b356d25f1c4f094005771a3d57' }, h("div", { key: '5edf7faeb5d63e8341fa81b48287eaee001ed163', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '356a8bb56abb4a9c98ab79f1d224a64e6c202a34' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), h("div", { key: 'e3d853e7e11c32bf5f801c29a0ed9add91ce24c3' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), h("div", { key: '7ada7c0c256bbdc79b2b74b391c87a319c9aaf05' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), h("div", { key: '156ed10ab63bbacf30d549f115d82beeb6e714d5' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), h("div", { key: '1cf8c42989b1c4117a4895f05686313e169b808e' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '1e558a335a31c050c80cda3cd763267fe95335d2' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), h("div", { key: 'ff43094ed2f27d2157946329cc4473d92c2d3e30' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
+            _g.name), h("div", { key: '844c0e1dd8d77270419e3c0a0362536e6027f4cb' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: '64a782868924f27f9ef4d426694ddac338293bc5' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: '4fc48b5006641e0ecb9af0d8cc5b4fe2868faa3d' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '1407e97aba7434599060b33ead00da898482cc6a' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: 'f99a32e77014bf5548a5ae50a99ee4e6f6ae4801' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '0c7708d4a8dc78e171b9493b8b5ab2cfe2984ad6' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '5bca3b678ee83f2faba320dfbeb63af8d41b2908' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '2cecae3e2108ca108220ca7bb67777829cd223ef' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'd0cf8270f99ae6e8ce915a856e54ed7b38cd40aa' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '4f1a0bad54e9a4ad46fec56d7c692a48e02cb7a2' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '9a4b3fdc05e103a2c73a7940bd9a84a68f912b14' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '5a480fdbe4a3fa435697bb94701971dda75f41d3' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.cursorX), h("div", { key: 'f549e8faa3ddad5b3294bb72f24ad3735539e84b' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.cursorY)), h("div", { key: 'e81679812ed19a50a09357549df00e590ae613b6', class: "origin", style: {
                 transform: `matrix(${(_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale}, 0, 0, ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale}, ${(_r = this.store.state) === null || _r === void 0 ? void 0 : _r.translateX}, ${(_s = this.store.state) === null || _s === void 0 ? void 0 : _s.translateY})`,
             } }, (_t = this.store.objects) === null || _t === void 0 ? void 0 :
             _t.map(object => {
@@ -3394,7 +3421,7 @@ const KritzelEngine = class {
                         fill: 'transparent',
                         cursor: 'grab',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.debugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation)))))));
-            }), h("svg", { key: '637b9098b88f3ecc36794d64bb205a3f26500598', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), h("svg", { key: 'bf2c561803773e19aed36d418e96b9f797c305be', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
                 height: (_u = this.store.state.currentPath) === null || _u === void 0 ? void 0 : _u.height.toString(),
                 width: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.width.toString(),
                 left: '0',
@@ -3404,12 +3431,12 @@ const KritzelEngine = class {
                 transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: '0f44d2551774e94a74e4d6f5a0e1812baf05bdfb', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '3c74a2d2cc100a2957f3065388f15238cbf0f92c', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, style: {
+            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: '5177dab02b9a5563129d00b80b99a1a198eb8ff5', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'ea3ae0531d9b2109e547baca7159ea29ebd34827', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, style: {
                 position: 'fixed',
                 left: `${this.store.state.contextMenuX}px`,
                 top: `${this.store.state.contextMenuY}px`,
                 zIndex: '10000',
-            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '8ede38f5f2eff63fc7647836778e3b428106bca5', store: this.store })));
+            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: 'c785558a0f922d7caeacaeeb44a9492ebcc0be7d', store: this.store })));
     }
     get host() { return getElement(this); }
 };