kritzel-stencil 0.0.116 → 0.0.117

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 (34) hide show
  1. package/dist/cjs/kritzel-brush-style_18.cjs.entry.js +51 -24
  2. package/dist/cjs/kritzel-brush-style_18.cjs.entry.js.map +1 -1
  3. package/dist/cjs/loader.cjs.js +1 -1
  4. package/dist/cjs/stencil.cjs.js +1 -1
  5. package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +77 -8
  6. package/dist/collection/components/core/kritzel-editor/kritzel-editor.js.map +1 -1
  7. package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +48 -12
  8. package/dist/collection/components/core/kritzel-engine/kritzel-engine.js.map +1 -1
  9. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +6 -8
  10. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js.map +1 -1
  11. package/dist/components/index.js +1 -1
  12. package/dist/components/kritzel-controls.js +1 -1
  13. package/dist/components/kritzel-editor.js +38 -9
  14. package/dist/components/kritzel-editor.js.map +1 -1
  15. package/dist/components/kritzel-engine.js +1 -1
  16. package/dist/components/{p-o2f4ejEa.js → p-93b-eQ0s.js} +7 -9
  17. package/dist/components/p-93b-eQ0s.js.map +1 -0
  18. package/dist/components/{p-BAWNhoRC.js → p-DuWb7MaD.js} +22 -15
  19. package/dist/components/{p-BAWNhoRC.js.map → p-DuWb7MaD.js.map} +1 -1
  20. package/dist/esm/kritzel-brush-style_18.entry.js +51 -24
  21. package/dist/esm/kritzel-brush-style_18.entry.js.map +1 -1
  22. package/dist/esm/loader.js +1 -1
  23. package/dist/esm/stencil.js +1 -1
  24. package/dist/stencil/p-6c35ba88.entry.js +2 -0
  25. package/dist/stencil/p-6c35ba88.entry.js.map +1 -0
  26. package/dist/stencil/stencil.esm.js +1 -1
  27. package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts +8 -2
  28. package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +1 -0
  29. package/dist/types/components/ui/kritzel-controls/kritzel-controls.d.ts +1 -2
  30. package/dist/types/components.d.ts +6 -4
  31. package/package.json +1 -1
  32. package/dist/components/p-o2f4ejEa.js.map +0 -1
  33. package/dist/stencil/p-b626c6a2.entry.js +0 -2
  34. package/dist/stencil/p-b626c6a2.entry.js.map +0 -1
