@fmsim/board 0.0.49

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAA;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAE5D,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA","sourcesContent":["export * from './types.js'\n\nexport { registerDefaultGroups } from './component/register-default-groups.js'\nexport { DataStorage } from './data-storage/data-storage.js'\n\nexport * from './ox-board-viewer.js'\nexport * from './ox-board-modeller.js'\nexport * from './ox-board-list.js'\n"]}

package/dist/src/layers/bouncing-arrow-decorator.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/layers/bouncing-arrow-decorator.js

@@ -0,0 +1,40 @@
+import { Component } from '@hatiolab/things-scene';
+function bounce(delta) {
+    const progress = (1 - delta) * 100;
+    const round = progress / 10;
+    const bounce = progress % 10; /* 10회 바운스 */
+    return bounce < 5 ? bounce : 10 - bounce;
+}
+function bouncingArrowDecorator(component, context, delta /* 1 ~ 0 */) {
+    let { left, top, width } = component.bounds;
+    let decotag = component.decotag;
+    let { x, y } = component.transcoordS2C(left + width / 2, top, component.rootModel);
+    const BOUNCE = bounce(delta || 0) * 2;
+    x = Math.max(x, 20);
+    y = Math.max(y, 20);
+    context.beginPath();
+    context.moveTo(x - 10, y - 16 + BOUNCE);
+    context.lineTo(x + 10, y - 16 + BOUNCE);
+    context.lineTo(x + 10, y - 8 + BOUNCE);
+    context.lineTo(x + 16, y - 8 + BOUNCE);
+    context.lineTo(x, y + BOUNCE);
+    context.lineTo(x - 16, y - 8 + BOUNCE);
+    context.lineTo(x - 10, y - 8 + BOUNCE);
+    context.lineTo(x - 10, y - 16 + BOUNCE);
+    context.lineTo(x - 10, y - 16 + BOUNCE);
+    context.fillStyle = '#FF0000';
+    context.fill();
+    if (decotag) {
+        context.beginPath();
+        context.font = '12px Arial';
+        let metrics = context.measureText(decotag);
+        context.fillStyle = '#FF0000';
+        context.roundRect(x - metrics.actualBoundingBoxLeft - 3 + 20, y - metrics.actualBoundingBoxAscent - 3 - 6 + BOUNCE, metrics.actualBoundingBoxLeft + metrics.actualBoundingBoxRight + 3 * 2, metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent + 3 * 2, 3 /* round */);
+        context.fill();
+        context.fillStyle = 'white';
+        context.fillText(decotag, x + 20, y - 6 + BOUNCE);
+    }
+    return true; /* need animation */
+}
+Component.registerDecorator('bouncing-arrow', bouncingArrowDecorator);
+//# sourceMappingURL=bouncing-arrow-decorator.js.map

package/dist/src/layers/bouncing-arrow-decorator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bouncing-arrow-decorator.js","sourceRoot":"","sources":["../../../src/layers/bouncing-arrow-decorator.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component } from '@hatiolab/things-scene'\n\nfunction bounce(delta: number): number {\n  const progress = (1 - delta) * 100\n  const round = progress / 10\n  const bounce = progress % 10 /* 10회 바운스 */\n\n  return bounce < 5 ? bounce : 10 - bounce\n}\n\nfunction bouncingArrowDecorator(component: Component, context: any, delta?: number /* 1 ~ 0 */) {\n  let { left, top, width } = component.bounds\n  let decotag = (component as any).decotag\n  let { x, y } = (component as any).transcoordS2C(left + width / 2, top, component.rootModel)\n\n  const BOUNCE = bounce(delta || 0) * 2\n\n  x = Math.max(x, 20)\n  y = Math.max(y, 20)\n\n  context.beginPath()\n\n  context.moveTo(x - 10, y - 16 + BOUNCE)\n  context.lineTo(x + 10, y - 16 + BOUNCE)\n  context.lineTo(x + 10, y - 8 + BOUNCE)\n  context.lineTo(x + 16, y - 8 + BOUNCE)\n  context.lineTo(x, y + BOUNCE)\n  context.lineTo(x - 16, y - 8 + BOUNCE)\n  context.lineTo(x - 10, y - 8 + BOUNCE)\n  context.lineTo(x - 10, y - 16 + BOUNCE)\n  context.lineTo(x - 10, y - 16 + BOUNCE)\n\n  context.fillStyle = '#FF0000'\n\n  context.fill()\n\n  if (decotag) {\n    context.beginPath()\n\n    context.font = '12px Arial'\n    let metrics = context.measureText(decotag)\n\n    context.fillStyle = '#FF0000'\n    context.roundRect(\n      x - metrics.actualBoundingBoxLeft - 3 + 20,\n      y - metrics.actualBoundingBoxAscent - 3 - 6 + BOUNCE,\n      metrics.actualBoundingBoxLeft + metrics.actualBoundingBoxRight + 3 * 2,\n      metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent + 3 * 2,\n      3 /* round */\n    )\n\n    context.fill()\n\n    context.fillStyle = 'white'\n    context.fillText(decotag, x + 20, y - 6 + BOUNCE)\n  }\n\n  return true /* need animation */\n}\n\nComponent.registerDecorator('bouncing-arrow', bouncingArrowDecorator)\n"]}

package/dist/src/layers/event-handlers.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/layers/event-handlers.js

