@operato/board 1.2.24 → 1.2.26

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.2.26](https://github.com/hatiolab/operato/compare/v1.2.25...v1.2.26) (2023-04-23)
+
+
+### :bug: Bug Fix
+
+* make ox-input-search autofocusible as a default when it is shown on the titlebar ([744fdc6](https://github.com/hatiolab/operato/commit/744fdc6be1a58ba58949c28d7ab54585d31a9513))
+
+
+
+### [1.2.25](https://github.com/hatiolab/operato/compare/v1.2.24...v1.2.25) (2023-04-22)
+
+
+### :bug: Bug Fix
+
+* improve UX for value-map, value-range ([8066f54](https://github.com/hatiolab/operato/commit/8066f540b0c98967edab0e3989ea24480075732d))
+
+
+
 ### [1.2.24](https://github.com/hatiolab/operato/compare/v1.2.23...v1.2.24) (2023-04-17)
 
 **Note:** Version bump only for package @operato/board

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

@@ -1,12 +1,12 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@operato/input/ox-input-value-map.js';
-import '@operato/input/ox-input-value-ranges.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, PropertyValues } from 'lit';
 import { Properties, Scene } from '@hatiolab/things-scene';
 export type Rule = {

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

@@ -2,12 +2,12 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import '@operato/input/ox-input-value-map.js';
-import '@operato/input/ox-input-value-ranges.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 { css, html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 /**
@@ -36,7 +36,7 @@ export class DataBindingMapper extends LitElement {
             strokeStyle: 'color',
             fontColor: 'color',
             data: 'object',
-            source: 'object',
+            source: 'attachment',
             location: 'object',
             dimension: 'object',
             text: 'string',
@@ -56,7 +56,9 @@ export class DataBindingMapper extends LitElement {
             rule: 'value'
         };
         return html `
-      <label for="accessor-input"> <ox-i18n msgid="label.accessor">accessor</ox-i18n><ox-help-icon topic="board-modeller/accessor"> </label>
+      <label for="accessor-input">
+        <ox-i18n msgid="label.accessor">accessor</ox-i18n><ox-help-icon topic="board-modeller/accessor"></ox-help-icon>
+      </label>
       <input
         id="accessor-input"
         value-key="accessor"
@@ -89,13 +91,13 @@ export class DataBindingMapper extends LitElement {
         <option value="[propkey]"></option>
         ${this._componentIds.length
             ? html `
-                ${this._componentIds.map(({ value, description }) => html ` <option value=${value}>${description}</option> `)}
-              `
+              ${this._componentIds.map(({ value, description }) => html ` <option value=${value}>${description}</option> `)}
+            `
             : html ``}
       </datalist>
 
       <label for="property-input"> <ox-i18n msgid="label.property">property</ox-i18n> </label>
-      <select id="property-input" value-key="property" .value=${mapping.property}>
+      <select id="property-input" value-key="property" .value=${mapping.property || ''}>
         ${this.properties.map(item => html ` <option .value=${item.name} ?selected=${item.name == mapping.property}>${item.label}</option> `)}
       </select>
 
@@ -108,21 +110,21 @@ export class DataBindingMapper extends LitElement {
       </ox-buttons-radio>
 
       <div rule-editors ?hidden=${mapping.rule == 'value'}>
-        <ox-input-value-map
+        <data-binding-value-map
           value-key="map"
           .value=${this.rule.map || {}}
           .valuetype=${this._valuetype(mapping.property)}
           ?active=${mapping.rule == 'map'}
         >
-        </ox-input-value-map>
+        </data-binding-value-map>
 
-        <ox-input-value-ranges
+        <data-binding-value-ranges
           value-key="range"
           .value=${this.rule.range || []}
           .valuetype=${this._valuetype(mapping.property)}
           ?active=${mapping.rule == 'range'}
         >
-        </ox-input-value-ranges>
+        </data-binding-value-ranges>
 
         <ox-input-code
           value-key="eval"

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-input-value-map.js'\nimport '@operato/input/ox-input-value-ranges.js'\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'\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  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: 'object',\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('#target-input') target!: HTMLInputElement\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', e => this._onChange(e))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('mapping') && this._onChangedMapping()\n  }\n\n  render() {\n    const mapping = this.mapping || {\n      rule: 'value'\n    }\n\n    return html`\n      <label for=\"accessor-input\"> <ox-i18n msgid=\"label.accessor\">accessor</ox-i18n><ox-help-icon topic=\"board-modeller/accessor\"> </label>\n      <input\n        id=\"accessor-input\"\n        value-key=\"accessor\"\n        type=\"text\"\n        data-mapping-accessor\n        .value=${mapping.accessor || ''}\n      />\n\n      <label for=\"target-input\"> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n      <input\n        id=\"target-input\"\n        type=\"text\"\n        value-key=\"target\"\n        list=\"target-list\"\n        .value=${mapping.target || ''}\n        @focusin=${() => {\n          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      <datalist id=\"target-list\">\n        <option value=\"(self)\"></option>\n        <option value=\"(key)\"></option>\n        <option value=\"[propkey]\"></option>\n        ${\n          this._componentIds.length\n            ? html`\n                ${this._componentIds.map(\n                  ({ value, description }) => html` <option value=${value}>${description}</option> `\n                )}\n              `\n            : html``\n        }\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        <ox-input-value-map\n          value-key=\"map\"\n          .value=${this.rule.map || {}}\n          .valuetype=${this._valuetype(mapping.property!)}\n          ?active=${mapping.rule == 'map'}\n        >\n        </ox-input-value-map>\n\n        <ox-input-value-ranges\n          value-key=\"range\"\n          .value=${this.rule.range || []}\n          .valuetype=${this._valuetype(mapping.property!)}\n          ?active=${mapping.rule == 'range'}\n        >\n        </ox-input-value-ranges>\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 === '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  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('#target-input') target!: HTMLInputElement\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', e => this._onChange(e))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('mapping') && this._onChangedMapping()\n  }\n\n  render() {\n    const mapping = this.mapping || {\n      rule: 'value'\n    }\n\n    return html`\n      <label for=\"accessor-input\">\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=${() => {\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      <datalist id=\"target-list\">\n        <option value=\"(self)\"></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-ranges\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-ranges>\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 === '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"]}

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

@@ -0,0 +1,6 @@
+import { OxInputValueMap } from '@operato/input';
+import '@operato/attachment/ox-attachment-selector.js';
+export declare class DataBindingValueMap extends OxInputValueMap {
+    static styles: import("lit").CSSResult;
+    valueInputTemplate(value?: any): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,20 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { OxInputValueMap } from '@operato/input';
+import '@operato/attachment/ox-attachment-selector.js';
+let DataBindingValueMap = class DataBindingValueMap extends OxInputValueMap {
+    valueInputTemplate(value) {
+        if (this.valuetype == 'attachment') {
+            return html `<ox-attachment-selector data-value value=${ifDefined(value)}></ox-attachment-selector>`;
+        }
+        return super.valueInputTemplate(value);
+    }
+};
+DataBindingValueMap.styles = OxInputValueMap.styles;
+DataBindingValueMap = __decorate([
+    customElement('data-binding-value-map')
+], DataBindingValueMap);
+export { DataBindingValueMap };
+//# sourceMappingURL=data-binding-value-map.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-binding-value-map.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/data-binding/data-binding-value-map.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAEhD,OAAO,+CAA+C,CAAA;AAG/C,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,eAAe;IAGtD,kBAAkB,CAAC,KAAW;QAC5B,IAAI,IAAI,CAAC,SAAS,IAAI,YAAY,EAAE;YAClC,OAAO,IAAI,CAAA,4CAA4C,SAAS,CAAC,KAAK,CAAC,4BAA4B,CAAA;SACpG;QACD,OAAO,KAAK,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAA;IACxC,CAAC;;AAPM,0BAAM,GAAG,eAAe,CAAC,MAAM,CAAA;AAD3B,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAS/B;SATY,mBAAmB","sourcesContent":["import { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OxInputValueMap } from '@operato/input'\n\nimport '@operato/attachment/ox-attachment-selector.js'\n\n@customElement('data-binding-value-map')\nexport class DataBindingValueMap extends OxInputValueMap {\n  static styles = OxInputValueMap.styles\n\n  valueInputTemplate(value?: any) {\n    if (this.valuetype == 'attachment') {\n      return html`<ox-attachment-selector data-value value=${ifDefined(value)}></ox-attachment-selector>`\n    }\n    return super.valueInputTemplate(value)\n  }\n}\n"]}

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

@@ -0,0 +1,6 @@
+import { OxInputValueRange } from '@operato/input';
+import '@operato/attachment/ox-attachment-selector.js';
+export declare class DataBindingValueRange extends OxInputValueRange {
+    static styles: import("lit").CSSResult;
+    valueInputTemplate(value?: any): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,20 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { OxInputValueRange } from '@operato/input';
+import '@operato/attachment/ox-attachment-selector.js';
+let DataBindingValueRange = class DataBindingValueRange extends OxInputValueRange {
+    valueInputTemplate(value) {
+        if (this.valuetype == 'attachment') {
+            return html `<ox-attachment-selector data-value value=${ifDefined(value)}></ox-attachment-selector>`;
+        }
+        return super.valueInputTemplate(value);
+    }
+};
+DataBindingValueRange.styles = OxInputValueRange.styles;
+DataBindingValueRange = __decorate([
+    customElement('data-binding-value-range')
+], DataBindingValueRange);
+export { DataBindingValueRange };
+//# sourceMappingURL=data-binding-value-range.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-binding-value-range.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/data-binding/data-binding-value-range.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,+CAA+C,CAAA;AAG/C,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,iBAAiB;IAG1D,kBAAkB,CAAC,KAAW;QAC5B,IAAI,IAAI,CAAC,SAAS,IAAI,YAAY,EAAE;YAClC,OAAO,IAAI,CAAA,4CAA4C,SAAS,CAAC,KAAK,CAAC,4BAA4B,CAAA;SACpG;QACD,OAAO,KAAK,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAA;IACxC,CAAC;;AAPM,4BAAM,GAAG,iBAAiB,CAAC,MAAM,CAAA;AAD7B,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CASjC;SATY,qBAAqB","sourcesContent":["import { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OxInputValueRange } from '@operato/input'\n\nimport '@operato/attachment/ox-attachment-selector.js'\n\n@customElement('data-binding-value-range')\nexport class DataBindingValueRange extends OxInputValueRange {\n  static styles = OxInputValueRange.styles\n\n  valueInputTemplate(value?: any) {\n    if (this.valuetype == 'attachment') {\n      return html`<ox-attachment-selector data-value value=${ifDefined(value)}></ox-attachment-selector>`\n    }\n    return super.valueInputTemplate(value)\n  }\n}\n"]}

package/dist/src/modeller/property-sidebar/inspector/inspector.d.ts

@@ -19,7 +19,7 @@ export declare class SceneInspector extends LitElement {
     _onclick(e: MouseEvent): void;
     _ondblclick(e: MouseEvent): void;
     get extendedMap(): any;
-    getNodeHandleClass(component: Component): "collapsed" | "extended" | "collapsespace";
+    getNodeHandleClass(component: Component): "extended" | "collapsed" | "collapsespace";
     isExtended(component: Component): boolean;
     toggleExtended(component: Component): void;
     toggleHidden(component: Component): void;

package/dist/src/modeller/property-sidebar/inspector/inspector.js

@@ -33,8 +33,9 @@ export class SceneInspector extends LitElement {
     render() {
         return html `
       <ox-input-search
-        @change=${(e) => (this.searchText = e.target.value)}
         .placeholder=${i18next.t('text.search with type, id or tag')}
+        autofocus
+        @change=${(e) => (this.searchText = e.target.value)}
       ></ox-input-search>
 
       <div result>${!this.scene ? html `` : this.renderComponent(this.scene.root, 0)}</div>

package/dist/src/modeller/property-sidebar/inspector/inspector.js.map

@@ -1 +1 @@
-{"version":3,"file":"inspector.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/inspector/inspector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport Sortable from 'sortablejs'\nimport { i18next } from '@operato/i18n'\n\nimport { Component, Container, Scene } from '@hatiolab/things-scene'\n\nexport class SceneInspector extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        color: var(--scene-inspector-color);\n      }\n\n      ox-input-search {\n        --input-search-padding: 3px;\n        --input-search-border-bottom: none;\n        --input-search-focus-border-bottom: none;\n        --input-search-font: normal 16px var(--theme-font);\n\n        border-radius: 999px;\n        box-sizing: border-box;\n        border: 1px solid var(--secondary-color);\n        padding: 0 10px;\n        margin: 5px;\n      }\n\n      div[result] {\n        flex: 1;\n\n        display: flex;\n        flex-direction: column;\n\n        overflow-y: auto;\n      }\n\n      .component {\n        display: block;\n        overflow: hidden;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n        font-size: 14px;\n      }\n\n      .component[selected] {\n        background-color: var(--scene-inspector-selected-background-color);\n        border-top: var(--scene-inspector-selected-border);\n        border-bottom: var(--scene-inspector-selected-border);\n      }\n      [selected] .type {\n        font-weight: bold;\n      }\n\n      span,\n      i {\n        display: inline-block;\n      }\n\n      span.type {\n        text-overflow: ellipses;\n      }\n\n      span.name {\n        background-color: var(--scene-inspector-name-background-color);\n        border-radius: var(--border-radius);\n        padding: 0 4px;\n        color: #fff;\n        font-size: 0.8em;\n      }\n\n      .eye {\n        margin: 0 0 0 5px;\n        vertical-align: middle;\n        opacity: 0.7;\n        font-size: 1.1em;\n        color: var(--scene-inspector-eye-icon-color);\n      }\n\n      .collapsed::before,\n      .extended::before,\n      .collapsespace::before {\n        background: var(--url-icon-shell-inspector) no-repeat;\n        width: 16px;\n        height: 18px;\n        display: inline-block;\n        content: '';\n        opacity: 0.6;\n      }\n\n      .collapsed::before {\n        background-position: 100% -195px;\n      }\n\n      .extended::before {\n        background-position: 100% -295px;\n      }\n\n      .collapsespace::before {\n        background-position: 100% -395px;\n        opacity: 0.9;\n        width: 16px;\n      }\n      .collapsed,\n      .extended,\n      .collapsespace {\n        border-left: 1px dotted rgba(0, 0, 0, 0.1);\n      }\n\n      pre {\n        display: inline;\n      }\n    `\n  ]\n\n  @property({ type: Object }) scene?: Scene\n\n  @state() private searchText: string = ''\n\n  private _extendedMap: any\n  private show: boolean = false\n\n  disconnectScene(scene?: Scene) {\n    if (scene) {\n      scene.off('selected', undefined, this)\n      scene.off('execute', undefined, this)\n      scene.off('undo', undefined, this)\n      scene.off('redo', undefined, this)\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.disconnectScene(this.scene)\n    delete this._extendedMap\n  }\n\n  render() {\n    return html`\n      <ox-input-search\n        @change=${(e: Event) => (this.searchText = (e.target as HTMLInputElement).value)}\n        .placeholder=${i18next.t('text.search with type, id or tag')}\n      ></ox-input-search>\n\n      <div result>${!this.scene ? html`` : this.renderComponent(this.scene.root, 0)}</div>\n    `\n  }\n\n  firstUpdated() {\n    dispatchEvent(new Event('resize'))\n\n    this.renderRoot.addEventListener('click', this._onclick.bind(this) as EventListener)\n    this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this) as EventListener)\n  }\n\n  refresh() {\n    let selected = this.scene?.selected || []\n\n    selected.forEach(component => {\n      let parent = component.parent\n      while (parent && !this.extendedMap.get(parent)) {\n        this.extendedMap.set(parent, true)\n        parent = parent.parent\n      }\n    })\n\n    this.requestUpdate()\n  }\n\n  updated(change: PropertyValues<this>) {\n    if (change.has('scene')) {\n      let oldScene = change.get('scene') as Scene\n\n      if (oldScene) {\n        this.disconnectScene(oldScene)\n        delete this._extendedMap\n      }\n\n      if (this.scene && this.scene.root) {\n        this.scene.on('selected', this.refresh, this)\n        this.scene.on('execute', this.refresh, this)\n        this.scene.on('undo', this.refresh, this)\n        this.scene.on('redo', this.refresh, this)\n\n        this.refresh()\n      }\n    }\n\n    this.updateComplete.then(() => {\n      this.renderRoot.querySelectorAll('[sortable]').forEach(sortable => {\n        new Sortable(sortable as HTMLElement, this.sortableConfig)\n      })\n    })\n  }\n\n  sortableConfig: Sortable.Options = {\n    group: 'inspector',\n    animation: 150,\n    draggable: '.component',\n    swapThreshold: 1,\n    onSort: this.onSort.bind(this)\n  }\n\n  onSort(e: Sortable.SortableEvent) {\n    if (!this.scene) return\n\n    var component = (e.item as HTMLElement & { component: Component }).component\n    var to_container = (e.to as HTMLElement & { component: Component }).component as Container\n    var to_index = e.newIndex! - 1\n\n    this.scene.move(component, to_container, to_index)\n\n    this.show = false\n    this.updateComplete.then(() => {\n      this.show = true\n    })\n  }\n\n  _onclick(e: MouseEvent) {\n    e.stopPropagation()\n\n    var targetElement = e.target as HTMLElement & { component: Component }\n    var classList = targetElement.classList\n    var component\n\n    while (!component && targetElement) {\n      component = targetElement.component\n\n      if (component) break\n\n      targetElement = targetElement.parentNode as HTMLElement & { component: Component }\n\n      if (!targetElement || targetElement === this.renderRoot) break\n    }\n\n    if (component) {\n      if (classList.contains('eye')) {\n        this.toggleHidden(component)\n      } else if (classList.contains('extended') || classList.contains('collapsed')) {\n        this.toggleExtended(component)\n      }\n\n      this.selectComponent(component)\n    } else {\n      if (classList.contains('inspector')) {\n        this.show = !this.show\n        this.style.height = this.show ? '100%' : ''\n      }\n    }\n\n    this.requestUpdate()\n  }\n\n  _ondblclick(e: MouseEvent) {\n    e.stopPropagation()\n\n    var targetElement = e.target as HTMLElement & { component: Component }\n    var component\n\n    while (!component && targetElement) {\n      component = targetElement.component\n\n      if (component) break\n\n      targetElement = targetElement.parentNode as HTMLElement & { component: Component }\n\n      if (!targetElement || targetElement === this.renderRoot) break\n    }\n\n    if (component && component.isContainer()) {\n      this.toggleExtended(component)\n    }\n\n    this.requestUpdate()\n  }\n\n  get extendedMap() {\n    if (!this._extendedMap) {\n      this._extendedMap = new WeakMap()\n    }\n\n    return this._extendedMap\n  }\n\n  getNodeHandleClass(component: Component) {\n    if (component.isContainer() && (component as Container).components.length > 0) {\n      return !!this.extendedMap.get(component) ? 'extended' : 'collapsed'\n    } else {\n      return 'collapsespace'\n    }\n  }\n\n  isExtended(component: Component) {\n    return !!this.extendedMap.get(component)\n  }\n\n  toggleExtended(component: Component) {\n    var extended = this.isExtended(component)\n\n    if (extended) {\n      this.extendedMap.delete(component)\n    } else {\n      this.extendedMap.set(component, !extended)\n    }\n\n    this.requestUpdate()\n  }\n\n  toggleHidden(component: Component) {\n    component.set('hidden', !component.hidden)\n\n    this.requestUpdate()\n  }\n\n  selectComponent(component: Component) {\n    this.scene!.selected = [component]\n\n    this.requestUpdate()\n  }\n\n  shouldBeShown(component: Component): boolean {\n    const { type, name, id, tag } = component.state\n\n    return !!(\n      !this.searchText ||\n      `${type} ${name || ''} ${id || ''} ${tag || ''}`.search(this.searchText) > -1 ||\n      ((component as Container).components || []).find((child: Component) => this.shouldBeShown(child))\n    )\n  }\n\n  renderComponent(component: Component, depth: number): TemplateResult {\n    if (!component) {\n      return html``\n    }\n\n    if (!this.shouldBeShown(component)) {\n      return html``\n    }\n\n    const children = (component.isContainer() && (component as Container).components) || []\n    const extended = this.isExtended(component) ? children.filter(child => this.shouldBeShown(child)) : []\n    const { type, id, tag, class: clazz } = component.state\n\n    const name = (id ? `#${id}` : '') + (tag ? `@${tag}` : '') + (clazz ? `.(${clazz})` : '')\n\n    return html`\n      <div\n        class=\"component\"\n        ?selected=${(this.scene?.selected || []).indexOf(component) > -1}\n        .component=${component}\n        ?sortable=${component.isContainer()}\n      >\n        <span>\n          ${depth > 0\n            ? html`\n                <mwc-icon class=\"eye\">${component.get('hidden') ? 'visibility_off' : 'visibility'}</mwc-icon>\n                <pre>${' '.repeat(depth)}</pre>\n              `\n            : html` <pre>${' '.repeat(depth + 2)}</pre> `}\n\n          <span class=${this.getNodeHandleClass(component)}> </span>\n\n          <span class=\"type\">${depth == 0 ? 'ROOT' : type}</span> ${name\n            ? html` <span class=\"name\">${name}</span> `\n            : html``}\n        </span>\n\n        ${extended.map(child => this.renderComponent(child, depth + 1))}\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"inspector.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/inspector/inspector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport Sortable from 'sortablejs'\nimport { i18next } from '@operato/i18n'\n\nimport { Component, Container, Scene } from '@hatiolab/things-scene'\n\nexport class SceneInspector extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        color: var(--scene-inspector-color);\n      }\n\n      ox-input-search {\n        --input-search-padding: 3px;\n        --input-search-border-bottom: none;\n        --input-search-focus-border-bottom: none;\n        --input-search-font: normal 16px var(--theme-font);\n\n        border-radius: 999px;\n        box-sizing: border-box;\n        border: 1px solid var(--secondary-color);\n        padding: 0 10px;\n        margin: 5px;\n      }\n\n      div[result] {\n        flex: 1;\n\n        display: flex;\n        flex-direction: column;\n\n        overflow-y: auto;\n      }\n\n      .component {\n        display: block;\n        overflow: hidden;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n        font-size: 14px;\n      }\n\n      .component[selected] {\n        background-color: var(--scene-inspector-selected-background-color);\n        border-top: var(--scene-inspector-selected-border);\n        border-bottom: var(--scene-inspector-selected-border);\n      }\n      [selected] .type {\n        font-weight: bold;\n      }\n\n      span,\n      i {\n        display: inline-block;\n      }\n\n      span.type {\n        text-overflow: ellipses;\n      }\n\n      span.name {\n        background-color: var(--scene-inspector-name-background-color);\n        border-radius: var(--border-radius);\n        padding: 0 4px;\n        color: #fff;\n        font-size: 0.8em;\n      }\n\n      .eye {\n        margin: 0 0 0 5px;\n        vertical-align: middle;\n        opacity: 0.7;\n        font-size: 1.1em;\n        color: var(--scene-inspector-eye-icon-color);\n      }\n\n      .collapsed::before,\n      .extended::before,\n      .collapsespace::before {\n        background: var(--url-icon-shell-inspector) no-repeat;\n        width: 16px;\n        height: 18px;\n        display: inline-block;\n        content: '';\n        opacity: 0.6;\n      }\n\n      .collapsed::before {\n        background-position: 100% -195px;\n      }\n\n      .extended::before {\n        background-position: 100% -295px;\n      }\n\n      .collapsespace::before {\n        background-position: 100% -395px;\n        opacity: 0.9;\n        width: 16px;\n      }\n      .collapsed,\n      .extended,\n      .collapsespace {\n        border-left: 1px dotted rgba(0, 0, 0, 0.1);\n      }\n\n      pre {\n        display: inline;\n      }\n    `\n  ]\n\n  @property({ type: Object }) scene?: Scene\n\n  @state() private searchText: string = ''\n\n  private _extendedMap: any\n  private show: boolean = false\n\n  disconnectScene(scene?: Scene) {\n    if (scene) {\n      scene.off('selected', undefined, this)\n      scene.off('execute', undefined, this)\n      scene.off('undo', undefined, this)\n      scene.off('redo', undefined, this)\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.disconnectScene(this.scene)\n    delete this._extendedMap\n  }\n\n  render() {\n    return html`\n      <ox-input-search\n        .placeholder=${i18next.t('text.search with type, id or tag')}\n        autofocus\n        @change=${(e: Event) => (this.searchText = (e.target as HTMLInputElement).value)}\n      ></ox-input-search>\n\n      <div result>${!this.scene ? html`` : this.renderComponent(this.scene.root, 0)}</div>\n    `\n  }\n\n  firstUpdated() {\n    dispatchEvent(new Event('resize'))\n\n    this.renderRoot.addEventListener('click', this._onclick.bind(this) as EventListener)\n    this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this) as EventListener)\n  }\n\n  refresh() {\n    let selected = this.scene?.selected || []\n\n    selected.forEach(component => {\n      let parent = component.parent\n      while (parent && !this.extendedMap.get(parent)) {\n        this.extendedMap.set(parent, true)\n        parent = parent.parent\n      }\n    })\n\n    this.requestUpdate()\n  }\n\n  updated(change: PropertyValues<this>) {\n    if (change.has('scene')) {\n      let oldScene = change.get('scene') as Scene\n\n      if (oldScene) {\n        this.disconnectScene(oldScene)\n        delete this._extendedMap\n      }\n\n      if (this.scene && this.scene.root) {\n        this.scene.on('selected', this.refresh, this)\n        this.scene.on('execute', this.refresh, this)\n        this.scene.on('undo', this.refresh, this)\n        this.scene.on('redo', this.refresh, this)\n\n        this.refresh()\n      }\n    }\n\n    this.updateComplete.then(() => {\n      this.renderRoot.querySelectorAll('[sortable]').forEach(sortable => {\n        new Sortable(sortable as HTMLElement, this.sortableConfig)\n      })\n    })\n  }\n\n  sortableConfig: Sortable.Options = {\n    group: 'inspector',\n    animation: 150,\n    draggable: '.component',\n    swapThreshold: 1,\n    onSort: this.onSort.bind(this)\n  }\n\n  onSort(e: Sortable.SortableEvent) {\n    if (!this.scene) return\n\n    var component = (e.item as HTMLElement & { component: Component }).component\n    var to_container = (e.to as HTMLElement & { component: Component }).component as Container\n    var to_index = e.newIndex! - 1\n\n    this.scene.move(component, to_container, to_index)\n\n    this.show = false\n    this.updateComplete.then(() => {\n      this.show = true\n    })\n  }\n\n  _onclick(e: MouseEvent) {\n    e.stopPropagation()\n\n    var targetElement = e.target as HTMLElement & { component: Component }\n    var classList = targetElement.classList\n    var component\n\n    while (!component && targetElement) {\n      component = targetElement.component\n\n      if (component) break\n\n      targetElement = targetElement.parentNode as HTMLElement & { component: Component }\n\n      if (!targetElement || targetElement === this.renderRoot) break\n    }\n\n    if (component) {\n      if (classList.contains('eye')) {\n        this.toggleHidden(component)\n      } else if (classList.contains('extended') || classList.contains('collapsed')) {\n        this.toggleExtended(component)\n      }\n\n      this.selectComponent(component)\n    } else {\n      if (classList.contains('inspector')) {\n        this.show = !this.show\n        this.style.height = this.show ? '100%' : ''\n      }\n    }\n\n    this.requestUpdate()\n  }\n\n  _ondblclick(e: MouseEvent) {\n    e.stopPropagation()\n\n    var targetElement = e.target as HTMLElement & { component: Component }\n    var component\n\n    while (!component && targetElement) {\n      component = targetElement.component\n\n      if (component) break\n\n      targetElement = targetElement.parentNode as HTMLElement & { component: Component }\n\n      if (!targetElement || targetElement === this.renderRoot) break\n    }\n\n    if (component && component.isContainer()) {\n      this.toggleExtended(component)\n    }\n\n    this.requestUpdate()\n  }\n\n  get extendedMap() {\n    if (!this._extendedMap) {\n      this._extendedMap = new WeakMap()\n    }\n\n    return this._extendedMap\n  }\n\n  getNodeHandleClass(component: Component) {\n    if (component.isContainer() && (component as Container).components.length > 0) {\n      return !!this.extendedMap.get(component) ? 'extended' : 'collapsed'\n    } else {\n      return 'collapsespace'\n    }\n  }\n\n  isExtended(component: Component) {\n    return !!this.extendedMap.get(component)\n  }\n\n  toggleExtended(component: Component) {\n    var extended = this.isExtended(component)\n\n    if (extended) {\n      this.extendedMap.delete(component)\n    } else {\n      this.extendedMap.set(component, !extended)\n    }\n\n    this.requestUpdate()\n  }\n\n  toggleHidden(component: Component) {\n    component.set('hidden', !component.hidden)\n\n    this.requestUpdate()\n  }\n\n  selectComponent(component: Component) {\n    this.scene!.selected = [component]\n\n    this.requestUpdate()\n  }\n\n  shouldBeShown(component: Component): boolean {\n    const { type, name, id, tag } = component.state\n\n    return !!(\n      !this.searchText ||\n      `${type} ${name || ''} ${id || ''} ${tag || ''}`.search(this.searchText) > -1 ||\n      ((component as Container).components || []).find((child: Component) => this.shouldBeShown(child))\n    )\n  }\n\n  renderComponent(component: Component, depth: number): TemplateResult {\n    if (!component) {\n      return html``\n    }\n\n    if (!this.shouldBeShown(component)) {\n      return html``\n    }\n\n    const children = (component.isContainer() && (component as Container).components) || []\n    const extended = this.isExtended(component) ? children.filter(child => this.shouldBeShown(child)) : []\n    const { type, id, tag, class: clazz } = component.state\n\n    const name = (id ? `#${id}` : '') + (tag ? `@${tag}` : '') + (clazz ? `.(${clazz})` : '')\n\n    return html`\n      <div\n        class=\"component\"\n        ?selected=${(this.scene?.selected || []).indexOf(component) > -1}\n        .component=${component}\n        ?sortable=${component.isContainer()}\n      >\n        <span>\n          ${depth > 0\n            ? html`\n                <mwc-icon class=\"eye\">${component.get('hidden') ? 'visibility_off' : 'visibility'}</mwc-icon>\n                <pre>${' '.repeat(depth)}</pre>\n              `\n            : html` <pre>${' '.repeat(depth + 2)}</pre> `}\n\n          <span class=${this.getNodeHandleClass(component)}> </span>\n\n          <span class=\"type\">${depth == 0 ? 'ROOT' : type}</span> ${name\n            ? html` <span class=\"name\">${name}</span> `\n            : html``}\n        </span>\n\n        ${extended.map(child => this.renderComponent(child, depth + 1))}\n      </div>\n    `\n  }\n}\n"]}