@things-factory/board-ui 4.0.9 → 4.0.13

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

@@ -1,12 +1,13 @@
 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'
 
+import { OxPopup } from '@operato/popup'
+
 export class BoardModeller extends LitElement {
   constructor() {
     super()
@@ -63,6 +64,7 @@ export class BoardModeller extends LitElement {
           flex-direction: row;
           height: 100%;
           overflow: hidden;
+          position: relative;
         }
 
         #scene-wrap {
@@ -84,6 +86,26 @@ export class BoardModeller extends LitElement {
           right: 15px;
           bottom: 15px;
         }
+
+        ox-popup {
+          width: 90%;
+          height: 90%;
+          left: 50%;
+          top: 50%;
+          transform: translateX(-50%) translateY(-50%);
+          background: var(--secondary-color, black);
+
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+        }
+
+        ox-board-viewer {
+          width: 98%;
+          height: 98%;
+          margin: auto;
+          padding: 0;
+        }
       `
     ]
   }
@@ -182,45 +204,15 @@ export class BoardModeller extends LitElement {
   }
 
   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 = {
+    const board = {
       id: 'preview',
-      model: this.previewModel
+      model: this.scene?.model ? JSON.parse(JSON.stringify(this.scene.model)) : null
     }
-    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()
+    OxPopup.open({
+      template: html` <ox-board-viewer .provider=${this.provider} .board=${board}></ox-board-viewer> `,
+      parent: this.renderRoot
+    })
 
     requestAnimationFrame(() => {
       dispatchEvent(new Event('resize'))

package/client/board-modeller/editors/board-editor-property.js

@@ -2,16 +2,15 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { html } from 'lit-element'
 import '@things-factory/i18n-base'
-
 import './things-editor-board-selector'
 
-import { ThingsEditorProperty, ThingsEditorPropertyStyles } from '@things-factory/modeller-ui'
+import { OxPropertyEditor } from '@operato/property-editor'
+import { html } from 'lit-element'
 
-class PropertyEditorBoardSelector extends ThingsEditorProperty {
+class PropertyEditorBoardSelector extends OxPropertyEditor {
   static get styles() {
-    return [ThingsEditorPropertyStyles]
+    return [...OxPropertyEditor.styles]
   }
 
   editorTemplate(props) {

package/client/board-modeller/property-sidebar/specifics/specific-properties-builder.js

@@ -2,9 +2,11 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { LitElement } from 'lit-element'
 import '@things-factory/modeller-ui/client/editors/things-editor-property'
 
+import { LitElement } from 'lit-element'
+import { OxPropertyEditor } from '@operato/property-editor'
+
 /**
 모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.
 
@@ -83,7 +85,7 @@ class SpecificPropertiesBuilder extends LitElement {
   _onPropsChanged(props) {
     this.renderRoot.textContent = ''
     ;(props || []).forEach(prop => {
-      let elementType = this.propertyEditor[prop.type]
+      let elementType = OxPropertyEditor.getEditor(prop.type)
       if (!elementType) {
         console.warn('Property Editor not defined', prop.type)
         return

package/client/bootstrap.js

@@ -1,14 +1,12 @@
-import { store } from '@things-factory/shell'
+import './board-modeller/editors/board-editor-property'
 
-import { ADD_MODELLER_EDITORS } from '@things-factory/modeller-ui'
 import { registerEditor, registerRenderer } from '@things-factory/grist-ui'
 
-import board from './reducers/board'
-
-import { BoardRenderer } from './data-grist/board-renderer'
 import { BoardEditor } from './data-grist/board-editor'
-
-import './board-modeller/editors/board-editor-property'
+import { BoardRenderer } from './data-grist/board-renderer'
+import { OxPropertyEditor } from '@operato/property-editor'
+import board from './reducers/board'
+import { store } from '@things-factory/shell'
 
 export default function bootstrap() {
   registerRenderer('board', BoardRenderer)
@@ -16,10 +14,7 @@ export default function bootstrap() {
 
   store.addReducers({ board })
 
-  store.dispatch({
-    type: ADD_MODELLER_EDITORS,
-    editors: {
-      'board-selector': 'property-editor-board-selector'
-    }
+  OxPropertyEditor.register({
+    'board-selector': 'property-editor-board-selector'
   })
 }

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

@@ -1,23 +1,19 @@
-import { html, css } from 'lit-element'
-import { gqlContext } from '@things-factory/shell'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-import gql from 'graphql-tag'
-
-import { saveAs } from 'file-saver'
-
-import { store, PageView, client } from '@things-factory/shell'
-import { togglefullscreen, isMacOS } from '@things-factory/utils'
-
-import { provider } from '../board-provider'
-
-import { ADD_MODELLER_EDITORS } from '@things-factory/modeller-ui'
-import { ADD_BOARD_COMPONENTS } from '../actions/board'
-
 import '../board-modeller/board-modeller'
 import '../board-modeller/edit-toolbar'
-
 import './things-scene-components.import'
+
+import { PageView, client, 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 = () => {}
 
@@ -43,10 +39,7 @@ export class BoardModellerPage extends connect(store)(PageView) {
         })
     }
 
-    store.dispatch({
-      type: ADD_MODELLER_EDITORS,
-      editors: addedEditors
-    })
+    OxPropertyEditor.register(addedEditors)
 
     this.boardName = ''
     this.model = null
@@ -59,7 +52,6 @@ export class BoardModellerPage extends connect(store)(PageView) {
     this.componentGroupList = []
     this.fonts = []
     this.board = null
-    this.propertyEditor = []
   }
 
   static get properties() {
@@ -220,7 +212,6 @@ export class BoardModellerPage extends connect(store)(PageView) {
 
   stateChanged(state) {
     this.baseUrl = state.route.rootPath
-    this.propertyEditor = state.modeller.editors
 
     this.componentGroupList = state.board.templates
     this.fonts = state.font
@@ -274,7 +265,6 @@ export class BoardModellerPage extends connect(store)(PageView) {
             @save-model=${e => this.saveBoard()}
             .componentGroupList=${this.componentGroupList}
             .fonts=${this.fonts}
-            .propertyEditor=${this.propertyEditor}
             .hideProperty=${this.hideProperty}
           >
           </board-modeller>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/board-ui",
-  "version": "4.0.9",
+  "version": "4.0.13",
   "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.43",
+    "@operato/popup": "^0.2.43",
     "@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.9",
-    "@things-factory/grist-ui": "^4.0.9",
-    "@things-factory/help": "^4.0.9",
-    "@things-factory/i18n-base": "^4.0.9",
-    "@things-factory/modeller-ui": "^4.0.9",
+    "@things-factory/barcode-base": "^4.0.13",
+    "@things-factory/grist-ui": "^4.0.13",
+    "@things-factory/help": "^4.0.13",
+    "@things-factory/i18n-base": "^4.0.13",
+    "@things-factory/modeller-ui": "^4.0.13",
     "file-saver": "^2.0.2",
     "sortablejs": "^1.10.2"
   },
-  "gitHead": "81c8ae24487cfe79da62717f12bb6752761911ae"
+  "gitHead": "a542fdd4e7c447c3b571fe91c92f5919561bdc2c"
 }

package/client/modeller-module.js

@@ -1,3 +0,0 @@
-console.warn('deprecated, use @things-factory/modeller-ui')
-
-export { ThingsEditorProperty, ThingsEditorPropertyStyles } from '@things-factory/modeller-ui'