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

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

@@ -1,146 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@operato/input/ox-input-angle.js'
-import '@operato/i18n/ox-i18n.js'
-
-import { html, LitElement } from 'lit'
-import { property, query } from 'lit/decorators.js'
-
-import { Properties, Scene } from '@hatiolab/things-scene'
-
-import { EffectsSharedStyle } from './effects-shared-style.js'
-import { convert } from './value-converter.js'
-
-/**
- * 컴포넌트의 animation 속성을 편집하는 element
-
-Example:
-
-    <property-animation .value=${animation}>
-    </property-animation>
-*/
-
-export class PropertyAnimation extends LitElement {
-  static styles = [EffectsSharedStyle]
-
-  @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`
-      <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>
-    `
-  }
-
-  _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 }))
-  }
-}

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

@@ -1,93 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/web/icon/icon.js'
-import '@operato/help/ox-title-with-help.js'
-
-import { css, html, LitElement } from 'lit'
-import { property, state } from 'lit/decorators.js'
-
-import { Properties, Scene } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-
-import { PropertySharedStyle } from '../property-shared-style.js'
-import { PropertyAnimation } from './property-animation.js'
-import { convert } from './value-converter.js'
-
-export class PropertyAnimations extends ScopedElementsMixin(LitElement) {
-  static styles = [
-    PropertySharedStyle,
-    css`
-      fieldset[collapsable] legend {
-        box-sizing: border-box;
-        width: 100%;
-      }
-
-      fieldset[collapsable] legend md-icon {
-        float: right;
-        font-size: medium;
-        margin: 0;
-        cursor: pointer;
-      }
-
-      fieldset[collapsable][collapsed] > :not(legend) {
-        display: none;
-      }
-    `
-  ]
-
-  @property({ type: Object }) value?: Properties
-  @property({ type: Object }) scene!: Scene
-
-  @state() _expanded: boolean = false
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))
-  }
-
-  static get scopedElements() {
-    return {
-      'property-animation': PropertyAnimation
-    }
-  }
-
-  render() {
-    const value = this.value || {}
-
-    return html`
-      <fieldset collapsable ?collapsed=${!this._expanded}>
-        <legend>
-          <ox-title-with-help topic="board-modeller/effects/animation" msgid="label.animation"
-            >animation</ox-title-with-help
-          >
-          <md-icon
-            @click=${() => {
-              this._expanded = !this._expanded
-            }}
-            >${this._expanded ? 'expand_less' : 'expand_more'}</md-icon
-          >
-        </legend>
-
-        <property-animation value-key="oncreate" .scene=${this.scene} .value=${value.oncreate || {}}>
-        </property-animation>
-      </fieldset>
-    `
-  }
-
-  _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 }))
-  }
-}

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

