@operato/property-panel 10.0.0-beta.12 → 10.0.0-beta.18

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.0.0-beta.18](https://github.com/hatiolab/operato/compare/v10.0.0-beta.17...v10.0.0-beta.18) (2026-03-25)
+
+
+### :rocket: New Features
+
+* **property-panel:** cameraFloorConstraint UI 추가 ([8bb94e5](https://github.com/hatiolab/operato/commit/8bb94e59f8e356a9deb755a82e91939fcf2df7e6))
+
+
+
+## [10.0.0-beta.15](https://github.com/hatiolab/operato/compare/v10.0.0-beta.14...v10.0.0-beta.15) (2026-03-22)
+
+
+### :house: Code Refactoring
+
+* **property-panel:** 3D 설정에서 bookmark 섹션 제거 ([14bbf5c](https://github.com/hatiolab/operato/commit/14bbf5c063f5afd5f77f15fc573e78f4da440ef5))
+
+
+### :rocket: New Features
+
+* **board:** 데이터바인딩 팝업 에디터 + property 콤보박스 + D키 핫키 ([d467180](https://github.com/hatiolab/operato/commit/d467180e106b1d268099bf9895082e2c6cf8d07b))
+* **property-panel:** 데이터바인딩 팝업 Flow 탭 + UI 개선 ([d52fadc](https://github.com/hatiolab/operato/commit/d52fadc24dd9ba4a658cbd5ac2edd8c53460f3fe))
+
+
+### :bug: Bug Fix
+
+* **board:** 데이터바인딩 팝업 모델 반영 + GLTF animations 트리 + 사이드바 저장 조건 완화 ([46fe68e](https://github.com/hatiolab/operato/commit/46fe68ea8c3af43c5c4275a42cd7bb5e761ec118))
+* **property-panel:** 데이터바인딩 팝업 GLTF Mesh 필터링 + fillStyleTargets 저장 조건 ([09afea6](https://github.com/hatiolab/operato/commit/09afea65d1cdf86d04e2e1606ba6e1b2063a4739))
+
+
+
 ## [10.0.0-beta.12](https://github.com/hatiolab/operato/compare/v10.0.0-beta.11...v10.0.0-beta.12) (2026-03-17)
 
 

package/dist/src/property-panel/data-binding/data-binding-mapper.js

@@ -125,11 +125,19 @@ export class DataBindingMapper extends LitElement {
           <ox-i18n msgid="label.property">property</ox-i18n
           ><ox-help-icon topic="board-modeller/data-binding-property"></ox-help-icon
         ></label>
-        <select id="property-input" value-key="property" .value=${mapping.property || ''}>
+        <input
+          id="property-input"
+          type="text"
+          value-key="property"
+          list="property-list"
+          .value=${mapping.property || ''}
+        />
+
+        <datalist id="property-list">
           ${this.properties.map(item => html `
-              <option .value=${item.name} ?selected=${item.name == mapping.property}>${item.label}</option>
+              <option value=${item.name}>${item.label}</option>
             `)}
-        </select>
+        </datalist>
 
         <label> <ox-i18n msgid="label.rule-type">rule type</ox-i18n> </label>
         <ox-buttons-radio .value=${mapping.rule} @change=${(e) => this._onChangeRule(e)}>

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

@@ -1 +1 @@
-{"version":3,"file":"data-binding-mapper.js","sourceRoot":"","sources":["../../../../src/property-panel/data-binding/data-binding-mapper.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-buttons-radio.js'\nimport '@operato/input/ox-input-code.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-help-icon.js'\nimport './data-binding-value-map.js'\nimport './data-binding-value-range.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nexport type Rule =\n  | {\n      map?: Properties\n      range?: Properties[]\n      eval?: string\n    }\n  | any\n\nexport type Mapping = {\n  source?: string\n  rule: 'map' | 'range' | 'eval' | 'value'\n  accessor?: string\n  target?: string\n  property?: string\n  param?: Rule\n  ndnsp?: boolean\n  partial?: boolean\n}\n\n/**\nelement for mapping data value editing\n\nExample:\n\n  <data-binding-mapper mapping=${mapping}>\n  </data-binding-mapper>\n*/\n\nexport class DataBindingMapper extends LitElement {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      :host {\n        display: flex;\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\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        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: 'attachment',\n    location: 'object',\n    dimension: 'object',\n\n    text: 'string',\n    ref: 'string'\n  }\n  @state() _componentIds: { value: string; description: string }[] = []\n\n  @query('#eval-editor') editor!: HTMLInputElement\n  @query('#source-input') source!: 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  findComponentIds() {\n    this._componentIds =\n      (this.scene &&\n        this.scene.ids.map((i: any) => {\n          const id = i.key\n          return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n        })) ||\n      []\n  }\n\n  render() {\n    const mapping = this.mapping || {\n      rule: 'value'\n    }\n\n    return html`\n      <div class=\"property-grid\">\n        <label for=\"source-input\"> <ox-i18n msgid=\"label.source\">source</ox-i18n> </label>\n        <input\n          id=\"source-input\"\n          type=\"text\"\n          value-key=\"source\"\n          list=\"source-list\"\n          .value=${mapping.source || ''}\n          @focusin=${() => this.findComponentIds()}\n        />\n\n        <label for=\"accessor-input\">\n          <ox-i18n msgid=\"label.accessor\">accessor</ox-i18n\n          ><ox-help-icon topic=\"board-modeller/accessor\"></ox-help-icon>\n        </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=${() => this.findComponentIds()}\n        />\n\n        <datalist id=\"source-list\">\n          <option value=\"(self)\"></option>\n          ${this._componentIds.length\n            ? html`\n                ${this._componentIds.map(\n                  ({ value, description }) => html` <option value=${value}>${description}</option> `\n                )}\n              `\n            : html``}\n        </datalist>\n\n        <datalist id=\"target-list\">\n          <option value=\"(self)\"></option>\n          <option value=\"(children)\"></option>\n          <option value=\"(key)\"></option>\n          <option value=\"[propkey]\"></option>\n          ${this._componentIds.length\n            ? html`\n                ${this._componentIds.map(\n                  ({ value, description }) => html` <option value=${value}>${description}</option> `\n                )}\n              `\n            : html``}\n        </datalist>\n\n        <label for=\"property-input\">\n          <ox-i18n msgid=\"label.property\">property</ox-i18n\n          ><ox-help-icon topic=\"board-modeller/data-binding-property\"></ox-help-icon\n        ></label>\n        <select id=\"property-input\" value-key=\"property\" .value=${mapping.property || ''}>\n          ${this.properties.map(\n            item => html`\n              <option .value=${item.name} ?selected=${item.name == mapping.property}>${item.label}</option>\n            `\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 class=\"fullwidth\" rule-editors ?hidden=${mapping.rule == 'value'}>\n          <data-binding-value-map\n            value-key=\"map\"\n            .value=${this.rule.map || {}}\n            .valuetype=${this._valuetype(mapping.property!)}\n            ?active=${mapping.rule == 'map'}\n          >\n          </data-binding-value-map>\n\n          <data-binding-value-range\n            value-key=\"range\"\n            .value=${this.rule.range || []}\n            .valuetype=${this._valuetype(mapping.property!)}\n            ?active=${mapping.rule == 'range'}\n          >\n          </data-binding-value-range>\n\n          <ox-input-code\n            class=\"fullwidth\"\n            value-key=\"eval\"\n            id=\"eval-editor\"\n            .value=${this.rule.eval || ''}\n            ?active=${mapping.rule == 'eval'}\n            language=\"javascript\"\n          >\n          </ox-input-code>\n        </div>\n\n        <input id=\"checkbox-partial\" type=\"checkbox\" value-key=\"partial\" .checked=${mapping.partial === true} />\n        <label for=\"checkbox-partial\"> <ox-i18n msgid=\"label.partial-spreading\">Partial Spreading</ox-i18n> </label>\n\n        <input id=\"checkbox-ndnsp\" type=\"checkbox\" value-key=\"ndnsp\" .checked=${mapping.ndnsp === true} />\n        <label for=\"checkbox-ndnsp\"> <ox-i18n msgid=\"label.ndnsp\">No Data No Spreading</ox-i18n> </label>\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: string | boolean = element.value\n\n    if (key === 'source') {\n      if (value.length > 0) {\n        value = value.trim()\n\n        this.source.value = value\n      }\n\n      this.mapping = {\n        ...this.mapping,\n        source: value\n      }\n    } else 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    } else if (key === 'ndnsp' /* no data no spreading */) {\n      value = element.checked\n\n      this.mapping = {\n        ...this.mapping,\n        ndnsp: value\n      }\n    } else if (key === 'partial' /* partial spreading */) {\n      value = element.checked\n\n      this.mapping = {\n        ...this.mapping,\n        partial: value\n      }\n    }\n\n    if (!this.mapping.rule) {\n      this.mapping.rule = 'value'\n    }\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/property-panel/data-binding/data-binding-mapper.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oCAAoC,CAAA;AAC3C,OAAO,iCAAiC,CAAA;AACxC,OAAO,0BAA0B,CAAA;AACjC,OAAO,+BAA+B,CAAA;AACtC,OAAO,6BAA6B,CAAA;AACpC,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAG1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAqB5E;;;;;;;EAOE;AAEF,MAAM,OAAO,iBAAkB,SAAQ,UAAU;IAAjD;;QAyC8B,YAAO,GAAY;YAC7C,IAAI,EAAE,OAAO;SACd,CAAA;QAC2B,SAAI,GAAS,EAAE,CAAA;QAChB,eAAU,GAAiB,EAAE,CAAA;QAG/C,gBAAW,GAAQ;YAC1B,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,SAAS;YACjB,OAAO,EAAE,SAAS;YAElB,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,QAAQ;YAEf,SAAS,EAAE,OAAO;YAClB,WAAW,EAAE,OAAO;YACpB,SAAS,EAAE,OAAO;YAElB,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,YAAY;YACpB,QAAQ,EAAE,QAAQ;YAClB,SAAS,EAAE,QAAQ;YAEnB,IAAI,EAAE,QAAQ;YACd,GAAG,EAAE,QAAQ;SACd,CAAA;QACQ,kBAAa,GAA6C,EAAE,CAAA;QA6J7D,4BAAuB,GAAY,KAAK,CAAA;IAiJlD,CAAC;IAxSC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;IACpE,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAA;IACpD,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,aAAa;YAChB,CAAC,IAAI,CAAC,KAAK;gBACT,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE;;oBAC5B,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAA;oBAChB,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,MAAA,IAAI,CAAC,KAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,0CAAE,GAAG,CAAC,MAAM,CAAC,EAAE,CAAA;gBAChF,CAAC,CAAC,CAAC;gBACL,EAAE,CAAA;IACN,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI;YAC9B,IAAI,EAAE,OAAO;SACd,CAAA;QAED,OAAO,IAAI,CAAA;;;;;;;;mBAQI,OAAO,CAAC,MAAM,IAAI,EAAE;qBAClB,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE;;;;;;;;;;;;mBAY/B,OAAO,CAAC,QAAQ,IAAI,EAAE;;;;;;;;;mBAStB,OAAO,CAAC,MAAM,IAAI,EAAE;qBAClB,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE;;;;;YAKtC,IAAI,CAAC,aAAa,CAAC,MAAM;YACzB,CAAC,CAAC,IAAI,CAAA;kBACA,IAAI,CAAC,aAAa,CAAC,GAAG,CACtB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA,kBAAkB,KAAK,IAAI,WAAW,YAAY,CACnF;eACF;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;;;;;;YAQR,IAAI,CAAC,aAAa,CAAC,MAAM;YACzB,CAAC,CAAC,IAAI,CAAA;kBACA,IAAI,CAAC,aAAa,CAAC,GAAG,CACtB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA,kBAAkB,KAAK,IAAI,WAAW,YAAY,CACnF;eACF;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;;;;;;;;;;mBAYD,OAAO,CAAC,QAAQ,IAAI,EAAE;;;;YAI7B,IAAI,CAAC,UAAU,CAAC,GAAG,CACnB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;8BACM,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK;aACxC,CACF;;;;mCAIwB,OAAO,CAAC,IAAI,YAAY,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;;;;;;;sDAOxC,OAAO,CAAC,IAAI,IAAI,OAAO;;;qBAGxD,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE;yBACf,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAS,CAAC;sBACrC,OAAO,CAAC,IAAI,IAAI,KAAK;;;;;;qBAMtB,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE;yBACjB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAS,CAAC;sBACrC,OAAO,CAAC,IAAI,IAAI,OAAO;;;;;;;;qBAQxB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE;sBACnB,OAAO,CAAC,IAAI,IAAI,MAAM;;;;;;oFAMwC,OAAO,CAAC,OAAO,KAAK,IAAI;;;gFAG5B,OAAO,CAAC,KAAK,KAAK,IAAI;;;KAGjG,CAAA;IACH,CAAC;IAED,UAAU,CAAC,QAAgB;QACzB,OAAO,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAA;IAC/C,CAAC;IAID,KAAK,CAAC,iBAAiB;QACrB,IAAI,IAAI,CAAC,uBAAuB,EAAE,CAAC;YACjC,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAA;QACtC,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,CAAC,cAAc,CAAA;YAEzB,IAAI,IAAI,GAAS,EAAE,CAAA;YAEnB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,QAAQ,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;oBAC1B,KAAK,KAAK;wBACR,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAA;wBACnC,MAAK;oBACP,KAAK,OAAO;wBACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAA;wBACrC,MAAK;oBACP,KAAK,MAAM;wBACT,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAA;wBACpC,MAAK;oBACP;wBACE,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAA;wBAC3B,MAAK;gBACT,CAAC;YACH,CAAC;YAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;YAChB,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;IACH,CAAC;IAED,aAAa,CAAC,CAAQ;QACpB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;QAEzB,IAAI,KAAK,CAAA;QAET,QAAQ,KAAK,EAAE,CAAC;YACd,KAAK,KAAK;gBACR,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAA;gBACrB,MAAK;YACP,KAAK,OAAO;gBACV,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAA;gBACvB,MAAK;YACP,KAAK,MAAM;gBACT,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;gBAE5B,yDAAyD;gBACzD,IAAI,CAAC,KAAK,EAAE,CAAC;oBACX,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAA;gBAC9B,CAAC;gBACD,MAAK;YACP,QAAQ;QACV,CAAC;QAED,IAAI,CAAC,OAAO,GAAG;YACb,GAAG,IAAI,CAAC,OAAO;YACf,IAAI,EAAE,KAA2C;YACjD,KAAK;SACN,CAAA;QAED,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAA;QACnC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IACxF,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG;YAAE,OAAM;QAEhB,IAAI,KAAK,GAAqB,OAAO,CAAC,KAAK,CAAA;QAE3C,IAAI,GAAG,KAAK,QAAQ,EAAE,CAAC;YACrB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACrB,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAA;gBAEpB,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAA;YAC3B,CAAC;YAED,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,MAAM,EAAE,KAAK;aACd,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC5B,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;gBAChD,KAAK,GAAG,GAAG,GAAG,KAAK,CAAC,IAAI,EAAE,CAAA;gBAE1B,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAA;YAC3B,CAAC;YAED,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,MAAM,EAAE,KAAK;aACd,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,UAAU,EAAE,CAAC;YAC9B,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE;aAC/B,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,UAAU,EAAE,CAAC;YAC9B,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE;aAC/B,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,KAAK,IAAI,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,MAAM,EAAE,CAAC;YAC9D,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YACtB,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,KAAK,EAAE,KAAK;aACb,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,OAAO,CAAC,0BAA0B,EAAE,CAAC;YACtD,KAAK,GAAG,OAAO,CAAC,OAAO,CAAA;YAEvB,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,KAAK,EAAE,KAAK;aACb,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,SAAS,CAAC,uBAAuB,EAAE,CAAC;YACrD,KAAK,GAAG,OAAO,CAAC,OAAO,CAAA;YAEvB,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,OAAO,EAAE,KAAK;aACf,CAAA;QACH,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAA;QAC7B,CAAC;QAED,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAA;QACnC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,OAAO,EAAE;oBACP,CAAC,GAAG,CAAC,EAAE,KAAK;iBACb;aACF;SACF,CAAC,CACH,CAAA;IACH,CAAC;;AAhXM,wBAAM,GAAG;IACd,kBAAkB;IAClB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCF;CACF,AAtCY,CAsCZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAE1B;AAC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAgB;AAChB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;qDAA8B;AAC5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAc;AAEhC;IAAR,KAAK,EAAE;sDAmBP;AACQ;IAAR,KAAK,EAAE;wDAA6D;AAE9C;IAAtB,KAAK,CAAC,cAAc,CAAC;iDAA0B;AACxB;IAAvB,KAAK,CAAC,eAAe,CAAC;iDAA0B;AACzB;IAAvB,KAAK,CAAC,eAAe,CAAC;iDAA0B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-buttons-radio.js'\nimport '@operato/input/ox-input-code.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-help-icon.js'\nimport './data-binding-value-map.js'\nimport './data-binding-value-range.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nexport type Rule =\n  | {\n      map?: Properties\n      range?: Properties[]\n      eval?: string\n    }\n  | any\n\nexport type Mapping = {\n  source?: string\n  rule: 'map' | 'range' | 'eval' | 'value'\n  accessor?: string\n  target?: string\n  property?: string\n  param?: Rule\n  ndnsp?: boolean\n  partial?: boolean\n}\n\n/**\nelement for mapping data value editing\n\nExample:\n\n  <data-binding-mapper mapping=${mapping}>\n  </data-binding-mapper>\n*/\n\nexport class DataBindingMapper extends LitElement {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      :host {\n        display: flex;\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\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        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: 'attachment',\n    location: 'object',\n    dimension: 'object',\n\n    text: 'string',\n    ref: 'string'\n  }\n  @state() _componentIds: { value: string; description: string }[] = []\n\n  @query('#eval-editor') editor!: HTMLInputElement\n  @query('#source-input') source!: 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  findComponentIds() {\n    this._componentIds =\n      (this.scene &&\n        this.scene.ids.map((i: any) => {\n          const id = i.key\n          return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n        })) ||\n      []\n  }\n\n  render() {\n    const mapping = this.mapping || {\n      rule: 'value'\n    }\n\n    return html`\n      <div class=\"property-grid\">\n        <label for=\"source-input\"> <ox-i18n msgid=\"label.source\">source</ox-i18n> </label>\n        <input\n          id=\"source-input\"\n          type=\"text\"\n          value-key=\"source\"\n          list=\"source-list\"\n          .value=${mapping.source || ''}\n          @focusin=${() => this.findComponentIds()}\n        />\n\n        <label for=\"accessor-input\">\n          <ox-i18n msgid=\"label.accessor\">accessor</ox-i18n\n          ><ox-help-icon topic=\"board-modeller/accessor\"></ox-help-icon>\n        </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=${() => this.findComponentIds()}\n        />\n\n        <datalist id=\"source-list\">\n          <option value=\"(self)\"></option>\n          ${this._componentIds.length\n            ? html`\n                ${this._componentIds.map(\n                  ({ value, description }) => html` <option value=${value}>${description}</option> `\n                )}\n              `\n            : html``}\n        </datalist>\n\n        <datalist id=\"target-list\">\n          <option value=\"(self)\"></option>\n          <option value=\"(children)\"></option>\n          <option value=\"(key)\"></option>\n          <option value=\"[propkey]\"></option>\n          ${this._componentIds.length\n            ? html`\n                ${this._componentIds.map(\n                  ({ value, description }) => html` <option value=${value}>${description}</option> `\n                )}\n              `\n            : html``}\n        </datalist>\n\n        <label for=\"property-input\">\n          <ox-i18n msgid=\"label.property\">property</ox-i18n\n          ><ox-help-icon topic=\"board-modeller/data-binding-property\"></ox-help-icon\n        ></label>\n        <input\n          id=\"property-input\"\n          type=\"text\"\n          value-key=\"property\"\n          list=\"property-list\"\n          .value=${mapping.property || ''}\n        />\n\n        <datalist id=\"property-list\">\n          ${this.properties.map(\n            item => html`\n              <option value=${item.name}>${item.label}</option>\n            `\n          )}\n        </datalist>\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 class=\"fullwidth\" rule-editors ?hidden=${mapping.rule == 'value'}>\n          <data-binding-value-map\n            value-key=\"map\"\n            .value=${this.rule.map || {}}\n            .valuetype=${this._valuetype(mapping.property!)}\n            ?active=${mapping.rule == 'map'}\n          >\n          </data-binding-value-map>\n\n          <data-binding-value-range\n            value-key=\"range\"\n            .value=${this.rule.range || []}\n            .valuetype=${this._valuetype(mapping.property!)}\n            ?active=${mapping.rule == 'range'}\n          >\n          </data-binding-value-range>\n\n          <ox-input-code\n            class=\"fullwidth\"\n            value-key=\"eval\"\n            id=\"eval-editor\"\n            .value=${this.rule.eval || ''}\n            ?active=${mapping.rule == 'eval'}\n            language=\"javascript\"\n          >\n          </ox-input-code>\n        </div>\n\n        <input id=\"checkbox-partial\" type=\"checkbox\" value-key=\"partial\" .checked=${mapping.partial === true} />\n        <label for=\"checkbox-partial\"> <ox-i18n msgid=\"label.partial-spreading\">Partial Spreading</ox-i18n> </label>\n\n        <input id=\"checkbox-ndnsp\" type=\"checkbox\" value-key=\"ndnsp\" .checked=${mapping.ndnsp === true} />\n        <label for=\"checkbox-ndnsp\"> <ox-i18n msgid=\"label.ndnsp\">No Data No Spreading</ox-i18n> </label>\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: string | boolean = element.value\n\n    if (key === 'source') {\n      if (value.length > 0) {\n        value = value.trim()\n\n        this.source.value = value\n      }\n\n      this.mapping = {\n        ...this.mapping,\n        source: value\n      }\n    } else 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    } else if (key === 'ndnsp' /* no data no spreading */) {\n      value = element.checked\n\n      this.mapping = {\n        ...this.mapping,\n        ndnsp: value\n      }\n    } else if (key === 'partial' /* partial spreading */) {\n      value = element.checked\n\n      this.mapping = {\n        ...this.mapping,\n        partial: value\n      }\n    }\n\n    if (!this.mapping.rule) {\n      this.mapping.rule = 'value'\n    }\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/property-panel/data-binding/data-binding-popup.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-buttons-radio.js';
+import '@operato/input/ox-input-code.js';
+import '@operato/i18n/ox-i18n.js';
+import '@operato/help/ox-help-icon.js';
+import './data-binding-value-map.js';
+import './data-binding-value-range.js';
+import { LitElement } from 'lit';
+import { Properties } from '@hatiolab/things-scene';
+import { DataBindingMapper, Mapping } from './data-binding-mapper.js';
+declare const DataBindingPopup_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
+export declare class DataBindingPopup extends DataBindingPopup_base {
+    static get scopedElements(): {
+        'data-binding-mapper': typeof DataBindingMapper;
+    };
+    static styles: import("lit").CSSResult[];
+    mappings: Mapping[];
+    properties: Properties[];
+    selected?: any;
+    private _viewMode;
+    private _selectedIndex;
+    private _inspectorMode;
+    private _sourceTree;
+    private _expandedPaths;
+    private _previewInput;
+    private _previewOutput;
+    private get _selected();
+    private get _root();
+    private get _currentMapping();
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderLeftPanel;
+    private _renderMappingItems;
+    private _renderFlowCards;
+    private _renderRuleConfig;
+    private _renderInspector;
+    private _renderComponentList;
+    private _renderSourceTree;
+    private _renderJsonataHelp;
+    private _renderTargetTree;
+    private _renderTreeNodes;
+    private _renderPreviewBar;
+    private _selectMapping;
+    private _addMapping;
+    private _deleteMapping;
+    private _updateMapping;
+    private _changeRule;
+    private _selectTreePath;
+    private _findComponent;
+    private _refreshSourceTree;
+    private _refreshPreview;
+    private _renderRuleHelp;
+    private _renderFlowOverview;
+    private _ruleSummary;
+    private _mappingStatus;
+    private _mappingSummary;
+    private _dispatchChange;
+}
+export {};