@things-factory/board-ui 4.0.11 → 4.0.16

package/client/index.js

@@ -1,7 +1,5 @@
 export * from './actions/board'
 
-export * from './board-modeller/board-modeller'
-export * from './board-modeller/edit-toolbar'
 export * from './board-provider'
 export * from './viewparts/board-selector'
 export * from './viewparts/board-creation-card'

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

@@ -1,19 +1,15 @@
-import '../board-modeller/board-modeller'
-import '../board-modeller/edit-toolbar'
 import './things-scene-components.import'
+import '@operato/board/dist/src/ox-board-modeller.js'
 
-import { PageView, client, store } from '@things-factory/shell'
+import { PageView, client, gqlContext, store } from '@things-factory/shell'
 import { css, html } from 'lit-element'
-import { isMacOS, togglefullscreen } from '@things-factory/utils'
 
 import { ADD_BOARD_COMPONENTS } from '../actions/board'
 import { OxPropertyEditor } from '@operato/property-editor'
 import components from './things-scene-components-with-tools.import'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import gql from 'graphql-tag'
-import { gqlContext } from '@things-factory/shell'
 import { provider } from '../board-provider'
-import { saveAs } from 'file-saver'
 
 const NOOP = () => {}
 
@@ -62,7 +58,6 @@ export class BoardModellerPage extends connect(store)(PageView) {
       baseUrl: String,
       selected: Array,
       mode: Number,
-      // provider: Object,
       hideProperty: Boolean,
       overlay: String,
       scene: Object,
@@ -127,12 +122,8 @@ export class BoardModellerPage extends connect(store)(PageView) {
     }
   }
 
