@things-factory/board-ui 4.0.13 → 4.0.18

package/client/board-modeller/property-sidebar/effects/property-animation.js

@@ -1,141 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, html } from 'lit-element'
-
-import '@things-factory/i18n-base'
-import '@things-factory/modeller-ui/client/editors/things-editor-angle-input'
-
-import { EffectsSharedStyle } from './effects-shared-style'
-import { convert } from './value-converter'
-
-/**
- * 컴포넌트의 animation 속성을 편집하는 element
-
-Example:
-
-    <property-animation .value=${animation}>
-    </property-animation>
-*/
-export default class PropertyAnimation extends LitElement {
-  static get properties() {
-    return {
-      value: Object,
-      scene: Object
-    }
-  }
-
-  static get styles() {
-    return [EffectsSharedStyle]
-  }
-
-  constructor() {
-    super()
-
-    this.value = {}
-  }
-
-  firstUpdated() {
-    this.shadowRoot.addEventListener('change', this._onValueChange.bind(this))
-  }
-
-  render() {
-    return html`
-      <label>Animation Type</label>
-      <select value-key="type" .value=${this.value && this.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> <i18n-msg msgid="label.waiting-time">waiting time</i18n-msg> </label>
-      <input type="number" value-key="delay" .value=${this.value.delay} placeholder="ms" />
-
-      <label> <i18n-msg msgid="label.duration">duration</i18n-msg> </label>
-      <input type="number" value-key="duration" .value=${this.value.duration} placeholder="ms" />
-
-      ${this.value.type == 'rotation' || this.value.type == 'vibration'
-        ? html`
-            <label> <i18n-msg msgid="label.theta">theta</i18n-msg> </label>
-            <things-editor-angle-input value-key="theta" .radian=${this.value.theta}> </things-editor-angle-input>
-          `
-        : html``}
-      ${this.value.type == 'heartbeat'
-        ? html`
-            <label> <i18n-msg msgid="label.scale">scale</i18n-msg> </label>
-            <input type="number" value-key="scale" .value=${this.value.scale} />
-          `
-        : html``}
-      ${this.value.type == 'moving'
-        ? html`
-            <label> <i18n-msg msgid="label.x-axes">X-axes</i18n-msg> </label>
-            <input type="number" value-key="x" .value=${this.value.x} />
-
-            <label> <i18n-msg msgid="label.y-axes">Y-axes</i18n-msg> </label>
-            <input type="number" value-key="y" .value=${this.value.y} />
-          `
-        : html``}
-      ${this.value.type == 'fade'
-        ? html`
-            <label> <i18n-msg msgid="label.start-alpha">start alpha</i18n-msg> </label>
-            <input type="number" value-key="startAlpha" .value=${this.value.startAlpha} />
-
-            <label> <i18n-msg msgid="label.end-alpha">end alpha</i18n-msg> </label>
-            <input type="number" value-key="endAlpha" .value=${this.value.endAlpha} />
-          `
-        : html``}
-      ${this.value.type == 'outline'
-        ? html`
-            <label> <i18n-msg msgid="label.target">target</i18n-msg> </label>
-            <input value-key="rideOn" .value=${this.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=${this.value.repeat} />
-      <label for="checkbox-repeat" class="checkbox-label"> <i18n-msg msgid="label.repeat">repeat</i18n-msg> </label>
-
-      <label>delta</label>
-      <select value-key="delta" .value=${this.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=${this.value.ease}>
-        <option value="in">in</option>
-        <option value="out">out</option>
-        <option value="inout">inout</option>
-      </select>
-    `
-  }
-
-  _onValueChange(e) {
-    var element = e.target
-    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 }))
-  }
-}
-
-customElements.define('property-animation', PropertyAnimation)

package/client/board-modeller/property-sidebar/effects/property-animations.js

@@ -1,92 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, html, css } from 'lit-element'
-
-import '@things-factory/i18n-base'
-import './property-animation'
-import '@material/mwc-icon'
-
-import { PropertySharedStyle } from '../property-shared-style'
-import { convert } from './value-converter'
-
-class PropertyAnimations extends LitElement {
-  static get properties() {
-    return {
-      value: Object,
-      scene: Object,
-      _expanded: Boolean
-    }
-  }
-
-  static get styles() {
-    return [
-      PropertySharedStyle,
-      css`
-        fieldset[collapsable] legend {
-          box-sizing: border-box;
-          width: 100%;
-        }
-
-        fieldset[collapsable] legend mwc-icon {
-          float: right;
-          font-size: medium;
-          margin: 0;
-          cursor: pointer;
-        }
-
-        fieldset[collapsable][collapsed] > :not(legend) {
-          display: none;
-        }
-      `
-    ]
-  }
-
-  constructor() {
-    super()
-
-    this.value = {}
-  }
-
-  firstUpdated() {
-    this.shadowRoot.addEventListener('change', this._onValueChange.bind(this))
-  }
-
-  render() {
-    return html`
-      <fieldset collapsable ?collapsed=${!this._expanded}>
-        <legend>
-          <title-with-help topic="board-modeller/effects/animation" msgid="label.animation">animation</title-with-help>
-          <mwc-icon
-            @click=${e => {
-              this._expanded = !this._expanded
-            }}
-            >${this._expanded ? 'expand_less' : 'expand_more'}</mwc-icon
-          >
-        </legend>
-
-        <property-animation value-key="oncreate" .scene=${this.scene} .value=${this.value.oncreate || {}}>
-        </property-animation>
-      </fieldset>
-    `
-  }
-
-  _onValueChange(e) {
-    var element = e.target
-    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 }))
-  }
-}
-
-customElements.define('property-animations', PropertyAnimations)

package/client/board-modeller/property-sidebar/effects/property-event-hover.js

@@ -1,144 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, html } from 'lit-element'
-
-import '@things-factory/i18n-base'
-
-import { EffectsSharedStyle } from './effects-shared-style'
-import { convert } from './value-converter'
-
-class PropertyEventHover extends LitElement {
-  static get properties() {
-    return {
-      value: Object,
-      scene: Object
-    }
-  }
-
-  static get styles() {
-    return [EffectsSharedStyle]
-  }
-
-  constructor() {
-    super()
-
-    this.value = {}
-  }
-
-  firstUpdated() {
-    this.shadowRoot.addEventListener('change', this._onValueChange.bind(this))
-  }
-
-  render() {
-    var { action, value = '', target = '', emphasize, restore } = this.value
-
-    return html`
-      <input id="checkbox-emphasize" type="checkbox" value-key="emphasize" .checked=${emphasize} />
-      <label for="checkbox-emphasize" class="checkbox-label">
-        <i18n-msg msgid="label.emphasize">emphasize</i18n-msg>
-      </label>
-
-      <label> <i18n-msg msgid="label.action">action</i18n-msg> </label>
-      <select id="tap-select" value-key="action" .value=${action || ''}>
-        <option value=""></option>
-        <option value="popup">popup target board</option>
-        <option value="infoWindow">open infowindow</option>
-        <option value="data-toggle">toggle(true/false) target component data</option>
-        <option value="data-tristate">tristate(0/1/2) target component data</option>
-        <option value="data-set">set value to target component data</option>
-        <option value="value-set">set value to target component value</option>
-      </select>
-
-      <label> <i18n-msg msgid="label.target">target</i18n-msg> </label>
-
-      ${action == 'popup'
-        ? html`
-            <things-editor-board-selector
-              value-key="target"
-              .value=${target}
-              custom-editor
-            ></things-editor-board-selector>
-          `
-        : html`
-            <input
-              value-key="target"
-              .value=${target || ''}
-              list="target-list"
-              .placeholder="${this._getPlaceHoder(action)}"
-            />
-
-            <datalist id="target-list">
-              ${this._getTargetList(action).map(item => html` <option .value=${item}></option> `)}
-            </datalist>
-          `}
-      ${action == 'data-set' || action == 'value-set'
-        ? html`
-            <label> <i18n-msg msgid="label.value">value</i18n-msg> </label>
-            <things-editor-data value-key="value" .value=${value} custom-editor fullwidth></things-editor-data>
-          `
-        : html``}
-
-      <input id="checkbox-restore" type="checkbox" value-key="restore" .checked=${restore} />
-      <label for="checkbox-restore" class="checkbox-label">
-        <i18n-msg msgid="label.restore-on-leave">restore on leave</i18n-msg>
-      </label>
-    `
-  }
-
-  _getPlaceHoder(action) {
-    switch (action) {
-      case 'popup':
-      case 'goto':
-        return 'SCENE-100'
-      case 'link-open':
-      case 'link-move':
-        return 'http://www.hatiolab.com/'
-      default:
-        return ''
-    }
-  }
-
-  _getTargetList(action) {
-    switch (action) {
-      case 'data-toggle':
-      case 'data-tristate':
-      case 'data-set':
-      case 'value-set':
-        let ids = (this.scene && this.scene.ids.map(i => `#${i.key}`)) || []
-        ids.unshift('(self)')
-        return ids
-      case 'infoWindow':
-        return (
-          (this.scene &&
-            this.scene.ids
-              .filter(i => {
-                return this.scene.findById(i.key).get('type') == 'info-window'
-              })
-              .map(i => `${i.key}`)) ||
-          []
-        )
-      default:
-        return []
-    }
-  }
-
-  _onValueChange(e) {
-    var element = e.target
-    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 }))
-  }
-}
-
-customElements.define('property-event-hover', PropertyEventHover)

