kritzel-stencil 0.0.76 → 0.0.78
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/index-BUKRdCPx.js +2 -6
- package/dist/cjs/{kritzel-brush-style_18.cjs.entry.js → kritzel-brush-style_19.cjs.entry.js} +76 -60
- package/dist/cjs/kritzel-brush-style_19.cjs.entry.js.map +1 -0
- 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.css +18 -2
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +4 -1
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.js.map +1 -1
- package/dist/collection/components/shared/kritzel-color/kritzel-color.js +2 -2
- package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js +1 -1
- package/dist/collection/components/shared/kritzel-font/kritzel-font.js +1 -1
- package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js +1 -1
- package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js +1 -1
- package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js +4 -4
- package/dist/collection/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.js +2 -2
- package/dist/collection/components/ui/kritzel-control-text-config/kritzel-control-text-config.js +2 -2
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +42 -41
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js.map +1 -1
- package/dist/collection/components/ui/kritzel-dummy/kritzel-dummy.js +1 -1
- package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js +1 -1
- package/dist/components/kritzel-color-palette.js +1 -1
- package/dist/components/kritzel-color.js +1 -1
- package/dist/components/kritzel-control-brush-config.js +1 -1
- package/dist/components/kritzel-control-text-config.js +1 -1
- package/dist/components/kritzel-controls.js +1 -1
- package/dist/components/kritzel-dummy.js +1 -28
- package/dist/components/kritzel-dummy.js.map +1 -1
- package/dist/components/kritzel-editor.js +35 -26
- package/dist/components/kritzel-editor.js.map +1 -1
- package/dist/components/kritzel-font-size.js +1 -1
- package/dist/components/kritzel-font.js +1 -1
- package/dist/components/kritzel-stroke-size.js +1 -1
- package/dist/components/kritzel-tooltip.js +1 -1
- package/dist/components/kritzel-utility-panel.js +1 -1
- package/dist/components/p-9_JiL_wH.js +33 -0
- package/dist/components/p-9_JiL_wH.js.map +1 -0
- package/dist/components/{p-Dd-jVt1z.js → p-B17z0dHf.js} +4 -4
- package/dist/components/{p-Dd-jVt1z.js.map → p-B17z0dHf.js.map} +1 -1
- package/dist/components/{p-CtzUAFH7.js → p-BfOHORuS.js} +8 -8
- package/dist/components/{p-CtzUAFH7.js.map → p-BfOHORuS.js.map} +1 -1
- package/dist/components/{p-CW800wxH.js → p-BzT7WSFX.js} +7 -7
- package/dist/components/{p-CW800wxH.js.map → p-BzT7WSFX.js.map} +1 -1
- package/dist/components/{p-RyhiTey9.js → p-C25_uk1W.js} +4 -4
- package/dist/components/{p-RyhiTey9.js.map → p-C25_uk1W.js.map} +1 -1
- package/dist/components/{p-ub68lkC1.js → p-CCcFfkWG.js} +3 -3
- package/dist/components/{p-ub68lkC1.js.map → p-CCcFfkWG.js.map} +1 -1
- package/dist/components/{p-D4WPb8MT.js → p-Clp62syd.js} +4 -4
- package/dist/components/{p-D4WPb8MT.js.map → p-Clp62syd.js.map} +1 -1
- package/dist/components/{p-DzVQltWB.js → p-CmwVLwvI.js} +53 -52
- package/dist/components/p-CmwVLwvI.js.map +1 -0
- package/dist/components/{p-DkKI-ulw.js → p-DBL15JoO.js} +3 -3
- package/dist/components/{p-DkKI-ulw.js.map → p-DBL15JoO.js.map} +1 -1
- package/dist/components/{p-CwiXaI-9.js → p-DqnnZDDT.js} +4 -4
- package/dist/components/{p-CwiXaI-9.js.map → p-DqnnZDDT.js.map} +1 -1
- package/dist/components/{p-Vgp7wvdA.js → p-rxaqUiJC.js} +6 -6
- package/dist/components/{p-Vgp7wvdA.js.map → p-rxaqUiJC.js.map} +1 -1
- package/dist/esm/index-CvjcGi0O.js +2 -6
- package/dist/esm/{kritzel-brush-style_18.entry.js → kritzel-brush-style_19.entry.js} +76 -61
- package/dist/esm/kritzel-brush-style_19.entry.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stencil.js +1 -1
- package/dist/stencil/p-400de083.entry.js +2 -0
- package/dist/stencil/p-400de083.entry.js.map +1 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/components/ui/kritzel-controls/kritzel-controls.d.ts +3 -0
- package/package.json +1 -1
- package/dist/cjs/kritzel-brush-style_18.cjs.entry.js.map +0 -1
- package/dist/cjs/kritzel-dummy.cjs.entry.js +0 -20
- package/dist/cjs/kritzel-dummy.cjs.entry.js.map +0 -1
- package/dist/cjs/kritzel-dummy.entry.cjs.js.map +0 -1
- package/dist/components/p-DzVQltWB.js.map +0 -1
- package/dist/esm/kritzel-brush-style_18.entry.js.map +0 -1
- package/dist/esm/kritzel-dummy.entry.js +0 -18
- package/dist/esm/kritzel-dummy.entry.js.map +0 -1
- package/dist/stencil/kritzel-dummy.entry.esm.js.map +0 -1
- package/dist/stencil/p-1f3fc9e2.entry.js +0 -2
- package/dist/stencil/p-1f3fc9e2.entry.js.map +0 -1
- package/dist/stencil/p-37925d25.entry.js +0 -2
- package/dist/stencil/p-37925d25.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-Clp62syd.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,4hBAA4hB;;MCO1iB,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAL5B,IAAA,WAAA,GAAA;;;;;AAOE,QAAA,IAAA,CAAA,KAAK,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAGzC,QAAA,IAAY,CAAA,YAAA,GAAkB,IAAI;AAGlC,QAAA,IAAU,CAAA,UAAA,GAAW,OAAO;AA2B7B;AAtBS,IAAA,eAAe,CAAC,IAAY,EAAA;AAClC,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG5B,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI;AACvC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAA,EAEzC,CAAA,CAAA,cAAA,EAAA,EAAc,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,GAAiB,CAClE,CACP,CAAC,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-font-size/kritzel-font-size.css?tag=kritzel-font-size&encapsulation=shadow","src/components/shared/kritzel-font-size/kritzel-font-size.tsx"],"sourcesContent":[":host {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 8px;\n box-sizing: border-box;\n}\n\n.size-container {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 32px;\n height: 32px;\n border-radius: 4px;\n cursor: pointer;\n border: 2px solid transparent;\n box-sizing: border-box;\n border-radius: 50%;\n}\n\n.size-container:hover {\n background-color: var(--kritzel-font-size-hover-background-color, #f0f0f0);\n}\n\n.size-container.selected {\n border-color: var(--kritzel-selection-border-color, #007bff);\n background-color: var(--kritzel-font-size-selected-background-color, #e0e0e0);\n}\n\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'kritzel-font-size',\n styleUrl: 'kritzel-font-size.css',\n shadow: true,\n})\nexport class KritzelFontSize {\n @Prop()\n sizes: number[] = [8, 10, 12, 16, 20, 24];\n\n @Prop({ mutable: true })\n selectedSize: number | null = null;\n\n @Prop()\n fontFamily: string = 'Arial';\n\n @Event()\n sizeChange: EventEmitter<number>;\n\n private handleSizeClick(size: number) {\n this.selectedSize = size;\n this.sizeChange.emit(size);\n }\n\n render() {\n return (\n <Host>\n {this.sizes.map(size => (\n <div\n class={{\n 'size-container': true,\n 'selected': this.selectedSize === size,\n }}\n onClick={() => this.handleSizeClick(size)}\n >\n <kritzel-font fontFamily={this.fontFamily} size={size}></kritzel-font>\n </div>\n ))}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-nnmjP18w.js';
|
|
2
2
|
import { K as KritzelBrushTool, a as KritzelTextTool } from './p-CFkDfXW4.js';
|
|
3
3
|
import { d as defineCustomElement$d } from './p-EZVcj_Vk.js';
|
|
4
|
-
import { d as defineCustomElement$c } from './p-
|
|
5
|
-
import { d as defineCustomElement$b } from './p-
|
|
6
|
-
import { d as defineCustomElement$a } from './p-
|
|
7
|
-
import { d as defineCustomElement$9 } from './p-
|
|
4
|
+
import { d as defineCustomElement$c } from './p-B17z0dHf.js';
|
|
5
|
+
import { d as defineCustomElement$b } from './p-DqnnZDDT.js';
|
|
6
|
+
import { d as defineCustomElement$a } from './p-BzT7WSFX.js';
|
|
7
|
+
import { d as defineCustomElement$9 } from './p-BfOHORuS.js';
|
|
8
8
|
import { d as defineCustomElement$8 } from './p-CFqbFD48.js';
|
|
9
|
-
import { d as defineCustomElement$7 } from './p-
|
|
9
|
+
import { d as defineCustomElement$7 } from './p-DBL15JoO.js';
|
|
10
10
|
import { d as defineCustomElement$6 } from './p-NAXC-PTl.js';
|
|
11
|
-
import { d as defineCustomElement$5 } from './p-
|
|
11
|
+
import { d as defineCustomElement$5 } from './p-Clp62syd.js';
|
|
12
12
|
import { d as defineCustomElement$4 } from './p-MPhvpAqa.js';
|
|
13
|
-
import { d as defineCustomElement$3 } from './p-
|
|
14
|
-
import { d as defineCustomElement$2 } from './p-
|
|
15
|
-
import { d as defineCustomElement$1 } from './p-
|
|
13
|
+
import { d as defineCustomElement$3 } from './p-C25_uk1W.js';
|
|
14
|
+
import { d as defineCustomElement$2 } from './p-rxaqUiJC.js';
|
|
15
|
+
import { d as defineCustomElement$1 } from './p-CCcFfkWG.js';
|
|
16
16
|
|
|
17
17
|
const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap);height:100%;padding:var(--kritzel-controls-padding);background-color:var(--kritzel-controls-background-color);border-radius:var(--kritzel-controls-border-radius);box-shadow:var(--kritzel-controls-box-shadow);border:var(--kritzel-controls-border);border-radius:var(--kritzel-controls-border-radius);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color);border-radius:var(--kritzel-controls-control-border-radius);padding:var(--kritzel-controls-control-padding);border:none;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color)}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color)}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color);color:var(--kritzel-controls-control-selected-color)}.kritzel-divider{width:var(--kritzel-controls-divider-width);height:var(--kritzel-controls-divider-height);background-color:var(--kritzel-controls-divider-background-color)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);z-index:10001;}";
|
|
18
18
|
|
|
@@ -37,45 +37,46 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
|
|
|
37
37
|
var _a;
|
|
38
38
|
return (_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.tool;
|
|
39
39
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
40
|
+
async componentDidLoad() {
|
|
41
|
+
console.log('KritzelControls componentDidLoad');
|
|
42
|
+
this.forceUpdate++;
|
|
43
|
+
this.controlsReady.emit();
|
|
44
|
+
this.initializeEngine().then(() => {
|
|
45
|
+
this.initializeTools()
|
|
46
|
+
.then(() => {
|
|
47
|
+
console.info('KritzelControls initialized with tools:', this.controls);
|
|
48
|
+
this.forceUpdate++;
|
|
49
|
+
})
|
|
50
|
+
.catch(error => {
|
|
51
|
+
console.error('Error initializing tools:', error);
|
|
52
|
+
});
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
async initializeEngine() {
|
|
56
|
+
this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
|
|
57
|
+
if (!this.kritzelEngine) {
|
|
58
|
+
throw new Error('kritzel-engine not found in parent element.');
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
async initializeTools() {
|
|
62
|
+
for (const c of this.controls) {
|
|
63
|
+
if (c.type === 'tool' && c.tool) {
|
|
64
|
+
c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);
|
|
65
|
+
}
|
|
66
|
+
if (c.type === 'tool' && c.isDefault && c.tool) {
|
|
67
|
+
await this.kritzelEngine.changeActiveTool(c.tool);
|
|
68
|
+
this.activeControl = c;
|
|
69
|
+
}
|
|
70
|
+
if (c.type === 'config') {
|
|
71
|
+
if (this.firstConfig === null) {
|
|
72
|
+
this.firstConfig = c;
|
|
73
|
+
}
|
|
74
|
+
else {
|
|
75
|
+
console.warn('Only one config control is allowed. The first one will be used.');
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
79
80
|
async handleActiveToolChange(event) {
|
|
80
81
|
var _a;
|
|
81
82
|
this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
|
|
@@ -113,11 +114,11 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
|
|
|
113
114
|
render() {
|
|
114
115
|
var _a, _b;
|
|
115
116
|
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: '
|
|
117
|
+
return (h(Host, { key: 'b2ccafa0e74d1a036f1bfd0fb994bd5aa746401d' }, h("kritzel-utility-panel", { key: '585a8058b22015956b11df13614e8acf721be969', style: {
|
|
117
118
|
position: 'absolute',
|
|
118
119
|
bottom: '56px',
|
|
119
120
|
left: '12px',
|
|
120
|
-
}, 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: '
|
|
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: '56238089b382ba65f6951ee841bdb1cd36159b31', class: "kritzel-controls" }, this.controls.map(control => {
|
|
121
122
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
122
123
|
if (control.type === 'tool') {
|
|
123
124
|
return (h("button", { class: {
|
|
@@ -229,6 +230,6 @@ function defineCustomElement() {
|
|
|
229
230
|
}
|
|
230
231
|
|
|
231
232
|
export { KritzelControls as K, defineCustomElement as d };
|
|
232
|
-
//# sourceMappingURL=p-
|
|
233
|
+
//# sourceMappingURL=p-CmwVLwvI.js.map
|
|
233
234
|
|
|
234
|
-
//# sourceMappingURL=p-
|
|
235
|
+
//# sourceMappingURL=p-CmwVLwvI.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-CmwVLwvI.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-controls/kritzel-controls.css?tag=kritzel-controls&encapsulation=shadow","src/components/ui/kritzel-controls/kritzel-controls.tsx"],"sourcesContent":[":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);\r\n height: 100%;\r\n padding: var(--kritzel-controls-padding);\r\n background-color: var(--kritzel-controls-background-color);\r\n border-radius: var(--kritzel-controls-border-radius);\r\n box-shadow: var(--kritzel-controls-box-shadow);\r\n border: var(--kritzel-controls-border);\r\n border-radius: var(--kritzel-controls-border-radius);\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);\r\n border-radius: var(--kritzel-controls-control-border-radius);\r\n padding: var(--kritzel-controls-control-padding);\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);\r\n}\r\n\r\n.kritzel-control:active {\r\n background-color: var(--kritzel-controls-control-active-background-color);\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);\r\n color: var(--kritzel-controls-control-selected-color);\r\n}\r\n\r\n.kritzel-divider {\r\n width: var(--kritzel-controls-divider-width);\r\n height: var(--kritzel-controls-divider-height);\r\n background-color: var(--kritzel-controls-divider-background-color);\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);\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);\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; /* Adjusted to ensure it appears above the controls */\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 10001; /* Ensure tooltip is above controls */\r\n}\r\n","import { Component, h, Prop, State, Element, Host, Listen, Event, EventEmitter } 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\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 @Element()\r\n host!: HTMLElement;\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 forceUpdate: number = 0;\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 componentDidLoad() {\r\n console.log('KritzelControls componentDidLoad');\r\n this.forceUpdate++;\r\n this.controlsReady.emit();\r\n this.initializeEngine().then(() => {\r\n this.initializeTools()\r\n .then(() => {\r\n console.info('KritzelControls initialized with tools:', this.controls);\r\n this.forceUpdate++;\r\n })\r\n .catch(error => {\r\n console.error('Error initializing tools:', error);\r\n });\r\n });\r\n }\r\n\r\n private async initializeEngine() {\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 @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 preventDefault(event: Event) {\r\n if (event.cancelable) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n }\r\n }\r\n\r\n 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 handleConfigClick(event: MouseEvent) {\r\n event.stopPropagation();\r\n this.tooltipVisible = !this.tooltipVisible;\r\n this.kritzelEngine.disable();\r\n }\r\n\r\n 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 <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}
|
|
@@ -12,7 +12,7 @@ const KritzelFont = /*@__PURE__*/ proxyCustomElement(class KritzelFont extends H
|
|
|
12
12
|
this.color = '#000000';
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (h(Host, { key: '
|
|
15
|
+
return (h(Host, { key: '4e952fbcaea52c332a72cda1ba6fc060696aa107' }, h("div", { key: 'db371b9552eceb53470b2bbd964c9c31578bb7e1', class: "font-preview", style: {
|
|
16
16
|
fontFamily: this.fontFamily,
|
|
17
17
|
fontSize: `${this.size}px`,
|
|
18
18
|
color: this.color
|
|
@@ -39,6 +39,6 @@ function defineCustomElement() {
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
export { KritzelFont as K, defineCustomElement as d };
|
|
42
|
-
//# sourceMappingURL=p-
|
|
42
|
+
//# sourceMappingURL=p-DBL15JoO.js.map
|
|
43
43
|
|
|
44
|
-
//# sourceMappingURL=p-
|
|
44
|
+
//# sourceMappingURL=p-DBL15JoO.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-DBL15JoO.js","mappings":";;AAAA,MAAM,cAAc,GAAG,wIAAwI;;MCOlJ,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,GAAA;;;;AAOE,QAAA,IAAU,CAAA,UAAA,GAAW,mBAAmB;AAGxC,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AAGjB,QAAA,IAAK,CAAA,KAAA,GAAW,SAAS;AAkB1B;IAhBC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI,CAAC,UAAU;AAC3B,gBAAA,QAAQ,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA;gBAC1B,KAAK,EAAE,IAAI,CAAC;AACb,aAAA,EAGG,EAAA,GAAA,CAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-font/kritzel-font.css?tag=kritzel-font&encapsulation=shadow","src/components/shared/kritzel-font/kritzel-font.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.font-preview {\n color: var(--kritzel-font-size-text-color, #333333);\n line-height: 1;\n text-align: center;\n font-weight: bold;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'kritzel-font',\n styleUrl: 'kritzel-font.css',\n shadow: true,\n})\nexport class KritzelFont {\n @Prop()\n fontFamily: string = 'Arial, sans-serif';\n\n @Prop()\n size: number = 24;\n\n @Prop()\n color: string = '#000000';\n\n render() {\n return (\n <Host>\n <div\n class=\"font-preview\"\n style={{\n fontFamily: this.fontFamily,\n fontSize: `${this.size}px`,\n color: this.color\n }}\n >\n A\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-nnmjP18w.js';
|
|
2
|
-
import { d as defineCustomElement$1 } from './p-
|
|
2
|
+
import { d as defineCustomElement$1 } from './p-B17z0dHf.js';
|
|
3
3
|
|
|
4
4
|
const kritzelColorPaletteCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color)}.color-container.selected{border-color:var(--kritzel-selection-border-color);background-color:var(--kritzel-color-palette-selected-background-color)}";
|
|
5
5
|
|
|
@@ -28,7 +28,7 @@ const KritzelColorPalette = /*@__PURE__*/ proxyCustomElement(class KritzelColorP
|
|
|
28
28
|
render() {
|
|
29
29
|
const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
|
|
30
30
|
const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
|
|
31
|
-
return (h(Host, { key: '
|
|
31
|
+
return (h(Host, { key: 'e3e89140f833e336a3e0c299c1e9c9d4cad21fdb' }, h("div", { key: '019b62ab59cf468fc497ba0f6b429b844bcc4584', class: {
|
|
32
32
|
'color-grid': true,
|
|
33
33
|
'expanded': this.isExpanded,
|
|
34
34
|
}, style: {
|
|
@@ -65,6 +65,6 @@ function defineCustomElement() {
|
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
export { KritzelColorPalette as K, defineCustomElement as d };
|
|
68
|
-
//# sourceMappingURL=p-
|
|
68
|
+
//# sourceMappingURL=p-DqnnZDDT.js.map
|
|
69
69
|
|
|
70
|
-
//# sourceMappingURL=p-
|
|
70
|
+
//# sourceMappingURL=p-DqnnZDDT.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-DqnnZDDT.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,6sBAA6sB;;MCO/tB,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;;;AAOE,QAAA,IAAM,CAAA,MAAA,GAAa,EAAE;AAGrB,QAAA,IAAa,CAAA,aAAA,GAAkB,IAAI;AAGnC,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAG3B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAgD1B;AA3CS,IAAA,gBAAgB,CAAC,KAAa,EAAA;AACpC,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;AAC1B,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGtB,eAAe,GAAA;QACrB,MAAM,YAAY,GAAG,CAAC;QACtB,MAAM,SAAS,GAAG,EAAE;QACpB,MAAM,GAAG,GAAG,CAAC;AACb,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,YAAY,CAAC;AAC7D,QAAA,OAAO,CAAG,EAAA,QAAQ,GAAG,SAAS,GAAG,CAAC,QAAQ,GAAG,CAAC,IAAI,GAAG,IAAI;;IAG3D,MAAM,GAAA;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;AAC/E,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,GAAG,MAAM;QAExE,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;gBAClB,UAAU,EAAE,IAAI,CAAC,UAAU;AAC5B,aAAA,EACD,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE;AACT,aAAA,EAEA,EAAA,eAAe,CAAC,GAAG,CAAC,KAAK,KACxB,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,UAAU,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK;AACzC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAA,EAE3C,CAAe,CAAA,eAAA,EAAA,EAAA,KAAK,EAAE,KAAK,EAAkB,CAAA,CACzC,CACP,CAAC,CACE,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-color-palette/kritzel-color-palette.css?tag=kritzel-color-palette&encapsulation=shadow","src/components/shared/kritzel-color-palette/kritzel-color-palette.tsx"],"sourcesContent":[":host {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 8px;\r\n padding: 8px;\r\n width: 100%;\r\n box-sizing: border-box;\r\n}\r\n\r\n.color-grid {\r\n width: 100%;\r\n display: grid;\r\n grid-template-columns: repeat(6, 32px);\r\n gap: 8px;\r\n justify-items: center;\r\n overflow: hidden;\r\n height: 40px;\r\n transition: height 0.1s ease-in-out;\r\n}\r\n\r\n.color-grid.expanded {\r\n height: 500px;\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}\r\n\r\n.color-container:hover {\r\n background-color: var(--kritzel-color-palette-hover-background-color);\r\n}\r\n\r\n.color-container.selected {\r\n border-color: var(--kritzel-selection-border-color);\r\n background-color: var(--kritzel-color-palette-selected-background-color);\r\n}\r\n\r\n\r\n","import { Component, Host, h, Prop, EventEmitter, Event } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'kritzel-color-palette',\r\n styleUrl: 'kritzel-color-palette.css',\r\n shadow: true,\r\n})\r\nexport class KritzelColorPalette {\r\n @Prop()\r\n colors: string[] = [];\r\n\r\n @Prop({ mutable: true })\r\n selectedColor: string | null = null;\r\n\r\n @Prop()\r\n isExpanded: boolean = false;\r\n\r\n @Prop()\r\n isOpaque: boolean = false;\r\n\r\n @Event()\r\n colorChange: EventEmitter<string>;\r\n\r\n private handleColorClick(color: string) {\r\n this.selectedColor = color;\r\n this.colorChange.emit(color);\r\n }\r\n\r\n private calculateHeight(): string {\r\n const colorsPerRow = 6;\r\n const rowHeight = 32;\r\n const gap = 8;\r\n const rowCount = Math.ceil(this.colors.length / colorsPerRow);\r\n return `${rowCount * rowHeight + (rowCount - 1) * gap}px`;\r\n }\r\n\r\n render() {\r\n const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);\r\n const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';\r\n\r\n return (\r\n <Host>\r\n <div\r\n class={{\r\n 'color-grid': true,\r\n 'expanded': this.isExpanded,\r\n }}\r\n style={{\r\n height: expandedHeight\r\n }}\r\n >\r\n {displayedColors.map(color => (\r\n <div\r\n class={{\r\n 'color-container': true,\r\n 'selected': this.selectedColor === color,\r\n }}\r\n onClick={() => this.handleColorClick(color)}\r\n >\r\n <kritzel-color value={color}></kritzel-color>\r\n </div>\r\n ))}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -43,23 +43,23 @@ const KritzelTooltip = /*@__PURE__*/ proxyCustomElement(class KritzelTooltip ext
|
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
render() {
|
|
46
|
-
return (h(Host, { key: '
|
|
46
|
+
return (h(Host, { key: 'a8c55d66efd76aeea390e7a5bdb05dbdb1e35bd2', style: {
|
|
47
47
|
position: 'fixed',
|
|
48
48
|
zIndex: '9999',
|
|
49
49
|
transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
|
|
50
50
|
visibility: this.isVisible ? 'visible' : 'hidden',
|
|
51
51
|
left: !this.isMobileView ? `${this.positionX}px` : '50%',
|
|
52
52
|
marginBottom: `${this.offsetY + this.arrowSize}px`,
|
|
53
|
-
} }, h("div", { key: '
|
|
53
|
+
} }, h("div", { key: '5d3ad02c4885e9ee3dc55a7358357bb224ae102e', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '767fb0dbf8fa9a63d184f601d28536fbff677a02' }), h("div", { key: '30c0bdd69f56cab6b94fb0f4290de370d990c500', class: "tooltip-arrow-wrapper", style: {
|
|
54
54
|
position: 'fixed',
|
|
55
55
|
left: this.arrowOffset,
|
|
56
56
|
bottom: `-${this.arrowSize * 2}px`,
|
|
57
|
-
} }, h("div", { key: '
|
|
57
|
+
} }, h("div", { key: '2d2197a52e69477308ae7591446b4ca20635e0bc', class: "tooltip-arrow", style: {
|
|
58
58
|
borderLeft: `${this.arrowSize}px solid transparent`,
|
|
59
59
|
borderRight: `${this.arrowSize}px solid transparent`,
|
|
60
60
|
borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color)`,
|
|
61
61
|
filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
|
|
62
|
-
} }), h("div", { key: '
|
|
62
|
+
} }), h("div", { key: 'fa932ba1b6b242455c85fbf13b51c58c53ad3e9a', class: "tooltip-arrow-rect", style: {
|
|
63
63
|
position: 'relative',
|
|
64
64
|
width: `${this.arrowSize * 2}px`,
|
|
65
65
|
height: `${this.arrowSize}px`,
|
|
@@ -93,6 +93,6 @@ function defineCustomElement() {
|
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
export { KritzelTooltip as K, defineCustomElement as d };
|
|
96
|
-
//# sourceMappingURL=p-
|
|
96
|
+
//# sourceMappingURL=p-rxaqUiJC.js.map
|
|
97
97
|
|
|
98
|
-
//# sourceMappingURL=p-
|
|
98
|
+
//# sourceMappingURL=p-rxaqUiJC.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-rxaqUiJC.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-tooltip/kritzel-tooltip.css?tag=kritzel-tooltip&encapsulation=shadow","src/components/shared/kritzel-tooltip/kritzel-tooltip.tsx"],"sourcesContent":[":host {\n width: auto;\n}\n\n.tooltip-content {\n position: relative;\n padding: 8px 12px;\n border-radius: 4px;\n width: fit-content;\n background-color: var(--kritzel-controls-tooltip-background-color);\n color: var(--kritzel-controls-tooltip-color);\n padding: var(--kritzel-controls-tooltip-padding);\n border-radius: var(--kritzel-controls-tooltip-border-radius);\n white-space: nowrap;\n box-shadow: var(--kritzel-controls-tooltip-box-shadow);\n}\n\n","import { Component, Host, Prop, h, Element, State, Listen } from '@stencil/core';\n\nconst MOBILE_BREAKPOINT = 768;\n\n@Component({\n tag: 'kritzel-tooltip',\n styleUrl: 'kritzel-tooltip.css',\n shadow: true,\n})\nexport class KritzelTooltip {\n @Prop()\n isVisible: boolean = false;\n\n @Prop()\n anchorElement: HTMLElement;\n\n @Prop()\n arrowSize: number = 8;\n\n @Prop()\n offsetY: number = 12;\n\n @Element()\n el: HTMLElement;\n\n @State()\n positionX: number = 0;\n\n @State()\n arrowOffset: string = '0px';\n\n @State()\n private isMobileView: boolean = window.innerWidth < MOBILE_BREAKPOINT;\n\n @Listen('resize', { target: 'window' })\n handleWindowResize() {\n this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;\n this.calculateAdjustedPosition();\n }\n\n componentWillLoad() {\n this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;\n this.calculateAdjustedPosition();\n }\n\n componentWillUpdate() {\n this.calculateAdjustedPosition();\n }\n\n private calculateAdjustedPosition() {\n if (this.isVisible && this.anchorElement) {\n const anchorRect = this.anchorElement.getBoundingClientRect();\n const tooltipContent = this.el.shadowRoot?.querySelector('.tooltip-content') as HTMLElement;\n\n if (!this.isMobileView) {\n this.positionX = anchorRect.left + anchorRect.width / 2;\n this.arrowOffset = `calc(${50}% - ${this.arrowSize}px)`; \n } else {\n const tooltipRect = tooltipContent.getBoundingClientRect();\n this.positionX = anchorRect.left + anchorRect.width / 2 - tooltipRect.width / 2;\n this.arrowOffset = `${anchorRect.left + anchorRect.width / 2 - tooltipRect.left - this.arrowSize}px`;\n }\n }\n }\n\n render() {\n return (\n <Host\n style={{\n position: 'fixed',\n zIndex: '9999',\n transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',\n visibility: this.isVisible ? 'visible' : 'hidden',\n left: !this.isMobileView ? `${this.positionX}px` : '50%',\n marginBottom: `${this.offsetY + this.arrowSize}px`,\n }}\n >\n <div class=\"tooltip-content\" onClick={event => event.stopPropagation()}>\n <slot></slot>\n <div\n class=\"tooltip-arrow-wrapper\"\n style={{\n position: 'fixed',\n left: this.arrowOffset,\n bottom: `-${this.arrowSize * 2}px`,\n }}\n >\n <div\n class=\"tooltip-arrow\"\n style={{\n borderLeft: `${this.arrowSize}px solid transparent`,\n borderRight: `${this.arrowSize}px solid transparent`,\n borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color)`,\n filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',\n }}\n ></div>\n <div\n class=\"tooltip-arrow-rect\"\n style={{\n position: 'relative',\n width: `${this.arrowSize * 2}px`,\n height: `${this.arrowSize}px`,\n backgroundColor: 'var(--kritzel-controls-tooltip-background-color)',\n bottom: `${this.arrowSize * 2}px`,\n }}\n ></div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -70,14 +70,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
70
70
|
}
|
|
71
71
|
switch(bundleId) {
|
|
72
72
|
|
|
73
|
-
case 'kritzel-
|
|
73
|
+
case 'kritzel-brush-style_19':
|
|
74
74
|
return import(
|
|
75
75
|
/* webpackMode: "lazy" */
|
|
76
|
-
'./kritzel-
|
|
77
|
-
case 'kritzel-brush-style_18':
|
|
78
|
-
return import(
|
|
79
|
-
/* webpackMode: "lazy" */
|
|
80
|
-
'./kritzel-brush-style_18.entry.js').then(processMod, consoleError);
|
|
76
|
+
'./kritzel-brush-style_19.entry.js').then(processMod, consoleError);
|
|
81
77
|
}
|
|
82
78
|
}
|
|
83
79
|
return import(
|