@operato/property-panel 9.0.0-beta.14

package/src/property-panel/data-binding/data-binding.ts

@@ -0,0 +1,464 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/web/icon/icon.js'
+import '@operato/help/ox-title-with-help.js'
+import '@operato/input/ox-buttons-radio.js'
+import '@operato/input/ox-input-data.js'
+import '@operato/i18n/ox-i18n.js'
+
+import { css, html, PropertyValues } from 'lit'
+import { property, query, state } from 'lit/decorators.js'
+
+import { Properties, Scene } from '@hatiolab/things-scene'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'
+
+import { AbstractProperty } from '../abstract-property.js'
+import { DataBindingMapper } from './data-binding-mapper.js'
+
+var clipboard = '{}'
+
+const PROPS = [
+  '',
+  'text',
+  ['fillStyle', 'fill style'],
+  ['strokeStyle', 'stroke style'],
+  ['fontColor', 'font color'],
+  'value',
+  'data',
+  'source',
+  'hidden',
+  'started',
+  'play',
+  ['ref', 'reference'],
+  'action',
+  'options',
+  'rotate',
+  'dimension',
+  'location',
+  'accessor',
+  ['tap', '(tap)'],
+  '(action)'
+].map(prop => {
+  return typeof prop == 'string' ? { name: prop, label: prop } : { name: prop[0], label: prop[1] }
+})
+
+export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
+  static styles = [
+    PropertyGridStyles,
+    css`
+      #tab-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      #tab-header > md-icon {
+        padding: 0;
+        margin: 0;
+        width: 25px;
+        height: 25px;
+        font-size: x-large;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+      }
+
+      fieldset[collapsable][collapsed] > :not(legend) {
+        display: none;
+      }
+
+      ox-buttons-radio {
+        flex: 1;
+        height: 25px;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        border-width: 1px 1px 0 1px;
+        text-align: center;
+
+        display: flex;
+        padding: 0;
+        box-sizing: border-box;
+
+        width: 0; /* limit width */
+        overflow-x: hidden;
+      }
+
+      ox-buttons-radio > div {
+        background-color: rgba(0, 0, 0, 0.2);
+        border: 1px solid rgba(0, 0, 0, 0.07);
+        border-width: 0 0 2px 0;
+        padding: 0;
+        margin: 0;
+        color: #fff;
+        font-size: 13px;
+        max-width: 25px;
+        min-width: 25px;
+      }
+
+      ox-buttons-radio > div[disabled] {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+
+      ox-buttons-radio > div[active] {
+        border-color: rgb(242, 71, 28);
+      }
+
+      ox-buttons-radio > div.iron-selected {
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      div[binding] {
+        display: flex;
+        flex-direction: row-reverse;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+        overflow: hidden;
+        border-style: solid;
+        border-color: rgba(0, 0, 0, 0.2);
+        border-image: initial;
+        border-width: 0px 1px;
+        padding: 7px 5px 2px 5px;
+      }
+
+      md-icon {
+        margin-left: 5px;
+        color: var(--md-sys-color-on-secondary-container);
+        opacity: 0.8;
+        cursor: pointer;
+        --md-icon-size: 18px;
+      }
+
+      md-icon:hover {
+        color: var(--md-sys-color-on-primary-container);
+        opacity: 1;
+      }
+
+      md-icon[disabled] {
+        color: rgba(0, 0, 0, 0.1);
+      }
+
+      data-binding-mapper {
+        --things-select: {
+          min-width: 50%;
+          margin-bottom: 10px;
+          padding: 3px 20px 2px 5px;
+          -webkit-border-radius: 4px;
+          -moz-border-radius: 4px;
+          border-radius: 4px;
+          border: 1px solid rgba(0, 0, 0, 0.15);
+          font-size: 15px;
+          font-weight: 300;
+          -webkit-appearance: none;
+        };
+      }
+    `
+  ]
+
+  @property({ type: Object }) value?: Properties
+  @property({ type: Object }) scene?: Scene
+
+  @state() mappingIndex: number = 0
+  @state() _afterRender?: Function | null
+  @state() _dataExpanded: boolean = false
+
+  @query('#tabs') tabs!: HTMLElement
+  @query('#tab-nav-left-button') tabNavLeftButton!: HTMLElement
+  @query('#tab-nav-right-button') tabNavRightButton!: HTMLElement
+
+  private mapping: Properties = {}
+
+  get mappings() {
+    return this.value?.mappings || []
+  }
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))
+
+    this.tabContainer.addEventListener('scroll', () => {
+      this._onTabScroll()
+    })
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('value')) {
+      this.onValueChanged()
+    }
+  }
+
+  static get scopedElements() {
+    return {
+      'data-binding-mapper': DataBindingMapper
+    }
+  }
+
+  render() {
+    const value = this.value || {
+      mappings: []
+    }
+
+    return html`
+      <fieldset>
+        <legend>
+          <ox-title-with-help topic="board-modeller/data-binding" msgid="label.identifier"
+            >identifier</ox-title-with-help
+          >
+        </legend>
+        <div class="property-grid">
+          <label> <ox-i18n msgid="label.id">ID</ox-i18n> </label>
+          <input value-key="id" .value=${value.id || ''} />
+
+          <label> <ox-i18n msgid="label.class">Class</ox-i18n> </label>
+          <input value-key="class" .value=${value.class || ''} />
+
+          <label> <ox-i18n msgid="label.tag">Tag</ox-i18n> </label>
+          <input value-key="tag" .value=${value.tag || ''} />
+
+          <label> <ox-i18n msgid="label.template-prefix">Template Prefix</ox-i18n> </label>
+          <input value-key="templatePrefix" .value=${value.templatePrefix || ''} />
+
+          <input id="checkbox-ndns" type="checkbox" value-key="ndns" .checked=${value.ndns} />
+          <label for="checkbox-ndns"> <ox-i18n msgid="label.ndns">No Data No Show</ox-i18n> </label>
+
+          <input id="checkbox-sensitive" type="checkbox" value-key="sensitive" .checked=${value.sensitive} />
+          <label for="checkbox-sensitive">
+            <ox-i18n msgid="label.intent-sensitive">Intent Sensitive</ox-i18n>
+          </label>
+
+          <input id="checkbox-persistent" type="checkbox" value-key="persistent" .checked=${value.persistent} />
+          <label for="checkbox-persistent">
+            <ox-i18n msgid="label.persistent-data">Persistent Data</ox-i18n>
+          </label>
+        </div>
+      </fieldset>
+
+      <fieldset collapsable ?collapsed=${!this._dataExpanded}>
+        <legend>
+          <ox-title-with-help topic="board-modeller/initial-data" msgid="label.initial-data"
+            >initial value</ox-title-with-help
+          >
+          <md-icon
+            @click=${() => {
+              this._dataExpanded = !this._dataExpanded
+            }}
+            >${this._dataExpanded ? 'expand_less' : 'expand_more'}</md-icon
+          >
+        </legend>
+        <ox-input-data value-key="data" .value=${value.data}> </ox-input-data>
+      </fieldset>
+
+      <fieldset>
+        <legend>
+          <ox-title-with-help topic="board-modeller/data-spread" msgid="label.data-spread"
+            >Data Spread</ox-title-with-help
+          >
+        </legend>
+
+        <div id="tab-header">
+          <md-icon
+            id="tab-nav-left-button"
+            @click=${() => {
+              this._onTabScrollNavLeft()
+            }}
+            disabled
+            >chevron_left</md-icon
+          >
+
+          <ox-buttons-radio
+            id="tabs"
+            .value=${String(this.mappingIndex)}
+            @change=${(e: Event) => {
+              e.stopPropagation()
+              this._setMappingIndex((e.target as any).value)
+            }}
+          >
+            ${this.mappings.map((m: string, i: number) => html` <div data-value=${i} data-mapping>${i + 1}</div> `)}
+            <div data-value=${this.mappings.length} data-mapping disabled>${this.mappings.length + 1}</div>
+          </ox-buttons-radio>
+
+          <md-icon
+            id="tab-nav-right-button"
+            @click=${(e: Event) => {
+              this._onTabScrollNavRight()
+            }}
+            disabled
+            >chevron_right</md-icon
+          >
+        </div>
+
+        <div binding>
+          <md-icon style="font-size:19px" @click=${() => this._clearDataBindingMapper()} title="delete current tab"
+            >delete_forever</md-icon
+          >
+          <md-icon @click=${() => this._pasteDataBindingMapper()} title="replace current tab">content_paste</md-icon>
+          <md-icon style="font-size:17px" @click=${() => this._copyDataBindingMapper()} title="copy current tab"
+            >content_copy</md-icon
+          >
+        </div>
+
+        <data-binding-mapper
+          @value-change=${(e: CustomEvent) => this._onMappingChanged(e)}
+          .scene=${this.scene}
+          .mapping=${(value.mappings && value.mappings[this.mappingIndex]) || {}}
+          .properties=${PROPS}
+        >
+        </data-binding-mapper>
+      </fieldset>
+    `
+  }
+
+  _setMappingIndex(idx: number) {
+    this.mappingIndex = isNaN(Number(idx)) ? 0 : Number(idx)
+
+    this._onTabScroll()
+  }
+
+  _clearDataBindingMapper() {
+    var mappings = [...(this.value?.mappings || [])]
+    mappings.splice(this.mappingIndex, 1)
+    this.onAfterValueChange(
+      'mappings',
+      mappings.filter(m => !!m)
+    )
+  }
+
+  _copyDataBindingMapper() {
+    clipboard = JSON.stringify(this.mappings[this.mappingIndex])
+  }
+
+  async _pasteDataBindingMapper() {
+    var index = this.mappingIndex
+    var mappings = [...(this.value?.mappings || [])]
+    mappings[this.mappingIndex] = JSON.parse(clipboard)
+
+    this.onAfterValueChange('mappings', mappings)
+
+    setTimeout(() => {
+      this._setMappingIndex(index)
+    }, 100)
+  }
+
+  async onValueChanged() {
+    await this.updateComplete
+
+    if (this._afterRender) {
+      this._afterRender()
+    } else {
+      this._setMappingIndex(0)
+    }
+
+    this._afterRender = null
+  }
+
+  onValueChange(e: Event) {
+    var element = e.target as HTMLElement
+    var key = element.getAttribute('value-key')
+
+    var value = this.getValueFromEventTarget(element)
+
+    if (!key) {
+      return
+    }
+
+    this.value = {
+      ...this.value,
+      [key]: value
+    }
+
+    this.onAfterValueChange(key, value)
+  }
+
+  get tabContainer() {
+    return this.tabs
+  }
+
+  async _onMappingChanged(e: CustomEvent) {
+    var mapping = (e.target as any).mapping
+
+    /* data spread target의 변경이 있는 경우, target 컴포넌트들의 태그를 블링크 시킨다 */
+    if (mapping && mapping.target) {
+      this.scene &&
+        this.scene.findAll(mapping.target, this.scene.selected && this.scene.selected[0]).forEach((c, i) => {
+          if (i == 0) c.trigger('decotagreset')
+          c.trigger('decotag', {})
+        })
+    }
+
+    /* mapping의 모든 속성이 편집되면, 모델에 반영한다. */
+    var mappings = [...(this.value?.mappings || [])]
+
+    if (mapping.target && mapping.property && mapping.rule) {
+      mappings[this.mappingIndex] = mapping
+
+      var mappingIdx = this.mappingIndex
+      this._afterRender = () => {
+        this._setMappingIndex(mappingIdx)
+        this.tabContainer.scrollLeft = this.tabContainer.scrollWidth
+      }
+
+      this.dispatchEvent(
+        new CustomEvent('property-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            mappings: mappings.filter(m => !!m)
+          }
+        })
+      )
+
+      await this.requestUpdate()
+    } else if (!mapping.target && !mapping.property) {
+      const { accessor, source } = e.detail?.changed || {}
+
+      // accessor나 source를 입력중인 경우 tabIndex Change 방지
+      if (!accessor && !source) {
+        mappings[this.mappingIndex] = null
+        var nextMappingIdx = Math.max(this.mappingIndex - 1, 0)
+        this._afterRender = () => {
+          this._setMappingIndex(nextMappingIdx)
+        }
+        this.dispatchEvent(
+          new CustomEvent('property-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+              mappings: mappings.filter(m => !!m)
+            }
+          })
+        )
+      }
+    }
+  }
+
+  _onTabScroll() {
+    if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {
+      this.tabNavLeftButton.setAttribute('disabled', '')
+      this.tabNavRightButton.setAttribute('disabled', '')
+    }
+    // left-end
+    else if (this.tabContainer.scrollLeft == 0) {
+      this.tabNavLeftButton.setAttribute('disabled', '')
+      this.tabNavRightButton.removeAttribute('disabled')
+    }
+    // right-end
+    else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {
+      this.tabNavLeftButton.removeAttribute('disabled')
+      this.tabNavRightButton.setAttribute('disabled', '')
+    } else {
+      this.tabNavLeftButton.removeAttribute('disabled')
+      this.tabNavRightButton.removeAttribute('disabled')
+    }
+  }
+
+  _onTabScrollNavLeft() {
+    this.tabContainer.style.scrollBehavior = 'smooth'
+    this.tabContainer.scrollLeft -= this.tabContainer.clientWidth
+    this.tabContainer.style.scrollBehavior = 'auto'
+  }
+
+  _onTabScrollNavRight() {
+    this.tabContainer.style.scrollBehavior = 'smooth'
+    this.tabContainer.scrollLeft += this.tabContainer.clientWidth
+    this.tabContainer.style.scrollBehavior = 'auto'
+  }
+}