package/client/board-modeller/property-sidebar/effects/property-event-tap.js

@@ -1,146 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, html } from 'lit-element'
-
-import '@things-factory/i18n-base'
-
-import { EffectsSharedStyle } from './effects-shared-style'
-import '../../editors/things-editor-board-selector'
-import { convert } from './value-converter'
-
-class PropertyEventTap extends LitElement {
-  static get properties() {
-    return {
-      value: Object,
-      scene: Object
-    }
-  }
-
-  static get styles() {
-    return [EffectsSharedStyle]
-  }
-
-  constructor() {
-    super()
-
-    this.value = {}
-  }
-
-  firstUpdated() {
-    this.shadowRoot.addEventListener('change', this._onValueChange.bind(this))
-  }
-
-  render() {
-    var { action, value = '', target = '', pressed } = this.value
-
-    return html`
-      <input id="checkbox-pressed" type="checkbox" value-key="pressed" .checked=${pressed} />
-      <label for="checkbox-pressed" class="checkbox-label"> <i18n-msg msgid="label.pressed">pressed</i18n-msg> </label>
-
-      <label> <i18n-msg msgid="label.action">action</i18n-msg> </label>
-      <select id="tap-select" value-key="action" .value=${action || ''}>
-        <option value=""></option>
-        <option value="goto">go to target board</option>
-        <option value="link-open">open new window for target link</option>
-        <option value="link-move">move to target link</option>
-        <option value="route-page">route to page</option>
-        <option value="popup">popup target board</option>
-        <option value="modal-popup">modal popup target board</option>
-        <option value="close-scene">close current board</option>
-        <option value="infoWindow">open infowindow</option>
-        <option value="toggle-info-window">toggle infowindow</option>
-        <option value="data-toggle">toggle(true/false) target component data</option>
-        <option value="data-tristate">tristate(0/1/2) target component data</option>
-        <option value="data-set">set value to target component data</option>
-        <option value="value-set">set value to target component value</option>
-      </select>
-
-      <label> <i18n-msg msgid="label.target">target</i18n-msg> </label>
-
-      ${action == 'goto' || action == 'popup'
-        ? html`
-            <things-editor-board-selector
-              value-key="target"
-              .value=${target}
-              custom-editor
-            ></things-editor-board-selector>
-          `
-        : html`
-            <input
-              value-key="target"
-              .value=${target}
-              list="target-list"
-              .placeholder="${this._getPlaceHoder(action)}"
-            />
-
-            <datalist id="target-list">
-              ${this._getTargetList(action).map(item => html` <option .value=${item}></option> `)}
-            </datalist>
-          `}
-      ${action == 'data-set' || action == 'value-set'
-        ? html`
-            <label> <i18n-msg msgid="label.value">value</i18n-msg> </label>
-            <things-editor-data value-key="value" .value=${value} custom-editor fullwidth></things-editor-data>
-          `
-        : html``}
-    `
-  }
-
-  _getPlaceHoder(action) {
-    switch (action) {
-      case 'popup':
-      case 'goto':
-        return 'SCENE-100'
-      case 'link-open':
-      case 'link-move':
-        return 'http://www.hatiolab.com/'
-      default:
-        return ''
-    }
-  }
-
-  _getTargetList(action) {
-    switch (action) {
-      case 'data-toggle':
-      case 'data-tristate':
-      case 'data-set':
-      case 'value-set':
-        let ids = (this.scene && this.scene.ids.map(i => `#${i.key}`)) || []
-        ids.unshift('(self)')
-        return ids
-      case 'infoWindow':
-      case 'toggle-info-window':
-        return (
-          (this.scene &&
-            this.scene.ids
-              .filter(i => {
-                return this.scene.findById(i.key).get('type') == 'info-window'
-              })
-              .map(i => `${i.key}`)) ||
-          []
-        )
-      default:
-        return []
-    }
-  }
-
-  _onValueChange(e) {
-    var element = e.target
-    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 }))
-  }
-}
-
-customElements.define('property-event-tap', PropertyEventTap)

