@operato/board 0.2.46 → 0.2.50

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

@@ -2,9 +2,11 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
+import './component-detail'
+
 import { LitElement, PropertyValues, css, html } from 'lit'
 import { Pallet, PalletItem } from '../../types'
-import { customElement, property, query } from 'lit/decorators.js'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { Scene } from '@hatiolab/things-scene'
 import { ScrollbarStyles } from '@operato/styles'
@@ -27,7 +29,7 @@ class ComponentMenu extends LitElement {
         width: 180px;
         height: 100%;
 
-        overflow: hidden;
+        overflow: visible;
 
         border: 2px solid var(--component-menu-border-color);
         box-sizing: border-box;
@@ -80,20 +82,40 @@ class ComponentMenu extends LitElement {
         width: var(--component-menu-item-icon-size);
         height: var(--component-menu-item-icon-size);
       }
+
+      component-detail {
+        position: absolute;
+        top: 0;
+        left: 180px;
+        height: 100%;
+        outline: none;
+      }
+
+      component-detail[hidden] {
+        display: none;
+      }
     `
   ]
 
   @property({ type: Object }) groups: Pallet[] = []
   @property({ type: Object }) scene: Scene | null = null
   @property({ type: String }) group: string | null = ''
-  @property({ type: Array }) templates: PalletItem[] = []
+
+  @state() templates: PalletItem[] = []
+  @state() template: PalletItem | any
+
+  @query('component-detail') detail!: HTMLElement
 
   render() {
     return this.group
       ? html`
           <h2 onclick=${(e: MouseEvent) => e.stopPropagation()}>${this.group} list</h2>
 
-          <div templates>
+          <div
+            templates
+            @mouseover=${(e: MouseEvent) => this.onHoverComponent(e)}
+            @mouseout=${(e: MouseEvent) => (this.template = null)}
+          >
             ${(this.templates || []).map(
               template => html`
                 <div @click=${this.onClickTemplate} data-type=${template.type} template>
@@ -102,6 +124,16 @@ class ComponentMenu extends LitElement {
               `
             )}
           </div>
+
+          <component-detail
+            tabindex="-1"
+            @focusout=${() => {
+              this.template = null
+            }}
+            .template=${this.template}
+            hidden
+          >
+          </component-detail>
         `
       : html``
   }
@@ -109,13 +141,28 @@ class ComponentMenu extends LitElement {
   updated(changes: PropertyValues<this>) {
     if (changes.has('group')) {
       if (!this.group) {
-        this.style.display = 'none'
         this.templates = []
+        this.setAttribute('hidden', '')
       } else {
-        this.style.display = 'flex'
         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) {
@@ -126,11 +173,9 @@ class ComponentMenu extends LitElement {
       return
     }
 
-    var group = this.groups.find(g => g.name == this.group)
-
-    if (this.scene && group) {
-      var template = group.templates.find(template => template.type == type)
-      template && this.scene.add(JSON.parse(JSON.stringify(template.model)), { cx: 200, cy: 200 })
+    if (this.scene) {
+      this.template = this.templates.find(template => template.type == type)
+      this.template && this.scene.add(JSON.parse(JSON.stringify(this.template.model)), { cx: 200, cy: 200 })
     }
 
     this.group = null

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

@@ -4,9 +4,11 @@
 
 import './component-menu'
 
-import { LitElement, css, html } from 'lit'
+import { LitElement, PropertyValues, css, html } from 'lit'
 import { SCENE_MODE, Scene } from '@hatiolab/things-scene'
-import { customElement, property, query } from 'lit/decorators.js'
+import { customElement, property, query, queryAll } from 'lit/decorators.js'
+
+import { Group } from '../../types'
 
 @customElement('component-toolbar')
 class ComponentToolbar extends LitElement {
@@ -21,7 +23,7 @@ class ComponentToolbar extends LitElement {
         background-color: var(--component-toolbar-background-color);
       }
 
-      span {
+      img {
         display: flex;
         flex-direction: row;
 
@@ -31,130 +33,88 @@ 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;
-      }
-
-      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;
+        padding: 6px;
+        box-sizing: border-box;
       }
 
       component-menu {
-        display: none;
         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: Array }) componentGroupList: Group[] = []
   @property({ type: String }) group?: string | null
   @property({ type: Object }) scene!: Scene
   @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.VIEW
 
-  @query('#menu') private menu!: HTMLElement
+  @query('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: Group) => {
+          sum[group.name] =
+            'data:image/svg+xml;charset=UTF-8;base64,' + btoa(group.icon.replace(/{{strokeColor}}/g, color))
+          return sum
+        }, {} as { [name: string]: string })
+    }
+
+    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`
-      <span id="shift" class="pressed" @click=${() => this._onClickShift()}> </span>
+    const componentList = this.componentGroupList || []
 
-      ${this.componentGroupList
+    return html`
+      ${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"
         @focusout=${() => {
           this.group = null
         }}
-        id="menu"
         .scene=${this.scene}
         .group=${this.group}
-        .groups=${this.componentGroupList}
-        class="shadow"
+        .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() {
-    var shift = this.renderRoot.querySelector('#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/property-sidebar/data-binding/data-binding-mapper.ts

@@ -2,11 +2,11 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/i18n-base'
-import '@things-factory/modeller-ui/client/editors/things-editor-code'
+// 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 '@things-factory/modeller-ui/client/editors/things-editor-buttons-radio'
+import '@operato/input/dist/src/ox-buttons-radio'
+import '@operato/input/dist/src/ox-input-code'
 
 import { LitElement, PropertyValues, css, html } from 'lit'
 import { Properties, Scene } from '@hatiolab/things-scene'
@@ -70,7 +70,7 @@ export default class DataBindingMapper extends LitElement {
 
       input,
       select,
-      things-editor-buttons-radio,
+      ox-buttons-radio,
       [mapping-rule] {
         grid-column: span 7;
       }
@@ -79,19 +79,19 @@ export default class DataBindingMapper extends LitElement {
         border: var(--property-sidebar-fieldset-border);
       }
 
-      things-editor-buttons-radio {
+      ox-buttons-radio {
         display: flex;
         padding: 0 4px;
       }
 
-      things-editor-buttons-radio > * {
+      ox-buttons-radio > * {
         text-align: center;
         flex: 1;
         margin: 2px;
         border-bottom: 2px solid #fff;
       }
 
-      things-editor-buttons-radio div[active] {
+      ox-buttons-radio div[active] {
         border-color: #f2471c;
       }
 
@@ -121,7 +121,7 @@ export default class DataBindingMapper extends LitElement {
         display: none;
       }
 
-      things-editor-code {
+      ox-input-code {
         height: 300px;
         overflow: auto;
       }
@@ -169,6 +169,10 @@ export default class DataBindingMapper extends LitElement {
   }
 
   render() {
+    const mapping = this.mapping || {
+      rule: 'value'
+    }
+
     return html`
       <label for="accessor-input"> <i18n-msg msgid="label.accessor">accessor</i18n-msg> </label>
       <input
@@ -176,7 +180,7 @@ export default class DataBindingMapper extends LitElement {
         value-key="accessor"
         type="text"
         data-mapping-accessor
-        .value=${this.mapping.accessor || ''}
+        .value=${mapping.accessor || ''}
       />
 
       <label for="target-input"> <i18n-msg msgid="label.target">target</i18n-msg> </label>
@@ -185,7 +189,7 @@ export default class DataBindingMapper extends LitElement {
         type="text"
         value-key="target"
         list="target-list"
-        .value=${this.mapping.target || ''}
+        .value=${mapping.target || ''}
         @focusin=${() => {
           if (!this.scene) this._componentIds = []
           this._componentIds = this.scene!.ids.map(info => info.key).filter(id => !!id)
@@ -200,45 +204,44 @@ export default class DataBindingMapper extends LitElement {
       </datalist>
 
       <label for="property-input"> <i18n-msg msgid="label.property">property</i18n-msg> </label>
-      <select id="property-input" value-key="property" .value=${this.mapping.property}>
+      <select id="property-input" value-key="property" .value=${mapping.property}>
         ${this.properties.map(
-          item =>
-            html` <option .value=${item.name} ?selected=${item.name == this.mapping.property}>${item.label}</option> `
+          item => html` <option .value=${item.name} ?selected=${item.name == mapping.property}>${item.label}</option> `
         )}
       </select>
 
       <label> <i18n-msg msgid="label.rule-type">rule type</i18n-msg> </label>
-      <things-editor-buttons-radio .value=${this.mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>
+      <ox-buttons-radio .value=${mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>
         <div data-value="value"><i18n-msg msgid="label.value"></i18n-msg></div>
         <div data-value="map"><i18n-msg msgid="label.map"></i18n-msg></div>
         <div data-value="range"><i18n-msg msgid="label.range"></i18n-msg></div>
         <div data-value="eval"><i18n-msg msgid="label.eval"></i18n-msg></div>
-      </things-editor-buttons-radio>
+      </ox-buttons-radio>
 
-      <div rule-editors class="content" ?hidden=${this.mapping.rule == 'value'}>
+      <div rule-editors class="content" ?hidden=${mapping.rule == 'value'}>
         <things-editor-value-map
           value-key="map"
           .value=${this.rule.map || {}}
-          .valuetype=${this._valuetype(this.mapping.property!)}
-          ?active=${this.mapping.rule == 'map'}
+          .valuetype=${this._valuetype(mapping.property!)}
+          ?active=${mapping.rule == 'map'}
         >
         </things-editor-value-map>
 
         <things-editor-value-range
           value-key="range"
           .value=${this.rule.range || []}
-          .valuetype=${this._valuetype(this.mapping.property!)}
-          ?active=${this.mapping.rule == 'range'}
+          .valuetype=${this._valuetype(mapping.property!)}
+          ?active=${mapping.rule == 'range'}
         >
         </things-editor-value-range>
 
-        <things-editor-code
+        <ox-input-code
           value-key="eval"
           id="eval-editor"
           .value=${this.rule.eval || ''}
-          ?active=${this.mapping.rule == 'eval'}
+          ?active=${mapping.rule == 'eval'}
         >
-        </things-editor-code>
+        </ox-input-code>
       </div>
     `
   }

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

@@ -2,11 +2,11 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/i18n-base'
 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 { Properties, Scene } from '@hatiolab/things-scene'
 import { PropertyValues, css, html } from 'lit'
@@ -161,9 +161,7 @@ class PropertyDataBinding extends AbstractProperty {
     `
   ]
 
-  @property({ type: Object }) value: Properties = {
-    mappings: []
-  }
+  @property({ type: Object }) value?: Properties
   @property({ type: Object }) scene?: Scene
 
   @state() mappingIndex: number = 0
@@ -177,7 +175,7 @@ class PropertyDataBinding extends AbstractProperty {
   private mapping: Properties = {}
 
   get mappings() {
-    return this.value.mappings || []
+    return this.value?.mappings || []
   }
 
   firstUpdated() {
@@ -195,6 +193,10 @@ class PropertyDataBinding extends AbstractProperty {
   }
 
   render() {
+    const value = this.value || {
+      mappings: []
+    }
+
     return html`
       <fieldset>
         <legend>
@@ -202,21 +204,21 @@ class PropertyDataBinding extends AbstractProperty {
         </legend>
         <div class="property-grid">
           <label> <i18n-msg msgid="label.id">ID</i18n-msg> </label>
-          <input value-key="id" .value=${this.value.id || ''} />
+          <input value-key="id" .value=${value.id || ''} />
 
           <label> <i18n-msg msgid="label.class">Class</i18n-msg> </label>
-          <input value-key="class" .value=${this.value.class || ''} />
+          <input value-key="class" .value=${value.class || ''} />
 
           <label> <i18n-msg msgid="label.template-prefix">Template Prefix</i18n-msg> </label>
-          <input value-key="templatePrefix" .value=${this.value.templatePrefix || ''} />
+          <input value-key="templatePrefix" .value=${value.templatePrefix || ''} />
 
           <div class="checkbox-row">
-            <input id="checkbox-ndns" type="checkbox" value-key="ndns" .checked=${this.value.ndns} />
+            <input id="checkbox-ndns" type="checkbox" value-key="ndns" .checked=${value.ndns} />
             <label for="checkbox-ndns"> <i18n-msg msgid="label.ndns">No Data No Show</i18n-msg> </label>
           </div>
 
           <div class="checkbox-row">
-            <input id="checkbox-sensitive" type="checkbox" value-key="sensitive" .checked=${this.value.sensitive} />
+            <input id="checkbox-sensitive" type="checkbox" value-key="sensitive" .checked=${value.sensitive} />
             <label for="checkbox-sensitive">
               <i18n-msg msgid="label.intent-sensitive">Intent Sensitive</i18n-msg>
             </label>
@@ -234,7 +236,7 @@ class PropertyDataBinding extends AbstractProperty {
             >${this._dataExpanded ? 'expand_less' : 'expand_more'}</mwc-icon
           >
         </legend>
-        <things-editor-data value-key="data" .value=${this.value.data}> </things-editor-data>
+        <ox-input-data value-key="data" .value=${value.data}> </ox-input-data>
       </fieldset>
 
       <fieldset>
@@ -257,8 +259,8 @@ class PropertyDataBinding extends AbstractProperty {
               this._setMappingIndex((e.target as any).value)
             }}
           >
-            ${this.mappings.map((m: string, i: number) => html` <div value=${i} data-mapping>${i + 1}</div> `)}
-            <div value=${this.mappings.length} data-mapping disabled>${this.mappings.length + 1}</div>
+            ${this.mappings.map((m: string, i: number) => html` <div data-value=${i} data-mapping>${i + 1}</div> `)}
+            <div data-value=${this.mappings.length} data-mapping disabled>${this.mappings.length + 1}</div>
           </ox-buttons-radio>
 
           <mwc-icon
@@ -284,7 +286,7 @@ class PropertyDataBinding extends AbstractProperty {
         <data-binding-mapper
           @value-change=${(e: CustomEvent) => this._onMappingChanged(e)}
           .scene=${this.scene}
-          .mapping=${(this.value.mappings && this.value.mappings[this.mappingIndex]) || {}}
+          .mapping=${(value.mappings && value.mappings[this.mappingIndex]) || {}}
           .properties=${PROPS}
         >
         </data-binding-mapper>
@@ -299,7 +301,7 @@ class PropertyDataBinding extends AbstractProperty {
   }
 
   _clearDataBindingMapper() {
-    var mappings = [...(this.value.mappings || [])]
+    var mappings = [...(this.value?.mappings || [])]
     mappings.splice(this.mappingIndex, 1)
     this._onAfterValueChange(
       'mappings',
@@ -313,7 +315,7 @@ class PropertyDataBinding extends AbstractProperty {
 
   async _pasteDataBindingMapper() {
     var index = this.mappingIndex
-    var mappings = [...(this.value.mappings || [])]
+    var mappings = [...(this.value?.mappings || [])]
     mappings[this.mappingIndex] = JSON.parse(clipboard)
 
     this._onAfterValueChange('mappings', mappings)
@@ -370,7 +372,7 @@ class PropertyDataBinding extends AbstractProperty {
     }
 
     /* mapping의 모든 속성이 편집되면, 모델에 반영한다. */
-    var mappings = [...(this.value.mappings || [])]
+    var mappings = [...(this.value?.mappings || [])]
 
     if (mapping.target && mapping.property && mapping.rule) {
       mappings[this.mappingIndex] = mapping

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

@@ -28,7 +28,7 @@ export const EffectsSharedStyle = css`
 
   input,
   select,
-  things-editor-angle-input,
+  ox-input-angle,
   things-editor-color,
   [custom-editor] {
     grid-column: span 7;
@@ -36,7 +36,7 @@ export const EffectsSharedStyle = css`
 
   input,
   select,
-  things-editor-angle-input input,
+  ox-input-angle input,
   things-editor-color input,
   [custom-editor] input {
     border: var(--property-sidebar-fieldset-border);

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

@@ -2,23 +2,23 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/i18n-base'
 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 { AbstractProperty } from '../abstract-property'
 import { PropertySharedStyle } from '../property-shared-style'
-import { Scene } from '@hatiolab/things-scene'
-import { html } from 'lit'
 
 @customElement('property-effect')
 class PropertyEffects extends AbstractProperty {
   static styles = [PropertySharedStyle]
 
-  @property({ type: Object }) value: any = {}
+  @property({ type: Object }) value?: Properties
   @property({ type: Object }) scene?: Scene
 
   firstUpdated() {
@@ -26,13 +26,15 @@ class PropertyEffects extends AbstractProperty {
   }
 
   render() {
+    const value = this.value || {}
+
     return html`
       <fieldset>
         <legend>
           <title-with-help topic="board-modeller/effects/shadow" msgid="label.shadow">shadow</title-with-help>
         </legend>
 
-        <property-shadow value-key="shadow" .value=${this.value.shadow || {}}> </property-shadow>
+        <property-shadow value-key="shadow" .value=${value.shadow || {}}> </property-shadow>
       </fieldset>
 
       <fieldset>
@@ -42,14 +44,14 @@ class PropertyEffects extends AbstractProperty {
 
         <div class="property-grid">
           <label> <i18n-msg msgid="label.retention">retention</i18n-msg> </label>
-          <input type="number" value-key="retention" .value=${this.value.retention} placeholder="ms" />
+          <input type="number" value-key="retention" .value=${value.retention} placeholder="ms" />
         </div>
       </fieldset>
 
-      <property-animations value-key="animation" .scene=${this.scene} .value=${this.value.animation || {}}>
+      <property-animations value-key="animation" .scene=${this.scene} .value=${value.animation || {}}>
       </property-animations>
 
-      <property-event value-key="event" .scene=${this.scene} .value=${this.value.event || {}}> </property-event>
+      <property-event value-key="event" .scene=${this.scene} .value=${value.event || {}}> </property-event>
     `
   }
 }