@things-factory/board-ui 4.0.20 → 4.0.21

package/client/bootstrap.js

@@ -5,14 +5,13 @@ import { registerEditor, registerRenderer } from '@things-factory/grist-ui'
 import { BoardEditor } from './data-grist/board-editor'
 import { BoardRenderer } from './data-grist/board-renderer'
 import { OxPropertyEditor } from '@operato/property-editor'
-import board from './reducers/board'
-import { store } from '@things-factory/shell'
+import { registerDefaultGroups } from '@operato/board/dist/src/component/register-default-groups'
 
 export default function bootstrap() {
   registerRenderer('board', BoardRenderer)
   registerEditor('board', BoardEditor)
 
-  store.addReducers({ board })
+  registerDefaultGroups()
 
   OxPropertyEditor.register({
     'board-selector': 'property-editor-board-selector'

package/client/index.js

@@ -1,5 +1,3 @@
-export * from './actions/board'
-
 export * from './board-provider'
 export * from './viewparts/board-selector'
 export * from './viewparts/board-creation-card'

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

@@ -4,7 +4,7 @@ import '@operato/board/dist/src/ox-board-modeller.js'
 import { PageView, client, gqlContext, store } from '@things-factory/shell'
 import { css, html } from 'lit-element'
 
-import { ADD_BOARD_COMPONENTS } from '../actions/board'
+import { BoardModeller } from '@operato/board/dist/src/ox-board-modeller.js'
 import { OxPropertyEditor } from '@operato/property-editor'
 import components from './things-scene-components-with-tools.import'
 import { connect } from 'pwa-helpers/connect-mixin.js'
@@ -17,9 +17,8 @@ export class BoardModellerPage extends connect(store)(PageView) {
   constructor() {
     super()
 
-    store.dispatch({
-      type: ADD_BOARD_COMPONENTS,
-      components
+    components.forEach(component => {
+      BoardModeller.registerTemplate(component.templates)
     })
 
     /* 컴포넌트에서 정의된 에디터들을 MODELLER_EDITORS에 등록 */
@@ -45,9 +44,9 @@ export class BoardModellerPage extends connect(store)(PageView) {
     this.hideProperty = false
     this.overlay = null
     this.scene = null
-    this.componentGroupList = []
     this.fonts = []
     this.board = null
+    this.componentGroupList = BoardModeller.groups
   }
 
   static get properties() {
@@ -201,8 +200,6 @@ export class BoardModellerPage extends connect(store)(PageView) {
 
   stateChanged(state) {
     this.baseUrl = state.route.rootPath
-
-    this.componentGroupList = state.board.templates
     this.fonts = state.font
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/board-ui",
-  "version": "4.0.20",
+  "version": "4.0.21",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -26,8 +26,8 @@
   "dependencies": {
     "@material/mwc-list": "^0.25.3",
     "@material/mwc-select": "^0.25.3",
-    "@operato/board": "^0.2.49",
-    "@operato/popup": "^0.2.49",
+    "@operato/board": "^0.2.50",
+    "@operato/popup": "^0.2.50",
     "@polymer/iron-icon": "^3.0.1",
     "@polymer/iron-icons": "^3.0.1",
     "@polymer/paper-button": "^3.0.1",
@@ -37,13 +37,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.20",
-    "@things-factory/grist-ui": "^4.0.20",
-    "@things-factory/help": "^4.0.20",
-    "@things-factory/i18n-base": "^4.0.20",
-    "@things-factory/modeller-ui": "^4.0.20",
+    "@things-factory/barcode-base": "^4.0.21",
+    "@things-factory/grist-ui": "^4.0.21",
+    "@things-factory/help": "^4.0.21",
+    "@things-factory/i18n-base": "^4.0.21",
+    "@things-factory/modeller-ui": "^4.0.21",
     "file-saver": "^2.0.2",
     "sortablejs": "^1.10.2"
   },
-  "gitHead": "c597c72345f43f0a4780feda11d89d3218ac8a3e"
+  "gitHead": "ab5451f749a4e886ae3668bee82777b566538e17"
 }

package/client/actions/board.js

@@ -1,2 +0,0 @@
-export const ADD_BOARD_COMPONENTS = 'ADD_BOARD_COMPONENTS'
-export const ADD_BOARD_EDITORS = 'ADD_BOARD_EDITORS'

package/client/reducers/board.js

@@ -1,527 +0,0 @@
-import { ADD_BOARD_COMPONENTS } from '../actions/board.js'
-import audio from '../../assets/images/components/audio.png'
-import bothArrow from '../../assets/images/components/both-arrow.png'
-import colorImage from '../../assets/images/components/color-image.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 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 [
-    {
-      type: 'rect',
-      description: 'rectangle shape',
-      icon: rect,
-      model: {
-        type: 'rect',
-        left: 100,
-        top: 100,
-        width: 100,
-        height: 100,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    },
-    {
-      type: 'ellipse',
-      description: 'ellipse shape',
-      icon: ellipse,
-      model: {
-        type: 'ellipse',
-        rx: 50,
-        ry: 50,
-        cx: 150,
-        cy: 150,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    },
-    {
-      type: 'donut',
-      description: 'donut shape',
-      icon: donut,
-      model: {
-        type: 'donut',
-        rx: 50,
-        ry: 50,
-        cx: 150,
-        cy: 150,
-        ratio: 30,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    },
-    {
-      type: 'triangle',
-      description: 'triangle shape',
-      icon: triangle,
-      model: {
-        type: 'triangle',
-        x1: 150,
-        y1: 100,
-        x2: 100,
-        y2: 200,
-        x3: 200,
-        y3: 200,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    },
-    {
-      type: 'polygon',
-      description: 'polygon shape',
-      icon: polygon,
-      model: {
-        type: 'polygon',
-        path: [
-          { x: 100, y: 100 },
-          { x: 200, y: 100 },
-          { x: 200, y: 200 },
-          { x: 100, y: 200 }
-        ],
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    },
-    {
-      type: 'star',
-      description: 'star shape',
-      icon: star,
-      model: {
-        type: 'star',
-        rx: 50,
-        ry: 50,
-        cx: 150,
-        cy: 150,
-        ratio: 30,
-        wing: 5,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    }
-  ]
-}
-
-function lines() {
-  return [
-    {
-      type: 'line',
-      description: 'simple line',
-      icon: line,
-      model: {
-        type: 'line',
-        x1: 100,
-        y1: 100,
-        x2: 200,
-        y2: 200,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 3,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    },
-    {
-      type: 'dash',
-      description: 'dash line',
-      icon: dash,
-      model: {
-        type: 'line',
-        x1: 100,
-        y1: 100,
-        x2: 200,
-        y2: 200,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 3,
-        lineDash: 'round-dot',
-        lineCap: 'butt'
-      }
-    },
-    {
-      type: 'single arrow',
-      description: 'single arrow tip line',
-      icon: singleArrow,
-      model: {
-        type: 'line',
-        x1: 100,
-        y1: 100,
-        x2: 200,
-        y2: 200,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 3,
-        hidden: false,
-        lineWidth: 3,
-        lineDash: 'solid',
-        begin: 'arrow',
-        lineCap: 'butt'
-      }
-    },
-    {
-      type: 'both arrow',
-      description: 'both arrow tip line',
-      icon: bothArrow,
-      model: {
-        type: 'line',
-        x1: 100,
-        y1: 100,
-        x2: 200,
-        y2: 200,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 3,
-        lineDash: 'solid',
-        begin: 'arrow',
-        end: 'arrow',
-        lineCap: 'butt'
-      }
-    },
-    {
-      type: 'polyline',
-      description: 'polyline',
-      icon: polyline,
-      model: {
-        type: 'polyline',
-        path: [
-          { x: 100, y: 100 },
-          { x: 200, y: 100 },
-          { x: 200, y: 200 },
-          { x: 100, y: 200 }
-        ],
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    }
-  ]
-}
-
-function textAndMedias() {
-  return [
-    {
-      type: 'text',
-      description: 'text',
-      icon: text,
-      model: {
-        type: 'text',
-        left: 100,
-        top: 100,
-        width: 200,
-        height: 50,
-        text: 'Text',
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 5,
-        lineDash: 'solid',
-        lineCap: 'butt',
-        textAlign: 'left',
-        textBaseline: 'top',
-        textWrap: false,
-        fontFamily: 'serif',
-        fontSize: 30
-      }
-    },
-    {
-      type: 'color image',
-      description: 'color image',
-      icon: colorImage,
-      model: {
-        type: 'image-view',
-        left: 100,
-        top: 100,
-        width: 100,
-        height: 100,
-        isGray: false,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    },
-    {
-      type: 'gray image',
-      description: 'gray image',
-      icon: grayImage,
-      model: {
-        type: 'image-view',
-        left: 100,
-        top: 100,
-        width: 100,
-        height: 100,
-        isGray: true,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    },
-    {
-      type: 'gif image',
-      description: 'gif image',
-      icon: gifImage,
-      model: {
-        type: 'gif-view',
-        left: 100,
-        top: 100,
-        width: 100,
-        height: 100
-      }
-    },
-    {
-      type: 'audio',
-      description: 'audio',
-      icon: audio,
-      model: {
-        type: 'audio',
-        left: 100,
-        top: 100,
-        width: 100,
-        height: 100
-      }
-    }
-  ]
-}
-
-function groupContainer() {
-  return [
-    {
-      type: 'container',
-      description: 'general container',
-      icon: container,
-      model: {
-        type: 'container',
-        left: 100,
-        top: 100,
-        width: 100,
-        height: 100,
-        fillStyle: '#fff',
-        strokeStyle: '#999',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        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
-      }
-    }
-  ]
-}
-
-function etc() {
-  return [
-    {
-      type: 'info-window',
-      description: 'information window',
-      icon: infoWindow,
-      model: {
-        type: 'info-window',
-        left: 10,
-        top: 10,
-        width: 50,
-        height: 50,
-        fillStyle: '#fff',
-        strokeStyle: 'DarkGoldenRod',
-        hidden: true,
-        frontSideTemplate:
-          "<h2 id='xxx'>\n\t<%= text %>\n</h2>\n<img src='https://www.tutorialspoint.com/images/html.gif' alt='HTML Tutorial' height='150' width='140' />",
-        backSideTemplate:
-          "<h2 id='yyy'>\n\t<%= text %>\n</h2>\n<img src='https://www.tutorialspoint.com/images/html.gif' alt='HTML Tutorial' height='150' width='140' />",
-        style:
-          '#yyy {\n\tbackground-color:navy;\n\tcolor:white\n}\n#xxx, #yyy {\n\twhite-space:nowrap;\n\tmin-width:200px;\n}'
-      }
-    },
-    {
-      type: 'local reference',
-      description: 'local reference',
-      icon: localReference,
-      model: {
-        type: 'local-ref',
-        left: 100,
-        top: 100,
-        width: 100,
-        height: 100,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    },
-    {
-      type: 'global reference',
-      description: 'global reference',
-      icon: globalReference,
-      model: {
-        type: 'global-ref',
-        left: 100,
-        top: 100,
-        width: 100,
-        height: 100,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    }
-  ]
-}
-
-const TEMPLATES = {
-  shape: shapes(),
-  line: lines(),
-  textAndMedia: textAndMedias(),
-  chartAndGauge: [],
-  table: [],
-  container: groupContainer(),
-  dataSource: [],
-  IoT: [],
-  '3D': [],
-  warehouse: [],
-  form: [],
-  etc: etc()
-}
-
-const INITIAL_STATE = {
-  components: [],
-  templates: [
-    'line',
-    'shape',
-    'textAndMedia',
-    'chartAndGauge',
-    'table',
-    'container',
-    'dataSource',
-    'IoT',
-    '3D',
-    'warehouse',
-    'form',
-    'etc'
-  ].map(group => {
-    return {
-      name: group,
-      description: 'Group ' + group,
-      templates: TEMPLATES[group]
-    }
-  })
-}
-
-const board = (state = INITIAL_STATE, action) => {
-  switch (action.type) {
-    case ADD_BOARD_COMPONENTS:
-      let components = action.components
-
-      let addedTemplates = [...state.templates]
-
-      for (let component in components) {
-        let { templates } = components[component]
-
-        templates &&
-          templates.forEach(template => {
-            var group = addedTemplates.find(group => group.name == template.group)
-
-            if (!group) {
-              console.warn('Invalid group', group, template)
-              return
-            }
-
-            if (!group.templates.find(inGroupTemplate => inGroupTemplate.type == template.type)) {
-              group.templates.push(template)
-            }
-          })
-      }
-
-      return {
-        ...state,
-        components: [...state.components, ...action.components],
-        templates: addedTemplates
-      }
-
-    default:
-      return state
-  }
-}
-
-export default board