@fmsim/machine 1.0.63 → 1.0.65

package/dist/zone-capacity-bar.js

@@ -1,4 +1,5 @@
-import { Component } from '@hatiolab/things-scene';
+import { __decorate } from "tslib";
+import { sceneComponent } from '@hatiolab/things-scene';
 import { themesColorRange } from '@fmsim/api';
 import { LEGEND_CAPACITY } from './features/mcs-status-default';
 import { safeRound } from './utils/safe-round';
@@ -73,7 +74,7 @@ var controlHandler = {
         });
     }
 };
-export default class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {
+let ZoneCapacityBar = class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {
     static get nature() {
         return NATURE;
     }
@@ -228,6 +229,9 @@ export default class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {
             usage: Math.round((currentUsage / maxCapacity) * 100)
         });
     }
-}
-Component.register('ZoneCapacityBar', ZoneCapacityBar);
+};
+ZoneCapacityBar = __decorate([
+    sceneComponent('ZoneCapacityBar')
+], ZoneCapacityBar);
+export default ZoneCapacityBar;
 //# sourceMappingURL=zone-capacity-bar.js.map

package/dist/zone-capacity-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"zone-capacity-bar.js","sourceRoot":"","sources":["../src/zone-capacity-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentNature, POSITION, Properties } from '@hatiolab/things-scene'\nimport { themesColorRange } from '@fmsim/api'\nimport { LEGEND_CAPACITY } from './features/mcs-status-default'\nimport { safeRound } from './utils/safe-round'\nimport { getVaueOnRanges } from './utils/get-value-on-ranges'\nimport { MCSZoneMixin, MCSZoneMixinProperties } from './features/mcs-zone-mixin'\nimport { ParentObjectMixinProperties } from './features/parent-object-mixin'\nimport MCSUnit from './mcs-unit'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    ...MCSZoneMixinProperties,\n    ...ParentObjectMixinProperties,\n    {\n      type: 'select',\n      label: 'legend-name',\n      name: 'legendName',\n      property: {\n        options: themesColorRange\n      }\n    },\n    {\n      type: 'number',\n      name: 'currentUsage',\n      label: 'current-usage'\n    },\n    {\n      type: 'number',\n      name: 'highWatermark',\n      label: 'high-watermark'\n    },\n    {\n      type: 'number',\n      name: 'lowWatermark',\n      label: 'low-watermark'\n    },\n    {\n      type: 'number',\n      name: 'maxCapacity',\n      label: 'max-capacity'\n    },\n    {\n      type: 'boolean',\n      name: 'fullup',\n      label: 'fullup'\n    },\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round',\n      property: {\n        min: 0\n      }\n    },\n    {\n      type: 'hidden',\n      name: 'usage',\n      label: 'usage'\n    }\n  ],\n  'value-property': 'usage'\n}\n\nvar controlHandler = {\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    var { left, top, width, height } = component.model\n\n    var transcoorded = component.transcoordP2S(point.x, point.y)\n    var round = ((transcoorded.x - left) / (width / 2)) * 100\n\n    round = safeRound(round, width, height)\n\n    component.set({\n      round\n    })\n  }\n}\n\nexport default class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {\n  static get nature() {\n    return NATURE\n  }\n\n  get controls() {\n    var { left, top, width, round, height } = this.state\n    round = round == undefined ? 0 : safeRound(round, width, height)\n\n    return [\n      {\n        x: left + (width / 2) * (round / 100),\n        y: top,\n        handler: controlHandler\n      }\n    ]\n  }\n\n  getLegendFallback() {\n    return this.root.zoneCapacityLegendTheme || LEGEND_CAPACITY\n  }\n\n  get statusColor() {\n    const { fullup } = this.state\n    return fullup ? 'red' : getVaueOnRanges(this.usage, this.legend)\n  }\n\n  get text() {\n    return this.usage + '%'\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n\n    if (width >= height) {\n      this.renderLandscape(context)\n    } else {\n      this.renderPortrait(context)\n    }\n  }\n\n  renderLandscape(context: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n    const { highWatermark, lowWatermark, lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state\n\n    context.save()\n    context.translate(left, top)\n\n    // gauge background\n    context.beginPath()\n\n    context.fillStyle = fillStyle\n    context.roundRect(0, 0, width, height, round)\n\n    context.fill()\n    context.stroke()\n\n    context.clip()\n\n    // gauge foreground\n    context.beginPath()\n\n    context.fillStyle = this.statusColor!\n\n    context.rect(0, 0, (width / 100) * this.usage, height)\n    context.fill()\n\n    // high-watermark level\n\n    if (highWatermark && highWatermark > 0 && highWatermark < 100) {\n      context.beginPath()\n\n      context.strokeStyle = 'black'\n      context.lineWidth = 1\n      context.setLineDash([3])\n\n      const x = (width / 100) * highWatermark\n      context.moveTo(x, 0)\n      context.lineTo(x, height)\n\n      context.stroke()\n    }\n\n    // low-watermark level\n\n    if (lowWatermark && lowWatermark > 0 && lowWatermark < 100) {\n      context.beginPath()\n\n      context.strokeStyle = 'black'\n      context.lineWidth = 1\n      context.setLineDash([3])\n\n      const x = (width / 100) * lowWatermark\n      context.moveTo(x, 0)\n      context.lineTo(x, height)\n\n      context.stroke()\n    }\n\n    // gauge outline\n    context.beginPath()\n\n    context.setLineDash([])\n    context.strokeStyle = strokeStyle\n    context.lineWidth = lineWidth\n    context.roundRect(0, 0, width, height, round)\n    context.stroke()\n\n    context.beginPath()\n\n    context.translate(-left, -top)\n    context.restore()\n  }\n\n  renderPortrait(context: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n    const { highWatermark, lowWatermark, lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state\n\n    context.save()\n    context.translate(left, top)\n\n    // gauge background\n    context.beginPath()\n\n    context.fillStyle = fillStyle\n    context.roundRect(0, 0, width, height, round)\n\n    context.fill()\n\n    context.clip()\n\n    // gauge foreground\n    context.beginPath()\n\n    context.fillStyle = this.statusColor!\n\n    context.rect(0, height - (height / 100) * this.usage, width, (height / 100) * this.usage)\n    context.fill()\n\n    // high-watermark level\n\n    if (highWatermark && highWatermark > 0 && highWatermark < 100) {\n      context.beginPath()\n\n      context.strokeStyle = 'black'\n      context.lineWidth = 1\n      context.setLineDash([3])\n\n      const y = height - (height / 100) * highWatermark\n      context.moveTo(0, y)\n      context.lineTo(width, y)\n\n      context.stroke()\n    }\n\n    // low-watermark level\n\n    if (lowWatermark && lowWatermark > 0 && lowWatermark < 100) {\n      context.beginPath()\n\n      context.strokeStyle = 'black'\n      context.lineWidth = 1\n      context.setLineDash([3])\n\n      const y = height - (height / 100) * lowWatermark\n      context.moveTo(0, y)\n      context.lineTo(width, y)\n\n      context.stroke()\n    }\n\n    // gauge outline\n    context.beginPath()\n\n    context.setLineDash([])\n    context.strokeStyle = strokeStyle\n    context.lineWidth = lineWidth\n    context.roundRect(0, 0, width, height, round)\n    context.stroke()\n\n    context.beginPath()\n\n    context.translate(-left, -top)\n    context.restore()\n  }\n\n  get usage() {\n    const { currentUsage = 0, maxCapacity = 100 } = this.state\n    return Math.round((currentUsage / maxCapacity) * 100)\n  }\n\n  set usage(usage: number) {\n    // intentionally have done nothing\n  }\n\n  onchangeData(after: Properties, before: Properties): void {\n    const {\n      CURRENTCAPACITY = 0,\n      MAXCAPACITY = 100,\n      HIGHWATERMARK = 100,\n      LOWWATERMARK = 0,\n      FULLUP = 'F'\n    } = typeof this.data == 'object' ? this.data : {}\n\n    const currentUsage = Number(CURRENTCAPACITY) || 0\n    const maxCapacity = Number(MAXCAPACITY) || 100\n    const highWatermark = Number(HIGHWATERMARK) || 100\n    const lowWatermark = Number(LOWWATERMARK) || 0\n\n    this.setState({\n      currentUsage,\n      maxCapacity,\n      highWatermark,\n      lowWatermark,\n      fullup: FULLUP == 'T',\n      usage: Math.round((currentUsage / maxCapacity) * 100)\n    })\n  }\n}\n\nComponent.register('ZoneCapacityBar', ZoneCapacityBar)\n"]}
+{"version":3,"file":"zone-capacity-bar.js","sourceRoot":"","sources":["../src/zone-capacity-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentNature, POSITION, Properties, sceneComponent } from '@hatiolab/things-scene'\nimport { themesColorRange } from '@fmsim/api'\nimport { LEGEND_CAPACITY } from './features/mcs-status-default'\nimport { safeRound } from './utils/safe-round'\nimport { getVaueOnRanges } from './utils/get-value-on-ranges'\nimport { MCSZoneMixin, MCSZoneMixinProperties } from './features/mcs-zone-mixin'\nimport { ParentObjectMixinProperties } from './features/parent-object-mixin'\nimport MCSUnit from './mcs-unit'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    ...MCSZoneMixinProperties,\n    ...ParentObjectMixinProperties,\n    {\n      type: 'select',\n      label: 'legend-name',\n      name: 'legendName',\n      property: {\n        options: themesColorRange\n      }\n    },\n    {\n      type: 'number',\n      name: 'currentUsage',\n      label: 'current-usage'\n    },\n    {\n      type: 'number',\n      name: 'highWatermark',\n      label: 'high-watermark'\n    },\n    {\n      type: 'number',\n      name: 'lowWatermark',\n      label: 'low-watermark'\n    },\n    {\n      type: 'number',\n      name: 'maxCapacity',\n      label: 'max-capacity'\n    },\n    {\n      type: 'boolean',\n      name: 'fullup',\n      label: 'fullup'\n    },\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round',\n      property: {\n        min: 0\n      }\n    },\n    {\n      type: 'hidden',\n      name: 'usage',\n      label: 'usage'\n    }\n  ],\n  'value-property': 'usage'\n}\n\nvar controlHandler = {\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    var { left, top, width, height } = component.model\n\n    var transcoorded = component.transcoordP2S(point.x, point.y)\n    var round = ((transcoorded.x - left) / (width / 2)) * 100\n\n    round = safeRound(round, width, height)\n\n    component.set({\n      round\n    })\n  }\n}\n\n@sceneComponent('ZoneCapacityBar')\nexport default class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {\n  static get nature() {\n    return NATURE\n  }\n\n  get controls() {\n    var { left, top, width, round, height } = this.state\n    round = round == undefined ? 0 : safeRound(round, width, height)\n\n    return [\n      {\n        x: left + (width / 2) * (round / 100),\n        y: top,\n        handler: controlHandler\n      }\n    ]\n  }\n\n  getLegendFallback() {\n    return this.root.zoneCapacityLegendTheme || LEGEND_CAPACITY\n  }\n\n  get statusColor() {\n    const { fullup } = this.state\n    return fullup ? 'red' : getVaueOnRanges(this.usage, this.legend)\n  }\n\n  get text() {\n    return this.usage + '%'\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n\n    if (width >= height) {\n      this.renderLandscape(context)\n    } else {\n      this.renderPortrait(context)\n    }\n  }\n\n  renderLandscape(context: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n    const { highWatermark, lowWatermark, lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state\n\n    context.save()\n    context.translate(left, top)\n\n    // gauge background\n    context.beginPath()\n\n    context.fillStyle = fillStyle\n    context.roundRect(0, 0, width, height, round)\n\n    context.fill()\n    context.stroke()\n\n    context.clip()\n\n    // gauge foreground\n    context.beginPath()\n\n    context.fillStyle = this.statusColor!\n\n    context.rect(0, 0, (width / 100) * this.usage, height)\n    context.fill()\n\n    // high-watermark level\n\n    if (highWatermark && highWatermark > 0 && highWatermark < 100) {\n      context.beginPath()\n\n      context.strokeStyle = 'black'\n      context.lineWidth = 1\n      context.setLineDash([3])\n\n      const x = (width / 100) * highWatermark\n      context.moveTo(x, 0)\n      context.lineTo(x, height)\n\n      context.stroke()\n    }\n\n    // low-watermark level\n\n    if (lowWatermark && lowWatermark > 0 && lowWatermark < 100) {\n      context.beginPath()\n\n      context.strokeStyle = 'black'\n      context.lineWidth = 1\n      context.setLineDash([3])\n\n      const x = (width / 100) * lowWatermark\n      context.moveTo(x, 0)\n      context.lineTo(x, height)\n\n      context.stroke()\n    }\n\n    // gauge outline\n    context.beginPath()\n\n    context.setLineDash([])\n    context.strokeStyle = strokeStyle\n    context.lineWidth = lineWidth\n    context.roundRect(0, 0, width, height, round)\n    context.stroke()\n\n    context.beginPath()\n\n    context.translate(-left, -top)\n    context.restore()\n  }\n\n  renderPortrait(context: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n    const { highWatermark, lowWatermark, lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state\n\n    context.save()\n    context.translate(left, top)\n\n    // gauge background\n    context.beginPath()\n\n    context.fillStyle = fillStyle\n    context.roundRect(0, 0, width, height, round)\n\n    context.fill()\n\n    context.clip()\n\n    // gauge foreground\n    context.beginPath()\n\n    context.fillStyle = this.statusColor!\n\n    context.rect(0, height - (height / 100) * this.usage, width, (height / 100) * this.usage)\n    context.fill()\n\n    // high-watermark level\n\n    if (highWatermark && highWatermark > 0 && highWatermark < 100) {\n      context.beginPath()\n\n      context.strokeStyle = 'black'\n      context.lineWidth = 1\n      context.setLineDash([3])\n\n      const y = height - (height / 100) * highWatermark\n      context.moveTo(0, y)\n      context.lineTo(width, y)\n\n      context.stroke()\n    }\n\n    // low-watermark level\n\n    if (lowWatermark && lowWatermark > 0 && lowWatermark < 100) {\n      context.beginPath()\n\n      context.strokeStyle = 'black'\n      context.lineWidth = 1\n      context.setLineDash([3])\n\n      const y = height - (height / 100) * lowWatermark\n      context.moveTo(0, y)\n      context.lineTo(width, y)\n\n      context.stroke()\n    }\n\n    // gauge outline\n    context.beginPath()\n\n    context.setLineDash([])\n    context.strokeStyle = strokeStyle\n    context.lineWidth = lineWidth\n    context.roundRect(0, 0, width, height, round)\n    context.stroke()\n\n    context.beginPath()\n\n    context.translate(-left, -top)\n    context.restore()\n  }\n\n  get usage() {\n    const { currentUsage = 0, maxCapacity = 100 } = this.state\n    return Math.round((currentUsage / maxCapacity) * 100)\n  }\n\n  set usage(usage: number) {\n    // intentionally have done nothing\n  }\n\n  onchangeData(after: Properties, before: Properties): void {\n    const {\n      CURRENTCAPACITY = 0,\n      MAXCAPACITY = 100,\n      HIGHWATERMARK = 100,\n      LOWWATERMARK = 0,\n      FULLUP = 'F'\n    } = typeof this.data == 'object' ? this.data : {}\n\n    const currentUsage = Number(CURRENTCAPACITY) || 0\n    const maxCapacity = Number(MAXCAPACITY) || 100\n    const highWatermark = Number(HIGHWATERMARK) || 100\n    const lowWatermark = Number(LOWWATERMARK) || 0\n\n    this.setState({\n      currentUsage,\n      maxCapacity,\n      highWatermark,\n      lowWatermark,\n      fullup: FULLUP == 'T',\n      usage: Math.round((currentUsage / maxCapacity) * 100)\n    })\n  }\n}\n"]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fmsim/machine",
   "description": "Layout View를 구성하는 설비(machine)들과 유닛을 구현한 모듈입니다.",
   "author": "heartyoh",
-  "version": "1.0.63",
+  "version": "1.0.65",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "things-scene": true,
@@ -54,5 +54,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "b23aaf22e1b8466214b5910badb0a0c59017a590"
+  "gitHead": "603baf8b49c5c474aa6bf838d02bce10caa41370"
 }

