@fmsim/machine 1.0.48 → 1.0.49

package/src/editors/ox-input-nodes.ts

@@ -4,101 +4,168 @@
 
 import '@material/web/icon/icon.js'
 
-import { css, html } from 'lit'
-import { customElement, state } from 'lit/decorators.js'
+import { css, html, nothing } from 'lit'
+import { customElement, state, query, queryAll } from 'lit/decorators.js'
 
 import { OxFormField } from '@operato/input'
-import { Node } from '../types'
 
 @customElement('ox-input-nodes')
 export class OxInputNodes extends OxFormField {
   static styles = [
     css`
       :host {
-        display: flex;
-        --md-icon-size: 1.4em;
-      }
-
-      fieldset {
-        flex: 1;
-        font-size: 0.8em;
-        border: 0;
-        border-bottom: 1px solid;
-        background-color: var(--md-sys-color-surface-variant);
-        padding: var(--spacing-medium);
-      }
-
-      ul {
         display: flex;
         flex-direction: column;
-        gap: var(--spacing-small);
-
-        padding: 0;
-        margin: 0;
+        overflow: hidden;
+
+        --md-icon-size: 14px;
+        --spacing-large: 16px;
+        --spacing-medium: 8px;
+        --spacing-small: 4px;
+        --spacing-tiny: 2px;
+        --padding-default: 4px;
+        --button-color: rgba(0, 0, 0, 0.5);
+        --button-border: 1px solid rgba(0, 0, 0, 0.15);
+        --button-background-color: rgba(0, 0, 0, 0.05);
+        --button-background-focus-color: rgba(0, 0, 0, 0.1);
+        --button-active-border: 1px solid rgba(0, 0, 0, 0.2);
       }
 
-      li {
+      div {
         display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: var(--spacing-large);
+        flex-flow: row nowrap;
+        gap: var(--spacing-medium);
+        margin-bottom: var(--spacing-small);
       }
 
-      li > * {
-        flex: 1;
+      button {
+        border: var(--button-border);
+        border-radius: var(--border-radius);
+        background-color: var(--button-background-color);
+        padding: var(--spacing-small) var(--padding-default);
+        line-height: 0.8;
+        color: var(--button-color);
+        cursor: pointer;
+      }
+      button + button {
+        margin-left: -5px;
+      }
+      button:focus,
+      button:hover,
+      button:active {
+        border: var(--button-active-border);
+        background-color: var(--button-background-focus-color);
+        color: rgba(0, 0, 0, 0.5);
       }
 
-      div[data-name] {
-        text-align: right;
+      input {
+        flex: 1;
+        border: 0;
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        padding: var(--spacing-tiny);
+        font: var(--input-font);
+        min-width: 50px;
       }
 
-      div[data-value] {
-        display: flex;
-        justify-content: space-between;
+      input:focus {
+        outline: none;
+        border: 1px solid rgba(0, 0, 0, 0.2);
       }
     `
   ]
 
-  @state() value: Node[] = []
+  @state() value: string[] = []
+
+  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>
+  @query('[data-record-new] [data-id]') addinput!: HTMLInputElement
+
+  private _changingNow: boolean = false
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this._onChange.bind(this))
+  }
 
   render() {
-    const nodes = this.value || ([] as Node[])
+    const value = this.value || []
 
     return html`
-      <fieldset>
-        <ul>
-          ${nodes.map(
-            ({ id, name }) => html`
-              <li @change=${this.onChange}>
-                <div data-id=${id}>${id}</div>
-                <input type="text" name="name" value=${name || ''} />
-              </li>
-            `
-          )}
-        </ul>
-      </fieldset>
+      ${value.map(
+        item => html`
+          <div data-record>
+            <input
+              type="text"
+              data-id
+              .value=${item}
+              @keyup=${(e: KeyboardEvent) => e.key === 'Enter' && this._build()}
+            />
+            <button
+              class="record-action"
+              @click=${(e: MouseEvent) => this._delete(e)}
+              tabindex="-1"
+              ?disabled=${this.disabled}
+            >
+              <md-icon>remove</md-icon>
+            </button>
+          </div>
+        `
+      )}
+      ${this.disabled
+        ? nothing
+        : html`
+            <div data-record-new>
+              <input type="text" data-id value="" @keyup=${(e: KeyboardEvent) => e.key === 'Enter' && this._add()} />
+              <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
+                <md-icon>add</md-icon>
+              </button>
+            </div>
+          `}
     `
   }
 
