kritzel-stencil 0.0.157 → 0.0.158

package/dist/collection/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-control-brush-config.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ5F,MAAM,OAAO,yBAAyB;IACX,IAAI,CAAmB;IAEhD,gBAAgB,CAAC,OAAyB;QACxC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAChD,CAAC;IACwB,UAAU,GAAY,KAAK,CAAC;IAE5C,UAAU,CAAiC;IAE3C,OAAO,GAAa,EAAE,CAAC;IAEhC,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACpD,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAED,gBAAgB,CAAC,KAAyC;QACxD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAChD,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAClC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,iBAAiB,CAAC,KAA0B;QAC1C,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;QAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,gBAAgB,CAAC,KAA0B;QACzC,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;QAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE;oBACL,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,KAAK;oBACpB,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ;oBACrD,cAAc,EAAE,YAAY;oBAC5B,KAAK,EAAE,MAAM;oBACb,GAAG,EAAE,KAAK;iBACX;gBAED,8EACE,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EAC9B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,EACd,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAC9B;gBAEzB,+DACE,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,EACxC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,EAC9C,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE;oBAEtF,qEAAc,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAAiB,CAC7E,CACL;YAEN,4EAAqB,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,GAAwB,CACzH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Watch, State } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-control-brush-config',\r\n  styleUrl: 'kritzel-control-brush-config.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelControlBrushConfig {\r\n  @Prop({ mutable: true }) tool: KritzelBrushTool;\r\n  @Watch('tool')\r\n  handleToolChange(newTool: KritzelBrushTool) {\r\n    this.palette = newTool.palettes[newTool.type];\r\n  }\r\n  @Prop({ mutable: true }) isExpanded: boolean = false;\r\n\r\n  @Event() toolChange: EventEmitter<KritzelBrushTool>;\r\n\r\n  @State() palette: string[] = [];\r\n\r\n  componentWillLoad() {\r\n    this.palette = this.tool.palettes[this.tool.type];\r\n  }\r\n\r\n  handleToggleExpand() {\r\n    this.isExpanded = !this.isExpanded;\r\n  }\r\n\r\n  handleTypeChange(event: CustomEvent<'pen' | 'highlighter'>) {\r\n    this.palette = this.tool.palettes[event.detail];\r\n    this.tool.type = event.detail;\r\n    this.tool.color = this.palette[0];\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleColorChange(event: CustomEvent<string>) {\r\n    this.tool.color = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleSizeChange(event: CustomEvent<number>) {\r\n    this.tool.size = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          style={{\r\n            display: 'flex',\r\n            flexDirection: 'row',\r\n            alignItems: this.isExpanded ? 'flex-start' : 'center',\r\n            justifyContent: 'flex-start',\r\n            width: '100%',\r\n            gap: '8px',\r\n          }}\r\n        >\r\n          <kritzel-color-palette\r\n            colors={this.palette}\r\n            selectedColor={this.tool.color}\r\n            isExpanded={this.isExpanded}\r\n            isOpaque={true}\r\n            onColorChange={color => this.handleColorChange(color)}\r\n          ></kritzel-color-palette>\r\n\r\n          <button\r\n            class=\"expand-toggle\"\r\n            onClick={() => this.handleToggleExpand()}\r\n            title={this.isExpanded ? 'Collapse' : 'Expand'}\r\n            style={this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' }}\r\n          >\r\n            <kritzel-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'}></kritzel-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <kritzel-stroke-size selectedSize={this.tool.size} onSizeChange={event => this.handleSizeChange(event)}></kritzel-stroke-size>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/ui/kritzel-control-text-config/kritzel-control-text-config.css

@@ -0,0 +1,19 @@
+:host {
+  display: block;
+  flex-direction: column;
+  width: 100%;
+}
+
+.expand-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  padding: 8px;
+  color: var(--kritzel-color-palette-expand-toggle-color, #666666);
+}
+
+.expand-toggle:hover {
+  color: var(--kritzel-color-palette-expand-toggle-hover-color, #333333);
+}

package/dist/collection/components/ui/kritzel-control-text-config/kritzel-control-text-config.js

@@ -0,0 +1,115 @@
+import { Host, h } from "@stencil/core";
+export class KritzelControlTextConfig {
+    tool;
+    isExpanded = false;
+    toolChange;
+    handleToggleExpand() {
+        this.isExpanded = !this.isExpanded;
+    }
+    handleFamilyChange(event) {
+        this.tool.fontFamily = event.detail;
+        this.toolChange.emit(this.tool);
+    }
+    handleColorChange(event) {
+        this.tool.fontColor = event.detail;
+        this.toolChange.emit(this.tool);
+    }
+    handleSizeChange(event) {
+        this.tool.fontSize = event.detail;
+        this.toolChange.emit(this.tool);
+    }
+    render() {
+        return (h(Host, { key: '82e611092700f057bd36823e7f7503fe7a0423ed' }, h("div", { key: '37ed39adeeeb58981a917918cd185e96d589e973', style: {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                width: '100%',
+                gap: '8px',
+            } }, h("kritzel-font-family", { key: 'cd8afc5c4a1eee087610cd3d5a6c05210cfda6b3', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '085f1bba060bde27a7b64dc5477bb51305b76235', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '3ff8fec207120e67f43315c6dace72fc2f6bd0f1', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '2e29d01a6b5c0e4a8ec347e63b6a2698c282db40', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: 'c972068f1251d66e756b8de72fbdd1b6002d1daa', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+    }
+    static get is() { return "kritzel-control-text-config"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-control-text-config.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-control-text-config.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tool": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "KritzelTextTool",
+                    "resolved": "KritzelTextTool",
+                    "references": {
+                        "KritzelTextTool": {
+                            "location": "import",
+                            "path": "../../../classes/tools/text-tool.class",
+                            "id": "src/classes/tools/text-tool.class.ts::KritzelTextTool"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "isExpanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-expanded",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toolChange",
+                "name": "toolChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KritzelTextTool",
+                    "resolved": "KritzelTextTool",
+                    "references": {
+                        "KritzelTextTool": {
+                            "location": "import",
+                            "path": "../../../classes/tools/text-tool.class",
+                            "id": "src/classes/tools/text-tool.class.ts::KritzelTextTool"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=kritzel-control-text-config.js.map

package/dist/collection/components/ui/kritzel-control-text-config/kritzel-control-text-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-control-text-config.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-control-text-config/kritzel-control-text-config.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,wBAAwB;IACV,IAAI,CAAkB;IACtB,UAAU,GAAY,KAAK,CAAC;IAE5C,UAAU,CAAgC;IAEnD,kBAAkB;QAChB,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAED,kBAAkB,CAAC,KAA0B;QAC3C,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC;QACpC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,iBAAiB,CAAC,KAA0B;QAC1C,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;QACnC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,gBAAgB,CAAC,KAA0B;QACzC,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC;QAClC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE;oBACL,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,KAAK;oBACpB,UAAU,EAAE,QAAQ;oBACpB,cAAc,EAAE,YAAY;oBAC5B,KAAK,EAAE,MAAM;oBACb,GAAG,EAAE,KAAK;iBACX;gBAED,4EAAqB,kBAAkB,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,GAAwB;gBAElJ,+DAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ;oBACpH,qEAAc,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,GAAiB,CAC7E,CACL;YAEN,8EACE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,EACzB,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAClC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAC9B;YAEzB,0EAAmB,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,GAAsB,CAC3J,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-control-text-config',\r\n  styleUrl: 'kritzel-control-text-config.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelControlTextConfig {\r\n  @Prop({ mutable: true }) tool: KritzelTextTool;\r\n  @Prop({ mutable: true }) isExpanded: boolean = false;\r\n\r\n  @Event() toolChange: EventEmitter<KritzelTextTool>;\r\n\r\n  handleToggleExpand() {\r\n    this.isExpanded = !this.isExpanded;\r\n  }\r\n\r\n  handleFamilyChange(event: CustomEvent<string>) {\r\n    this.tool.fontFamily = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleColorChange(event: CustomEvent<string>) {\r\n    this.tool.fontColor = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleSizeChange(event: CustomEvent<number>) {\r\n    this.tool.fontSize = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          style={{\r\n            display: 'flex',\r\n            flexDirection: 'row',\r\n            alignItems: 'center',\r\n            justifyContent: 'flex-start',\r\n            width: '100%',\r\n            gap: '8px',\r\n          }}\r\n        >\r\n          <kritzel-font-family selectedFontFamily={this.tool.fontFamily} onFontFamilyChange={event => this.handleFamilyChange(event)}></kritzel-font-family>\r\n\r\n          <button class=\"expand-toggle\" onClick={() => this.handleToggleExpand()} title={this.isExpanded ? 'Collapse' : 'Expand'}>\r\n            <kritzel-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'}></kritzel-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <kritzel-color-palette\r\n          colors={this.tool.palette}\r\n          selectedColor={this.tool.fontColor}\r\n          isExpanded={this.isExpanded}\r\n          onColorChange={event => this.handleColorChange(event)}\r\n        ></kritzel-color-palette>\r\n\r\n        <kritzel-font-size selectedSize={this.tool.fontSize} fontFamily={this.tool.fontFamily} onSizeChange={event => this.handleSizeChange(event)}></kritzel-font-size>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css

@@ -0,0 +1,127 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+}
+
+:host(.mobile) {
+  --kritzel-controls-control-hover-background-color: transparent;
+  --kritzel-controls-control-active-background-color: transparent;
+}
+
+.kritzel-controls {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--kritzel-controls-gap, 8px);
+  height: 100%;
+  padding: var(--kritzel-controls-padding, 8px);
+  background-color: var(--kritzel-controls-background-color, #ffffff);
+  border-radius: var(--kritzel-controls-border-radius, 16px);
+  box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
+  border: var(--kritzel-controls-border, 1px solid #ebebeb);
+  z-index: 10000;
+  position: relative;
+}
+
+.kritzel-control {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--kritzel-controls-control-color, #000000);
+  border-radius: var(--kritzel-controls-control-border-radius, 12px);
+  padding: var(--kritzel-controls-control-padding, 8px);
+  border: none;
+  background: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  font-weight: bold;
+}
+
+.kritzel-control:focus,
+.kritzel-control:hover {
+  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.kritzel-control:active {
+  background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));
+}
+
+.kritzel-control.selected,
+.kritzel-control.selected:hover,
+.kritzel-control.selected:active {
+  background-color: var(--kritzel-controls-control-selected-background-color, #007AFF) !important;
+  color: var(--kritzel-controls-control-selected-color, #ffffff) !important;
+}
+
+.kritzel-control.selected:focus {
+    background-color: var(--kritzel-controls-control-selected-background-color, #007bffe3) !important;
+
+}
+
+.kritzel-divider {
+  width: var(--kritzel-controls-divider-width, 1px);
+  height: var(--kritzel-controls-divider-height, 24px);
+  background-color: var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.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;
+  border-radius: 50%;
+}
+
+.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, #ebebeb);
+}
+
+.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, #ebebeb);
+}
+
+.no-config {
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+    border: 1px dashed gray;
+}
+
+kritzel-tooltip {
+  position: fixed;
+  bottom: 56px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10001;
+}

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js

@@ -0,0 +1,312 @@
+import { h, Host } from "@stencil/core";
+import { KritzelBrushTool } from "../../../classes/tools/brush-tool.class";
+import { KritzelTextTool } from "../../../classes/tools/text-tool.class";
+import { KritzelDevicesHelper } from "../../../helpers/devices.helper";
+export class KritzelControls {
+    host;
+    controls = [];
+    activeControl = null;
+    isUtilityPanelVisible = true;
+    undoState = null;
+    isControlsReady;
+    firstConfig = null;
+    isTooltipVisible = false;
+    isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+    handleDocumentClick(event) {
+        const element = event.target;
+        if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
+            return;
+        }
+        this.isTooltipVisible = false;
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closeTooltip();
+            this.kritzelEngine?.enable();
+        }
+    }
+    async handleActiveToolChange(event) {
+        this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
+    }
+    async closeTooltip() {
+        this.isTooltipVisible = false;
+    }
+    kritzelEngine = null;
+    tooltipRef = null;
+    get activeToolAsTextTool() {
+        return this.activeControl?.tool;
+    }
+    get activeToolAsBrushTool() {
+        return this.activeControl?.tool;
+    }
+    async componentWillLoad() {
+        await this.initializeEngine();
+        await this.initializeTools();
+        this.isControlsReady.emit();
+    }
+    async initializeEngine() {
+        await customElements.whenDefined('kritzel-engine');
+        this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
+        if (!this.kritzelEngine) {
+            throw new Error('kritzel-engine not found in parent element.');
+        }
+    }
+    async initializeTools() {
+        for (const c of this.controls) {
+            if (c.type === 'tool' && c.tool) {
+                c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);
+            }
+            if (c.type === 'tool' && c.isDefault && c.tool) {
+                await this.kritzelEngine.changeActiveTool(c.tool);
+                this.activeControl = c;
+            }
+            if (c.type === 'config') {
+                if (this.firstConfig === null) {
+                    this.firstConfig = c;
+                }
+                else {
+                    console.warn('Only one config control is allowed. The first one will be used.');
+                }
+            }
+        }
+    }
+    async handleControlClick(control) {
+        this.activeControl = control;
+        if (this.activeControl.type === 'tool') {
+            await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
+        }
+    }
+    handleConfigClick(event) {
+        event.stopPropagation();
+        this.isTooltipVisible = !this.isTooltipVisible;
+        if (this.isTooltipVisible) {
+            this.kritzelEngine?.disable();
+        }
+        else {
+            this.kritzelEngine?.enable();
+        }
+        setTimeout(() => {
+            this.tooltipRef?.focusContent();
+        }, 100);
+    }
+    async handleToolChange(event) {
+        this.activeControl = { ...this.activeControl, tool: event.detail };
+        await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
+    }
+    handleTooltipClosed() {
+        this.isTooltipVisible = false;
+        this.kritzelEngine?.enable();
+    }
+    render() {
+        const hasNoConfig = this.activeControl?.config === undefined || this.activeControl?.config === null;
+        return (h(Host, { key: '6ea9de8d541e3fc02c5ceeebf4c2c5fb4d8ad926', class: {
+                mobile: this.isTouchDevice,
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '7506b42f05c3f49aa5c936d267c5de44b3ebb9cd', style: {
+                position: 'absolute',
+                bottom: '56px',
+                left: '12px',
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '1299fce4adea3f9a529bbaf73d35e2676b6850e4', class: "kritzel-controls" }, this.controls.map(control => {
+            if (control.type === 'tool') {
+                return (h("button", { class: {
+                        'kritzel-control': true,
+                        'selected': this.activeControl?.name === control?.name,
+                    }, key: control.name, onClick: _event => this.handleControlClick?.(control) }, h("kritzel-icon", { name: control.icon })));
+            }
+            if (control.type === 'divider') {
+                return h("div", { class: "kritzel-divider", key: control.name });
+            }
+            if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {
+                return (h("div", { class: "kritzel-config-container", key: control.name }, h("kritzel-tooltip", { ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("div", { style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => this.handleToolChange?.(event) })), this.activeControl.name === 'text' && (h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => this.handleToolChange?.(event) })))), h("div", { tabIndex: 0, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
+                        if (event.key === 'Enter') {
+                            this.handleConfigClick?.(event);
+                        }
+                    }, style: {
+                        cursor: this.activeControl.config ? 'pointer' : 'default',
+                        pointerEvents: hasNoConfig ? 'none' : 'auto',
+                    } }, this.activeControl.tool instanceof KritzelBrushTool && (h("div", { class: "color-container" }, h("kritzel-color", { value: this.activeToolAsBrushTool?.color, size: this.activeToolAsBrushTool?.size, style: {
+                        borderRadius: '50%',
+                        border: 'none',
+                    } }))), this.activeControl.tool instanceof KritzelTextTool && (h("div", { class: "font-container" }, h("kritzel-font", { fontFamily: this.activeToolAsTextTool?.fontFamily, size: this.activeToolAsTextTool?.fontSize, color: this.activeToolAsTextTool?.fontColor }))), hasNoConfig && h("div", { class: "no-config" }))));
+            }
+        }))));
+    }
+    static get is() { return "kritzel-controls"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-controls.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-controls.css"]
+        };
+    }
+    static get assetsDirs() { return ["../assets"]; }
+    static get properties() {
+        return {
+            "controls": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelToolbarControl[]",
+                    "resolved": "KritzelToolbarControl[]",
+                    "references": {
+                        "KritzelToolbarControl": {
+                            "location": "import",
+                            "path": "../../../interfaces/toolbar-control.interface",
+                            "id": "src/interfaces/toolbar-control.interface.ts::KritzelToolbarControl"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "activeControl": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "KritzelToolbarControl | null",
+                    "resolved": "KritzelToolbarControl",
+                    "references": {
+                        "KritzelToolbarControl": {
+                            "location": "import",
+                            "path": "../../../interfaces/toolbar-control.interface",
+                            "id": "src/interfaces/toolbar-control.interface.ts::KritzelToolbarControl"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "isUtilityPanelVisible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-utility-panel-visible",
+                "defaultValue": "true"
+            },
+            "undoState": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelUndoState",
+                    "resolved": "KritzelUndoState",
+                    "references": {
+                        "KritzelUndoState": {
+                            "location": "import",
+                            "path": "../../../interfaces/undo-state.interface",
+                            "id": "src/interfaces/undo-state.interface.ts::KritzelUndoState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "firstConfig": {},
+            "isTooltipVisible": {},
+            "isTouchDevice": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "isControlsReady",
+                "name": "isControlsReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "closeTooltip": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "activeToolChange",
+                "method": "handleActiveToolChange",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=kritzel-controls.js.map

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-controls.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-controls/kritzel-controls.tsx"],"names":[],"mappings":"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","sourcesContent":["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\nimport { KritzelUndoState } from '../../../interfaces/undo-state.interface';\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  @Element() host!: HTMLElement;\r\n\r\n  @Prop() controls: KritzelToolbarControl[] = [];\r\n  @Prop({ mutable: true }) activeControl: KritzelToolbarControl | null = null;\r\n  @Prop() isUtilityPanelVisible: boolean = true;\r\n  @Prop() undoState: KritzelUndoState = null;\r\n\r\n  @Event() isControlsReady: EventEmitter<void>;\r\n\r\n  @State() firstConfig: ToolConfig | null = null;\r\n  @State() isTooltipVisible: boolean = false;\r\n  @State() isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleDocumentClick(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.isTooltipVisible = false;\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleKeyDown(event) {\r\n    if (event.key === 'Escape') {\r\n      event.preventDefault();\r\n      this.closeTooltip();\r\n      this.kritzelEngine?.enable();\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  }\r\n\r\n  @Method()\r\n  async closeTooltip() {\r\n    this.isTooltipVisible = false;\r\n  }\r\n\r\n  kritzelEngine: HTMLKritzelEngineElement | null = null;\r\n  tooltipRef: HTMLKritzelTooltipElement | 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.isTooltipVisible = !this.isTooltipVisible;\r\n    if(this.isTooltipVisible){\r\n      this.kritzelEngine?.disable();\r\n    } else {\r\n      this.kritzelEngine?.enable();\r\n    }\r\n\r\n    setTimeout(() => {\r\n      this.tooltipRef?.focusContent();\r\n    }, 100);\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  private handleTooltipClosed() {\r\n    this.isTooltipVisible = false;\r\n    this.kritzelEngine?.enable();\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        {this.isUtilityPanelVisible && (\r\n          <kritzel-utility-panel\r\n            style={{\r\n              position: 'absolute',\r\n              bottom: '56px',\r\n              left: '12px',\r\n            }}\r\n            undoState={this.undoState}\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\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\r\n                    ref={el => (this.tooltipRef = el)}\r\n                    isVisible={this.isTooltipVisible}\r\n                    anchorElement={this.host.shadowRoot?.querySelector('.kritzel-config-container') as HTMLElement}\r\n                    onTooltipClosed={() => this.handleTooltipClosed()}\r\n                  >\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                    tabIndex={0}\r\n                    class=\"kritzel-config\"\r\n                    onClick={event => this.handleConfigClick?.(event)}\r\n                    onKeyDown={event => {\r\n                      if (event.key === 'Enter') {\r\n                        this.handleConfigClick?.(event as any);\r\n                      }\r\n                    }}\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"]}