@operato/board 1.4.55 → 1.4.57

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.4.57](https://github.com/hatiolab/operato/compare/v1.4.56...v1.4.57) (2023-09-09)
+
+
+### :bug: Bug Fix
+
+* partial property for data-binding model ([a76845a](https://github.com/hatiolab/operato/commit/a76845a7d1681a0831f0d4e9c4842a1115c27946))
+
+
+
+### [1.4.56](https://github.com/hatiolab/operato/compare/v1.4.55...v1.4.56) (2023-09-09)
+
+
+### :bug: Bug Fix
+
+* support 'partial-data' and 'partial-value' for data-binding ([92becef](https://github.com/hatiolab/operato/commit/92becef775e405770005d59055e365370256f860))
+
+
+
 ### [1.4.55](https://github.com/hatiolab/operato/compare/v1.4.54...v1.4.55) (2023-09-08)
 
 

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

@@ -22,6 +22,7 @@ export type Mapping = {
     property?: string;
     param?: Rule;
     ndnsp?: boolean;
+    partial?: boolean;
 };
 /**
 element for mapping data value editing

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

@@ -157,6 +157,11 @@ export class DataBindingMapper extends LitElement {
         </ox-input-code>
       </div>
 
+      <div class="checkbox-row">
+        <input id="checkbox-partial" type="checkbox" value-key="partial" .checked=${mapping.partial === true} />
+        <label for="checkbox-partial"> <ox-i18n msgid="label.partial-spreading">Partial Spreading</ox-i18n> </label>
+      </div>
+
       <div class="checkbox-row">
         <input id="checkbox-ndnsp" type="checkbox" value-key="ndnsp" .checked=${mapping.ndnsp === true} />
         <label for="checkbox-ndnsp"> <ox-i18n msgid="label.ndnsp">No Data No Spreading</ox-i18n> </label>
@@ -273,6 +278,13 @@ export class DataBindingMapper extends LitElement {
                 ndnsp: value
             };
         }
+        else if (key === 'partial' /* partial spreading */) {
+            value = element.checked;
+            this.mapping = {
+                ...this.mapping,
+                partial: value
+            };
+        }
         if (!this.mapping.rule) {
             this.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 '@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'\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}\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    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      /* checkbox-row */\n      .checkbox-row {\n        grid-column: span 10;\n\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 5px;\n        grid-auto-rows: minmax(24px, auto);\n        align-items: center;\n      }\n\n      .checkbox-row > input {\n        grid-column: 4 / 5;\n      }\n\n      .checkbox-row > label {\n        grid-column: span 6;\n        text-align: left;\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 => {\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      <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><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\"> <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 ?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          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      <div class=\"checkbox-row\">\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    }\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/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 '@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'\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    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      /* checkbox-row */\n      .checkbox-row {\n        grid-column: span 10;\n\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 5px;\n        grid-auto-rows: minmax(24px, auto);\n        align-items: center;\n      }\n\n      .checkbox-row > input {\n        grid-column: 4 / 5;\n      }\n\n      .checkbox-row > label {\n        grid-column: span 6;\n        text-align: left;\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 => {\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      <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><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\"> <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 ?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          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      <div class=\"checkbox-row\">\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      </div>\n\n      <div class=\"checkbox-row\">\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/modeller/property-sidebar/effects/property-event-hover.js

@@ -9,6 +9,7 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { EffectsSharedStyle } from './effects-shared-style.js';
 import { convert } from './value-converter';
+const SETS_ACTION = ['data-set', 'partial-data-set', 'value-set', 'partial-value-set'];
 export class PropertyEventHover extends LitElement {
     firstUpdated() {
         this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
@@ -29,7 +30,9 @@ export class PropertyEventHover extends LitElement {
         <option value="data-toggle">toggle(true/false) target component data</option>
         <option value="data-tristate">tristate(0/1/2) target component data</option>
         <option value="data-set">set value to target component data</option>
+        <option value="partial-data-set">set partial value to target component data</option>
         <option value="value-set">set value to target component value</option>
+        <option value="partial-value-set">set partial value to target component value</option>
         <option value="mouse-cursor">change mouse cursor to target style</option>
       </select>
 
@@ -51,7 +54,7 @@ export class PropertyEventHover extends LitElement {
               ${this._getTargetList(action).map(({ value, description, class: clazz }) => html ` <option .value=${value} class=${ifDefined(clazz)}>${description}</option> `)}
             </datalist>
           `}
-      ${action == 'data-set' || action == 'value-set'
+      ${SETS_ACTION.indexOf(action) != -1
             ? html `
             <label> <ox-i18n msgid="label.value">value</ox-i18n> </label>
             <ox-input-data value-key="value" .value=${value} custom-editor fullwidth></ox-input-data>
@@ -82,6 +85,8 @@ export class PropertyEventHover extends LitElement {
             case 'data-tristate':
             case 'data-set':
             case 'value-set':
+            case 'partial-data-set':
+            case 'partial-value-set':
                 let ids = (this.scene &&
                     this.scene.ids.map(i => {
                         var _a;

package/dist/src/modeller/property-sidebar/effects/property-event-hover.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-event-hover.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-hover.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { EffectsSharedStyle } from './effects-shared-style.js'\nimport { convert } from './value-converter'\n\nexport class PropertyEventHover extends LitElement {\n  static styles = [\n    EffectsSharedStyle,\n    css`\n      datalist option.cursor-auto {\n        cursor: auto;\n      }\n\n      datalist option.cursor-pointer {\n        cursor: pointer;\n      }\n\n      datalist option.cursor-default {\n        cursor: default;\n      }\n\n      datalist option.cursor-move {\n        cursor: move;\n      }\n\n      datalist option.cursor-text {\n        cursor: text;\n      }\n\n      datalist option.cursor-wait {\n        cursor: wait;\n      }\n\n      datalist option.cursor-help {\n        cursor: help;\n      }\n\n      datalist option.cursor-crosshair {\n        cursor: crosshair;\n      }\n\n      datalist option.cursor-not-allowed {\n        cursor: not-allowed;\n      }\n\n      datalist option.cursor-grab {\n        cursor: grab;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var { action, value = '', target = '', emphasize, restore } = this.value || {}\n\n    return html`\n      <input id=\"checkbox-emphasize\" type=\"checkbox\" value-key=\"emphasize\" .checked=${emphasize} />\n      <label for=\"checkbox-emphasize\" class=\"checkbox-label\">\n        <ox-i18n msgid=\"label.emphasize\">emphasize</ox-i18n>\n      </label>\n\n      <label> <ox-i18n msgid=\"label.action\">action</ox-i18n> </label>\n      <select id=\"tap-select\" value-key=\"action\" .value=${action || ''}>\n        <option value=\"\"></option>\n        <option value=\"popup\">popup target board</option>\n        <option value=\"info-window\">open infowindow</option>\n        <option value=\"data-toggle\">toggle(true/false) target component data</option>\n        <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n        <option value=\"data-set\">set value to target component data</option>\n        <option value=\"value-set\">set value to target component value</option>\n        <option value=\"mouse-cursor\">change mouse cursor to target style</option>\n      </select>\n\n      <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n\n      ${action == 'popup'\n        ? html`\n            <ox-editor-board-selector value-key=\"target\" .value=${target} custom-editor></ox-editor-board-selector>\n          `\n        : html`\n            <input\n              value-key=\"target\"\n              .value=${target || ''}\n              list=\"target-list\"\n              .placeholder=\"${this._getPlaceHoder(action)}\"\n            />\n\n            <datalist id=\"target-list\">\n              ${this._getTargetList(action).map(\n                ({ value, description, class: clazz }) =>\n                  html` <option .value=${value} class=${ifDefined(clazz)}>${description}</option> `\n              )}\n            </datalist>\n          `}\n      ${action == 'data-set' || action == 'value-set'\n        ? html`\n            <label> <ox-i18n msgid=\"label.value\">value</ox-i18n> </label>\n            <ox-input-data value-key=\"value\" .value=${value} custom-editor fullwidth></ox-input-data>\n          `\n        : html``}\n\n      <input id=\"checkbox-restore\" type=\"checkbox\" value-key=\"restore\" .checked=${restore} />\n      <label for=\"checkbox-restore\" class=\"checkbox-label\">\n        <ox-i18n msgid=\"label.restore-on-leave\">restore on leave</ox-i18n>\n      </label>\n    `\n  }\n\n  _getPlaceHoder(action: string) {\n    switch (action) {\n      case 'popup':\n      case 'goto':\n        return 'SCENE-100'\n      case 'link-open':\n      case 'link-move':\n        return 'http://www.hatiolab.com/'\n      default:\n        return ''\n    }\n  }\n\n  _getTargetList(action: string): { value: string; description?: string; class?: string }[] {\n    switch (action) {\n      case 'data-toggle':\n      case 'data-tristate':\n      case 'data-set':\n      case 'value-set':\n        let ids =\n          (this.scene &&\n            this.scene.ids.map(i => {\n              const id = i.key\n              return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n            })) ||\n          []\n        ids.unshift({ value: '(self)', description: 'self component' })\n        return ids\n\n      case 'info-window':\n        return (\n          (this.scene &&\n            this.scene.ids\n              .filter(i => {\n                return this.scene!.findById(i.key).get('type') == 'info-window'\n              })\n              .map(i => {\n                const id = i.key\n                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n              })) ||\n          []\n        )\n\n      case 'mouse-cursor':\n        return ['auto', 'pointer', 'default', 'move', 'text', 'wait', 'help', 'crosshair', 'not-allowed', 'grab'].map(\n          style => {\n            return { value: style, class: `cursor-${style}` }\n          }\n        )\n\n      default:\n        return []\n    }\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    this.value = {\n      ...this.value,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"property-event-hover.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-hover.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { EffectsSharedStyle } from './effects-shared-style.js'\nimport { convert } from './value-converter'\n\nconst SETS_ACTION = ['data-set', 'partial-data-set', 'value-set', 'partial-value-set']\n\nexport class PropertyEventHover extends LitElement {\n  static styles = [\n    EffectsSharedStyle,\n    css`\n      datalist option.cursor-auto {\n        cursor: auto;\n      }\n\n      datalist option.cursor-pointer {\n        cursor: pointer;\n      }\n\n      datalist option.cursor-default {\n        cursor: default;\n      }\n\n      datalist option.cursor-move {\n        cursor: move;\n      }\n\n      datalist option.cursor-text {\n        cursor: text;\n      }\n\n      datalist option.cursor-wait {\n        cursor: wait;\n      }\n\n      datalist option.cursor-help {\n        cursor: help;\n      }\n\n      datalist option.cursor-crosshair {\n        cursor: crosshair;\n      }\n\n      datalist option.cursor-not-allowed {\n        cursor: not-allowed;\n      }\n\n      datalist option.cursor-grab {\n        cursor: grab;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var { action, value = '', target = '', emphasize, restore } = this.value || {}\n\n    return html`\n      <input id=\"checkbox-emphasize\" type=\"checkbox\" value-key=\"emphasize\" .checked=${emphasize} />\n      <label for=\"checkbox-emphasize\" class=\"checkbox-label\">\n        <ox-i18n msgid=\"label.emphasize\">emphasize</ox-i18n>\n      </label>\n\n      <label> <ox-i18n msgid=\"label.action\">action</ox-i18n> </label>\n      <select id=\"tap-select\" value-key=\"action\" .value=${action || ''}>\n        <option value=\"\"></option>\n        <option value=\"popup\">popup target board</option>\n        <option value=\"info-window\">open infowindow</option>\n        <option value=\"data-toggle\">toggle(true/false) target component data</option>\n        <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n        <option value=\"data-set\">set value to target component data</option>\n        <option value=\"partial-data-set\">set partial value to target component data</option>\n        <option value=\"value-set\">set value to target component value</option>\n        <option value=\"partial-value-set\">set partial value to target component value</option>\n        <option value=\"mouse-cursor\">change mouse cursor to target style</option>\n      </select>\n\n      <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n\n      ${action == 'popup'\n        ? html`\n            <ox-editor-board-selector value-key=\"target\" .value=${target} custom-editor></ox-editor-board-selector>\n          `\n        : html`\n            <input\n              value-key=\"target\"\n              .value=${target || ''}\n              list=\"target-list\"\n              .placeholder=\"${this._getPlaceHoder(action)}\"\n            />\n\n            <datalist id=\"target-list\">\n              ${this._getTargetList(action).map(\n                ({ value, description, class: clazz }) =>\n                  html` <option .value=${value} class=${ifDefined(clazz)}>${description}</option> `\n              )}\n            </datalist>\n          `}\n      ${SETS_ACTION.indexOf(action) != -1\n        ? html`\n            <label> <ox-i18n msgid=\"label.value\">value</ox-i18n> </label>\n            <ox-input-data value-key=\"value\" .value=${value} custom-editor fullwidth></ox-input-data>\n          `\n        : html``}\n\n      <input id=\"checkbox-restore\" type=\"checkbox\" value-key=\"restore\" .checked=${restore} />\n      <label for=\"checkbox-restore\" class=\"checkbox-label\">\n        <ox-i18n msgid=\"label.restore-on-leave\">restore on leave</ox-i18n>\n      </label>\n    `\n  }\n\n  _getPlaceHoder(action: string) {\n    switch (action) {\n      case 'popup':\n      case 'goto':\n        return 'SCENE-100'\n      case 'link-open':\n      case 'link-move':\n        return 'http://www.hatiolab.com/'\n      default:\n        return ''\n    }\n  }\n\n  _getTargetList(action: string): { value: string; description?: string; class?: string }[] {\n    switch (action) {\n      case 'data-toggle':\n      case 'data-tristate':\n      case 'data-set':\n      case 'value-set':\n      case 'partial-data-set':\n      case 'partial-value-set':\n        let ids =\n          (this.scene &&\n            this.scene.ids.map(i => {\n              const id = i.key\n              return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n            })) ||\n          []\n        ids.unshift({ value: '(self)', description: 'self component' })\n        return ids\n\n      case 'info-window':\n        return (\n          (this.scene &&\n            this.scene.ids\n              .filter(i => {\n                return this.scene!.findById(i.key).get('type') == 'info-window'\n              })\n              .map(i => {\n                const id = i.key\n                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n              })) ||\n          []\n        )\n\n      case 'mouse-cursor':\n        return ['auto', 'pointer', 'default', 'move', 'text', 'wait', 'help', 'crosshair', 'not-allowed', 'grab'].map(\n          style => {\n            return { value: style, class: `cursor-${style}` }\n          }\n        )\n\n      default:\n        return []\n    }\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    this.value = {\n      ...this.value,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/modeller/property-sidebar/effects/property-event-tap.js

@@ -9,6 +9,7 @@ import { property, state } from 'lit/decorators.js';
 import { scenarios } from '../../../graphql/scenario';
 import { EffectsSharedStyle } from './effects-shared-style';
 import { convert } from './value-converter';
+const SETS_ACTION = ['data-set', 'partial-data-set', 'value-set', 'partial-value-set', 'start-scenario', 'run-scenario'];
 export class PropertyEventTap extends LitElement {
     constructor() {
         super(...arguments);
@@ -51,7 +52,9 @@ export class PropertyEventTap extends LitElement {
         <option value="data-toggle">toggle(true/false) target component data</option>
         <option value="data-tristate">tristate(0/1/2) target component data</option>
         <option value="data-set">set value to target component data</option>
+        <option value="partial-data-set">set partial value to target component data</option>
         <option value="value-set">set value to target component value</option>
+        <option value="partial-value-set">set partial value to target component value</option>
         <option value="start-scenario">start the given scenario</option>
         <option value="run-scenario">run the given scenario</option>
       </select>
@@ -101,7 +104,7 @@ export class PropertyEventTap extends LitElement {
                     </label>`
                 : html ``}
           `
-            : action === 'data-set' || action === 'value-set' || action === 'start-scenario' || action === 'run-scenario'
+            : SETS_ACTION.indexOf(action) != -1
                 ? html `
             <label> <ox-i18n msgid="label.value">value</ox-i18n> </label>
             <ox-input-data value-key="value" .value=${value} custom-editor fullwidth></ox-input-data>

package/dist/src/modeller/property-sidebar/effects/property-event-tap.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-event-tap.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-tap.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html, LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { scenarios } from '../../../graphql/scenario'\nimport { EffectsSharedStyle } from './effects-shared-style'\nimport { convert } from './value-converter'\n\nexport class PropertyEventTap extends LitElement {\n  static styles = [EffectsSharedStyle]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  @state() scenarios: { value: string; description: string }[] = []\n  @state() targetList: { value: string; description: string }[] = []\n\n  async firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var { action, value = '', target = '', pressed, options } = this.value || {}\n    var { input = '(self)', output = true } = options || {}\n\n    return html`\n      <input id=\"checkbox-pressed\" type=\"checkbox\" value-key=\"pressed\" .checked=${pressed} />\n      <label for=\"checkbox-pressed\" class=\"checkbox-label\"> <ox-i18n msgid=\"label.pressed\">pressed</ox-i18n> </label>\n\n      <label> <ox-i18n msgid=\"label.action\">action</ox-i18n> </label>\n      <select\n        id=\"tap-select\"\n        value-key=\"action\"\n        .value=${action || ''}\n        @change=${async (e: Event) => {\n          if ((e.target as HTMLSelectElement).value.includes('scenario')) {\n            this.scenarios = (await scenarios()).map(({ name, description }) => {\n              return { value: name, description }\n            })\n          }\n        }}\n      >\n        <option value=\"\"></option>\n        <option value=\"goto\">go to target board</option>\n        <option value=\"link-open\">open new window for target link</option>\n        <option value=\"link-move\">move to target link</option>\n        <option value=\"route-page\">route to page</option>\n        <option value=\"popup\">popup target board</option>\n        <option value=\"modal-popup\">modal popup target board</option>\n        <option value=\"close-scene\">close current board</option>\n        <option value=\"infoWindow\">open infowindow</option>\n        <option value=\"toggle-info-window\">toggle infowindow</option>\n        <option value=\"data-toggle\">toggle(true/false) target component data</option>\n        <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n        <option value=\"data-set\">set value to target component data</option>\n        <option value=\"value-set\">set value to target component value</option>\n        <option value=\"start-scenario\">start the given scenario</option>\n        <option value=\"run-scenario\">run the given scenario</option>\n      </select>\n\n      <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n\n      ${action === 'goto' || action?.includes('popup')\n        ? html`\n            <ox-editor-board-selector value-key=\"target\" .value=${target} custom-editor></ox-editor-board-selector>\n          `\n        : html`\n            <input\n              value-key=\"target\"\n              .value=${target}\n              list=\"target-list\"\n              .placeholder=${this._getPlaceHoder(action)}\n              @focusin=${() => {\n                this.targetList = this._getInputList(action)\n              }}\n            />\n\n            <datalist id=\"target-list\">\n              ${this.targetList.map(\n                ({ value, description }) => html` <option .value=${value}>${description}</option> `\n              )}\n            </datalist>\n          `}\n      ${action === 'goto' || action?.includes('popup')\n        ? html`\n            <label for=\"input\"> <ox-i18n msgid=\"label.input-data\">input</ox-i18n> </label>\n            <input\n              id=\"input\"\n              value-key=\"input\"\n              .value=${input}\n              list=\"input-list\"\n              @focusin=${() => {\n                this.targetList = this._getInputList(action)\n              }}\n            />\n            <datalist id=\"input-list\">\n              ${this.targetList.map(\n                ({ value, description }) => html` <option .value=${value}>${description}</option> `\n              )}\n            </datalist>\n            ${\n              /* currently 'goto' does not support returning result */\n              action?.includes('popup')\n                ? html` <input id=\"checkbox-output\" type=\"checkbox\" value-key=\"output\" .checked=${output} />\n                    <label for=\"checkbox-output\" class=\"checkbox-label\">\n                      <ox-i18n msgid=\"label.will-get-return\">will-get-return</ox-i18n>\n                    </label>`\n                : html``\n            }\n          `\n        : action === 'data-set' || action === 'value-set' || action === 'start-scenario' || action === 'run-scenario'\n        ? html`\n            <label> <ox-i18n msgid=\"label.value\">value</ox-i18n> </label>\n            <ox-input-data value-key=\"value\" .value=${value} custom-editor fullwidth></ox-input-data>\n          `\n        : html``}\n    `\n  }\n\n  _getPlaceHoder(action: string) {\n    switch (action) {\n      case 'link-open':\n      case 'link-move':\n        return 'http://www.hatiolab.com/'\n      default:\n        return ''\n    }\n  }\n\n  _getInputList(action: string): { value: string; description: string }[] {\n    switch (action) {\n      case 'data-toggle':\n      case 'data-tristate':\n      case 'data-set':\n      case 'value-set':\n      case 'popup':\n      case 'modal-popup':\n        let ids =\n          (this.scene &&\n            this.scene.ids.map(i => {\n              const id = i.key\n              return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n            })) ||\n          []\n        ids.unshift({ value: '(self)', description: 'self component' })\n        return ids\n      case 'infoWindow':\n      case 'toggle-info-window':\n        return (\n          (this.scene &&\n            this.scene.ids\n              .filter(i => {\n                return this.scene!.findById(i.key).get('type') == 'info-window'\n              })\n              .map(i => {\n                const id = i.key\n                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n              })) ||\n          []\n        )\n      case 'start-scenario':\n      case 'run-scenario':\n        return this.scenarios\n      default:\n        return []\n    }\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    if (key === 'input' || key === 'output') {\n      var { options = {} } = this.value || {}\n\n      this.value = {\n        ...this.value,\n        options: {\n          ...options,\n          [key]: convert(element)\n        }\n      }\n    } else {\n      this.value = {\n        ...this.value,\n        [key]: convert(element)\n      }\n    }\n\n    var { action } = this.value\n    if (action !== 'goto' && !action?.includes('popup')) {\n      /* clear unused options */\n      delete this.value.options\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"property-event-tap.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-tap.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,iCAAiC,CAAA;AACxC,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAInD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAE3C,MAAM,WAAW,GAAG,CAAC,UAAU,EAAE,kBAAkB,EAAE,WAAW,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,cAAc,CAAC,CAAA;AAExH,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAMW,cAAS,GAA6C,EAAE,CAAA;QACxD,eAAU,GAA6C,EAAE,CAAA;IA4LpE,CAAC;IA1LC,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM;QACJ,IAAI,EAAE,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAC5E,IAAI,EAAE,KAAK,GAAG,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,OAAO,IAAI,EAAE,CAAA;QAEvD,OAAO,IAAI,CAAA;kFACmE,OAAO;;;;;;;iBAOxE,MAAM,IAAI,EAAE;kBACX,KAAK,EAAE,CAAQ,EAAE,EAAE;YAC3B,IAAK,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;gBAC9D,IAAI,CAAC,SAAS,GAAG,CAAC,MAAM,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE;oBACjE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,CAAA;gBACrC,CAAC,CAAC,CAAA;aACH;QACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;QAwBD,MAAM,KAAK,MAAM,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;YAC9C,CAAC,CAAC,IAAI,CAAA;kEACoD,MAAM;WAC7D;YACH,CAAC,CAAC,IAAI,CAAA;;;uBAGS,MAAM;;6BAEA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;yBAC/B,GAAG,EAAE;gBACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;YAC9C,CAAC;;;;gBAIC,IAAI,CAAC,UAAU,CAAC,GAAG,CACnB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA,mBAAmB,KAAK,IAAI,WAAW,YAAY,CACpF;;WAEJ;QACH,MAAM,KAAK,MAAM,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;YAC9C,CAAC,CAAC,IAAI,CAAA;;;;;uBAKS,KAAK;;yBAEH,GAAG,EAAE;gBACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;YAC9C,CAAC;;;gBAGC,IAAI,CAAC,UAAU,CAAC,GAAG,CACnB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA,mBAAmB,KAAK,IAAI,WAAW,YAAY,CACpF;;cAED;YACA,wDAAwD;YACxD,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,OAAO,CAAC;gBACvB,CAAC,CAAC,IAAI,CAAA,4EAA4E,MAAM;;;6BAG3E;gBACb,CAAC,CAAC,IAAI,CAAA,EACV;WACD;YACH,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;gBACnC,CAAC,CAAC,IAAI,CAAA;;sDAEwC,KAAK;WAChD;gBACH,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;IAED,cAAc,CAAC,MAAc;QAC3B,QAAQ,MAAM,EAAE;YACd,KAAK,WAAW,CAAC;YACjB,KAAK,WAAW;gBACd,OAAO,0BAA0B,CAAA;YACnC;gBACE,OAAO,EAAE,CAAA;SACZ;IACH,CAAC;IAED,aAAa,CAAC,MAAc;QAC1B,QAAQ,MAAM,EAAE;YACd,KAAK,aAAa,CAAC;YACnB,KAAK,eAAe,CAAC;YACrB,KAAK,UAAU,CAAC;YAChB,KAAK,WAAW,CAAC;YACjB,KAAK,OAAO,CAAC;YACb,KAAK,aAAa;gBAChB,IAAI,GAAG,GACL,CAAC,IAAI,CAAC,KAAK;oBACT,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;;wBACrB,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAA;wBAChB,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;oBAChF,CAAC,CAAC,CAAC;oBACL,EAAE,CAAA;gBACJ,GAAG,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC,CAAA;gBAC/D,OAAO,GAAG,CAAA;YACZ,KAAK,YAAY,CAAC;YAClB,KAAK,oBAAoB;gBACvB,OAAO,CACL,CAAC,IAAI,CAAC,KAAK;oBACT,IAAI,CAAC,KAAK,CAAC,GAAG;yBACX,MAAM,CAAC,CAAC,CAAC,EAAE;wBACV,OAAO,IAAI,CAAC,KAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,aAAa,CAAA;oBACjE,CAAC,CAAC;yBACD,GAAG,CAAC,CAAC,CAAC,EAAE;;wBACP,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAA;wBAChB,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;oBAChF,CAAC,CAAC,CAAC;oBACP,EAAE,CACH,CAAA;YACH,KAAK,gBAAgB,CAAC;YACtB,KAAK,cAAc;gBACjB,OAAO,IAAI,CAAC,SAAS,CAAA;YACvB;gBACE,OAAO,EAAE,CAAA;SACZ;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE;YACR,OAAM;SACP;QAED,IAAI,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,QAAQ,EAAE;YACvC,IAAI,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;YAEvC,IAAI,CAAC,KAAK,GAAG;gBACX,GAAG,IAAI,CAAC,KAAK;gBACb,OAAO,EAAE;oBACP,GAAG,OAAO;oBACV,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC;iBACxB;aACF,CAAA;SACF;aAAM;YACL,IAAI,CAAC,KAAK,GAAG;gBACX,GAAG,IAAI,CAAC,KAAK;gBACb,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC;aACxB,CAAA;SACF;QAED,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAC3B,IAAI,MAAM,KAAK,MAAM,IAAI,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,OAAO,CAAC,CAAA,EAAE;YACnD,0BAA0B;YAC1B,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAA;SAC1B;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AAjMM,uBAAM,GAAG,CAAC,kBAAkB,CAAC,AAAvB,CAAuB;AAER;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAc;AAEhC;IAAR,KAAK,EAAE;mDAAyD;AACxD;IAAR,KAAK,EAAE;oDAA0D","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html, LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { scenarios } from '../../../graphql/scenario'\nimport { EffectsSharedStyle } from './effects-shared-style'\nimport { convert } from './value-converter'\n\nconst SETS_ACTION = ['data-set', 'partial-data-set', 'value-set', 'partial-value-set', 'start-scenario', 'run-scenario']\n\nexport class PropertyEventTap extends LitElement {\n  static styles = [EffectsSharedStyle]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  @state() scenarios: { value: string; description: string }[] = []\n  @state() targetList: { value: string; description: string }[] = []\n\n  async firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var { action, value = '', target = '', pressed, options } = this.value || {}\n    var { input = '(self)', output = true } = options || {}\n\n    return html`\n      <input id=\"checkbox-pressed\" type=\"checkbox\" value-key=\"pressed\" .checked=${pressed} />\n      <label for=\"checkbox-pressed\" class=\"checkbox-label\"> <ox-i18n msgid=\"label.pressed\">pressed</ox-i18n> </label>\n\n      <label> <ox-i18n msgid=\"label.action\">action</ox-i18n> </label>\n      <select\n        id=\"tap-select\"\n        value-key=\"action\"\n        .value=${action || ''}\n        @change=${async (e: Event) => {\n          if ((e.target as HTMLSelectElement).value.includes('scenario')) {\n            this.scenarios = (await scenarios()).map(({ name, description }) => {\n              return { value: name, description }\n            })\n          }\n        }}\n      >\n        <option value=\"\"></option>\n        <option value=\"goto\">go to target board</option>\n        <option value=\"link-open\">open new window for target link</option>\n        <option value=\"link-move\">move to target link</option>\n        <option value=\"route-page\">route to page</option>\n        <option value=\"popup\">popup target board</option>\n        <option value=\"modal-popup\">modal popup target board</option>\n        <option value=\"close-scene\">close current board</option>\n        <option value=\"infoWindow\">open infowindow</option>\n        <option value=\"toggle-info-window\">toggle infowindow</option>\n        <option value=\"data-toggle\">toggle(true/false) target component data</option>\n        <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n        <option value=\"data-set\">set value to target component data</option>\n        <option value=\"partial-data-set\">set partial value to target component data</option>\n        <option value=\"value-set\">set value to target component value</option>\n        <option value=\"partial-value-set\">set partial value to target component value</option>\n        <option value=\"start-scenario\">start the given scenario</option>\n        <option value=\"run-scenario\">run the given scenario</option>\n      </select>\n\n      <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n\n      ${action === 'goto' || action?.includes('popup')\n        ? html`\n            <ox-editor-board-selector value-key=\"target\" .value=${target} custom-editor></ox-editor-board-selector>\n          `\n        : html`\n            <input\n              value-key=\"target\"\n              .value=${target}\n              list=\"target-list\"\n              .placeholder=${this._getPlaceHoder(action)}\n              @focusin=${() => {\n                this.targetList = this._getInputList(action)\n              }}\n            />\n\n            <datalist id=\"target-list\">\n              ${this.targetList.map(\n                ({ value, description }) => html` <option .value=${value}>${description}</option> `\n              )}\n            </datalist>\n          `}\n      ${action === 'goto' || action?.includes('popup')\n        ? html`\n            <label for=\"input\"> <ox-i18n msgid=\"label.input-data\">input</ox-i18n> </label>\n            <input\n              id=\"input\"\n              value-key=\"input\"\n              .value=${input}\n              list=\"input-list\"\n              @focusin=${() => {\n                this.targetList = this._getInputList(action)\n              }}\n            />\n            <datalist id=\"input-list\">\n              ${this.targetList.map(\n                ({ value, description }) => html` <option .value=${value}>${description}</option> `\n              )}\n            </datalist>\n            ${\n              /* currently 'goto' does not support returning result */\n              action?.includes('popup')\n                ? html` <input id=\"checkbox-output\" type=\"checkbox\" value-key=\"output\" .checked=${output} />\n                    <label for=\"checkbox-output\" class=\"checkbox-label\">\n                      <ox-i18n msgid=\"label.will-get-return\">will-get-return</ox-i18n>\n                    </label>`\n                : html``\n            }\n          `\n        : SETS_ACTION.indexOf(action) != -1\n        ? html`\n            <label> <ox-i18n msgid=\"label.value\">value</ox-i18n> </label>\n            <ox-input-data value-key=\"value\" .value=${value} custom-editor fullwidth></ox-input-data>\n          `\n        : html``}\n    `\n  }\n\n  _getPlaceHoder(action: string) {\n    switch (action) {\n      case 'link-open':\n      case 'link-move':\n        return 'http://www.hatiolab.com/'\n      default:\n        return ''\n    }\n  }\n\n  _getInputList(action: string): { value: string; description: string }[] {\n    switch (action) {\n      case 'data-toggle':\n      case 'data-tristate':\n      case 'data-set':\n      case 'value-set':\n      case 'popup':\n      case 'modal-popup':\n        let ids =\n          (this.scene &&\n            this.scene.ids.map(i => {\n              const id = i.key\n              return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n            })) ||\n          []\n        ids.unshift({ value: '(self)', description: 'self component' })\n        return ids\n      case 'infoWindow':\n      case 'toggle-info-window':\n        return (\n          (this.scene &&\n            this.scene.ids\n              .filter(i => {\n                return this.scene!.findById(i.key).get('type') == 'info-window'\n              })\n              .map(i => {\n                const id = i.key\n                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n              })) ||\n          []\n        )\n      case 'start-scenario':\n      case 'run-scenario':\n        return this.scenarios\n      default:\n        return []\n    }\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    if (key === 'input' || key === 'output') {\n      var { options = {} } = this.value || {}\n\n      this.value = {\n        ...this.value,\n        options: {\n          ...options,\n          [key]: convert(element)\n        }\n      }\n    } else {\n      this.value = {\n        ...this.value,\n        [key]: convert(element)\n      }\n    }\n\n    var { action } = this.value\n    if (action !== 'goto' && !action?.includes('popup')) {\n      /* clear unused options */\n      delete this.value.options\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}