@operato/board 0.2.45 → 0.2.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "0.2.45",
+  "version": "0.2.46",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -16,8 +16,22 @@
     "directory": "webcomponents/board"
   },
   "exports": {
-    "./ox-board-viewer.js": "./dist/src/ox-board-viewer.js",
-    "./ox-board-player.js": "./dist/src/ox-board-player.js"
+    "./ox-board-viewer": "./dist/src/ox-board-viewer.js",
+    "./ox-board-player": "./dist/src/ox-board-player.js",
+    "./ox-board-modeller": "./dist/src/ox-board-modeller.js"
+  },
+  "typesVersions": {
+    "*": {
+      "ox-board-viewer": [
+        "./dist/src/ox-board-viewer.d.ts"
+      ],
+      "ox-board-player": [
+        "./dist/src/ox-board-player.d.ts"
+      ],
+      "ox-board-modeller": [
+        "./dist/src/ox-board-modeller.d.ts"
+      ]
+    }
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -32,13 +46,20 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
+    "@operato/input": "^0.2.46",
+    "@operato/layout": "^0.2.46",
+    "@types/file-saver": "^2.0.4",
+    "@types/sortablejs": "^1.10.7",
+    "file-saver": "^2.0.5",
     "lit": "^2.0.2",
+    "lodash": "^4.17.21",
+    "sortablejs": "^1.14.0",
     "swipe-listener": "^1.3.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@hatiolab/things-scene": "^2.7.26",
+    "@hatiolab/things-scene": "^2.7.27",
     "@material/mwc-fab": "^0.25.3",
     "@material/mwc-icon": "^0.25.3",
     "@open-wc/eslint-config": "^4.3.0",
@@ -72,5 +93,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "443daca83ed888a12671bc35f8298c400eaa8a43"
+  "gitHead": "70591a39c0b794a2a7765e9fcddb3e716ae95ecf"
 }

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './ox-board-viewer'
 export * from './ox-board-player'
+export * from './ox-board-modeller'

package/src/modeller/component-toolbar/component-menu.ts

@@ -0,0 +1,142 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { LitElement, PropertyValues, css, html } from 'lit'
+import { Pallet, PalletItem } from '../../types'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { Scene } from '@hatiolab/things-scene'
+import { ScrollbarStyles } from '@operato/styles'
+import noImage from '../../../../assets/images/components/no-image.png'
+
+@customElement('component-menu')
+class ComponentMenu extends LitElement {
+  static styles = [
+    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);
+      }
+    `
+  ]
+
+  @property({ type: Object }) groups: Pallet[] = []
+  @property({ type: Object }) scene: Scene | null = null
+  @property({ type: String }) group: string | null = ''
+  @property({ type: Array }) templates: PalletItem[] = []
+
+  render() {
+    return this.group
+      ? html`
+          <h2 onclick=${(e: MouseEvent) => 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: PropertyValues<this>) {
+    if (changes.has('group')) {
+      if (!this.group) {
+        this.style.display = 'none'
+        this.templates = []
+      } else {
+        this.style.display = 'flex'
+        this.templates = this.groups.find((g: Pallet) => g.name === this.group)?.templates || []
+      }
+    }
+  }
+
+  onClickTemplate(e: MouseEvent) {
+    var item = e.target as HTMLElement
+    var type = item.closest('[data-type]')?.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(JSON.parse(JSON.stringify(template.model)), { cx: 200, cy: 200 })
+    }
+
+    this.group = null
+  }
+
+  templateIcon(template: PalletItem) {
+    return template.icon || noImage
+  }
+}

package/src/modeller/component-toolbar/component-toolbar.ts

