@operato/board 8.0.0-beta.0 → 8.0.0-beta.10

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

@@ -1,480 +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 { AbstractProperty } from '../abstract-property.js'
-import { PropertySharedStyle } from '../property-shared-style.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 = [
-    PropertySharedStyle,
-    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] legend {
-        box-sizing: border-box;
-        width: 100%;
-      }
-
-      fieldset[collapsable] legend md-icon {
-        float: right;
-        font-size: medium;
-        margin: 0;
-      }
-
-      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;
-        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 || ''} />
-
-          <div class="checkbox-row">
-            <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>
-          </div>
-
-          <div class="checkbox-row">
-            <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>
-          </div>
-
-          <div class="checkbox-row">
-            <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>
-        </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/modeller/property-sidebar/effects/effects-shared-style.ts

@@ -1,62 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css } from 'lit'
-
-export const EffectsSharedStyle = css`
-  :host {
-    display: grid;
-    grid-template-columns: repeat(10, 1fr);
-    grid-gap: 5px;
-    grid-auto-rows: minmax(24px, auto);
-
-    align-items: center;
-  }
-
-  * {
-    align-self: stretch;
-  }
-
-  label {
-    grid-column: span 3;
-    text-align: right;
-    text-transform: capitalize;
-
-    align-self: center;
-  }
-
-  input,
-  select,
-  ox-input-angle,
-  ox-input-color,
-  [custom-editor] {
-    grid-column: span 7;
-  }
-
-  input,
-  select,
-  ox-input-angle input,
-  ox-input-color input,
-  [custom-editor] input {
-    border: var(--property-sidebar-fieldset-border);
-  }
-
-  ox-input-data {
-    height: 300px;
-  }
-
-  input[type='checkbox'] {
-    grid-column: 4 / 5;
-    align-self: center;
-  }
-
-  label.checkbox-label {
-    grid-column: span 6;
-    text-align: left;
-  }
-
-  [fullwidth] {
-    grid-column: 1 / -1;
-  }
-`

package/src/modeller/property-sidebar/effects/effects.ts

@@ -1,69 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@operato/i18n/ox-i18n.js'
-import '@operato/help/ox-title-with-help.js'
-
-import { html } from 'lit'
-import { property } from 'lit/decorators.js'
-
-import { Properties, Scene } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-
-import { AbstractProperty } from '../abstract-property.js'
-import { PropertySharedStyle } from '../property-shared-style.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 = [PropertySharedStyle]
-
-  @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>
-    `
-  }
-}