@operato/board 0.2.49 → 0.3.1

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

@@ -4,10 +4,13 @@
 
 import './component-menu'
 
+import { ICON_EDIT_MODE, ICON_SHIFT_MODE } from './mode-icons'
 import { LitElement, PropertyValues, css, html } from 'lit'
 import { SCENE_MODE, Scene } from '@hatiolab/things-scene'
 import { customElement, property, query, queryAll } from 'lit/decorators.js'
 
+import { ComponentGroup } from '../../types'
+
 @customElement('component-toolbar')
 class ComponentToolbar extends LitElement {
   static styles = [
@@ -21,7 +24,7 @@ class ComponentToolbar extends LitElement {
         background-color: var(--component-toolbar-background-color);
       }
 
-      span {
+      img {
         display: flex;
         flex-direction: row;
 
@@ -31,64 +34,11 @@ class ComponentToolbar extends LitElement {
 
         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;
+        padding: 6px;
+        box-sizing: border-box;
       }
 
-      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;
+      #shift[active] {
         background-color: #beb9b3;
       }
 
@@ -106,15 +56,35 @@ class ComponentToolbar extends LitElement {
     `
   ]
 
-  @property({ type: Array }) componentGroupList: any[] = []
+  @property({ type: Array }) componentGroupList: ComponentGroup[] = []
   @property({ type: String }) group?: string | null
   @property({ type: Object }) scene!: Scene
-  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.VIEW
+  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.EDIT
 
+  @query('#shift') shift!: HTMLImageElement
   @query('component-menu') private menu!: HTMLElement
-  @queryAll('[data-group]') groups!: NodeListOf<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
@@ -127,10 +97,23 @@ class ComponentToolbar extends LitElement {
   }
 
   render() {
+    const componentList = this.componentGroupList || []
+    const modeIcon = this.icons[this.mode === SCENE_MODE.EDIT ? 'mode-edit' : 'mode-shift']
+
     return html`
-      ${this.componentGroupList
+      <img id="shift" .src=${modeIcon} @click=${(e: MouseEvent) => this._onClickShift(e)} />
+
+      ${componentList
         .filter(group => group.templates?.length > 0)
-        .map(item => html` <span data-group=${item.name} @click=${(e: MouseEvent) => this._onClickGroup(e)}> </span> `)}
+        .map(
+          group => html`
+            <img
+              data-group=${group.name}
+              @click=${(e: MouseEvent) => this._onClickGroup(e)}
+              .src=${this.icons[group.name]}
+            />
+          `
+        )}
 
       <component-menu
         tabindex="-1"
@@ -139,13 +122,37 @@ class ComponentToolbar extends LitElement {
         }}
         .scene=${this.scene}
         .group=${this.group}
-        .groups=${this.componentGroupList}
+        .groups=${componentList}
         hidden
       >
       </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
 

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/property-sidebar/data-binding/data-binding-mapper.ts

@@ -2,15 +2,15 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-// import '@things-factory/modeller-ui/client/editors/things-editor-code'
 import '@things-factory/modeller-ui/client/editors/things-editor-value-map'
 import '@things-factory/modeller-ui/client/editors/things-editor-value-range'
-import '@operato/input/dist/src/ox-buttons-radio'
-import '@operato/input/dist/src/ox-input-code'
+import '@operato/input/ox-buttons-radio.js'
+import '@operato/input/ox-input-code.js'
+
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
-import { LitElement, PropertyValues, css, html } from 'lit'
 import { Properties, Scene } from '@hatiolab/things-scene'
-import { customElement, property, query, state } from 'lit/decorators'
 
 export type Rule =
   | {

package/src/modeller/property-sidebar/data-binding/data-binding.ts

@@ -5,12 +5,13 @@
 import './data-binding-mapper'
 import '@material/mwc-icon'
 import '@things-factory/help'
-import '@operato/input/dist/src/ox-buttons-radio.js'
-import '@operato/input/dist/src/ox-input-data'
+import '@operato/input/ox-buttons-radio.js'
+import '@operato/input/ox-input-data.js'
+
+import { css, html, PropertyValues } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { Properties, Scene } from '@hatiolab/things-scene'
-import { PropertyValues, css, html } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators'
 
 import { AbstractProperty } from '../abstract-property'
 import { PropertySharedStyle } from '../property-shared-style'

package/src/modeller/property-sidebar/effects/effects.ts

@@ -6,13 +6,12 @@ import './property-animations'
 import './property-event'
 import './property-shadow'
 
-import { html } from 'lit'
-import { customElement, property } from 'lit/decorators'
-
 import { Properties, Scene } from '@hatiolab/things-scene'
+import { customElement, property } from 'lit/decorators.js'
 
 import { AbstractProperty } from '../abstract-property'
 import { PropertySharedStyle } from '../property-shared-style'
+import { html } from 'lit'
 
 @customElement('property-effect')
 class PropertyEffects extends AbstractProperty {

package/src/modeller/property-sidebar/effects/property-animation.ts

@@ -2,10 +2,10 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@operato/input/dist/src/ox-input-angle'
+import '@operato/input/ox-input-angle.js'
 
 import { html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators'
+import { customElement, property } from 'lit/decorators.js'
 
 import { Properties, Scene } from '@hatiolab/things-scene'
 

package/src/modeller/property-sidebar/effects/property-animations.ts

@@ -5,10 +5,9 @@
 import './property-animation'
 import '@material/mwc-icon'
 
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators'
-
+import { LitElement, css, html } from 'lit'
 import { Properties, Scene } from '@hatiolab/things-scene'
+import { customElement, property, state } from 'lit/decorators.js'
 
 import { PropertySharedStyle } from '../property-shared-style'
 import { convert } from './value-converter'

package/src/modeller/property-sidebar/effects/property-event-hover.ts

@@ -2,11 +2,12 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@operato/input/dist/src/ox-input-data'
+import '@operato/input/ox-input-data.js'
+
+import { html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
 
-import { LitElement, html } from 'lit'
 import { Properties, Scene } from '@hatiolab/things-scene'
-import { customElement, property } from 'lit/decorators'
 
 import { EffectsSharedStyle } from './effects-shared-style'
 import { convert } from './value-converter'

package/src/modeller/property-sidebar/effects/property-event-tap.ts

@@ -2,11 +2,12 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@operato/input/dist/src/ox-input-data'
+import '@operato/input/ox-input-data.js'
+
+import { html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
 
-import { LitElement, html } from 'lit'
 import { Properties, Scene } from '@hatiolab/things-scene'
-import { customElement, property } from 'lit/decorators'
 
 import { EffectsSharedStyle } from './effects-shared-style'
 import { convert } from './value-converter'

package/src/modeller/property-sidebar/effects/property-event.ts

@@ -5,10 +5,9 @@
 import './property-event-hover'
 import './property-event-tap'
 
-import { html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators'
-
+import { LitElement, html } from 'lit'
 import { Properties, Scene } from '@hatiolab/things-scene'
+import { customElement, property } from 'lit/decorators.js'
 
 import { PropertySharedStyle } from '../property-shared-style'
 import { convert } from './value-converter'

package/src/modeller/property-sidebar/effects/property-shadow.ts

@@ -4,11 +4,10 @@
 
 import '@things-factory/modeller-ui/client/editors/things-editor-color'
 
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators'
+import { LitElement, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
 
 import { Properties } from '@hatiolab/things-scene'
-
 import { convert } from './value-converter'
 
 /**

package/src/modeller/property-sidebar/inspector/inspector.ts

@@ -1,6 +1,6 @@
 import { Component, Container, Properties, Scene } from '@hatiolab/things-scene'
 import { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'
-import { customElement, property } from 'lit/decorators'
+import { customElement, property } from 'lit/decorators.js'
 
 import Sortable from 'sortablejs'
 

package/src/modeller/property-sidebar/shapes/shapes.ts

@@ -2,12 +2,12 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@operato/input/dist/src/ox-input-angle'
-import '@operato/input/dist/src/ox-buttons-radio'
+import '@operato/input/ox-input-angle.js'
+import '@operato/input/ox-buttons-radio.js'
 import '@material/mwc-icon'
 
 import { css, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators'
+import { customElement, property, state } from 'lit/decorators.js'
 
 import { BOUNDS, Component, Properties } from '@hatiolab/things-scene'
 

package/src/modeller/property-sidebar/specifics/specific-properties-builder.ts

@@ -5,7 +5,7 @@
 import '@things-factory/modeller-ui/client/editors/things-editor-property'
 
 import { LitElement, PropertyValues } from 'lit'
-import { customElement, property } from 'lit/decorators'
+import { customElement, property } from 'lit/decorators.js'
 
 import { OxPropertyEditor } from '@operato/property-editor'
 import { Properties } from '@hatiolab/things-scene'