@@ -0,0 +1,70 @@
+import { EventMap } from '@hatiolab/things-scene';
+function onmouseenter(event, hint) {
+    var _a;
+    const target = hint.origin;
+    if (!((_a = target.model) === null || _a === void 0 ? void 0 : _a.id)) {
+        return;
+    }
+    event.stopPropagation();
+    window.dispatchEvent(new CustomEvent('fetchFmbModelDataByMouseEvent', {
+        detail: {
+            value: {
+                type: 'hover',
+                event,
+                model: target.model
+            }
+        }
+    }));
+}
+function onclick(event, hint) {
+    var _a;
+    const target = hint.origin;
+    if (!((_a = target.model) === null || _a === void 0 ? void 0 : _a.id)) {
+        return;
+    }
+    event.stopPropagation();
+    setTimeout(() => {
+        if (target.currentEvent !== 'dblclick') {
+            window.dispatchEvent(new CustomEvent('fetchFmbModelDataByMouseEvent', {
+                detail: {
+                    value: {
+                        type: 'click',
+                        event,
+                        model: target.model
+                    }
+                }
+            }));
+        }
+    }, 300);
+}
+function ondblclick(event, hint) {
+    var _a;
+    const target = hint.origin;
+    if (!((_a = target.model) === null || _a === void 0 ? void 0 : _a.id)) {
+        return;
+    }
+    event.stopPropagation();
+    target.currentEvent = 'dblclick';
+    window.dispatchEvent(new CustomEvent('fetchFmbModelDataByMouseEvent', {
+        detail: {
+            value: {
+                type: 'dblclick',
+                event,
+                model: target.model
+            }
+        }
+    }));
+    setTimeout(() => {
+        target.currentEvent = '';
+    }, 500);
+}
+EventMap.register('event-handler', {
+    'model-layer': {
+        '(all)': {
+            mouseenter: onmouseenter,
+            click: onclick,
+            dblclick: ondblclick
+        }
+    }
+});
+//# sourceMappingURL=event-handlers.js.map

package/dist/src/layers/event-handlers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-handlers.js","sourceRoot":"","sources":["../../../src/layers/event-handlers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEjD,SAAS,YAAY,CAAC,KAAiB,EAAE,IAAS;;IAChD,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;IAE1B,IAAI,CAAC,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,EAAE,CAAA,EAAE;QACrB,OAAM;KACP;IAED,KAAK,CAAC,eAAe,EAAE,CAAA;IAEvB,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,+BAA+B,EAAE;QAC/C,MAAM,EAAE;YACN,KAAK,EAAE;gBACL,IAAI,EAAE,OAAO;gBACb,KAAK;gBACL,KAAK,EAAE,MAAM,CAAC,KAAK;aACpB;SACF;KACF,CAAC,CACH,CAAA;AACH,CAAC;AAED,SAAS,OAAO,CAAC,KAAiB,EAAE,IAAS;;IAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;IAE1B,IAAI,CAAC,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,EAAE,CAAA,EAAE;QACrB,OAAM;KACP;IAED,KAAK,CAAC,eAAe,EAAE,CAAA;IAEvB,UAAU,CAAC,GAAG,EAAE;QACd,IAAI,MAAM,CAAC,YAAY,KAAK,UAAU,EAAE;YACtC,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,+BAA+B,EAAE;gBAC/C,MAAM,EAAE;oBACN,KAAK,EAAE;wBACL,IAAI,EAAE,OAAO;wBACb,KAAK;wBACL,KAAK,EAAE,MAAM,CAAC,KAAK;qBACpB;iBACF;aACF,CAAC,CACH,CAAA;SACF;IACH,CAAC,EAAE,GAAG,CAAC,CAAA;AACT,CAAC;AAED,SAAS,UAAU,CAAC,KAAiB,EAAE,IAAS;;IAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;IAE1B,IAAI,CAAC,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,EAAE,CAAA,EAAE;QACrB,OAAM;KACP;IAED,KAAK,CAAC,eAAe,EAAE,CAAA;IAEvB,MAAM,CAAC,YAAY,GAAG,UAAU,CAAA;IAChC,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,+BAA+B,EAAE;QAC/C,MAAM,EAAE;YACN,KAAK,EAAE;gBACL,IAAI,EAAE,UAAU;gBAChB,KAAK;gBACL,KAAK,EAAE,MAAM,CAAC,KAAK;aACpB;SACF;KACF,CAAC,CACH,CAAA;IAED,UAAU,CAAC,GAAG,EAAE;QACd,MAAM,CAAC,YAAY,GAAG,EAAE,CAAA;IAC1B,CAAC,EAAE,GAAG,CAAC,CAAA;AACT,CAAC;AAED,QAAQ,CAAC,QAAQ,CAAC,eAAe,EAAE;IACjC,aAAa,EAAE;QACb,OAAO,EAAE;YACP,UAAU,EAAE,YAAY;YACxB,KAAK,EAAE,OAAO;YACd,QAAQ,EAAE,UAAU;SACrB;KACF;CACF,CAAC,CAAA","sourcesContent":["import { EventMap } from '@hatiolab/things-scene'\n\nfunction onmouseenter(event: MouseEvent, hint: any) {\n  const target = hint.origin\n\n  if (!target.model?.id) {\n    return\n  }\n\n  event.stopPropagation()\n\n  window.dispatchEvent(\n    new CustomEvent('fetchFmbModelDataByMouseEvent', {\n      detail: {\n        value: {\n          type: 'hover',\n          event,\n          model: target.model\n        }\n      }\n    })\n  )\n}\n\nfunction onclick(event: MouseEvent, hint: any) {\n  const target = hint.origin\n\n  if (!target.model?.id) {\n    return\n  }\n\n  event.stopPropagation()\n\n  setTimeout(() => {\n    if (target.currentEvent !== 'dblclick') {\n      window.dispatchEvent(\n        new CustomEvent('fetchFmbModelDataByMouseEvent', {\n          detail: {\n            value: {\n              type: 'click',\n              event,\n              model: target.model\n            }\n          }\n        })\n      )\n    }\n  }, 300)\n}\n\nfunction ondblclick(event: MouseEvent, hint: any) {\n  const target = hint.origin\n\n  if (!target.model?.id) {\n    return\n  }\n\n  event.stopPropagation()\n\n  target.currentEvent = 'dblclick'\n  window.dispatchEvent(\n    new CustomEvent('fetchFmbModelDataByMouseEvent', {\n      detail: {\n        value: {\n          type: 'dblclick',\n          event,\n          model: target.model\n        }\n      }\n    })\n  )\n\n  setTimeout(() => {\n    target.currentEvent = ''\n  }, 500)\n}\n\nEventMap.register('event-handler', {\n  'model-layer': {\n    '(all)': {\n      mouseenter: onmouseenter,\n      click: onclick,\n      dblclick: ondblclick\n    }\n  }\n})\n"]}

