@operato/board 0.2.16 → 0.2.27

package/src/ox-board-viewer.ts

@@ -96,25 +96,25 @@ export class BoardViewer extends LitElement {
     }
   `
 
-  @property({ type: String }) baseUrl = ''
+  @property({ type: String }) baseUrl: string = ''
   @property({ type: Object }) board: any = {}
   @property({ type: Object }) provider: any = null
-  @property({ type: Object }) data = {}
+  @property({ type: Object }) data: any
 
   @property({ type: Boolean, reflect: true, attribute: 'hide-fullscreen' }) hideFullscreen = false
   @property({ type: Boolean, reflect: true, attribute: 'hide-navigation' }) hideNavigation = false
 
-  @state() scene: any = null
-  @state() forward: Array<any> = []
-  @state() backward: Array<any> = []
+  @state() _scene: any = null
+  @state() _forward: Array<any> = []
+  @state() _backward: Array<any> = []
 
   @state() _oldtarget?: HTMLElement
   @state() _fade_animations?: Array<Animation>
 
-  @query('#target') target!: HTMLElement
-  @query('#prev') prev!: HTMLElement
-  @query('#next') next!: HTMLElement
-  @query('#fullscreen') fullscreen!: HTMLElement
+  @query('#target') _target!: HTMLElement
+  @query('#prev') _prev!: HTMLElement
+  @query('#next') _next!: HTMLElement
+  @query('#fullscreen') _fullscreen!: HTMLElement
 
   render() {
     var fullscreen =
@@ -170,9 +170,11 @@ export class BoardViewer extends LitElement {
     `
   }
 
