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

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