-  get editToolbar() {
-    return this.renderRoot.querySelector('#edittoolbar')
-  }
-
   get modeller() {
-    return this.renderRoot.querySelector('board-modeller')
+    return this.renderRoot.querySelector('ox-board-modeller')
   }
 
   async refresh() {
@@ -201,12 +192,10 @@ export class BoardModellerPage extends connect(store)(PageView) {
   pageUpdated(changes, lifecycle) {
     if (this.active) {
       this.boardId = lifecycle.resourceId
-      this.bindShortcutEvent()
     } else {
       this.boardId = null
       this.model = null
-      this.modeller.close()
-      this.unbindShortcutEvent()
+      this.modeller?.close()
     }
   }
 
@@ -230,20 +219,7 @@ export class BoardModellerPage extends connect(store)(PageView) {
           ></oops-note>
         `
       : html`
-          <edit-toolbar
-            id="edittoolbar"
-            .scene=${this.scene}
-            .board=${this.board}
-            .selected=${this.selected}
-            @hide-property-changed=${e => (this.hideProperty = e.detail.value)}
-            @open-preview=${e => this.onOpenPreview(e)}
-            @download-model=${e => this.onDownloadModel(e)}
-            @modeller-fullscreen=${e => this.onFullscreen(e)}
-          >
-            ${this.renderBrandingZone()}
-          </edit-toolbar>
-
-          <board-modeller
+          <ox-board-modeller
             .mode=${this.mode}
             @mode-changed=${e => {
               this.mode = e.detail.value
@@ -267,33 +243,13 @@ export class BoardModellerPage extends connect(store)(PageView) {
             .fonts=${this.fonts}
             .hideProperty=${this.hideProperty}
           >
-          </board-modeller>
+          </ox-board-modeller>
           <oops-spinner ?show=${this._showSpinner}></oops-spinner>
         `
 
     return html``
   }
 
-  renderBrandingZone() {
-    return html``
-  }
-
-  onOpenPreview() {
-    this.modeller.preview()
-  }
-
-  onDownloadModel() {
-    if (!this.scene) return
-
-    var model = JSON.stringify(this.model, null, 2)
-    var filename = (this.boardName || 'NONAME') + '-' + Date.now() + '.json'
-    saveAs(new Blob([model], { type: 'application/octet-stream' }), filename)
-  }
-
-  onFullscreen() {
-    togglefullscreen(this)
-  }
-
   async updateBoard() {
     try {
       this._showSpinner = true
@@ -344,31 +300,6 @@ export class BoardModellerPage extends connect(store)(PageView) {
   async saveBoard() {
     await this.updateBoard()
   }
-
-  bindShortcutEvent() {
-    var isMac = isMacOS()
-
-    // TODO: Global Hotkey에 대한 정의를 edit-toolbar에서 가져올 수 있도록 수정해야 함.
-    const GLOBAL_HOTKEYS = ['Digit1', 'Digit2', 'F11', 'KeyD', 'KeyP', 'KeyS']
-
-    this._shortcutHandler = e => {
-      var tagName = e.composedPath()[0].tagName
-      var isInput = tagName.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA'
-      var isGlobalHotkey = GLOBAL_HOTKEYS.includes(e.code)
-
-      if (!isGlobalHotkey && isInput) return
-      if (!this.editToolbar.onShortcut(e, isMac)) this.modeller.onShortcut(e, isMac)
-    }
-
-    document.addEventListener('keydown', this._shortcutHandler)
-  }
-
-  unbindShortcutEvent() {
-    if (this._shortcutHandler) {
-      document.removeEventListener('keydown', this._shortcutHandler)
-      delete this._shortcutHandler
-    }
-  }
 }
 
 customElements.define('board-modeller-page', BoardModellerPage)

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

@@ -1,5 +1,5 @@
 import './things-scene-components.import'
-import '@operato/board' // ox-board-player
+import '@operato/board/dist/src/ox-board-player.js'
 
 import { PageView, client, store } from '@things-factory/shell'
 import { css, html } from 'lit-element'

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

@@ -1,5 +1,5 @@
 import './things-scene-components.import'
-import '@operato/board' // ox-board-viewer
+import '@operato/board/dist/src/ox-board-viewer.js'
 
 import { PageView, client, gqlContext, store } from '@things-factory/shell'
 import { css, html } from 'lit-element'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/board-ui",
-  "version": "4.0.11",
+  "version": "4.0.16",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -26,25 +26,24 @@
   "dependencies": {
     "@material/mwc-list": "^0.25.3",
     "@material/mwc-select": "^0.25.3",
-    "@operato/board": "^0.2.35",
+    "@operato/board": "^0.2.47",
+    "@operato/popup": "^0.2.47",
     "@polymer/iron-icon": "^3.0.1",
     "@polymer/iron-icons": "^3.0.1",
     "@polymer/paper-button": "^3.0.1",
-    "@polymer/paper-dialog": "^3.0.1",
-    "@polymer/paper-dialog-scrollable": "^3.0.1",
     "@polymer/paper-dropdown-menu": "^3.0.1",
     "@polymer/paper-icon-button": "^3.0.2",
     "@polymer/paper-item": "^3.0.1",
     "@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.11",
-    "@things-factory/grist-ui": "^4.0.11",
-    "@things-factory/help": "^4.0.11",
-    "@things-factory/i18n-base": "^4.0.11",
-    "@things-factory/modeller-ui": "^4.0.11",
+    "@things-factory/barcode-base": "^4.0.16",
+    "@things-factory/grist-ui": "^4.0.16",
+    "@things-factory/help": "^4.0.16",
+    "@things-factory/i18n-base": "^4.0.16",
+    "@things-factory/modeller-ui": "^4.0.16",
     "file-saver": "^2.0.2",
     "sortablejs": "^1.10.2"
   },
-  "gitHead": "47745d8cdbe99f11d8d69bbcab3901c9771525a0"
+  "gitHead": "5a56e53e09d5b0a47b7446dbb2fa696232ad5414"
 }

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

@@ -1,237 +0,0 @@
-import '@material/mwc-fab'
-import '@operato/board' // ox-board-viewer
-import '@polymer/paper-dialog/paper-dialog'
-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()
-
-    this.boardName = ''
-    this.model = null
-    this.baseUrl = ''
-    this.selected = []
-    this.mode = 1
-    this.provider = null
-    this.hideProperty = false
-    this.overlay = null
-    this.scene = null
-    this.componentGroupList = []
-    this.fonts = []
-    this.propertyEditor = []
-
-    document.addEventListener('get-all-scene-component-ids', e => {
-      var { component, callback } = e.detail
-
-      if (!this.scene) return
-
-      var ids
-      if (component) ids = this.scene.findAll(component).map(c => c.model.id)
-      else ids = this.scene.ids.map(({ key, value }) => key)
-
-      ids = ids.filter(id => !!id).sort()
-      callback(ids)
-    })
-  }
-
-  static get properties() {
-    return {
-      boardName: String,
-      model: Object,
-      baseUrl: String,
-      selected: Array,
-      mode: Number,
-      provider: Object,
-      hideProperty: Boolean,
-      overlay: String,
-      scene: Object,
-      componentGroupList: Array,
-      fonts: Array,
-      propertyEditor: Array
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: row;
-          height: 100%;
-          overflow: hidden;
-        }
-
-        #scene-wrap {
-          flex: 1;
-          position: relative;
-
-          display: flex;
-          flex-direction: row;
-        }
-
-        things-scene-viewer {
-          flex: 1;
-          width: 100%;
-          height: 100%;
-        }
-
-        mwc-fab {
-          position: absolute;
-          right: 15px;
-          bottom: 15px;
-        }
-      `
-    ]
-  }
-
-  render() {
-    return html`
-      <component-toolbar
-        .scene=${this.scene}
-        .mode=${this.mode}
-        @mode-changed=${e => {
-          this.mode = e.detail.value
-        }}
-        .componentGroupList=${this.componentGroupList}
-        .group=${this.group}
-      >
-      </component-toolbar>
-
-      <div id="scene-wrap">
-        <things-scene-viewer
-          id="scene"
-          .scene=${this.scene}
-          @scene-changed=${e => {
-            this.scene = e.detail.value
-          }}
-          .model=${this.model}
-          .selected=${this.selected}
-          @selected-changed=${e => {
-            this.selected = e.detail.value
-          }}
-          .mode=${this.mode}
-          @mode-changed=${e => {
-            this.mode = e.detail.value
-          }}
-          fit="ratio"
-          .baseUrl=${this.baseUrl}
-          @contextmenu=${e => this.onContextMenu(e)}
-          .provider=${this.provider}
-          name="modeller"
-        >
-          <things-scene-layer type="selection-layer"></things-scene-layer>
-          <things-scene-layer type="modeling-layer"></things-scene-layer>
-          <things-scene-layer type="guide-layer">
-            <things-scene-property name="ruler" value="disabled"></things-scene-property>
-          </things-scene-layer>
-          <things-scene-layer type="shift-layer">
-            <things-scene-property name="text" value="${this.overlay}"></things-scene-property>
-            <things-scene-property name="alpha" value="0.3"></things-scene-property>
-            <things-scene-property name="fontFamily" value="arial"></things-scene-property>
-            <things-scene-property name="fontSize" value="30" type="number"></things-scene-property>
-            <things-scene-property name="fontColor" value="navy"></things-scene-property>
-            <things-scene-property name="textBaseline" value="top"></things-scene-property>
-            <things-scene-property name="textAlign" value="left"></things-scene-property>
-            <things-scene-property name="paddingTop" value="50" type="number"></things-scene-property>
-            <things-scene-property name="paddingLeft" value="50" type="number"></things-scene-property>
-          </things-scene-layer>
-          <things-scene-layer type="tag-layer"></things-scene-layer>
-          <things-scene-handler type="text-editor"></things-scene-handler>
-          <things-scene-handler type="move-handler"></things-scene-handler>
-        </things-scene-viewer>
-
-        <mwc-fab icon="save" @click=${e => this.onTapSave(e)} title="save"> </mwc-fab>
-      </div>
-
-      <property-sidebar
-        .scene=${this.scene}
-        .selected=${this.selected}
-        .collapsed=${this.hideProperty}
-        .fonts=${this.fonts}
-        .propertyEditor=${this.propertyEditor}
-      >
-      </property-sidebar>
-    `
-  }
-
-  close() {
-    this.model = null
-    this.requestUpdate()
-  }
-
-  get modellingContainer() {
-    return this.renderRoot.getElementById('scene-wrap')
-  }
-
-  onShortcut(e, MacOS) {
-    if (MacOS) var ctrlKey = e.metaKey
-    else var ctrlKey = e.ctrlKey
-
-    switch (e.code) {
-      case 'KeyS':
-        if (ctrlKey) {
-          this.onTapSave()
-          e.preventDefault()
-        }
-        break
-    }
-  }
-
-  preview() {
-    this.previewModel = this.scene?.model ? JSON.parse(JSON.stringify(this.scene.model)) : null
-
-    /*
-     * paper-dialog appears behind backdrop when inside a <app-header-layout ..
-     * https://github.com/PolymerElements/paper-dialog/issues/152
-     **/
-
-    var preview = document.createElement('ox-board-viewer')
-
-    preview.style.width = '100%'
-    preview.style.height = '100%'
-    preview.style.margin = '0'
-    preview.style.padding = '0'
-    preview.style.flex = 1
-    preview.provider = this.provider
-    preview.board = {
-      id: 'preview',
-      model: this.previewModel
-    }
-    preview.baseUrl = this.baseUrl
-
-    var dialog = document.createElement('paper-dialog')
-
-    dialog.style.width = '100%'
-    dialog.style.height = '100%'
-    dialog.style.display = 'flex'
-    dialog.style['flex-direction'] = 'column'
-    dialog.setAttribute('with-backdrop', true)
-    dialog.setAttribute('auto-fit-on-attach', true)
-    dialog.setAttribute('always-on-top', true)
-    dialog.addEventListener('iron-overlay-closed', () => {
-      preview.board = null
-      dialog.parentNode.removeChild(dialog)
-    })
-
-    dialog.appendChild(preview)
-    document.body.appendChild(dialog)
-
-    dialog.open()
-
-    requestAnimationFrame(() => {
-      dispatchEvent(new Event('resize'))
-    })
-  }
-
-  onTapSave() {
-    this.dispatchEvent(new CustomEvent('save-model', { bubbles: true, composed: true, detail: { model: this.model } }))
-  }
-
-  onContextMenu() {}
-}
-
-customElements.define('board-modeller', BoardModeller)

package/client/board-modeller/component-toolbar/component-menu.js

@@ -1,153 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, html, css } from 'lit-element'
-
-import { deepClone } from '@things-factory/utils'
-import { ScrollbarStyles } from '@things-factory/styles'
-
-import noImage from '../../../assets/images/components/no-image.png'
-
-class ComponentMenu extends LitElement {
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          align-content: stretch;
-
-          background-color: var(--component-menu-background-color);
-          margin: 0px;
-          padding: 0px;
-
-          width: 180px;
-          height: 100%;
-
-          overflow: hidden;
-
-          border: 2px solid var(--component-menu-border-color);
-          box-sizing: border-box;
-
-          position: absolute;
-          top: 0px;
-
-          z-index: 1;
-        }
-
-        h2 {
-          background-color: var(--component-menu-border-color);
-          padding: 1px 5px;
-          margin: 0;
-          font: var(--component-menu-title);
-          color: #fff;
-          text-transform: capitalize;
-        }
-
-        [templates] {
-          flex: 1;
-
-          display: block;
-          margin: 0;
-          padding: 0;
-          overflow-y: auto;
-
-          background-color: var(--component-menu-background-color);
-        }
-
-        [template] {
-          display: flex;
-          align-items: center;
-          min-height: var(--component-menu-item-icon-size);
-          padding: 0 5px 0 0;
-          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-          font-size: 11px;
-          color: var(--component-menu-item-color);
-        }
-
-        [template]:hover,
-        [template]:focus {
-          color: var(--component-menu-item-hover-color);
-          font-weight: bold;
-          cursor: pointer;
-        }
-
-        [template] img {
-          margin: 5px;
-          width: var(--component-menu-item-icon-size);
-          height: var(--component-menu-item-icon-size);
-        }
-      `
-    ]
-  }
-
-  static get properties() {
-    return {
-      groups: Object,
-      scene: Object,
-      group: String,
-      templates: Array
-    }
-  }
-
-  render() {
-    return this.group
-      ? html`
-          <h2 onclick=${e => e.stopPropagation()}>${this.group} list</h2>
-
-          <div templates>
-            ${(this.templates || []).map(
-              template => html`
-                <div @click=${this.onClickTemplate} data-type=${template.type} template>
-                  <img src=${this.templateIcon(template)} />${template.type}
-                </div>
-              `
-            )}
-          </div>
-        `
-      : html``
-  }
-
-  updated(changes) {
-    if (changes.has('group')) {
-      if (!this.group) {
-        this.style.display = 'none'
-        this.templates = []
-      } else {
-        this.style.display = 'flex'
-        this.templates = this.groups.find(g => g.name === this.group).templates
-      }
-    }
-  }
-
-  onClickTemplate(e) {
-    var item = e.target
-
-    while (!(item !== this) || !item || !item.hasAttribute || !item.hasAttribute('data-type')) {
-      item = item.parentElement
-    }
-
-    var type = item.getAttribute('data-type')
-
-    if (!type) {
-      return
-    }
-
-    var group = this.groups.find(g => g.name == this.group)
-
-    if (this.scene && group) {
-      var template = group.templates.find(template => template.type == type)
-      template && this.scene.add(deepClone(template.model), { cx: 200, cy: 200 })
-    }
-
-    this.group = null
-  }
-
-  templateIcon(template) {
-    return template.icon || noImage
-  }
-}
-
-customElements.define('component-menu', ComponentMenu)