@operato/board 1.4.78 → 1.4.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.4.78",
+  "version": "1.4.80",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.0.0-next.6",
-    "@operato/app": "^1.4.78",
+    "@operato/app": "^1.4.79",
     "@operato/data-grist": "^1.4.77",
-    "@operato/font": "^1.4.78",
+    "@operato/font": "^1.4.79",
     "@operato/graphql": "^1.4.76",
     "@operato/i18n": "^1.4.64",
     "@operato/input": "^1.4.64",
@@ -148,5 +148,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "ee4c6752557f71c18a16aef8a0c5724f65a25b5b"
+  "gitHead": "2f8ba7760be08a680a4b531a55b0ba783a2bdb04"
 }

package/src/ox-board-player.ts

@@ -45,7 +45,7 @@ export class BoardPlayer extends LitElement {
                 ${this.boards.map(
                   item =>
                     html`
-                      <ox-board-wrapper page .sceneId=${item.id} .data=${this.data} .provider=${this.provider}>
+                      <ox-board-wrapper page .board=${item} .data=${this.data} .provider=${this.provider}>
                       </ox-board-wrapper>
                     `
                 )}

package/src/player/ox-board-wrapper.ts

@@ -1,6 +1,11 @@
 import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
+import { BoardDataStorage } from '../data-storage/data-storage.js'
+import { DataSubscriptionProviderImpl } from '../graphql/data-subscription.js'
+
+import { create, SCENE_MODE } from '@hatiolab/things-scene'
+
 /**
  * @class BoardWrapper
  *
@@ -11,11 +16,13 @@ class BoardWrapper extends LitElement {
   static styles = [
     css`
       :host {
-        position: relative;
+        display: flex;
+        flex-direction: column;
       }
 
       #target {
-        display: block;
+        flex: 1;
+
         width: 100%;
         height: 100%;
         outline: 0;
@@ -23,11 +30,13 @@ class BoardWrapper extends LitElement {
     `
   ]
 
-  @property({ type: String }) sceneId!: string
   @property({ type: Object }) provider!: any
   @property({ type: Object }) data: any
+  @property({ type: Object }) board?: any
+  @property({ type: String }) baseUrl?: string
 
-  @state() _scene: any
+  private _scene: any
+  private connected: boolean = false
 
   @query('#target') _targetEl!: HTMLElement
 
@@ -38,6 +47,8 @@ class BoardWrapper extends LitElement {
   connectedCallback() {
     super.connectedCallback()
 
+    this.connected = true
+
     window.addEventListener('resize', () => {
       requestAnimationFrame(() => {
         if (this._scene) {
@@ -53,45 +64,86 @@ class BoardWrapper extends LitElement {
 
   disconnectedCallback() {
     super.disconnectedCallback()
+    this.connected = false
 
-    this._releaseRef()
+    /* ox-board-player-carousel에 의해서 mutation 되면서, 잠깐 disconnected되므로,
+    최종적으로 disconnected 여부를 확인하여야 한다. */
+    requestAnimationFrame(() => {
+      if (!this.connected) {
+        this.closeScene()
+      }
+    })
   }
 
   updated(changes: PropertyValues<this>) {
-    changes.has('sceneId') && this._onSceneIdChanged()
+    changes.has('board') && this._onBoardChanged()
+  }
+
+  _onBoardChanged() {
+    this.initScene()
+  }
+
+  initScene() {
+    if (!this.board || !this.board.id) {
+      return
+    }
+
+    var { model } = this.board
+
+    try {
+      if (typeof model == 'string') {
+        model = JSON.parse(model)
+      } else {
+        model = JSON.parse(JSON.stringify(model))
+      }
+    } catch (err) {
+      console.error(err)
+    }
+
+    this._scene = create({
+      model,
+      mode: SCENE_MODE.VIEW,
+      refProvider: this.provider!,
+      dataStorage: new BoardDataStorage(this.board.id),
+      dataSubscriptionProvider: new DataSubscriptionProviderImpl()
+    })
+
+    if (this.baseUrl) {
+      this._scene.baseUrl = this.baseUrl
+    }
+
+    this.setupScene({ id: this.board.id, scene: this._scene })
   }
 
-  _releaseRef() {
+  closeScene() {
     if (this._scene) {
       this._scene.target = null
       this._scene.release && this._scene.release()
-      delete this._scene
+
+      this._scene = null
     }
   }
 
-  _onSceneIdChanged() {
-    if (!this.provider) return
-    this._releaseRef()
+  setupScene({ id, scene }: { id: string; scene: any }) {
+    this._scene = scene
 
-    if (!this.sceneId) return
+    const backgroundColor = this._scene?.root.state.fillStyle
+    if (typeof backgroundColor === 'string') {
+      this.style.backgroundColor = backgroundColor
+    } else {
+      this.style.backgroundColor = 'initial'
+    }
 
-    this.provider.get(this.sceneId, true).then(
-      (scene: any) => {
-        this._scene = scene
-        this._scene.target = this._targetEl
-        if (this.data) {
-          this._scene.data = this.data
-        }
+    this._scene.target = this._targetEl
 
-        /* 이 컴포넌트의 폭이 값을 가지고 있으면 - 화면상에 자리를 잡고 보여지고 있음을 의미한다.
-         * 이 때는 정상적으로 그려주고,
-         * 그렇지 않으면, 다음 Resize Handling시에 처리하도록 한다.
-         */
-        if (this._scene.target.offsetWidth) {
-          this._scene.fit()
-        }
-      },
-      (e: any) => {}
-    )
+    requestAnimationFrame(() => {
+      if (this._scene.target.offsetWidth) {
+        this._scene.fit()
+      }
+    })
+
+    if (this.data) {
+      this._scene.data = this.data
+    }
   }
 }