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

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

@@ -1,73 +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 { ScopedElementsMixin } from '@open-wc/scoped-elements'
-
-import { Properties, Scene } from '@hatiolab/things-scene'
-import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'
-
-import { PropertyAnimation } from './property-animation.js'
-import { convert } from './value-converter.js'
-
-export class PropertyAnimations extends ScopedElementsMixin(LitElement) {
-  static styles = [PropertyGridStyles]
-
-  @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
-          @click=${() => {
-            this._expanded = !this._expanded
-          }}
-        >
-          <ox-title-with-help topic="board-modeller/effects/animation" msgid="label.animation"
-            >animation</ox-title-with-help
-          >
-          <md-icon>${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/property-panel/effects/property-event-hover-emphasize.ts

@@ -1,74 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@operato/i18n/ox-i18n.js'
-import '@operato/input/ox-input-color.js'
-
-import { css, html, LitElement } from 'lit'
-import { property } from 'lit/decorators.js'
-
-import { Properties } from '@hatiolab/things-scene'
-import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'
-
-import { convert } from './value-converter.js'
-
-/**
- * 컴포넌트의 강조 속성을 편집하는 element
- *
- * Example:
- *  <property-event-hover-emphasize
- *    @change="${e => { this.emphasize = e.target.value }}"
- *    value="${this.emphasize}"
- *  ></property-event-hover-emphasize>
- */
-
-export class PropertyEventHoverEmphasize extends LitElement {
-  static styles = [
-    PropertyGridStyles,
-    css`
-      :host {
-        display: flex;
-      }
-    `
-  ]
-
-  @property({ type: Object }) value?: Properties
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))
-  }
-
-  render() {
-    const { lineWidth, strokeStyle, fillStyle } = this.value || {}
-
-    return html`
-      <div class="property-grid">
-        <label class="icon-only-label color"><md-icon>format_color_fill</md-icon></label>
-        <ox-input-color value-key="fillStyle" .value=${fillStyle}> </ox-input-color>
-
-        <label class="icon-only-label color"><md-icon>border_color</md-icon></label>
-        <ox-input-color value-key="strokeStyle" .value=${strokeStyle}> </ox-input-color>
-
-        <label> <ox-i18n msgid="label.emphasize-line-width">line width</ox-i18n> </label>
-        <input type="number" value-key="lineWidth" .value=${lineWidth} />
-      </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 }))
-  }
-}

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

@@ -1,255 +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, nothing } from 'lit'
-import { property } from 'lit/decorators.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-
-import { Properties, Scene } from '@hatiolab/things-scene'
-import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'
-
-import { convert } from './value-converter.js'
-import { PropertyEventHoverEmphasize } from './property-event-hover-emphasize.js'
-
-const SETS_ACTION = ['data-set', 'partial-data-set', 'value-set', 'partial-value-set']
-
-export class PropertyEventHover extends ScopedElementsMixin(LitElement) {
-  static styles = [
-    PropertyGridStyles,
-    css`
-      property-event-hover-emphasize {
-        padding-bottom: var(--spacing-large);
-      }
-
-      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
-
-  private useEmphasize: boolean = false
-
-  static get scopedElements() {
-    return {
-      'property-event-hover-emphasize': PropertyEventHoverEmphasize
-    }
-  }
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))
-  }
-
-  render() {
-    var { action, value = '', target = '', emphasize, restore } = this.value || {}
-
-    if (emphasize === true) {
-      emphasize = {
-        distance: 0,
-        animation: false
-      }
-    } else if (emphasize === false) {
-      emphasize = null
-    }
-
-    this.useEmphasize = !!emphasize
-
-    return html`
-      <div class="property-grid">
-        <input id="checkbox-use-emphasize" type="checkbox" value-key="use-emphasize" .checked=${!!this.useEmphasize} />
-        <label for="checkbox-use-emphasize" class="checkbox-label">
-          <ox-i18n msgid="label.emphasize">emphasize</ox-i18n>
-        </label>
-
-        ${!!this.useEmphasize
-          ? html`
-              <property-event-hover-emphasize
-                id="emphasize"
-                class="fullwidth"
-                value-key="emphasize"
-                .value=${emphasize}
-              ></property-event-hover-emphasize>
-            `
-          : nothing}
-
-        <label> <ox-i18n msgid="label.hover-action">hover 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
-                class="custom-editor"
-                value-key="target"
-                .value=${target}
-              ></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
-                class="custom-editor fullwidth"
-                value-key="value"
-                .value=${value}
-                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.reset-on-leave">restore on leave</ox-i18n>
-        </label>
-      </div>
-    `
-  }
-
-  _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
-    }
-
-    if (key == 'use-emphasize') {
-      this.value = {
-        ...this.value,
-        emphasize: (element as HTMLInputElement).checked ? {} : null
-      }
-    } else {
-      this.value = {
-        ...this.value,
-        [key]: convert(element)
-      }
-    }
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-}

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

@@ -1,269 +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, state } from 'lit/decorators.js'
-
-import { Properties, Scene } from '@hatiolab/things-scene'
-import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'
-
-import { scenarios } from '../../graphql/scenario.js'
-import { playlists } from '../../graphql/play-group.js'
-import { convert } from './value-converter.js'
-
-const SETS_ACTION = ['data-set', 'partial-data-set', 'value-set', 'partial-value-set', 'start-scenario', 'run-scenario']
-
-export class PropertyEventTap extends LitElement {
-  static styles = [
-    PropertyGridStyles,
-    css`
-      :host {
-        display: flex;
-      }
-    `
-  ]
-
-  @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`
-      <div class="property-grid">
-        <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.tap-action">tap 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
-                class="custom-editor"
-                value-key="target"
-                .value=${target}
-              ></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
-                  class="custom-editor fullwidth"
-                  value-key="value"
-                  .value=${value}
-                  fullwidth
-                ></ox-input-data>
-              `
-            : html``}
-      </div>
-    `
-  }
-
-  _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 }))
-  }
-}