@fmsim/machine 1.0.16 → 1.0.18

package/dist/carrier.js

@@ -0,0 +1,154 @@
+import JSON5 from 'json5';
+import { Component } from '@hatiolab/things-scene';
+import { ANIMATION_DEFAULT } from './features/animation-default.js';
+import { LEGEND_CARRIER } from './features/mcs-status-default.js';
+import { MCSStatusMixin } from './features/mcs-status-mixin.js';
+export class Carrier extends MCSStatusMixin(Component) {
+    set data(data) {
+        const { CARRIERNAME, CARRIERTYPE = '', EMPTYTYPE, CARRIERSTATUS } = data || {};
+        this.setState('id', CARRIERNAME);
+        this.emptyType = EMPTYTYPE;
+        this.carrierStatus = CARRIERSTATUS;
+        // TODO carrierstatus에 따라서 매핑되는 애니메이션 테마 수행
+        if (this.lastCarrierStatus !== this.carrierStatus) {
+            const lastAnimationConfig = this.getAnimationConfig(this.lastCarrierStatus);
+            if (lastAnimationConfig) {
+                let { animation, decorator, border, arrow } = lastAnimationConfig;
+                if (animation) {
+                    ;
+                    this.started = false;
+                    this._animation = null;
+                    this.setState('animation', {
+                        oncreate: null
+                    });
+                }
+                if (decorator) {
+                    this.trigger('iconoff');
+                }
+                if (border) {
+                    this.trigger('borderoff');
+                }
+                if (arrow) {
+                    this.trigger('bouncingoff');
+                }
+            }
+            const animationConfig = this.getAnimationConfig(this.carrierStatus);
+            if (animationConfig) {
+                let { animation, decorator, border, arrow } = animationConfig;
+                if (animation) {
+                    ;
+                    this.started = false;
+                    this._animation = null;
+                    this.setState('animation', {
+                        oncreate: animation
+                    });
+                    this.started = true;
+                }
+                if (decorator) {
+                    this.trigger('iconoff');
+                    this.trigger('icon', decorator);
+                }
+                if (border) {
+                    this.trigger('borderoff');
+                    this.trigger('border', border);
+                }
+                if (arrow) {
+                    this.trigger('bouncingoff');
+                    this.trigger('bouncing', arrow);
+                }
+            }
+        }
+        this.lastCarrierStatus = this.carrierStatus;
+    }
+    get status() {
+        return this.emptyType;
+    }
+    get legend() {
+        var _a;
+        const { carrierLegendName } = this.parent.state;
+        if (carrierLegendName) {
+            return (_a = this.root) === null || _a === void 0 ? void 0 : _a.style[carrierLegendName];
+        }
+        return LEGEND_CARRIER;
+    }
+    getAnimationConfig(carrierStatus) {
+        const config = this.animationPreset[carrierStatus || 'default'];
+        if (config && typeof config == 'string') {
+            try {
+                return JSON5.parse(config);
+            }
+            catch (e) {
+                console.error(e);
+            }
+        }
+        else {
+            return config || null;
+        }
+        return null;
+    }
+    get animationPreset() {
+        var _a;
+        const { carrierAnimationName } = this.parent.state;
+        if (carrierAnimationName) {
+            return ((_a = this.parent.root) === null || _a === void 0 ? void 0 : _a.style[carrierAnimationName]) || ANIMATION_DEFAULT;
+        }
+        return ANIMATION_DEFAULT;
+    }
+    calculateShrunkRectangle(originalRect) {
+        const shrunkRect = Object.assign({}, originalRect);
+        shrunkRect.left += originalRect.width * 0.1;
+        shrunkRect.width *= 0.8;
+        shrunkRect.top += originalRect.height * 0.1;
+        shrunkRect.height *= 0.8;
+        return shrunkRect;
+    }
+    contains(x, y) {
+        const rect = this.calculateShrunkRectangle(this.parent.bounds);
+        x -= rect.left;
+        y -= rect.top;
+        if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
+            return false;
+        }
+        // 윗변 중앙 좌표
+        const topCenterX = rect.width / 2;
+        const topCenterY = 0;
+        // 오른쪽 변 중앙 좌표
+        const rightCenterX = rect.width;
+        const rightCenterY = rect.height / 2;
+        // 기울기 m = (y2 - y1) / (x2 - x1)
+        const m = (rightCenterY - topCenterY) / (rightCenterX - topCenterX);
+        // y 절편 b = y - mx
+        const b = topCenterY - m * topCenterX;
+        // 점(px, py)이 선 아래(좌하부)에 있는지 확인
+        return y > m * x + b;
+    }
+    render(ctx) {
+        if (!this.emptyType) {
+            return;
+        }
+        const { left, top, width, height } = this.calculateShrunkRectangle(this.parent.bounds);
+        const radius = Math.round(Math.min(width, height) * 0.1);
+        // 시작점 설정
+        ctx.beginPath();
+        ctx.moveTo(left + radius, top);
+        // 상단 가로선 그리기
+        ctx.lineTo(left + width / 2, top);
+        // 우측 세로선 그리기
+        ctx.lineTo(left + width, top + height / 2);
+        ctx.lineTo(left + width, top + height);
+        // 하단 가로선 그리기
+        ctx.lineTo(left, top + height);
+        // 좌측 세로선 그리기
+        ctx.lineTo(left, top);
+        // 경로 닫기 및 그리기
+        ctx.closePath();
+        ctx.lineWidth = radius > 5 ? 1 : 0.5;
+        ctx.fillStyle = this.statusColor || 'transparent';
+        ctx.strokeStyle = this.auxColor || 'transparent';
+        ctx.fill();
+        ctx.stroke();
+        ctx.beginPath();
+    }
+}
+Component.register('Carrier', Carrier);
+//# sourceMappingURL=carrier.js.map

