kritzel-stencil 0.0.59 → 0.0.62

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

@@ -3041,6 +3041,7 @@ const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select
 const KritzelControls = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.controlsReady = index.createEvent(this, "controlsReady");
         this.controls = [];
         this.activeControl = null;
         this.firstConfig = null;
@@ -3059,6 +3060,9 @@ const KritzelControls = class {
         await this.initializeEngine();
         await this.initializeTools();
     }
+    componentDidLoad() {
+        this.controlsReady.emit();
+    }
     async initializeEngine() {
         await customElements.whenDefined('kritzel-engine');
         this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
@@ -3122,11 +3126,11 @@ 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 (index.h(index.Host, { key: '3231eaa82a3976c3c0868a3ff9d8ad57d75c3419' }, index.h("kritzel-utility-panel", { key: 'ec532bbb855cadef4ea71b70393b44a0b1c217dd', style: {
+        return (index.h(index.Host, { key: '2b13783ef0f1638ad76bfcef22c17c3eeb849d67' }, index.h("kritzel-utility-panel", { key: '1babeb88133cebc9057c85723b812b99152316c6', 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(); } }), index.h("div", { key: 'a8c8ad8acba208c9dd95d7e022f41194c80cd651', 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(); } }), index.h("div", { key: '8fafebdf6726dd2bffe85cb2b3ada5f4885a2bf8', class: "kritzel-controls" }, this.controls.map(control => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (control.type === 'tool') {
                 return (index.h("button", { class: {
@@ -4784,6 +4788,9 @@ const KritzelEditor = class {
             },
         ];
         this.customSvgIcons = {};
+        this.forceUpdate = 0;
+        this.engineReady = false;
+        this.controlsReady = false;
     }
     handleTouchStart(event) {
         if (event.cancelable) {
@@ -4795,8 +4802,22 @@ const KritzelEditor = class {
             KritzelIconRegistry.register(name, svg);
         }
     }
+    handleEngineReady() {
+        this.engineReady = true;
+        this.checkReadiness();
+    }
+    handleControlsReady() {
+        this.controlsReady = true;
+        this.checkReadiness();
+    }
+    checkReadiness() {
+        if (this.engineReady && this.controlsReady) {
+            console.info('KritzelEditor is ready');
+            this.forceUpdate++;
+        }
+    }
     render() {
-        return (index.h(index.Host, { key: '233e9903879a2ce4cd725541a45ebb3a35d29509' }, index.h("kritzel-engine", { key: '5608642e19c459349157dc41047a3f44aa88e1ef' }), index.h("kritzel-controls", { key: '765c8cad9b60de5a88e7d5c920bd407fc0f50e36', controls: this.controls })));
+        return (index.h(index.Host, { key: 'cb87a19deed859ac8570f8ddaa2d393e1a43fae5' }, index.h("kritzel-engine", { key: '5ff39fddddee4cf02df2b337622ce9e97b3523a7', onEngineReady: () => this.handleEngineReady() }), index.h("kritzel-controls", { key: '97d032c051482b2d1a11ffbf7112edda7d052f51', controls: this.controls, onControlsReady: () => this.handleControlsReady() })));
     }
 };
 KritzelEditor.style = kritzelEditorCss;
@@ -4814,7 +4835,6 @@ class KritzelViewport {
         this._store.state.startY = 0;
         this._store.state.translateX = 0;
         this._store.state.translateY = 0;
-        this._store.rerender();
     }
     handleResize() {
         this._store.state.viewportWidth = this._store.state.host.clientWidth;
@@ -5666,6 +5686,7 @@ const KritzelEngine = class {
     }
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.engineReady = index.createEvent(this, "engineReady");
         this.activeToolChange = index.createEvent(this, "activeToolChange");
         this.globalContextMenuItems = [
             {
@@ -5717,6 +5738,7 @@ const KritzelEngine = class {
     }
     componentDidLoad() {
         this.viewport = new KritzelViewport(this.store, this.host);
+        this.engineReady.emit();
     }
     handleContextMenu(ev) {
         if (this.store.state.isEnabled === false) {
@@ -5908,15 +5930,15 @@ const KritzelEngine = class {
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (index.h(index.Host, { key: '657e79abc0fcfcea53e5cc2fdbf738e2528484eb' }, index.h("div", { key: '958b641575f67e0d4af485d6e016dad97f0374c5', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: 'cbcceaeb84308afd4585da4156e84e5f388e71a8' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), index.h("div", { key: '85affd2f0e73c5120184c1dcbd43c1d3f20e62fc' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), index.h("div", { key: '50c6c1c60637798619264d7fd970560f2516bdfe' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), index.h("div", { key: 'e7b8687608610ea6690e829bb7ab347789874361' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), index.h("div", { key: 'b0fef414048508caba4096d73803d4e6cf2985d5' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: '9eec781e50f6705320af1720b80a2a3437465f8e' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), index.h("div", { key: 'fdfce990c7d3e873793ba6fe96fa8c9f509cf871' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
-            _g.name), index.h("div", { key: '4f5291779f38119c0da4dd0c76cee953403a18fb' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: 'f10780190d41f893f9503e69529e4493d3a2bb53' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), index.h("div", { key: 'efdc247fc22755b6c93e29ae3cba8a3f77d9da1b' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), index.h("div", { key: '6220789e4f91b06dc16b5279e9ad7f938be2b57c' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), index.h("div", { key: '5d08a8710904e8429322f0abab9501e230269e22' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: '3bd7ad33f021ab2bc17019c9421fb66e9324e954' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'f43b598e9de8cfb46584c805f301d277e8c9756a' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '5eff9661689fc2a3af5fb1ac535d0a5bac695f7e' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: 'da8b5ee45a3d207e4c77696f938957b30c308a72' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'f958d0ef38567af150fe26637663ef85539815fe' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '8a27c1c3ee36111192b639b2e04dc3295822963b' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: 'a57c3f9874d0755131cba940bbeac4fdd1e4b42d' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.cursorX), index.h("div", { key: 'b36d278cdf15c9681d5a13bbe0d38c40fb63572f' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.cursorY)), index.h("div", { key: 'c398ac098e0d94ff7f1bd7775b48b67c80462c14', class: "origin", style: {
+        return (index.h(index.Host, { key: '81d2f8efadded214fde44f3dbaea3b678d0b182b' }, index.h("div", { key: '6657555d40bff3b5d44733e286c4076a82ca2e98', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: 'e0cf766f7e8c8e7856a6b55c9c24272fa865c86e' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), index.h("div", { key: '6c979eb953d01507fd29013d9186618f8f14588b' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), index.h("div", { key: '3be6ea4a5b5eef5d07ddc48aa8ac2e57edbe0887' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), index.h("div", { key: '70aed9d3ee1227ba2a4f54a95eda27cb748f4b9f' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), index.h("div", { key: 'c2e79c4245e9f107e5512472030684e0ed617d1a' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: '66f4284c2d4fd5dae03ffa9b641a28b2528ea117' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), index.h("div", { key: 'e4518d18cf923b57dceb38c07f409471bc178e9d' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
+            _g.name), index.h("div", { key: '47ea576f9c78f3bfb3e03649a88ec0f7b544f2d7' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: 'fe92910fd861170651688fedbdc2f15829c15a58' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), index.h("div", { key: 'cbe7e87d9a3be8acd47dd45f1b69314a8a9c536a' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), index.h("div", { key: '722a58415ae67530dfe611e03a34f30e4c1db64e' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), index.h("div", { key: 'd9686a405ee05480c17358afb865a39bd64a2346' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: '383f8e4a9e98b891507ff95416a20279e4d79431' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'fbda2b9f1ba4fe9daefb7f8b36d25d297b47a764' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: 'c1bb88c228cd6bbd2bdb0fe6bb3fd9b47d92bc2e' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '26c77aadc8cda5f27f746d0c38049d830127c81e' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: '885725248c47714a49769b94ba48a3a0f59a7f97' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '035d1c72d476ea9f8110145a25084eca59cfbedc' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: 'd6ac0024bec7d64ca327e6a5760e427e88269b8d' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.cursorX), index.h("div", { key: 'b3bdd26eb7d5ac0fdfda0f13b7d4cde9f3712954' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.cursorY)), index.h("div", { key: '186591f736514dcdb96f22d5ab3d14347a4c51ae', 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 => {
@@ -6014,7 +6036,7 @@ const KritzelEngine = class {
                         fill: 'transparent',
                         cursor: 'grab',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' })), index.h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none' } }, index.h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.debugInfoVisible ? 'block' : 'none' } }, index.h("div", { style: { width: '100%', height: '100%' } }, index.h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), index.h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), index.h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), index.h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation))))));
-            }), index.h("svg", { key: '2e49d78292a0c23413faeaefbdf0a19d0deed738', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), index.h("svg", { key: '74658c104e35b85465fdf92396d0c186e281c0d1', 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',
@@ -6023,12 +6045,12 @@ const KritzelEngine = class {
                 position: 'absolute',
                 transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
                 overflow: 'visible',
-            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, index.h("path", { key: 'ae81abc2edbc6b6458c219575b6a30d6dc9202e2', 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 && (index.h("kritzel-context-menu", { key: '8e4cc47400eb7c519e04854b67009dfd147acda6', 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 }, index.h("path", { key: '433d5372a93973ce9cb1c2033d50a14b3d1c2aa8', 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 && (index.h("kritzel-context-menu", { key: 'cb8c6876429f82da7feafc500a104a46d5d61a8b', 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 && index.h("kritzel-cursor-trail", { key: '259516bef2b2281b7427d312d01b8201508bd7e6' })));
+            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '02c049339dfc34bc6b5a3d31dfa5dc8f20520dcd' })));
     }
     get host() { return index.getElement(this); }
 };