@operato/board 1.0.0-beta.0 → 1.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.1",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -49,17 +49,17 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@operato/app": "^1.0.0-beta.0",
-    "@operato/data-grist": "^1.0.0-beta.0",
-    "@operato/font": "^1.0.0-beta.0",
-    "@operato/graphql": "^1.0.0-beta.0",
-    "@operato/i18n": "^1.0.0-beta.0",
-    "@operato/input": "^1.0.0-beta.0",
-    "@operato/markdown": "^1.0.0-beta.0",
-    "@operato/popup": "^1.0.0-beta.0",
-    "@operato/property-editor": "^1.0.0-beta.0",
-    "@operato/styles": "^1.0.0-beta.0",
-    "@operato/utils": "^1.0.0-beta.0",
+    "@operato/app": "^1.0.0-beta.1",
+    "@operato/data-grist": "^1.0.0-beta.1",
+    "@operato/font": "^1.0.0-beta.1",
+    "@operato/graphql": "^1.0.0-beta.1",
+    "@operato/i18n": "^1.0.0-beta.1",
+    "@operato/input": "^1.0.0-beta.1",
+    "@operato/markdown": "^1.0.0-beta.1",
+    "@operato/popup": "^1.0.0-beta.1",
+    "@operato/property-editor": "^1.0.0-beta.1",
+    "@operato/styles": "^1.0.0-beta.1",
+    "@operato/utils": "^1.0.0-beta.1",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
@@ -107,5 +107,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "06b7a224872643b4dfdd95efc83770ce96057bdf"
+  "gitHead": "cfa0be4c72d93b2bf3f851c09b5c62c6025edf0f"
 }

package/src/graphql/scenario.ts

@@ -0,0 +1,79 @@
+import gql from 'graphql-tag'
+
+import { client } from '@operato/graphql'
+
+export const scenarios = async (): Promise<{ name: string; description: string }[]> => {
+  var response = await client.query({
+    query: gql`
+      query {
+        scenarios {
+          items {
+            name
+            description
+          }
+        }
+      }
+    `
+  })
+
+  if (response.errors) {
+    return []
+  }
+
+  return response.data.scenarios.items
+}
+
+export const startScenario = async (
+  scenarioName: string,
+  instanceName: string,
+  variables: string | number | object
+) => {
+  if (!scenarioName) {
+    return
+  }
+
+  if (client) {
+    var response = await client.query({
+      query: gql`
+        mutation ($instanceName: String, $scenarioName: String!, $variables: Object) {
+          startScenario(instanceName: $instanceName, scenarioName: $scenarioName, variables: $variables) {
+            state
+            message
+            data
+          }
+        }
+      `,
+      variables: {
+        instanceName: instanceName,
+        scenarioName: scenarioName,
+        variables
+      }
+    })
+
+    return response?.data?.startScenario?.data
+  }
+}
+
+export const runScenario = async (scenarioName: string, variables: string | number | object) => {
+  if (!scenarioName) return
+
+  if (client) {
+    var response = await client.query({
+      query: gql`
+        mutation ($scenarioName: String!, $variables: Object) {
+          runScenario(scenarioName: $scenarioName, variables: $variables) {
+            state
+            message
+            data
+          }
+        }
+      `,
+      variables: {
+        scenarioName: scenarioName,
+        variables
+      }
+    })
+
+    return response?.data?.runScenario?.data
+  }
+}

package/src/modeller/property-sidebar/data-binding/data-binding-mapper.ts

@@ -8,10 +8,11 @@ import '@operato/input/ox-buttons-radio.js'
 import '@operato/input/ox-input-code.js'
 import '@operato/i18n/ox-i18n.js'
 
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { Properties, Scene } from '@hatiolab/things-scene'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
+import { Properties, Scene } from '@hatiolab/things-scene'
+
 export type Rule =
   | {
       map?: Properties
@@ -155,7 +156,7 @@ export default class DataBindingMapper extends LitElement {
     text: 'string',
     ref: 'string'
   }
-  @state() _componentIds: any[] = []
+  @state() _componentIds: { value: string; description: string }[] = []
 
   @query('#eval-editor') editor!: HTMLInputElement
   @query('#target-input') target!: HTMLInputElement
@@ -191,15 +192,24 @@ export default class DataBindingMapper extends LitElement {
         list="target-list"
         .value=${mapping.target || ''}
         @focusin=${() => {
-          if (!this.scene) this._componentIds = []
-          this._componentIds = this.scene!.ids.map(info => info.key).filter(id => !!id)
+          this._componentIds =
+            (this.scene &&
+              this.scene.ids.map(i => {
+                const id = i.key
+                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }
+              })) ||
+            []
         }}
       />
       <datalist id="target-list">
         <option value="(self)"></option>
         <option value="(key)"></option>
         ${this._componentIds.length
-          ? html` ${this._componentIds.map(id => html` <option value=${id}></option> `)} `
+          ? html`
+              ${this._componentIds.map(
+                ({ value, description }) => html` <option value=${value}>${description}</option> `
+              )}
+            `
           : html``}
       </datalist>
 

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

@@ -63,7 +63,9 @@ class PropertyEventHover extends LitElement {
             />
 
             <datalist id="target-list">
-              ${this._getTargetList(action).map(item => html` <option .value=${item}></option> `)}
+              ${this._getTargetList(action).map(
+                ({ value, description }) => html` <option .value=${value}>${description}</option> `
+              )}
             </datalist>
           `}
       ${action == 'data-set' || action == 'value-set'
@@ -93,14 +95,20 @@ class PropertyEventHover extends LitElement {
     }
   }
 
-  _getTargetList(action: string) {
+  _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 => `#${i.key}`)) || []
-        ids.unshift('(self)')
+        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 (
@@ -109,7 +117,10 @@ class PropertyEventHover extends LitElement {
               .filter(i => {
                 return this.scene!.findById(i.key).get('type') == 'info-window'
               })
-              .map(i => `${i.key}`)) ||
+              .map(i => {
+                const id = i.key
+                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }
+              })) ||
           []
         )
       default:

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