package/dist/src/layers/mcs-event-handlers.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/layers/mcs-event-handlers.js

@@ -0,0 +1,73 @@
+import { EventMap } from '@hatiolab/things-scene';
+function onmouseenter(event, hint) {
+    var _a;
+    const target = hint.origin;
+    if (!((_a = target.model) === null || _a === void 0 ? void 0 : _a.id)) {
+        return;
+    }
+    event.stopPropagation();
+    window.dispatchEvent(new CustomEvent('fetchFmbModelDataByMouseEvent', {
+        detail: {
+            value: {
+                type: 'hover',
+                event,
+                model: target.state,
+                data: target.data
+            }
+        }
+    }));
+}
+function onclick(event, hint) {
+    var _a;
+    const target = hint.origin;
+    if (!((_a = target.model) === null || _a === void 0 ? void 0 : _a.id)) {
+        return;
+    }
+    event.stopPropagation();
+    setTimeout(() => {
+        if (target.currentEvent !== 'dblclick') {
+            window.dispatchEvent(new CustomEvent('fetchFmbModelDataByMouseEvent', {
+                detail: {
+                    value: {
+                        type: 'click',
+                        event,
+                        model: target.state,
+                        data: target.data
+                    }
+                }
+            }));
+        }
+    }, 300);
+}
+function ondblclick(event, hint) {
+    var _a;
+    const target = hint.origin;
+    setTimeout(() => {
+        target.currentEvent = '';
+    }, 500);
+    if (!((_a = target.model) === null || _a === void 0 ? void 0 : _a.id)) {
+        return;
+    }
+    event.stopPropagation();
+    target.currentEvent = 'dblclick';
+    window.dispatchEvent(new CustomEvent('fetchFmbModelDataByMouseEvent', {
+        detail: {
+            value: {
+                type: 'dblclick',
+                event,
+                model: target.state,
+                data: target.data
+            }
+        }
+    }));
+}
+EventMap.register('mcs-event-handler', {
+    'model-layer': {
+        '(all)': {
+            mouseenter: onmouseenter,
+            click: onclick,
+            dblclick: ondblclick
+        }
+    }
+});
+//# sourceMappingURL=mcs-event-handlers.js.map

