kritzel-stencil 0.0.111 → 0.0.112

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 +36 -27
  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/classes/handlers/context-menu.handler.js +4 -0
  6. package/dist/collection/classes/handlers/context-menu.handler.js.map +1 -1
  7. package/dist/collection/classes/handlers/key.handler.js +1 -3
  8. package/dist/collection/classes/handlers/key.handler.js.map +1 -1
  9. package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +14 -1
  10. package/dist/collection/components/core/kritzel-editor/kritzel-editor.js.map +1 -1
  11. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +44 -23
  12. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js.map +1 -1
  13. package/dist/components/kritzel-controls.js +1 -1
  14. package/dist/components/kritzel-editor.js +11 -4
  15. package/dist/components/kritzel-editor.js.map +1 -1
  16. package/dist/components/kritzel-engine.js +1 -1
  17. package/dist/components/{p-CB9PaoF-.js → p--2WHhuBI.js} +7 -5
  18. package/dist/components/{p-CB9PaoF-.js.map → p--2WHhuBI.js.map} +1 -1
  19. package/dist/components/{p-c5feBXbv.js → p-BnsTGnvc.js} +27 -26
  20. package/dist/components/p-BnsTGnvc.js.map +1 -0
  21. package/dist/esm/kritzel-brush-style_18.entry.js +36 -27
  22. package/dist/esm/kritzel-brush-style_18.entry.js.map +1 -1
  23. package/dist/esm/loader.js +1 -1
  24. package/dist/esm/stencil.js +1 -1
  25. package/dist/stencil/p-65e86254.entry.js +2 -0
  26. package/dist/stencil/p-65e86254.entry.js.map +1 -0
  27. package/dist/stencil/stencil.esm.js +1 -1
  28. package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts +1 -0
  29. package/dist/types/components/ui/kritzel-controls/kritzel-controls.d.ts +6 -6
  30. package/dist/types/components.d.ts +1 -0
  31. package/package.json +1 -1
  32. package/dist/components/p-c5feBXbv.js.map +0 -1
  33. package/dist/stencil/p-dc8da7cf.entry.js +0 -2
  34. package/dist/stencil/p-dc8da7cf.entry.js.map +0 -1
package/dist/components/{p-c5feBXbv.js → p-BnsTGnvc.js} RENAMED
@@ -35,6 +35,25 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
35
35
  this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
36
36
  this.kritzelEngine = null;
37
37
  }
38
+ async handleActiveToolChange(event) {
39
+ var _a;
40
+ this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
41
+ await ((_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.setFocus());
42
+ }
43
+ handleClick(event) {
44
+ const element = event.target;
45
+ if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
46
+ return;
47
+ }
48
+ this.tooltipVisible = false;
49
+ this.kritzelEngine.enable();
50
+ }
51
+ async closeTooltip() {
52
+ var _a, _b;
53
+ this.tooltipVisible = false;
54
+ (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.enable();
55
+ (_b = this.kritzelEngine) === null || _b === void 0 ? void 0 : _b.setFocus();
56
+ }
38
57
  get activeToolAsTextTool() {
39
58
  var _a;
40
59
  return (_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.tool;
@@ -76,25 +95,6 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
76
95
  }
77
96
  }
78
97
  }