@@ -1,200 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@operato/input/ox-input-data.js'
-import '@operato/i18n/ox-i18n.js'
-
-import { css, html, LitElement } from 'lit'
-import { property } from 'lit/decorators.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-
-import { Properties, Scene } from '@hatiolab/things-scene'
-
-import { EffectsSharedStyle } from './effects-shared-style.js'
-import { convert } from './value-converter'
-
-const SETS_ACTION = ['data-set', 'partial-data-set', 'value-set', 'partial-value-set']
-
-export class PropertyEventHover extends LitElement {
-  static styles = [
-    EffectsSharedStyle,
-    css`
-      datalist option.cursor-auto {
-        cursor: auto;
-      }
-
-      datalist option.cursor-pointer {
-        cursor: pointer;
-      }
-
-      datalist option.cursor-default {
-        cursor: default;
-      }
-
-      datalist option.cursor-move {
-        cursor: move;
-      }
-
-      datalist option.cursor-text {
-        cursor: text;
-      }
-
-      datalist option.cursor-wait {
-        cursor: wait;
-      }
-
-      datalist option.cursor-help {
-        cursor: help;
-      }
-
-      datalist option.cursor-crosshair {
-        cursor: crosshair;
-      }
-
-      datalist option.cursor-not-allowed {
-        cursor: not-allowed;
-      }
-
-      datalist option.cursor-grab {
-        cursor: grab;
-      }
-    `
-  ]
-
-  @property({ type: Object }) value?: Properties
-  @property({ type: Object }) scene?: Scene
-
-  firstUpdated() {
-    this.renderRoot.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">
-        <ox-i18n msgid="label.emphasize">emphasize</ox-i18n>
-      </label>
-
-      <label> <ox-i18n msgid="label.action">action</ox-i18n> </label>
-      <select id="tap-select" value-key="action" .value=${action || ''}>
-        <option value=""></option>
-        <option value="popup">popup target board</option>
-        <option value="info-window">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>
-        <option value="mouse-cursor">change mouse cursor to target style</option>
-      </select>
-
-      <label> <ox-i18n msgid="label.target">target</ox-i18n> </label>
-
-      ${action == 'popup'
-        ? html`
-            <ox-editor-board-selector value-key="target" .value=${target} custom-editor></ox-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(
-                ({ value, description, class: clazz }) =>
-                  html` <option .value=${value} class=${ifDefined(clazz)}>${description}</option> `
-              )}
-            </datalist>
-          `}
-      ${SETS_ACTION.indexOf(action) != -1
-        ? html`
-            <label> <ox-i18n msgid="label.value">value</ox-i18n> </label>
-            <ox-input-data value-key="value" .value=${value} custom-editor fullwidth></ox-input-data>
-          `
-        : html``}
-
-      <input id="checkbox-restore" type="checkbox" value-key="restore" .checked=${restore} />
-      <label for="checkbox-restore" class="checkbox-label">
-        <ox-i18n msgid="label.restore-on-leave">restore on leave</ox-i18n>
-      </label>
-    `
-  }
-
-  _getPlaceHoder(action: string) {
-    switch (action) {
-      case 'popup':
-      case 'goto':
-        return 'SCENE-100'
-      case 'link-open':
-      case 'link-move':
-        return 'http://www.hatiolab.com/'
-      default:
-        return ''
-    }
-  }
-
-  _getTargetList(action: string): { value: string; description?: string; class?: string }[] {
-    switch (action) {
-      case 'data-toggle':
-      case 'data-tristate':
-      case 'data-set':
-      case 'value-set':
-      case 'partial-data-set':
-      case 'partial-value-set':
-        let ids =
-          (this.scene &&
-            this.scene.ids.map(i => {
-              const id = i.key
-              return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }
-            })) ||
-          []
-        ids.unshift({ value: '(self)', description: 'self component' })
-        return ids
-
-      case 'info-window':
-        return (
-          (this.scene &&
-            this.scene.ids
-              .filter(i => {
-                return this.scene!.findById(i.key).get('type') == 'info-window'
-              })
-              .map(i => {
-                const id = i.key
-                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }
-              })) ||
-          []
-        )
-
-      case 'mouse-cursor':
-        return ['auto', 'pointer', 'default', 'move', 'text', 'wait', 'help', 'crosshair', 'not-allowed', 'grab'].map(
-          style => {
-            return { value: style, class: `cursor-${style}` }
-          }
-        )
-
-      default:
-        return []
-    }
-  }
-
-  _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 }))
-  }
-}

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

@@ -1,251 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@operato/input/ox-input-data.js'
-import '@operato/i18n/ox-i18n.js'
-
-import { html, LitElement } from 'lit'
-import { property, state } from 'lit/decorators.js'
-
-import { Properties, Scene } from '@hatiolab/things-scene'
-
-import { scenarios } from '../../../graphql/scenario'
-import { playlists } from '../../../graphql/play-group'
-import { EffectsSharedStyle } from './effects-shared-style'
-import { convert } from './value-converter'
-
-const SETS_ACTION = ['data-set', 'partial-data-set', 'value-set', 'partial-value-set', 'start-scenario', 'run-scenario']
-
-export class PropertyEventTap extends LitElement {
-  static styles = [EffectsSharedStyle]
-
-  @property({ type: Object }) value?: Properties
-  @property({ type: Object }) scene?: Scene
-
-  @state() scenarios: { value: string; description: string }[] = []
-  @state() playlists: { value: string; description: string }[] = []
-  @state() targetList: { value: string; description: string }[] = []
-
-  async firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))
-  }
-
-  render() {
-    var { action, value = '', target = '', pressed, options } = this.value || {}
-    var { input = '(self)', output = true } = options || {}
-
-    return html`
-      <input id="checkbox-pressed" type="checkbox" value-key="pressed" .checked=${pressed} />
-      <label for="checkbox-pressed" class="checkbox-label"> <ox-i18n msgid="label.pressed">pressed</ox-i18n> </label>
-
-      <label> <ox-i18n msgid="label.action">action</ox-i18n> </label>
-      <select
-        id="tap-select"
-        value-key="action"
-        .value=${action || ''}
-        @change=${async (e: Event) => {
-          if ((e.target as HTMLSelectElement).value.includes('scenario')) {
-            this.scenarios = (await scenarios()).map(({ name, description }) => {
-              return { value: name, description }
-            })
-          } else if ((e.target as HTMLSelectElement).value == 'goto-playlist') {
-            this.playlists = (await playlists()).map(({ name, description }) => {
-              return { value: name, description }
-            })
-          }
-        }}
-      >
-        <option value=""></option>
-        <option value="goto">go to target board</option>
-        <option value="goto-playlist">go to target playlist</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-spreading">forcely execute data spreading of target component</option>
-        <option value="data-set">set value to target component data</option>
-        <option value="partial-data-set">set partial value to target component data</option>
-        <option value="value-set">set value to target component value</option>
-        <option value="partial-value-set">set partial value to target component value</option>
-        <option value="start-scenario">start the given scenario</option>
-        <option value="run-scenario">run the given scenario</option>
-        <option value="export-data">export data</option>
-        <option value="import-data">import data</option>
-      </select>
-
-      <label> <ox-i18n msgid="label.target">target</ox-i18n> </label>
-
-      ${action === 'goto' || action?.includes('popup')
-        ? html`
-            <ox-editor-board-selector value-key="target" .value=${target} custom-editor></ox-editor-board-selector>
-          `
-        : html`
-            <input
-              value-key="target"
-              .value=${target}
-              list="target-list"
-              .placeholder=${this._getPlaceHoder(action)}
-              @focusin=${() => {
-                this.targetList = this._getTargetList(action)
-              }}
-            />
-
-            <datalist id="target-list">
-              ${this.targetList.map(
-                ({ value, description }) => html` <option .value=${value}>${description}</option> `
-              )}
-            </datalist>
-          `}
-      ${action === 'goto' || action === 'goto-playlist' || action?.includes('popup')
-        ? html`
-            <label for="input"> <ox-i18n msgid="label.input-data">input</ox-i18n> </label>
-            <input
-              id="input"
-              value-key="input"
-              .value=${input}
-              list="input-list"
-              @focusin=${() => {
-                this.targetList = this._getInputList(action)
-              }}
-            />
-            <datalist id="input-list">
-              ${this.targetList.map(
-                ({ value, description }) => html` <option .value=${value}>${description}</option> `
-              )}
-            </datalist>
-            ${
-              /* currently 'goto' does not support returning result */
-              action?.includes('popup')
-                ? html` <input id="checkbox-output" type="checkbox" value-key="output" .checked=${output} />
-                    <label for="checkbox-output" class="checkbox-label">
-                      <ox-i18n msgid="label.will-get-return">will-get-return</ox-i18n>
-                    </label>`
-                : html``
-            }
-          `
-        : SETS_ACTION.indexOf(action) != -1
-          ? html`
-              <label> <ox-i18n msgid="label.value">value</ox-i18n> </label>
-              <ox-input-data value-key="value" .value=${value} custom-editor fullwidth></ox-input-data>
-            `
-          : html``}
-    `
-  }
-
-  _getPlaceHoder(action: string) {
-    switch (action) {
-      case 'link-open':
-      case 'link-move':
-        return 'http://www.hatiolab.com/'
-      case 'export-data':
-        return 'abc.xlsx'
-      default:
-        return ''
-    }
-  }
-
-  _getTargetList(action: string): { value: string; description: string }[] {
-    switch (action) {
-      case 'data-toggle':
-      case 'data-tristate':
-      case 'data-set':
-      case 'value-set':
-      case 'popup':
-      case 'modal-popup':
-      case 'data-spreading':
-        let ids =
-          (this.scene &&
-            this.scene.ids.map(i => {
-              const id = i.key
-              return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }
-            })) ||
-          []
-        ids.unshift({ value: '(self)', description: 'self component' })
-        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 => {
-                const id = i.key
-                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }
-              })) ||
-          []
-        )
-      case 'start-scenario':
-      case 'run-scenario':
-        return this.scenarios
-      case 'goto-playlist':
-        return this.playlists
-      case 'export-data':
-      default:
-        return []
-    }
-  }
-
-  _getInputList(action: string): { value: string; description: string }[] {
-    switch (action) {
-      case 'popup':
-      case 'modal-popup':
-      case 'data-spreading':
-      case 'goto':
-      case 'goto-playlist':
-        let ids =
-          (this.scene &&
-            this.scene.ids.map(i => {
-              const id = i.key
-              return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }
-            })) ||
-          []
-        ids.unshift({ value: '(self)', description: 'self component' })
-        return ids
-      default:
-        return []
-    }
-  }
-
-  _onValueChange(e: Event) {
-    var element = e.target as HTMLElement
-    var key = element.getAttribute('value-key')
-
-    if (!key) {
-      return
-    }
-
-    if (key === 'input' || key === 'output') {
-      var { options = {} } = this.value || {}
-
-      this.value = {
-        ...this.value,
-        options: {
-          ...options,
-          [key]: convert(element)
-        }
-      }
-    } else {
-      this.value = {
-        ...this.value,
-        [key]: convert(element)
-      }
-    }
-
-    var { action } = this.value
-    if (action !== 'goto' && action !== 'goto-playlist' && !action?.includes('popup')) {
-      /* clear unused options */
-      delete this.value.options
-    }
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-}