@operato/board 8.0.0-alpha.9 → 8.0.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "8.0.0-alpha.9",
+  "version": "8.0.0-beta.0",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -99,18 +99,18 @@
   "dependencies": {
     "@material/web": "^2.0.0",
     "@open-wc/scoped-elements": "^2.1.3",
-    "@operato/app": "^8.0.0-alpha.9",
-    "@operato/data-grist": "^8.0.0-alpha.8",
-    "@operato/font": "^8.0.0-alpha.9",
-    "@operato/graphql": "^8.0.0-alpha.0",
-    "@operato/i18n": "^8.0.0-alpha.0",
-    "@operato/input": "^8.0.0-alpha.4",
-    "@operato/layout": "^8.0.0-alpha.4",
-    "@operato/markdown": "^8.0.0-alpha.4",
-    "@operato/popup": "^8.0.0-alpha.4",
-    "@operato/property-editor": "^8.0.0-alpha.9",
-    "@operato/styles": "^8.0.0-alpha.4",
-    "@operato/utils": "^8.0.0-alpha.0",
+    "@operato/app": "^8.0.0-beta.0",
+    "@operato/data-grist": "^8.0.0-beta.0",
+    "@operato/font": "^8.0.0-beta.0",
+    "@operato/graphql": "^8.0.0-beta.0",
+    "@operato/i18n": "^8.0.0-beta.0",
+    "@operato/input": "^8.0.0-beta.0",
+    "@operato/layout": "^8.0.0-beta.0",
+    "@operato/markdown": "^8.0.0-beta.0",
+    "@operato/popup": "^8.0.0-beta.0",
+    "@operato/property-editor": "^8.0.0-beta.0",
+    "@operato/styles": "^8.0.0-beta.0",
+    "@operato/utils": "^8.0.0-beta.0",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
@@ -122,23 +122,23 @@
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.9.2",
+    "@custom-elements-manifest/analyzer": "^0.10.0",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@hatiolab/things-scene": "^8.0.0-alpha",
+    "@hatiolab/things-scene": "^8.0.0-beta",
     "@open-wc/eslint-config": "^12.0.3",
-    "@open-wc/testing": "^3.1.6",
-    "@rollup/plugin-image": "^2.1.1",
-    "@rollup/plugin-json": "^4.1.0",
+    "@open-wc/testing": "^4.0.0",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.1.0",
     "@types/lodash-es": "^4.17.6",
     "@types/w3c-web-usb": "^1.0.5",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
-    "@web/dev-server": "^0.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@web/dev-server": "^0.4.0",
     "@web/dev-server-storybook": "^2.0.1",
-    "@web/test-runner": "^0.18.0",
+    "@web/test-runner": "^0.19.0",
     "@webcomponents/scoped-custom-element-registry": "^0.0.9",
-    "concurrently": "^8.0.1",
-    "eslint": "^8.39.0",
+    "concurrently": "^9.0.0",
+    "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
@@ -159,5 +159,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "2347cd63c237f73d1dae009e739b3c408afd58f3"
+  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
 }

package/src/ox-board-player.ts

@@ -301,7 +301,9 @@ export class BoardPlayer extends LitElement {
   }
 
   async start() {
-    if (!this.boards || this.boards.length == 0) return
+    if (!this.boards || this.boards.length == 0) {
+      return
+    }
 
     this.started = true
     this.playing = true

package/src/ox-board-viewer.ts

@@ -125,6 +125,7 @@ export class BoardViewer extends LitElement {
   @property({ type: Object }) provider: ReferenceProvider | null = null
   @property({ type: Object }) data: any
   @property({ type: Object }) values: any
+  @property({ type: Boolean }) history: boolean = false
 
   @property({ type: Boolean, reflect: true, attribute: 'hide-fullscreen' }) hideFullscreen = false
   @property({ type: Boolean, reflect: true, attribute: 'hide-navigation' }) hideNavigation = false
@@ -305,7 +306,7 @@ export class BoardViewer extends LitElement {
     this.transientShowButtons()
   }
 
-  setupScene({ id, scene }: { id: string; scene: any }) {
+  setupScene({ id, scene }: { id: string; scene: any }, history?: -1 | 0 | 1) {
     this._scene = scene
 
     const backgroundColor = this._scene?.root.state.fillStyle
@@ -332,6 +333,14 @@ export class BoardViewer extends LitElement {
     this.bindSceneEvents()
 
     this.transientShowButtons()
+
+    if (this.history && typeof history !== 'undefined' /* && document.querySelector('things-app') */) {
+      const currentUrl = new URL(window.location.href)
+      const paths = currentUrl.pathname.split('/')
+
+      paths[paths.length - 1] = this.currentBoardId
+      window.history.replaceState({}, '', `${currentUrl.origin}${paths.join('/')}${currentUrl.search}`)
+    }
   }
 
   async showScene(boardId: string, bindingData?: any) {
@@ -360,7 +369,7 @@ export class BoardViewer extends LitElement {
       /* forward를 비운다. */
       this._forward = []
 
-      this.setupScene({ id: boardId, scene })
+      this.setupScene({ id: boardId, scene }, 0)
 
       if (bindingData) {
         scene.data = bindingData
@@ -465,10 +474,10 @@ export class BoardViewer extends LitElement {
       /* 원래의 target에 되돌린다. */
       this._scene.target = this._oldtarget
       this.unbindSceneEvents(this._scene)
-      this._backward.push({ id: id!, scene: this._scene })
+      this._backward.push({ id: this.currentBoardId!, scene: this._scene })
     }
 
-    this.setupScene({ id: id!, scene })
+    this.setupScene({ id: id!, scene }, 1)
   }
 
   onTapPrev() {
@@ -480,10 +489,10 @@ export class BoardViewer extends LitElement {
       /* 원래의 target에 되돌린다. */
       this._scene.target = this._oldtarget
       this.unbindSceneEvents(this._scene)
-      this._forward.push({ id: id!, scene: this._scene })
+      this._forward.push({ id: this.currentBoardId!, scene: this._scene })
     }
 
-    this.setupScene({ id: id!, scene })
+    this.setupScene({ id: id!, scene }, -1)
   }
 
   onTapFullscreen() {

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

@@ -81,6 +81,8 @@ class BoardWrapper extends LitElement {
   }
 
   _onBoardChanged() {
+    this.closeScene()
+
     this.initScene()
   }
 
@@ -138,7 +140,7 @@ class BoardWrapper extends LitElement {
     this._scene.target = this._targetEl
 
     requestAnimationFrame(() => {
-      if (this._scene.target.offsetWidth) {
+      if (this._scene?.target.offsetWidth) {
         this._scene.fit()
       }
     })