@operato/board 0.2.45 → 0.2.49

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

@@ -0,0 +1,160 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './component-menu'
+
+import { LitElement, PropertyValues, css, html } from 'lit'
+import { SCENE_MODE, Scene } from '@hatiolab/things-scene'
+import { customElement, property, query, queryAll } 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 {
+        position: absolute;
+        top: 0;
+        left: var(--component-toolbar-icon-size);
+        height: 100%;
+        outline: none;
+      }
+
+      component-menu[hidden] {
+        display: 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('component-menu') private menu!: HTMLElement
+  @queryAll('[data-group]') groups!: NodeListOf<HTMLElement>
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('group')) {
+      this.groups.forEach(group => {
+        group.getAttribute('data-group') === this.group
+          ? group.setAttribute('active', '')
+          : group.removeAttribute('active')
+      })
+
+      this.group ? this.menu.removeAttribute('hidden') : this.menu.setAttribute('hidden', '')
+    }
+  }
+
+  render() {
+    return html`
+      ${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
+        }}
+        .scene=${this.scene}
+        .group=${this.group}
+        .groups=${this.componentGroupList}
+        hidden
+      >
+      </component-menu>
+    `
+  }
+
+  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;
+  }
+`