@operato/process 1.1.1

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

@@ -0,0 +1,187 @@
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { property, query, state } from 'lit/decorators.js'
+
+import { Scene } from '@hatiolab/things-scene'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { ScrollbarStyles } from '@operato/styles'
+
+import { Pallet, PalletItem } from '../../types'
+import { ComponentDetail } from './component-detail'
+
+const noImage = new URL('../../../../icons/components/no-image.png', import.meta.url).href
+
+export class ComponentMenu extends ScopedElementsMixin(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: visible;
+
+        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-height);
+        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;
+        max-width: var(--component-menu-item-icon-size-width);
+        max-height: var(--component-menu-item-icon-size-height);
+      }
+
+      process-component-detail {
+        position: absolute;
+        top: 0;
+        left: 180px;
+        height: 100%;
+        width: calc(100vw - 510px);
+        outline: none;
+      }
+
+      process-component-detail[hidden] {
+        display: none;
+      }
+    `
+  ]
+
+  @property({ type: Object }) groups: Pallet[] = []
+  @property({ type: Object }) scene: Scene | null = null
+  @property({ type: String }) group: string | null = ''
+
+  @state() templates: PalletItem[] = []
+  @state() template: PalletItem | any
+
+  @query('process-component-detail') detail!: HTMLElement
+
+  static get scopedElements() {
+    return {
+      'process-component-detail': ComponentDetail
+    }
+  }
+
+  render() {
+    return this.group
+      ? html`
+          <h2 @click=${(e: MouseEvent) => e.stopPropagation()}>${this.group} list</h2>
+
+          <div templates @mouseover=${(e: MouseEvent) => this.onHoverComponent(e)}>
+            ${(this.templates || []).map(
+              template => html`
+                <div @click=${this.onClickTemplate} data-type=${template.type} template>
+                  <img src=${String(this.templateIcon(template))} />${template.type}
+                </div>
+              `
+            )}
+          </div>
+
+          <process-component-detail
+            tabindex="-1"
+            @focusout=${() => {
+              this.template = null
+            }}
+            .template=${this.template}
+            hidden
+          >
+          </process-component-detail>
+        `
+      : html``
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('group')) {
+      if (!this.group) {
+        this.templates = []
+        this.setAttribute('hidden', '')
+      } else {
+        this.templates = this.groups.find((g: Pallet) => g.name === this.group)?.templates || []
+        this.removeAttribute('active')
+      }
+    }
+
+    if (changes.has('template')) {
+      this.template && this.template.about
+        ? this.detail.removeAttribute('hidden')
+        : this.detail.setAttribute('hidden', '')
+    }
+  }
+
+  findTemplate(type: string | null | undefined) {
+    this.template = type && this.templates.find(template => template.type == type)
+  }
+
+  onHoverComponent(e: MouseEvent) {
+    const button = e.target as HTMLElement
+    this.findTemplate(button!.closest('[data-type]')?.getAttribute('data-type'))
+  }
+
+  onClickTemplate(e: MouseEvent) {
+    var item = e.target as HTMLElement
+    var type = item.closest('[data-type]')?.getAttribute('data-type')
+
+    if (!type) {
+      return
+    }
+
+    if (this.scene) {
+      this.template = this.templates.find(template => template.type == type)
+      this.template && this.scene.startAddMode(JSON.parse(JSON.stringify(this.template.model)))
+    }
+
+    this.group = null
+  }
+
+  templateIcon(template: PalletItem) {
+    return template.icon || noImage
+  }
+}

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

@@ -0,0 +1,173 @@
+/**
+ * @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);
+      }
+
+      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;
+      }
+
+      process-component-menu {
+        position: absolute;
+        top: 0;
+        left: var(--component-toolbar-icon-size);
+        height: 100%;
+        outline: none;
+      }
+
+      process-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('process-component-menu') private menu!: 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('--primary-color')
+
+      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 {
+      'process-component-menu': ComponentMenu
+    }
+  }
+
+  render() {
+    const componentList = this.componentGroupList || []
+    const modeIcon = this.icons[this.mode === SCENE_MODE.SHIFT ? 'mode-shift' : 'mode-edit']
+
+    return html`
+      <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]}
+            />
+          `
+        )}
+
+      <process-component-menu
+        tabindex="-1"
+        @focusout=${() => {
+          this.group = null
+        }}
+        .scene=${this.scene}
+        .group=${this.group}
+        .groups=${componentList}
+        hidden
+      >
+      </process-component-menu>
+    `
+  }
+
+  _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

@@ -0,0 +1,86 @@
+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-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

@@ -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: 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;
+  }
+
+  #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;
+  }
+`