@operato/board 1.0.0-alpha.8 → 1.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-beta.1",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -49,28 +49,29 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@operato/data-grist": "^1.0.0-alpha.8",
-    "@operato/graphql": "^1.0.0-alpha.8",
-    "@operato/i18n": "^1.0.0-alpha.8",
-    "@operato/input": "^1.0.0-alpha.8",
-    "@operato/markdown": "^1.0.0-alpha.8",
-    "@operato/popup": "^1.0.0-alpha.8",
-    "@operato/property-editor": "^1.0.0-alpha.8",
-    "@operato/styles": "^1.0.0-alpha.8",
-    "@operato/utils": "^1.0.0-alpha.8",
+    "@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",
-    "@things-factory/modeller-ui": "^5.0.0-alpha.3",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
     "file-saver": "^2.0.5",
-    "lit": "^2.2.0",
+    "lit": "^2.2.1",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@hatiolab/things-scene": "^2.7.34",
+    "@hatiolab/things-scene": "^2.8.1",
     "@material/mwc-fab": "^0.25.3",
     "@material/mwc-icon": "^0.25.3",
     "@open-wc/eslint-config": "^4.3.0",
@@ -106,5 +107,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "b357f261d2d7b3a1c99b6389f8f8330bceeac8c9"
+  "gitHead": "cfa0be4c72d93b2bf3f851c09b5c62c6025edf0f"
 }

package/src/graphql/data-subscription.ts

@@ -0,0 +1,30 @@
+import { Component, DataSubscriptionProvider } from '@hatiolab/things-scene'
+
+import gql from 'graphql-tag'
+import { subscribe } from '@operato/graphql'
+
+export class DataSubscriptionProviderImpl implements DataSubscriptionProvider {
+  async subscribe(tag: string, component: Component) {
+    return await subscribe(
+      {
+        query: gql`
+                  subscription {
+                    data(tag: "${tag}") {
+                      tag
+                      data
+                    }
+                  }
+                `
+      },
+      {
+        next: async ({ data }: { data: any }) => {
+          if (data) {
+            component.data = data.data.data
+          }
+        }
+      }
+    )
+  }
+
+  dispose() {}
+}

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/abstract-property.ts

