@operato/board - npm Package Compare versions

Comparing version 0.2.16 to 0.2.17

CHANGELOG.md

@@ -6,2 +6,11 @@ # Change Log
 
+### [0.2.17](https://github.com/hatiolab/operato/compare/v0.2.16...v0.2.17) (2021-11-21)
+
+
+### :bug: Bug Fix
+
+* ox-board-viewer reference count error ([8119893](https://github.com/hatiolab/operato/commit/81198935598fbae699dbda8f000f758c8ad8e014))
+
+
+
 ### [0.2.16](https://github.com/hatiolab/operato/compare/v0.2.15...v0.2.16) (2021-11-21)
@@ -8,0 +17,0 @@

custom-elements.json

@@ -354,5 +354,4 @@ {
               "type": {
-                "text": "object"
+                "text": "any"
               },
-              "default": "{}",
               "attribute": "data"
@@ -382,3 +381,3 @@ },
               "kind": "field",
-              "name": "scene",
+              "name": "_scene",
               "type": {
@@ -391,3 +390,3 @@ "text": "any"
               "kind": "field",
-              "name": "forward",
+              "name": "_forward",
               "type": {
@@ -400,3 +399,3 @@ "text": "Array<any>"
               "kind": "field",
-              "name": "backward",
+              "name": "_backward",
               "type": {
@@ -423,3 +422,3 @@ "text": "Array<any>"
               "kind": "field",
-              "name": "target",
+              "name": "_target",
               "type": {
@@ -431,3 +430,3 @@ "text": "HTMLElement"
               "kind": "field",
-              "name": "prev",
+              "name": "_prev",
               "type": {
@@ -439,3 +438,3 @@ "text": "HTMLElement"
               "kind": "field",
-              "name": "next",
+              "name": "_next",
               "type": {
@@ -447,3 +446,3 @@ "text": "HTMLElement"
               "kind": "field",
-              "name": "fullscreen",
+              "name": "_fullscreen",
               "type": {
@@ -672,5 +671,4 @@ "text": "HTMLElement"
               "type": {
-                "text": "object"
+                "text": "any"
               },
-              "default": "{}",
               "fieldName": "data"
@@ -677,0 +675,0 @@ },

dist/src/ox-board-viewer.d.ts

@@ -9,16 +9,17 @@ import '@material/mwc-fab';
     provider: any;
-    data: {};
+    data: any;
     hideFullscreen: boolean;
     hideNavigation: boolean;
-    scene: any;
-    forward: Array<any>;
-    backward: Array<any>;
+    _scene: any;
+    _forward: Array<any>;
+    _backward: Array<any>;
     _oldtarget?: HTMLElement;
     _fade_animations?: Array<Animation>;
-    target: HTMLElement;
-    prev: HTMLElement;
-    next: HTMLElement;
-    fullscreen: HTMLElement;
+    _target: HTMLElement;
+    _prev: HTMLElement;
+    _next: HTMLElement;
+    _fullscreen: HTMLElement;
     render(): import("lit-html").TemplateResult<1>;
-    firstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     updated(changes: PropertyValues<this>): void;
@@ -25,0 +26,0 @@ initScene(): void;

dist/src/ox-board-viewer.js

@@ -15,8 +15,7 @@ import { __decorate } from "tslib";
         this.provider = null;
-        this.data = {};
         this.hideFullscreen = false;
         this.hideNavigation = false;
-        this.scene = null;
-        this.forward = [];
-        this.backward = [];
+        this._scene = null;
+        this._forward = [];
+        this._backward = [];
     }
@@ -72,5 +71,6 @@ render() {
     }
-    firstUpdated() {
+    connectedCallback() {
+        super.connectedCallback();
         window.addEventListener('resize', () => {
-            this.scene && this.scene.fit();
+            this._scene && this._scene.fit();
         });
@@ -82,13 +82,15 @@ this.renderRoot.addEventListener('close-scene', e => {
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.closeScene();
+    }
     updated(changes) {
         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;
         }
@@ -111,44 +113,28 @@ }
         this.showScene(this.board.id);
-        /* provider.add 시에 추가된 레퍼런스 카운트를 다운시켜주어야 함 */
-        scene.release();
     }
     closeScene() {
-        if (this.scene) {
-            this.unbindSceneEvents(this.scene);
-            this.scene.target = null;
-            this.scene.release();
-            delete this.scene;
+        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._forward.forEach(scene => scene.release());
+        this._forward = [];
+        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) {
-        this.scene = scene;
+        this._scene = scene;
         /* scene의 기존 target을 보관한다. */
-        this._oldtarget = this.scene.target;
-        this.scene.fit(this.board.model.fitMode);
-        this.scene.target = this.target;
+        this._oldtarget = this._scene.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;
         }
@@ -163,5 +149,5 @@ this.bindSceneEvents();
             var scene = await this.provider.get(boardId, true);
-            var old_scene = this.scene;
-            this.scene = scene;
-            if (scene.target === this.target) {
+            var old_scene = this._scene;
+            this._scene = scene;
+            if (scene.target === this._target) {
                 scene.release();
@@ -171,13 +157,11 @@ return;
             if (old_scene) {
-                /* old scene을 backward에 보관한다. */
+                /* old scene을 _backward에 보관한다. */
                 this.unbindSceneEvents(old_scene);
                 /* 원래의 target에 되돌린다. */
                 old_scene.target = this._oldtarget;
-                this.backward.push(old_scene);
+                this._backward.push(old_scene);
             }
-            this.forward.forEach(scene => {
-                scene.release();
-            });
+            this._forward.forEach(scene => scene.release());
             /* forward를 비운다. */
-            this.forward = [];
+            this._forward = [];
             this.setupScene(scene);
@@ -193,6 +177,6 @@ if (bindingData) {
     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);
     }
@@ -207,4 +191,4 @@ unbindSceneEvents(scene) {
         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) {
@@ -230,5 +214,5 @@ return;
         }
-        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 => {
@@ -243,11 +227,11 @@ animation.cancel();
     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);
         }
@@ -257,11 +241,11 @@ 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);
         }
@@ -271,7 +255,3 @@ this.setupScene(scene);
     onTapFullscreen() {
-        togglefullscreen(this, () => {
-            this.requestUpdate();
-        }, () => {
-            this.requestUpdate();
-        });
+        togglefullscreen(this, () => this.requestUpdate(), () => this.requestUpdate());
     }
@@ -310,6 +290,6 @@ onLinkGoto(targetBoardId, value, fromComponent) {
     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;
@@ -320,3 +300,3 @@ // 1. Scene의 바운드에 근거하여, 오프스크린 캔바스를 만든다.
         canvas.height = Number(height);
-        var root = this.scene.root;
+        var root = this._scene.root;
         // 2. 모델레이어의 원래 위치와 스케일을 저장한다.
@@ -476,9 +456,9 @@ var translate = root.get('translate');
     state()
-], BoardViewer.prototype, "scene", void 0);
+], BoardViewer.prototype, "_scene", void 0);
 __decorate([
     state()
-], BoardViewer.prototype, "forward", void 0);
+], BoardViewer.prototype, "_forward", void 0);
 __decorate([
     state()
-], BoardViewer.prototype, "backward", void 0);
+], BoardViewer.prototype, "_backward", void 0);
 __decorate([
@@ -492,12 +472,12 @@ state()
     query('#target')
-], BoardViewer.prototype, "target", void 0);
+], BoardViewer.prototype, "_target", void 0);
 __decorate([
     query('#prev')
-], BoardViewer.prototype, "prev", void 0);
+], BoardViewer.prototype, "_prev", void 0);
 __decorate([
     query('#next')
-], BoardViewer.prototype, "next", void 0);
+], BoardViewer.prototype, "_next", void 0);
 __decorate([
     query('#fullscreen')
-], BoardViewer.prototype, "fullscreen", void 0);
+], BoardViewer.prototype, "_fullscreen", void 0);
 BoardViewer = __decorate([
@@ -504,0 +484,0 @@ customElement('ox-board-viewer')

package.json

 {
   "name": "@operato/board",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "description": "Webcomponent for board following open-wc recommendations",
@@ -19,3 +19,4 @@ "author": "heartyoh",
   "exports": {
-    ".": "./dist/src/index.js"
+    "ox-board-viewer": "./dist/src/ox-board-viewer",
+    "ox-board-player": "./dist/src/ox-board-player"
   },
@@ -75,3 +76,3 @@ "scripts": {
   },
-  "gitHead": "361a5def4bc0fce29ca91a64c70df2fa77960495"
+  "gitHead": "4cf0cccc50c7428f131ea10d018d25d813b629a7"
 }

src/ox-board-viewer.ts

@@ -99,6 +99,6 @@ import '@material/mwc-fab'
 
-  @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
 
@@ -108,5 +108,5 @@ @property({ type: Boolean, reflect: true, attribute: 'hide-fullscreen' }) hideFullscreen = 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> = []
 
@@ -116,6 +116,6 @@ @state() _oldtarget?: HTMLElement
 
-  @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
 
@@ -176,5 +176,7 @@ render() {
 
-  firstUpdated() {
+  connectedCallback() {
+    super.connectedCallback()
+
     window.addEventListener('resize', () => {
-      this.scene && this.scene.fit()
+      this._scene && this._scene.fit()
     })
@@ -192,13 +194,19 @@
 
+  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
     }
@@ -225,60 +233,38 @@ }
     this.showScene(this.board.id)
-
-    /* provider.add 시에 추가된 레퍼런스 카운트를 다운시켜주어야 함 */
-    scene.release()
   }
 
   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
+      delete this._scene
     }
 
     // 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
     }
