@operato/process 8.0.0-beta.0 → 8.0.0-beta.2

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

@@ -1,201 +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':
-      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 '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,212 +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 { 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() 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 }
-            })
-          }
-        }}
-      >
-        <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>
-        <option value="start-scenario">start the given scenario</option>
-        <option value="run-scenario">run the given scenario</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._getInputList(action)
-              }}
-            />
-
-            <datalist id="target-list">
-              ${this.targetList.map(
-                ({ value, description }) => html` <option .value=${value}>${description}</option> `
-              )}
-            </datalist>
-          `}
-      ${action === 'goto' || 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/'
-      default:
-        return ''
-    }
-  }
-
-  _getInputList(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':
-        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
-      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?.includes('popup')) {
-      /* clear unused options */
-      delete this.value.options
-    }
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-}

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

@@ -1,76 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@operato/help/ox-title-with-help.js'
-
-import { html, LitElement } from 'lit'
-import { property } from 'lit/decorators.js'
-
-import { Properties, Scene } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-
-import { PropertySharedStyle } from '../property-shared-style'
-import { PropertyEventHover } from './property-event-hover'
-import { PropertyEventTap } from './property-event-tap'
-import { convert } from './value-converter'
-
-export class PropertyEvent extends ScopedElementsMixin(LitElement) {
-  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-event-hover': PropertyEventHover,
-      'property-event-tap': PropertyEventTap
-    }
-  }
-
-  render() {
-    const value = this.value || {}
-
-    return html`
-      <fieldset>
-        <legend>
-          <ox-title-with-help
-            msgid="label.hover-event"
-            topic="process-modeller/effects/hover-event"
-          ></ox-title-with-help>
-        </legend>
-
-        <property-event-hover value-key="hover" .scene=${this.scene} .value=${value.hover || {}}>
-        </property-event-hover>
-      </fieldset>
-
-      <fieldset>
-        <legend>
-          <ox-title-with-help msgid="label.tap-event" topic="process-modeller/effects/tap-event"></ox-title-with-help>
-        </legend>
-
-        <property-event-tap value-key="tap" .scene=${this.scene} .value=${value.tap || {}}> </property-event-tap>
-      </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-shadow.ts

@@ -1,114 +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 { convert } from './value-converter'
-
-/**
- * 컴포넌트의 그림자 속성을 편집하는 element
- *
- * Example:
- *  <property-shadow
- *    @change="${e => { this.shadow = e.target.value }}"
- *    value="${this.shadow}"
- *  ></property-shadow>
- */
-
-export class PropertyShadow extends LitElement {
-  static styles = [
-    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[type='number'],
-      ox-input-color {
-        grid-column: span 7;
-      }
-      input[type='number'] {
-        border: var(--property-sidebar-fieldset-border);
-      }
-
-      .icon-only-label {
-        grid-column: span 3;
-        background: var(--url-icon-properties-label) no-repeat;
-        float: left;
-        margin: 0;
-        align-self: stretch;
-      }
-
-      .icon-only-label.color {
-        background-position: 100% -500px;
-      }
-    `
-  ]
-
-  @property({ type: Object }) value?: Properties
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))
-  }
-
-  render() {
-    const value = this.value || {}
-
-    return html`
-      <label> <ox-i18n msgid="label.shadowOffsetX">offset-X</ox-i18n> </label>
-
-      <input type="number" value-key="left" .value=${value.left} />
-
-      <label> <ox-i18n msgid="label.shadowOffsetY">offset-Y</ox-i18n> </label>
-
-      <input type="number" value-key="top" .value=${value.top} />
-
-      <label> <ox-i18n msgid="label.shadowSize">Size</ox-i18n> </label>
-
-      <input type="number" value-key="blurSize" .value=${value.blurSize} />
-
-      <label class="icon-only-label color"></label>
-
-      <ox-input-color value-key="color" .value=${value.color}> </ox-input-color>
-    `
-  }
-
-  _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/value-converter.ts

@@ -1,23 +0,0 @@
-export function convert(element: any) {
-  switch (element.tagName) {
-    case 'INPUT':
-      switch (element.type) {
-        case 'checkbox':
-          return element.checked
-        case 'number':
-          return Number(element.value) || 0
-        case 'text':
-          return String(element.value)
-      }
-      break
-
-    case 'PAPER-BUTTON':
-      return element.active
-
-    case 'PAPER-LISTBOX':
-      return element.selected
-
-    default:
-      return element.value
-  }
-}