@@ -6,10 +6,11 @@ import '@operato/input/ox-input-data.js'
 import '@operato/i18n/ox-i18n.js'
 
 import { html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, 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'
 
@@ -20,7 +21,10 @@ class PropertyEventTap extends LitElement {
   @property({ type: Object }) value?: Properties
   @property({ type: Object }) scene?: Scene
 
-  firstUpdated() {
+  @state() scenarios: { value: string; description: string }[] = []
+  @state() targetList: { value: string; description: string }[] = []
+
+  async firstUpdated() {
     this.renderRoot.addEventListener('change', this._onValueChange.bind(this))
   }
 
@@ -32,7 +36,18 @@ class PropertyEventTap extends LitElement {
       <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 || ''}>
+      <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>
@@ -47,11 +62,13 @@ class PropertyEventTap extends LitElement {
         <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 == 'popup'
+      ${action === 'goto' || action === 'popup'
         ? html`
             <things-editor-board-selector
               value-key="target"
@@ -60,13 +77,23 @@ class PropertyEventTap extends LitElement {
             ></things-editor-board-selector>
           `
         : html`
-            <input value-key="target" .value=${target} list="target-list" .placeholder=${this._getPlaceHoder(action)} />
+            <input
+              value-key="target"
+              .value=${target}
+              list="target-list"
+              .placeholder=${this._getPlaceHoder(action)}
+              @focusin=${() => {
+                this.targetList = this._getTargetList(action)
+              }}
+            />
 
             <datalist id="target-list">
-              ${this._getTargetList(action).map(item => html` <option .value=${item}></option> `)}
+              ${this.targetList.map(
+                ({ value, description }) => html` <option .value=${value}>${description}</option> `
+              )}
             </datalist>
           `}
-      ${action == 'data-set' || action == 'value-set'
+      ${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>
@@ -88,14 +115,20 @@ class PropertyEventTap extends LitElement {
     }
   }
 
-  _getTargetList(action: string) {
+  _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 => `#${i.key}`)) || []
-        ids.unshift('(self)')
+        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':
@@ -105,9 +138,15 @@ class PropertyEventTap extends LitElement {
               .filter(i => {
                 return this.scene!.findById(i.key).get('type') == 'info-window'
               })
-              .map(i => `${i.key}`)) ||
+              .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 []
     }

package/src/ox-board-viewer.ts

@@ -1,12 +1,14 @@
 import '@material/mwc-fab'
 import '@material/mwc-icon'
 
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { ReferenceProvider, SCENE_MODE, create } from '@hatiolab/things-scene'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { Component, create, ReferenceProvider, SCENE_MODE } from '@hatiolab/things-scene'
 import { isIOS, togglefullscreen } from '@operato/utils'
 
 import { DataSubscriptionProviderImpl } from './graphql/data-subscription'
+import { runScenario, startScenario } from './graphql/scenario'
 
 @customElement('ox-board-viewer')
 export class BoardViewer extends LitElement {
@@ -321,6 +323,8 @@ export class BoardViewer extends LitElement {
     this._scene.on('link-open', this.onLinkOpen, this)
     this._scene.on('link-move', this.onLinkMove, this)
     this._scene.on('route-page', this.onRoutePage, this)
+    this._scene.on('start-scenario', this.onStartScenario, this)
+    this._scene.on('run-scenario', this.onRunScenario, this)
   }
 
   unbindSceneEvents(scene: any) {
@@ -328,6 +332,8 @@ export class BoardViewer extends LitElement {
     scene.off('link-open', this.onLinkOpen, this)
     scene.off('link-move', this.onLinkMove, this)
     scene.off('route-page', this.onRoutePage, this)
+    scene.off('start-scenario', this.onStartScenario, this)
+    scene.off('run-scenario', this.onRunScenario, this)
   }
 
   transientShowButtons(stop?: boolean) {
@@ -414,11 +420,11 @@ export class BoardViewer extends LitElement {
     )
   }
 
-  onLinkGoto(targetBoardId: string, value: any, fromComponent: any) {
+  onLinkGoto(targetBoardId: string, value: any, fromComponent: Component) {
     this.showScene(targetBoardId, fromComponent.data)
   }
 
-  onLinkOpen(url: string, value: any, fromComponent: any) {
+  onLinkOpen(url: string, value: any, fromComponent: Component) {
     if (!url) return
 
     try {
@@ -436,7 +442,7 @@ export class BoardViewer extends LitElement {
     }
   }
 
-  onLinkMove(url: string, value: any, fromComponent: any) {
+  onLinkMove(url: string, value: any, fromComponent: Component) {
     if (!url) return
 
     location.href = url
@@ -451,6 +457,22 @@ export class BoardViewer extends LitElement {
     window.dispatchEvent(new Event('popstate'))
   }
 
+  async onStartScenario(scenario: string, value: string | number | object, component: Component) {
+    try {
+      await startScenario(scenario, scenario, value)
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  async onRunScenario(scenario: string, value: string | number | object, component: Component) {
+    try {
+      component.data = await runScenario(scenario, value)
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
   async getSceneImageData(base64 = false) {
     if (!this._scene) {
       return