@operato/board 0.3.18 → 0.3.22

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.3.22](https://github.com/hatiolab/operato/compare/v0.3.21...v0.3.22) (2022-01-30)
+
+
+### :rocket: New Features
+
+* started help and layout module ([08f875c](https://github.com/hatiolab/operato/commit/08f875cd30aa914901c249c8c0b462ce4a151c23))
+
+
+
+### [0.3.21](https://github.com/hatiolab/operato/compare/v0.3.20...v0.3.21) (2022-01-29)
+
+
+### :rocket: New Features
+
+* i18n module added, shell module started to cover client core part ([a976dad](https://github.com/hatiolab/operato/commit/a976dad6353962e489d8e648af9598b6a51e5ec7))
+
+
+
+### [0.3.20](https://github.com/hatiolab/operato/compare/v0.3.19...v0.3.20) (2022-01-28)
+
+
+### :bug: Bug Fix
+
+* operato/graphql ApolloClient create parameter ([6b591ed](https://github.com/hatiolab/operato/commit/6b591edaa873c343793b33195f7076d9617d7ebf))
+
+
+
+### [0.3.19](https://github.com/hatiolab/operato/compare/v0.3.18...v0.3.19) (2022-01-25)
+
+**Note:** Version bump only for package @operato/board
+
+
+
+
+
 ### [0.3.18](https://github.com/hatiolab/operato/compare/v0.3.17...v0.3.18) (2022-01-23)
 
 **Note:** Version bump only for package @operato/board

package/custom-elements.json

@@ -5197,208 +5197,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/inspector/inspector.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SceneInspector",
-          "members": [
-            {
-              "kind": "field",
-              "name": "scene",
-              "type": {
-                "text": "Scene | undefined"
-              },
-              "attribute": "scene"
-            },
-            {
-              "kind": "field",
-              "name": "_extendedMap",
-              "type": {
-                "text": "any"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "show",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "sortableConfig",
-              "type": {
-                "text": "Sortable.Options"
-              },
-              "default": "{\n    group: 'inspector',\n    animation: 150,\n    draggable: '.component',\n    swapThreshold: 1,\n    onSort: this.onSort.bind(this)\n  }"
-            },
-            {
-              "kind": "method",
-              "name": "onSort",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Sortable.SortableEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_onclick",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_ondblclick",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "extendedMap"
-            },
-            {
-              "kind": "method",
-              "name": "getNodeHandleClass",
-              "parameters": [
-                {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "isExtended",
-              "parameters": [
-                {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "toggleExtended",
-              "parameters": [
-                {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "toggleHidden",
-              "parameters": [
-                {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "selectComponent",
-              "parameters": [
-                {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "renderComponent",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                },
-                {
-                  "name": "depth",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            }
-          ],
-          "attributes": [
-            {
-              "name": "scene",
-              "type": {
-                "text": "Scene | undefined"
-              },
-              "fieldName": "scene"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "scene-inspector",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SceneInspector",
-            "module": "src/modeller/property-sidebar/inspector/inspector.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "scene-inspector",
-          "declaration": {
-            "name": "SceneInspector",
-            "module": "src/modeller/property-sidebar/inspector/inspector.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/modeller/property-sidebar/effects/effects-shared-style.ts",
@@ -6118,6 +5916,208 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/property-sidebar/inspector/inspector.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SceneInspector",
+          "members": [
+            {
+              "kind": "field",
+              "name": "scene",
+              "type": {
+                "text": "Scene | undefined"
+              },
+              "attribute": "scene"
+            },
+            {
+              "kind": "field",
+              "name": "_extendedMap",
+              "type": {
+                "text": "any"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "show",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "sortableConfig",
+              "type": {
+                "text": "Sortable.Options"
+              },
+              "default": "{\n    group: 'inspector',\n    animation: 150,\n    draggable: '.component',\n    swapThreshold: 1,\n    onSort: this.onSort.bind(this)\n  }"
+            },
+            {
+              "kind": "method",
+              "name": "onSort",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Sortable.SortableEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onclick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_ondblclick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "extendedMap"
+            },
+            {
+              "kind": "method",
+              "name": "getNodeHandleClass",
+              "parameters": [
+                {
+                  "name": "component",
+                  "type": {
+                    "text": "Component"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "isExtended",
+              "parameters": [
+                {
+                  "name": "component",
+                  "type": {
+                    "text": "Component"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "toggleExtended",
+              "parameters": [
+                {
+                  "name": "component",
+                  "type": {
+                    "text": "Component"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "toggleHidden",
+              "parameters": [
+                {
+                  "name": "component",
+                  "type": {
+                    "text": "Component"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "selectComponent",
+              "parameters": [
+                {
+                  "name": "component",
+                  "type": {
+                    "text": "Component"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderComponent",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "component",
+                  "type": {
+                    "text": "Component"
+                  }
+                },
+                {
+                  "name": "depth",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "scene",
+              "type": {
+                "text": "Scene | undefined"
+              },
+              "fieldName": "scene"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "scene-inspector",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SceneInspector",
+            "module": "src/modeller/property-sidebar/inspector/inspector.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "scene-inspector",
+          "declaration": {
+            "name": "SceneInspector",
+            "module": "src/modeller/property-sidebar/inspector/inspector.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts",

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

@@ -5,6 +5,7 @@ import '@things-factory/modeller-ui/client/editors/things-editor-value-map';
 import '@things-factory/modeller-ui/client/editors/things-editor-value-range';
 import '@operato/input/ox-buttons-radio.js';
 import '@operato/input/ox-input-code.js';
+import '@operato/i18n/ox-i18n.js';
 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

@@ -6,6 +6,7 @@ import '@things-factory/modeller-ui/client/editors/things-editor-value-map';
 import '@things-factory/modeller-ui/client/editors/things-editor-value-range';
 import '@operato/input/ox-buttons-radio.js';
 import '@operato/input/ox-input-code.js';
+import '@operato/i18n/ox-i18n.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 /**
@@ -54,7 +55,7 @@ let DataBindingMapper = class DataBindingMapper extends LitElement {
             rule: 'value'
         };
         return html `
-      <label for="accessor-input"> <i18n-msg msgid="label.accessor">accessor</i18n-msg> </label>
+      <label for="accessor-input"> <ox-i18n msgid="label.accessor">accessor</ox-i18n> </label>
       <input
         id="accessor-input"
         value-key="accessor"
@@ -63,7 +64,7 @@ let DataBindingMapper = class DataBindingMapper extends LitElement {
         .value=${mapping.accessor || ''}
       />
 
-      <label for="target-input"> <i18n-msg msgid="label.target">target</i18n-msg> </label>
+      <label for="target-input"> <ox-i18n msgid="label.target">target</ox-i18n> </label>
       <input
         id="target-input"
         type="text"
@@ -84,17 +85,17 @@ let DataBindingMapper = class DataBindingMapper extends LitElement {
             : html ``}
       </datalist>
 
-      <label for="property-input"> <i18n-msg msgid="label.property">property</i18n-msg> </label>
+      <label for="property-input"> <ox-i18n msgid="label.property">property</ox-i18n> </label>
       <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>
+      <label> <ox-i18n msgid="label.rule-type">rule type</ox-i18n> </label>
       <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>
+        <div data-value="value"><ox-i18n msgid="label.value"></ox-i18n></div>
+        <div data-value="map"><ox-i18n msgid="label.map"></ox-i18n></div>
+        <div data-value="range"><ox-i18n msgid="label.range"></ox-i18n></div>
+        <div data-value="eval"><ox-i18n msgid="label.eval"></ox-i18n></div>
       </ox-buttons-radio>
 
       <div rule-editors class="content" ?hidden=${mapping.rule == 'value'}>

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/modeller-ui/client/editors/things-editor-value-map'\nimport '@things-factory/modeller-ui/client/editors/things-editor-value-range'\nimport '@operato/input/ox-buttons-radio.js'\nimport '@operato/input/ox-input-code.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\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"]}
+{"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/modeller-ui/client/editors/things-editor-value-map'\nimport '@things-factory/modeller-ui/client/editors/things-editor-value-range'\nimport '@operato/input/ox-buttons-radio.js'\nimport '@operato/input/ox-input-code.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\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\"> <ox-i18n msgid=\"label.accessor\">accessor</ox-i18n> </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\"> <ox-i18n msgid=\"label.target\">target</ox-i18n> </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\"> <ox-i18n msgid=\"label.property\">property</ox-i18n> </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> <ox-i18n msgid=\"label.rule-type\">rule type</ox-i18n> </label>\n      <ox-buttons-radio .value=${mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>\n        <div data-value=\"value\"><ox-i18n msgid=\"label.value\"></ox-i18n></div>\n        <div data-value=\"map\"><ox-i18n msgid=\"label.map\"></ox-i18n></div>\n        <div data-value=\"range\"><ox-i18n msgid=\"label.range\"></ox-i18n></div>\n        <div data-value=\"eval\"><ox-i18n msgid=\"label.eval\"></ox-i18n></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"]}

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

@@ -6,3 +6,4 @@ import '@material/mwc-icon';
 import '@things-factory/help';
 import '@operato/input/ox-buttons-radio.js';
 import '@operato/input/ox-input-data.js';
+import '@operato/i18n/ox-i18n.js';

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

@@ -7,6 +7,7 @@ import '@material/mwc-icon';
 import '@things-factory/help';
 import '@operato/input/ox-buttons-radio.js';
 import '@operato/input/ox-input-data.js';
+import '@operato/i18n/ox-i18n.js';
 import { css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { AbstractProperty } from '../abstract-property';
@@ -67,24 +68,24 @@ let PropertyDataBinding = class PropertyDataBinding extends AbstractProperty {
           <title-with-help topic="board-modeller/data-binding" msgid="label.identifier">identifier</title-with-help>
         </legend>
         <div class="property-grid">
-          <label> <i18n-msg msgid="label.id">ID</i18n-msg> </label>
+          <label> <ox-i18n msgid="label.id">ID</ox-i18n> </label>
           <input value-key="id" .value=${value.id || ''} />
 
-          <label> <i18n-msg msgid="label.class">Class</i18n-msg> </label>
+          <label> <ox-i18n msgid="label.class">Class</ox-i18n> </label>
           <input value-key="class" .value=${value.class || ''} />
 
-          <label> <i18n-msg msgid="label.template-prefix">Template Prefix</i18n-msg> </label>
+          <label> <ox-i18n msgid="label.template-prefix">Template Prefix</ox-i18n> </label>
           <input value-key="templatePrefix" .value=${value.templatePrefix || ''} />
 
           <div class="checkbox-row">
             <input id="checkbox-ndns" type="checkbox" value-key="ndns" .checked=${value.ndns} />
-            <label for="checkbox-ndns"> <i18n-msg msgid="label.ndns">No Data No Show</i18n-msg> </label>
+            <label for="checkbox-ndns"> <ox-i18n msgid="label.ndns">No Data No Show</ox-i18n> </label>
           </div>
 
           <div class="checkbox-row">
             <input id="checkbox-sensitive" type="checkbox" value-key="sensitive" .checked=${value.sensitive} />
             <label for="checkbox-sensitive">
-              <i18n-msg msgid="label.intent-sensitive">Intent Sensitive</i18n-msg>
+              <ox-i18n msgid="label.intent-sensitive">Intent Sensitive</ox-i18n>
             </label>
           </div>
         </div>
@@ -92,7 +93,7 @@ let PropertyDataBinding = class PropertyDataBinding extends AbstractProperty {
 
       <fieldset collapsable ?collapsed=${!this._dataExpanded}>
         <legend>
-          <i18n-msg msgid="label.initial-data">initial value</i18n-msg>
+          <ox-i18n msgid="label.initial-data">initial value</ox-i18n>
           <mwc-icon
             @click=${() => {
             this._dataExpanded = !this._dataExpanded;
@@ -104,7 +105,7 @@ let PropertyDataBinding = class PropertyDataBinding extends AbstractProperty {
       </fieldset>
 
       <fieldset>
-        <legend><i18n-msg msgid="label.data-spread">Data Spread</i18n-msg></legend>
+        <legend><ox-i18n msgid="label.data-spread">Data Spread</ox-i18n></legend>
         <div id="tab-header">
           <mwc-icon
             id="tab-nav-left-button"