@operato/board 1.0.0-alpha.9 → 1.0.0-beta.2

package/src/ox-board-viewer.ts

@@ -1,11 +1,15 @@
 import '@material/mwc-fab'
 import '@material/mwc-icon'
 
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { 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 {
   static styles = css`
@@ -96,7 +100,7 @@ export class BoardViewer extends LitElement {
 
   @property({ type: String }) baseUrl: string = ''
   @property({ type: Object }) board: any = {}
-  @property({ type: Object }) provider: any = null
+  @property({ type: Object }) provider: ReferenceProvider | null = null
   @property({ type: Object }) data: any
 
   @property({ type: Boolean, reflect: true, attribute: 'hide-fullscreen' }) hideFullscreen = false
@@ -196,7 +200,11 @@ export class BoardViewer extends LitElement {
       this.closeScene()
 
       if (this.board && this.board.id) {
-        this.initScene()
+        if (this.board.model) {
+          this.initScene()
+        } else {
+          this.initSceneAsync()
+        }
       }
     }
 
@@ -205,6 +213,13 @@ export class BoardViewer extends LitElement {
     }
   }
 
+  async initSceneAsync() {
+    if (!this.board || !this.board.id) return
+
+    this._scene = await this.provider!.get(this.board.id, true)
+    this.setupScene(this._scene)
+  }
+
   initScene() {
     if (!this.board || !this.board.id) return
 
@@ -213,14 +228,15 @@ export class BoardViewer extends LitElement {
         ...this.board.model
       },
       mode: SCENE_MODE.VIEW,
-      refProvider: this.provider
+      refProvider: this.provider!,
+      dataSubscriptionProvider: new DataSubscriptionProviderImpl()
     })
 
     if (this.baseUrl) {
       this._scene.baseUrl = this.baseUrl
     }
 
-    this.provider.add(this.board.id, this._scene)
+    this.provider!.add(this.board.id, this._scene)
 
     this.setupScene(this._scene)
   }
@@ -254,7 +270,7 @@ export class BoardViewer extends LitElement {
     /* scene의 기존 target을 보관한다. */
     this._oldtarget = this._scene.target
 
-    this._scene.fit(this.board.model.fitMode)
+    this._scene.fit(this._scene.fitMode)
     this._scene.target = this._target
 
     if (this.data) {
@@ -270,7 +286,7 @@ export class BoardViewer extends LitElement {
     if (!boardId) return
 
     try {
-      var scene = await this.provider.get(boardId, true)
+      var scene = await this.provider!.get(boardId, true)
 
       if (scene === this._scene) {
         scene.release()
@@ -307,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) {
@@ -314,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) {
@@ -400,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 {
@@ -422,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
@@ -437,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