-  firstUpdated() {
+  connectedCallback() {
+    super.connectedCallback()
+
     window.addEventListener('resize', () => {
-      this.scene && this.scene.fit()
+      this._scene && this._scene.fit()
     })
 
     this.renderRoot.addEventListener(
@@ -185,24 +187,30 @@ export class BoardViewer extends LitElement {
     )
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    this.closeScene()
+  }
+
   updated(changes: PropertyValues<this>) {
     if (changes.has('board')) {
+      this.closeScene()
+
       if (this.board && this.board.id) {
         this.initScene()
-      } else {
-        this.closeScene()
       }
     }
 
-    if (changes.has('data') && this.scene && this.data) {
-      this.scene.data = this.data
+    if (changes.has('data') && this._scene && this.data) {
+      this._scene.data = this.data
     }
   }
 
   initScene() {
     if (!this.board || !this.board.id) return
 
-    var scene = create({
+    this._scene = create({
       model: {
         ...this.board.model
       },
@@ -211,70 +219,48 @@ export class BoardViewer extends LitElement {
     })
 
     if (this.baseUrl) {
-      scene.baseUrl = this.baseUrl
+      this._scene.baseUrl = this.baseUrl
     }
 
-    this.provider.add(this.board.id, scene)
+    this.provider.add(this.board.id, this._scene)
 
-    this.showScene(this.board.id)
-
-    /* provider.add 시에 추가된 레퍼런스 카운트를 다운시켜주어야 함 */
-    scene.release()
+    this.setupScene(this._scene)
   }
 
   closeScene() {
-    if (this.scene) {
-      this.unbindSceneEvents(this.scene)
+    if (this._scene) {
+      this.unbindSceneEvents(this._scene)
 
-      this.scene.target = null
-      this.scene.release()
+      this._scene.target = null
+      this._scene.release()
 
-      delete this.scene
+      this._scene = null
     }
 
     // delete queued scenes
-    this.forward.forEach(scene => scene.release())
-    this.forward = []
+    this._forward.forEach(scene => scene.release())
+    this._forward = []
 
-    this.backward.forEach(scene => scene.release())
-    this.backward = []
+    this._backward.forEach(scene => scene.release())
+    this._backward = []
   }
 
   releaseScene() {
-    if (this.scene) {
-      this.unbindSceneEvents(this.scene)
-
-      this.scene.target = null
-      this.scene.release()
-
-      delete this.scene
-
-      // delete queued scenes
-      this.forward.forEach(scene => {
-        scene.release()
-      })
-      this.forward = []
-
-      this.backward.forEach(scene => {
-        scene.release()
-      })
-      this.backward = []
-
-      this.transientShowButtons()
-    }
+    this.closeScene()
+    this.transientShowButtons()
   }
 
   setupScene(scene: any) {
-    this.scene = scene
+    this._scene = scene
 
     /* scene의 기존 target을 보관한다. */
-    this._oldtarget = this.scene.target
+    this._oldtarget = this._scene.target
 
-    this.scene.fit(this.board.model.fitMode)
-    this.scene.target = this.target
+    this._scene.fit(this.board.model.fitMode)
+    this._scene.target = this._target
 
     if (this.data) {
-      this.scene.data = this.data
+      this._scene.data = this.data
     }
 
     this.bindSceneEvents()
@@ -288,28 +274,25 @@ export class BoardViewer extends LitElement {
     try {
       var scene = await this.provider.get(boardId, true)
 
-      var old_scene = this.scene
-      this.scene = scene
-
-      if (scene.target === this.target) {
+      if (scene === this._scene) {
         scene.release()
         return
       }
 
-      if (old_scene) {
-        /* old scene을 backward에 보관한다. */
-        this.unbindSceneEvents(old_scene)
+      if (this._scene) {
+        /* old scene을 _backward에 보관한다. */
+        this.unbindSceneEvents(this._scene)
         /* 원래의 target에 되돌린다. */
-        old_scene.target = this._oldtarget
-        this.backward.push(old_scene)
+        this._scene.target = this._oldtarget
+        this._backward.push(this._scene)
       }
 
-      this.forward.forEach(scene => {
-        scene.release()
-      })
+      this._scene = scene
+
+      this._forward.forEach(scene => scene.release())
 
       /* forward를 비운다. */
-      this.forward = []
+      this._forward = []
 
       this.setupScene(scene)
 
@@ -322,10 +305,10 @@ export class BoardViewer extends LitElement {
   }
 
   bindSceneEvents() {
-    this.scene.on('goto', this.onLinkGoto, this)
-    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('goto', this.onLinkGoto, this)
+    this._scene.on('link-open', this.onLinkOpen, this)
+    this._scene.on('link-move', this.onLinkMove, this)
+    this._scene.on('route-page', this.onRoutePage, this)
   }
 
   unbindSceneEvents(scene: any) {
@@ -337,8 +320,8 @@ export class BoardViewer extends LitElement {
 
   transientShowButtons(stop?: boolean) {
     var buttons = []
-    !this.hideNavigation && buttons.push(this.next, this.prev)
-    !this.hideFullscreen && buttons.push(this.fullscreen)
+    !this.hideNavigation && buttons.push(this._next, this._prev)
+    !this.hideFullscreen && buttons.push(this._fullscreen)
 
     if (buttons.length == 0) {
       return
@@ -367,9 +350,9 @@ export class BoardViewer extends LitElement {
         })
     }
 
-    this.forward.length <= 0 ? this.next.setAttribute('hidden', '') : this.next.removeAttribute('hidden')
-    this.backward.length <= 0 ? this.prev.setAttribute('hidden', '') : this.prev.removeAttribute('hidden')
-    this.fullscreen && this.fullscreen.removeAttribute('hidden')
+    this._forward.length <= 0 ? this._next.setAttribute('hidden', '') : this._next.removeAttribute('hidden')
+    this._backward.length <= 0 ? this._prev.setAttribute('hidden', '') : this._prev.removeAttribute('hidden')
+    this._fullscreen && this._fullscreen.removeAttribute('hidden')
 
     this._fade_animations.forEach(animation => {
       animation.cancel()
@@ -382,30 +365,30 @@ export class BoardViewer extends LitElement {
   /* event handlers */
 
   onTapNext() {
-    var scene = this.forward.pop()
+    var scene = this._forward.pop()
     if (!scene) return
 
-    if (this.scene) {
-      this.scene.target = null
+    if (this._scene) {
+      this._scene.target = null
       /* 원래의 target에 되돌린다. */
-      this.scene.target = this._oldtarget
-      this.unbindSceneEvents(this.scene)
-      this.backward.push(this.scene)
+      this._scene.target = this._oldtarget
+      this.unbindSceneEvents(this._scene)
+      this._backward.push(this._scene)
     }
 
     this.setupScene(scene)
   }
 
   onTapPrev() {
-    var scene = this.backward.pop()
+    var scene = this._backward.pop()
     if (!scene) return
 
-    if (this.scene) {
-      this.scene.target = null
+    if (this._scene) {
+      this._scene.target = null
       /* 원래의 target에 되돌린다. */
-      this.scene.target = this._oldtarget
-      this.unbindSceneEvents(this.scene)
-      this.forward.push(this.scene)
+      this._scene.target = this._oldtarget
+      this.unbindSceneEvents(this._scene)
+      this._forward.push(this._scene)
     }
 
     this.setupScene(scene)
@@ -414,12 +397,8 @@ export class BoardViewer extends LitElement {
   onTapFullscreen() {
     togglefullscreen(
       this,
-      () => {
-        this.requestUpdate()
-      },
-      () => {
-        this.requestUpdate()
-      }
+      () => this.requestUpdate(),
+      () => this.requestUpdate()
     )
   }
 
@@ -461,11 +440,11 @@ export class BoardViewer extends LitElement {
   }
 
   async getSceneImageData(base64 = false) {
-    if (!this.scene) {
+    if (!this._scene) {
       return
     }
 
-    var { width, height } = this.scene.model
+    var { width, height } = this._scene.model
     var pixelRatio = window.devicePixelRatio
 
     // 1. Scene의 바운드에 근거하여, 오프스크린 캔바스를 만든다.
@@ -473,7 +452,7 @@ export class BoardViewer extends LitElement {
     canvas.width = Number(width)
     canvas.height = Number(height)
 
-    var root = this.scene.root
+    var root = this._scene.root
     // 2. 모델레이어의 원래 위치와 스케일을 저장한다.
     var translate = root.get('translate')
     var scale = root.get('scale')