@things-factory/board-ui 4.0.3 → 4.0.4

package/client/board-modeller/board-modeller.js

@@ -1,15 +1,12 @@
-import { LitElement, html, css } from 'lit-element'
-
 import '@material/mwc-fab'
-
+import '@operato/board' // ox-board-viewer
 import '@polymer/paper-dialog/paper-dialog'
-import '../board-viewer/board-viewer'
-
 import './scene-viewer/things-scene-viewer'
-
 import './component-toolbar/component-toolbar'
 import './property-sidebar/property-sidebar'
 
+import { LitElement, css, html } from 'lit-element'
+
 export class BoardModeller extends LitElement {
   constructor() {
     super()
@@ -192,7 +189,7 @@ export class BoardModeller extends LitElement {
      * https://github.com/PolymerElements/paper-dialog/issues/152
      **/
 
-    var preview = document.createElement('board-viewer')
+    var preview = document.createElement('ox-board-viewer')
 
     preview.style.width = '100%'
     preview.style.height = '100%'

package/client/index.js

@@ -2,8 +2,6 @@ export * from './actions/board'
 
 export * from './board-modeller/board-modeller'
 export * from './board-modeller/edit-toolbar'
-export * from './board-player/board-player'
-export * from './board-viewer/board-viewer'
 export * from './board-provider'
 export * from './viewparts/board-selector'
 export * from './viewparts/board-creation-card'

package/client/pages/board-player-page.js

@@ -1,11 +1,12 @@
-import '../board-player/board-player'
 import './things-scene-components.import'
+import '@operato/board' // ox-board-player
 
-import gql from 'graphql-tag'
+import { PageView, client, store } from '@things-factory/shell'
 import { css, html } from 'lit-element'
-import { connect } from 'pwa-helpers/connect-mixin.js'
 
-import { client, PageView, store } from '@things-factory/shell'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+import { createBoardProvider } from '../board-provider'
+import gql from 'graphql-tag'
 
 const NOOP = () => {}
 
@@ -33,7 +34,7 @@ export class BoardPlayerPage extends connect(store)(PageView) {
           position: relative;
         }
 
-        board-player {
+        ox-board-player {
           flex: 1;
         }
 
@@ -60,6 +61,19 @@ export class BoardPlayerPage extends connect(store)(PageView) {
     ]
   }
 
+  connectedCallback() {
+    super.connectedCallback()
+
+    this.provider = createBoardProvider()
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    this.provider.despose()
+    delete this.provider
+  }
+
   async refresh() {
     if (!this._playGroupId) {
       return
@@ -126,7 +140,7 @@ export class BoardPlayerPage extends connect(store)(PageView) {
 
   updated(changes) {
     if (changes.has('_playGroupId')) {
-      this.shadowRoot.querySelector('board-player').stop()
+      this.shadowRoot.querySelector('ox-board-player').stop()
       this.refresh()
     }
   }
@@ -166,7 +180,7 @@ export class BoardPlayerPage extends connect(store)(PageView) {
           ></oops-note>
         `
       : html`
-          <board-player .boards=${this._boards}></board-player>
+          <ox-board-player .boards=${this._boards} .provider=${this.provider}></ox-board-player>
           <oops-spinner ?show=${this._showSpinner}></oops-spinner>
         `
   }
@@ -178,7 +192,7 @@ export class BoardPlayerPage extends connect(store)(PageView) {
       this.refresh()
     } else {
       this._playGroupId = null
-      this.shadowRoot.querySelector('board-player').stop()
+      this.shadowRoot.querySelector('ox-board-player').stop()
     }
   }
 }

package/client/pages/board-viewer-page.js

@@ -1,11 +1,13 @@
-import { buildLabelPrintCommand } from '@things-factory/barcode-base'
-import { client, PageView, store, gqlContext } from '@things-factory/shell'
-import gql from 'graphql-tag'
+import './things-scene-components.import'
+import '@operato/board' // ox-board-viewer
+
+import { PageView, client, gqlContext, store } from '@things-factory/shell'
 import { css, html } from 'lit-element'
+
+import { buildLabelPrintCommand } from '@things-factory/barcode-base'
 import { connect } from 'pwa-helpers/connect-mixin.js'
+import gql from 'graphql-tag'
 import { provider } from '../board-provider'
-import '../board-viewer/board-viewer'
-import './things-scene-components.import'
 
 const NOOP = () => {}
 
@@ -33,7 +35,7 @@ export class BoardViewerPage extends connect(store)(PageView) {
           position: relative;
         }
 
-        board-viewer {
+        ox-board-viewer {
           flex: 1;
         }
 
@@ -90,15 +92,13 @@ export class BoardViewerPage extends connect(store)(PageView) {
           ></oops-note>
         `
       : html`
-          <board-viewer .board=${this._board} .provider=${provider}></board-viewer>
+          <ox-board-viewer .board=${this._board} .provider=${provider}></ox-board-viewer>
           <oops-spinner ?show=${this._showSpinner}></oops-spinner>
         `
   }
 
   updated(changes) {
     if (changes.has('_boardId')) {
-      var boardViewerElement = this.shadowRoot.querySelector('board-viewer')
-      boardViewerElement && boardViewerElement.closeScene()
       this.refresh()
     }
   }
@@ -107,9 +107,17 @@ export class BoardViewerPage extends connect(store)(PageView) {
     if (this.active) {
       this._boardId = lifecycle.resourceId
     } else {
-      this._boardId = null
-      let boardViewer = this.shadowRoot.querySelector('board-viewer')
-      boardViewer && boardViewer.closeScene()
+      /*
+       * 비활성화된 페이지에서 render update가 발생하지 않으므로, 강제로 scene을 close 한다.
+       * 화면이 inactive 될 때, 굳이 scene을 close하는 이유는,
+       * 새로운 board가 선택되어 뷰어가 열릴 때, 기존 보드 잔상이 보이지 않도록 하기위해서이다.
+       */
+      if (this._boardId) {
+        let boardViewer = this.shadowRoot.querySelector('ox-board-viewer')
+        boardViewer && boardViewer.closeScene()
+      }
+
+      this._boardId = ''
     }
   }
 
@@ -119,6 +127,7 @@ export class BoardViewerPage extends connect(store)(PageView) {
 
   async refresh() {
     if (!this._boardId) {
+      this._board = null
       return
     }
 
@@ -170,7 +179,7 @@ export class BoardViewerPage extends connect(store)(PageView) {
   async getGrf() {
     var { labelRotation } = this._board.model
 
-    var { width, height, data } = (await this.shadowRoot.querySelector('board-viewer').getSceneImageData()) || {}
+    var { width, height, data } = (await this.shadowRoot.querySelector('ox-board-viewer').getSceneImageData()) || {}
     if (!width) {
       throw 'Cannot get SceneImageData...'
     }
@@ -179,7 +188,7 @@ export class BoardViewerPage extends connect(store)(PageView) {
   }
 
   async printTrick(image) {
-    await this.renderRoot.querySelector('board-viewer').printTrick(image)
+    await this.renderRoot.querySelector('ox-board-viewer').printTrick(image)
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/board-ui",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -26,6 +26,7 @@
   "dependencies": {
     "@material/mwc-list": "^0.22.1",
     "@material/mwc-select": "^0.22.1",
+    "@operato/board": "^0.2.18",
     "@polymer/iron-icon": "^3.0.1",
     "@polymer/iron-icons": "^3.0.1",
     "@polymer/paper-button": "^3.0.1",
@@ -37,13 +38,13 @@
     "@polymer/paper-listbox": "^3.0.1",
     "@polymer/paper-menu-button": "^3.0.1",
     "@polymer/paper-slider": "^3.0.1",
-    "@things-factory/barcode-base": "^4.0.1",
+    "@things-factory/barcode-base": "^4.0.4",
     "@things-factory/grist-ui": "^4.0.1",
-    "@things-factory/help": "^4.0.1",
-    "@things-factory/i18n-base": "^4.0.1",
-    "@things-factory/modeller-ui": "^4.0.1",
+    "@things-factory/help": "^4.0.4",
+    "@things-factory/i18n-base": "^4.0.4",
+    "@things-factory/modeller-ui": "^4.0.4",
     "file-saver": "^2.0.2",
     "sortablejs": "^1.10.2"
   },
-  "gitHead": "8a4a002853361ce3668e56830cd0258be758ea01"
+  "gitHead": "292d7c4e2675d228d6be474ea6a0525d26ac1657"
 }

package/client/board-player/board-player-style.js

@@ -1,199 +0,0 @@
-import { css } from 'lit-element'
-
-export const style = css`
-  :host {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    justify-content: center;
-    align-items: center;
-  }
-
-  :slotted(*) {
-    border: none;
-  }
-
-  ::slotted > * {
-    flex: 1;
-  }
-
-  board-wrapper {
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-
-  board-wrapper[front] {
-    background: black;
-  }
-
-  board-wrapper[back] {
-    background: black;
-  }
-
-  #control {
-    position: absolute;
-    bottom: 1vh;
-    width: 100vw;
-    max-width: 435px;
-    display: grid;
-    grid-template-columns: 42px 42px 1fr;
-    color: white;
-    justify-content: center;
-    align-items: center;
-    grid-auto-flow: dense;
-    padding: 5px;
-    box-sizing: border-box;
-    grid-template-rows: 12px 60px 12px;
-  }
-
-  #control[hidden] {
-    display: none;
-  }
-
-  #control > div > * {
-    cursor: pointer;
-  }
-
-  #joystick {
-    position: relative;
-    box-sizing: border-box;
-    border: 2px solid tomato;
-    background-color: #c34827;
-    box-shadow: 0 0 5px #000;
-    width: 100%;
-    height: 100%;
-    grid-column: 1 / span 2;
-    border-radius: 50%;
-    z-index: 2;
-    grid-row: 1 / span 3;
-  }
-
-  #joystick mwc-icon {
-    position: absolute;
-    display: block;
-    width: 20px;
-    height: 20px;
-    font-size: 25px;
-    line-height: 0.7;
-  }
-
-  mwc-icon#up {
-    left: 29px;
-  }
-
-  mwc-icon#left {
-    top: 32px;
-    left: -2px;
-  }
-
-  mwc-icon#play,
-  mwc-icon#pause {
-    left: 20px;
-    top: 20px;
-    width: 40px;
-    height: 40px;
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    border-radius: 50%;
-    background-color: rgba(0, 0, 0, 0.15);
-    font-size: 45px;
-    line-height: 0.9;
-  }
-
-  mwc-icon#right {
-    top: 31px;
-    left: 60px;
-  }
-
-  mwc-icon#down {
-    left: 29px;
-    top: 63px;
-  }
-
-  mwc-icon#pause {
-    text-indent: -2px;
-  }
-
-  #setting-container {
-    grid-column: 2 / span 2;
-    grid-row: 2;
-    gap: 0 10px;
-    border-radius: 12px;
-    background: rgba(0, 0, 0, 0.7);
-    height: 100%;
-    box-shadow: rgb(0, 0, 0) 0px 0px 5px;
-    display: grid;
-    grid-template-columns: 1fr 60px;
-    align-items: center;
-    padding-left: 60px;
-    padding-right: 5px;
-  }
-
-  #setting {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 0 10px;
-  }
-
-  #setting mwc-icon {
-    font-size: 22px;
-    color: rgba(255, 174, 53, 0.8);
-  }
-
-  #setting input {
-    width: 50px;
-    margin-right: 5px;
-    font-size: 14px;
-    background-color: transparent;
-    border: none;
-    border-bottom: 1px solid #fff;
-    color: #fff;
-    text-align: right;
-  }
-
-  #setting select {
-    border: none;
-    font-size: 14px;
-  }
-
-  #setting input:focus {
-    outline: none;
-  }
-
-  #schedule-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  #grid-setting-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  #etc {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    align-items: center;
-    justify-items: center;
-  }
-
-  #etc mwc-icon {
-    font-size: 30px;
-  }
-
-  #control [hidden] {
-    display: none;
-  }
-
-  @media screen and (max-width: 460px) {
-    #setting {
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr 1fr;
-    }
-  }
-`

package/client/board-player/board-player.js

@@ -1,279 +0,0 @@
-import { LitElement, html, css } from 'lit-element'
-
-import '@material/mwc-fab/mwc-fab'
-import '@material/mwc-icon/mwc-icon'
-import SwipeListener from 'swipe-listener'
-
-import './board-wrapper'
-
-import './player/board-player-carousel'
-
-import { togglefullscreen, exitfullscreen } from '@things-factory/utils'
-
-import { style } from './board-player-style'
-
-export class BoardPlayer extends LitElement {
-  constructor() {
-    super()
-
-    this.boards = []
-
-    this.playtime = 30
-    this.columns = 1
-    this.rows = 1
-    this.started = false
-    this.fullscreened = false
-  }
-
-  static get properties() {
-    return {
-      boards: Array,
-
-      playtime: Number,
-      columns: Number,
-      rows: Number,
-      started: Boolean,
-      playing: Boolean,
-      fullscreened: Boolean
-    }
-  }
-
-  static get styles() {
-    return [style]
-  }
-
-  render() {
-    return html`
-      <slot @mousemove=${e => this.onMousemove(e)} @transform=${e => this.onTransform(e)} tabindex="-1">
-        ${
-          this.started
-            ? html`
-                <board-player-carousel axis="y" .rows=${this.rows} .columns=${this.columns} player>
-                  ${this.boards.map(
-                    item => html`
-                      <board-wrapper page .sceneId=${item.id}> </board-wrapper>
-                    `
-                  )}
-                </board-player-carousel>
-              `
-            : html``
-        }
-      </slot>
-
-      <div id="control" @mouseover=${e => this.onMouseoverControl(e)} hidden>
-        <div id="joystick">
-          <mwc-icon id="up" @click=${e => this.onTapUp(e)}>keyboard_arrow_up</mwc-icon>
-          <mwc-icon id="left" @click=${e => this.onTapLeft(e)}>keyboard_arrow_left</mwc-icon>
-          <mwc-icon id="play" @click=${e => this.onTapPlay(e)} ?hidden=${this.playing}>play_arrow</mwc-icon>
-          <mwc-icon id="pause" @click=${e => this.onTapPause(e)} ?hidden=${!this.playing}>pause</mwc-icon>
-          <mwc-icon id="right" @click=${e => this.onTapRight(e)}>keyboard_arrow_right</mwc-icon>
-          <mwc-icon id="down" @click=${e => this.onTapDown(e)}>keyboard_arrow_down</mwc-icon>
-        </div>  
-
-        <div id="setting-container">
-          <div id="setting">
-            <div id="schedule-container">
-              <mwc-icon id="schedule">schedule</mwc-icon>
-              <input .value=${this.playtime} @change=${e => (this.playtime = e.target.value)}></input>
-                sec.
-            </div>
-            <div id="grid-setting-container">
-              <mwc-icon id="view_module">view_module</mwc-icon>            
-              <select .value=${this.rows} @change=${e => (this.rows = e.target.value)}>
-                ${[1, 2, 3, 4, 5].map(
-                  row => html`
-                    <option>${row}</option>
-                  `
-                )}
-              </select>
-              x
-              <select .value=${this.columns} @change=${e => (this.columns = e.target.value)}>
-                ${[1, 2, 3, 4, 5].map(
-                  column => html`
-                    <option>${column}</option>
-                  `
-                )}
-              </select>
-            </div>
-          </div>
-
-          <div id="etc">
-            <mwc-icon id="fullscreen" @click=${e => this.onTapFullscreen(e)} ?hidden=${this.fullscreened}
-            >fullscreen</mwc-icon>
-            <mwc-icon id="fullscreen-exit" @click=${e => this.onTapFullscreen(e)} ?hidden=${!this.fullscreened}
-            >fullscreen_exit</mwc-icon>
-            <mwc-icon id="close" @click=${e => this.onTapClose(e)}>close</mwc-icon>
-          </div>     
-        </div>   
-      </div>
-    `
-  }
-
-  firstUpdated() {
-    SwipeListener(this)
-
-    this.addEventListener('swipe', e => {
-      var directions = e.detail.directions
-
-      if (directions.left) {
-        this.onTapRight()
-      } else if (directions.right) {
-        this.onTapLeft()
-      } else if (directions.top) {
-        this.onTapDown()
-      } else if (directions.bottom) {
-        this.onTapUp()
-      }
-    })
-  }
-
-  updated(changes) {
-    if (changes.has('boards') || changes.has('columns') || changes.has('rows')) {
-      this.boards && this.boards.length > 0 ? this.restart() : this.stop()
-    } else if (changes.has('playtime') && this.playing) {
-      this._resetTransformTimer()
-    }
-  }
-
-  get control() {
-    return this.shadowRoot.getElementById('control')
-  }
-
-  get fullscreen() {
-    return this.shadowRoot.getElementById('fullscreen')
-  }
-
-  async _resetFadeTimer(stop) {
-    if (!this._control_animation) {
-      this._control_animation = this.control.animate(
-        [
-          {
-            opacity: 1,
-            easing: 'ease-in'
-          },
-          { opacity: 0 }
-        ],
-        { delay: 1000, duration: 2000 }
-      )
-    }
-
-    this.control.hidden = false
-
-    this._control_animation.cancel()
-    if (stop) return
-
-    try {
-      this._control_animation.play()
-      await this._control_animation.finished
-      this.control.hidden = true
-    } catch (e) {
-      /* cancelled */
-    }
-  }
-
-  _resetTransformTimer() {
-    clearTimeout(this._transfer_timer)
-
-    this.playing = true
-
-    if (this.currentPlayer) {
-      this._transfer_timer = setTimeout(() => {
-        if (this._transfer_timer) this.currentPlayer.next()
-      }, this.playtime * 1000)
-    }
-  }
-
-  onMousemove() {
-    this._resetFadeTimer()
-  }
-
-  onMouseoverControl() {
-    this._resetFadeTimer(true)
-  }
-
-  onTapFullscreen() {
-    togglefullscreen(
-      this,
-      () => {
-        this.fullscreened = true
-        this.focus()
-      },
-      () => {
-        this.fullscreened = false
-        this.focus()
-      }
-    )
-  }
-
-  onTransform() {
-    requestAnimationFrame(() => this.started && this.playing && this._resetTransformTimer())
-  }
-
-  onTapPlay(e) {
-    this._resetTransformTimer()
-  }
-
-  onTapPause(e) {
-    clearTimeout(this._transfer_timer)
-    this.playing = false
-  }
-
-  onTapLeft(e) {
-    this.currentPlayer.axis = 'y'
-    this.currentPlayer.previous()
-  }
-
-  onTapRight(e) {
-    this.currentPlayer.axis = 'y'
-    this.currentPlayer.next()
-  }
-
-  onTapUp(e) {
-    this.currentPlayer.axis = 'x'
-    this.currentPlayer.next()
-  }
-
-  onTapDown(e) {
-    this.currentPlayer.axis = 'x'
-    this.currentPlayer.previous()
-  }
-
-  onTapClose(e) {
-    if (this.fullscreened) {
-      exitfullscreen()
-    }
-
-    window.history.back()
-  }
-
-  async restart() {
-    await this.stop()
-    await this.start()
-  }
-
-  async start() {
-    if (!this.boards || this.boards.length == 0) return
-
-    this.started = true
-    this.playing = true
-
-    await this.renderComplete
-    this.currentPlayer = this.shadowRoot.querySelector(':not([style*="display: none"])[player]')
-
-    this._resetTransformTimer()
-    this._resetFadeTimer()
-
-    this.focus()
-  }
-
-  async stop() {
-    clearTimeout(this._transfer_timer)
-
-    this.currentPlayer && this.currentPlayer.stop()
-
-    await this.renderComplete
-    this.started = false
-  }
-}
-
-customElements.define('board-player', BoardPlayer)