@operato/board 0.2.44 → 0.2.48

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

@@ -0,0 +1,84 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './property-animation'
+import '@material/mwc-icon'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators'
+
+import { Properties, Scene } from '@hatiolab/things-scene'
+
+import { PropertySharedStyle } from '../property-shared-style'
+import { convert } from './value-converter'
+
+@customElement('property-animations')
+class PropertyAnimations extends LitElement {
+  static styles = [
+    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;
+      }
+    `
+  ]
+
+  @property({ type: Object }) value?: Properties
+  @property({ type: Object }) scene!: Scene
+
+  @state() _expanded: boolean = false
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))
+  }
+
+  render() {
+    const value = this.value || {}
+
+    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=${() => {
+              this._expanded = !this._expanded
+            }}
+            >${this._expanded ? 'expand_less' : 'expand_more'}</mwc-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

@@ -0,0 +1,133 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@operato/input/dist/src/ox-input-data'
+
+import { LitElement, html } from 'lit'
+import { Properties, Scene } from '@hatiolab/things-scene'
+import { customElement, property } from 'lit/decorators'
+
+import { EffectsSharedStyle } from './effects-shared-style'
+import { convert } from './value-converter'
+
+@customElement('property-event-hover')
+class PropertyEventHover 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() {
+    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>
+            <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">
+        <i18n-msg msgid="label.restore-on-leave">restore on leave</i18n-msg>
+      </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) {
+    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: 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

@@ -0,0 +1,129 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@operato/input/dist/src/ox-input-data'
+
+import { LitElement, html } from 'lit'
+import { Properties, Scene } from '@hatiolab/things-scene'
+import { customElement, property } from 'lit/decorators'
+
+import { EffectsSharedStyle } from './effects-shared-style'
+import { convert } from './value-converter'
+
+@customElement('property-event-tap')
+class PropertyEventTap 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() {
+    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>
+            <ox-input-data value-key="value" .value=${value} custom-editor fullwidth></ox-input-data>
+          `
+        : html``}
+    `
+  }
+
+  _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) {
+    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: 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.ts

@@ -0,0 +1,65 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './property-event-hover'
+import './property-event-tap'
+
+import { html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators'
+
+import { Properties, Scene } from '@hatiolab/things-scene'
+
+import { PropertySharedStyle } from '../property-shared-style'
+import { convert } from './value-converter'
+
+@customElement('property-event')
+class PropertyEvent extends LitElement {
+  static styles = [PropertySharedStyle]
+
+  @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`
+      <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=${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=${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

@@ -0,0 +1,114 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@things-factory/modeller-ui/client/editors/things-editor-color'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators'
+
+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>
+ */
+
+@customElement('property-shadow')
+export default 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'],
+      things-editor-color {
+        grid-column: span 7;
+      }
+      input[type='number'] {
+        border: var(--property-sidebar-fieldset-border);
+      }
+
+      .icon-only-label {
+        grid-column: span 3;
+        background: url(/assets/images/icon-properties-label.png) 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> <i18n-msg msgid="label.shadowOffsetX">offset-X</i18n-msg> </label>
+
+      <input type="number" value-key="left" .value=${value.left} />
+
+      <label> <i18n-msg msgid="label.shadowOffsetY">offset-Y</i18n-msg> </label>
+
+      <input type="number" value-key="top" .value=${value.top} />
+
+      <label> <i18n-msg msgid="label.shadowSize">Size</i18n-msg> </label>
+
+      <input type="number" value-key="blurSize" .value=${value.blurSize} />
+
+      <label class="icon-only-label color"></label>
+
+      <things-editor-color value-key="color" .value=${value.color}> </things-editor-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

@@ -0,0 +1,26 @@
+export function convert(element: any) {
+  switch (element.tagName) {
+    case 'THINGS-EDITOR-ANGLE-INPUT':
+      return Number(element.radian) || 0
+
+    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
+  }
+}