@operato/board 0.2.46 → 0.2.50

package/dist/src/modeller/component-toolbar/component-menu.d.ts

@@ -1,4 +1,4 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-export {};
+import './component-detail';

package/dist/src/modeller/component-toolbar/component-menu.js

@@ -2,8 +2,9 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
+import './component-detail';
 import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { ScrollbarStyles } from '@operato/styles';
 import noImage from '../../../../assets/images/components/no-image.png';
 let ComponentMenu = class ComponentMenu extends LitElement {
@@ -19,13 +20,27 @@ let ComponentMenu = class ComponentMenu extends LitElement {
             ? html `
           <h2 onclick=${(e) => e.stopPropagation()}>${this.group} list</h2>
 
-          <div templates>
+          <div
+            templates
+            @mouseover=${(e) => this.onHoverComponent(e)}
+            @mouseout=${(e) => (this.template = null)}
+          >
             ${(this.templates || []).map(template => html `
                 <div @click=${this.onClickTemplate} data-type=${template.type} template>
                   <img src=${this.templateIcon(template)} />${template.type}
                 </div>
               `)}
           </div>
+
+          <component-detail
+            tabindex="-1"
+            @focusout=${() => {
+                this.template = null;
+            }}
+            .template=${this.template}
+            hidden
+          >
+          </component-detail>
         `
             : html ``;
     }
@@ -33,14 +48,27 @@ let ComponentMenu = class ComponentMenu extends LitElement {
         var _a;
         if (changes.has('group')) {
             if (!this.group) {
-                this.style.display = 'none';
                 this.templates = [];
+                this.setAttribute('hidden', '');
             }
             else {
-                this.style.display = 'flex';
                 this.templates = ((_a = this.groups.find((g) => g.name === this.group)) === null || _a === void 0 ? void 0 : _a.templates) || [];
+                this.removeAttribute('active');
             }
         }
+        if (changes.has('template')) {
+            this.template && this.template.about
+                ? this.detail.removeAttribute('hidden')
+                : this.detail.setAttribute('hidden', '');
+        }
+    }
+    findTemplate(type) {
+        this.template = type && this.templates.find(template => template.type == type);
+    }
+    onHoverComponent(e) {
+        var _a;
+        const button = e.target;
+        this.findTemplate((_a = button.closest('[data-type]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-type'));
     }
     onClickTemplate(e) {
         var _a;
@@ -49,10 +77,9 @@ let ComponentMenu = class ComponentMenu extends LitElement {
         if (!type) {
             return;
         }
-        var group = this.groups.find(g => g.name == this.group);
-        if (this.scene && group) {
-            var template = group.templates.find(template => template.type == type);
-            template && this.scene.add(JSON.parse(JSON.stringify(template.model)), { cx: 200, cy: 200 });
+        if (this.scene) {
+            this.template = this.templates.find(template => template.type == type);
+            this.template && this.scene.add(JSON.parse(JSON.stringify(this.template.model)), { cx: 200, cy: 200 });
         }
         this.group = null;
     }
@@ -75,7 +102,7 @@ ComponentMenu.styles = [
         width: 180px;
         height: 100%;
 
-        overflow: hidden;
+        overflow: visible;
 
         border: 2px solid var(--component-menu-border-color);
         box-sizing: border-box;
@@ -128,6 +155,18 @@ ComponentMenu.styles = [
         width: var(--component-menu-item-icon-size);
         height: var(--component-menu-item-icon-size);
       }
+
+      component-detail {
+        position: absolute;
+        top: 0;
+        left: 180px;
+        height: 100%;
+        outline: none;
+      }
+
+      component-detail[hidden] {
+        display: none;
+      }
     `
 ];
 __decorate([
@@ -140,8 +179,14 @@ __decorate([
     property({ type: String })
 ], ComponentMenu.prototype, "group", void 0);
 __decorate([
-    property({ type: Array })
+    state()
 ], ComponentMenu.prototype, "templates", void 0);
+__decorate([
+    state()
+], ComponentMenu.prototype, "template", void 0);
+__decorate([
+    query('component-detail')
+], ComponentMenu.prototype, "detail", void 0);
 ComponentMenu = __decorate([
     customElement('component-menu')
 ], ComponentMenu);

package/dist/src/modeller/component-toolbar/component-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-menu.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-menu.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAGlE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,OAAO,MAAM,mDAAmD,CAAA;AAGvE,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAwE8B,WAAM,GAAa,EAAE,CAAA;QACrB,UAAK,GAAiB,IAAI,CAAA;QAC1B,UAAK,GAAkB,EAAE,CAAA;QAC1B,cAAS,GAAiB,EAAE,CAAA;IAqDzD,CAAC;IAnDC,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK;YACf,CAAC,CAAC,IAAI,CAAA;wBACY,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,IAAI,IAAI,CAAC,KAAK;;;cAG9D,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,GAAG,CAC1B,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA;8BACA,IAAI,CAAC,eAAe,cAAc,QAAQ,CAAC,IAAI;6BAChD,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,MAAM,QAAQ,CAAC,IAAI;;eAE5D,CACF;;SAEJ;YACH,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;IACZ,CAAC;IAED,OAAO,CAAC,OAA6B;;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;gBACf,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;gBAC3B,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;aACpB;iBAAM;gBACL,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;gBAC3B,IAAI,CAAC,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,0CAAE,SAAS,KAAI,EAAE,CAAA;aACzF;SACF;IACH,CAAC;IAED,eAAe,CAAC,CAAa;;QAC3B,IAAI,IAAI,GAAG,CAAC,CAAC,MAAqB,CAAA;QAClC,IAAI,IAAI,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,0CAAE,YAAY,CAAC,WAAW,CAAC,CAAA;QAEjE,IAAI,CAAC,IAAI,EAAE;YACT,OAAM;SACP;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAA;QAEvD,IAAI,IAAI,CAAC,KAAK,IAAI,KAAK,EAAE;YACvB,IAAI,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,IAAI,IAAI,CAAC,CAAA;YACtE,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,CAAA;SAC7F;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;IACnB,CAAC;IAED,YAAY,CAAC,QAAoB;QAC/B,OAAO,QAAQ,CAAC,IAAI,IAAI,OAAO,CAAA;IACjC,CAAC;CACF,CAAA;AA/HQ,oBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkEF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAA2B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAA0B;AAC1B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDAA6B;AA3EnD,aAAa;IADlB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,aAAa,CAgIlB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { Pallet, PalletItem } from '../../types'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { Scene } from '@hatiolab/things-scene'\nimport { ScrollbarStyles } from '@operato/styles'\nimport noImage from '../../../../assets/images/components/no-image.png'\n\n@customElement('component-menu')\nclass ComponentMenu extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-content: stretch;\n\n        background-color: var(--component-menu-background-color);\n        margin: 0px;\n        padding: 0px;\n\n        width: 180px;\n        height: 100%;\n\n        overflow: hidden;\n\n        border: 2px solid var(--component-menu-border-color);\n        box-sizing: border-box;\n\n        position: absolute;\n        top: 0px;\n\n        z-index: 1;\n      }\n\n      h2 {\n        background-color: var(--component-menu-border-color);\n        padding: 1px 5px;\n        margin: 0;\n        font: var(--component-menu-title);\n        color: #fff;\n        text-transform: capitalize;\n      }\n\n      [templates] {\n        flex: 1;\n\n        display: block;\n        margin: 0;\n        padding: 0;\n        overflow-y: auto;\n\n        background-color: var(--component-menu-background-color);\n      }\n\n      [template] {\n        display: flex;\n        align-items: center;\n        min-height: var(--component-menu-item-icon-size);\n        padding: 0 5px 0 0;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        font-size: 11px;\n        color: var(--component-menu-item-color);\n      }\n\n      [template]:hover,\n      [template]:focus {\n        color: var(--component-menu-item-hover-color);\n        font-weight: bold;\n        cursor: pointer;\n      }\n\n      [template] img {\n        margin: 5px;\n        width: var(--component-menu-item-icon-size);\n        height: var(--component-menu-item-icon-size);\n      }\n    `\n  ]\n\n  @property({ type: Object }) groups: Pallet[] = []\n  @property({ type: Object }) scene: Scene | null = null\n  @property({ type: String }) group: string | null = ''\n  @property({ type: Array }) templates: PalletItem[] = []\n\n  render() {\n    return this.group\n      ? html`\n          <h2 onclick=${(e: MouseEvent) => e.stopPropagation()}>${this.group} list</h2>\n\n          <div templates>\n            ${(this.templates || []).map(\n              template => html`\n                <div @click=${this.onClickTemplate} data-type=${template.type} template>\n                  <img src=${this.templateIcon(template)} />${template.type}\n                </div>\n              `\n            )}\n          </div>\n        `\n      : html``\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('group')) {\n      if (!this.group) {\n        this.style.display = 'none'\n        this.templates = []\n      } else {\n        this.style.display = 'flex'\n        this.templates = this.groups.find((g: Pallet) => g.name === this.group)?.templates || []\n      }\n    }\n  }\n\n  onClickTemplate(e: MouseEvent) {\n    var item = e.target as HTMLElement\n    var type = item.closest('[data-type]')?.getAttribute('data-type')\n\n    if (!type) {\n      return\n    }\n\n    var group = this.groups.find(g => g.name == this.group)\n\n    if (this.scene && group) {\n      var template = group.templates.find(template => template.type == type)\n      template && this.scene.add(JSON.parse(JSON.stringify(template.model)), { cx: 200, cy: 200 })\n    }\n\n    this.group = null\n  }\n\n  templateIcon(template: PalletItem) {\n    return template.icon || noImage\n  }\n}\n"]}
+{"version":3,"file":"component-menu.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-menu.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGzE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,OAAO,MAAM,mDAAmD,CAAA;AAGvE,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAoF8B,WAAM,GAAa,EAAE,CAAA;QACrB,UAAK,GAAiB,IAAI,CAAA;QAC1B,UAAK,GAAkB,EAAE,CAAA;QAE5C,cAAS,GAAiB,EAAE,CAAA;IAmFvC,CAAC;IA9EC,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK;YACf,CAAC,CAAC,IAAI,CAAA;wBACY,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,IAAI,IAAI,CAAC,KAAK;;;;yBAInD,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;wBAC5C,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;cAEnD,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,GAAG,CAC1B,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA;8BACA,IAAI,CAAC,eAAe,cAAc,QAAQ,CAAC,IAAI;6BAChD,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,MAAM,QAAQ,CAAC,IAAI;;eAE5D,CACF;;;;;wBAKW,GAAG,EAAE;gBACf,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;YACtB,CAAC;wBACW,IAAI,CAAC,QAAQ;;;;SAI5B;YACH,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;IACZ,CAAC;IAED,OAAO,CAAC,OAA6B;;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;gBACf,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;gBACnB,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;aAChC;iBAAM;gBACL,IAAI,CAAC,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,0CAAE,SAAS,KAAI,EAAE,CAAA;gBACxF,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;aAC/B;SACF;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC3B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK;gBAClC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,QAAQ,CAAC;gBACvC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;SAC3C;IACH,CAAC;IAED,YAAY,CAAC,IAA+B;QAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,IAAI,IAAI,CAAC,CAAA;IAChF,CAAC;IAED,gBAAgB,CAAC,CAAa;;QAC5B,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAA;QACtC,IAAI,CAAC,YAAY,CAAC,MAAA,MAAO,CAAC,OAAO,CAAC,aAAa,CAAC,0CAAE,YAAY,CAAC,WAAW,CAAC,CAAC,CAAA;IAC9E,CAAC;IAED,eAAe,CAAC,CAAa;;QAC3B,IAAI,IAAI,GAAG,CAAC,CAAC,MAAqB,CAAA;QAClC,IAAI,IAAI,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,0CAAE,YAAY,CAAC,WAAW,CAAC,CAAA;QAEjE,IAAI,CAAC,IAAI,EAAE;YACT,OAAM;SACP;QAED,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,IAAI,IAAI,CAAC,CAAA;YACtE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,CAAA;SACvG;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;IACnB,CAAC;IAED,YAAY,CAAC,QAAoB;QAC/B,OAAO,QAAQ,CAAC,IAAI,IAAI,OAAO,CAAA;IACjC,CAAC;CACF,CAAA;AA1KQ,oBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8EF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAA2B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAA0B;AAE5C;IAAR,KAAK,EAAE;gDAA6B;AAC5B;IAAR,KAAK,EAAE;+CAA2B;AAER;IAA1B,KAAK,CAAC,kBAAkB,CAAC;6CAAqB;AA3F3C,aAAa;IADlB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,aAAa,CA2KlB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './component-detail'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { Pallet, PalletItem } from '../../types'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { Scene } from '@hatiolab/things-scene'\nimport { ScrollbarStyles } from '@operato/styles'\nimport noImage from '../../../../assets/images/components/no-image.png'\n\n@customElement('component-menu')\nclass ComponentMenu extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-content: stretch;\n\n        background-color: var(--component-menu-background-color);\n        margin: 0px;\n        padding: 0px;\n\n        width: 180px;\n        height: 100%;\n\n        overflow: visible;\n\n        border: 2px solid var(--component-menu-border-color);\n        box-sizing: border-box;\n\n        position: absolute;\n        top: 0px;\n\n        z-index: 1;\n      }\n\n      h2 {\n        background-color: var(--component-menu-border-color);\n        padding: 1px 5px;\n        margin: 0;\n        font: var(--component-menu-title);\n        color: #fff;\n        text-transform: capitalize;\n      }\n\n      [templates] {\n        flex: 1;\n\n        display: block;\n        margin: 0;\n        padding: 0;\n        overflow-y: auto;\n\n        background-color: var(--component-menu-background-color);\n      }\n\n      [template] {\n        display: flex;\n        align-items: center;\n        min-height: var(--component-menu-item-icon-size);\n        padding: 0 5px 0 0;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        font-size: 11px;\n        color: var(--component-menu-item-color);\n      }\n\n      [template]:hover,\n      [template]:focus {\n        color: var(--component-menu-item-hover-color);\n        font-weight: bold;\n        cursor: pointer;\n      }\n\n      [template] img {\n        margin: 5px;\n        width: var(--component-menu-item-icon-size);\n        height: var(--component-menu-item-icon-size);\n      }\n\n      component-detail {\n        position: absolute;\n        top: 0;\n        left: 180px;\n        height: 100%;\n        outline: none;\n      }\n\n      component-detail[hidden] {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) groups: Pallet[] = []\n  @property({ type: Object }) scene: Scene | null = null\n  @property({ type: String }) group: string | null = ''\n\n  @state() templates: PalletItem[] = []\n  @state() template: PalletItem | any\n\n  @query('component-detail') detail!: HTMLElement\n\n  render() {\n    return this.group\n      ? html`\n          <h2 onclick=${(e: MouseEvent) => e.stopPropagation()}>${this.group} list</h2>\n\n          <div\n            templates\n            @mouseover=${(e: MouseEvent) => this.onHoverComponent(e)}\n            @mouseout=${(e: MouseEvent) => (this.template = null)}\n          >\n            ${(this.templates || []).map(\n              template => html`\n                <div @click=${this.onClickTemplate} data-type=${template.type} template>\n                  <img src=${this.templateIcon(template)} />${template.type}\n                </div>\n              `\n            )}\n          </div>\n\n          <component-detail\n            tabindex=\"-1\"\n            @focusout=${() => {\n              this.template = null\n            }}\n            .template=${this.template}\n            hidden\n          >\n          </component-detail>\n        `\n      : html``\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('group')) {\n      if (!this.group) {\n        this.templates = []\n        this.setAttribute('hidden', '')\n      } else {\n        this.templates = this.groups.find((g: Pallet) => g.name === this.group)?.templates || []\n        this.removeAttribute('active')\n      }\n    }\n\n    if (changes.has('template')) {\n      this.template && this.template.about\n        ? this.detail.removeAttribute('hidden')\n        : this.detail.setAttribute('hidden', '')\n    }\n  }\n\n  findTemplate(type: string | null | undefined) {\n    this.template = type && this.templates.find(template => template.type == type)\n  }\n\n  onHoverComponent(e: MouseEvent) {\n    const button = e.target as HTMLElement\n    this.findTemplate(button!.closest('[data-type]')?.getAttribute('data-type'))\n  }\n\n  onClickTemplate(e: MouseEvent) {\n    var item = e.target as HTMLElement\n    var type = item.closest('[data-type]')?.getAttribute('data-type')\n\n    if (!type) {\n      return\n    }\n\n    if (this.scene) {\n      this.template = this.templates.find(template => template.type == type)\n      this.template && this.scene.add(JSON.parse(JSON.stringify(this.template.model)), { cx: 200, cy: 200 })\n    }\n\n    this.group = null\n  }\n\n  templateIcon(template: PalletItem) {\n    return template.icon || noImage\n  }\n}\n"]}

package/dist/src/modeller/component-toolbar/component-toolbar.js

@@ -5,54 +5,60 @@ import { __decorate } from "tslib";
 import './component-menu';
 import { LitElement, css, html } from 'lit';
 import { SCENE_MODE } from '@hatiolab/things-scene';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, property, query, queryAll } from 'lit/decorators.js';
 let ComponentToolbar = class ComponentToolbar extends LitElement {
     constructor() {
         super(...arguments);
         this.componentGroupList = [];
         this.mode = SCENE_MODE.VIEW;
+        this.icons = {};
+    }
+    updated(changes) {
+        if (changes.has('componentGroupList')) {
+            const color = getComputedStyle(this, null).getPropertyValue('--primary-color');
+            this.icons = (this.componentGroupList || [])
+                .filter(group => { var _a; return ((_a = group.templates) === null || _a === void 0 ? void 0 : _a.length) > 0; })
+                .reduce((sum, group) => {
+                sum[group.name] =
+                    'data:image/svg+xml;charset=UTF-8;base64,' + btoa(group.icon.replace(/{{strokeColor}}/g, color));
+                return sum;
+            }, {});
+        }
+        if (changes.has('group')) {
+            this.groups.forEach(group => {
+                group.getAttribute('data-group') === this.group
+                    ? group.setAttribute('active', '')
+                    : group.removeAttribute('active');
+            });
+            this.group ? this.menu.removeAttribute('hidden') : this.menu.setAttribute('hidden', '');
+        }
     }
     render() {
+        const componentList = this.componentGroupList || [];
         return html `
-      <span id="shift" class="pressed" @click=${() => this._onClickShift()}> </span>
-
-      ${this.componentGroupList
+      ${componentList
             .filter(group => { var _a; return ((_a = group.templates) === null || _a === void 0 ? void 0 : _a.length) > 0; })
-            .map(item => html ` <span data-group=${item.name} @click=${(e) => this._onClickGroup(e)}> </span> `)}
+            .map(group => html `
+            <img
+              data-group=${group.name}
+              @click=${(e) => this._onClickGroup(e)}
+              .src=${this.icons[group.name]}
+            />
+          `)}
 
       <component-menu
         tabindex="-1"
         @focusout=${() => {
             this.group = null;
         }}
-        id="menu"
         .scene=${this.scene}
         .group=${this.group}
-        .groups=${this.componentGroupList}
-        class="shadow"
+        .groups=${componentList}
+        hidden
       >
       </component-menu>
     `;
     }
-    _setMode(mode) {
-        this.mode = mode;
-        this.dispatchEvent(new CustomEvent('mode-changed', {
-            bubbles: true,
-            composed: true,
-            detail: { value: mode }
-        }));
-    }
-    _onClickShift() {
-        var shift = this.renderRoot.querySelector('#shift');
-        if (shift === null || shift === void 0 ? void 0 : shift.hasAttribute('active')) {
-            shift.removeAttribute('active');
-            this._setMode(SCENE_MODE.EDIT);
-        }
-        else {
-            shift.setAttribute('active', '');
-            this._setMode(SCENE_MODE.SHIFT);
-        }
-    }
     async _onClickGroup(e) {
         var _a, _b;
         var button = e.target;
@@ -74,7 +80,7 @@ ComponentToolbar.styles = [
         background-color: var(--component-toolbar-background-color);
       }
 
-      span {
+      img {
         display: flex;
         flex-direction: row;
 
@@ -84,75 +90,21 @@ ComponentToolbar.styles = [
 
         border-bottom: var(--component-toolbar-border);
         margin: 0;
-        background: url(/assets/images/icon-vtoolbar.png) -1px 0 no-repeat;
-      }
-
-      span[data-group='line'] {
-        background-position: 50% -186px;
-      }
-
-      span[data-group='shape'] {
-        background-position: 0px -284px;
-      }
-
-      span[data-group='textAndMedia'] {
-        background-position: 50% -385px;
-      }
-
-      span[data-group='chartAndGauge'] {
-        background-position: 50% -488px;
-      }
-
-      span[data-group='table'] {
-        background-position: 50% -585px;
-      }
-
-      span[data-group='container'] {
-        background-position: 50% -685px;
-      }
-
-      span[data-group='dataSource'] {
-        background-position: 50% -888px;
-      }
-
-      span[data-group='IoT'] {
-        background-position: -3px -788px;
-      }
-
-      span[data-group='3D'] {
-        background-position: 50% -992px;
-      }
-
-      span[data-group='warehouse'] {
-        background-position: -2px -1089px;
-      }
-
-      span[data-group='form'] {
-        background-position: -2px -1287px;
-      }
-
-      span[data-group='etc'] {
-        background-position: -1px -1189px;
-      }
-
-      .pressed {
-        background-position: 0 15px;
-      }
-
-      .pressed[pressed],
-      .pressed[active] {
-        background-position: -3px -88px;
-        background-color: #beb9b3;
+        padding: 6px;
+        box-sizing: border-box;
       }
 
       component-menu {
-        display: none;
         position: absolute;
         top: 0;
         left: var(--component-toolbar-icon-size);
         height: 100%;
         outline: none;
       }
+
+      component-menu[hidden] {
+        display: none;
+      }
     `
 ];
 __decorate([
@@ -168,8 +120,11 @@ __decorate([
     property({ type: Number })
 ], ComponentToolbar.prototype, "mode", void 0);
 __decorate([
-    query('#menu')
+    query('component-menu')
 ], ComponentToolbar.prototype, "menu", void 0);
+__decorate([
+    queryAll('[data-group]')
+], ComponentToolbar.prototype, "groups", void 0);
 ComponentToolbar = __decorate([
     customElement('component-toolbar')
 ], ComponentToolbar);

package/dist/src/modeller/component-toolbar/component-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-toolbar.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './component-menu'\n\nimport { LitElement, css, html } from 'lit'\nimport { SCENE_MODE, Scene } from '@hatiolab/things-scene'\nimport { customElement, property, query } from 'lit/decorators.js'\n\n@customElement('component-toolbar')\nclass ComponentToolbar extends LitElement {\n  static styles = [\n    css`\n      :host {\n        left: 0;\n        display: block;\n        position: relative;\n\n        width: var(--component-toolbar-icon-size);\n        background-color: var(--component-toolbar-background-color);\n      }\n\n      span {\n        display: flex;\n        flex-direction: row;\n\n        width: var(--component-toolbar-icon-size);\n        height: var(--component-toolbar-icon-size);\n        min-width: 50%;\n\n        border-bottom: var(--component-toolbar-border);\n        margin: 0;\n        background: url(/assets/images/icon-vtoolbar.png) -1px 0 no-repeat;\n      }\n\n      span[data-group='line'] {\n        background-position: 50% -186px;\n      }\n\n      span[data-group='shape'] {\n        background-position: 0px -284px;\n      }\n\n      span[data-group='textAndMedia'] {\n        background-position: 50% -385px;\n      }\n\n      span[data-group='chartAndGauge'] {\n        background-position: 50% -488px;\n      }\n\n      span[data-group='table'] {\n        background-position: 50% -585px;\n      }\n\n      span[data-group='container'] {\n        background-position: 50% -685px;\n      }\n\n      span[data-group='dataSource'] {\n        background-position: 50% -888px;\n      }\n\n      span[data-group='IoT'] {\n        background-position: -3px -788px;\n      }\n\n      span[data-group='3D'] {\n        background-position: 50% -992px;\n      }\n\n      span[data-group='warehouse'] {\n        background-position: -2px -1089px;\n      }\n\n      span[data-group='form'] {\n        background-position: -2px -1287px;\n      }\n\n      span[data-group='etc'] {\n        background-position: -1px -1189px;\n      }\n\n      .pressed {\n        background-position: 0 15px;\n      }\n\n      .pressed[pressed],\n      .pressed[active] {\n        background-position: -3px -88px;\n        background-color: #beb9b3;\n      }\n\n      component-menu {\n        display: none;\n        position: absolute;\n        top: 0;\n        left: var(--component-toolbar-icon-size);\n        height: 100%;\n        outline: none;\n      }\n    `\n  ]\n\n  @property({ type: Array }) componentGroupList: any[] = []\n  @property({ type: String }) group?: string | null\n  @property({ type: Object }) scene!: Scene\n  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.VIEW\n\n  @query('#menu') private menu!: HTMLElement\n\n  render() {\n    return html`\n      <span id=\"shift\" class=\"pressed\" @click=${() => this._onClickShift()}> </span>\n\n      ${this.componentGroupList\n        .filter(group => group.templates?.length > 0)\n        .map(item => html` <span data-group=${item.name} @click=${(e: MouseEvent) => this._onClickGroup(e)}> </span> `)}\n\n      <component-menu\n        tabindex=\"-1\"\n        @focusout=${() => {\n          this.group = null\n        }}\n        id=\"menu\"\n        .scene=${this.scene}\n        .group=${this.group}\n        .groups=${this.componentGroupList}\n        class=\"shadow\"\n      >\n      </component-menu>\n    `\n  }\n\n  _setMode(mode: SCENE_MODE) {\n    this.mode = mode\n    this.dispatchEvent(\n      new CustomEvent('mode-changed', {\n        bubbles: true,\n        composed: true,\n        detail: { value: mode }\n      })\n    )\n  }\n\n  _onClickShift() {\n    var shift = this.renderRoot.querySelector('#shift')\n    if (shift?.hasAttribute('active')) {\n      shift.removeAttribute('active')\n      this._setMode(SCENE_MODE.EDIT)\n    } else {\n      shift!.setAttribute('active', '')\n      this._setMode(SCENE_MODE.SHIFT)\n    }\n  }\n\n  async _onClickGroup(e: MouseEvent) {\n    var button = e.target as HTMLElement\n\n    this.group = button!.closest('[data-group]')?.getAttribute('data-group')\n\n    if (!this.group) return\n\n    await this.updateComplete\n\n    this.menu?.focus()\n  }\n}\n"]}
+{"version":3,"file":"component-toolbar.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './component-menu'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { SCENE_MODE, Scene } from '@hatiolab/things-scene'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\nimport { Group } from '../../types'\n\n@customElement('component-toolbar')\nclass ComponentToolbar extends LitElement {\n  static styles = [\n    css`\n      :host {\n        left: 0;\n        display: block;\n        position: relative;\n\n        width: var(--component-toolbar-icon-size);\n        background-color: var(--component-toolbar-background-color);\n      }\n\n      img {\n        display: flex;\n        flex-direction: row;\n\n        width: var(--component-toolbar-icon-size);\n        height: var(--component-toolbar-icon-size);\n        min-width: 50%;\n\n        border-bottom: var(--component-toolbar-border);\n        margin: 0;\n        padding: 6px;\n        box-sizing: border-box;\n      }\n\n      component-menu {\n        position: absolute;\n        top: 0;\n        left: var(--component-toolbar-icon-size);\n        height: 100%;\n        outline: none;\n      }\n\n      component-menu[hidden] {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Array }) componentGroupList: Group[] = []\n  @property({ type: String }) group?: string | null\n  @property({ type: Object }) scene!: Scene\n  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.VIEW\n\n  @query('component-menu') private menu!: HTMLElement\n  @queryAll('[data-group]') private groups!: NodeListOf<HTMLElement>\n\n  private icons: { [name: string]: string } = {}\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('componentGroupList')) {\n      const color = getComputedStyle(this, null).getPropertyValue('--primary-color')\n\n      this.icons = (this.componentGroupList || [])\n        .filter(group => group.templates?.length > 0)\n        .reduce((sum, group: Group) => {\n          sum[group.name] =\n            'data:image/svg+xml;charset=UTF-8;base64,' + btoa(group.icon.replace(/{{strokeColor}}/g, color))\n          return sum\n        }, {} as { [name: string]: string })\n    }\n\n    if (changes.has('group')) {\n      this.groups.forEach(group => {\n        group.getAttribute('data-group') === this.group\n          ? group.setAttribute('active', '')\n          : group.removeAttribute('active')\n      })\n\n      this.group ? this.menu.removeAttribute('hidden') : this.menu.setAttribute('hidden', '')\n    }\n  }\n\n  render() {\n    const componentList = this.componentGroupList || []\n\n    return html`\n      ${componentList\n        .filter(group => group.templates?.length > 0)\n        .map(\n          group => html`\n            <img\n              data-group=${group.name}\n              @click=${(e: MouseEvent) => this._onClickGroup(e)}\n              .src=${this.icons[group.name]}\n            />\n          `\n        )}\n\n      <component-menu\n        tabindex=\"-1\"\n        @focusout=${() => {\n          this.group = null\n        }}\n        .scene=${this.scene}\n        .group=${this.group}\n        .groups=${componentList}\n        hidden\n      >\n      </component-menu>\n    `\n  }\n\n  async _onClickGroup(e: MouseEvent) {\n    var button = e.target as HTMLElement\n\n    this.group = button!.closest('[data-group]')?.getAttribute('data-group')\n\n    if (!this.group) return\n\n    await this.updateComplete\n\n    this.menu?.focus()\n  }\n}\n"]}

package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.d.ts

@@ -1,11 +1,10 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@things-factory/i18n-base';
-import '@things-factory/modeller-ui/client/editors/things-editor-code';
 import '@things-factory/modeller-ui/client/editors/things-editor-value-map';
 import '@things-factory/modeller-ui/client/editors/things-editor-value-range';
-import '@things-factory/modeller-ui/client/editors/things-editor-buttons-radio';
+import '@operato/input/dist/src/ox-buttons-radio';
+import '@operato/input/dist/src/ox-input-code';
 import { LitElement, PropertyValues } from 'lit';
 import { Properties, Scene } from '@hatiolab/things-scene';
 export declare type Rule = {

package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js

@@ -2,11 +2,11 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import '@things-factory/i18n-base';
-import '@things-factory/modeller-ui/client/editors/things-editor-code';
+// import '@things-factory/modeller-ui/client/editors/things-editor-code'
 import '@things-factory/modeller-ui/client/editors/things-editor-value-map';
 import '@things-factory/modeller-ui/client/editors/things-editor-value-range';
-import '@things-factory/modeller-ui/client/editors/things-editor-buttons-radio';
+import '@operato/input/dist/src/ox-buttons-radio';
+import '@operato/input/dist/src/ox-input-code';
 import { LitElement, css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators';
 /**
@@ -51,6 +51,9 @@ let DataBindingMapper = class DataBindingMapper extends LitElement {
         changes.has('mapping') && this._onChangedMapping();
     }
     render() {
+        const mapping = this.mapping || {
+            rule: 'value'
+        };
         return html `
       <label for="accessor-input"> <i18n-msg msgid="label.accessor">accessor</i18n-msg> </label>
       <input
@@ -58,7 +61,7 @@ let DataBindingMapper = class DataBindingMapper extends LitElement {
         value-key="accessor"
         type="text"
         data-mapping-accessor
-        .value=${this.mapping.accessor || ''}
+        .value=${mapping.accessor || ''}
       />
 
       <label for="target-input"> <i18n-msg msgid="label.target">target</i18n-msg> </label>
@@ -67,7 +70,7 @@ let DataBindingMapper = class DataBindingMapper extends LitElement {
         type="text"
         value-key="target"
         list="target-list"
-        .value=${this.mapping.target || ''}
+        .value=${mapping.target || ''}
         @focusin=${() => {
             if (!this.scene)
                 this._componentIds = [];
@@ -83,42 +86,42 @@ let DataBindingMapper = class DataBindingMapper extends LitElement {
       </datalist>
 
       <label for="property-input"> <i18n-msg msgid="label.property">property</i18n-msg> </label>
-      <select id="property-input" value-key="property" .value=${this.mapping.property}>
-        ${this.properties.map(item => html ` <option .value=${item.name} ?selected=${item.name == this.mapping.property}>${item.label}</option> `)}
+      <select id="property-input" value-key="property" .value=${mapping.property}>
+        ${this.properties.map(item => html ` <option .value=${item.name} ?selected=${item.name == mapping.property}>${item.label}</option> `)}
       </select>
 
       <label> <i18n-msg msgid="label.rule-type">rule type</i18n-msg> </label>
-      <things-editor-buttons-radio .value=${this.mapping.rule} @change=${(e) => this._onChangeRule(e)}>
+      <ox-buttons-radio .value=${mapping.rule} @change=${(e) => this._onChangeRule(e)}>
         <div data-value="value"><i18n-msg msgid="label.value"></i18n-msg></div>
         <div data-value="map"><i18n-msg msgid="label.map"></i18n-msg></div>
         <div data-value="range"><i18n-msg msgid="label.range"></i18n-msg></div>
         <div data-value="eval"><i18n-msg msgid="label.eval"></i18n-msg></div>
-      </things-editor-buttons-radio>
+      </ox-buttons-radio>
 
-      <div rule-editors class="content" ?hidden=${this.mapping.rule == 'value'}>
+      <div rule-editors class="content" ?hidden=${mapping.rule == 'value'}>
         <things-editor-value-map
           value-key="map"
           .value=${this.rule.map || {}}
-          .valuetype=${this._valuetype(this.mapping.property)}
-          ?active=${this.mapping.rule == 'map'}
+          .valuetype=${this._valuetype(mapping.property)}
+          ?active=${mapping.rule == 'map'}
         >
         </things-editor-value-map>
 
         <things-editor-value-range
           value-key="range"
           .value=${this.rule.range || []}
-          .valuetype=${this._valuetype(this.mapping.property)}
-          ?active=${this.mapping.rule == 'range'}
+          .valuetype=${this._valuetype(mapping.property)}
+          ?active=${mapping.rule == 'range'}
         >
         </things-editor-value-range>
 
-        <things-editor-code
+        <ox-input-code
           value-key="eval"
           id="eval-editor"
           .value=${this.rule.eval || ''}
-          ?active=${this.mapping.rule == 'eval'}
+          ?active=${mapping.rule == 'eval'}
         >
-        </things-editor-code>
+        </ox-input-code>
       </div>
     `;
     }
@@ -260,7 +263,7 @@ DataBindingMapper.styles = [
 
       input,
       select,
-      things-editor-buttons-radio,
+      ox-buttons-radio,
       [mapping-rule] {
         grid-column: span 7;
       }
@@ -269,19 +272,19 @@ DataBindingMapper.styles = [
         border: var(--property-sidebar-fieldset-border);
       }
 
-      things-editor-buttons-radio {
+      ox-buttons-radio {
         display: flex;
         padding: 0 4px;
       }
 
-      things-editor-buttons-radio > * {
+      ox-buttons-radio > * {
         text-align: center;
         flex: 1;
         margin: 2px;
         border-bottom: 2px solid #fff;
       }
 
-      things-editor-buttons-radio div[active] {
+      ox-buttons-radio div[active] {
         border-color: #f2471c;
       }
 
@@ -311,7 +314,7 @@ DataBindingMapper.styles = [
         display: none;
       }
 
-      things-editor-code {
+      ox-input-code {
         height: 300px;
         overflow: auto;
       }

package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-binding-mapper.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/data-binding/data-binding-mapper.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\nimport '@things-factory/modeller-ui/client/editors/things-editor-code'\nimport '@things-factory/modeller-ui/client/editors/things-editor-value-map'\nimport '@things-factory/modeller-ui/client/editors/things-editor-value-range'\nimport '@things-factory/modeller-ui/client/editors/things-editor-buttons-radio'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { customElement, property, query, state } from 'lit/decorators'\n\nexport type Rule =\n  | {\n      map?: Properties\n      range?: Properties[]\n      eval?: string\n    }\n  | any\n\nexport type Mapping = {\n  rule: 'map' | 'range' | 'eval' | 'value'\n  accessor?: string\n  target?: string\n  property?: string\n  param?: Rule\n}\n\n/**\nelement for mapping data value editing\n\nExample:\n\n  <data-binding-mapper mapping=${mapping}>\n  </data-binding-mapper>\n*/\n\n@customElement('data-binding-mapper')\nexport default class DataBindingMapper extends LitElement {\n  static styles = [\n    css`\n      :host {\n        background-color: rgba(255, 255, 255, 0.5);\n        overflow: hidden;\n        padding: 7px 0 0 0;\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        border-width: 0 1px 1px 1px;\n        padding: 4px;\n        line-height: 2;\n\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 4px;\n        grid-auto-rows: minmax(24px, auto);\n\n        align-items: center;\n      }\n\n      :host > * {\n        align-self: stretch;\n      }\n\n      label {\n        grid-column: span 3;\n        text-align: right;\n        text-transform: capitalize;\n      }\n\n      input,\n      select,\n      things-editor-buttons-radio,\n      [mapping-rule] {\n        grid-column: span 7;\n      }\n      input,\n      select {\n        border: var(--property-sidebar-fieldset-border);\n      }\n\n      things-editor-buttons-radio {\n        display: flex;\n        padding: 0 4px;\n      }\n\n      things-editor-buttons-radio > * {\n        text-align: center;\n        flex: 1;\n        margin: 2px;\n        border-bottom: 2px solid #fff;\n      }\n\n      things-editor-buttons-radio div[active] {\n        border-color: #f2471c;\n      }\n\n      select {\n        height: 22px;\n      }\n\n      [mapping-rule] {\n        display: flex;\n      }\n\n      [mapping-rule] * {\n        flex: auto;\n        margin: 0;\n        text-align: left;\n        align-self: center;\n      }\n\n      [rule-editors] {\n        grid-column: span 10;\n\n        display: 'flex';\n        align-content: auto;\n      }\n\n      [rule-editors] :not([active]) {\n        display: none;\n      }\n\n      things-editor-code {\n        height: 300px;\n        overflow: auto;\n      }\n    `\n  ]\n\n  @property({ type: Object }) mapping: Mapping = {\n    rule: 'value'\n  }\n  @property({ type: Object }) rule: Rule = {}\n  @property({ type: Array }) properties: Properties[] = []\n  @property({ type: Object }) scene?: Scene\n\n  @state() _valueTypes: any = {\n    play: 'boolean',\n    hidden: 'boolean',\n    started: 'boolean',\n\n    rotation: 'number',\n    value: 'number',\n\n    fillStyle: 'color',\n    strokeStyle: 'color',\n    fontColor: 'color',\n\n    data: 'object',\n    source: 'object',\n    location: 'object',\n    dimension: 'object',\n\n    text: 'string',\n    ref: 'string'\n  }\n  @state() _componentIds: any[] = []\n\n  @query('#eval-editor') editor!: HTMLInputElement\n  @query('#target-input') target!: HTMLInputElement\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', e => this._onChange(e))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('mapping') && this._onChangedMapping()\n  }\n\n  render() {\n    return html`\n      <label for=\"accessor-input\"> <i18n-msg msgid=\"label.accessor\">accessor</i18n-msg> </label>\n      <input\n        id=\"accessor-input\"\n        value-key=\"accessor\"\n        type=\"text\"\n        data-mapping-accessor\n        .value=${this.mapping.accessor || ''}\n      />\n\n      <label for=\"target-input\"> <i18n-msg msgid=\"label.target\">target</i18n-msg> </label>\n      <input\n        id=\"target-input\"\n        type=\"text\"\n        value-key=\"target\"\n        list=\"target-list\"\n        .value=${this.mapping.target || ''}\n        @focusin=${() => {\n          if (!this.scene) this._componentIds = []\n          this._componentIds = this.scene!.ids.map(info => info.key).filter(id => !!id)\n        }}\n      />\n      <datalist id=\"target-list\">\n        <option value=\"(self)\"></option>\n        <option value=\"(key)\"></option>\n        ${this._componentIds.length\n          ? html` ${this._componentIds.map(id => html` <option value=${id}></option> `)} `\n          : html``}\n      </datalist>\n\n      <label for=\"property-input\"> <i18n-msg msgid=\"label.property\">property</i18n-msg> </label>\n      <select id=\"property-input\" value-key=\"property\" .value=${this.mapping.property}>\n        ${this.properties.map(\n          item =>\n            html` <option .value=${item.name} ?selected=${item.name == this.mapping.property}>${item.label}</option> `\n        )}\n      </select>\n\n      <label> <i18n-msg msgid=\"label.rule-type\">rule type</i18n-msg> </label>\n      <things-editor-buttons-radio .value=${this.mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>\n        <div data-value=\"value\"><i18n-msg msgid=\"label.value\"></i18n-msg></div>\n        <div data-value=\"map\"><i18n-msg msgid=\"label.map\"></i18n-msg></div>\n        <div data-value=\"range\"><i18n-msg msgid=\"label.range\"></i18n-msg></div>\n        <div data-value=\"eval\"><i18n-msg msgid=\"label.eval\"></i18n-msg></div>\n      </things-editor-buttons-radio>\n\n      <div rule-editors class=\"content\" ?hidden=${this.mapping.rule == 'value'}>\n        <things-editor-value-map\n          value-key=\"map\"\n          .value=${this.rule.map || {}}\n          .valuetype=${this._valuetype(this.mapping.property!)}\n          ?active=${this.mapping.rule == 'map'}\n        >\n        </things-editor-value-map>\n\n        <things-editor-value-range\n          value-key=\"range\"\n          .value=${this.rule.range || []}\n          .valuetype=${this._valuetype(this.mapping.property!)}\n          ?active=${this.mapping.rule == 'range'}\n        >\n        </things-editor-value-range>\n\n        <things-editor-code\n          value-key=\"eval\"\n          id=\"eval-editor\"\n          .value=${this.rule.eval || ''}\n          ?active=${this.mapping.rule == 'eval'}\n        >\n        </things-editor-code>\n      </div>\n    `\n  }\n\n  _valuetype(property: string) {\n    return this._valueTypes[property] || 'string'\n  }\n\n  private _keep_saved_rule_params: boolean = false\n\n  async _onChangedMapping() {\n    if (this._keep_saved_rule_params) {\n      this._keep_saved_rule_params = false\n    } else {\n      await this.updateComplete\n\n      var rule: Rule = {}\n\n      if (this.mapping) {\n        switch (this.mapping.rule) {\n          case 'map':\n            rule.map = this.mapping.param || {}\n            break\n          case 'range':\n            rule.range = this.mapping.param || []\n            break\n          case 'eval':\n            rule.eval = this.mapping.param || ''\n            break\n          default:\n            this.mapping.rule = 'value'\n            break\n        }\n      }\n\n      this.rule = rule\n      this.requestUpdate()\n    }\n  }\n\n  _onChangeRule(e: Event) {\n    var element = e.target as HTMLInputElement\n    var value = element.value\n\n    let param\n\n    switch (value) {\n      case 'map':\n        param = this.rule.map\n        break\n      case 'range':\n        param = this.rule.range\n        break\n      case 'eval':\n        param = this.rule.eval || ''\n\n        // rule.eval에 값이 없을 때, ace-editor 내용이 초기화되지 않는 문제때문에 처리함.\n        if (!param) {\n          this.editor.value = 'return'\n        }\n        break\n      default:\n    }\n\n    this.mapping = {\n      ...this.mapping,\n      rule: value as 'value' | 'map' | 'range' | 'eval',\n      param\n    }\n\n    this._keep_saved_rule_params = true\n    this.dispatchEvent(new CustomEvent('value-change', { bubbles: true, composed: true }))\n  }\n\n  _onChange(e: Event) {\n    var element = e.target as HTMLInputElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) return\n\n    var value = element.value\n\n    if (key == 'target') {\n      if (value.length > 0 && !/^[.#(\\[]/.test(value)) {\n        value = '#' + value.trim()\n\n        this.target.value = value\n      }\n\n      this.mapping = {\n        ...this.mapping,\n        target: value\n      }\n    } else if (key == 'accessor') {\n      this.mapping = {\n        ...this.mapping,\n        accessor: (value || '').trim()\n      }\n    } else if (key == 'property') {\n      this.mapping = {\n        ...this.mapping,\n        property: (value || '').trim()\n      }\n    } else if (key == 'map' || key == 'range' || key == 'eval') {\n      this.rule[key] = value\n      this.mapping = {\n        ...this.mapping,\n        param: value\n      }\n    }\n\n    if (!this.mapping.rule) this.mapping.rule = 'value'\n\n    this._keep_saved_rule_params = true\n    this.dispatchEvent(\n      new CustomEvent('value-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          changed: {\n            [key]: value\n          }\n        }\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"data-binding-mapper.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/data-binding/data-binding-mapper.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\n// import '@things-factory/modeller-ui/client/editors/things-editor-code'\nimport '@things-factory/modeller-ui/client/editors/things-editor-value-map'\nimport '@things-factory/modeller-ui/client/editors/things-editor-value-range'\nimport '@operato/input/dist/src/ox-buttons-radio'\nimport '@operato/input/dist/src/ox-input-code'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { customElement, property, query, state } from 'lit/decorators'\n\nexport type Rule =\n  | {\n      map?: Properties\n      range?: Properties[]\n      eval?: string\n    }\n  | any\n\nexport type Mapping = {\n  rule: 'map' | 'range' | 'eval' | 'value'\n  accessor?: string\n  target?: string\n  property?: string\n  param?: Rule\n}\n\n/**\nelement for mapping data value editing\n\nExample:\n\n  <data-binding-mapper mapping=${mapping}>\n  </data-binding-mapper>\n*/\n\n@customElement('data-binding-mapper')\nexport default class DataBindingMapper extends LitElement {\n  static styles = [\n    css`\n      :host {\n        background-color: rgba(255, 255, 255, 0.5);\n        overflow: hidden;\n        padding: 7px 0 0 0;\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        border-width: 0 1px 1px 1px;\n        padding: 4px;\n        line-height: 2;\n\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 4px;\n        grid-auto-rows: minmax(24px, auto);\n\n        align-items: center;\n      }\n\n      :host > * {\n        align-self: stretch;\n      }\n\n      label {\n        grid-column: span 3;\n        text-align: right;\n        text-transform: capitalize;\n      }\n\n      input,\n      select,\n      ox-buttons-radio,\n      [mapping-rule] {\n        grid-column: span 7;\n      }\n      input,\n      select {\n        border: var(--property-sidebar-fieldset-border);\n      }\n\n      ox-buttons-radio {\n        display: flex;\n        padding: 0 4px;\n      }\n\n      ox-buttons-radio > * {\n        text-align: center;\n        flex: 1;\n        margin: 2px;\n        border-bottom: 2px solid #fff;\n      }\n\n      ox-buttons-radio div[active] {\n        border-color: #f2471c;\n      }\n\n      select {\n        height: 22px;\n      }\n\n      [mapping-rule] {\n        display: flex;\n      }\n\n      [mapping-rule] * {\n        flex: auto;\n        margin: 0;\n        text-align: left;\n        align-self: center;\n      }\n\n      [rule-editors] {\n        grid-column: span 10;\n\n        display: 'flex';\n        align-content: auto;\n      }\n\n      [rule-editors] :not([active]) {\n        display: none;\n      }\n\n      ox-input-code {\n        height: 300px;\n        overflow: auto;\n      }\n    `\n  ]\n\n  @property({ type: Object }) mapping: Mapping = {\n    rule: 'value'\n  }\n  @property({ type: Object }) rule: Rule = {}\n  @property({ type: Array }) properties: Properties[] = []\n  @property({ type: Object }) scene?: Scene\n\n  @state() _valueTypes: any = {\n    play: 'boolean',\n    hidden: 'boolean',\n    started: 'boolean',\n\n    rotation: 'number',\n    value: 'number',\n\n    fillStyle: 'color',\n    strokeStyle: 'color',\n    fontColor: 'color',\n\n    data: 'object',\n    source: 'object',\n    location: 'object',\n    dimension: 'object',\n\n    text: 'string',\n    ref: 'string'\n  }\n  @state() _componentIds: any[] = []\n\n  @query('#eval-editor') editor!: HTMLInputElement\n  @query('#target-input') target!: HTMLInputElement\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', e => this._onChange(e))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('mapping') && this._onChangedMapping()\n  }\n\n  render() {\n    const mapping = this.mapping || {\n      rule: 'value'\n    }\n\n    return html`\n      <label for=\"accessor-input\"> <i18n-msg msgid=\"label.accessor\">accessor</i18n-msg> </label>\n      <input\n        id=\"accessor-input\"\n        value-key=\"accessor\"\n        type=\"text\"\n        data-mapping-accessor\n        .value=${mapping.accessor || ''}\n      />\n\n      <label for=\"target-input\"> <i18n-msg msgid=\"label.target\">target</i18n-msg> </label>\n      <input\n        id=\"target-input\"\n        type=\"text\"\n        value-key=\"target\"\n        list=\"target-list\"\n        .value=${mapping.target || ''}\n        @focusin=${() => {\n          if (!this.scene) this._componentIds = []\n          this._componentIds = this.scene!.ids.map(info => info.key).filter(id => !!id)\n        }}\n      />\n      <datalist id=\"target-list\">\n        <option value=\"(self)\"></option>\n        <option value=\"(key)\"></option>\n        ${this._componentIds.length\n          ? html` ${this._componentIds.map(id => html` <option value=${id}></option> `)} `\n          : html``}\n      </datalist>\n\n      <label for=\"property-input\"> <i18n-msg msgid=\"label.property\">property</i18n-msg> </label>\n      <select id=\"property-input\" value-key=\"property\" .value=${mapping.property}>\n        ${this.properties.map(\n          item => html` <option .value=${item.name} ?selected=${item.name == mapping.property}>${item.label}</option> `\n        )}\n      </select>\n\n      <label> <i18n-msg msgid=\"label.rule-type\">rule type</i18n-msg> </label>\n      <ox-buttons-radio .value=${mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>\n        <div data-value=\"value\"><i18n-msg msgid=\"label.value\"></i18n-msg></div>\n        <div data-value=\"map\"><i18n-msg msgid=\"label.map\"></i18n-msg></div>\n        <div data-value=\"range\"><i18n-msg msgid=\"label.range\"></i18n-msg></div>\n        <div data-value=\"eval\"><i18n-msg msgid=\"label.eval\"></i18n-msg></div>\n      </ox-buttons-radio>\n\n      <div rule-editors class=\"content\" ?hidden=${mapping.rule == 'value'}>\n        <things-editor-value-map\n          value-key=\"map\"\n          .value=${this.rule.map || {}}\n          .valuetype=${this._valuetype(mapping.property!)}\n          ?active=${mapping.rule == 'map'}\n        >\n        </things-editor-value-map>\n\n        <things-editor-value-range\n          value-key=\"range\"\n          .value=${this.rule.range || []}\n          .valuetype=${this._valuetype(mapping.property!)}\n          ?active=${mapping.rule == 'range'}\n        >\n        </things-editor-value-range>\n\n        <ox-input-code\n          value-key=\"eval\"\n          id=\"eval-editor\"\n          .value=${this.rule.eval || ''}\n          ?active=${mapping.rule == 'eval'}\n        >\n        </ox-input-code>\n      </div>\n    `\n  }\n\n  _valuetype(property: string) {\n    return this._valueTypes[property] || 'string'\n  }\n\n  private _keep_saved_rule_params: boolean = false\n\n  async _onChangedMapping() {\n    if (this._keep_saved_rule_params) {\n      this._keep_saved_rule_params = false\n    } else {\n      await this.updateComplete\n\n      var rule: Rule = {}\n\n      if (this.mapping) {\n        switch (this.mapping.rule) {\n          case 'map':\n            rule.map = this.mapping.param || {}\n            break\n          case 'range':\n            rule.range = this.mapping.param || []\n            break\n          case 'eval':\n            rule.eval = this.mapping.param || ''\n            break\n          default:\n            this.mapping.rule = 'value'\n            break\n        }\n      }\n\n      this.rule = rule\n      this.requestUpdate()\n    }\n  }\n\n  _onChangeRule(e: Event) {\n    var element = e.target as HTMLInputElement\n    var value = element.value\n\n    let param\n\n    switch (value) {\n      case 'map':\n        param = this.rule.map\n        break\n      case 'range':\n        param = this.rule.range\n        break\n      case 'eval':\n        param = this.rule.eval || ''\n\n        // rule.eval에 값이 없을 때, ace-editor 내용이 초기화되지 않는 문제때문에 처리함.\n        if (!param) {\n          this.editor.value = 'return'\n        }\n        break\n      default:\n    }\n\n    this.mapping = {\n      ...this.mapping,\n      rule: value as 'value' | 'map' | 'range' | 'eval',\n      param\n    }\n\n    this._keep_saved_rule_params = true\n    this.dispatchEvent(new CustomEvent('value-change', { bubbles: true, composed: true }))\n  }\n\n  _onChange(e: Event) {\n    var element = e.target as HTMLInputElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) return\n\n    var value = element.value\n\n    if (key == 'target') {\n      if (value.length > 0 && !/^[.#(\\[]/.test(value)) {\n        value = '#' + value.trim()\n\n        this.target.value = value\n      }\n\n      this.mapping = {\n        ...this.mapping,\n        target: value\n      }\n    } else if (key == 'accessor') {\n      this.mapping = {\n        ...this.mapping,\n        accessor: (value || '').trim()\n      }\n    } else if (key == 'property') {\n      this.mapping = {\n        ...this.mapping,\n        property: (value || '').trim()\n      }\n    } else if (key == 'map' || key == 'range' || key == 'eval') {\n      this.rule[key] = value\n      this.mapping = {\n        ...this.mapping,\n        param: value\n      }\n    }\n\n    if (!this.mapping.rule) this.mapping.rule = 'value'\n\n    this._keep_saved_rule_params = true\n    this.dispatchEvent(\n      new CustomEvent('value-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          changed: {\n            [key]: value\n          }\n        }\n      })\n    )\n  }\n}\n"]}