package/dist/carrier.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carrier.js","sourceRoot":"","sources":["../src/carrier.ts"],"names":[],"mappings":"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","sourcesContent":["import JSON5 from 'json5'\n\nimport { BOUNDS, Component } from '@hatiolab/things-scene'\nimport { ANIMATION_DEFAULT, AnimationPreset, AnimationConfig } from './features/animation-default.js'\nimport { LEGEND_CARRIER, Legend } from './features/mcs-status-default.js'\nimport { MCSStatusMixin } from './features/mcs-status-mixin.js'\n\nexport class Carrier extends MCSStatusMixin(Component) {\n  id?: string\n  emptyType?: 'FULL' | 'EMPTY' | 'EMPTYEMPTY'\n  carrierStatus?: string\n\n  lastCarrierStatus?: string\n\n  set data(data: any) {\n    const { CARRIERNAME, CARRIERTYPE = '', EMPTYTYPE, CARRIERSTATUS } = data || {}\n\n    this.setState('id', CARRIERNAME)\n\n    this.emptyType = EMPTYTYPE\n    this.carrierStatus = CARRIERSTATUS\n\n    // TODO carrierstatus에 따라서 매핑되는 애니메이션 테마 수행\n    if (this.lastCarrierStatus !== this.carrierStatus) {\n      const lastAnimationConfig = this.getAnimationConfig(this.lastCarrierStatus)\n\n      if (lastAnimationConfig) {\n        let { animation, decorator, border, arrow } = lastAnimationConfig\n        if (animation) {\n          ;(this as any).started = false\n          ;(this as any)._animation = null\n          this.setState('animation', {\n            oncreate: null\n          })\n        }\n\n        if (decorator) {\n          this.trigger('iconoff')\n        }\n\n        if (border) {\n          this.trigger('borderoff')\n        }\n\n        if (arrow) {\n          this.trigger('bouncingoff')\n        }\n      }\n\n      const animationConfig = this.getAnimationConfig(this.carrierStatus)\n\n      if (animationConfig) {\n        let { animation, decorator, border, arrow } = animationConfig\n        if (animation) {\n          ;(this as any).started = false\n          ;(this as any)._animation = null\n          this.setState('animation', {\n            oncreate: animation\n          })\n          ;(this as any).started = true\n        }\n\n        if (decorator) {\n          this.trigger('iconoff')\n          this.trigger('icon', decorator)\n        }\n\n        if (border) {\n          this.trigger('borderoff')\n          this.trigger('border', border)\n        }\n\n        if (arrow) {\n          this.trigger('bouncingoff')\n          this.trigger('bouncing', arrow)\n        }\n      }\n    }\n\n    this.lastCarrierStatus = this.carrierStatus\n  }\n\n  get status() {\n    return this.emptyType\n  }\n\n  get legend(): Legend {\n    const { carrierLegendName } = this.parent.state\n\n    if (carrierLegendName) {\n      return (this.root as any)?.style[carrierLegendName]\n    }\n\n    return LEGEND_CARRIER\n  }\n\n  getAnimationConfig(carrierStatus): AnimationConfig | null {\n    const config = this.animationPreset[carrierStatus || 'default']\n\n    if (config && typeof config == 'string') {\n      try {\n        return JSON5.parse(config)\n      } catch (e) {\n        console.error(e)\n      }\n    } else {\n      return (config as AnimationConfig) || null\n    }\n\n    return null\n  }\n\n  get animationPreset(): AnimationPreset {\n    const { carrierAnimationName } = this.parent.state\n\n    if (carrierAnimationName) {\n      return (this.parent.root as any)?.style[carrierAnimationName] || ANIMATION_DEFAULT\n    }\n\n    return ANIMATION_DEFAULT\n  }\n\n  calculateShrunkRectangle(originalRect: BOUNDS): BOUNDS {\n    const shrunkRect: BOUNDS = { ...originalRect }\n\n    shrunkRect.left += originalRect.width * 0.1\n    shrunkRect.width *= 0.8\n\n    shrunkRect.top += originalRect.height * 0.1\n    shrunkRect.height *= 0.8\n\n    return shrunkRect\n  }\n\n  contains(x, y) {\n    const rect = this.calculateShrunkRectangle(this.parent.bounds)\n    x -= rect.left\n    y -= rect.top\n\n    if (x < 0 || y < 0 || x > rect.width || y > rect.height) {\n      return false\n    }\n\n    // 윗변 중앙 좌표\n    const topCenterX = rect.width / 2\n    const topCenterY = 0\n\n    // 오른쪽 변 중앙 좌표\n    const rightCenterX = rect.width\n    const rightCenterY = rect.height / 2\n\n    // 기울기 m = (y2 - y1) / (x2 - x1)\n    const m = (rightCenterY - topCenterY) / (rightCenterX - topCenterX)\n\n    // y 절편 b = y - mx\n    const b = topCenterY - m * topCenterX\n\n    // 점(px, py)이 선 아래(좌하부)에 있는지 확인\n    return y > m * x + b\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    if (!this.emptyType) {\n      return\n    }\n\n    const { left, top, width, height } = this.calculateShrunkRectangle(this.parent.bounds)\n\n    const radius = Math.round(Math.min(width, height) * 0.1)\n\n    // 시작점 설정\n    ctx.beginPath()\n    ctx.moveTo(left + radius, top)\n\n    // 상단 가로선 그리기\n    ctx.lineTo(left + width / 2, top)\n\n    // 우측 세로선 그리기\n    ctx.lineTo(left + width, top + height / 2)\n    ctx.lineTo(left + width, top + height)\n\n    // 하단 가로선 그리기\n    ctx.lineTo(left, top + height)\n\n    // 좌측 세로선 그리기\n    ctx.lineTo(left, top)\n\n    // 경로 닫기 및 그리기\n    ctx.closePath()\n\n    ctx.lineWidth = radius > 5 ? 1 : 0.5\n    ctx.fillStyle = this.statusColor || 'transparent'\n    ctx.strokeStyle = this.auxColor || 'transparent'\n\n    ctx.fill()\n    ctx.stroke()\n\n    ctx.beginPath()\n  }\n}\n\nComponent.register('Carrier', Carrier)\n"]}

package/dist/features/animation-default.js

@@ -0,0 +1,20 @@
+export const ANIMATION_DEFAULT = {
+    WARN: {
+        animation: {
+            type: 'vibration',
+            duration: 1000,
+            theta: 0.3,
+            repeat: true
+        }
+    },
+    CRITICAL: {
+        animation: {
+            type: 'vibration',
+            duration: 500,
+            theta: 0.5,
+            repeat: true
+        }
+    },
+    default: null
+};
+//# sourceMappingURL=animation-default.js.map

package/dist/features/animation-default.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation-default.js","sourceRoot":"","sources":["../../src/features/animation-default.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,MAAM,iBAAiB,GAAoB;IAChD,IAAI,EAAE;QACJ,SAAS,EAAE;YACT,IAAI,EAAE,WAAW;YACjB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,IAAI;SACb;KACF;IACD,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,IAAI,EAAE,WAAW;YACjB,QAAQ,EAAE,GAAG;YACb,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,IAAI;SACb;KACF;IACD,OAAO,EAAE,IAAI;CACd,CAAA","sourcesContent":["export type AnimationConfig = {\n  [key: string]: any\n}\n\nexport interface AnimationPreset {\n  [state: string]: AnimationConfig | string | null\n}\n\nexport const ANIMATION_DEFAULT: AnimationPreset = {\n  WARN: {\n    animation: {\n      type: 'vibration',\n      duration: 1000,\n      theta: 0.3,\n      repeat: true\n    }\n  },\n  CRITICAL: {\n    animation: {\n      type: 'vibration',\n      duration: 500,\n      theta: 0.5,\n      repeat: true\n    }\n  },\n  default: null\n}\n"]}

package/dist/mcs-carrier-holder.js

@@ -1,18 +1,68 @@
-import { themesColorMap } from '@fmsim/api';
-import { LEGEND_CARRIER } from './features/mcs-status-default';
-import { MCSStatusMixin } from './features/mcs-status-mixin';
-import MCSUnit from './mcs-unit';
+import JSON5 from 'json5';
+import { themesColorMap, themesAnimationMap } from '@fmsim/api';
+import { ANIMATION_DEFAULT } from './features/animation-default.js';
+import { LEGEND_CARRIER } from './features/mcs-status-default.js';
+import { MCSStatusMixin } from './features/mcs-status-mixin.js';
+import MCSUnit from './mcs-unit.js';
 export class Carrier extends MCSStatusMixin(Object) {
     constructor(host) {
         super();
-        this.type = [];
         this.host = host;
     }
     set data(data) {
-        const { CARRIERID, CARRIERTYPE = '', EMPTYTYPE } = data || {};
-        this.id = CARRIERID;
-        this.type = CARRIERTYPE.split(';');
+        const { CARRIERNAME, CARRIERTYPE = '', EMPTYTYPE, CARRIERSTATUS } = data || {};
+        this.id = CARRIERNAME;
         this.emptyType = EMPTYTYPE;
+        this.carrierStatus = CARRIERSTATUS;
+        // TODO carrierstatus에 따라서 매핑되는 애니메이션 테마 수행
+        if (this.lastCarrierStatus !== this.carrierStatus) {
+            const lastAnimationConfig = this.getAnimationConfig(this.lastCarrierStatus);
+            const target = this.host;
+            if (lastAnimationConfig) {
+                let { animation, decorator, border, arrow } = lastAnimationConfig;
+                if (animation) {
+                    target.started = false;
+                    target._animation = null;
+                    target.setState('animation', {
+                        oncreate: null
+                    });
+                }
+                if (decorator) {
+                    target.trigger('iconoff');
+                }
+                if (border) {
+                    target.trigger('borderoff');
+                }
+                if (arrow) {
+                    target.trigger('bouncingoff');
+                }
+            }
+            const animationConfig = this.getAnimationConfig(this.carrierStatus);
+            if (animationConfig) {
+                let { animation, decorator, border, arrow } = animationConfig;
+                if (animation) {
+                    target.started = false;
+                    target._animation = null;
+                    target.setState('animation', {
+                        oncreate: animation
+                    });
+                    target.started = true;
+                }
+                if (decorator) {
+                    target.trigger('iconoff');
+                    target.trigger('icon', decorator);
+                }
+                if (border) {
+                    target.trigger('borderoff');
+                    target.trigger('border', border);
+                }
+                if (arrow) {
+                    target.trigger('bouncingoff');
+                    target.trigger('bouncing', arrow);
+                }
+            }
+        }
+        this.lastCarrierStatus = this.carrierStatus;
     }
     get status() {
         return this.emptyType;
@@ -25,6 +75,29 @@ export class Carrier extends MCSStatusMixin(Object) {
         }
         return LEGEND_CARRIER;
     }
+    getAnimationConfig(carrierStatus) {
+        const config = this.animationPreset[carrierStatus || 'default'];
+        if (config && typeof config == 'string') {
+            try {
+                return JSON5.parse(config);
+            }
+            catch (e) {
+                console.error(e);
+            }
+        }
+        else {
+            return config || null;
+        }
+        return null;
+    }
+    get animationPreset() {
+        var _a;
+        const { carrierAnimationName } = this.host.state;
+        if (carrierAnimationName) {
+            return ((_a = this.host.root) === null || _a === void 0 ? void 0 : _a.style[carrierAnimationName]) || ANIMATION_DEFAULT;
+        }
+        return ANIMATION_DEFAULT;
+    }
     calculateShrunkRectangle(originalRect) {
         const shrunkRect = Object.assign({}, originalRect);
         shrunkRect.left += originalRect.width * 0.1;
@@ -79,15 +152,16 @@ export class Carrier extends MCSStatusMixin(Object) {
         ctx.fill();
         ctx.stroke();
         ctx.beginPath();
-        const text = this.emptyType == 'Full' ? 'F' : this.emptyType == 'Empty' ? 'E' : this.emptyType == 'EmptyEmpty' ? 'X' : '';
-        if (text) {
-            const { x: cx, y: cy } = this.host.center;
-            ctx.fillStyle = 'black';
-            ctx.font = `normal ${Math.round(radius * 8)}px Arial`;
-            ctx.textAlign = 'center';
-            ctx.textBaseline = 'middle';
-            ctx.fillText(text, cx - width / 8, cy + height / 8);
-        }
+        // const text =
+        //   this.emptyType == 'FULL' ? 'F' : this.emptyType == 'EMPTY' ? 'E' : this.emptyType == 'EMPTYEMPTY' ? 'X' : ''
+        // if (text) {
+        //   const { x: cx, y: cy } = this.host.center
+        //   ctx.fillStyle = 'black'
+        //   ctx.font = `normal ${Math.round(radius * 8)}px Arial`
+        //   ctx.textAlign = 'center'
+        //   ctx.textBaseline = 'middle'
+        //   ctx.fillText(text, cx - width / 8, cy + height / 8)
+        // }
     }
 }
 export default class MCSCarrierHolder extends MCSUnit {
@@ -105,6 +179,14 @@ export default class MCSCarrierHolder extends MCSUnit {
                 property: {
                     options: themesColorMap
                 }
+            },
+            {
+                type: 'select',
+                label: 'carrier-animation-name',
+                name: 'carrierAnimationName',
+                property: {
+                    options: themesAnimationMap
+                }
             }
         ];
     }

package/dist/mcs-carrier-holder.js.map

@@ -1 +1 @@
-{"version":3,"file":"mcs-carrier-holder.js","sourceRoot":"","sources":["../src/mcs-carrier-holder.ts"],"names":[],"mappings":"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","sourcesContent":["import { BOUNDS, Component } from '@hatiolab/things-scene'\nimport { themesColorMap } from '@fmsim/api'\nimport { LEGEND_CARRIER, Legend } from './features/mcs-status-default'\nimport { MCSStatusMixin } from './features/mcs-status-mixin'\nimport MCSUnit from './mcs-unit'\n\nexport class Carrier extends MCSStatusMixin(Object) {\n  host: Component\n\n  id?: string\n  type: ('ALL' | 'BOBIN' | 'MAGAZINE' | 'PALLET' | 'REEL_TRAY' | 'PLATE')[] = []\n  // emptyType?: '5000' | '5001' | '5002' // 'Full' | 'Empty' | 'EmptyEmpty'\n  emptyType?: 'Full' | 'Empty' | 'EmptyEmpty'\n\n  constructor(host: Component) {\n    super()\n    this.host = host\n  }\n\n  set data(data: any) {\n    const { CARRIERID, CARRIERTYPE = '', EMPTYTYPE } = data || {}\n\n    this.id = CARRIERID\n    this.type = CARRIERTYPE.split(';')\n    this.emptyType = EMPTYTYPE\n  }\n\n  get status() {\n    return this.emptyType\n  }\n\n  get legend(): Legend {\n    const { carrierLegendName } = this.host.state\n\n    if (carrierLegendName) {\n      return (this.host.root as any)?.style[carrierLegendName]\n    }\n\n    return LEGEND_CARRIER\n  }\n\n  calculateShrunkRectangle(originalRect: BOUNDS): BOUNDS {\n    const shrunkRect: BOUNDS = { ...originalRect }\n\n    shrunkRect.left += originalRect.width * 0.1\n    shrunkRect.width *= 0.8\n\n    shrunkRect.top += originalRect.height * 0.1\n    shrunkRect.height *= 0.8\n\n    return shrunkRect\n  }\n\n  isPointOnCarrier(x, y, { left, top, width, height }) {\n    const rect = this.calculateShrunkRectangle({ left, top, width, height })\n    x -= rect.left\n    y -= rect.top\n\n    if (x < 0 || y < 0 || x > rect.width || y > rect.height) {\n      return false\n    }\n\n    // 윗변 중앙 좌표\n    const topCenterX = rect.width / 2\n    const topCenterY = 0\n\n    // 오른쪽 변 중앙 좌표\n    const rightCenterX = rect.width\n    const rightCenterY = rect.height / 2\n\n    // 기울기 m = (y2 - y1) / (x2 - x1)\n    const m = (rightCenterY - topCenterY) / (rightCenterX - topCenterX)\n\n    // y 절편 b = y - mx\n    const b = topCenterY - m * topCenterX\n\n    // 점(px, py)이 선 아래(좌하부)에 있는지 확인\n    return y > m * x + b\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    if (!this.emptyType) {\n      return\n    }\n\n    const { left, top, width, height } = this.calculateShrunkRectangle(this.host.bounds)\n\n    const radius = Math.round(Math.min(width, height) * 0.1)\n\n    // 시작점 설정\n    ctx.beginPath()\n    ctx.moveTo(left + radius, top)\n\n    // 상단 가로선 그리기\n    ctx.lineTo(left + width / 2, top)\n\n    // 우측 세로선 그리기\n    ctx.lineTo(left + width, top + height / 2)\n    ctx.lineTo(left + width, top + height)\n\n    // 하단 가로선 그리기\n    ctx.lineTo(left, top + height)\n\n    // 좌측 세로선 그리기\n    ctx.lineTo(left, top)\n\n    // 경로 닫기 및 그리기\n    ctx.closePath()\n\n    ctx.lineWidth = radius > 5 ? 1 : 0.5\n    ctx.fillStyle = this.statusColor || 'transparent'\n    ctx.strokeStyle = this.auxColor || 'transparent'\n\n    ctx.fill()\n    ctx.stroke()\n\n    ctx.beginPath()\n\n    const text =\n      this.emptyType == 'Full' ? 'F' : this.emptyType == 'Empty' ? 'E' : this.emptyType == 'EmptyEmpty' ? 'X' : ''\n\n    if (text) {\n      const { x: cx, y: cy } = this.host.center\n\n      ctx.fillStyle = 'black'\n      ctx.font = `normal ${Math.round(radius * 8)}px Arial`\n      ctx.textAlign = 'center'\n      ctx.textBaseline = 'middle'\n\n      ctx.fillText(text, cx - width / 8, cy + height / 8)\n    }\n  }\n}\n\nexport default class MCSCarrierHolder extends MCSUnit {\n  static get properties(): any {\n    return [\n      ...MCSUnit.properties,\n      {\n        type: 'select',\n        label: 'carrier-legend-name',\n        name: 'carrierLegendName',\n        property: {\n          options: themesColorMap\n        }\n      }\n    ]\n  }\n\n  carrier: Carrier = new Carrier(this)\n\n  ready() {\n    this.carrier.data = this.data\n  }\n\n  postrender(ctx: CanvasRenderingContext2D) {\n    this.carrier.render(ctx)\n\n    super.postrender(ctx)\n  }\n\n  onchangeData(after: any, before: any) {\n    this.carrier.data = this.data\n\n    super.onchangeData(after, before)\n  }\n\n  isPointOnCarrier(x, y) {\n    const { CARRIERID } = this.data || {}\n    if (!CARRIERID) {\n      return false\n    }\n\n    const point = this.transcoordC2S(x, y)\n    const { left, top, width, height } = this.bounds\n\n    point.x -= left\n    point.y -= top\n\n    return this.carrier.isPointOnCarrier(point.x, point.y, { left: 0, top: 0, width, height })\n  }\n}\n"]}
+{"version":3,"file":"mcs-carrier-holder.js","sourceRoot":"","sources":["../src/mcs-carrier-holder.ts"],"names":[],"mappings":"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","sourcesContent":["import JSON5 from 'json5'\n\nimport { BOUNDS, Component } from '@hatiolab/things-scene'\nimport { themesColorMap, themesAnimationMap } from '@fmsim/api'\nimport { ANIMATION_DEFAULT, AnimationPreset, AnimationConfig } from './features/animation-default.js'\nimport { LEGEND_CARRIER, Legend } from './features/mcs-status-default.js'\nimport { MCSStatusMixin } from './features/mcs-status-mixin.js'\nimport MCSUnit from './mcs-unit.js'\n\nexport class Carrier extends MCSStatusMixin(Object) {\n  host: Component\n\n  id?: string\n  emptyType?: 'FULL' | 'EMPTY' | 'EMPTYEMPTY'\n  carrierStatus?: string\n\n  lastCarrierStatus?: string\n\n  constructor(host: Component) {\n    super()\n    this.host = host\n  }\n\n  set data(data: any) {\n    const { CARRIERNAME, CARRIERTYPE = '', EMPTYTYPE, CARRIERSTATUS } = data || {}\n\n    this.id = CARRIERNAME\n    this.emptyType = EMPTYTYPE\n    this.carrierStatus = CARRIERSTATUS\n\n    // TODO carrierstatus에 따라서 매핑되는 애니메이션 테마 수행\n    if (this.lastCarrierStatus !== this.carrierStatus) {\n      const lastAnimationConfig = this.getAnimationConfig(this.lastCarrierStatus)\n      const target = this.host as any\n\n      if (lastAnimationConfig) {\n        let { animation, decorator, border, arrow } = lastAnimationConfig\n        if (animation) {\n          target.started = false\n          target._animation = null\n          target.setState('animation', {\n            oncreate: null\n          })\n        }\n\n        if (decorator) {\n          target.trigger('iconoff')\n        }\n\n        if (border) {\n          target.trigger('borderoff')\n        }\n\n        if (arrow) {\n          target.trigger('bouncingoff')\n        }\n      }\n\n      const animationConfig = this.getAnimationConfig(this.carrierStatus)\n\n      if (animationConfig) {\n        let { animation, decorator, border, arrow } = animationConfig\n        if (animation) {\n          target.started = false\n          target._animation = null\n          target.setState('animation', {\n            oncreate: animation\n          })\n          target.started = true\n        }\n\n        if (decorator) {\n          target.trigger('iconoff')\n          target.trigger('icon', decorator)\n        }\n\n        if (border) {\n          target.trigger('borderoff')\n          target.trigger('border', border)\n        }\n\n        if (arrow) {\n          target.trigger('bouncingoff')\n          target.trigger('bouncing', arrow)\n        }\n      }\n    }\n\n    this.lastCarrierStatus = this.carrierStatus\n  }\n\n  get status() {\n    return this.emptyType\n  }\n\n  get legend(): Legend {\n    const { carrierLegendName } = this.host.state\n\n    if (carrierLegendName) {\n      return (this.host.root as any)?.style[carrierLegendName]\n    }\n\n    return LEGEND_CARRIER\n  }\n\n  getAnimationConfig(carrierStatus): AnimationConfig | null {\n    const config = this.animationPreset[carrierStatus || 'default']\n\n    if (config && typeof config == 'string') {\n      try {\n        return JSON5.parse(config)\n      } catch (e) {\n        console.error(e)\n      }\n    } else {\n      return (config as AnimationConfig) || null\n    }\n\n    return null\n  }\n\n  get animationPreset(): AnimationPreset {\n    const { carrierAnimationName } = this.host.state\n\n    if (carrierAnimationName) {\n      return (this.host.root as any)?.style[carrierAnimationName] || ANIMATION_DEFAULT\n    }\n\n    return ANIMATION_DEFAULT\n  }\n\n  calculateShrunkRectangle(originalRect: BOUNDS): BOUNDS {\n    const shrunkRect: BOUNDS = { ...originalRect }\n\n    shrunkRect.left += originalRect.width * 0.1\n    shrunkRect.width *= 0.8\n\n    shrunkRect.top += originalRect.height * 0.1\n    shrunkRect.height *= 0.8\n\n    return shrunkRect\n  }\n\n  isPointOnCarrier(x, y, { left, top, width, height }) {\n    const rect = this.calculateShrunkRectangle({ left, top, width, height })\n    x -= rect.left\n    y -= rect.top\n\n    if (x < 0 || y < 0 || x > rect.width || y > rect.height) {\n      return false\n    }\n\n    // 윗변 중앙 좌표\n    const topCenterX = rect.width / 2\n    const topCenterY = 0\n\n    // 오른쪽 변 중앙 좌표\n    const rightCenterX = rect.width\n    const rightCenterY = rect.height / 2\n\n    // 기울기 m = (y2 - y1) / (x2 - x1)\n    const m = (rightCenterY - topCenterY) / (rightCenterX - topCenterX)\n\n    // y 절편 b = y - mx\n    const b = topCenterY - m * topCenterX\n\n    // 점(px, py)이 선 아래(좌하부)에 있는지 확인\n    return y > m * x + b\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    if (!this.emptyType) {\n      return\n    }\n\n    const { left, top, width, height } = this.calculateShrunkRectangle(this.host.bounds)\n\n    const radius = Math.round(Math.min(width, height) * 0.1)\n\n    // 시작점 설정\n    ctx.beginPath()\n    ctx.moveTo(left + radius, top)\n\n    // 상단 가로선 그리기\n    ctx.lineTo(left + width / 2, top)\n\n    // 우측 세로선 그리기\n    ctx.lineTo(left + width, top + height / 2)\n    ctx.lineTo(left + width, top + height)\n\n    // 하단 가로선 그리기\n    ctx.lineTo(left, top + height)\n\n    // 좌측 세로선 그리기\n    ctx.lineTo(left, top)\n\n    // 경로 닫기 및 그리기\n    ctx.closePath()\n\n    ctx.lineWidth = radius > 5 ? 1 : 0.5\n    ctx.fillStyle = this.statusColor || 'transparent'\n    ctx.strokeStyle = this.auxColor || 'transparent'\n\n    ctx.fill()\n    ctx.stroke()\n\n    ctx.beginPath()\n\n    // const text =\n    //   this.emptyType == 'FULL' ? 'F' : this.emptyType == 'EMPTY' ? 'E' : this.emptyType == 'EMPTYEMPTY' ? 'X' : ''\n\n    // if (text) {\n    //   const { x: cx, y: cy } = this.host.center\n\n    //   ctx.fillStyle = 'black'\n    //   ctx.font = `normal ${Math.round(radius * 8)}px Arial`\n    //   ctx.textAlign = 'center'\n    //   ctx.textBaseline = 'middle'\n\n    //   ctx.fillText(text, cx - width / 8, cy + height / 8)\n    // }\n  }\n}\n\nexport default class MCSCarrierHolder extends MCSUnit {\n  static get properties(): any {\n    return [\n      ...MCSUnit.properties,\n      {\n        type: 'select',\n        label: 'carrier-legend-name',\n        name: 'carrierLegendName',\n        property: {\n          options: themesColorMap\n        }\n      },\n      {\n        type: 'select',\n        label: 'carrier-animation-name',\n        name: 'carrierAnimationName',\n        property: {\n          options: themesAnimationMap\n        }\n      }\n    ]\n  }\n\n  carrier: Carrier = new Carrier(this)\n\n  ready() {\n    this.carrier.data = this.data\n  }\n\n  postrender(ctx: CanvasRenderingContext2D) {\n    this.carrier.render(ctx)\n\n    super.postrender(ctx)\n  }\n\n  onchangeData(after: any, before: any) {\n    this.carrier.data = this.data\n\n    super.onchangeData(after, before)\n  }\n\n  isPointOnCarrier(x, y) {\n    const { CARRIERID } = this.data || {}\n    if (!CARRIERID) {\n      return false\n    }\n\n    const point = this.transcoordC2S(x, y)\n    const { left, top, width, height } = this.bounds\n\n    point.x -= left\n    point.y -= top\n\n    return this.carrier.isPointOnCarrier(point.x, point.y, { left: 0, top: 0, width, height })\n  }\n}\n"]}

package/dist/port-flow.js

@@ -11,7 +11,7 @@ const NATURE = {
             name: 'orientation',
             label: 'orientation',
             property: {
-                options: ['left-right', 'right-left', 'top-bottom', 'bottom-top']
+                options: ['left to right', 'right to left', 'top to bottom', 'bottom to top']
             }
         },
         {
@@ -27,7 +27,7 @@ const NATURE = {
             name: 'direction',
             label: 'direction',
             property: {
-                options: ['in', 'out', 'inout']
+                options: ['IN', 'OUT', 'BOTH']
             }
         }
     ]
@@ -53,40 +53,45 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
         }
     }
     get text() {
-        const { direction = 'in' } = this.state;
+        const { direction = 'IN' } = this.state;
         return direction.toUpperCase();
     }
     render(ctx) {
         const { left, top, width, height } = this.bounds;
-        const { orientation = 'left-right', direction = 'in' } = this.state;
+        var { orientation = 'left to right', direction = 'IN' } = this.state;
+        const { INOUTTYPE } = this.data;
+        if (INOUTTYPE) {
+            // TODO bothtype value 조정하기.
+            direction = INOUTTYPE; /* IN | OUT | BOTH */
+        }
         ctx.beginPath();
         const arrowSize = Math.min(width, height) * 0.3;
-        const bodyWidth = orientation === 'left-right' || orientation === 'right-left' ? height * 0.2 : width * 0.2;
+        const bodyWidth = orientation === 'left to right' || orientation === 'right to left' ? height * 0.2 : width * 0.2;
         const centerX = left + width / 2;
         const centerY = top + height / 2;
         let startX, startY, endX, endY;
         let reverse = 1;
         switch (orientation) {
-            case 'left-right':
+            case 'left to right':
                 startX = left;
                 endX = left + width;
                 startY = centerY;
                 endY = centerY;
                 break;
-            case 'right-left':
+            case 'right to left':
                 startX = left + width;
                 endX = left;
                 startY = centerY;
                 endY = centerY;
                 reverse = -1;
                 break;
-            case 'top-bottom':
+            case 'top to bottom':
                 startX = centerX;
                 endX = centerX;
                 startY = top;
                 endY = top + height;
                 break;
-            case 'bottom-top':
+            case 'bottom to top':
                 startX = centerX;
                 endX = centerX;
                 startY = top + height;
@@ -96,7 +101,7 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
         }
         ctx.lineTo(startX, startY);
         if (orientation.includes('left')) {
-            if (direction === 'out' || direction === 'inout') {
+            if (direction === 'OUT' || direction === 'BOTH') {
                 ctx.lineTo(startX + arrowSize * reverse, startY - bodyWidth * reverse * 2);
             }
             else {
@@ -104,14 +109,14 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
             }
             ctx.lineTo(startX + arrowSize * reverse, startY - bodyWidth * reverse);
             ctx.lineTo(endX - arrowSize * reverse, endY - bodyWidth * reverse);
-            if (direction === 'in' || direction === 'inout') {
+            if (direction === 'IN' || direction === 'BOTH') {
                 ctx.lineTo(endX - arrowSize * reverse, endY - bodyWidth * 2 * reverse);
             }
             else {
                 ctx.lineTo(endX, endY - bodyWidth * reverse);
             }
             ctx.lineTo(endX, endY);
-            if (direction === 'in' || direction === 'inout') {
+            if (direction === 'IN' || direction === 'BOTH') {
                 ctx.lineTo(endX - arrowSize * reverse, endY + bodyWidth * 2 * reverse);
             }
             else {
@@ -119,7 +124,7 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
             }
             ctx.lineTo(endX - arrowSize * reverse, endY + bodyWidth * reverse);
             ctx.lineTo(startX + arrowSize * reverse, startY + bodyWidth * reverse);
-            if (direction === 'out' || direction === 'inout') {
+            if (direction === 'OUT' || direction === 'BOTH') {
                 ctx.lineTo(startX + arrowSize * reverse, startY + bodyWidth * 2 * reverse);
             }
             else {
@@ -127,7 +132,7 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
             }
         }
         else {
-            if (direction === 'out' || direction === 'inout') {
+            if (direction === 'OUT' || direction === 'BOTH') {
                 ctx.lineTo(startX - bodyWidth * reverse * 2, startY + arrowSize * reverse);
             }
             else {
@@ -135,14 +140,14 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
             }
             ctx.lineTo(startX - bodyWidth * reverse, startY + arrowSize * reverse);
             ctx.lineTo(endX - bodyWidth * reverse, endY - arrowSize * reverse);
-            if (direction === 'in' || direction === 'inout') {
+            if (direction === 'IN' || direction === 'BOTH') {
                 ctx.lineTo(endX - bodyWidth * 2 * reverse, endY - arrowSize * reverse);
             }
             else {
                 ctx.lineTo(endX - bodyWidth * reverse, endY);
             }
             ctx.lineTo(endX, endY);
-            if (direction === 'in' || direction === 'inout') {
+            if (direction === 'IN' || direction === 'BOTH') {
                 ctx.lineTo(endX + bodyWidth * 2 * reverse, endY - arrowSize * reverse);
             }
             else {
@@ -150,7 +155,7 @@ export default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {
             }
             ctx.lineTo(endX + bodyWidth * reverse, endY - arrowSize * reverse);
             ctx.lineTo(startX + bodyWidth * reverse, startY + arrowSize * reverse);
-            if (direction === 'out' || direction === 'inout') {
+            if (direction === 'OUT' || direction === 'BOTH') {
                 ctx.lineTo(startX + bodyWidth * 2 * reverse, startY + arrowSize * reverse);
             }
             else {

package/dist/port-flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"port-flow.js","sourceRoot":"","sources":["../src/port-flow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,QAAQ,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AACpF,OAAO,EAAE,iBAAiB,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAA;AAE/F,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,GAAG,2BAA2B;QAC9B;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,aAAa;YACpB,QAAQ,EAAE;gBACR,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC;aAClE;SACF;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,gBAAgB;YACvB,QAAQ,EAAE;gBACR,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC;aAC5C;SACF;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,WAAW;YACjB,KAAK,EAAE,WAAW;YAClB,QAAQ,EAAE;gBACR,OAAO,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC;aAChC;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,iBAAiB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtE,MAAM,KAAK,MAAM;QACf,OAAO,MAAM,CAAA;IACf,CAAC;IAED,IAAI,UAAU;QACZ,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAChD,MAAM,EAAE,aAAa,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAE5C,QAAQ,aAAa,EAAE,CAAC;YACtB,KAAK,KAAK;gBACR,uCACK,IAAI,CAAC,MAAM,KACd,GAAG,EAAE,GAAG,GAAG,EAAE,EACb,MAAM,EAAE,EAAE,IACX;YACH,KAAK,QAAQ;gBACX,uCACK,IAAI,CAAC,MAAM,KACd,GAAG,EAAE,GAAG,GAAG,MAAM,EACjB,MAAM,EAAE,EAAE,IACX;YACH,KAAK,MAAM;gBACT,uCACK,IAAI,CAAC,MAAM,KACd,IAAI,EAAE,IAAI,GAAG,EAAE,EACf,KAAK,EAAE,EAAE,IACV;YACH,KAAK,OAAO;gBACV,uCACK,IAAI,CAAC,MAAM,KACd,IAAI,EAAE,IAAI,GAAG,KAAK,EAClB,KAAK,EAAE,EAAE,IACV;YACH;gBACE,uCACK,IAAI,CAAC,MAAM,KACd,GAAG,EAAE,GAAG,GAAG,EAAE,EACb,MAAM,EAAE,EAAE,IACX;QACL,CAAC;IACH,CAAC;IAED,IAAI,IAAI;QACN,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAEvC,OAAO,SAAS,CAAC,WAAW,EAAE,CAAA;IAChC,CAAC;IAED,MAAM,CAAC,GAAG;QACR,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAChD,MAAM,EAAE,WAAW,GAAG,YAAY,EAAE,SAAS,GAAG,IAAI,EAAE,GAAiD,IAAI,CAAC,KAAK,CAAA;QAEjH,GAAG,CAAC,SAAS,EAAE,CAAA;QAEf,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,GAAG,CAAA;QAC/C,MAAM,SAAS,GAAG,WAAW,KAAK,YAAY,IAAI,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAA;QAC3G,MAAM,OAAO,GAAG,IAAI,GAAG,KAAK,GAAG,CAAC,CAAA;QAChC,MAAM,OAAO,GAAG,GAAG,GAAG,MAAM,GAAG,CAAC,CAAA;QAEhC,IAAI,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAA;QAC9B,IAAI,OAAO,GAAG,CAAC,CAAA;QAEf,QAAQ,WAAW,EAAE,CAAC;YACpB,KAAK,YAAY;gBACf,MAAM,GAAG,IAAI,CAAA;gBACb,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;gBACnB,MAAM,GAAG,OAAO,CAAA;gBAChB,IAAI,GAAG,OAAO,CAAA;gBACd,MAAK;YACP,KAAK,YAAY;gBACf,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;gBACrB,IAAI,GAAG,IAAI,CAAA;gBACX,MAAM,GAAG,OAAO,CAAA;gBAChB,IAAI,GAAG,OAAO,CAAA;gBACd,OAAO,GAAG,CAAC,CAAC,CAAA;gBACZ,MAAK;YACP,KAAK,YAAY;gBACf,MAAM,GAAG,OAAO,CAAA;gBAChB,IAAI,GAAG,OAAO,CAAA;gBACd,MAAM,GAAG,GAAG,CAAA;gBACZ,IAAI,GAAG,GAAG,GAAG,MAAM,CAAA;gBACnB,MAAK;YACP,KAAK,YAAY;gBACf,MAAM,GAAG,OAAO,CAAA;gBAChB,IAAI,GAAG,OAAO,CAAA;gBACd,MAAM,GAAG,GAAG,GAAG,MAAM,CAAA;gBACrB,IAAI,GAAG,GAAG,CAAA;gBACV,OAAO,GAAG,CAAC,CAAC,CAAA;gBACZ,MAAK;QACT,CAAC;QAED,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;QAE1B,IAAI,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YACjC,IAAI,SAAS,KAAK,KAAK,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;gBACjD,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,SAAS,GAAG,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,CAAC,CAAC,CAAA;YAC5E,CAAC;iBAAM,CAAC;gBACN,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;YAClD,CAAC;YAED,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,SAAS,GAAG,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;YACtE,GAAG,CAAC,MAAM,CAAC,IAAI,GAAG,SAAS,GAAG,OAAO,EAAE,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;YAElE,IAAI,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;gBAChD,GAAG,CAAC,MAAM,CAAC,IAAI,GAAG,SAAS,GAAG,OAAO,EAAE,IAAI,GAAG,SAAS,GAAG,CAAC,GAAG,OAAO,CAAC,CAAA;YACxE,CAAC;iBAAM,CAAC;gBACN,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;YAC9C,CAAC;YAED,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;YAEtB,IAAI,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;gBAChD,GAAG,CAAC,MAAM,CAAC,IAAI,GAAG,SAAS,GAAG,OAAO,EAAE,IAAI,GAAG,SAAS,GAAG,CAAC,GAAG,OAAO,CAAC,CAAA;YACxE,CAAC;iBAAM,CAAC;gBACN,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;YAC9C,CAAC;YAED,GAAG,CAAC,MAAM,CAAC,IAAI,GAAG,SAAS,GAAG,OAAO,EAAE,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;YAClE,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,SAAS,GAAG,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;YAEtE,IAAI,SAAS,KAAK,KAAK,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;gBACjD,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,SAAS,GAAG,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,CAAC,GAAG,OAAO,CAAC,CAAA;YAC5E,CAAC;iBAAM,CAAC;gBACN,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;YAClD,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,SAAS,KAAK,KAAK,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;gBACjD,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;YAC5E,CAAC;iBAAM,CAAC;gBACN,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,SAAS,GAAG,OAAO,EAAE,MAAM,CAAC,CAAA;YAClD,CAAC;YAED,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,SAAS,GAAG,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;YACtE,GAAG,CAAC,MAAM,CAAC,IAAI,GAAG,SAAS,GAAG,OAAO,EAAE,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;YAElE,IAAI,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;gBAChD,GAAG,CAAC,MAAM,CAAC,IAAI,GAAG,SAAS,GAAG,CAAC,GAAG,OAAO,EAAE,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;YACxE,CAAC;iBAAM,CAAC;gBACN,GAAG,CAAC,MAAM,CAAC,IAAI,GAAG,SAAS,GAAG,OAAO,EAAE,IAAI,CAAC,CAAA;YAC9C,CAAC;YAED,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;YAEtB,IAAI,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;gBAChD,GAAG,CAAC,MAAM,CAAC,IAAI,GAAG,SAAS,GAAG,CAAC,GAAG,OAAO,EAAE,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;YACxE,CAAC;iBAAM,CAAC;gBACN,GAAG,CAAC,MAAM,CAAC,IAAI,GAAG,SAAS,GAAG,OAAO,EAAE,IAAI,CAAC,CAAA;YAC9C,CAAC;YAED,GAAG,CAAC,MAAM,CAAC,IAAI,GAAG,SAAS,GAAG,OAAO,EAAE,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;YAClE,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,SAAS,GAAG,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;YAEtE,IAAI,SAAS,KAAK,KAAK,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;gBACjD,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,SAAS,GAAG,CAAC,GAAG,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;YAC5E,CAAC;iBAAM,CAAC;gBACN,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,SAAS,GAAG,OAAO,EAAE,MAAM,CAAC,CAAA;YAClD,CAAC;QACH,CAAC;QAED,GAAG,CAAC,SAAS,EAAE,CAAA;QAEf,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAA;IACtB,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAA","sourcesContent":["import { Component, ComponentNature, RectPath, Shape } from '@hatiolab/things-scene'\nimport { ParentObjectMixin, ParentObjectMixinProperties } from './features/parent-object-mixin'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    ...ParentObjectMixinProperties,\n    {\n      type: 'select',\n      name: 'orientation',\n      label: 'orientation',\n      property: {\n        options: ['left-right', 'right-left', 'top-bottom', 'bottom-top']\n      }\n    },\n    {\n      type: 'select',\n      name: 'labelPosition',\n      label: 'label-position',\n      property: {\n        options: ['left', 'right', 'top', 'bottom']\n      }\n    },\n    {\n      type: 'select',\n      name: 'direction',\n      label: 'direction',\n      property: {\n        options: ['in', 'out', 'inout']\n      }\n    }\n  ]\n}\n\nexport default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {\n  static get nature() {\n    return NATURE\n  }\n\n  get textBounds() {\n    const { left, top, width, height } = this.bounds\n    const { labelPosition = 'top' } = this.state\n\n    switch (labelPosition) {\n      case 'top':\n        return {\n          ...this.bounds,\n          top: top - 24,\n          height: 24\n        }\n      case 'bottom':\n        return {\n          ...this.bounds,\n          top: top + height,\n          height: 24\n        }\n      case 'left':\n        return {\n          ...this.bounds,\n          left: left - 60,\n          width: 60\n        }\n      case 'right':\n        return {\n          ...this.bounds,\n          left: left + width,\n          width: 60\n        }\n      default:\n        return {\n          ...this.bounds,\n          top: top - 24,\n          height: 24\n        }\n    }\n  }\n\n  get text() {\n    const { direction = 'in' } = this.state\n\n    return direction.toUpperCase()\n  }\n\n  render(ctx) {\n    const { left, top, width, height } = this.bounds\n    const { orientation = 'left-right', direction = 'in' }: { orientation?: string; direction?: string } = this.state\n\n    ctx.beginPath()\n\n    const arrowSize = Math.min(width, height) * 0.3\n    const bodyWidth = orientation === 'left-right' || orientation === 'right-left' ? height * 0.2 : width * 0.2\n    const centerX = left + width / 2\n    const centerY = top + height / 2\n\n    let startX, startY, endX, endY\n    let reverse = 1\n\n    switch (orientation) {\n      case 'left-right':\n        startX = left\n        endX = left + width\n        startY = centerY\n        endY = centerY\n        break\n      case 'right-left':\n        startX = left + width\n        endX = left\n        startY = centerY\n        endY = centerY\n        reverse = -1\n        break\n      case 'top-bottom':\n        startX = centerX\n        endX = centerX\n        startY = top\n        endY = top + height\n        break\n      case 'bottom-top':\n        startX = centerX\n        endX = centerX\n        startY = top + height\n        endY = top\n        reverse = -1\n        break\n    }\n\n    ctx.lineTo(startX, startY)\n\n    if (orientation.includes('left')) {\n      if (direction === 'out' || direction === 'inout') {\n        ctx.lineTo(startX + arrowSize * reverse, startY - bodyWidth * reverse * 2)\n      } else {\n        ctx.lineTo(startX, startY - bodyWidth * reverse)\n      }\n\n      ctx.lineTo(startX + arrowSize * reverse, startY - bodyWidth * reverse)\n      ctx.lineTo(endX - arrowSize * reverse, endY - bodyWidth * reverse)\n\n      if (direction === 'in' || direction === 'inout') {\n        ctx.lineTo(endX - arrowSize * reverse, endY - bodyWidth * 2 * reverse)\n      } else {\n        ctx.lineTo(endX, endY - bodyWidth * reverse)\n      }\n\n      ctx.lineTo(endX, endY)\n\n      if (direction === 'in' || direction === 'inout') {\n        ctx.lineTo(endX - arrowSize * reverse, endY + bodyWidth * 2 * reverse)\n      } else {\n        ctx.lineTo(endX, endY + bodyWidth * reverse)\n      }\n\n      ctx.lineTo(endX - arrowSize * reverse, endY + bodyWidth * reverse)\n      ctx.lineTo(startX + arrowSize * reverse, startY + bodyWidth * reverse)\n\n      if (direction === 'out' || direction === 'inout') {\n        ctx.lineTo(startX + arrowSize * reverse, startY + bodyWidth * 2 * reverse)\n      } else {\n        ctx.lineTo(startX, startY + bodyWidth * reverse)\n      }\n    } else {\n      if (direction === 'out' || direction === 'inout') {\n        ctx.lineTo(startX - bodyWidth * reverse * 2, startY + arrowSize * reverse)\n      } else {\n        ctx.lineTo(startX - bodyWidth * reverse, startY)\n      }\n\n      ctx.lineTo(startX - bodyWidth * reverse, startY + arrowSize * reverse)\n      ctx.lineTo(endX - bodyWidth * reverse, endY - arrowSize * reverse)\n\n      if (direction === 'in' || direction === 'inout') {\n        ctx.lineTo(endX - bodyWidth * 2 * reverse, endY - arrowSize * reverse)\n      } else {\n        ctx.lineTo(endX - bodyWidth * reverse, endY)\n      }\n\n      ctx.lineTo(endX, endY)\n\n      if (direction === 'in' || direction === 'inout') {\n        ctx.lineTo(endX + bodyWidth * 2 * reverse, endY - arrowSize * reverse)\n      } else {\n        ctx.lineTo(endX + bodyWidth * reverse, endY)\n      }\n\n      ctx.lineTo(endX + bodyWidth * reverse, endY - arrowSize * reverse)\n      ctx.lineTo(startX + bodyWidth * reverse, startY + arrowSize * reverse)\n\n      if (direction === 'out' || direction === 'inout') {\n        ctx.lineTo(startX + bodyWidth * 2 * reverse, startY + arrowSize * reverse)\n      } else {\n        ctx.lineTo(startX + bodyWidth * reverse, startY)\n      }\n    }\n\n    ctx.closePath()\n\n    this.drawStroke(ctx)\n  }\n}\n\nComponent.register('PortFlow', PortFlow)\n"]}
+{"version":3,"file":"port-flow.js","sourceRoot":"","sources":["../src/port-flow.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentNature, RectPath, Shape } from '@hatiolab/things-scene'\nimport { ParentObjectMixin, ParentObjectMixinProperties } from './features/parent-object-mixin'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    ...ParentObjectMixinProperties,\n    {\n      type: 'select',\n      name: 'orientation',\n      label: 'orientation',\n      property: {\n        options: ['left to right', 'right to left', 'top to bottom', 'bottom to top']\n      }\n    },\n    {\n      type: 'select',\n      name: 'labelPosition',\n      label: 'label-position',\n      property: {\n        options: ['left', 'right', 'top', 'bottom']\n      }\n    },\n    {\n      type: 'select',\n      name: 'direction',\n      label: 'direction',\n      property: {\n        options: ['IN', 'OUT', 'BOTH']\n      }\n    }\n  ]\n}\n\nexport default class PortFlow extends ParentObjectMixin(RectPath(Shape)) {\n  static get nature() {\n    return NATURE\n  }\n\n  get textBounds() {\n    const { left, top, width, height } = this.bounds\n    const { labelPosition = 'top' } = this.state\n\n    switch (labelPosition) {\n      case 'top':\n        return {\n          ...this.bounds,\n          top: top - 24,\n          height: 24\n        }\n      case 'bottom':\n        return {\n          ...this.bounds,\n          top: top + height,\n          height: 24\n        }\n      case 'left':\n        return {\n          ...this.bounds,\n          left: left - 60,\n          width: 60\n        }\n      case 'right':\n        return {\n          ...this.bounds,\n          left: left + width,\n          width: 60\n        }\n      default:\n        return {\n          ...this.bounds,\n          top: top - 24,\n          height: 24\n        }\n    }\n  }\n\n  get text() {\n    const { direction = 'IN' } = this.state\n\n    return direction.toUpperCase()\n  }\n\n  render(ctx) {\n    const { left, top, width, height } = this.bounds\n    var { orientation = 'left to right', direction = 'IN' }: { orientation?: string; direction?: string } = this.state\n    const { INOUTTYPE } = this.data\n\n    if (INOUTTYPE) {\n      // TODO bothtype value 조정하기.\n      direction = INOUTTYPE /* IN | OUT | BOTH */\n    }\n\n    ctx.beginPath()\n\n    const arrowSize = Math.min(width, height) * 0.3\n    const bodyWidth = orientation === 'left to right' || orientation === 'right to left' ? height * 0.2 : width * 0.2\n    const centerX = left + width / 2\n    const centerY = top + height / 2\n\n    let startX, startY, endX, endY\n    let reverse = 1\n\n    switch (orientation) {\n      case 'left to right':\n        startX = left\n        endX = left + width\n        startY = centerY\n        endY = centerY\n        break\n      case 'right to left':\n        startX = left + width\n        endX = left\n        startY = centerY\n        endY = centerY\n        reverse = -1\n        break\n      case 'top to bottom':\n        startX = centerX\n        endX = centerX\n        startY = top\n        endY = top + height\n        break\n      case 'bottom to top':\n        startX = centerX\n        endX = centerX\n        startY = top + height\n        endY = top\n        reverse = -1\n        break\n    }\n\n    ctx.lineTo(startX, startY)\n\n    if (orientation.includes('left')) {\n      if (direction === 'OUT' || direction === 'BOTH') {\n        ctx.lineTo(startX + arrowSize * reverse, startY - bodyWidth * reverse * 2)\n      } else {\n        ctx.lineTo(startX, startY - bodyWidth * reverse)\n      }\n\n      ctx.lineTo(startX + arrowSize * reverse, startY - bodyWidth * reverse)\n      ctx.lineTo(endX - arrowSize * reverse, endY - bodyWidth * reverse)\n\n      if (direction === 'IN' || direction === 'BOTH') {\n        ctx.lineTo(endX - arrowSize * reverse, endY - bodyWidth * 2 * reverse)\n      } else {\n        ctx.lineTo(endX, endY - bodyWidth * reverse)\n      }\n\n      ctx.lineTo(endX, endY)\n\n      if (direction === 'IN' || direction === 'BOTH') {\n        ctx.lineTo(endX - arrowSize * reverse, endY + bodyWidth * 2 * reverse)\n      } else {\n        ctx.lineTo(endX, endY + bodyWidth * reverse)\n      }\n\n      ctx.lineTo(endX - arrowSize * reverse, endY + bodyWidth * reverse)\n      ctx.lineTo(startX + arrowSize * reverse, startY + bodyWidth * reverse)\n\n      if (direction === 'OUT' || direction === 'BOTH') {\n        ctx.lineTo(startX + arrowSize * reverse, startY + bodyWidth * 2 * reverse)\n      } else {\n        ctx.lineTo(startX, startY + bodyWidth * reverse)\n      }\n    } else {\n      if (direction === 'OUT' || direction === 'BOTH') {\n        ctx.lineTo(startX - bodyWidth * reverse * 2, startY + arrowSize * reverse)\n      } else {\n        ctx.lineTo(startX - bodyWidth * reverse, startY)\n      }\n\n      ctx.lineTo(startX - bodyWidth * reverse, startY + arrowSize * reverse)\n      ctx.lineTo(endX - bodyWidth * reverse, endY - arrowSize * reverse)\n\n      if (direction === 'IN' || direction === 'BOTH') {\n        ctx.lineTo(endX - bodyWidth * 2 * reverse, endY - arrowSize * reverse)\n      } else {\n        ctx.lineTo(endX - bodyWidth * reverse, endY)\n      }\n\n      ctx.lineTo(endX, endY)\n\n      if (direction === 'IN' || direction === 'BOTH') {\n        ctx.lineTo(endX + bodyWidth * 2 * reverse, endY - arrowSize * reverse)\n      } else {\n        ctx.lineTo(endX + bodyWidth * reverse, endY)\n      }\n\n      ctx.lineTo(endX + bodyWidth * reverse, endY - arrowSize * reverse)\n      ctx.lineTo(startX + bodyWidth * reverse, startY + arrowSize * reverse)\n\n      if (direction === 'OUT' || direction === 'BOTH') {\n        ctx.lineTo(startX + bodyWidth * 2 * reverse, startY + arrowSize * reverse)\n      } else {\n        ctx.lineTo(startX + bodyWidth * reverse, startY)\n      }\n    }\n\n    ctx.closePath()\n\n    this.drawStroke(ctx)\n  }\n}\n\nComponent.register('PortFlow', PortFlow)\n"]}