package/src/agv-line.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentNature } from '@hatiolab/things-scene'
+import { Component, ComponentNature, sceneComponent } from '@hatiolab/things-scene'
 import MCSTransport from './mcs-transport'
 
 const NATURE: ComponentNature = {
@@ -8,6 +8,7 @@ const NATURE: ComponentNature = {
   properties: [...MCSTransport.properties]
 }
 
+@sceneComponent('AGVLine')
 export default class AGVLine extends MCSTransport {
   static get nature() {
     return NATURE
@@ -59,5 +60,3 @@ export default class AGVLine extends MCSTransport {
     context.translate(-left, -top)
   }
 }
-
-Component.register('AGVLine', AGVLine)

package/src/agv.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentNature, Properties } from '@hatiolab/things-scene'
+import { ComponentNature, sceneComponent } from '@hatiolab/things-scene'
 import { themesColorRange } from '@fmsim/api'
 import MCSVehicle from './mcs-vehicle'
 import { getVaueOnRanges } from './utils/get-value-on-ranges'
@@ -22,6 +22,8 @@ const NATURE: ComponentNature = {
 }
 
 const GAP = 2
+
+@sceneComponent('AGV')
 export default class AGV extends MCSVehicle {
   static get nature() {
     return NATURE
@@ -92,15 +94,12 @@ export default class AGV extends MCSVehicle {
 
   // 사선 패턴을 그리는 함수
   drawHatchPattern(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number) {
-    // 크기에 따라 패턴 간격과 선 두께 조정 (2배 덜 조밀하게)
-    const minSpacing = 4 // 최소 간격 2배 증가 (원래 2의 2배)
-    const maxSpacing = 16 // 최대 간격 2배 증가 (원래 8의 2배)
-    const preferredSpacing = Math.max(minSpacing, Math.min(width, height) / 5) // 간격 계산 시 나누는 값 1/2로 감소
-    const spacing = Math.min(preferredSpacing, maxSpacing)
-
-    // 선 두께 계산 (작은 크기에서도 보이도록)
-    const minLineWidth = 0.35
-    const scaleFactor = Math.min(width, height) / 130
+    // 6개의 빗금을 그리기 위한 간격 계산
+    const spacing = (width + height) / 6
+
+    // 선 두께 계산 (크기에 비례)
+    const minLineWidth = 0.5
+    const scaleFactor = Math.min(width, height) / 20 // 130에서 50으로 변경하여 더 두껍게
     const lineWidth = Math.max(minLineWidth, scaleFactor)
 
     ctx.beginPath()
@@ -112,10 +111,11 @@ export default class AGV extends MCSVehicle {
     ctx.rect(x, y, width, height)
     ctx.clip()
 
-    // 사선 패턴 그리기
-    for (let i = -height; i < width + height; i += spacing) {
-      ctx.moveTo(x + i, y)
-      ctx.lineTo(x + i - height, y + height)
+    // 6개의 사선 패턴 그리기
+    for (let i = 0; i < 6; i++) {
+      const startX = x + i * spacing
+      ctx.moveTo(startX, y)
+      ctx.lineTo(startX - height, y + height)
     }
 
     ctx.stroke()
@@ -171,32 +171,64 @@ export default class AGV extends MCSVehicle {
       ctx.strokeRect(batteryX, batteryY, batteryWidth, batteryHeight)
 
       // 배터리 잔량 텍스트 표시
-      // const textWidth = batteryWidth * 0.7
-      // const textHeight = batteryHeight * 0.7
-      // const textBgX = batteryX + (batteryWidth - textWidth) / 2
-      // const textBgY = batteryY + (batteryHeight - textHeight) / 2
-
-      // ctx.fillStyle = 'white'
-      // ctx.fillRect(textBgX, textBgY, textWidth, textHeight)
-
-      // 텍스트 그리기
-      ctx.font = `4px Roboto, Arial, sans-serif`
+      const fontSize = batteryHeight * 0.8
+      ctx.font = `${fontSize}px Roboto, Arial, sans-serif`
       ctx.fillStyle = 'black'
       ctx.textAlign = 'center'
       ctx.textBaseline = 'middle'
 
-      // 배터리 잔량 텍스트 (정수 + % 포함)
-      const text = `${Math.round(BATTERYRATE)}%`
+      // 실제 렌더링될 텍스트 크기 계산
+      const transform = ctx.getTransform()
+      const scaleX = Math.sqrt(transform.m11 * transform.m11 + transform.m21 * transform.m21)
+      const actualFontSize = fontSize * (scaleX || 1)
+
+      // 실제 텍스트 크기가 16px 이상일 때만 텍스트 표시
+      if (actualFontSize >= 16) {
+        // 배터리 잔량 텍스트 (정수 + % 포함)
+        const text = `${Math.round(BATTERYRATE)}%`
+
+        // 텍스트 크기 측정
+        const textMetrics = ctx.measureText(text)
+        const textWidth = textMetrics.width * 1.1 // 여백을 위해 10% 추가
+        const textHeight = fontSize * 1.1 // 여백을 위해 10% 추가
+
+        // 배터리 중심점 계산
+        const batteryCenterX = batteryX + batteryWidth / 2
+        const batteryCenterY = batteryY + batteryHeight / 2
 
-      // 텍스트 위치 (배터리 중앙)
-      const textX = batteryX + batteryWidth / 2
-      const textY = height // batteryY + batteryHeight // / 2
+        // 현재 변환 상태 저장
+        ctx.save()
 
-      ctx.fillText(text, textX, textY)
+        // 배터리 중심점으로 이동
+        ctx.translate(batteryCenterX, batteryCenterY)
+
+        // 순수한 회전 각도 계산 (라디안)
+        const normalizedM11 = transform.m11 / scaleX
+        const normalizedM21 = transform.m21 / scaleX
+        let angle = Math.atan2(normalizedM21, normalizedM11)
+
+        // 회전 보정 (같은 방향으로 회전)
+        ctx.rotate(angle)
+
+        // 텍스트 배경 위치 계산 (중심점 기준)
+        const textBgX = -textWidth / 2
+        const textBgY = -textHeight / 2
+
+        // 텍스트 배경 그리기
+        ctx.fillStyle = 'white'
+        ctx.fillRect(textBgX, textBgY, textWidth, textHeight)
+
+        // 텍스트 그리기
+        ctx.fillStyle = 'black'
+        ctx.textAlign = 'center'
+        ctx.textBaseline = 'middle'
+        ctx.fillText(text, 0, textHeight * 0.1) // 텍스트를 약간 아래로 이동
+
+        // 변환 상태 복원
+        ctx.restore()
+      }
 
       ctx.translate(-left, -top)
     }
   }
 }
-
-Component.register('AGV', AGV)

package/src/buffer.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentNature } from '@hatiolab/things-scene'
+import { Component, ComponentNature, sceneComponent } from '@hatiolab/things-scene'
 import MCSMachine from './mcs-machine'
 
 const NATURE: ComponentNature = {
@@ -8,6 +8,7 @@ const NATURE: ComponentNature = {
   properties: [...MCSMachine.properties]
 }
 
+@sceneComponent('Buffer')
 export default class Buffer extends MCSMachine {
   static get nature() {
     return NATURE
@@ -50,5 +51,3 @@ export default class Buffer extends MCSMachine {
     ctx.stroke()
   }
 }
-
-Component.register('Buffer', Buffer)

package/src/carrier.ts

@@ -1,7 +1,7 @@
 import JSON5 from 'json5'
 import { getPopupData } from '@fmsim/api'
 
-import { BOUNDS, Component, ComponentNature, Properties, Shape } from '@hatiolab/things-scene'
+import { BOUNDS, Component, ComponentNature, Properties, Shape, sceneComponent } from '@hatiolab/things-scene'
 import { ANIMATION_DEFAULT, AnimationPreset, AnimationConfig } from './features/animation-default.js'
 import { ParentObjectMixin } from './features/parent-object-mixin.js'
 import { LEGEND_CARRIER, Legend } from './features/mcs-status-default.js'
@@ -13,6 +13,7 @@ const NATURE: ComponentNature = {
   rotatable: false
 }
 
+@sceneComponent('Carrier')
 export default class Carrier extends MCSStatusMixin(ParentObjectMixin(Shape)) {
   static get nature() {
     return NATURE
@@ -236,5 +237,3 @@ export default class Carrier extends MCSStatusMixin(ParentObjectMixin(Shape)) {
     return await getPopupData(type, id)
   }
 }
-
-Component.register('Carrier', Carrier)

package/src/conveyor-join.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentNature, Control, POSITION } from '@hatiolab/things-scene'
+import { Component, ComponentNature, Control, POSITION, sceneComponent } from '@hatiolab/things-scene'
 import MCSTransport from './mcs-transport'
 import { ConveyorMixin } from './features/conveyor-mixin'
 import { normalizeAngle } from './utils/normalize-angle'
@@ -92,6 +92,7 @@ var clockwiseControlHandler = {
   }
 }
 
+@sceneComponent('ConveyorJoin')
 export default class ConveyorJoin extends ConveyorMixin(MCSTransport) {
   get nature() {
     return NATURE
@@ -208,5 +209,3 @@ export default class ConveyorJoin extends ConveyorMixin(MCSTransport) {
 }
 
 Component.memoize(ConveyorJoin.prototype, 'controls', false)
-
-Component.register('ConveyorJoin', ConveyorJoin as any)

package/src/conveyor.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentNature } from '@hatiolab/things-scene'
+import { Component, ComponentNature, sceneComponent } from '@hatiolab/things-scene'
 import MCSTransport from './mcs-transport'
 
 const NATURE: ComponentNature = {
@@ -18,6 +18,7 @@ const NATURE: ComponentNature = {
   ]
 }
 
+@sceneComponent('Conveyor')
 export default class Conveyor extends MCSTransport {
   static get nature() {
     return NATURE
@@ -100,5 +101,3 @@ export default class Conveyor extends MCSTransport {
     }
   }
 }
-
-Component.register('Conveyor', Conveyor)

package/src/crane.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentNature, Properties } from '@hatiolab/things-scene'
+import { Component, ComponentNature, Properties, sceneComponent } from '@hatiolab/things-scene'
 import MCSVehicle from './mcs-vehicle'
 import { LEGEND_CRANE } from './features/mcs-status-default'
 
@@ -11,6 +11,7 @@ const NATURE: ComponentNature = {
 
 const GAP = 2
 
+@sceneComponent('Crane')
 export default class Crane extends MCSVehicle {
   static get nature() {
     return NATURE
@@ -73,5 +74,3 @@ export default class Crane extends MCSVehicle {
     ctx.translate(-left, -top)
   }
 }
-
-Component.register('Crane', Crane)

package/src/equipment.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentNature } from '@hatiolab/things-scene'
+import { Component, ComponentNature, sceneComponent } from '@hatiolab/things-scene'
 import MCSMachine from './mcs-machine'
 
 const NATURE: ComponentNature = {
@@ -8,6 +8,7 @@ const NATURE: ComponentNature = {
   properties: [...MCSMachine.properties]
 }
 
+@sceneComponent('Equipment')
 export default class Equipment extends MCSMachine {
   static get nature() {
     return NATURE
@@ -21,5 +22,3 @@ export default class Equipment extends MCSMachine {
     return super.containable(component) || ['Port'].includes(component.state.type)
   }
 }
-
-Component.register('Equipment', Equipment)

package/src/floating-container.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { Component, Container, sceneComponent } from '@hatiolab/things-scene'
+
+@sceneComponent('FloatingContainer')
+export default class FloatingContainer extends Container {
+  get position() {
+    return this.app?.isViewMode ? 'absolute' : 'static'
+  }
+}

package/src/index.ts

@@ -30,3 +30,5 @@ export { default as Carrier } from './carrier'
 
 export { default as Node } from './node'
 export { default as NodePath } from './node-path'
+
+export { default as FloatingContainer } from './floating-container'

package/src/node-path.ts

@@ -2,7 +2,7 @@
  * Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { Component, Line, Control } from '@hatiolab/things-scene'
+import { Line, Control, sceneComponent } from '@hatiolab/things-scene'
 import { Node, Position } from './types'
 
 var controlHandler = {
@@ -70,6 +70,7 @@ const NATURE = {
   help: 'scene/component/node-path'
 }
 
+@sceneComponent('NodePath')
 export default class NodePath extends Line {
   static get nature() {
     return NATURE
@@ -292,5 +293,3 @@ export default class NodePath extends Line {
     return controls
   }
 }
-
-Component.register('NodePath', NodePath)

package/src/node.ts

@@ -2,7 +2,7 @@
  * Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { Component, Shape } from '@hatiolab/things-scene'
+import { Component, Shape, sceneComponent } from '@hatiolab/things-scene'
 import MCSMachine from './mcs-machine'
 
 const NATURE = {
@@ -23,6 +23,7 @@ const NATURE = {
   ]
 }
 
+@sceneComponent('Node')
 export default class Node extends Shape {
   static RADIUS = 8
 
@@ -110,5 +111,3 @@ export default class Node extends Shape {
 }
 
 Component.memoize(Node.prototype, 'path', false)
-
-Component.register('Node', Node)

package/src/oht-line.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentNature } from '@hatiolab/things-scene'
+import { Component, ComponentNature, sceneComponent } from '@hatiolab/things-scene'
 import MCSTransport from './mcs-transport'
 
 const NATURE: ComponentNature = {
@@ -8,6 +8,7 @@ const NATURE: ComponentNature = {
   properties: [...MCSTransport.properties]
 }
 
+@sceneComponent('OHTLine')
 export default class OHTLine extends MCSTransport {
   static get nature() {
     return NATURE
@@ -43,5 +44,3 @@ export default class OHTLine extends MCSTransport {
     context.translate(-left, -top)
   }
 }
-
-Component.register('OHTLine', OHTLine)

package/src/oht.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentNature, Properties } from '@hatiolab/things-scene'
+import { Component, ComponentNature, Properties, sceneComponent } from '@hatiolab/things-scene'
 import MCSVehicle from './mcs-vehicle'
 
 const NATURE: ComponentNature = {
@@ -10,6 +10,7 @@ const NATURE: ComponentNature = {
 
 const GAP = 2
 
+@sceneComponent('OHT')
 export default class OHT extends MCSVehicle {
   static get nature() {
     return NATURE
@@ -58,5 +59,3 @@ export default class OHT extends MCSVehicle {
     ctx.translate(-left, -top)
   }
 }
-
-Component.register('OHT', OHT)

package/src/port-flow.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentNature, RectPath, Shape, Properties } from '@hatiolab/things-scene'
+import { Component, ComponentNature, RectPath, Shape, Properties, sceneComponent } from '@hatiolab/things-scene'
 import { ParentObjectMixin, ParentObjectMixinProperties } from './features/parent-object-mixin'
 
 const NATURE: ComponentNature = {
@@ -39,6 +39,7 @@ const NATURE: ComponentNature = {
   ]
 }
 
+@sceneComponent('PortFlow')
 export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
   static get nature() {
     return NATURE
@@ -236,5 +237,3 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
     this.setState('direction', INOUTTYPE)
   }
 }
-
-Component.register('PortFlow', PortFlow)

package/src/port.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentNature } from '@hatiolab/things-scene'
+import { Component, ComponentNature, sceneComponent } from '@hatiolab/things-scene'
 import { MCSZoneMixin, MCSZoneMixinProperties } from './features/mcs-zone-mixin'
 import MCSCarrierHolder from './mcs-carrier-holder'
 
@@ -9,6 +9,7 @@ const NATURE: ComponentNature = {
   properties: [...MCSZoneMixinProperties, ...MCSCarrierHolder.properties]
 }
 
+@sceneComponent('Port')
 export default class Port extends MCSZoneMixin(MCSCarrierHolder) {
   static get nature() {
     return NATURE
@@ -42,5 +43,3 @@ export default class Port extends MCSZoneMixin(MCSCarrierHolder) {
     ctx.stroke()
   }
 }
-
-Component.register('Port', Port)

package/src/shelf.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentNature } from '@hatiolab/things-scene'
+import { Component, ComponentNature, sceneComponent } from '@hatiolab/things-scene'
 import MCSCarrierHolder from './mcs-carrier-holder'
 import { MCSZoneMixin, MCSZoneMixinProperties } from './features/mcs-zone-mixin'
 
@@ -9,6 +9,7 @@ const NATURE: ComponentNature = {
   properties: [...MCSZoneMixinProperties, ...MCSCarrierHolder.properties]
 }
 
+@sceneComponent('Shelf')
 export default class Shelf extends MCSZoneMixin(MCSCarrierHolder) {
   static get nature() {
     return NATURE
@@ -55,5 +56,3 @@ export default class Shelf extends MCSZoneMixin(MCSCarrierHolder) {
     ctx.restore()
   }
 }
-
-Component.register('Shelf', Shelf)

package/src/shuttle.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentNature } from '@hatiolab/things-scene'
+import { Component, ComponentNature, sceneComponent } from '@hatiolab/things-scene'
 import MCSVehicle from './mcs-vehicle'
 
 const NATURE: ComponentNature = {
@@ -9,6 +9,7 @@ const NATURE: ComponentNature = {
 }
 
 const RAILWIDTH = 2
+@sceneComponent('Shuttle')
 export default class Shuttle extends MCSVehicle {
   static get nature() {
     return NATURE
@@ -74,5 +75,3 @@ export default class Shuttle extends MCSVehicle {
     // this.renderDirection(ctx)
   }
 }
-
-Component.register('Shuttle', Shuttle)

package/src/stocker-capacity-bar.ts

@@ -1,4 +1,12 @@
-import { Component, ComponentNature, POSITION, Properties, RectPath, Shape } from '@hatiolab/things-scene'
+import {
+  Component,
+  ComponentNature,
+  POSITION,
+  Properties,
+  RectPath,
+  Shape,
+  sceneComponent
+} from '@hatiolab/things-scene'
 import { themesColorRange } from '@fmsim/api'
 import { MCSStatusMixin } from './features/mcs-status-mixin'
 import { LEGEND_CAPACITY, Legend } from './features/mcs-status-default'
@@ -77,6 +85,8 @@ var controlHandler = {
   }
 }
 
+@sceneComponent('StockerCapacityBar')
+@sceneComponent('MCSGaugeCapacityBar')
 export default class StockerCapacityBar extends ParentObjectMixin(MCSStatusMixin(RectPath(Shape))) {
   static get nature() {
     return NATURE
@@ -311,6 +321,3 @@ export default class StockerCapacityBar extends ParentObjectMixin(MCSStatusMixin
     })
   }
 }
-
-Component.register('StockerCapacityBar', StockerCapacityBar)
-Component.register('MCSGaugeCapacityBar', StockerCapacityBar)

package/src/stocker.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentNature, Properties } from '@hatiolab/things-scene'
+import { Component, ComponentNature, Properties, sceneComponent } from '@hatiolab/things-scene'
 import MCSTransport from './mcs-transport'
 
 const NATURE: ComponentNature = {
@@ -27,6 +27,7 @@ const NATURE: ComponentNature = {
 //   return localeValue
 // }
 
+@sceneComponent('Stocker')
 export default class Stocker extends MCSTransport {
   static get nature() {
     return NATURE
@@ -50,5 +51,3 @@ export default class Stocker extends MCSTransport {
     this.components.filter(component => !component.isIdentifiable()).forEach(component => (component.data = this.data))
   }
 }
-
-Component.register('STOCKER', Stocker)