@@ -297,6 +283,6 @@
 
-      var old_scene = this.scene
-      this.scene = scene
+      var old_scene = this._scene
+      this._scene = scene
 
-      if (scene.target === this.target) {
+      if (scene.target === this._target) {
         scene.release()
@@ -307,15 +293,13 @@ return
       if (old_scene) {
-        /* old scene을 backward에 보관한다. */
+        /* old scene을 _backward에 보관한다. */
         this.unbindSceneEvents(old_scene)
         /* 원래의 target에 되돌린다. */
         old_scene.target = this._oldtarget
-        this.backward.push(old_scene)
+        this._backward.push(old_scene)
       }
 
-      this.forward.forEach(scene => {
-        scene.release()
-      })
+      this._forward.forEach(scene => scene.release())
 
       /* forward를 비운다. */
-      this.forward = []
+      this._forward = []
 
@@ -333,6 +317,6 @@ this.setupScene(scene)
   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)
   }
@@ -349,4 +333,4 @@
     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)
 
@@ -380,5 +364,5 @@ if (buttons.length == 0) {
 
-    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')
 
@@ -396,11 +380,11 @@ this._fade_animations.forEach(animation => {
   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)
     }
@@ -412,11 +396,11 @@
   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)
     }
@@ -430,8 +414,4 @@
       this,
-      () => {
-        this.requestUpdate()
-      },
-      () => {
-        this.requestUpdate()
-      }
+      () => this.requestUpdate(),
+      () => this.requestUpdate()
     )
@@ -478,7 +458,7 @@ }
   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
@@ -491,3 +471,3 @@
 
-    var root = this.scene.root
+    var root = this._scene.root
     // 2. 모델레이어의 원래 위치와 스케일을 저장한다.
@@ -494,0 +474,0 @@ var translate = root.get('translate')

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

283680

decreased by-0.38%

Lines of code

4862

decreased by-0.8%

No dependency changes