package/dist/src/layers/mcs-event-handlers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcs-event-handlers.js","sourceRoot":"","sources":["../../../src/layers/mcs-event-handlers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEjD,SAAS,YAAY,CAAC,KAAiB,EAAE,IAAS;;IAChD,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;IAE1B,IAAI,CAAC,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,EAAE,CAAA,EAAE;QACrB,OAAM;KACP;IAED,KAAK,CAAC,eAAe,EAAE,CAAA;IAEvB,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,+BAA+B,EAAE;QAC/C,MAAM,EAAE;YACN,KAAK,EAAE;gBACL,IAAI,EAAE,OAAO;gBACb,KAAK;gBACL,KAAK,EAAE,MAAM,CAAC,KAAK;gBACnB,IAAI,EAAE,MAAM,CAAC,IAAI;aAClB;SACF;KACF,CAAC,CACH,CAAA;AACH,CAAC;AAED,SAAS,OAAO,CAAC,KAAiB,EAAE,IAAS;;IAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;IAE1B,IAAI,CAAC,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,EAAE,CAAA,EAAE;QACrB,OAAM;KACP;IAED,KAAK,CAAC,eAAe,EAAE,CAAA;IAEvB,UAAU,CAAC,GAAG,EAAE;QACd,IAAI,MAAM,CAAC,YAAY,KAAK,UAAU,EAAE;YACtC,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,+BAA+B,EAAE;gBAC/C,MAAM,EAAE;oBACN,KAAK,EAAE;wBACL,IAAI,EAAE,OAAO;wBACb,KAAK;wBACL,KAAK,EAAE,MAAM,CAAC,KAAK;wBACnB,IAAI,EAAE,MAAM,CAAC,IAAI;qBAClB;iBACF;aACF,CAAC,CACH,CAAA;SACF;IACH,CAAC,EAAE,GAAG,CAAC,CAAA;AACT,CAAC;AAED,SAAS,UAAU,CAAC,KAAiB,EAAE,IAAS;;IAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;IAE1B,UAAU,CAAC,GAAG,EAAE;QACd,MAAM,CAAC,YAAY,GAAG,EAAE,CAAA;IAC1B,CAAC,EAAE,GAAG,CAAC,CAAA;IAEP,IAAI,CAAC,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,EAAE,CAAA,EAAE;QACrB,OAAM;KACP;IAED,KAAK,CAAC,eAAe,EAAE,CAAA;IAEvB,MAAM,CAAC,YAAY,GAAG,UAAU,CAAA;IAChC,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,+BAA+B,EAAE;QAC/C,MAAM,EAAE;YACN,KAAK,EAAE;gBACL,IAAI,EAAE,UAAU;gBAChB,KAAK;gBACL,KAAK,EAAE,MAAM,CAAC,KAAK;gBACnB,IAAI,EAAE,MAAM,CAAC,IAAI;aAClB;SACF;KACF,CAAC,CACH,CAAA;AACH,CAAC;AAED,QAAQ,CAAC,QAAQ,CAAC,mBAAmB,EAAE;IACrC,aAAa,EAAE;QACb,OAAO,EAAE;YACP,UAAU,EAAE,YAAY;YACxB,KAAK,EAAE,OAAO;YACd,QAAQ,EAAE,UAAU;SACrB;KACF;CACF,CAAC,CAAA","sourcesContent":["import { EventMap } from '@hatiolab/things-scene'\n\nfunction onmouseenter(event: MouseEvent, hint: any) {\n  const target = hint.origin\n\n  if (!target.model?.id) {\n    return\n  }\n\n  event.stopPropagation()\n\n  window.dispatchEvent(\n    new CustomEvent('fetchFmbModelDataByMouseEvent', {\n      detail: {\n        value: {\n          type: 'hover',\n          event,\n          model: target.state,\n          data: target.data\n        }\n      }\n    })\n  )\n}\n\nfunction onclick(event: MouseEvent, hint: any) {\n  const target = hint.origin\n\n  if (!target.model?.id) {\n    return\n  }\n\n  event.stopPropagation()\n\n  setTimeout(() => {\n    if (target.currentEvent !== 'dblclick') {\n      window.dispatchEvent(\n        new CustomEvent('fetchFmbModelDataByMouseEvent', {\n          detail: {\n            value: {\n              type: 'click',\n              event,\n              model: target.state,\n              data: target.data\n            }\n          }\n        })\n      )\n    }\n  }, 300)\n}\n\nfunction ondblclick(event: MouseEvent, hint: any) {\n  const target = hint.origin\n\n  setTimeout(() => {\n    target.currentEvent = ''\n  }, 500)\n\n  if (!target.model?.id) {\n    return\n  }\n\n  event.stopPropagation()\n\n  target.currentEvent = 'dblclick'\n  window.dispatchEvent(\n    new CustomEvent('fetchFmbModelDataByMouseEvent', {\n      detail: {\n        value: {\n          type: 'dblclick',\n          event,\n          model: target.state,\n          data: target.data\n        }\n      }\n    })\n  )\n}\n\nEventMap.register('mcs-event-handler', {\n  'model-layer': {\n    '(all)': {\n      mouseenter: onmouseenter,\n      click: onclick,\n      dblclick: ondblclick\n    }\n  }\n})\n"]}

package/dist/src/layers/movement-layer.d.ts

@@ -0,0 +1,27 @@
+import { Component, Layer, POINT, Properties } from '@hatiolab/things-scene';
+export type PATH = {
+    SourceMachineName: string;
+    SourceZoneName: string;
+    SourceUnitName: string;
+    DestMachineName: string;
+    DestZoneName: string;
+    DestUnitName: string;
+    PathType: 'Command' | 'Job';
+    LineType: 'ON' | 'OD' | 'OA' | 'IN' | 'ID' | 'IA';
+};
+export type MOVEMENT = PATH[];
+export default class MovementLayer extends Layer {
+    get capturable(): boolean;
+    drawArrow(ctx: CanvasRenderingContext2D, p0: POINT, p1: POINT, headLength?: number): void;
+    findSourceAndTarget(path: PATH): [Component?, Component?];
+    render(ctx: CanvasRenderingContext2D): void;
+    get eventMap(): {
+        'model-layer': {
+            '(self)': {
+                change: (after: any, before: any, hint: any) => void;
+            };
+        };
+    };
+    onchangeModelLayer(after: any, before: any, hint: any): void;
+    onchangeData(after: Properties, before: Properties): void;
+}

package/dist/src/layers/movement-layer.js