package/src/property-panel/effects/effects.ts

@@ -0,0 +1,77 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@operato/i18n/ox-i18n.js'
+import '@operato/help/ox-title-with-help.js'
+
+import { css, html } from 'lit'
+import { property } from 'lit/decorators.js'
+
+import { Properties, Scene } from '@hatiolab/things-scene'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'
+
+import { AbstractProperty } from '../abstract-property.js'
+import { PropertyAnimations } from './property-animations.js'
+import { PropertyEvent } from './property-event.js'
+import { PropertyShadow } from './property-shadow.js'
+
+export class PropertyEffects extends ScopedElementsMixin(AbstractProperty) {
+  static styles = [
+    PropertyGridStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+    `
+  ]
+
+  @property({ type: Object }) value?: Properties
+  @property({ type: Object }) scene?: Scene
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))
+  }
+
+  static get scopedElements() {
+    return {
+      'property-shadow': PropertyShadow,
+      'property-animations': PropertyAnimations,
+      'property-event': PropertyEvent
+    }
+  }
+
+  render() {
+    const value = this.value || {}
+
+    return html`
+      <fieldset>
+        <legend>
+          <ox-title-with-help topic="board-modeller/effects/shadow" msgid="label.shadow">shadow</ox-title-with-help>
+        </legend>
+
+        <property-shadow value-key="shadow" .value=${value.shadow || {}}> </property-shadow>
+      </fieldset>
+
+      <fieldset>
+        <legend>
+          <ox-title-with-help topic="board-modeller/effects/retention" msgid="label.retention"
+            >retention</ox-title-with-help
+          >
+        </legend>
+
+        <div class="property-grid">
+          <label> <ox-i18n msgid="label.retention">retention</ox-i18n> </label>
+          <input type="number" value-key="retention" .value=${value.retention} placeholder="ms" />
+        </div>
+      </fieldset>
+
+      <property-animations value-key="animation" .scene=${this.scene} .value=${value.animation || {}}>
+      </property-animations>
+
+      <property-event value-key="event" .scene=${this.scene} .value=${value.event || {}}> </property-event>
+    `
+  }
+}

package/src/property-panel/effects/property-animation.ts

@@ -0,0 +1,155 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@operato/input/ox-input-angle.js'
+import '@operato/i18n/ox-i18n.js'
+
+import { css, html, LitElement } from 'lit'
+import { property } from 'lit/decorators.js'
+
+import { Properties, Scene } from '@hatiolab/things-scene'
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'
+
+import { convert } from './value-converter.js'
+
+/**
+ * 컴포넌트의 animation 속성을 편집하는 element
+
+Example:
+
+    <property-animation .value=${animation}>
+    </property-animation>
+*/
+
+export class PropertyAnimation extends LitElement {
+  static styles = [
+    PropertyGridStyles,
+    css`
+      :host {
+        display: flex;
+      }
+    `
+  ]
+
+  @property({ type: Object }) value?: Properties
+  @property({ type: Object }) scene?: Scene
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))
+  }
+
+  render() {
+    const value = this.value || {}
+
+    return html`
+      <div class="property-grid">
+        <label>Animation Type</label>
+        <select value-key="type" .value=${value.type}>
+          <option value="">None</option>
+          <option value="rotation">Rotation</option>
+          <option value="vibration">Vibration</option>
+          <option value="heartbeat">Heartbeat</option>
+          <option value="moving">Moving</option>
+          <option value="fade">Fade</option>
+          <option value="outline">Outline</option>
+        </select>
+
+        <label> <ox-i18n msgid="label.waiting-time">waiting time</ox-i18n> </label>
+        <input type="number" value-key="delay" .value=${value.delay} placeholder="ms" />
+
+        <label> <ox-i18n msgid="label.duration">duration</ox-i18n> </label>
+        <input type="number" value-key="duration" .value=${value.duration} placeholder="ms" />
+
+        <label> <ox-i18n msgid="label.animation-interval">interval</ox-i18n> </label>
+        <input type="number" value-key="interval" .value=${value.interval} placeholder="ms" />
+
+        ${value.type == 'rotation' || value.type == 'vibration'
+          ? html`
+              <label> <ox-i18n msgid="label.theta">theta</ox-i18n> </label>
+              <ox-input-angle value-key="theta" .value=${value.theta}> </ox-input-angle>
+            `
+          : html``}
+        ${value.type == 'heartbeat'
+          ? html`
+              <label> <ox-i18n msgid="label.scale">scale</ox-i18n> </label>
+              <input type="number" value-key="scale" .value=${value.scale} />
+            `
+          : html``}
+        ${value.type == 'moving'
+          ? html`
+              <label> <ox-i18n msgid="label.x-axes">X-axes</ox-i18n> </label>
+              <input type="number" value-key="x" .value=${value.x} />
+
+              <label> <ox-i18n msgid="label.y-axes">Y-axes</ox-i18n> </label>
+              <input type="number" value-key="y" .value=${value.y} />
+            `
+          : html``}
+        ${value.type == 'fade'
+          ? html`
+              <label> <ox-i18n msgid="label.start-alpha">start alpha</ox-i18n> </label>
+              <input type="number" value-key="startAlpha" .value=${value.startAlpha} />
+
+              <label> <ox-i18n msgid="label.end-alpha">end alpha</ox-i18n> </label>
+              <input type="number" value-key="endAlpha" .value=${value.endAlpha} />
+            `
+          : html``}
+        ${value.type == 'outline'
+          ? html`
+              <label> <ox-i18n msgid="label.target">target</ox-i18n> </label>
+              <input value-key="rideOn" .value=${value.rideOn || ''} list="target-list" />
+              <datalist id="target-list">
+                ${this.scene!.ids.map(info => info.key).map(id => html` <option value=${id}></option> `)}
+              </datalist>
+            `
+          : html``}
+
+        <input id="checkbox-repeat" value-key="repeat" type="checkbox" .checked=${value.repeat} />
+        <label for="checkbox-repeat" class="checkbox-label"> <ox-i18n msgid="label.repeat">repeat</ox-i18n> </label>
+
+        <input
+          id="checkbox-autoplay"
+          value-key="autoplay"
+          type="checkbox"
+          .checked=${value.autoplay || (value.autoplay ?? true)}
+        />
+        <label for="checkbox-autoplay" class="checkbox-label">
+          <ox-i18n msgid="label.autoplay">autoplay</ox-i18n>
+        </label>
+
+        <label>delta</label>
+        <select value-key="delta" .value=${value.delta}>
+          <option value="linear">linear</option>
+          <option value="quad">quad</option>
+          <option value="circ">circ</option>
+          <option value="back">back</option>
+          <option value="bounce">bounce</option>
+          <option value="elastic">elastic</option>
+        </select>
+
+        <label>ease</label>
+        <select value-key="ease" .value=${value.ease}>
+          <option value="in">in</option>
+          <option value="out">out</option>
+          <option value="inout">inout</option>
+        </select>
+      </div>
+    `
+  }
+
+  onValueChange(e: Event) {
+    var element = e.target as HTMLElement
+    var key = element.getAttribute('value-key')
+
+    if (!key) {
+      return
+    }
+
+    this.value = {
+      ...this.value,
+      [key]: convert(element)
+    }
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+}