kritzel-stencil 0.0.116 → 0.0.118
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.
- package/dist/cjs/kritzel-brush-style_18.cjs.entry.js +51 -24
- package/dist/cjs/kritzel-brush-style_18.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/stencil.cjs.js +1 -1
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +77 -8
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.js.map +1 -1
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +48 -12
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js.map +1 -1
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +6 -8
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js.map +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/kritzel-controls.js +1 -1
- package/dist/components/kritzel-editor.js +38 -9
- package/dist/components/kritzel-editor.js.map +1 -1
- package/dist/components/kritzel-engine.js +1 -1
- package/dist/components/{p-o2f4ejEa.js → p-93b-eQ0s.js} +7 -9
- package/dist/components/p-93b-eQ0s.js.map +1 -0
- package/dist/components/{p-BAWNhoRC.js → p-DuWb7MaD.js} +22 -15
- package/dist/components/{p-BAWNhoRC.js.map → p-DuWb7MaD.js.map} +1 -1
- package/dist/esm/kritzel-brush-style_18.entry.js +51 -24
- package/dist/esm/kritzel-brush-style_18.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stencil.js +1 -1
- package/dist/stencil/p-6c35ba88.entry.js +2 -0
- package/dist/stencil/p-6c35ba88.entry.js.map +1 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts +8 -2
- package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +1 -0
- package/dist/types/components/ui/kritzel-controls/kritzel-controls.d.ts +1 -2
- package/dist/types/components.d.ts +6 -4
- package/package.json +1 -1
- package/dist/components/p-o2f4ejEa.js.map +0 -1
- package/dist/stencil/p-b626c6a2.entry.js +0 -2
- package/dist/stencil/p-b626c6a2.entry.js.map +0 -1
|
@@ -27,7 +27,7 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
|
|
|
27
27
|
super();
|
|
28
28
|
this.__registerHost();
|
|
29
29
|
this.__attachShadow();
|
|
30
|
-
this.
|
|
30
|
+
this.isControlsReady = createEvent(this, "isControlsReady");
|
|
31
31
|
this.controls = [];
|
|
32
32
|
this.activeControl = null;
|
|
33
33
|
this.firstConfig = null;
|
|
@@ -64,9 +64,7 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
|
|
|
64
64
|
async componentWillLoad() {
|
|
65
65
|
await this.initializeEngine();
|
|
66
66
|
await this.initializeTools();
|
|
67
|
-
|
|
68
|
-
componentDidLoad() {
|
|
69
|
-
this.controlsReady.emit();
|
|
67
|
+
this.isControlsReady.emit();
|
|
70
68
|
}
|
|
71
69
|
async initializeEngine() {
|
|
72
70
|
await customElements.whenDefined('kritzel-engine');
|
|
@@ -112,13 +110,13 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
|
|
|
112
110
|
render() {
|
|
113
111
|
var _a, _b;
|
|
114
112
|
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;
|
|
115
|
-
return (h(Host, { key: '
|
|
113
|
+
return (h(Host, { key: 'fecdf68cef50c38670d8117cd4da92b572c940a5', class: {
|
|
116
114
|
mobile: this.isTouchDevice,
|
|
117
|
-
} }, h("kritzel-utility-panel", { key: '
|
|
115
|
+
} }, h("kritzel-utility-panel", { key: '82c6af0d540137a2c24aac659f41e24b783b6555', style: {
|
|
118
116
|
position: 'absolute',
|
|
119
117
|
bottom: '56px',
|
|
120
118
|
left: '12px',
|
|
121
|
-
}, 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: '
|
|
119
|
+
}, 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 => {
|
|
122
120
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
123
121
|
if (control.type === 'tool') {
|
|
124
122
|
return (h("button", { class: {
|
|
@@ -231,6 +229,6 @@ function defineCustomElement() {
|
|
|
231
229
|
}
|
|
232
230
|
|
|
233
231
|
export { KritzelControls as K, defineCustomElement as d };
|
|
234
|
-
//# sourceMappingURL=p-
|
|
232
|
+
//# sourceMappingURL=p-93b-eQ0s.js.map
|
|
235
233
|
|
|
236
|
-
//# sourceMappingURL=p-
|
|
234
|
+
//# sourceMappingURL=p-93b-eQ0s.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-93b-eQ0s.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, 16px);\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 #f0f0f0);\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, 12px);\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 isControlsReady: 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 }\r\n\r\n kritzelEngine: HTMLKritzelEngineElement | null = null;\r\n\r\n get activeToolAsTextTool() {\r\n return this.activeControl?.tool as KritzelTextTool;\r\n }\r\n\r\n get activeToolAsBrushTool() {\r\n return this.activeControl?.tool as KritzelBrushTool;\r\n }\r\n\r\n async componentWillLoad() {\r\n await this.initializeEngine();\r\n await this.initializeTools();\r\n this.isControlsReady.emit();\r\n }\r\n\r\n private async initializeEngine() {\r\n await customElements.whenDefined('kritzel-engine');\r\n this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n if (!this.kritzelEngine) {\r\n throw new Error('kritzel-engine not found in parent element.');\r\n }\r\n }\r\n\r\n private async initializeTools() {\r\n for (const c of this.controls) {\r\n if (c.type === 'tool' && c.tool) {\r\n c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);\r\n }\r\n\r\n if (c.type === 'tool' && c.isDefault && c.tool) {\r\n await this.kritzelEngine.changeActiveTool(c.tool as KritzelBaseTool);\r\n this.activeControl = c;\r\n }\r\n\r\n if (c.type === 'config') {\r\n if (this.firstConfig === null) {\r\n this.firstConfig = c;\r\n } else {\r\n console.warn('Only one config control is allowed. The first one will be used.');\r\n }\r\n }\r\n }\r\n }\r\n\r\n private async handleControlClick(control: KritzelToolbarControl) {\r\n this.activeControl = control;\r\n\r\n if (this.activeControl.type === 'tool') {\r\n await this.kritzelEngine.changeActiveTool(this.activeControl.tool as KritzelBaseTool);\r\n }\r\n }\r\n\r\n private handleConfigClick(event: MouseEvent) {\r\n event.stopPropagation();\r\n this.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}
|
|
@@ -2434,21 +2434,27 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
|
|
|
2434
2434
|
async clearSelection() {
|
|
2435
2435
|
this.store.clearSelection();
|
|
2436
2436
|
}
|
|
2437
|
+
async centerObjectInViewport(object) {
|
|
2438
|
+
object.centerInViewport();
|
|
2439
|
+
const command = new UpdateObjectCommand(this.store, this, object, object);
|
|
2440
|
+
this.store.history.executeCommand(command);
|
|
2441
|
+
return object;
|
|
2442
|
+
}
|
|
2437
2443
|
render() {
|
|
2438
2444
|
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;
|
|
2439
2445
|
const computedStyle = window.getComputedStyle(this.host);
|
|
2440
2446
|
const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
|
|
2441
2447
|
const baseHandleSize = parseFloat(baseHandleSizePx);
|
|
2442
2448
|
const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
|
|
2443
|
-
return (h(Host, { key: '
|
|
2444
|
-
_a.translateX), h("div", { key: '
|
|
2445
|
-
_b.translateY), h("div", { key: '
|
|
2446
|
-
_c.viewportWidth), h("div", { key: '
|
|
2447
|
-
_d.viewportHeight), h("div", { key: '
|
|
2448
|
-
_e.scale), h("div", { key: '
|
|
2449
|
-
_g.name), h("div", { key: '
|
|
2450
|
-
_m.cursorX), h("div", { key: '
|
|
2451
|
-
_o.cursorY)), h("div", { key: '
|
|
2449
|
+
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 :
|
|
2450
|
+
_a.translateX), h("div", { key: 'e3d853e7e11c32bf5f801c29a0ed9add91ce24c3' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
|
|
2451
|
+
_b.translateY), h("div", { key: '7ada7c0c256bbdc79b2b74b391c87a319c9aaf05' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
|
|
2452
|
+
_c.viewportWidth), h("div", { key: '156ed10ab63bbacf30d549f115d82beeb6e714d5' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
|
|
2453
|
+
_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 :
|
|
2454
|
+
_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 :
|
|
2455
|
+
_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 :
|
|
2456
|
+
_m.cursorX), h("div", { key: 'f549e8faa3ddad5b3294bb72f24ad3735539e84b' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
|
|
2457
|
+
_o.cursorY)), h("div", { key: 'e81679812ed19a50a09357549df00e590ae613b6', class: "origin", style: {
|
|
2452
2458
|
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})`,
|
|
2453
2459
|
} }, (_t = this.store.objects) === null || _t === void 0 ? void 0 :
|
|
2454
2460
|
_t.map(object => {
|
|
@@ -2545,7 +2551,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
|
|
|
2545
2551
|
fill: 'transparent',
|
|
2546
2552
|
cursor: 'grab',
|
|
2547
2553
|
}, 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)))))));
|
|
2548
|
-
}), h("svg", { key: '
|
|
2554
|
+
}), h("svg", { key: 'bf2c561803773e19aed36d418e96b9f797c305be', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
|
|
2549
2555
|
height: (_u = this.store.state.currentPath) === null || _u === void 0 ? void 0 : _u.height.toString(),
|
|
2550
2556
|
width: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.width.toString(),
|
|
2551
2557
|
left: '0',
|
|
@@ -2555,12 +2561,12 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
|
|
|
2555
2561
|
transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
|
|
2556
2562
|
transformOrigin: 'top left',
|
|
2557
2563
|
overflow: 'visible',
|
|
2558
|
-
}, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: '
|
|
2564
|
+
}, 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: {
|
|
2559
2565
|
position: 'fixed',
|
|
2560
2566
|
left: `${this.store.state.contextMenuX}px`,
|
|
2561
2567
|
top: `${this.store.state.contextMenuY}px`,
|
|
2562
2568
|
zIndex: '10000',
|
|
2563
|
-
}, 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: '
|
|
2569
|
+
}, 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 })));
|
|
2564
2570
|
}
|
|
2565
2571
|
get host() { return this; }
|
|
2566
2572
|
static get style() { return kritzelEngineCss; }
|
|
@@ -2591,7 +2597,8 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
|
|
|
2591
2597
|
"getSelectedObjects": [64],
|
|
2592
2598
|
"selectObjects": [64],
|
|
2593
2599
|
"selectAllObjectsInViewport": [64],
|
|
2594
|
-
"clearSelection": [64]
|
|
2600
|
+
"clearSelection": [64],
|
|
2601
|
+
"centerObjectInViewport": [64]
|
|
2595
2602
|
}, [[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"]]]);
|
|
2596
2603
|
function defineCustomElement() {
|
|
2597
2604
|
if (typeof customElements === "undefined") {
|
|
@@ -2623,6 +2630,6 @@ function defineCustomElement() {
|
|
|
2623
2630
|
}
|
|
2624
2631
|
|
|
2625
2632
|
export { KritzelImage as K, KritzelEngine as a, KritzelSelectionTool as b, KritzelEraserTool as c, defineCustomElement as d, KritzelImageTool as e };
|
|
2626
|
-
//# sourceMappingURL=p-
|
|
2633
|
+
//# sourceMappingURL=p-DuWb7MaD.js.map
|
|
2627
2634
|
|
|
2628
|
-
//# sourceMappingURL=p-
|
|
2635
|
+
//# sourceMappingURL=p-DuWb7MaD.js.map
|