@@ -0,0 +1,109 @@
+import { Component, Layer } from '@hatiolab/things-scene';
+const MOVEMENT_STYLES = {
+    ON /* OUTGOING_NORMAL_TRANSPORT*/: ['#00B05033', '#00B050'],
+    OD /* OUTGOING_DELAYED_TRANSPORT*/: ['#FF000033', '#FF0000'],
+    OA /* OUTGOING_ALTER_TRANSPORT*/: ['#76717133', '#767171'],
+    IN /* INCOMING_NORMAL_TRANSPORT*/: ['#00DE6433', '#00DE64'],
+    ID /* INCOMING_DELAYED_TRANSPORT*/: ['#FF797933', '#FF7979'],
+    IA /* INCOMING_ALTER_TRANSPORT*/: ['#B6B2B233', '#B6B2B2']
+};
+const EMPTY_MOVEMENT = [];
+const degreesInRadians225 = (195 * Math.PI) / 180;
+const degreesInRadians135 = (165 * Math.PI) / 180;
+export default class MovementLayer extends Layer {
+    get capturable() {
+        return false;
+    }
+    drawArrow(ctx, p0, p1, headLength = 10) {
+        // constants (could be declared as globals outside this function)
+        // calc the angle of the line
+        var dx = p1.x - p0.x;
+        var dy = p1.y - p0.y;
+        var angle = Math.atan2(dy, dx);
+        // calc arrowhead points
+        var x225 = p1.x + headLength * Math.cos(angle + degreesInRadians225);
+        var y225 = p1.y + headLength * Math.sin(angle + degreesInRadians225);
+        var x135 = p1.x + headLength * Math.cos(angle + degreesInRadians135);
+        var y135 = p1.y + headLength * Math.sin(angle + degreesInRadians135);
+        // draw line plus arrowhead
+        ctx.beginPath();
+        // draw the line from p0 to p1
+        ctx.moveTo(p0.x, p0.y);
+        ctx.lineTo(p1.x, p1.y);
+        ctx.stroke();
+        ctx.beginPath();
+        // draw partial arrowhead at 225 degrees
+        ctx.moveTo(p1.x, p1.y);
+        ctx.lineTo(x225, y225);
+        // draw partial arrowhead at 135 degrees
+        ctx.lineTo(x135, y135);
+        ctx.lineTo(p1.x, p1.y);
+        // stroke the line and arrowhead
+        // ctx.ellipse(p0.x, p0.y, 2, 2, 0, 0, 2 * Math.PI)
+        ctx.setLineDash([]);
+        ctx.stroke();
+        ctx.fill();
+    }
+    findSourceAndTarget(path) {
+        const root = this.root;
+        var src, dest;
+        for (const name of [path.SourceUnitName, path.SourceZoneName, path.SourceMachineName]) {
+            src = root.findById(name);
+            if (src) {
+                break;
+            }
+        }
+        for (const name of [path.DestUnitName, path.DestZoneName, path.DestMachineName]) {
+            dest = root.findById(name);
+            if (dest) {
+                break;
+            }
+        }
+        return [src, dest];
+    }
+    render(ctx) {
+        const root = this.root;
+        const movement = (this.data instanceof Array && this.data) || [];
+        ctx.save();
+        movement.forEach(path => {
+            const [src, dest] = this.findSourceAndTarget(path);
+            if (!src || !dest) {
+                return;
+            }
+            const [srcCenter, destCenter] = [src.center, dest.center];
+            const [srcPos, destPos] = [
+                src.transcoordS2C(srcCenter.x, srcCenter.y, root),
+                dest.transcoordS2C(destCenter.x, destCenter.y, root)
+            ];
+            ctx.beginPath();
+            ctx.setLineDash(path.PathType == 'Command' ? [5, 5] : []);
+            const gradient = ctx.createLinearGradient(srcPos.x, srcPos.y, destPos.x, destPos.y);
+            (MOVEMENT_STYLES[path.LineType] || []).forEach((color, idx) => gradient.addColorStop(idx, color));
+            ctx.strokeStyle = gradient;
+            ctx.fillStyle = gradient;
+            ctx.lineWidth = 1.5;
+            this.drawArrow(ctx, srcPos, destPos);
+            ctx.stroke();
+        });
+        ctx.restore();
+    }
+    get eventMap() {
+        return {
+            'model-layer': {
+                '(self)': {
+                    change: this.onchangeModelLayer
+                }
+            }
+        };
+    }
+    onchangeModelLayer(after, before, hint) {
+        if (after.scale || after.translate) {
+            this.invalidate();
+        }
+    }
+    onchangeData(after, before) {
+        this.invalidate();
+    }
+}
+Component.register('movement-layer', MovementLayer);
+//# sourceMappingURL=movement-layer.js.map

