@operato/board 8.0.0-alpha.9 → 8.0.0-beta.1

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

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

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

@@ -1,19 +0,0 @@
-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'
-
-@customElement('data-binding-value-map')
-export class DataBindingValueMap extends OxInputValueMap {
-  static styles = OxInputValueMap.styles
-
-  valueInputTemplate(value?: any) {
-    if (this.valuetype == 'attachment') {
-      return html`<ox-attachment-selector data-value value=${ifDefined(value)}></ox-attachment-selector>`
-    }
-    return super.valueInputTemplate(value)
-  }
-}

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

@@ -1,19 +0,0 @@
-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'
-
-@customElement('data-binding-value-range')
-export class DataBindingValueRange extends OxInputValueRange {
-  static styles = OxInputValueRange.styles
-
-  valueInputTemplate(value?: any) {
-    if (this.valuetype == 'attachment') {
-      return html`<ox-attachment-selector data-value value=${ifDefined(value)}></ox-attachment-selector>`
-    }
-    return super.valueInputTemplate(value)
-  }
-}