package/client/board-modeller/property-sidebar/effects/property-event.js

@@ -1,72 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, html } from 'lit-element'
-
-import '@things-factory/i18n-base'
-import './property-event-hover'
-import './property-event-tap'
-
-import { PropertySharedStyle } from '../property-shared-style'
-import { convert } from './value-converter'
-
-class PropertyEvent extends LitElement {
-  static get properties() {
-    return {
-      value: Object,
-      scene: Object
-    }
-  }
-
-  static get styles() {
-    return [PropertySharedStyle]
-  }
-
-  constructor() {
-    super()
-
-    this.value = {}
-  }
-
-  firstUpdated() {
-    this.shadowRoot.addEventListener('change', this._onValueChange.bind(this))
-  }
-
-  render() {
-    return html`
-      <fieldset>
-        <legend>
-          <title-with-help msgid="label.hover-event" topic="board-modeller/effects/hover-event"></title-with-help>
-        </legend>
-
-        <property-event-hover value-key="hover" .scene=${this.scene} .value=${this.value.hover || {}}>
-        </property-event-hover>
-      </fieldset>
-
-      <fieldset>
-        <legend><title-with-help msgid="label.tap-event" topic="board-modeller/effects/tap-event"></title-with-help></legend>
-
-        <property-event-tap value-key="tap" .scene=${this.scene} .value=${this.value.tap || {}}> </property-event-tap>
-      </fieldset>
-    `
-  }
-
-  _onValueChange(e) {
-    var element = e.target
-    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 }))
-  }
-}
-
-customElements.define('property-event', PropertyEvent)