@things-factory/board-ui 6.1.23 → 6.1.28

package/client/{board-provider.js → board-provider.ts}

@@ -1,12 +1,12 @@
 import gql from 'graphql-tag'
 
-import { create, error, ReferenceMap } from '@hatiolab/things-scene'
+import { create, error, ReferenceMap, Scene } from '@hatiolab/things-scene'
 import { DataStorage } from '@operato/board'
 import { client, gqlContext, subscribe } from '@operato/graphql'
 
 export function createBoardProvider() {
-  var _provider = new ReferenceMap(
-    async (boardId, resolve, reject) => {
+  var _provider = new ReferenceMap<Scene>(
+    async (boardId, resolve, reject): Promise<any> => {
       try {
         const response = await client.query({
           query: gql`
@@ -29,7 +29,7 @@ export function createBoardProvider() {
 
         var model = JSON.parse(board.model)
 
-        var scene
+        var scene: Scene
 
         try {
           scene = await provider.get(boardId)
@@ -38,7 +38,7 @@ export function createBoardProvider() {
           scene = create({
             model,
             mode: 0,
-            refProvider: provider,
+            refProvider: provider as any,
             dataStorage: new DataStorage(boardId),
             dataSubscriptionProvider: {
               subscribe: async (tag, component) => {

package/client/data-grist/{board-editor.js → board-editor.ts}

@@ -2,49 +2,48 @@ import '@operato/board/ox-board-selector.js'
 import './board-renderer'
 
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 
+import { OxGristEditor } from '@operato/data-grist'
 import { i18next } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 
-export class BoardEditor extends LitElement {
-  static get properties() {
-    return {
-      value: Object,
-      column: Object,
-      record: Object,
-      row: Number
-    }
-  }
+@customElement('board-editor')
+export class BoardEditor extends OxGristEditor {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
 
-  static get styles() {
-    return css`
-      :host {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
+      box-sizing: border-box;
 
-        box-sizing: border-box;
+      width: 100%;
+      height: 100%;
 
-        width: 100%;
-        height: 100%;
+      border: 0;
+      background-color: transparent;
 
-        border: 0;
-        background-color: transparent;
+      font: var(--grist-object-editor-font);
+      color: var(--grist-object-editor-color);
+
+      justify-content: inherit;
+    }
 
-        font: var(--grist-object-editor-font);
-        color: var(--grist-object-editor-color);
+    board-renderer {
+      display: flex;
+      flex: auto;
 
-        justify-content: inherit;
-      }
+      justify-content: inherit;
+    }
+  `
 
-      board-renderer {
-        display: flex;
-        flex: auto;
+  @property({ type: Object }) value: any
+  @property({ type: Object }) column: any
+  @property({ type: Object }) record: any
+  @property({ type: Number }) row?: number
 
-        justify-content: inherit;
-      }
-    `
-  }
+  popup
 
   render() {
     var { boardViewerPage } = this.column.record.options || {}
@@ -56,7 +55,7 @@ export class BoardEditor extends LitElement {
 
     await this.updateComplete
 
-    this.shadowRoot.addEventListener('click', e => {
+    this.renderRoot.addEventListener('click', e => {
       e.stopPropagation()
 
       this.openSelector()
@@ -110,5 +109,3 @@ export class BoardEditor extends LitElement {
     })
   }
 }
-
-customElements.define('board-editor', BoardEditor)

package/client/data-grist/{board-renderer.js → board-renderer.ts}

@@ -2,8 +2,10 @@ import '@material/mwc-icon'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 
-import { client, gqlContext, navigate } from '@things-factory/shell'
+import { navigate } from '@operato/shell'
+import { client, gqlContext } from '@operato/graphql'
 
 const FETCH_BOARD_GQL = id => {
   return gql`
@@ -18,9 +20,10 @@ const FETCH_BOARD_GQL = id => {
 `
 }
 
+@customElement('board-renderer')
 class BoardRendererElement extends LitElement {
-  static get styles() {
-    return css`
+  static styles = [
+    css`
       :host {
         display: block;
         position: relative;
@@ -68,15 +71,11 @@ class BoardRendererElement extends LitElement {
         background-color: var(--board-renderer-icon-view-background-color);
       }
     `
-  }
+  ]
 
-  static get properties() {
-    return {
-      value: Object,
-      boardViewerPage: String,
-      _value: Object
-    }
-  }
+  @property({ type: Object }) value: any
+  @property({ type: String }) boardViewerPage?: string
+  @property({ type: Object }) _value: any
 
   async updated(changes) {
     if (changes.has('value')) {
@@ -128,8 +127,6 @@ class BoardRendererElement extends LitElement {
   }
 }
 
-customElements.define('board-renderer', BoardRendererElement)
-
 export const BoardRenderer = (value, column, record) => {
   var { boardViewerPage = '' } = column.record.options || {}
 

package/client/pages/{board-modeller-page.js → board-modeller-page.ts}

@@ -3,17 +3,20 @@ import '@operato/board/ox-board-modeller.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { BoardModeller } from '@operato/board/ox-board-modeller.js'
 import { OxPropertyEditor } from '@operato/property-editor'
-import { client, gqlContext, PageView, store } from '@things-factory/shell'
+import { PageView, store } from '@operato/shell'
+import { client, gqlContext } from '@operato/graphql'
 
 import { provider } from '../board-provider'
 import components from './things-scene-components-with-tools.import'
 
 const NOOP = () => {}
 
+@customElement('board-modeller-page')
 export class BoardModellerPage extends connect(store)(PageView) {
   constructor() {
     super()
@@ -51,49 +54,46 @@ export class BoardModellerPage extends connect(store)(PageView) {
     this.componentGroupList = BoardModeller.groups
   }
 
-  static get properties() {
-    return {
-      boardId: String,
-      boardName: String,
-      model: Object,
-      baseUrl: String,
-      selected: Array,
-      mode: Number,
-      hideProperty: Boolean,
-      overlay: String,
-      scene: Object,
-      componentGroupList: Array,
-      fonts: Array,
-      propertyEditor: Array,
-      preparing: Boolean
-    }
-  }
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
 
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-
-          overflow: hidden;
-          position: relative;
-        }
-
-        board-modeller {
-          flex: 1;
-        }
-
-        oops-note {
-          display: block;
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
-        }
-      `
-    ]
-  }
+        overflow: hidden;
+        position: relative;
+      }
+
+      board-modeller {
+        flex: 1;
+      }
+
+      oops-note {
+        display: block;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+    `
+  ]
+
+  @property({ type: String }) boardId?: string | null
+  @property({ type: String }) boardName?: string
+  @property({ type: Object }) model: any
+  @property({ type: String }) baseUrl?: string
+  @property({ type: Array }) selected: any
+  @property({ type: Number }) mode?: number
+  @property({ type: Boolean }) hideProperty?: boolean
+  @property({ type: String }) overlay?: string | null
+  @property({ type: Object }) scene: any
+  @property({ type: Array }) componentGroupList?: any
+  @property({ type: Array }) fonts: any
+  @property({ type: Array }) propertyEditor: any
+  @property({ type: Boolean }) preparing?: boolean
+
+  board: any
+  @query('ox-board-modeller') modeller?: BoardModeller
 
   get context() {
     return {
@@ -111,10 +111,6 @@ export class BoardModellerPage extends connect(store)(PageView) {
     }
   }
 
-  get modeller() {
-    return this.renderRoot.querySelector('ox-board-modeller')
-  }
-
   async refresh() {
     if (!this.boardId) {
       this.board = null
@@ -197,14 +193,7 @@ export class BoardModellerPage extends connect(store)(PageView) {
     var oops = !this.preparing && !this.model && this.oopsNote
 
     return oops
-      ? html`
-          <oops-note
-            icon=${oops.icon}
-            title=${oops.title}
-            description=${oops.description}
-            @click=${oops.click || NOOP}
-          ></oops-note>
-        `
+      ? html` <oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></oops-note> `
       : html`
           <ox-board-modeller
             .mode=${this.mode}
@@ -285,5 +274,3 @@ export class BoardModellerPage extends connect(store)(PageView) {
     await this.updateBoard()
   }
 }
-
-customElements.define('board-modeller-page', BoardModellerPage)

package/client/pages/{board-player-page.js → board-player-page.ts}

@@ -3,65 +3,68 @@ import '@operato/board/ox-board-player.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { createBoardProvider } from '../board-provider'
 import { store, PageView } from '@operato/shell'
 import { clientSettingStore } from '@operato/shell/object-store.js'
 import { client, subscribe } from '@operato/graphql'
+import { ReferenceMap } from '@hatiolab/things-scene'
+import { BoardPlayer } from '@operato/board/ox-board-player.js'
 
 const NOOP = () => {}
 
+@customElement('board-player-page')
 export class BoardPlayerPage extends connect(store)(PageView) {
-  static get properties() {
-    return {
-      _playGroup: Object,
-      _playGroupId: String,
-      _boards: Array,
-      _baseUrl: String,
-      _showSpinner: Boolean
-    }
-  }
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+
+        overflow: hidden;
+        position: relative;
+      }
 
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          width: 100%;
-          height: 100%;
-
-          overflow: hidden;
-          position: relative;
-        }
+      ox-board-player {
+        flex: 1;
+      }
 
-        ox-board-player {
-          flex: 1;
-        }
+      oops-spinner {
+        display: none;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
 
-        oops-spinner {
-          display: none;
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
-        }
+      oops-spinner[show] {
+        display: block;
+      }
 
-        oops-spinner[show] {
-          display: block;
-        }
+      oops-note {
+        display: block;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+    `
+  ]
 
-        oops-note {
-          display: block;
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
-        }
-      `
-    ]
-  }
+  @property({ type: Object }) _playGroup: any
+  @property({ type: String }) _playGroupId?: string | null
+  @property({ type: Array }) _boards: any
+  @property({ type: String }) _baseUrl?: string
+  @property({ type: Boolean }) _showSpinner?: boolean
+
+  provider?: ReferenceMap<unknown> & { dispose?: () => void }
+  subscriptionForAutoRefresh
+
+  @query('ox-board-player') boardPlayer?: BoardPlayer
 
   connectedCallback() {
     super.connectedCallback()
@@ -72,7 +75,7 @@ export class BoardPlayerPage extends connect(store)(PageView) {
   disconnectedCallback() {
     super.disconnectedCallback()
 
-    this.provider.despose()
+    this.provider!.dispose!()
     delete this.provider
   }
 
@@ -145,7 +148,7 @@ export class BoardPlayerPage extends connect(store)(PageView) {
 
   updated(changes) {
     if (changes.has('_playGroupId')) {
-      this.shadowRoot.querySelector('ox-board-player').stop()
+      this.boardPlayer!.stop()
       this.refresh()
     }
   }
@@ -176,14 +179,7 @@ export class BoardPlayerPage extends connect(store)(PageView) {
     var oops = !this._showSpinner && !this._playGroup && this.oopsNote
 
     return oops
-      ? html`
-          <oops-note
-            icon=${oops.icon}
-            title=${oops.title}
-            description=${oops.description}
-            @click=${oops.click || NOOP}
-          ></oops-note>
-        `
+      ? html` <oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></oops-note> `
       : html`
           <ox-board-player .boards=${this._boards} .provider=${this.provider}></ox-board-player>
           <oops-spinner ?show=${this._showSpinner}></oops-spinner>
@@ -199,7 +195,7 @@ export class BoardPlayerPage extends connect(store)(PageView) {
       this.stopSubscribing()
 
       this._playGroupId = null
-      this.shadowRoot.querySelector('ox-board-player').stop()
+      this.boardPlayer!.stop()
     }
   }
 
@@ -240,5 +236,3 @@ export class BoardPlayerPage extends connect(store)(PageView) {
     delete this.subscriptionForAutoRefresh
   }
 }
-
-customElements.define('board-player-page', BoardPlayerPage)

package/client/pages/{board-viewer-page.js → board-viewer-page.ts}

@@ -3,9 +3,11 @@ import '@operato/board/ox-board-viewer.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { buildLabelPrintCommand } from '@operato/barcode'
+import { BoardViewer } from '@operato/board'
 import { store, PageView } from '@operato/shell'
 import { client, gqlContext, subscribe } from '@operato/graphql'
 import { clientSettingStore } from '@operato/shell/object-store.js'
@@ -14,57 +16,56 @@ import { provider } from '../board-provider'
 
 const NOOP = () => {}
 
+@customElement('board-viewer-page')
 export class BoardViewerPage extends connect(store)(PageView) {
-  static get properties() {
-    return {
-      _board: Object,
-      _boardId: String,
-      _baseUrl: String,
-      _interactive: Boolean,
-      _showSpinner: Boolean
-    }
-  }
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
 
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
+        width: 100%; /* 전체화면보기를 위해서 필요함. */
+        height: 100%;
 
-          width: 100%; /* 전체화면보기를 위해서 필요함. */
-          height: 100%;
+        overflow: hidden;
+        position: relative;
+      }
 
-          overflow: hidden;
-          position: relative;
-        }
+      ox-board-viewer {
+        flex: 1;
+      }
 
-        ox-board-viewer {
-          flex: 1;
-        }
+      oops-spinner {
+        display: none;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
 
-        oops-spinner {
-          display: none;
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
-        }
+      oops-spinner[show] {
+        display: block;
+      }
 
-        oops-spinner[show] {
-          display: block;
-        }
+      oops-note {
+        display: block;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+    `
+  ]
 
-        oops-note {
-          display: block;
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
-        }
-      `
-    ]
-  }
+  @property({ type: Object }) _board: any
+  @property({ type: String }) _boardId?: string
+  @property({ type: String }) _baseUrl?: string
+  @property({ type: Boolean }) _interactive?: boolean
+  @property({ type: Boolean }) _showSpinner?: boolean
+
+  subscriptionForAutoRefresh
+
+  @query('ox-board-viewer') boardViewer!: BoardViewer
 
   get oopsNote() {
     return {
@@ -87,14 +88,7 @@ export class BoardViewerPage extends connect(store)(PageView) {
     var oops = !this._showSpinner && !this._board && this.oopsNote
 
     return oops
-      ? html`
-          <oops-note
-            icon=${oops.icon}
-            title=${oops.title}
-            description=${oops.description}
-            @click=${oops.click || NOOP}
-          ></oops-note>
-        `
+      ? html` <oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></oops-note> `
       : html`
           <ox-board-viewer
             .board=${this._board}
@@ -125,7 +119,7 @@ export class BoardViewerPage extends connect(store)(PageView) {
       this.stopSubscribing()
 
       if (this._boardId) {
-        let boardViewer = this.shadowRoot.querySelector('ox-board-viewer')
+        let boardViewer = this.boardViewer
         boardViewer && boardViewer.closeScene()
       }
 
@@ -231,17 +225,15 @@ export class BoardViewerPage extends connect(store)(PageView) {
   async getGrf() {
     var { labelRotation } = this._board.model
 
-    var { width, height, data } = (await this.shadowRoot.querySelector('ox-board-viewer').getSceneImageData()) || {}
-    if (!width) {
+    var { width, height, data } = (await this.boardViewer.getSceneImageData()) || {}
+    if (!width || !data) {
       throw 'Cannot get SceneImageData...'
     }
 
-    return buildLabelPrintCommand(data, width, height, labelRotation)
+    return buildLabelPrintCommand(data as Uint8ClampedArray, width, height, labelRotation, false, false)
   }
 
   async printTrick(image) {
-    await this.renderRoot.querySelector('ox-board-viewer').printTrick(image)
+    await this.boardViewer.printTrick(image)
   }
 }
-
-customElements.define('board-viewer-page', BoardViewerPage)

package/client/pages/{printable-board-viewer-page.js → printable-board-viewer-page.ts}

@@ -1,7 +1,7 @@
 import { BoardViewerPage } from './board-viewer-page'
 
 function serialize(obj) {
-  var str = []
+  var str = [] as string[]
   for (var p in obj)
     if (obj.hasOwnProperty(p)) {
       str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]))
@@ -32,7 +32,7 @@ export class PrintableBoardViewerPage extends BoardViewerPage {
           const image = await this.fetchImage()
           await this.printTrick(image)
 
-          return this
+          return this as any
         }
       }
     }