@operato/property-panel 9.0.0-beta.14

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

@@ -0,0 +1,74 @@
+/**
+ * @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>
+          <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/property-panel/effects/property-event-hover.ts

@@ -0,0 +1,212 @@
+/**
+ * @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 { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'
+
+import { convert } from './value-converter.js'
+
+const SETS_ACTION = ['data-set', 'partial-data-set', 'value-set', 'partial-value-set']
+
+export class PropertyEventHover extends LitElement {
+  static styles = [
+    PropertyGridStyles,
+    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`
+      <div class="property-grid">
+        <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
+                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 property-full-bleed"
+                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.restore-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
+    }
+
+    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

@@ -0,0 +1,269 @@
+/**
+ * @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.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
+                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 property-full-bleed"
+                  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 }))
+  }
+}

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

@@ -0,0 +1,73 @@
+/**
+ * @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 { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'
+
+import { PropertyEventHover } from './property-event-hover.js'
+import { PropertyEventTap } from './property-event-tap.js'
+import { convert } from './value-converter.js'
+
+export class PropertyEvent extends ScopedElementsMixin(LitElement) {
+  static styles = [PropertyGridStyles]
+
+  @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="board-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="board-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 }))
+  }
+}