kritzel-stencil 0.0.126 → 0.0.128

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

@@ -0,0 +1,280 @@
+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 {
+    constructor() {
+        this.controls = [];
+        this.activeControl = null;
+        this.isUtilityPanelVisible = true;
+        this.firstConfig = null;
+        this.isTooltipVisible = false;
+        this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+        this.kritzelEngine = null;
+    }
+    handleDocumentClick(event) {
+        const element = event.target;
+        if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
+            return;
+        }
+        this.isTooltipVisible = false;
+    }
+    handleKeyDown(event) {
+        var _a;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closeTooltip();
+            (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.enable();
+        }
+    }
+    async handleActiveToolChange(event) {
+        var _a;
+        this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
+        await ((_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.setFocus());
+    }
+    async closeTooltip() {
+        this.isTooltipVisible = false;
+    }
+    get activeToolAsTextTool() {
+        var _a;
+        return (_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.tool;
+    }
+    get activeToolAsBrushTool() {
+        var _a;
+        return (_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.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) {
+        var _a;
+        event.stopPropagation();
+        this.isTooltipVisible = !this.isTooltipVisible;
+        (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.disable();
+    }
+    async handleToolChange(event) {
+        this.activeControl = Object.assign(Object.assign({}, this.activeControl), { tool: event.detail });
+        await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
+    }
+    render() {
+        var _a, _b;
+        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;
+        return (h(Host, { key: 'af04746b6eaa04a51482cd9d25ba3ab303d631f1', class: {
+                mobile: this.isTouchDevice,
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'd6ecb1087a332162f3fc809ed4321fc48f72c3e7', style: {
+                position: 'absolute',
+                bottom: '56px',
+                left: '12px',
+            }, 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: '34723e47249d53fd544848d2d577deba4df1f131', class: "kritzel-controls" }, this.controls.map(control => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            if (control.type === 'tool') {
+                return (h("button", { class: {
+                        'kritzel-control': true,
+                        'selected': ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.name) === (control === null || control === void 0 ? void 0 : control.name),
+                    }, key: control.name, onClick: _event => { var _a; return (_a = this.handleControlClick) === null || _a === void 0 ? void 0 : _a.call(this, control); } }, h("kritzel-icon", { name: control.icon })));
+            }
+            if (control.type === 'divider') {
+                return h("div", { class: "kritzel-divider", key: control.name });
+            }
+            if (control.type === 'config' && control.name === ((_b = this.firstConfig) === null || _b === void 0 ? void 0 : _b.name) && this.activeControl) {
+                return (h("div", { class: "kritzel-config-container", key: control.name }, h("kritzel-tooltip", { isVisible: this.isTooltipVisible, anchorElement: (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.kritzel-config-container') }, h("div", { style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => { var _a; return (_a = this.handleToolChange) === null || _a === void 0 ? void 0 : _a.call(this, event); } })), this.activeControl.name === 'text' && (h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => { var _a; return (_a = this.handleToolChange) === null || _a === void 0 ? void 0 : _a.call(this, event); } })))), h("div", { class: "kritzel-config", onClick: event => { var _a; return (_a = this.handleConfigClick) === null || _a === void 0 ? void 0 : _a.call(this, 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: (_d = this.activeToolAsBrushTool) === null || _d === void 0 ? void 0 : _d.color, size: (_e = this.activeToolAsBrushTool) === null || _e === void 0 ? void 0 : _e.size, style: {
+                        borderRadius: '50%',
+                        border: 'none',
+                    } }))), this.activeControl.tool instanceof KritzelTextTool && (h("div", { class: "font-container" }, h("kritzel-font", { fontFamily: (_f = this.activeToolAsTextTool) === null || _f === void 0 ? void 0 : _f.fontFamily, size: (_g = this.activeToolAsTextTool) === null || _g === void 0 ? void 0 : _g.fontSize, color: (_h = this.activeToolAsTextTool) === null || _h === void 0 ? void 0 : _h.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",
+                "attribute": "controls",
+                "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",
+                "attribute": "active-control",
+                "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",
+                "attribute": "is-utility-panel-visible",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    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\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  @Prop()\r\n  isUtilityPanelVisible: boolean = true;\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  isTooltipVisible: 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('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    await this.kritzelEngine?.setFocus();\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\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    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        {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            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 isVisible={this.isTooltipVisible} 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"]}

package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.css

@@ -0,0 +1,33 @@
+:host {
+   display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px;
+  gap: 8px;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  background-color: rgb(226, 226, 226);
+  width: fit-content;
+  user-select: none;
+}
+
+.utility-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 8px 4px;
+  border: none;
+  outline: none;
+  background: none;
+  cursor: pointer;
+  color: #333333;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.utility-separator {
+  width: 1px;
+  height: 16px;
+  background-color: hsl(0, 0%, 0%, 4.3%);
+}

package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js

@@ -0,0 +1,79 @@
+import { Host, h } from "@stencil/core";
+export class KritzelUtilityPanel {
+    handleUndo(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.undo.emit();
+        }
+    }
+    handleRedo(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.redo.emit();
+    }
+    render() {
+        return (h(Host, { key: 'cf7b5c501b6535fda22b17ea218e90bd60223c6e' }, h("button", { key: '05db2cee7f2e191674167ef503e70718200bf904', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '10412c038b9d4e66851c8a0c9b51b99607bac397', name: "undo" })), h("button", { key: 'edf0289de8ce5cddd9341bc1855eae095274226c', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '46263e3d3f166b224c9a18ba383085e020fac51a', name: "redo" })), h("div", { key: '3a6c0eca21f44887683d6308ca5741b095eceb77', class: "utility-separator" }), h("button", { key: 'ced83e0c47fc920edabdc5b3379a8805f1827374', class: "utility-button" }, h("kritzel-icon", { key: 'd49c6412d778d34fe21e86482f2114631621106a', name: "delete", onClick: () => this.delete.emit() }))));
+    }
+    static get is() { return "kritzel-utility-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-utility-panel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-utility-panel.css"]
+        };
+    }
+    static get events() {
+        return [{
+                "method": "undo",
+                "name": "undo",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "redo",
+                "name": "redo",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "delete",
+                "name": "delete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=kritzel-utility-panel.js.map

package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-utility-panel.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-utility-panel/kritzel-utility-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,mBAAmB;IAU9B,UAAU,CAAC,KAAY;QACrB,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;YACrB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACnB,CAAC;IACH,CAAC;IAED,UAAU,CAAC,KAAY;QACrB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACnB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;gBACrE,qEAAc,IAAI,EAAC,MAAM,GAAgB,CAClC;YACT,+DAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;gBACrE,qEAAc,IAAI,EAAC,MAAM,GAAgB,CAClC;YAET,4DAAK,KAAK,EAAC,mBAAmB,GAAO;YAErC,+DAAQ,KAAK,EAAC,gBAAgB;gBAC5B,qEAAc,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GAAiB,CACvE,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-utility-panel',\r\n  styleUrl: 'kritzel-utility-panel.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelUtilityPanel {\r\n  @Event()\r\n  undo: EventEmitter<void>;\r\n\r\n  @Event()\r\n  redo: EventEmitter<void>;\r\n\r\n  @Event()\r\n  delete: EventEmitter<void>;\r\n\r\n  handleUndo(event: Event) {\r\n    if (event.cancelable) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.undo.emit();\r\n    }\r\n  }\r\n\r\n  handleRedo(event: Event) {\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n    this.redo.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button class=\"utility-button\" onClick={event => this.handleUndo(event)}>\r\n          <kritzel-icon name=\"undo\"></kritzel-icon>\r\n        </button>\r\n        <button class=\"utility-button\" onClick={event => this.handleRedo(event)}>\r\n          <kritzel-icon name=\"redo\"></kritzel-icon>\r\n        </button>\r\n\r\n        <div class=\"utility-separator\"></div>\r\n\r\n        <button class=\"utility-button\">\r\n          <kritzel-icon name=\"delete\" onClick={() => this.delete.emit()}></kritzel-icon>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.css

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+}

package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js

@@ -0,0 +1,209 @@
+import { Host, h } from "@stencil/core";
+import { KritzelWorkspace } from "../../../classes/workspace.class";
+import { ObjectHelper } from "../../../helpers/object.helper";
+export class KritzelWorkspaceManager {
+    constructor() {
+        this.workspaces = [];
+        this.editingIndex = null;
+        this.newWorkspace = null;
+        this.kritzelEngine = null;
+        this.handleNewWorkspace = async () => {
+            var _a;
+            await ((_a = this.splitButtonRef) === null || _a === void 0 ? void 0 : _a.openMenu());
+            requestAnimationFrame(() => {
+                this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');
+                this.editingIndex = 0;
+            });
+        };
+        this.handleMenuClosed = () => {
+            this.editingIndex = null;
+            this.newWorkspace = null;
+        };
+        this.handleSave = async (item) => {
+            const workspace = item.value;
+            const updatedWorkspace = Object.assign(Object.assign({}, workspace), { name: item.label });
+            if (this.newWorkspace) {
+                await this.kritzelEngine.createWorkspace(updatedWorkspace);
+                this.selectWorkspace(updatedWorkspace);
+            }
+            else {
+                await this.kritzelEngine.updateWorkspace(updatedWorkspace);
+            }
+            this.editingIndex = null;
+            this.newWorkspace = null;
+        };
+        this.handleRename = (index) => {
+            this.editingIndex = index;
+        };
+        this.handleDelete = async (workspaceToDelete) => {
+            var _a;
+            await this.kritzelEngine.deleteWorkspace(workspaceToDelete);
+            if (((_a = this.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id) === workspaceToDelete.id) {
+                const newActiveWorkspace = this.sortedWorkspaces.find(w => w.id !== workspaceToDelete.id) || null;
+                this.selectWorkspace(newActiveWorkspace);
+            }
+        };
+    }
+    get sortedWorkspaces() {
+        const uniqueWorkspaces = [...new Map(this.workspaces.map(workspace => [workspace.id, workspace])).values()];
+        return [this.newWorkspace, ...uniqueWorkspaces].filter(ws => ws !== null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+    }
+    get activeItemIndex() {
+        return this.sortedWorkspaces.findIndex(ws => { var _a; return ws.id === ((_a = this.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id); });
+    }
+    async componentWillLoad() {
+        await this.initializeEngine();
+        this.isWorkspaceManagerReady.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.');
+        }
+    }
+    handleSelect(workspace) {
+        this.selectWorkspace(workspace);
+    }
+    selectWorkspace(workspace) {
+        if (this.editingIndex !== null)
+            return;
+        this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);
+        this.workspaceChange.emit(workspace);
+    }
+    render() {
+        const workspaceSelectionOptions = this.sortedWorkspaces.map((ws, index) => ({
+            label: ws.name,
+            value: ws,
+            select: () => this.handleSelect(ws),
+            cancel: this.handleMenuClosed,
+            save: this.handleSave,
+            children: [
+                {
+                    label: 'Rename',
+                    value: 'rename',
+                    select: () => this.handleRename(index),
+                },
+                {
+                    label: 'Delete',
+                    value: 'delete',
+                    disabled: this.sortedWorkspaces.length <= 1,
+                    select: () => this.handleDelete(ws),
+                },
+            ],
+        }));
+        return (h(Host, { key: '1703451717d5583d6520edfbcdbe38a5b8f6840f' }, h("kritzel-split-button", { key: 'efd5d9b714ee72b23fd28c9b20ea6985957fe9b9', ref: el => (this.splitButtonRef = el), buttonIcon: "plus", options: workspaceSelectionOptions, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onButtonClick: this.handleNewWorkspace, onMenuClosed: this.handleMenuClosed })));
+    }
+    static get is() { return "kritzel-workspace-manager"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-workspace-manager.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-workspace-manager.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "workspaces": {
+                "type": "unknown",
+                "attribute": "workspaces",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelWorkspace[]",
+                    "resolved": "KritzelWorkspace[]",
+                    "references": {
+                        "KritzelWorkspace": {
+                            "location": "import",
+                            "path": "../../../classes/workspace.class",
+                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "activeWorkspace": {
+                "type": "unknown",
+                "attribute": "active-workspace",
+                "mutable": true,
+                "complexType": {
+                    "original": "KritzelWorkspace",
+                    "resolved": "KritzelWorkspace",
+                    "references": {
+                        "KritzelWorkspace": {
+                            "location": "import",
+                            "path": "../../../classes/workspace.class",
+                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "editingIndex": {},
+            "newWorkspace": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "isWorkspaceManagerReady",
+                "name": "isWorkspaceManagerReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "workspaceChange",
+                "name": "workspaceChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KritzelWorkspace",
+                    "resolved": "KritzelWorkspace",
+                    "references": {
+                        "KritzelWorkspace": {
+                            "location": "import",
+                            "path": "../../../classes/workspace.class",
+                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=kritzel-workspace-manager.js.map