@things-factory/board-ui 4.0.1 → 4.0.6

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/board-modeller/edit-toolbar.js

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { LitElement, html } from 'lit-element'
+import { html, LitElement } from 'lit-element'
 
 import { style } from './edit-toolbar-style'
 
@@ -446,19 +446,7 @@ class EditToolbar extends LitElement {
 
     if (!copied) return
 
-    var textArea = document.createElement('textarea')
-    textArea.style.position = 'absolute'
-    textArea.style.opacity = '0'
-    textArea.value = copied
-    document.body.appendChild(textArea)
-
-    setTimeout(() => {
-      textArea.select()
-
-      let succeess = document.execCommand('copy')
-      document.body.removeChild(textArea)
-    }, 100)
-
+    navigator.clipboard.writeText(copied)
     this.cliped = copied
   }
 

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/client/pages/printable-board-viewer-page.js

@@ -1,4 +1,4 @@
-import { BoardViewerPage } from '@things-factory/board-ui'
+import { BoardViewerPage } from './board-viewer-page'
 
 function serialize(obj) {
   var str = []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/board-ui",
-  "version": "4.0.1",
+  "version": "4.0.6",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -24,8 +24,9 @@
     "migration:create": "node ../../node_modules/typeorm/cli.js migration:create -d ./server/migrations"
   },
   "dependencies": {
-    "@material/mwc-list": "^0.22.1",
-    "@material/mwc-select": "^0.22.1",
+    "@material/mwc-list": "^0.25.3",
+    "@material/mwc-select": "^0.25.3",
+    "@operato/board": "^0.2.29",
     "@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/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/barcode-base": "^4.0.6",
+    "@things-factory/grist-ui": "^4.0.6",
+    "@things-factory/help": "^4.0.6",
+    "@things-factory/i18n-base": "^4.0.6",
+    "@things-factory/modeller-ui": "^4.0.6",
     "file-saver": "^2.0.2",
     "sortablejs": "^1.10.2"
   },
-  "gitHead": "6803d6f150cc64cbb8b12a88d9131bb6fb9ad880"
+  "gitHead": "471247c3499ba439b074c7654ae8d8e9fc3972f0"
 }

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;
-    }
-  }
-`