package/dist/src/layers/movement-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"movement-layer.js","sourceRoot":"","sources":["../../../src/layers/movement-layer.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Layer, POINT, Properties } from '@hatiolab/things-scene'\n\nconst MOVEMENT_STYLES = {\n  ON /* OUTGOING_NORMAL_TRANSPORT*/: ['#00B05033', '#00B050'],\n  OD /* OUTGOING_DELAYED_TRANSPORT*/: ['#FF000033', '#FF0000'],\n  OA /* OUTGOING_ALTER_TRANSPORT*/: ['#76717133', '#767171'],\n  IN /* INCOMING_NORMAL_TRANSPORT*/: ['#00DE6433', '#00DE64'],\n  ID /* INCOMING_DELAYED_TRANSPORT*/: ['#FF797933', '#FF7979'],\n  IA /* INCOMING_ALTER_TRANSPORT*/: ['#B6B2B233', '#B6B2B2']\n}\n\nexport type PATH = {\n  SourceMachineName: string\n  SourceZoneName: string\n  SourceUnitName: string\n  DestMachineName: string\n  DestZoneName: string\n  DestUnitName: string\n  PathType: 'Command' | 'Job'\n  LineType: 'ON' | 'OD' | 'OA' | 'IN' | 'ID' | 'IA'\n}\n\nexport type MOVEMENT = PATH[]\n\nconst EMPTY_MOVEMENT: MOVEMENT = []\n\nconst degreesInRadians225 = (195 * Math.PI) / 180\nconst degreesInRadians135 = (165 * Math.PI) / 180\n\nexport default class MovementLayer extends Layer {\n  get capturable() {\n    return false\n  }\n\n  drawArrow(ctx: CanvasRenderingContext2D, p0: POINT, p1: POINT, headLength: number = 10) {\n    // constants (could be declared as globals outside this function)\n    // calc the angle of the line\n    var dx = p1.x - p0.x\n    var dy = p1.y - p0.y\n    var angle = Math.atan2(dy, dx)\n\n    // calc arrowhead points\n    var x225 = p1.x + headLength * Math.cos(angle + degreesInRadians225)\n    var y225 = p1.y + headLength * Math.sin(angle + degreesInRadians225)\n    var x135 = p1.x + headLength * Math.cos(angle + degreesInRadians135)\n    var y135 = p1.y + headLength * Math.sin(angle + degreesInRadians135)\n\n    // draw line plus arrowhead\n    ctx.beginPath()\n\n    // draw the line from p0 to p1\n    ctx.moveTo(p0.x, p0.y)\n    ctx.lineTo(p1.x, p1.y)\n\n    ctx.stroke()\n\n    ctx.beginPath()\n\n    // draw partial arrowhead at 225 degrees\n    ctx.moveTo(p1.x, p1.y)\n    ctx.lineTo(x225, y225)\n    // draw partial arrowhead at 135 degrees\n    ctx.lineTo(x135, y135)\n    ctx.lineTo(p1.x, p1.y)\n    // stroke the line and arrowhead\n\n    // ctx.ellipse(p0.x, p0.y, 2, 2, 0, 0, 2 * Math.PI)\n\n    ctx.setLineDash([])\n\n    ctx.stroke()\n    ctx.fill()\n  }\n\n  findSourceAndTarget(path: PATH): [Component?, Component?] {\n    const root = this.root\n    var src, dest\n\n    for (const name of [path.SourceUnitName, path.SourceZoneName, path.SourceMachineName]) {\n      src = root.findById(name)\n      if (src) {\n        break\n      }\n    }\n\n    for (const name of [path.DestUnitName, path.DestZoneName, path.DestMachineName]) {\n      dest = root.findById(name)\n      if (dest) {\n        break\n      }\n    }\n\n    return [src, dest]\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    const root = this.root\n    const movement = (this.data instanceof Array && (this.data as MOVEMENT)) || []\n\n    ctx.save()\n\n    movement.forEach(path => {\n      const [src, dest] = this.findSourceAndTarget(path)\n      if (!src || !dest) {\n        return\n      }\n\n      const [srcCenter, destCenter] = [src.center, dest.center]\n      const [srcPos, destPos] = [\n        src.transcoordS2C(srcCenter.x, srcCenter.y, root),\n        dest.transcoordS2C(destCenter.x, destCenter.y, root)\n      ]\n\n      ctx.beginPath()\n\n      ctx.setLineDash(path.PathType == 'Command' ? [5, 5] : [])\n\n      const gradient = ctx.createLinearGradient(srcPos.x, srcPos.y, destPos.x, destPos.y)\n      ;(MOVEMENT_STYLES[path.LineType] || []).forEach((color, idx) => gradient.addColorStop(idx, color))\n\n      ctx.strokeStyle = gradient\n      ctx.fillStyle = gradient\n      ctx.lineWidth = 1.5\n\n      this.drawArrow(ctx, srcPos, destPos)\n\n      ctx.stroke()\n    })\n\n    ctx.restore()\n  }\n\n  get eventMap() {\n    return {\n      'model-layer': {\n        '(self)': {\n          change: this.onchangeModelLayer\n        }\n      }\n    }\n  }\n\n  onchangeModelLayer(after: any, before: any, hint: any) {\n    if (after.scale || after.translate) {\n      this.invalidate()\n    }\n  }\n\n  onchangeData(after: Properties, before: Properties): void {\n    this.invalidate()\n  }\n}\n\nComponent.register('movement-layer', MovementLayer)\n"]}

package/dist/src/layers/ox-mini-map.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/layers/ox-mini-map.js

