@fmsim/machine 1.0.47 → 1.0.49

package/src/agv-line.ts

@@ -14,7 +14,7 @@ export default class AGVLine extends MCSTransport {
   }
 
   containable(component: Component) {
-    return ['AGV'].includes(component.state.type)
+    return ['AGV', 'Node'].includes(component.state.type)
   }
 
   get auxColor() {

package/src/carrier.ts

@@ -59,7 +59,7 @@ export default class Carrier extends MCSStatusMixin(ParentObjectMixin(Shape)) {
         }
 
         if (decorator || border || arrow) {
-          this.trigger('animatoroff')
+          this.trigger('deco-off')
         }
       }
 
@@ -76,18 +76,18 @@ export default class Carrier extends MCSStatusMixin(ParentObjectMixin(Shape)) {
         }
 
         if (decorator) {
-          this.trigger('animatoroff')
-          this.trigger('icon', decorator)
+          this.trigger('deco-icon-off')
+          this.trigger('deco-icon', decorator)
         }
 
         if (border) {
-          this.trigger('animatoroff')
-          this.trigger('border', border)
+          this.trigger('deco-border-off')
+          this.trigger('deco-border', border)
         }
 
         if (arrow) {
-          this.trigger('animatoroff')
-          this.trigger('bouncing', arrow)
+          this.trigger('deco-arrow-off')
+          this.trigger('deco-arrow', arrow)
         }
       }
     }

package/src/conveyor.ts

@@ -32,7 +32,7 @@ export default class Conveyor extends MCSTransport {
   }
 
   containable(component: Component) {
-    return ['Shuttle', 'Port'].includes(component.state.type)
+    return ['Shuttle', 'Port', 'Node'].includes(component.state.type)
   }
 
   renderConveyor(ctx: CanvasRenderingContext2D) {

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/features/mcs-status-mixin.ts

@@ -20,6 +20,10 @@ export const MCSStatusMixinProperties = [
 
 export function MCSStatusMixin<TBase extends Constructor>(Base: TBase) {
   return class extends Base {
+    isLVComponent() {
+      return true
+    }
+
     get status(): string | undefined {
       return
     }

package/src/mcs-vehicle.ts

@@ -1,8 +1,22 @@
+import { Properties } from '@hatiolab/things-scene'
 import { LEGEND_VEHICLE, Legend } from './features/mcs-status-default'
 import MCSCarrierHolder from './mcs-carrier-holder'
+import Node from './node'
 
 const DIRECTION_GAP = 3
 
+function findNode(vehicle: MCSVehicle, nodeId: string, nodeMachine: string) {
+  if (!nodeId || !nodeMachine) {
+    return null
+  }
+
+  const nodes = vehicle.root.findAllById(nodeId).filter(node => node.state.type == 'Node') as Node[]
+
+  return nodes.find((node: Node) => {
+    return node.nodeMachine === nodeMachine
+  })
+}
+
 /**
  * MCS용 Unit > Transport들의 공통 속성을 정의한 오브젝트
  */
@@ -21,6 +35,8 @@ export default class MCSVehicle extends MCSCarrierHolder {
     ]
   }
 
+  private lastWaypoint: { NodeId: string; NodeMachine: string } | null = null
+
   getLegendFallback(): Legend {
     return LEGEND_VEHICLE
   }
@@ -77,4 +93,39 @@ export default class MCSVehicle extends MCSCarrierHolder {
     super.postrender(ctx)
     // this.renderDirection(ctx)
   }
+
+  onchangeData(after: Properties, before: Properties): void {
+    super.onchangeData(after, before)
+
+    const { NodeId: beforeNodeId, NodeMachine: beforeNodeMachine } = before.data || {}
+    const { NodeId, NodeMachine } = after.data || {}
+
+    if (
+      NodeId === undefined ||
+      NodeMachine === undefined ||
+      (beforeNodeId === NodeId && beforeNodeMachine === NodeMachine) ||
+      (this.lastWaypoint && this.lastWaypoint.NodeId === NodeId && this.lastWaypoint.NodeMachine === NodeMachine)
+    ) {
+      return // not changed
+    }
+
+    const afterNode = findNode(this, NodeId, NodeMachine)
+    if (!afterNode) {
+      console.warn(`Node not found. NodeId: ${NodeId}, NodeMachine: ${NodeMachine}`)
+      return
+    }
+
+    const beforeNode = this.lastWaypoint
+      ? findNode(this, this.lastWaypoint.NodeId, this.lastWaypoint.NodeMachine)
+      : afterNode
+
+    // 실제 존재하는 노드 중 가장 최근에 이동한 노드
+    this.lastWaypoint = { NodeId, NodeMachine }
+
+    this.trigger('waypoint', {
+      from: beforeNode,
+      to: afterNode,
+      duration: 5000
+    })
+  }
 }

package/src/node.ts

@@ -3,12 +3,24 @@
  */
 
 import { Component, Shape } from '@hatiolab/things-scene'
+import MCSMachine from './mcs-machine'
 
 const NATURE = {
   mutable: false,
   resizable: false,
   rotatable: false,
-  properties: []
+  properties: [
+    {
+      type: 'string',
+      name: 'NodeMachine',
+      label: 'node-machine'
+    },
+    {
+      type: 'nodes',
+      label: 'nodes',
+      name: 'nodes'
+    }
+  ]
 }
 
 export default class Node extends Shape {
@@ -65,6 +77,18 @@ export default class Node extends Shape {
     })
   }
 
+  get nodeMachine() {
+    if (this.state.NodeMachine) {
+      return this.state.NodeMachine
+    }
+
+    const parent = this.parent
+
+    if (parent && parent instanceof MCSMachine) {
+      return parent.state.id
+    }
+  }
+
   contains(x, y) {
     var { cx, cy } = this.state
 

package/src/oht-line.ts

@@ -22,7 +22,7 @@ export default class OHTLine extends MCSTransport {
   }
 
   containable(component: Component) {
-    return ['OHT'].includes(component.state.type)
+    return ['OHT', 'Node'].includes(component.state.type)
   }
 
   render(context: CanvasRenderingContext2D) {

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"
 }