@operato/process 1.1.4 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/process",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "Webcomponent for business process modeling following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -52,15 +52,15 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.1.3",
-    "@operato/app": "^1.1.4",
-    "@operato/data-grist": "^1.1.4",
-    "@operato/font": "^1.1.4",
+    "@operato/app": "^1.1.5",
+    "@operato/data-grist": "^1.1.5",
+    "@operato/font": "^1.1.5",
     "@operato/graphql": "^1.1.1",
     "@operato/i18n": "^1.1.4",
-    "@operato/input": "^1.1.4",
+    "@operato/input": "^1.1.5",
     "@operato/markdown": "^1.1.1",
     "@operato/popup": "^1.1.1",
-    "@operato/property-editor": "^1.1.4",
+    "@operato/property-editor": "^1.1.5",
     "@operato/styles": "^1.1.1",
     "@operato/utils": "^1.1.1",
     "@polymer/paper-dropdown-menu": "^3.2.0",
@@ -111,5 +111,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "5e8f9e367988de6a19794b287c616afca11d9092"
+  "gitHead": "a9107bdc1b3e5e0cb0a345f45d41a4077a515bfe"
 }

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

@@ -13,6 +13,7 @@ import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 
 import { AbstractProperty } from '../abstract-property.js'
 import { PropertySharedStyle } from '../property-shared-style.js'
+import { PropertyEvent } from './property-event.js'
 import { PropertyShadow } from './property-shadow.js'
 
 export class PropertyEffects extends ScopedElementsMixin(AbstractProperty) {
@@ -27,7 +28,8 @@ export class PropertyEffects extends ScopedElementsMixin(AbstractProperty) {
 
   static get scopedElements() {
     return {
-      'process-property-shadow': PropertyShadow
+      'process-property-shadow': PropertyShadow,
+      'process-property-event': PropertyEvent
     }
   }
 
@@ -42,6 +44,9 @@ export class PropertyEffects extends ScopedElementsMixin(AbstractProperty) {
 
         <process-property-shadow value-key="shadow" .value=${value.shadow || {}}> </process-property-shadow>
       </fieldset>
+
+      <process-property-event value-key="event" .scene=${this.scene} .value=${value.event || {}}>
+      </process-property-event>
     `
   }
 }

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

@@ -0,0 +1,140 @@
+/**
+ * @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 } from 'lit/decorators.js'
+
+import { Properties, Scene } from '@hatiolab/things-scene'
+
+import { EffectsSharedStyle } from './effects-shared-style.js'
+import { convert } from './value-converter'
+
+export 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">
+        <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>
+      </select>
+
+      <label> <ox-i18n msgid="label.target">target</ox-i18n> </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(
+                ({ value, description }) => html` <option .value=${value}>${description}</option> `
+              )}
+            </datalist>
+          `}
+      ${action == 'data-set' || action == 'value-set'
+        ? 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 }[] {
+    switch (action) {
+      case 'data-toggle':
+      case 'data-tristate':
+      case 'data-set':
+      case '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 'infoWindow':
+        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') }
+              })) ||
+          []
+        )
+      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,208 @@
+/**
+ * @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'
+
+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 === 'start-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>
+      </select>
+
+      <label> <ox-i18n msgid="label.target">target</ox-i18n> </label>
+
+      ${action === 'goto' || action?.includes('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)}
+              @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``
+            }
+          `
+        : action === 'data-set' || action === 'value-set' || action === 'start-scenario' || action === 'run-scenario'
+        ? 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

@@ -0,0 +1,76 @@
+/**
+ * @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/property-sidebar.ts

@@ -12,6 +12,7 @@ import { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 import { ScrollbarStyles } from '@operato/styles'
 
+import { PropertyEffects } from './effects/effects.js'
 import { PropertyShapes } from './shapes/shapes.js'
 import { PropertySpecific } from './specifics/specifics.js'
 import { PropertyStyles } from './styles/styles.js'
@@ -96,6 +97,7 @@ export class PropertySidebar extends ScopedElementsMixin(LitElement) {
     return {
       'process-property-shape': PropertyShapes,
       'process-property-style': PropertyStyles,
+      'process-property-effect': PropertyEffects,
       'process-property-specific': PropertySpecific,
       'process-scene-inspector': SceneInspector
     }
@@ -114,6 +116,7 @@ export class PropertySidebar extends ScopedElementsMixin(LitElement) {
         <mwc-icon name="specific" ?selected=${tabName == 'specific'}>tune</mwc-icon>
         <mwc-icon name="shape" ?selected=${tabName == 'shape'}>format_shapes</mwc-icon>
         <mwc-icon name="style" ?selected=${tabName == 'style'}>palette</mwc-icon>
+        <mwc-icon name="effect" ?selected=${tabName == 'effect'}>movie_filter</mwc-icon>
         <mwc-icon name="inspector" ?selected=${tabName == 'inspector'}>visibility</mwc-icon>
       </div>
 
@@ -149,6 +152,10 @@ export class PropertySidebar extends ScopedElementsMixin(LitElement) {
               >
               </process-property-style>
             `,
+            effect: html`
+              <process-property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>
+              </process-property-effect>
+            `,
             inspector: html`
               <process-scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></process-scene-inspector>
             `