@operato/property-panel 9.2.1 → 10.0.0-beta.2

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

@@ -1,470 +0,0 @@
-/**
- * @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',
-  'appendum',
-  'tag',
-  ['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);
-      }
-
-      ox-input-data {
-        height: 300px;
-        border-radius: var(--spacing-small);
-      }
-
-      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
-          @click=${() => {
-            this._dataExpanded = !this._dataExpanded
-          }}
-        >
-          <ox-title-with-help topic="board-modeller/initial-data" msgid="label.initial-data"
-            >initial value</ox-title-with-help
-          >
-          <md-icon>${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

@@ -1,77 +0,0 @@
-/**
- * @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

@@ -1,155 +0,0 @@
-/**
- * @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</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 }))
-  }
-}