@fmsim/machine 2.0.0-beta.99 → 2.0.1

package/src/utils/crane-position.ts

@@ -10,7 +10,8 @@
  *   }
  *
  * current 를 limit 범위 안의 0~1 비율로 환산한 뒤 host(부모) footprint 에 매핑한다.
- * x → host 긴쪽, y → 짧은쪽, z → 포크 높이(forkZ 0~100).
+ * z → 포크 높이(forkZ 0~100). x/y 의 축 배정과 원점은 host 좌표계 설정(CoordMapping)을
+ * 따르고, 미설정 시 x → host 긴쪽, y → 짧은쪽, 원점 = 좌상단.
  */
 
 import { parseIfJsonString } from './data-value'
@@ -39,6 +40,26 @@ export function axisRatio(value: unknown, lim?: AxisLimit): number {
   return Math.max(0, Math.min(1, (v - min) / (max - min)))
 }
 
+/**
+ * host(보통 STOCKER) 의 **내부 좌표계** 설정 — host state 에서 읽는다.
+ *
+ * 외부 시스템이 보내는 좌표의 X/Y 를 host footprint 의 어느 축·어느 방향에 대응시킬지
+ * 정한다. 크레인 전용이 아니라 host 자신의 좌표 규약이므로, 같은 좌표계를 쓰는 다른
+ * 자식(Shelf 등)도 동일하게 참조할 수 있다. 모두 미설정이면 종전 동작(긴쪽=X,
+ * 원점=left/top)과 같다.
+ *
+ * 주의: **로컬 프레임 기준**이다. host 회전(rotation)은 렌더 단계에서 적용되므로,
+ * 이 설정은 회전 전 모델 좌표계로 이해해야 한다.
+ */
+export type CoordMapping = {
+  /** 내부 X 가 달리는 축. 'auto'(기본) = 긴 변. */
+  axisX?: 'auto' | 'width' | 'height'
+  /** X=0 을 반대쪽 끝으로. */
+  invertX?: boolean
+  /** Y=0 을 반대쪽 끝으로. */
+  invertY?: boolean
+}
+
 /**
  * host(부모) footprint 안에서 0~1 비율 (rx,ry) → 크레인 top-left 로컬 좌표.
  *
@@ -47,7 +68,8 @@ export function axisRatio(value: unknown, lim?: AxisLimit): number {
  * craneLen/2 만큼 inset 된 중심선 위를 움직임). 크레인이 host 보다 크면 span 0
  * 으로 떨어져 host 모서리에 정렬.
  *
- * x(rx) 는 host 의 긴쪽, y(ry) 는 짧은쪽에 매핑 (가상 rail 은 host 긴쪽 방향).
+ * 축 배정과 원점은 opts(CoordMapping = host 의 내부 좌표계 설정)로 정한다. 기본(미설정)은
+ * x(rx) → host 의 긴쪽, y(ry) → 짧은쪽, 원점 = left/top.
  */
 export function mapCraneLocalPosition(
   hostW: number,
@@ -55,24 +77,34 @@ export function mapCraneLocalPosition(
   craneW: number,
   craneH: number,
   rx: number,
-  ry: number
+  ry: number,
+  opts: CoordMapping = {}
 ): { left: number; top: number } {
-  const longIsWidth = hostW >= hostH
-  const longLen = longIsWidth ? hostW : hostH
-  const shortLen = longIsWidth ? hostH : hostW
-  const craneLongSize = longIsWidth ? craneW : craneH
-  const craneShortSize = longIsWidth ? craneH : craneW
+  // 내부 X 가 달리는 축 배정: 명시 설정 우선, 'auto'/미설정은 긴 변(종전 폴백).
+  //   정사각형에 가까운 host 는 auto 가 리사이즈로 뒤집힐 수 있어 명시 지정을 권한다.
+  const xIsWidth = opts.axisX === 'width' ? true : opts.axisX === 'height' ? false : hostW >= hostH
+
+  // 반전은 *비율 단계*에서 흡수 — pos = (1-r)*span 이 위치 뒤집기와 동일하고 더 단순하다.
+  const fx = opts.invertX ? 1 - rx : rx
+  const fy = opts.invertY ? 1 - ry : ry
+
+  // 데이터 X/Y 축 기준으로 길이를 잡는다. axisX 를 명시하면 X 가 짧은 변일 수도 있으므로
+  // 길이(long/short)가 아니라 축 이름으로 부른다.
+  const xLen = xIsWidth ? hostW : hostH
+  const yLen = xIsWidth ? hostH : hostW
+  const craneXSize = xIsWidth ? craneW : craneH
+  const craneYSize = xIsWidth ? craneH : craneW
 
   // 크레인 크기를 뺀 inset 가용 span. top-left = ratio * span 이므로 크레인
   // 전체가 host [0, hostLen] 안에 들어온다.
-  const longSpan = Math.max(0, longLen - craneLongSize)
-  const shortSpan = Math.max(0, shortLen - craneShortSize)
-  const longPos = rx * longSpan
-  const shortPos = ry * shortSpan
+  const xSpan = Math.max(0, xLen - craneXSize)
+  const ySpan = Math.max(0, yLen - craneYSize)
+  const xPos = fx * xSpan
+  const yPos = fy * ySpan
 
   return {
-    left: longIsWidth ? longPos : shortPos,
-    top: longIsWidth ? shortPos : longPos
+    left: xIsWidth ? xPos : yPos,
+    top: xIsWidth ? yPos : xPos
   }
 }
 

package/src/utils/stocker-gauge.ts

@@ -11,9 +11,13 @@
  *  - abnormal : CARRIER_NORMAL / CARRIER_ABNORMAL
  */
 
+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
   /** 카운트 원본값. */
@@ -24,13 +28,33 @@ export interface GaugeSegment {
   color: string
 }
 
-/** carrier 세그먼트 색상 (2D/3D 공통). */
+/** carrier 세그먼트 색상 (2D/3D 공통). LEGEND_CARRIER 기본값과 동일 — 테마 미지정 시 폴백. */
 export const CARRIER_COLORS = {
   full: '#4AA7FE',
   empty: '#8BDA5B',
   emptyEmpty: '#019D59'
 }
 
+export interface CarrierColors {
+  full: string
+  empty: string
+  emptyEmpty: string
+}
+
+/**
+ * carrier legend(테마)에서 full/empty/emptyEmpty 색상 추출.
+ * carrier 컴포넌트의 색 취득 로직(statusColor = legend[status] || legend.default)과 동일하게,
+ * status 키(FULL/EMPTY/EMPTYEMPTY)로 직접 조회한다. 키/default 모두 없으면 CARRIER_COLORS 로 폴백.
+ */
+export function carrierColorsFromLegend(legend?: Legend): CarrierColors {
+  const pick = (key: string, fallback: string) => (legend && (legend[key] || legend.default)) || fallback
+  return {
+    full: pick('FULL', CARRIER_COLORS.full),
+    empty: pick('EMPTY', CARRIER_COLORS.empty),
+    emptyEmpty: pick('EMPTYEMPTY', CARRIER_COLORS.emptyEmpty)
+  }
+}
+
 /** abnormal 세그먼트 색상 (2D/3D 공통). */
 export const ABNORMAL_COLORS = {
   normal: '#8BDA5B',
@@ -42,17 +66,25 @@ function num(v: unknown): number {
   return Number.isFinite(n) && n > 0 ? n : 0
 }
 
-/** 캐리어 상태 세그먼트 (Full / Empty / EmptyEmpty). total 0 이면 모든 ratio 0. */
-export function carrierSegments(full: unknown, empty: unknown, emptyEmpty: unknown): GaugeSegment[] {
+/**
+ * 캐리어 상태 세그먼트 (Full / Empty / EmptyEmpty). total 0 이면 모든 ratio 0.
+ * colors 미지정 시 CARRIER_COLORS(기본). 테마 색은 carrierColorsFromLegend 로 만들어 전달.
+ */
+export function carrierSegments(
+  full: unknown,
+  empty: unknown,
+  emptyEmpty: unknown,
+  colors: CarrierColors = CARRIER_COLORS
+): GaugeSegment[] {
   const f = num(full)
   const e = num(empty)
   const ee = num(emptyEmpty)
   const total = f + e + ee
   const r = (c: number) => (total > 0 ? c / total : 0)
   return [
-    { label: 'Full', count: f, ratio: r(f), color: CARRIER_COLORS.full },
-    { label: 'Empty', count: e, ratio: r(e), color: CARRIER_COLORS.empty },
-    { label: 'Empty\nEmpty', count: ee, ratio: r(ee), color: CARRIER_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 }
   ]
 }
 
@@ -63,15 +95,36 @@ 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): GaugeSegment[] {
+export function carrierSegmentsFromData(data: any, colors?: CarrierColors): GaugeSegment[] {
   const d = data && typeof data === 'object' ? data : {}
-  return carrierSegments(d.CARRIER_FULL, d.CARRIER_EMPTY, d.CARRIER_EMPTY_EMPTY)
+  return carrierSegments(d.CARRIER_FULL, d.CARRIER_EMPTY, d.CARRIER_EMPTY_EMPTY, colors)
 }
 
 /** 비정상 세그먼트 — canonical raw data(CARRIER_*) 에서 직접. */

package/src/zone-capacity-bar.ts

@@ -1,301 +1,36 @@
-import { Component, ComponentNature, POSITION, Properties, sceneComponent } from '@hatiolab/things-scene'
-import { themesColorRange } from '@fmsim/api'
-import { LEGEND_CAPACITY } from './features/mcs-status-default'
-import { safeRound } from './utils/safe-round'
-import { getValueOnRanges } from './utils/get-value-on-ranges'
+import { ComponentNature, sceneComponent } from '@hatiolab/things-scene'
+import { LEGEND_CAPACITY, Legend } from './features/mcs-status-default'
 import { MCSZoneMixin, MCSZoneMixinProperties } from './features/mcs-zone-mixin'
 import { ParentObjectMixinProperties } from './features/parent-object-mixin'
+import { CapacityGaugeMixin, CapacityGaugeMixinProperties } from './features/capacity-gauge-mixin'
 import MCSUnit from './mcs-unit'
 
+/**
+ * 존(zone) 게이지.
+ *
+ * mode 에 따라 capacity / carrier / abnormal 3가지 게이지를 표현한다 — 그리는 규칙은
+ * StockerCapacityBar 와 동일하며 CapacityGaugeMixin 에서 공유한다(단일 소스).
+ * 스토커 게이지와 달리 존 게이지는 자체 id 로 데이터를 받는 Unit(identifiable) 이며,
+ * legend 폴백만 zone 전역 테마(zoneCapacityLegendTheme)로 다르다.
+ *
+ * mode 소스: root.stockerGaugeMode — 스토커 게이지와 같은 런타임 스위치로 함께 전환된다.
+ */
+
 const NATURE: ComponentNature = {
   mutable: false,
   resizable: true,
   rotatable: true,
-  properties: [
-    ...MCSZoneMixinProperties,
-    ...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',
-      label: 'round',
-      name: 'round',
-      property: {
-        min: 0
-      }
-    },
-    {
-      type: 'hidden',
-      name: 'usage',
-      label: 'usage'
-    }
-  ],
+  properties: [...MCSZoneMixinProperties, ...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('ZoneCapacityBar')
-export default class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {
+export default class ZoneCapacityBar extends CapacityGaugeMixin(MCSZoneMixin(MCSUnit)) {
   static get nature() {
     return NATURE
   }
 
-  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
-      }
-    ]
-  }
-
-  getLegendFallback() {
+  getLegendFallback(): Legend {
     return (this.root as any).zoneCapacityLegendTheme || LEGEND_CAPACITY
   }
-
-  get statusColor() {
-    const { fullup } = this.state
-    return fullup ? 'red' : getValueOnRanges(this.usage, this.legend)
-  }
-
-  get text() {
-    return this.usage + '%'
-  }
-
-  render(context: CanvasRenderingContext2D) {
-    const { left, top, width, height } = this.bounds
-
-    if (width >= height) {
-      this.renderLandscape(context)
-    } else {
-      this.renderPortrait(context)
-    }
-  }
-
-  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.stroke()
-
-    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 {
-      CURRENTCAPACITY = 0,
-      MAXCAPACITY = 100,
-      HIGHWATERMARK = 100,
-      LOWWATERMARK = 0,
-      FULLUP = 'F'
-    } = this.data && typeof this.data == 'object' ? this.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)
-    })
-  }
 }

