@operato/board 8.0.0-beta.0 → 8.0.0-beta.1

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

@@ -1,196 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { property, query, queryAll } from 'lit/decorators.js'
-
-import { Scene, SCENE_MODE } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-
-import { ComponentGroup } from '../../types'
-import { ComponentMenu } from './component-menu.js'
-import { ICON_EDIT_MODE, ICON_SHIFT_MODE } from './mode-icons'
-
-export class ComponentToolbar extends ScopedElementsMixin(LitElement) {
-  static styles = [
-    css`
-      :host {
-        left: 0;
-        display: block;
-        position: relative;
-
-        width: var(--component-toolbar-icon-size);
-        background-color: var(--component-toolbar-background-color);
-      }
-
-      [components] {
-        display: block;
-        padding: 0;
-        margin: 0;
-
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-      }
-
-      [components] > img {
-        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;
-        padding: 6px;
-        box-sizing: border-box;
-      }
-
-      #shift[active] {
-        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: ComponentGroup[] = []
-  @property({ type: String }) group?: string | null
-  @property({ type: Object }) scene!: Scene
-  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.EDIT
-
-  @query('#shift') shift!: HTMLImageElement
-  @query('component-menu') private menu!: HTMLElement
-  @query('div[components]') private componentsContainer!: HTMLElement
-  @queryAll('[data-group]') private groups!: NodeListOf<HTMLElement>
-
-  private icons: { [name: string]: string } = {}
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('componentGroupList')) {
-      const color = getComputedStyle(this, null).getPropertyValue('--md-sys-color-primary')
-
-      this.icons = (this.componentGroupList || [])
-        .filter(group => group.templates?.length > 0)
-        .reduce(
-          (sum, group: ComponentGroup) => {
-            sum[group.name] =
-              'data:image/svg+xml;charset=UTF-8;base64,' + btoa(group.icon.replace(/{{strokeColor}}/g, color))
-            return sum
-          },
-          {} as { [name: string]: string }
-        )
-
-      this.icons['mode-edit'] =
-        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(ICON_EDIT_MODE.replace(/{{strokeColor}}/g, color))
-      this.icons['mode-shift'] =
-        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(ICON_SHIFT_MODE.replace(/{{strokeColor}}/g, color))
-    }
-
-    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', '')
-    }
-  }
-
-  static get scopedElements() {
-    return {
-      'component-menu': ComponentMenu
-    }
-  }
-
-  render() {
-    const componentList = this.componentGroupList || []
-    const modeIcon = this.icons[this.mode === SCENE_MODE.SHIFT ? 'mode-shift' : 'mode-edit']
-
-    return html`
-      <div components @mousewheel=${(e: MouseEvent) => this.onWheelEvent(e)}>
-        <img id="shift" .src=${modeIcon} @click=${(e: MouseEvent) => this._onClickShift(e)} />
-
-        ${componentList
-          .filter(group => group.templates?.length > 0)
-          .map(
-            group => html`
-              <img
-                data-group=${group.name}
-                @click=${(e: MouseEvent) => this._onClickGroup(e)}
-                .src=${this.icons[group.name]}
-              />
-            `
-          )}
-      </div>
-
-      <component-menu
-        tabindex="-1"
-        @focusout=${() => {
-          this.group = null
-        }}
-        .scene=${this.scene}
-        .group=${this.group}
-        .groups=${componentList}
-        hidden
-      >
-      </component-menu>
-    `
-  }
-
-  onWheelEvent(e: Event) {
-    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))
-    this.componentsContainer.scrollTop += delta * 10
-
-    e.preventDefault()
-  }
-
-  _setMode(mode: SCENE_MODE) {
-    this.mode = mode
-
-    this.dispatchEvent(
-      new CustomEvent('mode-changed', {
-        bubbles: true,
-        composed: true,
-        detail: { value: mode }
-      })
-    )
-  }
-
-  _onClickShift(e: MouseEvent) {
-    const shift = this.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/component-toolbar/mode-icons.ts

@@ -1,88 +0,0 @@
-export const ICON_EDIT_MODE = `
-  <svg
-    version="1.1"
-    id="Layer_1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    x="0px"
-    y="0px"
-    viewBox="0 0 30 30"
-    style="enable-background:new 0 0 30 30;"
-    xml:space="preserve"
-  >
-    <style type="text/css">
-      .st0 {
-        fill: {{strokeColor}};
-      }
-      .st1 {
-        fill: none;
-        stroke: {{strokeColor}};
-        stroke-width: 0.75;
-        stroke-linejoin: round;
-        stroke-miterlimit: 10;
-      }
-    </style>
-    <g>
-      <polygon class="st0" points="2.7,3.9 2.7,22.8 7.8,17.2 16.1,16.9 	" />
-      <path
-        class="st1"
-        d="M27.7,20.1L26.1,19c-0.1,0-0.2,0-0.2,0c0,0.1,0,0.2,0,0.2l1.2,0.9h-4.9v-5l0.9,1.2c0,0,0.1,0.1,0.1,0.1
-      c0,0,0.1,0,0.1,0c0.1,0,0.1-0.1,0-0.2l-1.1-1.6c-0.1-0.1-0.2-0.1-0.2,0L20.8,16c0,0.1,0,0.2,0,0.2s0.2,0,0.2,0l0.9-1.2v5h-5
-      l1.2-0.9c0.1,0,0.1-0.1,0-0.2c0-0.1-0.1-0.1-0.2,0l-1.6,1.1c0,0-0.1,0.1-0.1,0.1c0,0,0,0.1,0.1,0.1l1.6,1.1c0,0,0.1,0,0.1,0
-      c0,0,0.1,0,0.1-0.1c0-0.1,0-0.2,0-0.2l-1.2-0.9h5v5L21,24.2c0-0.1-0.1-0.1-0.2,0c-0.1,0-0.1,0.1,0,0.2l1.1,1.6c0,0,0.1,0.1,0.1,0.1
-      s0.1,0,0.1-0.1l1.1-1.6c0-0.1,0-0.2,0-0.2c-0.1,0-0.2,0-0.2,0l-0.9,1.2v-5h4.9l-1.2,0.9c-0.1,0-0.1,0.1,0,0.2c0,0,0.1,0.1,0.1,0.1
-      c0,0,0.1,0,0.1,0l1.6-1.1c0,0,0.1-0.1,0.1-0.1C27.7,20.2,27.7,20.1,27.7,20.1z"
-      />
-    </g>
-  </svg>
-`
-
-export const ICON_SHIFT_MODE = `
-  <svg
-    version="1.1"
-    id="Layer_1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    x="0px"
-    y="0px"
-    viewBox="0 0 30 30"
-    style="enable-background:new 0 0 30 30;"
-    xml:space="preserve"
-  >
-    <style type="text/css">
-      .st0 {
-        fill: {{strokeColor}};
-        stroke: {{strokeColor}};
-        fill-rule: evenodd;
-        clip-rule: evenodd;
-      }
-      .st1 {
-        fill: {{strokeColor}};
-        stroke: {{strokeColor}};
-        stroke-width: 0.75;
-        stroke-linejoin: round;
-        stroke-miterlimit: 10;
-      }
-    </style>
-    <g>
-      <path
-        class="st0"
-        d="M7.8,23.2c1.6,0,3.8,0,5.7,0c0.8,0,1.3-0.3,1.6-1.2c0.4-2.9,1.5-4.9,2.4-6.9s1.4-2.5,1.6-3.4
-      c0.1-0.5,0.2-1.6-0.4-1.9c-0.6-0.3-1.2,0.1-1.9,1.3c-0.8,1.6-1,2-1.4,2c-0.3,0-0.1-4,0-5.4c0.1-1.3-0.6-1.8-1.3-1.8
-      c-0.8-0.1-1.5,0.4-1.5,1.5c0,1.5-0.2,5.2-0.7,5.2c-0.4,0-0.3-4.3-0.6-6.7c-0.1-1-0.6-1.8-1.5-1.8C9.1,4.2,8.4,4.7,8.3,5.8
-      c-0.1,1.3,1,6.7,0.5,6.7c-0.4,0-1.4-3.3-2.3-5.1C6,6.5,5.6,6,4.6,6.4C3.9,6.7,3.5,7.6,3.8,8.5c0.5,1.2,2.7,6.8,2.2,6.8
-      c-0.4,0-1.4-1.4-2.7-2.1c-1.1-0.6-1.8-0.4-2.1-0.1c-0.4,0.3-0.7,1,0.9,2.8c0.6,0.6,3.1,2.3,3.7,3.2c0.7,1.3,0.6,1,0.8,2.8
-      C6.7,22.7,7,23.2,7.8,23.2z"
-      />
-      <path
-        class="st1"
-        d="M28.7,20.1L27.1,19c-0.1,0-0.2,0-0.2,0c0,0.1,0,0.2,0,0.2l1.2,0.9h-4.9v-5l0.9,1.2c0,0,0.1,0.1,0.1,0.1
-      c0,0,0.1,0,0.1,0c0.1,0,0.1-0.1,0-0.2l-1.1-1.6c-0.1-0.1-0.2-0.1-0.2,0L21.8,16c0,0.1,0,0.2,0,0.2s0.2,0,0.2,0l0.9-1.2v5h-5
-      l1.2-0.9c0.1,0,0.1-0.1,0-0.2c0-0.1-0.1-0.1-0.2,0l-1.6,1.1c0,0-0.1,0.1-0.1,0.1c0,0,0,0.1,0.1,0.1l1.6,1.1c0,0,0.1,0,0.1,0
-      c0,0,0.1,0,0.1-0.1c0-0.1,0-0.2,0-0.2l-1.2-0.9h5v5L22,24.2c0-0.1-0.1-0.1-0.2,0c-0.1,0-0.1,0.1,0,0.2l1.1,1.6c0,0,0.1,0.1,0.1,0.1
-      s0.1,0,0.1-0.1l1.1-1.6c0-0.1,0-0.2,0-0.2c-0.1,0-0.2,0-0.2,0l-0.9,1.2v-5h4.9l-1.2,0.9c-0.1,0-0.1,0.1,0,0.2c0,0,0.1,0.1,0.1,0.1
-      c0,0,0.1,0,0.1,0l1.6-1.1c0,0,0.1-0.1,0.1-0.1C28.7,20.2,28.7,20.1,28.7,20.1z"
-      />
-    </g>
-  </svg>
-`

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

@@ -1,232 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css } from 'lit'
-
-export const style = css`
-  :host {
-    background-color: var(--edit-toolbar-background-color, var(--md-sys-color-secondary, #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: var(--url-icon-htoolbar) 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;
-  }
-
-  #databind-copy {
-    background-position-y: -1692px;
-  }
-
-  #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: var(--url-icon-fullscreen) 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: var(--url-icon-collapse) 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: var(--url-icon-collapse-active) 80% 10px no-repeat;
-  }
-`