@@ -0,0 +1,189 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let OxminimapComponent = class OxminimapComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.target = null;
+        this.scene = null;
+        this.isDragging = false;
+        this.startX = 0;
+        this.startY = 0;
+        this.initialScrollLeft = 0;
+        this.initialScrollTop = 0;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('resize', this.handleResize.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('resize', this.handleResize.bind(this));
+    }
+    firstUpdated(changes) {
+        super.firstUpdated(changes);
+        this.updateTarget();
+        this.checkVisibilityX();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('target')) {
+            this.updateTarget();
+        }
+    }
+    handleResize() {
+        this.updateTarget();
+        this.checkVisibilityX();
+    }
+    updateTarget() {
+        var _a, _b;
+        const target = this.target || this.parentElement;
+        if (!target || !this.scene) {
+            return;
+        }
+        const { width, height } = this.scene.model;
+        const { x: scaleX, y: scaleY } = this.scene.scale;
+        const targetRatio = (width * scaleX) / (height * scaleY);
+        const thisRatio = this.offsetHeight / this.offsetWidth;
+        const scale = targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth;
+        const minimapHeight = width * scaleX * scale;
+        const minimapWidth = height * scaleY * scale;
+        const viewportHeight = target.offsetHeight * scale;
+        const viewportWidth = target.offsetWidth * scale;
+        const minimap = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('minimap');
+        const viewport = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById('viewport');
+        minimap.style.width = `${minimapWidth}px`;
+        minimap.style.height = `${minimapHeight}px`;
+        viewport.style.width = `${viewportWidth}px`;
+        viewport.style.height = `${viewportHeight}px`;
+        const viewportLeft = target.scrollLeft * scale;
+        const viewportTop = target.scrollTop * scale;
+        viewport.style.width = `${viewportWidth}px`;
+        viewport.style.height = `${viewportHeight}px`;
+        viewport.style.left = `${viewportLeft}px`;
+        viewport.style.top = `${viewportTop}px`;
+    }
+    checkVisibilityX() {
+        var _a;
+        const parentElement = this.target || this.parentElement;
+        if (!parentElement)
+            return;
+        const parentRect = parentElement.getBoundingClientRect();
+        const minimap = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('minimap');
+        if (parentRect.width >= minimap.offsetWidth && parentRect.height >= minimap.offsetHeight) {
+            this.style.display = 'block';
+        }
+        else {
+            this.style.display = 'none';
+        }
+    }
+    handleMouseDown(event) {
+        var _a;
+        const target = this.target || this.parentElement;
+        if (!target) {
+            return;
+        }
+        const minimapViewport = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('viewport');
+        this.startX = event.clientX;
+        this.startY = event.clientY;
+        this.initialScrollLeft = target.scrollLeft || 0;
+        this.initialScrollTop = target.scrollTop || 0;
+        this.isDragging = true;
+        minimapViewport.classList.add('dragging');
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    handleMouseMove(event) {
+        var _a;
+        if (!this.isDragging)
+            return;
+        const deltaX = event.clientX - this.startX;
+        const deltaY = event.clientY - this.startY;
+        const target = this.target || this.parentElement;
+        if (!target || !this.scene) {
+            return;
+        }
+        const { width, height } = this.scene.model;
+        var { x: scale, y } = this.scene.scale;
+        const targetRatio = height / width;
+        const thisRatio = this.offsetHeight / this.offsetWidth;
+        // const scale = targetRatio > thisRatio ? this.offsetHeight / height : this.offsetWidth / width
+        const targetRect = target.getBoundingClientRect();
+        const viewportWidth = (targetRect.width * target.clientWidth) / width;
+        const viewportHeight = (targetRect.height * target.clientHeight) / height;
+        const scrollX = deltaX / scale;
+        const scrollY = deltaY / scale;
+        target.scrollTo(this.initialScrollLeft + scrollX, this.initialScrollTop + scrollY);
+        const minimapViewport = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('viewport');
+        minimapViewport.style.left = `${Math.max(0, Math.min(event.clientX - viewportWidth / 2, target.clientWidth - viewportWidth))}px`;
+        minimapViewport.style.top = `${Math.max(0, Math.min(event.clientY - viewportHeight / 2, target.clientHeight - viewportHeight))}px`;
+        this.updateTarget();
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    handleMouseUp(event) {
+        var _a;
+        const minimapViewport = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('minimap');
+        this.isDragging = false;
+        minimapViewport.classList.remove('dragging');
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    render() {
+        return html `
+      <div
+        id="minimap"
+        @dragstart=${(e) => e.stopPropagation()}
+        @drag=${(e) => e.stopPropagation()}
+        @dragend=${(e) => e.stopPropagation()}
+        @mousedown=${(e) => e.stopPropagation()}
+        @mousemove=${(e) => e.stopPropagation()}
+        @mouseup=${(e) => e.stopPropagation()}
+      >
+        <div
+          id="viewport"
+          @mousedown=${this.handleMouseDown}
+          @mousemove=${this.handleMouseMove}
+          @mouseup=${this.handleMouseUp}
+        ></div>
+      </div>
+    `;
+    }
+};
+OxminimapComponent.styles = css `
+    :host {
+      display: flex;
+      position: relative;
+      background-color: gray;
+    }
+
+    #minimap {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      box-sizing: border-box;
+
+      background-color: white;
+      overflow: hidden;
+    }
+
+    #viewport {
+      position: absolute;
+      border: 1px dashed blue;
+      box-sizing: border-box;
+      pointer-events: none;
+      background-color: white;
+      pointer-events: auto;
+      cursor: move;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxminimapComponent.prototype, "target", void 0);
+__decorate([
+    property({ type: Object })
+], OxminimapComponent.prototype, "scene", void 0);
+OxminimapComponent = __decorate([
+    customElement('ox-mini-map')
+], OxminimapComponent);
+//# sourceMappingURL=ox-mini-map.js.map

package/dist/src/layers/ox-mini-map.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-mini-map.js","sourceRoot":"","sources":["../../../src/layers/ox-mini-map.ts"],"names":[],"mappings":"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","sourcesContent":["import { Scene } from '@hatiolab/things-scene'\nimport { html, css, LitElement, PropertyValueMap } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-mini-map')\nclass OxminimapComponent extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      position: relative;\n      background-color: gray;\n    }\n\n    #minimap {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      box-sizing: border-box;\n\n      background-color: white;\n      overflow: hidden;\n    }\n\n    #viewport {\n      position: absolute;\n      border: 1px dashed blue;\n      box-sizing: border-box;\n      pointer-events: none;\n      background-color: white;\n      pointer-events: auto;\n      cursor: move;\n    }\n  `\n\n  @property({ type: Object }) target: HTMLElement | null = null\n  @property({ type: Object }) scene: Scene | null = null\n\n  private isDragging = false\n  private startX = 0\n  private startY = 0\n  private initialScrollLeft = 0\n  private initialScrollTop = 0\n\n  connectedCallback() {\n    super.connectedCallback()\n    window.addEventListener('resize', this.handleResize.bind(this))\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    window.removeEventListener('resize', this.handleResize.bind(this))\n  }\n\n  firstUpdated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n    super.firstUpdated(changes)\n\n    this.updateTarget()\n    this.checkVisibilityX()\n  }\n\n  updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('target')) {\n      this.updateTarget()\n    }\n  }\n\n  handleResize() {\n    this.updateTarget()\n    this.checkVisibilityX()\n  }\n\n  updateTarget() {\n    const target = this.target || this.parentElement\n    if (!target || !this.scene) {\n      return\n    }\n\n    const { width, height } = this.scene.model\n    const { x: scaleX, y: scaleY } = this.scene.scale\n\n    const targetRatio = (width * scaleX) / (height * scaleY)\n    const thisRatio = this.offsetHeight / this.offsetWidth\n\n    const scale =\n      targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth\n\n    const minimapHeight = width * scaleX * scale\n    const minimapWidth = height * scaleY * scale\n\n    const viewportHeight = target.offsetHeight * scale\n    const viewportWidth = target.offsetWidth * scale\n\n    const minimap = this.shadowRoot?.getElementById('minimap') as HTMLElement\n    const viewport = this.shadowRoot?.getElementById('viewport') as HTMLElement\n\n    minimap.style.width = `${minimapWidth}px`\n    minimap.style.height = `${minimapHeight}px`\n\n    viewport.style.width = `${viewportWidth}px`\n    viewport.style.height = `${viewportHeight}px`\n\n    const viewportLeft = target.scrollLeft * scale\n    const viewportTop = target.scrollTop * scale\n\n    viewport.style.width = `${viewportWidth}px`\n    viewport.style.height = `${viewportHeight}px`\n    viewport.style.left = `${viewportLeft}px`\n    viewport.style.top = `${viewportTop}px`\n  }\n\n  checkVisibilityX() {\n    const parentElement = this.target || this.parentElement\n    if (!parentElement) return\n\n    const parentRect = parentElement.getBoundingClientRect()\n    const minimap = this.shadowRoot?.getElementById('minimap') as HTMLElement\n    if (parentRect.width >= minimap.offsetWidth && parentRect.height >= minimap.offsetHeight) {\n      this.style.display = 'block'\n    } else {\n      this.style.display = 'none'\n    }\n  }\n\n  handleMouseDown(event: MouseEvent) {\n    const target = this.target || this.parentElement\n\n    if (!target) {\n      return\n    }\n\n    const minimapViewport = this.shadowRoot?.getElementById('viewport') as HTMLElement\n    this.startX = event.clientX\n    this.startY = event.clientY\n    this.initialScrollLeft = target.scrollLeft || 0\n    this.initialScrollTop = target.scrollTop || 0\n    this.isDragging = true\n    minimapViewport.classList.add('dragging')\n    event.preventDefault()\n    event.stopPropagation()\n  }\n\n  handleMouseMove(event: MouseEvent) {\n    if (!this.isDragging) return\n    const deltaX = event.clientX - this.startX\n    const deltaY = event.clientY - this.startY\n\n    const target = this.target || this.parentElement\n\n    if (!target || !this.scene) {\n      return\n    }\n\n    const { width, height } = this.scene.model\n    var { x: scale, y } = this.scene.scale\n\n    const targetRatio = height / width\n    const thisRatio = this.offsetHeight / this.offsetWidth\n\n    // const scale = targetRatio > thisRatio ? this.offsetHeight / height : this.offsetWidth / width\n\n    const targetRect = target.getBoundingClientRect()\n    const viewportWidth = (targetRect.width * target.clientWidth) / width\n    const viewportHeight = (targetRect.height * target.clientHeight) / height\n    const scrollX = deltaX / scale\n    const scrollY = deltaY / scale\n    target.scrollTo(this.initialScrollLeft + scrollX, this.initialScrollTop + scrollY)\n    const minimapViewport = this.shadowRoot?.getElementById('viewport') as HTMLElement\n    minimapViewport.style.left = `${Math.max(\n      0,\n      Math.min(event.clientX - viewportWidth / 2, target.clientWidth - viewportWidth)\n    )}px`\n    minimapViewport.style.top = `${Math.max(\n      0,\n      Math.min(event.clientY - viewportHeight / 2, target.clientHeight - viewportHeight)\n    )}px`\n\n    this.updateTarget()\n    event.preventDefault()\n    event.stopPropagation()\n  }\n\n  handleMouseUp(event: MouseEvent) {\n    const minimapViewport = this.shadowRoot?.getElementById('minimap') as HTMLElement\n    this.isDragging = false\n    minimapViewport.classList.remove('dragging')\n    event.preventDefault()\n    event.stopPropagation()\n  }\n\n  render() {\n    return html`\n      <div\n        id=\"minimap\"\n        @dragstart=${(e: Event) => e.stopPropagation()}\n        @drag=${(e: Event) => e.stopPropagation()}\n        @dragend=${(e: Event) => e.stopPropagation()}\n        @mousedown=${(e: Event) => e.stopPropagation()}\n        @mousemove=${(e: Event) => e.stopPropagation()}\n        @mouseup=${(e: Event) => e.stopPropagation()}\n      >\n        <div\n          id=\"viewport\"\n          @mousedown=${this.handleMouseDown}\n          @mousemove=${this.handleMouseMove}\n          @mouseup=${this.handleMouseUp}\n        ></div>\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/layers/scroll-layer.d.ts

@@ -0,0 +1,24 @@
+import { Layer, Properties } from '@hatiolab/things-scene';
+export default class ScrollLayer extends Layer {
+    get capturable(): boolean;
+    private _scale?;
+    private _translate?;
+    private lastPosition?;
+    private vscroller;
+    private hscroller;
+    render(ctx: CanvasRenderingContext2D): void;
+    contains(x: number, y: number): boolean;
+    get eventMap(): {
+        '(root)': {
+            'model-layer': {
+                change: (after: any, before: any, hint: any) => void;
+            };
+        };
+    };
+    onchange(after: Properties): void;
+    ondragstart(e: DragEvent, hint: any): void;
+    ondragmove(e: DragEvent, hint: any): void;
+    ondragend(): void;
+    calcScrollerBounds(): void;
+    onchangeModelLayer(after: any, before: any, hint: any): void;
+}