79
- async handleActiveToolChange(event) {
80
- var _a;
81
- this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
82
- await ((_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.setFocus());
83
- }
84
- handleClick(event) {
85
- const element = event.target;
86
- if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
87
- return;
88
- }
89
- this.tooltipVisible = false;
90
- this.kritzelEngine.enable();
91
- }
92
- preventDefault(event) {
93
- if (event.cancelable) {
94
- event.preventDefault();
95
- event.stopPropagation();
96
- }
97
- }
98
98
  async handleControlClick(control) {
99
99
  this.activeControl = control;
100
100
  if (this.activeControl.type === 'tool') {
@@ -113,18 +113,18 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
113
113
  render() {
114
114
  var _a, _b;
115
115
  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;
116
- return (h(Host, { key: 'e5bfc1952235cb3524849733015d14e629f36f9d', class: {
116
+ return (h(Host, { key: 'b0ed601253a0f6187e601afd2fb56bdbc7d5a9cd', class: {
117
117
  mobile: this.isTouchDevice,
118
- } }, h("kritzel-utility-panel", { key: '8b89423a1d1d4d93945f774f0867b2fd8bd4b0bf', style: {
118
+ } }, h("kritzel-utility-panel", { key: 'a8621ccdc3186a3f6ac6d9b5aa9ee6d92401e5d9', style: {
119
119
  position: 'absolute',
120
120
  bottom: '56px',
121
121
  left: '12px',
122
- }, 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: '8b58a76ff194663f312cfe55fd3e29e78b8067d1', class: "kritzel-controls" }, this.controls.map(control => {
122
+ }, 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: 'ade9f5ee7b854eac1d4497c4f3e5e3cd6a2f1f7f', class: "kritzel-controls" }, this.controls.map(control => {
123
123
  var _a, _b, _c, _d, _e, _f, _g, _h;
124
124
  if (control.type === 'tool') {
125
125
  return (h("button", { class: {
126
126
  'kritzel-control': true,
127
- selected: ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.name) === (control === null || control === void 0 ? void 0 : control.name),
127
+ 'selected': ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.name) === (control === null || control === void 0 ? void 0 : control.name),
128
128
  }, key: control.name, onClick: _event => { var _a; return (_a = this.handleControlClick) === null || _a === void 0 ? void 0 : _a.call(this, control); } }, h("kritzel-icon", { name: control.icon })));
129
129
  }
130
130
  if (control.type === 'divider') {
@@ -149,7 +149,8 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
149
149
  "activeControl": [1040, "active-control"],
150
150
  "firstConfig": [32],
151
151
  "tooltipVisible": [32],
152
- "isTouchDevice": [32]
152
+ "isTouchDevice": [32],
153
+ "closeTooltip": [64]
153
154
  }, [[4, "activeToolChange", "handleActiveToolChange"], [4, "click", "handleClick"]]]);
154
155
  function defineCustomElement() {
155
156
  if (typeof customElements === "undefined") {
@@ -231,6 +232,6 @@ function defineCustomElement() {
231
232
  }
232
233
 
233
234
  export { KritzelControls as K, defineCustomElement as d };
234
- //# sourceMappingURL=p-c5feBXbv.js.map
235
+ //# sourceMappingURL=p-BnsTGnvc.js.map
235
236
 
236
- //# sourceMappingURL=p-c5feBXbv.js.map
237
+ //# sourceMappingURL=p-BnsTGnvc.js.map
package/dist/components/p-BnsTGnvc.js.map ADDED
@@ -0,0 +1 @@
1
+ {"file":"p-BnsTGnvc.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/helpers/devices.helper.ts","src/components/ui/kritzel-controls/kritzel-controls.css?tag=kritzel-controls&encapsulation=shadow","src/components/ui/kritzel-controls/kritzel-controls.tsx"],"sourcesContent":["export class KritzelDevicesHelper {\r\n static isTouchDevice(): boolean {\r\n return window.matchMedia('(any-pointer: coarse)').matches;\r\n }\r\n}",":host {\r\n display: flex;\r\n flex-direction: column;\r\n user-select: none;\r\n}\r\n\r\n.kritzel-controls {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: flex-start;\r\n gap: var(--kritzel-controls-gap, 8px);\r\n height: 100%;\r\n padding: var(--kritzel-controls-padding, 8px);\r\n background-color: var(--kritzel-controls-background-color, #ffffff);\r\n border-radius: var(--kritzel-controls-border-radius, 8px);\r\n box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n border: var(--kritzel-controls-border, 1px solid hsl(0, 0%, 0%, 4.3%));\r\n border-radius: var(--kritzel-controls-border-radius, 8px);\r\n z-index: 10000;\r\n position: relative;\r\n}\r\n\r\n.kritzel-control {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n color: var(--kritzel-controls-control-color, #000000);\r\n border-radius: var(--kritzel-controls-control-border-radius, 8px);\r\n padding: var(--kritzel-controls-control-padding, 8px);\r\n border: none;\r\n outline: none;\r\n background: none;\r\n cursor: pointer;\r\n -webkit-tap-highlight-color: transparent;\r\n font-weight: bold;\r\n}\r\n\r\n.kritzel-control:hover {\r\n background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:host(.mobile) .kritzel-control:hover {\r\n background-color: unset;\r\n}\r\n\r\n.kritzel-control:active {\r\n background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n:host(.mobile) .kritzel-control:active {\r\n background-color: unset;\r\n}\r\n\r\n.kritzel-control.selected,\r\n.kritzel-control.selected:hover,\r\n.kritzel-control.selected:active {\r\n background-color: var(--kritzel-controls-control-selected-background-color, #0E1111) !important;\r\n color: var(--kritzel-controls-control-selected-color, #ffffff) !important;\r\n}\r\n\r\n.kritzel-divider {\r\n width: var(--kritzel-controls-divider-width, 1px);\r\n height: var(--kritzel-controls-divider-height, 24px);\r\n background-color: var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.kritzel-config-container {\r\n position: relative;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 40px;\r\n height: 40px;\r\n box-sizing: border-box;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.kritzel-config {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n}\r\n\r\n.color-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n border: 2px solid transparent;\r\n box-sizing: border-box;\r\n background-color: var(--kritzel-color-palette-hover-background-color, #f0f0f0);\r\n}\r\n\r\n.font-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n border: 2px solid transparent;\r\n box-sizing: border-box;\r\n background-color: var(--kritzel-color-palette-hover-background-color, #f0f0f0);\r\n}\r\n\r\n.no-config {\r\n height: 24px;\r\n width: 24px;\r\n border-radius: 50%;\r\n border: 1px dashed gray;\r\n}\r\n\r\nkritzel-tooltip {\r\n position: fixed;\r\n bottom: 66px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 10001;\r\n}\r\n","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 @Event()\r\n controlsReady: EventEmitter<void>;\r\n\r\n @State()\r\n firstConfig: ToolConfig | null = null;\r\n\r\n @State()\r\n tooltipVisible: 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.tooltipVisible = false;\r\n this.kritzelEngine.enable();\r\n }\r\n\r\n @Method()\r\n async closeTooltip() {\r\n this.tooltipVisible = false;\r\n this.kritzelEngine?.enable();\r\n this.kritzelEngine?.setFocus();\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 }\r\n\r\n componentDidLoad() {\r\n this.controlsReady.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.tooltipVisible = !this.tooltipVisible;\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 <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 <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.tooltipVisible} 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"],"version":3}
package/dist/esm/kritzel-brush-style_18.entry.js CHANGED
@@ -1130,6 +1130,25 @@ const KritzelControls = class {
1130
1130
  this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
1131
1131
  this.kritzelEngine = null;
1132
1132
  }
1133
+ async handleActiveToolChange(event) {
1134
+ var _a;
1135
+ this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
1136
+ await ((_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.setFocus());
1137
+ }
1138
+ handleClick(event) {
1139
+ const element = event.target;
1140
+ if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
1141
+ return;
1142
+ }
1143
+ this.tooltipVisible = false;
1144
+ this.kritzelEngine.enable();
1145
+ }
1146
+ async closeTooltip() {
1147
+ var _a, _b;
1148
+ this.tooltipVisible = false;
1149
+ (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.enable();
1150
+ (_b = this.kritzelEngine) === null || _b === void 0 ? void 0 : _b.setFocus();
1151
+ }
1133
1152
  get activeToolAsTextTool() {
1134
1153
  var _a;
1135
1154
  return (_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.tool;
@@ -1171,25 +1190,6 @@ const KritzelControls = class {
1171
1190
  }
1172
1191
  }
1173
1192
  }
1174
- async handleActiveToolChange(event) {
1175
- var _a;
1176
- this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
1177
- await ((_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.setFocus());
1178
- }
1179
- handleClick(event) {
1180
- const element = event.target;
1181
- if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
1182
- return;
1183
- }
1184
- this.tooltipVisible = false;
1185
- this.kritzelEngine.enable();
1186
- }
1187
- preventDefault(event) {
1188
- if (event.cancelable) {
1189
- event.preventDefault();
1190
- event.stopPropagation();
1191
- }
1192
- }
1193
1193
  async handleControlClick(control) {
1194
1194
  this.activeControl = control;
1195
1195
  if (this.activeControl.type === 'tool') {
@@ -1208,18 +1208,18 @@ const KritzelControls = class {
1208
1208
  render() {
1209
1209
  var _a, _b;
1210
1210
  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;
1211
- return (h(Host, { key: 'e5bfc1952235cb3524849733015d14e629f36f9d', class: {
1211
+ return (h(Host, { key: 'b0ed601253a0f6187e601afd2fb56bdbc7d5a9cd', class: {
1212
1212
  mobile: this.isTouchDevice,
1213
- } }, h("kritzel-utility-panel", { key: '8b89423a1d1d4d93945f774f0867b2fd8bd4b0bf', style: {
1213
+ } }, h("kritzel-utility-panel", { key: 'a8621ccdc3186a3f6ac6d9b5aa9ee6d92401e5d9', style: {
1214
1214
  position: 'absolute',
1215
1215
  bottom: '56px',
1216
1216
  left: '12px',
1217
- }, 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: '8b58a76ff194663f312cfe55fd3e29e78b8067d1', class: "kritzel-controls" }, this.controls.map(control => {
1217
+ }, 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: 'ade9f5ee7b854eac1d4497c4f3e5e3cd6a2f1f7f', class: "kritzel-controls" }, this.controls.map(control => {
1218
1218
  var _a, _b, _c, _d, _e, _f, _g, _h;
1219
1219
  if (control.type === 'tool') {
1220
1220
  return (h("button", { class: {
1221
1221
  'kritzel-control': true,
1222
- selected: ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.name) === (control === null || control === void 0 ? void 0 : control.name),
1222
+ 'selected': ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.name) === (control === null || control === void 0 ? void 0 : control.name),
1223
1223
  }, key: control.name, onClick: _event => { var _a; return (_a = this.handleControlClick) === null || _a === void 0 ? void 0 : _a.call(this, control); } }, h("kritzel-icon", { name: control.icon })));
1224
1224
  }
1225
1225
  if (control.type === 'divider') {
@@ -2930,6 +2930,13 @@ const KritzelEditor = class {
2930
2930
  event.preventDefault();
2931
2931
  }
2932
2932
  }
2933
+ handleKeyDown(ev) {
2934
+ var _a;
2935
+ ev.preventDefault();
2936
+ if (ev.key === 'Escape') {
2937
+ (_a = this.controlsRef) === null || _a === void 0 ? void 0 : _a.closeTooltip();
2938
+ }
2939
+ }
2933
2940
  componentWillLoad() {
2934
2941
  this.registerCustomSvgIcons();
2935
2942
  }
@@ -2939,7 +2946,7 @@ const KritzelEditor = class {
2939
2946
  }
2940
2947
  }
2941
2948
  render() {
2942
- return (h(Host, { key: '74206218105a7675872539955729e9329573b83b' }, h("kritzel-engine", { key: '596be73738bdfcbd04472a3ffef2e7ace393c94e', ref: el => (this.engineRef = el) }), h("kritzel-controls", { key: '95701130a74395c27c07c56eb74294074261a8be', ref: el => (this.controlsRef = el), controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' } })));
2949
+ return (h(Host, { key: 'b861ac259f78cf3a4a7070ce2e54a731414a8c08' }, h("kritzel-engine", { key: '026f2caba18bce0b0453b904616d9baa455592d9', ref: el => (this.engineRef = el) }), h("kritzel-controls", { key: 'afc78be61bfddeafd3650f7a383ad4a1847fa3b5', ref: el => (this.controlsRef = el), controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' } })));
2943
2950
  }
2944
2951
  get host() { return getElement(this); }
2945
2952
  };
@@ -3659,10 +3666,8 @@ class KritzelKeyHandler extends KritzelBaseHandler {
3659
3666
  if (this._store.state.isFocused === false) {
3660
3667
  return;
3661
3668
  }
3669
+ event.preventDefault();
3662
3670
  this._store.state.isCtrlKeyPressed = event.ctrlKey;
3663
- if (this._store.state.isCtrlKeyPressed) {
3664
- event.preventDefault();
3665
- }
3666
3671
  if (event.key === 'Escape' && this._store.state.selectionGroup) {
3667
3672
  this._store.clearSelection();
3668
3673
  }
@@ -3738,6 +3743,10 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
3738
3743
  this.objectContextMenuItems = objectContextMenuItems;
3739
3744
  }
3740
3745
  handleContextMenu(event) {
3746
+ if (this._store.state.skipContextMenu) {
3747
+ this._store.state.skipContextMenu = false;
3748
+ return;
3749
+ }
3741
3750
  const selectedObject = this._store.getObjectFromPointerEvent(event, '.object');
3742
3751
  if (selectedObject && !(selectedObject instanceof KritzelSelectionGroup)) {
3743
3752
  this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);