-  onChange(e: Event) {
-    e.stopPropagation()
+  _onChange(e: Event) {
+    if (this._changingNow) {
+      return
+    }
+
+    this._changingNow = true
 
-    const lis = this.renderRoot.querySelectorAll('li')
+    const input = e.target as HTMLInputElement
+
+    const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement
+
+    if (record.hasAttribute('data-record')) {
+      this._build()
+    } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {
+      this._add()
+    }
+
+    this._changingNow = false
+  }
+
+  _build(includeNewRecord?: boolean) {
+    const selector = includeNewRecord ? '[data-record],[data-record-new]' : '[data-record]'
+    const records = this.renderRoot.querySelectorAll(selector) as NodeListOf<HTMLElement>
+
+    this.value = Array.from(records)
+      .map(record => (record.querySelector('[data-id]')! as HTMLInputElement).value as string)
+      .filter(Boolean)
+      .sort()
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+
+  _add() {
+    this._build(true)
+
+    this.addinput.value = ''
+    this.addinput.focus()
+  }
 
-    this.value = Array.from(lis).map(li => {
-      const id = li.querySelector('[data-id]')?.getAttribute('data-id')
-      const name = li.querySelector('input')?.value
-      const node = this.value.find(node => node.id === id)
+  _delete(e: MouseEvent) {
+    const record = (e.target as Element).closest('[data-record]') as HTMLElement
 
-      return { ...node!, name }
-    })
+    ;(record!.querySelector('[data-id]') as HTMLInputElement)!.value = ''
 
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        bubbles: true,
-        composed: true,
-        detail: this.value
-      })
-    )
+    this._build()
   }
 }

package/src/editors/ox-property-editor-nodes.ts

@@ -4,23 +4,10 @@ import { html } from 'lit'
 import { customElement } from 'lit/decorators.js'
 
 import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
-import { Node } from '../types'
 
 @customElement('ox-property-editor-nodes')
 export class PropertyEditorNodes extends OxPropertyEditor {
-  editorTemplate(value: Node[], spec: PropertySpec) {
-    // const { defaultValue = [] } = spec
-    // value ||= []
-
-    // const valueProperty = defaultValue
-    //   .map(({ name, ...others }) => {
-    //     const node = value.find(v => v.name == name)
-    //     if (node) {
-    //       return { ...others, ...node }
-    //     }
-    //   })
-    //   .filter(Boolean)
-
-    return html` <ox-input-nodes .value=${value} fullwidth></ox-input-nodes> `
+  editorTemplate(value: string[], spec: PropertySpec) {
+    return html` <ox-input-nodes .value=${value}></ox-input-nodes> `
   }
 }

package/src/node.ts

@@ -10,15 +10,15 @@ const NATURE = {
   resizable: false,
   rotatable: false,
   properties: [
-    {
-      type: 'string',
-      name: 'NodeIDs',
-      label: 'node-ids'
-    },
     {
       type: 'string',
       name: 'NodeMachine',
       label: 'node-machine'
+    },
+    {
+      type: 'nodes',
+      label: 'nodes',
+      name: 'nodes'
     }
   ]
 }

package/translations/en.json

@@ -42,5 +42,7 @@
   "label.shuttle-legend-name": "shuttle",
   "label.crane-legend-name": "crane",
   "label.shelf-legend-name": "shelf",
-  "label.equipment-legend-name": "equipment"
+  "label.equipment-legend-name": "equipment",
+  "label.node-machine": "node machine",
+  "label.nodes": "nodes"
 }

package/translations/ja.json

@@ -44,5 +44,7 @@
   "label.shuttle-legend-name": "shuttle",
   "label.crane-legend-name": "crane",
   "label.shelf-legend-name": "shelf",
-  "label.equipment-legend-name": "equipment"
+  "label.equipment-legend-name": "equipment",
+  "label.node-machine": "node machine",
+  "label.nodes": "nodes"
 }

package/translations/ko.json

@@ -45,5 +45,7 @@
   "label.shuttle-legend-name": "셔틀",
   "label.crane-legend-name": "크레인",
   "label.shelf-legend-name": "선반",
-  "label.equipment-legend-name": "장비"
+  "label.equipment-legend-name": "장비",
+  "label.node-machine": "node machine",
+  "label.nodes": "nodes"
 }

package/translations/ms.json

@@ -44,5 +44,7 @@
   "label.shuttle-legend-name": "shuttle",
   "label.crane-legend-name": "crane",
   "label.shelf-legend-name": "shelf",
-  "label.equipment-legend-name": "equipment"
+  "label.equipment-legend-name": "equipment",
+  "label.node-machine": "node machine",
+  "label.nodes": "nodes"
 }

package/translations/zh.json

@@ -44,5 +44,7 @@
   "label.shuttle-legend-name": "shuttle",
   "label.crane-legend-name": "crane",
   "label.shelf-legend-name": "shelf",
-  "label.equipment-legend-name": "equipment"
+  "label.equipment-legend-name": "equipment",
+  "label.node-machine": "node machine",
+  "label.nodes": "nodes"
 }