@@ -0,0 +1,169 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './component-menu'
+
+import { LitElement, css, html } from 'lit'
+import { SCENE_MODE, Scene } from '@hatiolab/things-scene'
+import { customElement, property, query } from 'lit/decorators.js'
+
+@customElement('component-toolbar')
+class ComponentToolbar extends LitElement {
+  static styles = [
+    css`
+      :host {
+        left: 0;
+        display: block;
+        position: relative;
+
+        width: var(--component-toolbar-icon-size);
+        background-color: var(--component-toolbar-background-color);
+      }
+
+      span {
+        display: flex;
+        flex-direction: row;
+
+        width: var(--component-toolbar-icon-size);
+        height: var(--component-toolbar-icon-size);
+        min-width: 50%;
+
+        border-bottom: var(--component-toolbar-border);
+        margin: 0;
+        background: url(/assets/images/icon-vtoolbar.png) -1px 0 no-repeat;
+      }
+
+      span[data-group='line'] {
+        background-position: 50% -186px;
+      }
+
+      span[data-group='shape'] {
+        background-position: 0px -284px;
+      }
+
+      span[data-group='textAndMedia'] {
+        background-position: 50% -385px;
+      }
+
+      span[data-group='chartAndGauge'] {
+        background-position: 50% -488px;
+      }
+
+      span[data-group='table'] {
+        background-position: 50% -585px;
+      }
+
+      span[data-group='container'] {
+        background-position: 50% -685px;
+      }
+
+      span[data-group='dataSource'] {
+        background-position: 50% -888px;
+      }
+
+      span[data-group='IoT'] {
+        background-position: -3px -788px;
+      }
+
+      span[data-group='3D'] {
+        background-position: 50% -992px;
+      }
+
+      span[data-group='warehouse'] {
+        background-position: -2px -1089px;
+      }
+
+      span[data-group='form'] {
+        background-position: -2px -1287px;
+      }
+
+      span[data-group='etc'] {
+        background-position: -1px -1189px;
+      }
+
+      .pressed {
+        background-position: 0 15px;
+      }
+
+      .pressed[pressed],
+      .pressed[active] {
+        background-position: -3px -88px;
+        background-color: #beb9b3;
+      }
+
+      component-menu {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: var(--component-toolbar-icon-size);
+        height: 100%;
+        outline: none;
+      }
+    `
+  ]
+
+  @property({ type: Array }) componentGroupList: any[] = []
+  @property({ type: String }) group?: string | null
+  @property({ type: Object }) scene!: Scene
+  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.VIEW
+
+  @query('#menu') private menu!: HTMLElement
+
+  render() {
+    return html`
+      <span id="shift" class="pressed" @click=${() => this._onClickShift()}> </span>
+
+      ${this.componentGroupList
+        .filter(group => group.templates?.length > 0)
+        .map(item => html` <span data-group=${item.name} @click=${(e: MouseEvent) => this._onClickGroup(e)}> </span> `)}
+
+      <component-menu
+        tabindex="-1"
+        @focusout=${() => {
+          this.group = null
+        }}
+        id="menu"
+        .scene=${this.scene}
+        .group=${this.group}
+        .groups=${this.componentGroupList}
+        class="shadow"
+      >
+      </component-menu>
+    `
+  }
+
+  _setMode(mode: SCENE_MODE) {
+    this.mode = mode
+    this.dispatchEvent(
+      new CustomEvent('mode-changed', {
+        bubbles: true,
+        composed: true,
+        detail: { value: mode }
+      })
+    )
+  }
+
+  _onClickShift() {
+    var shift = this.renderRoot.querySelector('#shift')
+    if (shift?.hasAttribute('active')) {
+      shift.removeAttribute('active')
+      this._setMode(SCENE_MODE.EDIT)
+    } else {
+      shift!.setAttribute('active', '')
+      this._setMode(SCENE_MODE.SHIFT)
+    }
+  }
+
+  async _onClickGroup(e: MouseEvent) {
+    var button = e.target as HTMLElement
+
+    this.group = button!.closest('[data-group]')?.getAttribute('data-group')
+
+    if (!this.group) return
+
+    await this.updateComplete
+
+    this.menu?.focus()
+  }
+}

package/src/modeller/edit-toolbar-style.ts

