@fmsim/machine 2.0.0-beta.104 → 2.0.0-beta.108

package/src/stocker-capacity-bar.ts

@@ -1,138 +1,32 @@
-import {
-  Component,
-  ComponentNature,
-  POSITION,
-  Properties,
-  RectPath,
-  Shape,
-  sceneComponent
-} from '@hatiolab/things-scene'
-import { themesColorRange } from '@fmsim/api'
+import { ComponentNature, RectPath, Shape, sceneComponent } from '@hatiolab/things-scene'
 import { MCSStatusMixin } from './features/mcs-status-mixin'
-import { LEGEND_CAPACITY, Legend, resolveCarrierLegend } from './features/mcs-status-default'
-import { safeRound } from './utils/safe-round'
-import { getValueOnRanges } from './utils/get-value-on-ranges'
+import { LEGEND_CAPACITY, Legend } from './features/mcs-status-default'
 import { ParentObjectMixin, ParentObjectMixinProperties } from './features/parent-object-mixin'
-import { carrierSegments, abnormalSegments, carrierColorsFromLegend, GaugeSegment } from './utils/stocker-gauge'
+import { CapacityGaugeMixin, CapacityGaugeMixinProperties } from './features/capacity-gauge-mixin'
 
 /**
  * 스토커 게이지 (통합).
  *
- * 하나의 컴포넌트가 mode 에 따라 3가지 게이지를 표현한다:
- *  - 'capacity'  : 용량 사용률(usage%) 채움 게이지 + high/low watermark (기본)
- *  - 'carrier'   : 캐리어 상태비율 세그먼트 (Full / Empty / EmptyEmpty)
- *  - 'abnormal'  : 캐리어 정상/비정상 비율 세그먼트 (Normal / Abnormal)
+ * mode 에 따라 capacity / carrier / abnormal 3가지 게이지를 표현한다. 그리는 규칙은
+ * CapacityGaugeMixin 에 있으며 ZoneCapacityBar 와 완전히 공유한다(단일 소스). 스토커는
+ * STOCKER 내부에 놓이는 Shape 로, 부모 STOCKER 가 데이터를 push 한다(isIdentifiable=false).
  *
- * mode 소스: root.stockerGaugeMode (기본 'capacity').
- * RootContainer 의 **런타임 전용 transient 속성** — 모델에 저장하지 않고 항상 'capacity'
- * 로 시작하며 실행 중 동적으로만 변경된다(root-container-override.ts 정의). 3D 표현
- * (machine-3d.ts buildGauge)과 동일 소스라 2D/3D 게이지가 항상 일치한다.
- *
- * 데이터 필드(2D 기준, canonical):
- *  - capacity : CURRENTCAPACITY / MAXCAPACITY / HIGHWATERMARK / LOWWATERMARK / FULLUP
- *  - carrier  : CARRIER_FULL / CARRIER_EMPTY / CARRIER_EMPTY_EMPTY
- *  - abnormal : CARRIER_NORMAL / CARRIER_ABNORMAL
+ * mode 소스: root.stockerGaugeMode. 3D(machine-3d buildGauge)와 동일 소스라 2D/3D 가 일치한다.
  */
 
 const NATURE: ComponentNature = {
   mutable: false,
   resizable: true,
   rotatable: true,
-  properties: [
-    ...ParentObjectMixinProperties,
-    {
-      type: 'select',
-      label: 'legend-name',
-      name: 'legendName',
-      property: {
-        options: themesColorRange
-      }
-    },
-    {
-      type: 'number',
-      name: 'currentUsage',
-      label: 'current-usage'
-    },
-    {
-      type: 'number',
-      name: 'highWatermark',
-      label: 'high-watermark'
-    },
-    {
-      type: 'number',
-      name: 'lowWatermark',
-      label: 'low-watermark'
-    },
-    {
-      type: 'number',
-      name: 'maxCapacity',
-      label: 'max-capacity'
-    },
-    {
-      type: 'boolean',
-      name: 'fullup',
-      label: 'fullup'
-    },
-    {
-      type: 'number',
-      name: 'carrierFull',
-      label: 'carrier-full'
-    },
-    {
-      type: 'number',
-      name: 'carrierEmpty',
-      label: 'carrier-empty'
-    },
-    {
-      type: 'number',
-      name: 'carrierEmptyEmpty',
-      label: 'carrier-empty-empty'
-    },
-    {
-      type: 'number',
-      name: 'carrierNormal',
-      label: 'carrier-normal'
-    },
-    {
-      type: 'number',
-      name: 'carrierAbnormal',
-      label: 'carrier-abnormal'
-    },
-    {
-      type: 'number',
-      label: 'round',
-      name: 'round',
-      property: {
-        min: 0
-      }
-    },
-    {
-      type: 'hidden',
-      name: 'usage',
-      label: 'usage'
-    }
-  ],
+  properties: [...ParentObjectMixinProperties, ...CapacityGaugeMixinProperties],
   'value-property': 'usage'
 }
 