@@ -26,10 +26,6 @@ export class AbstractProperty extends LitElement {
     var value
 
     switch (element.tagName) {
-      case 'THINGS-EDITOR-ANGLE-INPUT':
-        value = Number((element as any).radian) || 0
-        break
-
       case 'INPUT':
         switch ((element as any).type) {
           case 'checkbox':

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

@@ -2,8 +2,8 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/modeller-ui/client/editors/things-editor-value-map'
-import '@things-factory/modeller-ui/client/editors/things-editor-value-range'
+import '@operato/input/ox-input-value-map.js'
+import '@operato/input/ox-input-value-ranges.js'
 import '@operato/input/ox-buttons-radio.js'
 import '@operato/input/ox-input-code.js'
 import '@operato/i18n/ox-i18n.js'
@@ -156,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
@@ -192,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>
 
@@ -220,21 +229,21 @@ export default class DataBindingMapper extends LitElement {
       </ox-buttons-radio>
 
       <div rule-editors class="content" ?hidden=${mapping.rule == 'value'}>
-        <things-editor-value-map
+        <ox-input-value-map
           value-key="map"
           .value=${this.rule.map || {}}
           .valuetype=${this._valuetype(mapping.property!)}
           ?active=${mapping.rule == 'map'}
         >
-        </things-editor-value-map>
+        </ox-input-value-map>
 
-        <things-editor-value-range
+        <ox-input-value-ranges
           value-key="range"
           .value=${this.rule.range || []}
           .valuetype=${this._valuetype(mapping.property!)}
           ?active=${mapping.rule == 'range'}
         >
-        </things-editor-value-range>
+        </ox-input-value-ranges>
 
         <ox-input-code
           value-key="eval"

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

@@ -9,10 +9,9 @@ import '@operato/input/ox-buttons-radio.js'
 import '@operato/input/ox-input-data.js'
 import '@operato/i18n/ox-i18n.js'
 
-import { css, html, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
 import { Properties, Scene } from '@hatiolab/things-scene'
+import { PropertyValues, css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { AbstractProperty } from '../abstract-property'
 import { PropertySharedStyle } from '../property-shared-style'
@@ -213,6 +212,9 @@ class PropertyDataBinding extends AbstractProperty {
           <label> <ox-i18n msgid="label.class">Class</ox-i18n> </label>
           <input value-key="class" .value=${value.class || ''} />
 
+          <label> <ox-i18n msgid="label.tag">Tag</ox-i18n> </label>
+          <input value-key="tag" .value=${value.tag || ''} />
+
           <label> <ox-i18n msgid="label.template-prefix">Template Prefix</ox-i18n> </label>
           <input value-key="templatePrefix" .value=${value.templatePrefix || ''} />
 
@@ -370,8 +372,8 @@ class PropertyDataBinding extends AbstractProperty {
     if (mapping && mapping.target) {
       this.scene &&
         this.scene.findAll(mapping.target, this.scene.selected && this.scene.selected[0]).forEach((c, i) => {
-          if (i == 0) c.trigger('tagreset')
-          c.trigger('tag', {})
+          if (i == 0) c.trigger('decotagreset')
+          c.trigger('decotag', {})
         })
     }
 

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

@@ -29,7 +29,7 @@ export const EffectsSharedStyle = css`
   input,
   select,
   ox-input-angle,
-  things-editor-color,
+  ox-input-color,
   [custom-editor] {
     grid-column: span 7;
   }
@@ -37,7 +37,7 @@ export const EffectsSharedStyle = css`
   input,
   select,
   ox-input-angle input,
-  things-editor-color input,
+  ox-input-color input,
   [custom-editor] input {
     border: var(--property-sidebar-fieldset-border);
   }

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/modeller/property-sidebar/effects/property-shadow.ts

@@ -2,14 +2,13 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/modeller-ui/client/editors/things-editor-color'
 import '@operato/i18n/ox-i18n.js'
+import '@operato/input/ox-input-color.js'
 
-import { css, html, LitElement } from 'lit'
+import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { Properties } from '@hatiolab/things-scene'
-
 import { convert } from './value-converter'
 
 /**
@@ -48,7 +47,7 @@ export default class PropertyShadow extends LitElement {
       }
 
       input[type='number'],
-      things-editor-color {
+      ox-input-color {
         grid-column: span 7;
       }
       input[type='number'] {
@@ -93,7 +92,7 @@ export default class PropertyShadow extends LitElement {
 
       <label class="icon-only-label color"></label>
 
-      <things-editor-color value-key="color" .value=${value.color}> </things-editor-color>
+      <ox-input-color value-key="color" .value=${value.color}> </ox-input-color>
     `
   }
 

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

@@ -1,8 +1,5 @@
 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':

package/src/modeller/property-sidebar/property-shared-style.ts

@@ -52,7 +52,7 @@ export const PropertySharedStyle = css`
   .property-grid > select,
   .property-grid > ox-input-angle,
   .property-grid > ox-buttons-radio,
-  .property-grid > things-editor-color,
+  .property-grid > ox-input-color,
   [custom-editor] {
     grid-column: span 7;
     align-self: stretch;

package/src/modeller/property-sidebar/specifics/specific-properties-builder.ts

@@ -2,13 +2,13 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/modeller-ui/client/editors/things-editor-property'
+import '@operato/app/property-editor.js' /* for registering property editors */
 
-import { html, LitElement, PropertyValues } from 'lit'
+import { LitElement, PropertyValues, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { Properties } from '@hatiolab/things-scene'
 import { OxPropertyEditor } from '@operato/property-editor'
+import { Properties } from '@hatiolab/things-scene'
 
 /**
 모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.

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

@@ -4,17 +4,16 @@
 
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu'
 import '@operato/help/ox-title-with-help.js'
-import '@things-factory/modeller-ui/client/editors/things-editor-color'
-import '@things-factory/modeller-ui/client/editors/things-editor-color-style'
-import '@things-factory/modeller-ui/client/editors/things-editor-font-selector'
+import '@operato/input/ox-input-color.js'
+import '@operato/app/input/ox-input-fill-style.js'
+import '@operato/font/ox-font-selector.js'
 import '@operato/i18n/ox-i18n.js'
 
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { Component } from '@hatiolab/things-scene'
-
 import { AbstractProperty } from '../abstract-property'
+import { Component } from '@hatiolab/things-scene'
 import { PropertySharedStyle } from '../property-shared-style'
 
 @customElement('property-style')
@@ -374,12 +373,12 @@ class PropertyStyles extends AbstractProperty {
             <ox-i18n msgid="label.font-family">Font Family</ox-i18n>
           </label>
 
-          <things-editor-font-selector
+          <ox-font-selector
             value-key="fontFamily"
             .value=${fontFamily}
             class="property-full-input"
             custom-editor
-          ></things-editor-font-selector>
+          ></ox-font-selector>
 
           <label class="property-half-label icon-only-label font-size"></label>
           <input type="number" value-key="fontSize" .value=${fontSize} class="property-half-input" />
@@ -388,8 +387,7 @@ class PropertyStyles extends AbstractProperty {
           <input type="number" value-key="lineHeight" .value=${lineHeight} class="property-half-input" />
 
           <label class="property-half-label icon-only-label color"></label>
-          <things-editor-color value-key="fontColor" .value=${fontColor} class="property-half-input">
-          </things-editor-color>
+          <ox-input-color value-key="fontColor" .value=${fontColor} class="property-half-input"> </ox-input-color>
 
           <label class="property-half-label"></label>
           <div class="property-half-input btn-group">
@@ -406,7 +404,7 @@ class PropertyStyles extends AbstractProperty {
           >
         </legend>
 
-        <things-editor-color-style value-key="fillStyle" .value=${fillStyle}> </things-editor-color-style>
+        <ox-input-fill-style value-key="fillStyle" .value=${fillStyle}> </ox-input-fill-style>
       </fieldset>
 
       <fieldset>
@@ -419,8 +417,7 @@ class PropertyStyles extends AbstractProperty {
           <input type="number" value-key="lineWidth" .value=${lineWidth} class="property-half-input" />
 
           <label class="property-half-label icon-only-label color"></label>
-          <things-editor-color value-key="strokeStyle" .value=${strokeStyle} class="property-half-input">
-          </things-editor-color>
+          <ox-input-color value-key="strokeStyle" .value=${strokeStyle} class="property-half-input"> </ox-input-color>
 
           <label class="property-full-label">
             <ox-i18n msgid="label.line-type">line type</ox-i18n>

package/src/ox-board-modeller.ts

@@ -6,16 +6,15 @@ import './modeller/edit-toolbar'
 import '@hatiolab/things-scene'
 import './ox-board-viewer'
 
-import { saveAs } from 'file-saver'
-import { css, html, LitElement } from 'lit'
+import { ComponentGroup, ComponentTemplate } from './types'
+import { LitElement, css, html } from 'lit'
+import { SCENE_MODE, Scene } from '@hatiolab/things-scene'
 import { customElement, property, query } from 'lit/decorators.js'
-
-import { Scene, SCENE_MODE } from '@hatiolab/things-scene'
-import { OxPopup } from '@operato/popup'
 import { isMacOS, togglefullscreen } from '@operato/utils'
 
 import { EditToolbar } from './modeller/edit-toolbar'
-import { ComponentGroup, ComponentTemplate } from './types'
+import { OxPopup } from '@operato/popup'
+import { saveAs } from 'file-saver'
 
 const MACOS = isMacOS()
 
@@ -256,7 +255,7 @@ export class BoardModeller extends LitElement {
             <ox-scene-property name="paddingTop" value="50" type="number"></ox-scene-property>
             <ox-scene-property name="paddingLeft" value="50" type="number"></ox-scene-property>
           </ox-scene-layer>
-          <ox-scene-layer type="tag-layer"></ox-scene-layer>
+          <ox-scene-layer type="decotag-layer"></ox-scene-layer>
           <ox-scene-handler type="text-editor"></ox-scene-handler>
           <ox-scene-handler type="move-handler"></ox-scene-handler>
         </ox-scene-viewer>