@@ -0,0 +1,228 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { css } from 'lit'
+
+export const style = css`
+  :host {
+    background-color: var(--edit-toolbar-background-color, #394e64);
+
+    overflow-x: hidden;
+  }
+
+  [tools] {
+    display: flex;
+    align-items: center;
+    overflow: none;
+    padding: 0px 10px;
+  }
+
+  [tools] > * {
+    padding: 0px;
+  }
+
+  [tools] > span[button] {
+    min-width: 30px;
+  }
+
+  [tools] > span[padding] {
+    flex: 1;
+  }
+
+  [tools] > .vline {
+    display: block;
+    flex: none;
+    border-left: 1px solid rgba(255, 255, 255, 0.2);
+    border-right: 1px solid rgba(0, 0, 0, 0.15);
+    width: 0px;
+    height: 18px;
+    margin: 0 3px;
+  }
+
+  span[button] {
+    min-height: 35px;
+
+    background: url('/assets/images/icon-htoolbar.png') no-repeat;
+    background-position-x: 50%;
+    opacity: 0.8;
+  }
+  span[button]:hover {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+  }
+
+  #fullscreen,
+  #toggle-property {
+    flex: none;
+  }
+
+  #align-left {
+    background-position-y: 8px;
+  }
+
+  #align-center {
+    background-position-y: -42px;
+  }
+
+  #align-right {
+    background-position-y: -92px;
+  }
+
+  #align-top {
+    background-position-y: -142px;
+  }
+
+  #align-middle {
+    background-position-y: -192px;
+  }
+
+  #align-bottom {
+    background-position-y: -242px;
+  }
+
+  #undo {
+    background-position-y: -592px;
+  }
+
+  #redo {
+    background-position-y: -642px;
+  }
+
+  #front {
+    background-position-y: -292px;
+  }
+
+  #back {
+    background-position-y: -342px;
+  }
+
+  #forward {
+    background-position-y: -392px;
+  }
+
+  #backward {
+    background-position-y: -442px;
+  }
+
+  #symmetry-x {
+    background-position-y: -492px;
+  }
+
+  #symmetry-y {
+    background-position-y: -542px;
+  }
+
+  #group {
+    background-position-y: -492px;
+  }
+
+  #ungroup {
+    background-position-y: -542px;
+  }
+
+  #fullscreen {
+    background-position-y: -692px;
+  }
+
+  #toggle-property {
+    background-position-y: -692px;
+    float: right;
+  }
+
+  #zoomin {
+    background-position-y: -742px;
+  }
+
+  #zoomout {
+    background-position-y: -792px;
+  }
+
+  #fit-scene {
+    background-position-y: -1492px;
+  }
+
+  #cut {
+    background-position-y: -842px;
+  }
+
+  #copy {
+    background-position-y: -892px;
+  }
+
+  #paste {
+    background-position-y: -942px;
+  }
+
+  #delete {
+    background-position-y: -992px;
+  }
+
+  #font-increase {
+    background-position-y: -1042px;
+  }
+
+  #font-decrease {
+    background-position-y: -1092px;
+  }
+
+  #style-copy {
+    background-position-y: -1142px;
+  }
+
+  #context-menu {
+    background-position-y: -692px;
+  }
+
+  #symmetry-x {
+    background-position-y: -1192px;
+  }
+
+  #symmetry-y {
+    background-position-y: -1242px;
+  }
+
+  #rotate-cw {
+    background-position-y: -1292px;
+  }
+
+  #rotate-ccw {
+    background-position-y: -1342px;
+  }
+
+  #distribute-horizontal {
+    background-position-y: -1542px;
+  }
+
+  #distribute-vertical {
+    background-position-y: -1593px;
+  }
+
+  #toggle-property {
+    background-position-y: -1392px;
+  }
+
+  #preview {
+    background-position-y: -1640px;
+  }
+
+  /* bigger buttons */
+  #fullscreen {
+    background: url('/assets/images/icon-fullscreen.png') 50% 10px no-repeat;
+    width: var(--edit-toolbar-bigger-icon-size);
+    height: var(--edit-toolbar-bigger-icon-size);
+    border-left: var(--edit-toolbar-bigger-icon-line);
+  }
+
+  #toggle-property {
+    background: url('/assets/images/icon-collapse.png') 80% 10px no-repeat;
+    width: var(--edit-toolbar-bigger-icon-size);
+    height: var(--edit-toolbar-bigger-icon-size);
+    border-left: var(--edit-toolbar-bigger-icon-line);
+  }
+
+  #toggle-property[active] {
+    background: url(/assets/images/icon-collapse-active.png) 80% 10px no-repeat;
+  }
+`