@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
6
6
  const defineCustomElements = async (win, options) => {
7
7
  if (typeof window === 'undefined') return undefined;
8
8
  await appGlobals.globalScripts();
9
- return index.bootstrapLazy([["kritzel-brush-style_18.cjs",[[0,"kritzel-editor",{"controls":[16],"customSvgIcons":[16,"custom-svg-icons"],"hideControls":[4,"hide-controls"],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64]},[[0,"dblclick","handleTouchStart"],[8,"keydown","handleKeyDown"]]],[1,"kritzel-controls",{"controls":[16],"activeControl":[1040,"active-control"],"firstConfig":[32],"tooltipVisible":[32],"isTouchDevice":[32],"closeTooltip":[64]},[[4,"activeToolChange","handleActiveToolChange"],[4,"click","handleClick"]]],[1,"kritzel-engine",{"activeTool":[16,"active-tool"],"globalContextMenuItems":[16,"global-context-menu-items"],"objectContextMenuItems":[16,"object-context-menu-items"],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"setFocus":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"moveToTop":[64],"moveToBottom":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[9,"mousedown","updateFocus"]]],[1,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[1,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":["handleToolChange"]}],[1,"kritzel-context-menu",{"items":[16]}],[1,"kritzel-utility-panel"],[1,"kritzel-cursor-trail",{"store":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[1,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16,"anchor-element"],"arrowSize":[2,"arrow-size"],"offsetY":[2,"offset-y"],"positionX":[32],"arrowOffset":[32],"isMobileView":[32]},[[9,"resize","handleWindowResize"]]],[1,"kritzel-brush-style",{"type":[1],"brushOptions":[16,"brush-options"]}],[1,"kritzel-font-family",{"fontOptions":[16,"font-options"],"selectedFontFamily":[1025,"selected-font-family"]}],[1,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[1,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[1,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[1,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[1,"kritzel-color",{"value":[1],"size":[2]}],[1,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[8,"select-styles"],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32]},null,{"value":["externalValueChanged"],"options":["optionsChanged"]}],[1,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]]], options);
9
+ return index.bootstrapLazy([["kritzel-brush-style_18.cjs",[[0,"kritzel-editor",{"controls":[16],"customSvgIcons":[16,"custom-svg-icons"],"hideControls":[4,"hide-controls"],"isEngineReady":[32],"isControlsReady":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64]},[[0,"dblclick","handleTouchStart"],[8,"keydown","handleKeyDown"]],{"isEngineReady":["onIsEngineReady"],"isControlsReady":["onIsControlsReady"]}],[1,"kritzel-controls",{"controls":[16],"activeControl":[1040,"active-control"],"firstConfig":[32],"tooltipVisible":[32],"isTouchDevice":[32],"closeTooltip":[64]},[[4,"activeToolChange","handleActiveToolChange"],[4,"click","handleClick"]]],[1,"kritzel-engine",{"activeTool":[16,"active-tool"],"globalContextMenuItems":[16,"global-context-menu-items"],"objectContextMenuItems":[16,"object-context-menu-items"],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"setFocus":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"moveToTop":[64],"moveToBottom":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[9,"mousedown","updateFocus"]]],[1,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[1,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":["handleToolChange"]}],[1,"kritzel-context-menu",{"items":[16]}],[1,"kritzel-utility-panel"],[1,"kritzel-cursor-trail",{"store":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[1,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16,"anchor-element"],"arrowSize":[2,"arrow-size"],"offsetY":[2,"offset-y"],"positionX":[32],"arrowOffset":[32],"isMobileView":[32]},[[9,"resize","handleWindowResize"]]],[1,"kritzel-brush-style",{"type":[1],"brushOptions":[16,"brush-options"]}],[1,"kritzel-font-family",{"fontOptions":[16,"font-options"],"selectedFontFamily":[1025,"selected-font-family"]}],[1,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[1,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[1,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[1,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[1,"kritzel-color",{"value":[1],"size":[2]}],[1,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[8,"select-styles"],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32]},null,{"value":["externalValueChanged"],"options":["optionsChanged"]}],[1,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]]], options);
10
10
  };
11
11
 
12
12
  exports.setNonce = index.setNonce;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
19
19
 
20
20
  patchBrowser().then(async (options) => {
21
21
  await appGlobals.globalScripts();
22
- return index.bootstrapLazy([["kritzel-brush-style_18.cjs",[[0,"kritzel-editor",{"controls":[16],"customSvgIcons":[16,"custom-svg-icons"],"hideControls":[4,"hide-controls"],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64]},[[0,"dblclick","handleTouchStart"],[8,"keydown","handleKeyDown"]]],[1,"kritzel-controls",{"controls":[16],"activeControl":[1040,"active-control"],"firstConfig":[32],"tooltipVisible":[32],"isTouchDevice":[32],"closeTooltip":[64]},[[4,"activeToolChange","handleActiveToolChange"],[4,"click","handleClick"]]],[1,"kritzel-engine",{"activeTool":[16,"active-tool"],"globalContextMenuItems":[16,"global-context-menu-items"],"objectContextMenuItems":[16,"object-context-menu-items"],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"setFocus":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"moveToTop":[64],"moveToBottom":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[9,"mousedown","updateFocus"]]],[1,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[1,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":["handleToolChange"]}],[1,"kritzel-context-menu",{"items":[16]}],[1,"kritzel-utility-panel"],[1,"kritzel-cursor-trail",{"store":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[1,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16,"anchor-element"],"arrowSize":[2,"arrow-size"],"offsetY":[2,"offset-y"],"positionX":[32],"arrowOffset":[32],"isMobileView":[32]},[[9,"resize","handleWindowResize"]]],[1,"kritzel-brush-style",{"type":[1],"brushOptions":[16,"brush-options"]}],[1,"kritzel-font-family",{"fontOptions":[16,"font-options"],"selectedFontFamily":[1025,"selected-font-family"]}],[1,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[1,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[1,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[1,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[1,"kritzel-color",{"value":[1],"size":[2]}],[1,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[8,"select-styles"],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32]},null,{"value":["externalValueChanged"],"options":["optionsChanged"]}],[1,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]]], options);
22
+ return index.bootstrapLazy([["kritzel-brush-style_18.cjs",[[0,"kritzel-editor",{"controls":[16],"customSvgIcons":[16,"custom-svg-icons"],"hideControls":[4,"hide-controls"],"isEngineReady":[32],"isControlsReady":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64]},[[0,"dblclick","handleTouchStart"],[8,"keydown","handleKeyDown"]],{"isEngineReady":["onIsEngineReady"],"isControlsReady":["onIsControlsReady"]}],[1,"kritzel-controls",{"controls":[16],"activeControl":[1040,"active-control"],"firstConfig":[32],"tooltipVisible":[32],"isTouchDevice":[32],"closeTooltip":[64]},[[4,"activeToolChange","handleActiveToolChange"],[4,"click","handleClick"]]],[1,"kritzel-engine",{"activeTool":[16,"active-tool"],"globalContextMenuItems":[16,"global-context-menu-items"],"objectContextMenuItems":[16,"object-context-menu-items"],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"setFocus":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"moveToTop":[64],"moveToBottom":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[9,"mousedown","updateFocus"]]],[1,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[1,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":["handleToolChange"]}],[1,"kritzel-context-menu",{"items":[16]}],[1,"kritzel-utility-panel"],[1,"kritzel-cursor-trail",{"store":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[1,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16,"anchor-element"],"arrowSize":[2,"arrow-size"],"offsetY":[2,"offset-y"],"positionX":[32],"arrowOffset":[32],"isMobileView":[32]},[[9,"resize","handleWindowResize"]]],[1,"kritzel-brush-style",{"type":[1],"brushOptions":[16,"brush-options"]}],[1,"kritzel-font-family",{"fontOptions":[16,"font-options"],"selectedFontFamily":[1025,"selected-font-family"]}],[1,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[1,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[1,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[1,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[1,"kritzel-color",{"value":[1],"size":[2]}],[1,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[8,"select-styles"],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32]},null,{"value":["externalValueChanged"],"options":["optionsChanged"]}],[1,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]]], options);
23
23
  });
24
24
 
25
25
  exports.setNonce = index.setNonce;
@@ -6,6 +6,18 @@ export class KritzelEditor {
6
6
  this.controls = DEFAULT_KRITZEL_CONTROLS;
7
7
  this.customSvgIcons = {};
8
8
  this.hideControls = false;
9
+ this.isEngineReady = false;
10
+ this.isControlsReady = false;
11
+ }
12
+ onIsEngineReady(newValue) {
13
+ if (newValue && this.isControlsReady) {
14
+ this.checkIsReady();
15
+ }
16
+ }
17
+ onIsControlsReady(newValue) {
18
+ if (newValue && this.isEngineReady) {
19
+ this.checkIsReady();
20
+ }
9
21
  }
10
22
  async getObjectById(id) {
11
23
  return this.engineRef.getObjectById(id);
@@ -31,6 +43,9 @@ export class KritzelEditor {
31
43
  async clearSelection() {
32
44
  this.engineRef.clearSelection();
33
45
  }
46
+ async centerObjectInViewport(object) {
47
+ return this.engineRef.centerObjectInViewport(object);
48
+ }
34
49
  handleTouchStart(event) {
35
50
  if (event.cancelable) {
36
51
  event.preventDefault();
@@ -43,13 +58,17 @@ export class KritzelEditor {
43
58
  (_a = this.controlsRef) === null || _a === void 0 ? void 0 : _a.closeTooltip();
44
59
  }
45
60
  }
46
- async onEngineReady() {
61
+ componentDidLoad() {
62
+ this.registerCustomSvgIcons();
63
+ }
64
+ async checkIsReady() {
47
65
  await customElements.whenDefined('kritzel-editor');
48
66
  await customElements.whenDefined('kritzel-controls');
49
67
  await customElements.whenDefined('kritzel-engine');
50
- this.registerCustomSvgIcons();
51
- console.log('Editor in stencil is read');
52
- this.isReady.emit();
68
+ if (!this.isEngineReady || !this.isControlsReady) {
69
+ return;
70
+ }
71
+ this.isReady.emit(this.host);
53
72
  }
54
73
  registerCustomSvgIcons() {
55
74
  for (const [name, svg] of Object.entries(this.customSvgIcons)) {
@@ -57,7 +76,7 @@ export class KritzelEditor {
57
76
  }
58
77
  }
59
78
  render() {
60
- 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' } })));
79
+ 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) })));
61
80
  }
62
81
  static get is() { return "kritzel-editor"; }
63
82
  static get originalStyleUrls() {
@@ -143,6 +162,12 @@ export class KritzelEditor {
143
162
  }
144
163
  };
145
164
  }
165
+ static get states() {
166
+ return {
167
+ "isEngineReady": {},
168
+ "isControlsReady": {}
169
+ };
170
+ }
146
171
  static get events() {
147
172
  return [{
148
173
  "method": "isReady",
@@ -155,9 +180,14 @@ export class KritzelEditor {
155
180
  "text": ""
156
181
  },
157
182
  "complexType": {
158
- "original": "boolean",
159
- "resolved": "boolean",
160
- "references": {}
183
+ "original": "HTMLElement",
184
+ "resolved": "HTMLElement",
185
+ "references": {
186
+ "HTMLElement": {
187
+ "location": "global",
188
+ "id": "global::HTMLElement"
189
+ }
190
+ }
161
191
  }
162
192
  }];
163
193
  }
@@ -376,10 +406,49 @@ export class KritzelEditor {
376
406
  "text": "",
377
407
  "tags": []
378
408
  }
409
+ },
410
+ "centerObjectInViewport": {
411
+ "complexType": {
412
+ "signature": "(object: KritzelBaseObject) => Promise<KritzelBaseObject<HTMLElement>>",
413
+ "parameters": [{
414
+ "name": "object",
415
+ "type": "KritzelBaseObject<HTMLElement>",
416
+ "docs": ""
417
+ }],
418
+ "references": {
419
+ "Promise": {
420
+ "location": "global",
421
+ "id": "global::Promise"
422
+ },
423
+ "KritzelBaseObject": {
424
+ "location": "import",
425
+ "path": "../../../classes/objects/base-object.class",
426
+ "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
427
+ },
428
+ "HTMLElement": {
429
+ "location": "global",
430
+ "id": "global::HTMLElement"
431
+ }
432
+ },
433
+ "return": "Promise<KritzelBaseObject<HTMLElement>>"
434
+ },
435
+ "docs": {
436
+ "text": "",
437
+ "tags": []
438
+ }
379
439
  }
380
440
  };
381
441
  }
382
442
  static get elementRef() { return "host"; }
443
+ static get watchers() {
444
+ return [{
445
+ "propName": "isEngineReady",
446
+ "methodName": "onIsEngineReady"
447
+ }, {
448
+ "propName": "isControlsReady",
449
+ "methodName": "onIsControlsReady"
450
+ }];
451
+ }
383
452
  static get listeners() {
384
453
  return [{
385
454
  "name": "dblclick",
@@ -1 +1 @@
1
- {"version":3,"file":"kritzel-editor.js","sourceRoot":"","sources":["../../../../src/components/core/kritzel-editor/kritzel-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, Element, h, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelIconRegistry } from '../../../classes/registries/icon-registry.class';\r\nimport { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';\r\nimport { DEFAULT_KRITZEL_CONTROLS } from '../../../configs/default-toolbar-controls';\r\nimport { KritzelBaseObject } from '../../../classes/objects/base-object.class';\r\n@Component({\r\n tag: 'kritzel-editor',\r\n styleUrl: 'kritzel-editor.css',\r\n shadow: false,\r\n})\r\nexport class KritzelEditor {\r\n @Prop()\r\n controls: KritzelToolbarControl[] = DEFAULT_KRITZEL_CONTROLS;\r\n\r\n @Prop()\r\n customSvgIcons: Record<string, string> = {};\r\n\r\n @Prop()\r\n hideControls: boolean = false;\r\n\r\n @Event()\r\n isReady: EventEmitter<boolean>;\r\n\r\n @Element()\r\n host!: HTMLElement;\r\n\r\n @Method()\r\n async getObjectById<T extends KritzelBaseObject>(id: string): Promise<T | null> {\r\n return this.engineRef.getObjectById(id);\r\n }\r\n\r\n @Method()\r\n async addObject<T extends KritzelBaseObject>(object: T): Promise<T | null> {\r\n return this.engineRef.addObject(object);\r\n }\r\n\r\n @Method()\r\n async updateObject<T extends KritzelBaseObject>(object: T, updatedProperties: Partial<T>): Promise<T | null> {\r\n return this.engineRef.updateObject(object, updatedProperties);\r\n }\r\n\r\n @Method()\r\n async removeObject<T extends KritzelBaseObject>(object: T): Promise<T | null> {\r\n return this.engineRef.removeObject(object);\r\n }\r\n\r\n @Method()\r\n async getSelectedObjects(): Promise<KritzelBaseObject[]> {\r\n return this.engineRef.getSelectedObjects();\r\n }\r\n\r\n @Method()\r\n async selectObjects(objects: KritzelBaseObject[]) {\r\n return this.engineRef.selectObjects(objects);\r\n }\r\n\r\n @Method()\r\n async selectAllObjectsInViewport() {\r\n return this.engineRef.selectAllObjectsInViewport();\r\n }\r\n\r\n @Method()\r\n async clearSelection() {\r\n this.engineRef.clearSelection();\r\n }\r\n\r\n @Listen('dblclick', { passive: false })\r\n handleTouchStart(event: TouchEvent) {\r\n if (event.cancelable) {\r\n event.preventDefault();\r\n }\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.controlsRef?.closeTooltip();\r\n }\r\n }\r\n\r\n engineRef!: HTMLKritzelEngineElement;\r\n\r\n controlsRef!: HTMLKritzelControlsElement;\r\n\r\n async onEngineReady() {\r\n await customElements.whenDefined('kritzel-editor');\r\n await customElements.whenDefined('kritzel-controls');\r\n await customElements.whenDefined('kritzel-engine');\r\n\r\n this.registerCustomSvgIcons();\r\n\r\n console.log('Editor in stencil is read');\r\n this.isReady.emit();\r\n }\r\n\r\n private registerCustomSvgIcons() {\r\n for (const [name, svg] of Object.entries(this.customSvgIcons)) {\r\n KritzelIconRegistry.register(name, svg);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <kritzel-engine ref={el => (this.engineRef = el)} onIsEngineReady={() => this.onEngineReady()}></kritzel-engine>\r\n <kritzel-controls ref={el => (this.controlsRef = el)} controls={this.controls} style={this.hideControls ? { display: 'none' } : { display: 'flex' }}></kritzel-controls>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"kritzel-editor.js","sourceRoot":"","sources":["../../../../src/components/core/kritzel-editor/kritzel-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, Element, h, Method, Event, State, EventEmitter, Watch } from '@stencil/core';\r\nimport { KritzelIconRegistry } from '../../../classes/registries/icon-registry.class';\r\nimport { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';\r\nimport { DEFAULT_KRITZEL_CONTROLS } from '../../../configs/default-toolbar-controls';\r\nimport { KritzelBaseObject } from '../../../classes/objects/base-object.class';\r\n@Component({\r\n tag: 'kritzel-editor',\r\n styleUrl: 'kritzel-editor.css',\r\n shadow: false,\r\n})\r\nexport class KritzelEditor {\r\n @Prop()\r\n controls: KritzelToolbarControl[] = DEFAULT_KRITZEL_CONTROLS;\r\n\r\n @Prop()\r\n customSvgIcons: Record<string, string> = {};\r\n\r\n @Prop()\r\n hideControls: boolean = false;\r\n\r\n @Event()\r\n isReady: EventEmitter<HTMLElement>;\r\n\r\n @Element()\r\n host!: HTMLElement;\r\n\r\n @State()\r\n isEngineReady: boolean = false;\r\n\r\n @State()\r\n isControlsReady: boolean = false;\r\n\r\n @Watch('isEngineReady')\r\n onIsEngineReady(newValue: boolean) {\r\n if (newValue && this.isControlsReady) {\r\n this.checkIsReady();\r\n }\r\n }\r\n\r\n @Watch('isControlsReady')\r\n onIsControlsReady(newValue: boolean) {\r\n if (newValue && this.isEngineReady) {\r\n this.checkIsReady();\r\n }\r\n }\r\n\r\n @Method()\r\n async getObjectById<T extends KritzelBaseObject>(id: string): Promise<T | null> {\r\n return this.engineRef.getObjectById(id);\r\n }\r\n\r\n @Method()\r\n async addObject<T extends KritzelBaseObject>(object: T): Promise<T | null> {\r\n return this.engineRef.addObject(object);\r\n }\r\n\r\n @Method()\r\n async updateObject<T extends KritzelBaseObject>(object: T, updatedProperties: Partial<T>): Promise<T | null> {\r\n return this.engineRef.updateObject(object, updatedProperties);\r\n }\r\n\r\n @Method()\r\n async removeObject<T extends KritzelBaseObject>(object: T): Promise<T | null> {\r\n return this.engineRef.removeObject(object);\r\n }\r\n\r\n @Method()\r\n async getSelectedObjects(): Promise<KritzelBaseObject[]> {\r\n return this.engineRef.getSelectedObjects();\r\n }\r\n\r\n @Method()\r\n async selectObjects(objects: KritzelBaseObject[]) {\r\n return this.engineRef.selectObjects(objects);\r\n }\r\n\r\n @Method()\r\n async selectAllObjectsInViewport() {\r\n return this.engineRef.selectAllObjectsInViewport();\r\n }\r\n\r\n @Method()\r\n async clearSelection() {\r\n this.engineRef.clearSelection();\r\n }\r\n\r\n @Method()\r\n async centerObjectInViewport(object: KritzelBaseObject) {\r\n return this.engineRef.centerObjectInViewport(object);\r\n }\r\n\r\n @Listen('dblclick', { passive: false })\r\n handleTouchStart(event: TouchEvent) {\r\n if (event.cancelable) {\r\n event.preventDefault();\r\n }\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.controlsRef?.closeTooltip();\r\n }\r\n }\r\n\r\n engineRef!: HTMLKritzelEngineElement;\r\n\r\n controlsRef!: HTMLKritzelControlsElement;\r\n\r\n componentDidLoad() {\r\n this.registerCustomSvgIcons();\r\n }\r\n\r\n async checkIsReady() {\r\n await customElements.whenDefined('kritzel-editor');\r\n await customElements.whenDefined('kritzel-controls');\r\n await customElements.whenDefined('kritzel-engine');\r\n\r\n if (!this.isEngineReady || !this.isControlsReady) {\r\n return;\r\n }\r\n\r\n this.isReady.emit(this.host);\r\n }\r\n\r\n private registerCustomSvgIcons() {\r\n for (const [name, svg] of Object.entries(this.customSvgIcons)) {\r\n KritzelIconRegistry.register(name, svg);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <kritzel-engine ref={el => (this.engineRef = el)} onIsEngineReady={() => (this.isEngineReady = true)}></kritzel-engine>\r\n <kritzel-controls\r\n ref={el => (this.controlsRef = el)}\r\n controls={this.controls}\r\n style={this.hideControls ? { display: 'none' } : { display: 'flex' }}\r\n onIsControlsReady={() => (this.isControlsReady = true)}\r\n ></kritzel-controls>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
@@ -276,21 +276,27 @@ export class KritzelEngine {
276
276
  async clearSelection() {
277
277
  this.store.clearSelection();
278
278
  }
279
+ async centerObjectInViewport(object) {
280
+ object.centerInViewport();
281
+ const command = new UpdateObjectCommand(this.store, this, object, object);
282
+ this.store.history.executeCommand(command);
283
+ return object;
284
+ }
279
285
  render() {
280
286
  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;
281
287
  const computedStyle = window.getComputedStyle(this.host);
282
288
  const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
283
289
  const baseHandleSize = parseFloat(baseHandleSizePx);
284
290
  const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
285
- 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 :
286
- _a.translateX), h("div", { key: 'df5b645b782fdce83c54361aca038a5a638183cd' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
287
- _b.translateY), h("div", { key: '12c251313bac25cf0d99090306e269e81949e168' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
288
- _c.viewportWidth), h("div", { key: '48bcc8b9318e9ff1ad97ac34c6a1b7bca6b23443' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
289
- _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 :
290
- _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 :
291
- _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 :
292
- _m.cursorX), h("div", { key: '434f4eafc7182f48bf90390ae719ddc46d3bec48' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
293
- _o.cursorY)), h("div", { key: '7997269880dab3dbc8b920f340a3ed01127bd5bf', class: "origin", style: {
291
+ 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 :
292
+ _a.translateX), h("div", { key: 'e3d853e7e11c32bf5f801c29a0ed9add91ce24c3' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
293
+ _b.translateY), h("div", { key: '7ada7c0c256bbdc79b2b74b391c87a319c9aaf05' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
294
+ _c.viewportWidth), h("div", { key: '156ed10ab63bbacf30d549f115d82beeb6e714d5' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
295
+ _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 :
296
+ _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 :
297
+ _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 :
298
+ _m.cursorX), h("div", { key: 'f549e8faa3ddad5b3294bb72f24ad3735539e84b' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
299
+ _o.cursorY)), h("div", { key: 'e81679812ed19a50a09357549df00e590ae613b6', class: "origin", style: {
294
300
  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})`,
295
301
  } }, (_t = this.store.objects) === null || _t === void 0 ? void 0 :
296
302
  _t.map(object => {
@@ -387,7 +393,7 @@ export class KritzelEngine {
387
393
  fill: 'transparent',
388
394
  cursor: 'grab',
389
395
  }, 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)))))));
390
- }), h("svg", { key: '637b9098b88f3ecc36794d64bb205a3f26500598', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
396
+ }), h("svg", { key: 'bf2c561803773e19aed36d418e96b9f797c305be', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
391
397
  height: (_u = this.store.state.currentPath) === null || _u === void 0 ? void 0 : _u.height.toString(),
392
398
  width: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.width.toString(),
393
399
  left: '0',
@@ -397,12 +403,12 @@ export class KritzelEngine {
397
403
  transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
398
404
  transformOrigin: 'top left',
399
405
  overflow: 'visible',
400
- }, 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: {
406
+ }, 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: {
401
407
  position: 'fixed',
402
408
  left: `${this.store.state.contextMenuX}px`,
403
409
  top: `${this.store.state.contextMenuY}px`,
404
410
  zIndex: '10000',
405
- }, 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 })));
411
+ }, 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 })));
406
412
  }
407
413
  static get is() { return "kritzel-engine"; }
408
414
  static get encapsulation() { return "shadow"; }
@@ -1084,6 +1090,36 @@ export class KritzelEngine {
1084
1090
  "text": "",
1085
1091
  "tags": []
1086
1092
  }
1093
+ },
1094
+ "centerObjectInViewport": {
1095
+ "complexType": {
1096
+ "signature": "(object: KritzelBaseObject) => Promise<KritzelBaseObject<HTMLElement>>",
1097
+ "parameters": [{
1098
+ "name": "object",
1099
+ "type": "KritzelBaseObject<HTMLElement>",
1100
+ "docs": ""
1101
+ }],
1102
+ "references": {
1103
+ "Promise": {
1104
+ "location": "global",
1105
+ "id": "global::Promise"
1106
+ },
1107
+ "KritzelBaseObject": {
1108
+ "location": "import",
1109
+ "path": "../../../classes/objects/base-object.class",
1110
+ "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject"
1111
+ },
1112
+ "HTMLElement": {
1113
+ "location": "global",
1114
+ "id": "global::HTMLElement"
1115
+ }
1116
+ },
1117
+ "return": "Promise<KritzelBaseObject<HTMLElement>>"
1118
+ },
1119
+ "docs": {
1120
+ "text": "",
1121
+ "tags": []
1122
+ }
1087
1123
  }
1088
1124
  };
1089
1125
  }