-var controlHandler = {
-  ondragmove: function (point: POSITION, index: number, component: Component) {
-    var { left, top, width, height } = component.model
-
-    var transcoorded = component.transcoordP2S(point.x, point.y)
-    var round = ((transcoorded.x - left) / (width / 2)) * 100
-
-    round = safeRound(round, width, height)
-
-    component.set({
-      round
-    })
-  }
-}
-
 @sceneComponent('StockerCapacityBar')
 @sceneComponent('MCSGaugeCapacityBar')
-export default class StockerCapacityBar extends ParentObjectMixin(MCSStatusMixin(RectPath(Shape))) {
+export default class StockerCapacityBar extends CapacityGaugeMixin(
+  ParentObjectMixin(MCSStatusMixin(RectPath(Shape)))
+) {
   static get nature() {
     return NATURE
   }
@@ -142,473 +36,22 @@ export default class StockerCapacityBar extends ParentObjectMixin(MCSStatusMixin
     return ['STOCKER']
   }
 
-  /** 게이지 모드: RootContainer 런타임 transient 속성. 3D(machine-3d) 와 동일 소스. */
-  get gaugeMode(): string {
-    return (this.root as any)?.stockerGaugeMode || 'capacity'
-  }
-
-  get controls() {
-    var { left, top, width, round, height } = this.state
-    round = round == undefined ? 0 : safeRound(round, width, height)
-
-    return [
-      {
-        x: left + (width / 2) * (round / 100),
-        y: top,
-        handler: controlHandler
-      }
-    ]
-  }
-
+  /** 게이지는 자체 id 로 매핑하지 않는다 — 부모 STOCKER 가 데이터를 push. */
   isIdentifiable() {
     return false
   }
 
-  getTheme() {
-    const { legendName } = this.state
-
-    if (legendName) {
-      return (this.root as any)?.style?.[legendName]
-    }
-  }
-
-  get legend(): Legend {
-    return this.getTheme() || this.getLegendFallback()
-  }
-
-  getLegendFallback() {
+  getLegendFallback(): Legend {
     return (this.root as any).stockerCapacityLegendTheme || LEGEND_CAPACITY
   }
 
-  get statusColor() {
-    const { fullup } = this.state
-    return fullup ? 'red' : getValueOnRanges(this.usage, this.legend)
-  }
-
-  get text() {
-    // usage% 값은 capacity 모드에서만 표시. carrier/abnormal 은 세그먼트별 자체 라벨을 그리므로
-    // base 의 value 텍스트(value-property=usage)를 억제한다.
-    if (this.gaugeMode !== 'capacity') {
-      return ''
-    }
-    return this.usage + '%'
-  }
-
-  render(context: CanvasRenderingContext2D) {
-    const mode = this.gaugeMode
-
-    if (mode === 'carrier' || mode === 'abnormal') {
-      this.renderSegmentGauge(context, this.segments(mode))
-      return
-    }
-
-    // capacity (기본)
-    const { width, height } = this.bounds
-    if (width >= height) {
-      this.renderLandscape(context)
-    } else {
-      this.renderPortrait(context)
-    }
-  }
-
   /**
    * Shape.postrender 의 drawFill/drawStroke 를 건너뛴다.
-   * 각 모드 render 가 자체 배경(fillStyle)·외곽선(strokeStyle)을 이미 그리므로, base 가
-   * fillStyle 로 게이지 전체를 다시 덮어(각 모드 표현이 사라지는) 것을 방지한다.
+   * render 가 자체 배경(fillStyle)·외곽선(strokeStyle)을 이미 그리므로, base 가
+   * fillStyle 로 게이지 전체를 다시 덮는(각 모드 표현이 사라지는) 것을 방지한다.
    * 값 텍스트(drawText)는 Component.postrender 와 동일하게 유지한다.
    */
   postrender(context: CanvasRenderingContext2D) {
-    this.drawText(context)
-  }
-
-  /**
-   * carrier/abnormal mode 의 세그먼트 목록 (공유 유틸 = 3D 와 동일 계산).
-   * 배열 순서 = portrait 아래→위 / landscape 왼→오.
-   */
-  segments(mode: string): GaugeSegment[] {
-    if (mode === 'abnormal') {
-      const { carrierNormal = 0, carrierAbnormal = 0 } = this.state
-      return abnormalSegments(carrierNormal, carrierAbnormal)
-    }
-    const { carrierFull = 0, carrierEmpty = 0, carrierEmptyEmpty = 0 } = this.state
-    // 색상은 carrier 컴포넌트와 동일한 legend(테마)에서 취득 (carrierColorsFromLegend).
-    const colors = carrierColorsFromLegend(resolveCarrierLegend(this))
-    return carrierSegments(carrierFull, carrierEmpty, carrierEmptyEmpty, colors)
-  }
-
-  /** 세그먼트 게이지 렌더 (carrier/abnormal 공통). bounds 방향으로 landscape/portrait 자동. */
-  renderSegmentGauge(context: CanvasRenderingContext2D, segments: GaugeSegment[]) {
-    const { left, top, width, height } = this.bounds
-    const { lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state
-    const landscape = width >= height
-
-    context.save()
-    context.translate(left, top)
-
-    // background
-    context.beginPath()
-    context.fillStyle = fillStyle
-    context.roundRect(0, 0, width, height, round)
-    context.fill()
-    context.clip()
-
-    if (landscape) {
-      // 왼→오
-      let x = 0
-      for (const seg of segments) {
-        const segWidth = width * seg.ratio
-        if (segWidth <= 0) continue
-
-        context.beginPath()
-        context.fillStyle = seg.color
-        context.rect(x, 0, segWidth, height)
-        context.fill()
-
-        this._drawSegmentLabel(context, seg, x, 0, segWidth, height)
-        x += segWidth
-      }
-    } else {
-      // 아래→위 (배열 첫 세그먼트가 바닥)
-      let y = height
-      for (const seg of segments) {
-        const segHeight = height * seg.ratio
-        if (segHeight <= 0) continue
-
-        y -= segHeight
-
-        context.beginPath()
-        context.fillStyle = seg.color
-        context.rect(0, y, width, segHeight)
-        context.fill()
-
-        this._drawSegmentLabel(context, seg, 0, y, width, segHeight)
-      }
-    }
-
-    // outline
-    context.beginPath()
-    context.setLineDash([])
-    context.strokeStyle = strokeStyle
-    context.lineWidth = lineWidth
-    context.roundRect(0, 0, width, height, round)
-    context.stroke()
-
-    context.translate(-left, -top)
-    context.restore()
-  }
-
-  private _drawSegmentLabel(
-    context: CanvasRenderingContext2D,
-    seg: GaugeSegment,
-    x: number,
-    y: number,
-    w: number,
-    h: number
-  ) {
-    // 이름 라벨(Full/Empty/Abnormal…)은 그리지 않는다. 각 세그먼트 영역 중심에 숫자(%)만 표시.
-    // 컴포넌트의 폰트 설정(fontFamily/fontSize/bold/italic)을 그대로 적용 — this.font.
-    const fontSize = this.state.fontSize || 15
-    context.font = this.font
-
-    // 공간에 따라 단계적 축소: 넉넉하면 '값%', 좁으면 '%' 떼고 값만, 더 좁으면 생략.
-    const value = `${Math.round(seg.ratio * 100)}`
-    const fits = (t: string) => fontSize <= h && context.measureText(t).width <= w
-
-    let text: string | null = null
-    if (fits(`${value}%`)) {
-      text = `${value}%`
-    } else if (fits(value)) {
-      text = value
-    }
-    if (text === null) {
-      return
-    }
-
-    context.fillStyle = '#333'
-    context.textAlign = 'center'
-    context.textBaseline = 'middle'
-    context.fillText(text, x + w / 2, y + h / 2)
-  }
-
-  renderLandscape(context: CanvasRenderingContext2D) {
-    const { left, top, width, height } = this.bounds
-    const { highWatermark, lowWatermark, lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state
-
-    context.save()
-    context.translate(left, top)
-
-    // gauge background
-    context.beginPath()
-
-    context.fillStyle = fillStyle
-    context.roundRect(0, 0, width, height, round)
-
-    context.fill()
-
-    context.clip()
-
-    // gauge foreground
-    context.beginPath()
-
-    context.fillStyle = this.statusColor!
-
-    context.rect(0, 0, (width / 100) * this.usage, height)
-    context.fill()
-
-    // high-watermark level
-
-    if (highWatermark && highWatermark > 0 && highWatermark < 100) {
-      context.beginPath()
-
-      context.strokeStyle = 'black'
-      context.lineWidth = 1
-      context.setLineDash([3])
-
-      const x = (width / 100) * highWatermark
-      context.moveTo(x, 0)
-      context.lineTo(x, height)
-
-      context.stroke()
-    }
-
-    // low-watermark level
-
-    if (lowWatermark && lowWatermark > 0 && lowWatermark < 100) {
-      context.beginPath()
-
-      context.strokeStyle = 'black'
-      context.lineWidth = 1
-      context.setLineDash([3])
-
-      const x = (width / 100) * lowWatermark
-      context.moveTo(x, 0)
-      context.lineTo(x, height)
-
-      context.stroke()
-    }
-
-    // gauge outline
-    context.beginPath()
-
-    context.setLineDash([])
-    context.strokeStyle = strokeStyle
-    context.lineWidth = lineWidth
-    context.roundRect(0, 0, width, height, round)
-    context.stroke()
-
-    context.beginPath()
-
-    context.translate(-left, -top)
-    context.restore()
-  }
-
-  renderPortrait(context: CanvasRenderingContext2D) {
-    const { left, top, width, height } = this.bounds
-    const { highWatermark, lowWatermark, lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state
-
-    context.save()
-    context.translate(left, top)
-
-    // gauge background
-    context.beginPath()
-
-    context.fillStyle = fillStyle
-    context.roundRect(0, 0, width, height, round)
-
-    context.fill()
-
-    context.clip()
-
-    // gauge foreground
-    context.beginPath()
-
-    context.fillStyle = this.statusColor!
-
-    context.rect(0, height - (height / 100) * this.usage, width, (height / 100) * this.usage)
-    context.fill()
-
-    // high-watermark level
-
-    if (highWatermark && highWatermark > 0 && highWatermark < 100) {
-      context.beginPath()
-
-      context.strokeStyle = 'black'
-      context.lineWidth = 1
-      context.setLineDash([3])
-
-      const y = height - (height / 100) * highWatermark
-      context.moveTo(0, y)
-      context.lineTo(width, y)
-
-      context.stroke()
-    }
-
-    // low-watermark level
-
-    if (lowWatermark && lowWatermark > 0 && lowWatermark < 100) {
-      context.beginPath()
-
-      context.strokeStyle = 'black'
-      context.lineWidth = 1
-      context.setLineDash([3])
-
-      const y = height - (height / 100) * lowWatermark
-      context.moveTo(0, y)
-      context.lineTo(width, y)
-
-      context.stroke()
-    }
-
-    // gauge outline
-    context.beginPath()
-
-    context.setLineDash([])
-    context.strokeStyle = strokeStyle
-    context.lineWidth = lineWidth
-    context.roundRect(0, 0, width, height, round)
-    context.stroke()
-
-    context.beginPath()
-
-    context.translate(-left, -top)
-    context.restore()
-  }
-
-  get usage() {
-    const { currentUsage = 0, maxCapacity = 100 } = this.state
-    return Math.round((currentUsage / maxCapacity) * 100)
-  }
-
-  set usage(usage: number) {
-    // intentionally have done nothing
-  }
-
-  onchangeData(after: Record<string, any>, before: Record<string, any>): void {
-    const data = this.data && typeof this.data == 'object' ? this.data : {}
-    const {
-      CURRENTCAPACITY = 0,
-      MAXCAPACITY = 100,
-      HIGHWATERMARK = 100,
-      LOWWATERMARK = 0,
-      FULLUP = 'F',
-      CARRIER_FULL = 0,
-      CARRIER_EMPTY = 0,
-      CARRIER_EMPTY_EMPTY = 0,
-      CARRIER_NORMAL = 0,
-      CARRIER_ABNORMAL = 0
-    } = data
-
-    const currentUsage = Number(CURRENTCAPACITY) || 0
-    const maxCapacity = Number(MAXCAPACITY) || 100
-    const highWatermark = Number(HIGHWATERMARK) || 100
-    const lowWatermark = Number(LOWWATERMARK) || 0
-
-    this.setState({
-      currentUsage,
-      maxCapacity,
-      highWatermark,
-      lowWatermark,
-      fullup: FULLUP == 'T',
-      usage: Math.round((currentUsage / maxCapacity) * 100),
-      carrierFull: Number(CARRIER_FULL) || 0,
-      carrierEmpty: Number(CARRIER_EMPTY) || 0,
-      carrierEmptyEmpty: Number(CARRIER_EMPTY_EMPTY) || 0,
-      carrierNormal: Number(CARRIER_NORMAL) || 0,
-      carrierAbnormal: Number(CARRIER_ABNORMAL) || 0
-    })
-  }
-
-  // ── hover 툴팁 (carrier/abnormal 모드 세그먼트별 수치) ───────────────────────────
-  // 색상만으로 타입 구분이 어려울 때, 마우스 hover 로 정확한 수치 확인. 뷰어 모드 전용
-  // (model-layer 가 편집 모드에선 hover dispatch 안 함).
-
-  async ready(): Promise<void> {
-    await super.ready()
-    // hover 이벤트 수신 opt-in: model-layer _onmouseenter_all guard(hasLegacyHover) 통과.
-    const ev = this.model.event
-    if (!ev || !ev.hover) {
-      this.model.event = { ...(ev || {}), hover: true }
-    }
-  }
-
-  onMouseEnter(): void {
-    // capacity 는 값이 한 개(usage%)라 툴팁 불필요. carrier/abnormal 만.
-    if (this.gaugeMode === 'capacity') return
-    this._showGaugeTooltip()
-  }
-
-  onMouseLeave(): void {
-    this._hideGaugeTooltip()
-  }
-
-  dispose(): void {
-    this._hideGaugeTooltip()
-    super.dispose()
-  }
-
-  private _tooltipEl?: HTMLDivElement
-  private _tooltipMove?: (e: MouseEvent) => void
-
-  private _showGaugeTooltip(): void {
-    if (typeof document === 'undefined') return
-    const segments = this.segments(this.gaugeMode).filter(s => s.count > 0)
-    if (!segments.length) return
-
-    this._hideGaugeTooltip()
-
-    const el = document.createElement('div')
-    el.style.cssText = [
-      'position:fixed',
-      'left:-9999px',
-      'top:0',
-      'z-index:2147483647',
-      'pointer-events:none',
-      'background:rgba(30,30,30,0.92)',
-      'color:#fff',
-      'padding:6px 9px',
-      'border-radius:6px',
-      'font:12px/1.5 sans-serif',
-      'box-shadow:0 2px 10px rgba(0,0,0,0.35)',
-      'white-space:nowrap'
-    ].join(';')
-
-    for (const seg of segments) {
-      const row = document.createElement('div')
-      row.style.cssText = 'display:flex;align-items:center;gap:6px'
-
-      const swatch = document.createElement('span')
-      swatch.style.cssText = `display:inline-block;width:10px;height:10px;border-radius:2px;background:${seg.color}`
-
-      const label = document.createElement('span')
-      label.textContent = seg.label.replace(/\n/g, ' ')
-      label.style.cssText = 'flex:1'
-
-      const value = document.createElement('span')
-      value.textContent = String(seg.count)
-      value.style.cssText = 'font-weight:700;margin-left:12px'
-
-      row.append(swatch, label, value)
-      el.appendChild(row)
-    }
-
-    document.body.appendChild(el)
-    this._tooltipEl = el
-
-    this._tooltipMove = (e: MouseEvent) => {
-      el.style.left = `${e.clientX + 14}px`
-      el.style.top = `${e.clientY + 14}px`
-    }
-    document.addEventListener('mousemove', this._tooltipMove, true)
-  }
-
-  private _hideGaugeTooltip(): void {
-    if (this._tooltipMove) {
-      document.removeEventListener('mousemove', this._tooltipMove, true)
-      this._tooltipMove = undefined
-    }
-    if (this._tooltipEl) {
-      this._tooltipEl.remove()
-      this._tooltipEl = undefined
-    }
+    ;(this as any).drawText(context)
   }
 }

package/src/utils/stocker-gauge.ts

@@ -16,6 +16,8 @@ import { Legend } from '../features/mcs-status-default'
 export type StockerGaugeMode = 'capacity' | 'carrier' | 'abnormal'
 
 export interface GaugeSegment {
+  /** 안정적 식별 토큰 (대문자, 클릭 이벤트 payload·데이터 필드 관례와 일치). */
+  key: 'FULL' | 'EMPTY' | 'EMPTYEMPTY' | 'NORMAL' | 'ABNORMAL'
   /** 세그먼트 라벨(2D per-segment 표시용, '\n' 은 줄바꿈). */
   label: string
   /** 카운트 원본값. */
@@ -80,9 +82,9 @@ export function carrierSegments(
   const total = f + e + ee
   const r = (c: number) => (total > 0 ? c / total : 0)
   return [
-    { label: 'Full', count: f, ratio: r(f), color: colors.full },
-    { label: 'Empty', count: e, ratio: r(e), color: colors.empty },
-    { label: 'Empty\nEmpty', count: ee, ratio: r(ee), color: colors.emptyEmpty }
+    { key: 'FULL', label: 'Full', count: f, ratio: r(f), color: colors.full },
+    { key: 'EMPTY', label: 'Empty', count: e, ratio: r(e), color: colors.empty },
+    { key: 'EMPTYEMPTY', label: 'Empty\nEmpty', count: ee, ratio: r(ee), color: colors.emptyEmpty }
   ]
 }
 
@@ -93,11 +95,32 @@ export function abnormalSegments(normal: unknown, abnormal: unknown): GaugeSegme
   const total = n + a
   const r = (c: number) => (total > 0 ? c / total : 0)
   return [
-    { label: 'Normal', count: n, ratio: r(n), color: ABNORMAL_COLORS.normal },
-    { label: 'Abnormal', count: a, ratio: r(a), color: ABNORMAL_COLORS.abnormal }
+    { key: 'NORMAL', label: 'Normal', count: n, ratio: r(n), color: ABNORMAL_COLORS.normal },
+    { key: 'ABNORMAL', label: 'Abnormal', count: a, ratio: r(a), color: ABNORMAL_COLORS.abnormal }
   ]
 }
 
+/**
+ * 누적 비율 위치(pos, 0..span 범위)가 속한 세그먼트를 반환한다. ratio 0 세그먼트는
+ * 화면에 없으므로 건너뛴다. 경계(pos == span)·초과 클릭은 마지막 비영 세그먼트로 귀속하고,
+ * 데이터가 전혀 없으면(모든 ratio 0) null.
+ *
+ * renderSegmentGauge 의 배치와 동일 규칙(누적 채움)이며, 2D 렌더와 클릭 판정이 이 함수를
+ * 공유해 drift 를 막는다. 방향(landscape 왼→오 / portrait 아래→위)은 호출부가 pos 로 흡수한다.
+ */
+export function pickSegmentAt(segments: GaugeSegment[], pos: number, span: number): GaugeSegment | null {
+  let acc = 0
+  let lastNonZero: GaugeSegment | null = null
+  for (const seg of segments) {
+    const segLen = span * seg.ratio
+    if (segLen <= 0) continue
+    lastNonZero = seg
+    if (pos < acc + segLen) return seg
+    acc += segLen
+  }
+  return lastNonZero
+}
+
 /** 캐리어 세그먼트 — canonical raw data(CARRIER_*) 에서 직접. 3D 처럼 raw data 소스용. */
 export function carrierSegmentsFromData(data: any, colors?: CarrierColors): GaugeSegment[] {
   const d = data && typeof data === 'object' ? data : {}