@operato/process 1.1.5 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/process",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "Webcomponent for business process modeling following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -111,5 +111,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "86483763adb4972ed03daad933ef9562140e1480"
+  "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>
             `

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

@@ -9,17 +9,15 @@ import '@operato/i18n/ox-i18n.js'
 import '@operato/help/ox-title-with-help.js'
 
 import { css, html } from 'lit'
-import { property } from 'lit/decorators.js'
+import { property, state } from 'lit/decorators.js'
 
 import { BOUNDS, Component, Properties } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 
 import { AbstractProperty } from '../abstract-property'
-import { PropertyShadow } from '../effects/property-shadow.js'
 import { PropertySharedStyle } from '../property-shared-style'
 import { BoxPaddingEditorStyles } from './box-padding-editor-styles'
 
-export class PropertyShapes extends ScopedElementsMixin(AbstractProperty) {
+export class PropertyShapes extends AbstractProperty {
   static styles = [
     PropertySharedStyle,
     BoxPaddingEditorStyles,
@@ -138,16 +136,12 @@ export class PropertyShapes extends ScopedElementsMixin(AbstractProperty) {
   @property({ type: Object }) bounds: BOUNDS | null = null
   @property({ type: Array }) selected: Component[] = []
 
+  @state() private _3dExpanded: boolean = false
+
   firstUpdated() {
     this.renderRoot.addEventListener('change', this._onValueChange.bind(this))
   }
 
-  static get scopedElements() {
-    return {
-      'process-property-shadow': PropertyShadow
-    }
-  }
-
   render() {
     const value = this.value || {}
 
@@ -160,18 +154,45 @@ export class PropertyShapes extends ScopedElementsMixin(AbstractProperty) {
                 <input value-key="id" .value=${value.id || ''} />
               `
             : html``}
+          ${this._isClassIdentifiable(this.selected)
+            ? html`
+                <label> <ox-i18n msgid="label.class">Class</ox-i18n> </label>
+                <input value-key="class" .value=${value.class || ''} />
+              `
+            : html``}
           ${this._hasTextProperty(this.selected)
             ? html`
                 <label> <ox-i18n msgid="label.text">Text</ox-i18n> </label>
                 <input value-key="text" .value=${value.text || ''} />
+                <label> <ox-i18n msgid="label.text-format">Text Format</ox-i18n> </label>
+                <input value-key="textFormat" .value=${value.textFormat || ''} list="format-list" />
+                <datalist id="format-list">
+                  <option value="#,###."></option>
+                  <option value="#,###.#"></option>
+                  <option value="#,###.0"></option>
+                  <option value="#,##0.#"></option>
+                  <option value="#,##0.0"></option>
+                  <option value="#,##0.0%"></option>
+                </datalist>
+              `
+            : html``}
+          ${this._hasProperties(this.selected)
+            ? html`
+                <div class="checkbox-row">
+                  <input id="checkbox-hidden" value-key="hidden" type="checkbox" .checked=${value.hidden} />
+                  <label for="checkbox-hidden"> <ox-i18n msgid="label.item-hidden">Item Hidden</ox-i18n> </label>
+
+                  <input id="checkbox-locked" value-key="locked" type="checkbox" .checked=${value.locked} />
+                  <label for="checkbox-locked"> <ox-i18n msgid="label.locked">Locked</ox-i18n> </label>
+                </div>
               `
             : html``}
         </div>
       </fieldset>
 
-      ${this.selected.length && this.selected[0].isRootModel()
+      ${!this._isLine(this.selected)
         ? html`
-            <fieldset class="icon-label unit">
+            <fieldset class="icon-label unit ratio">
               <legend>
                 <ox-title-with-help topic="process-modeller/shapes/size" msgid="label.size">size</ox-title-with-help>
               </legend>
@@ -181,20 +202,48 @@ export class PropertyShapes extends ScopedElementsMixin(AbstractProperty) {
                 <input type="number" value-key="bounds.width" .value=${this.bounds?.width} />
                 <label class="height"> <ox-i18n msgid="label.height">height</ox-i18n> </label>
                 <input type="number" value-key="bounds.height" .value=${this.bounds?.height} />
+
+                ${this.selected.length && this.selected[0].isRootModel()
+                  ? html``
+                  : html`
+                      <label class="rotate"> <ox-i18n msgid="label.rotate">rotate</ox-i18n> </label>
+                      <ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
+                    `}
               </div>
             </fieldset>
           `
-        : html`
-            <fieldset>
+        : html``}
+      ${this._is3dish(this.selected)
+        ? html`
+            <fieldset class="icon-label unit ratio" collapsable ?collapsed=${!this._3dExpanded}>
               <legend>
-                <ox-title-with-help topic="process-modeller/effects/shadow" msgid="label.shadow"
-                  >shadow</ox-title-with-help
+                <ox-title-with-help topic="process-modeller/shapes/3dish" msgid="label.3dish">3D</ox-title-with-help>
+                <mwc-icon
+                  @click=${(e: Event) => {
+                    this._3dExpanded = !this._3dExpanded
+                  }}
+                  >${this._3dExpanded ? 'expand_less' : 'expand_more'}</mwc-icon
                 >
               </legend>
 
-              <process-property-shadow value-key="shadow" .value=${value.shadow || {}}> </process-property-shadow>
+              <div class="property-grid">
+                <label class="zPos"> <ox-i18n msgid="label.z-pos">pos. Z</ox-i18n> </label>
+                <input type="number" value-key="zPos" .value=${value.zPos} />
+                <label class="depth"> <ox-i18n msgid="label.depth">depth</ox-i18n> </label>
+                <input type="number" value-key="depth" .value=${value.depth} />
+
+                <label class="rotationX"> <ox-i18n msgid="label.rotation-x">rot. X</ox-i18n> </label>
+                <ox-input-angle value-key="rotationX" .radian=${value.rotationX}> </ox-input-angle>
+
+                <label class="rotationY"> <ox-i18n msgid="label.rotation-y">rot. Y</ox-i18n> </label>
+                <ox-input-angle value-key="rotationY" .radian=${value.rotationY}> </ox-input-angle>
+
+                <label class="rotationZ"> <ox-i18n msgid="label.rotation-z">rot. Z</ox-i18n> </label>
+                <ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
+              </div>
             </fieldset>
-          `}
+          `
+        : html``}
       ${this._hasTextProperty(this.selected)
         ? html`
             <fieldset>
@@ -311,6 +360,12 @@ export class PropertyShapes extends ScopedElementsMixin(AbstractProperty) {
     return true
   }
 
+  _hasProperties(selected: Component[]) {
+    if (!selected || selected.length == 0 || (selected[0] && selected[0].isLayer && selected[0].isLayer())) return false
+
+    return true
+  }
+
   _isIdentifiable(selected: Component[]) {
     if (!selected || selected.length == 0 || selected.length > 1 || (selected[0].isLayer && selected[0].isLayer()))
       return false
@@ -318,9 +373,21 @@ export class PropertyShapes extends ScopedElementsMixin(AbstractProperty) {
     return true
   }
 
+  _isClassIdentifiable(selected: Component[]) {
+    if (!selected || (selected[0] && selected[0].isLayer())) return false
+
+    return true
+  }
+
   _isLine(selected: Component[]) {
     if (!selected || !(selected[0] && selected[0].isLine())) return false
 
     return true
   }
+
+  _is3dish(selected: Component[]) {
+    if (!selected || !(selected[0] && selected[0].is3dish())) return false
+
+    return true
+  }
 }