@things-factory/board-ui 4.0.10 → 4.0.14

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

@@ -1,193 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, html, css } from 'lit-element'
-
-import './component-menu'
-
-class ComponentToolbar extends LitElement {
-  constructor() {
-    super()
-
-    this.componentGroupList = []
-    this.group = ''
-    this.scene = null
-    this.mode = 0
-  }
-
-  static get properties() {
-    return {
-      componentGroupList: Array,
-      group: String,
-      scene: Object,
-      mode: Number
-    }
-  }
-
-  static get styles() {
-    return [
-      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;
-        }
-      `
-    ]
-  }
-
-  render() {
-    return html`
-      <span id="shift" class="pressed" @click="${e => this._onClickShift(e)}"> </span>
-
-      ${this.componentGroupList
-        .filter(group => group.templates?.length > 0)
-        .map(
-          item => html`
-            <span data-group=${item.name} @click=${e => this._onClickGroup(e)}> </span>
-          `
-        )}
-
-      <component-menu
-        tabindex="-1"
-        @focusout=${e => {
-          this.group = null
-        }}
-        id="menu"
-        .scene=${this.scene}
-        .group=${this.group}
-        .groups=${this.componentGroupList}
-        class="shadow"
-      >
-      </component-menu>
-    `
-  }
-
-  get menu() {
-    return this.shadowRoot.getElementById('menu')
-  }
-
-  _setMode(mode) {
-    this.mode = mode
-    this.dispatchEvent(
-      new CustomEvent('mode-changed', {
-        bubbles: true,
-        composed: true,
-        detail: { value: mode }
-      })
-    )
-  }
-
-  _onClickShift(e) {
-    var shift = this.shadowRoot.getElementById('shift')
-    if (shift.hasAttribute('active')) {
-      shift.removeAttribute('active')
-      this._setMode(1)
-    } else {
-      shift.setAttribute('active', '')
-      this._setMode(2)
-    }
-  }
-
-  async _onClickGroup(e) {
-    var button = e.target
-
-    if (!button.hasAttribute || !button.hasAttribute('data-group')) {
-      return
-    }
-
-    this.group = button.getAttribute('data-group')
-
-    if (!this.group) return
-
-    await this.updateComplete
-
-    this.menu.focus()
-  }
-}
-
-customElements.define('component-toolbar', ComponentToolbar)

package/client/board-modeller/edit-toolbar-style.js

@@ -1,228 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css } from 'lit-element'
-
-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;
-  }
-`