package/translations/en.json

@@ -71,5 +71,8 @@
   "label.light-preset": "light preset",
   "label.dark": "dark",
   "label.medium": "medium",
-  "label.bright": "bright"
+  "label.bright": "bright",
+  "label.coord-axis-x": "internal x axis",
+  "label.coord-invert-x": "invert x origin",
+  "label.coord-invert-y": "invert y origin"
 }

package/translations/ja.json

@@ -73,5 +73,8 @@
   "label.light-preset": "照明プリセット",
   "label.dark": "暗",
   "label.medium": "中",
-  "label.bright": "明"
+  "label.bright": "明",
+  "label.coord-axis-x": "内部X軸",
+  "label.coord-invert-x": "X原点反転",
+  "label.coord-invert-y": "Y原点反転"
 }

package/translations/ko.json

@@ -74,5 +74,8 @@
   "label.light-preset": "조명 프리셋",
   "label.dark": "어두움",
   "label.medium": "중간",
-  "label.bright": "밝음"
+  "label.bright": "밝음",
+  "label.coord-axis-x": "내부 X축",
+  "label.coord-invert-x": "X 원점 반전",
+  "label.coord-invert-y": "Y 원점 반전"
 }

package/translations/ms.json

@@ -73,5 +73,8 @@
   "label.light-preset": "pratetapan cahaya",
   "label.dark": "gelap",
   "label.medium": "sederhana",
-  "label.bright": "cerah"
+  "label.bright": "cerah",
+  "label.coord-axis-x": "internal x axis",
+  "label.coord-invert-x": "invert x origin",
+  "label.coord-invert-y": "invert y origin"
 }

package/translations/zh.json

@@ -73,5 +73,8 @@
   "label.light-preset": "灯光预设",
   "label.dark": "昏暗",
   "label.medium": "适中",
-  "label.bright": "明亮"
+  "label.bright": "明亮",
+  "label.coord-axis-x": "内部X轴",
+  "label.coord-invert-x": "X原点反转",
+  "label.coord-invert-y": "Y原点反转"
 }