@things-factory/board-ui 4.0.0-y.0 → 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,9 +1,12 @@
-import { client, PageView, store } from '@things-factory/shell'
-import gql from 'graphql-tag'
+import './things-scene-components.import'
+import '@operato/board' // ox-board-player
+
+import { PageView, client, store } from '@things-factory/shell'
 import { css, html } from 'lit-element'
+
 import { connect } from 'pwa-helpers/connect-mixin.js'
-import '../board-player/board-player'
-import './things-scene-components.import'
+import { createBoardProvider } from '../board-provider'
+import gql from 'graphql-tag'
 
 const NOOP = () => {}
 
@@ -31,7 +34,7 @@ export class BoardPlayerPage extends connect(store)(PageView) {
           position: relative;
         }
 
-        board-player {
+        ox-board-player {
           flex: 1;
         }
 
@@ -58,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
@@ -124,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()
     }
   }
@@ -164,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>
         `
   }
@@ -176,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/client/reducers/board.js

@@ -1,25 +1,25 @@
 import { ADD_BOARD_COMPONENTS } from '../actions/board.js'
-
-import rect from '../../assets/images/components/rect.png'
-import ellipse from '../../assets/images/components/ellipse.png'
-import donut from '../../assets/images/components/donut.png'
-import triangle from '../../assets/images/components/triangle.png'
-import polygon from '../../assets/images/components/polygon.png'
-import star from '../../assets/images/components/star.png'
-import line from '../../assets/images/components/line.png'
-import dash from '../../assets/images/components/dash.png'
-import singleArrow from '../../assets/images/components/single-arrow.png'
+import audio from '../../assets/images/components/audio.png'
 import bothArrow from '../../assets/images/components/both-arrow.png'
-import polyline from '../../assets/images/components/polyline.png'
-import text from '../../assets/images/components/text.png'
 import colorImage from '../../assets/images/components/color-image.png'
-import grayImage from '../../assets/images/components/gray-image.png'
-import gifImage from '../../assets/images/components/gif-image.png'
-import audio from '../../assets/images/components/audio.png'
 import container from '../../assets/images/components/container.png'
+import dash from '../../assets/images/components/dash.png'
+import donut from '../../assets/images/components/donut.png'
+import ellipse from '../../assets/images/components/ellipse.png'
+import gifImage from '../../assets/images/components/gif-image.png'
+import globalReference from '../../assets/images/components/global-reference.png'
+import grayImage from '../../assets/images/components/gray-image.png'
 import infoWindow from '../../assets/images/components/info-window.png'
+import line from '../../assets/images/components/line.png'
 import localReference from '../../assets/images/components/local-reference.png'
-import globalReference from '../../assets/images/components/global-reference.png'
+import polygon from '../../assets/images/components/polygon.png'
+import polyline from '../../assets/images/components/polyline.png'
+import popup from '../../assets/images/components/popup.png'
+import rect from '../../assets/images/components/rect.png'
+import singleArrow from '../../assets/images/components/single-arrow.png'
+import star from '../../assets/images/components/star.png'
+import text from '../../assets/images/components/text.png'
+import triangle from '../../assets/images/components/triangle.png'
 
 function shapes() {
   return [
@@ -366,6 +366,21 @@ function groupContainer() {
         lineDash: 'solid',
         lineCap: 'butt'
       }
+    },
+    {
+      type: 'popup',
+      description: 'popup window',
+      icon: popup,
+      model: {
+        type: 'popup',
+        left: 100,
+        top: 100,
+        width: 100,
+        height: 100,
+        fillStyle: '#fff',
+        strokeStyle: 'DarkGoldenRod',
+        hidden: true
+      }
     }
   ]
 }

package/helps/scene/component/popup.ko.md

@@ -0,0 +1,27 @@
+# Popup
+
+팝업 윈도우에 타겟 보드를 표시하는 컴포넌트이다.
+
+## Properties
+
+- board
+  - 팝업으로 보여주고자 하는 대상 보드를 선택한다.
+- show
+  - 팝업을 시작 시점에 보여주고자 할 때 설정한다.
+- started
+  - 속성 화면상에서 설정하지 않지만, 데이타 바인딩에서 이 속성을 true/false로 지정하면 팝업이 보이거나 닫혀지게 된다.
+  - boolean 타입
+- modal
+  - 팝업의 모달 여부를 설정한다.
+- closable
+  - close 버튼을 보여줄 것인지를 설정한다.
+- location
+  - 팝업 윈도우가 보여지게 될 위치를 지정한다.
+  - auto 로 지정하게되면, 이 Popup 컴포넌트의 맞은편 가장 많은 공간을 가진 위치에 보여지게된다.
+- value
+  - 팝업으로 보여주게될 대상 보드의 초기값을 지정한다.
+  - 데이타 바인딩 등에 의해서 value 값이 설정되게되면, 자동으로 started 속성이 true가 되어 팝업이 보여지게 된다.
+  - 팝업이 보여지는 상태에서 value 값이 재설정되면, 기존 팝업이 새로운 value값을 초기값으로 다시 보여지게 된다.
+- data
+  - 팝업이 사용자 정의 버튼 클릭으로 닫혀지게 되면, 해당 버튼의 data가 이 popup 컴포넌트의 data에 설정되게 된다.
+  - 팝업 실행 결과를 처리하는 의미로 활용된다.

package/helps/scene/component/popup.md

@@ -0,0 +1,27 @@
+# Popup
+
+This component displays the target board in a pop-up window.
+
+## Properties
+
+- board
+  - Select the target board to be displayed in a popup.
+- show
+  - Set when you want to show a popup at the start time.
+- started
+  - Although not shown on the property screen, if this property is set to true/false during data binding, the popup will be shown or closed.
+  - boolean type
+- modal
+  - Set whether the popup is modal.
+- closable
+  - Set whether to show the close button.
+- location
+  - Designate the position where the pop-up window will be displayed.
+  - If set to auto, it will be displayed in the position with the most space opposite this Popup component.
+- value
+  - Designate the initial value of the target board to be displayed as a popup.
+  - When the value value is set by data binding, the started property automatically becomes true and a popup is displayed.
+  - If the value is reset while the popup is already displayed, the existing popup will be re-opened with the new initial value.
+- data
+  - When the popup is closed by clicking a user-defined button, the data of the corresponding button is set in the data of this popup component.
+  - It is used in the meaning of processing the pop-up execution result.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/board-ui",
-  "version": "4.0.0-y.0",
+  "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.0-y.0",
-    "@things-factory/grist-ui": "^4.0.0-y.0",
-    "@things-factory/help": "^4.0.0-y.0",
-    "@things-factory/i18n-base": "^4.0.0-y.0",
-    "@things-factory/modeller-ui": "^4.0.0-y.0",
+    "@things-factory/barcode-base": "^4.0.4",
+    "@things-factory/grist-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": "64ee0f6547f90b1386024b975efc3b31a5e381cb"
+  "gitHead": "292d7c4e2675d228d6be474ea6a0525d26ac1657"
 }

package/translations/en.json

@@ -127,6 +127,7 @@
   "label.bevel": "bevel",
   "label.blank-stroke-style": "blank stoke style",
   "label.boolean": "boolean",
+  "label.board": "board",
   "label.border-color": "border color",
   "label.border-style": "border style",
   "label.border-type": "border type",
@@ -142,6 +143,7 @@
   "label.chart": "chart",
   "label.checked": "checked",
   "label.child-data-path": "child data path",
+  "label.closable": "closable",
   "label.cl-border-color": "CL border color",
   "label.cl-border-width": "CL border width",
   "label.class": "class",
@@ -296,6 +298,7 @@
   "label.minute-width": "Minute Width",
   "label.miter": "miter",
   "label.mm": "mm",
+  "label.modal": "modal",
   "label.mode": "mode",
   "label.move_to_admin": "Move to Administrator Page",
   "label.multi-axis": "Multi Axis",
@@ -395,6 +398,7 @@
   "label.shadowSize": "Size",
   "label.shelf-pattern": "shelf pattern",
   "label.shelves": "shelves",
+  "label.show": "show",
   "label.show-axis": "show axis",
   "label.show-end-value": "show end value",
   "label.show-legend": "show legend",

package/translations/ko.json

@@ -127,6 +127,7 @@
   "label.bevel": "비스듬한 면",
   "label.blank-stroke-style": "빈공간 선 스타일",
   "label.boolean": "True-False",
+  "label.board": "보드",
   "label.border-color": "경계부분 색상",
   "label.border-style": "테두리 스타일",
   "label.border-type": "테두리 종류",
@@ -142,6 +143,7 @@
   "label.chart": "차트",
   "label.checked": "체크됨",
   "label.child-data-path": "child data path",
+  "label.closable": "닫기 기능",
   "label.cl-border-color": "CL 경계 색상",
   "label.cl-border-width": "CL 경계 넓이",
   "label.class": "클래스",
@@ -296,6 +298,7 @@
   "label.minute-width": "분침 두께",
   "label.miter": "비스듬한 각모양",
   "label.mm": "mm",
+  "label.modal": "Modal",
   "label.mode": "모드",
   "label.move_to_admin": "관리자 페이지로 이동",
   "label.multi-axis": "2축",
@@ -389,6 +392,7 @@
   "label.second-width": "초침 두께",
   "label.section": "섹션",
   "label.series": "시리즈",
+  "label.show": "보이기",
   "label.shadow": "그림자효과",
   "label.shadowOffsetX": "X축 위치",
   "label.shadowOffsetY": "Y축 위치",

package/translations/ms.json

@@ -125,6 +125,7 @@
   "label.begin-type": "jenis permulaan",
   "label.bevel": "serong",
   "label.blank-stroke-style": "gaya strok kosong",
+  "label.board": "board",
   "label.boolean": "boolean",
   "label.border-color": "warna sempadan",
   "label.border-style": "gaya sempadan",
@@ -145,6 +146,7 @@
   "label.cl-border-width": "lebar sempadan CL",
   "label.class": "kelas",
   "label.client-id": "ID pelanggan",
+  "label.closable": "[ms] closable",
   "label.color-stops": "berhenti warna",
   "label.color": "warna",
   "label.columns": "lajur",
@@ -296,6 +298,7 @@
   "label.minute-width": "lebar minit",
   "label.miter": "miter",
   "label.mm": "mm",
+  "label.modal": "[ms] modal",
   "label.mode": "mod",
   "label.move_to_admin": "pindah ke page administrator",
   "label.multi-axis": "pelbagai paksi",
@@ -395,6 +398,7 @@
   "label.shadowSize": "saiz",
   "label.shelf-pattern": "corak rak",
   "label.shelves": "rak-rak",
+  "label.show": "[ms] show",
   "label.show-axis": "tunjuk paksi",
   "label.show-end-value": "tunjuk nilai akhir",
   "label.show-legend": "tunjuk legend",

package/translations/zh.json

@@ -125,6 +125,7 @@
   "label.begin-type": "起始类型",
   "label.bevel": "斜面",
   "label.blank-stroke-style": "空白斯托克风格",
+  "label.board": "看板",
   "label.boolean": "布尔值",
   "label.border-color": "边框颜色",
   "label.border-style": "边框样式",
@@ -141,6 +142,7 @@
   "label.chart": "图标",
   "label.checked": "已勾选",
   "label.child-data-path": "子数据路径",
+  "label.closable": "[zh] closable",
   "label.cl-border-color": "中间线颜色",
   "label.cl-border-width": "中间线宽度",
   "label.class": "分组",
@@ -297,6 +299,7 @@
   "label.minute-width": "分针厚度",
   "label.miter": "斜边",
   "label.mm": "毫米",
+  "label.modal": "[zh] modal",
   "label.mode": "mode",
   "label.move_to_admin": "移动到管理者页面。",
   "label.multi-axis": "多轴",
@@ -396,6 +399,7 @@
   "label.shadowSize": "大小",
   "label.shelf-pattern": "架子模式",
   "label.shelves": "站位高度",
+  "label.show": "[zh] show",
   "label.show-axis": "显示轴",
   "label.show-end-value": "显示结束值",
   "label.show-legend": "显示图列",