@fmsim/machine 0.0.49

package/dist/agv-line.js

@@ -0,0 +1,48 @@
+import { Component } from '@hatiolab/things-scene';
+import MCSTransport from './mcs-transport';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [...MCSTransport.properties]
+};
+export default class AGVLine extends MCSTransport {
+    static get nature() {
+        return NATURE;
+    }
+    containable(component) {
+        return ['AGV'].includes(component.state.type);
+    }
+    get auxColor() {
+        return '#333';
+    }
+    render(context) {
+        const { left, top, width, height } = this.bounds;
+        context.beginPath();
+        context.translate(left, top);
+        context.fillStyle = this.statusColor;
+        context.strokeStyle = this.auxColor;
+        context.setLineDash([3]);
+        context.fillRect(0, 0, width, height);
+        if (width > height) {
+            context.moveTo(0, 0);
+            context.lineTo(width, 0);
+            // context.moveTo(0, height / 2)
+            // context.lineTo(width, height / 2)
+            context.moveTo(0, height);
+            context.lineTo(width, height);
+        }
+        else {
+            context.moveTo(0, 0);
+            context.lineTo(0, height);
+            // context.moveTo(width / 2, 0)
+            // context.lineTo(width / 2, height)
+            context.moveTo(width, 0);
+            context.lineTo(width, height);
+        }
+        context.stroke();
+        context.translate(-left, -top);
+    }
+}
+Component.register('AGVLine', AGVLine);
+//# sourceMappingURL=agv-line.js.map

package/dist/agv-line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"agv-line.js","sourceRoot":"","sources":["../src/agv-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,MAAM,wBAAwB,CAAA;AACnE,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAE1C,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC;CACzC,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,YAAY;IAC/C,MAAM,KAAK,MAAM;QACf,OAAO,MAAM,CAAA;IACf,CAAC;IAED,WAAW,CAAC,SAAoB;QAC9B,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;IAC/C,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,MAAM,CAAA;IACf,CAAC;IAED,MAAM,CAAC,OAAiC;QACtC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAEhD,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;QAE5B,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,WAAY,CAAA;QACrC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,QAAS,CAAA;QACpC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAExB,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;QAErC,IAAI,KAAK,GAAG,MAAM,EAAE;YAClB,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;YACpB,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;YACxB,gCAAgC;YAChC,oCAAoC;YACpC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA;YACzB,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;SAC9B;aAAM;YACL,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;YACpB,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA;YACzB,+BAA+B;YAC/B,oCAAoC;YACpC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;YACxB,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;SAC9B;QAED,OAAO,CAAC,MAAM,EAAE,CAAA;QAEhB,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAA;IAChC,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA","sourcesContent":["import { Component, ComponentNature } from '@hatiolab/things-scene'\nimport MCSTransport from './mcs-transport'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [...MCSTransport.properties]\n}\n\nexport default class AGVLine extends MCSTransport {\n  static get nature() {\n    return NATURE\n  }\n\n  containable(component: Component) {\n    return ['AGV'].includes(component.state.type)\n  }\n\n  get auxColor() {\n    return '#333'\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n\n    context.beginPath()\n\n    context.translate(left, top)\n\n    context.fillStyle = this.statusColor!\n    context.strokeStyle = this.auxColor!\n    context.setLineDash([3])\n\n    context.fillRect(0, 0, width, height)\n\n    if (width > height) {\n      context.moveTo(0, 0)\n      context.lineTo(width, 0)\n      // context.moveTo(0, height / 2)\n      // context.lineTo(width, height / 2)\n      context.moveTo(0, height)\n      context.lineTo(width, height)\n    } else {\n      context.moveTo(0, 0)\n      context.lineTo(0, height)\n      // context.moveTo(width / 2, 0)\n      // context.lineTo(width / 2, height)\n      context.moveTo(width, 0)\n      context.lineTo(width, height)\n    }\n\n    context.stroke()\n\n    context.translate(-left, -top)\n  }\n}\n\nComponent.register('AGVLine', AGVLine)\n"]}

package/dist/agv.js

@@ -0,0 +1,43 @@
+import { Component } from '@hatiolab/things-scene';
+import MCSVehicle from './mcs-vehicle';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [...MCSVehicle.properties]
+};
+const GAP = 2;
+export default class AGV extends MCSVehicle {
+    static get nature() {
+        return NATURE;
+    }
+    get auxColor() {
+        return 'black';
+    }
+    render(ctx) {
+        var { left, top, width, height } = this.bounds;
+        ctx.translate(left, top);
+        ctx.beginPath();
+        ctx.strokeStyle = this.auxColor;
+        ctx.fillStyle = this.statusColor;
+        ctx.lineWidth = 1;
+        ctx.lineCap = 'round';
+        ctx.setLineDash([]);
+        const radius = Math.round(Math.min(width, height) * 0.1);
+        ctx.roundRect(1, 0, width - 2, height, radius);
+        ctx.roundRect(GAP + 1, GAP, width - (GAP + 1) * 2, height - GAP * 2, radius - 1);
+        ctx.fill();
+        ctx.stroke();
+        ctx.beginPath();
+        // draw wheel metapore
+        ctx.strokeStyle = 'black';
+        ctx.moveTo(0, (height * 1) / 3);
+        ctx.lineTo(0, (height * 2) / 3);
+        ctx.moveTo(width, (height * 1) / 3);
+        ctx.lineTo(width, (height * 2) / 3);
+        ctx.stroke();
+        ctx.translate(-left, -top);
+    }
+}
+Component.register('AGV', AGV);
+//# sourceMappingURL=agv.js.map

package/dist/agv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"agv.js","sourceRoot":"","sources":["../src/agv.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,wBAAwB,CAAA;AAC/E,OAAO,UAAU,MAAM,eAAe,CAAA;AAEtC,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,CAAC,GAAG,UAAU,CAAC,UAAU,CAAC;CACvC,CAAA;AAED,MAAM,GAAG,GAAG,CAAC,CAAA;AACb,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,UAAU;IACzC,MAAM,KAAK,MAAM;QACf,OAAO,MAAM,CAAA;IACf,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,OAAO,CAAA;IAChB,CAAC;IAED,MAAM,CAAC,GAA6B;QAClC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAE9C,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;QACxB,GAAG,CAAC,SAAS,EAAE,CAAA;QAEf,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAA;QAC/B,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,WAAY,CAAA;QACjC,GAAG,CAAC,SAAS,GAAG,CAAC,CAAA;QACjB,GAAG,CAAC,OAAO,GAAG,OAAO,CAAA;QACrB,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;QAEnB,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,GAAG,CAAC,CAAA;QACxD,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;QAC9C,GAAG,CAAC,SAAS,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,GAAG,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,CAAA;QAEhF,GAAG,CAAC,IAAI,EAAE,CAAA;QACV,GAAG,CAAC,MAAM,EAAE,CAAA;QAEZ,GAAG,CAAC,SAAS,EAAE,CAAA;QAEf,sBAAsB;QACtB,GAAG,CAAC,WAAW,GAAG,OAAO,CAAA;QAEzB,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;QAC/B,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;QAC/B,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;QACnC,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;QAEnC,GAAG,CAAC,MAAM,EAAE,CAAA;QAEZ,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAA;IAC5B,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA","sourcesContent":["import { Component, ComponentNature, Properties } from '@hatiolab/things-scene'\nimport MCSVehicle from './mcs-vehicle'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [...MCSVehicle.properties]\n}\n\nconst GAP = 2\nexport default class AGV extends MCSVehicle {\n  static get nature() {\n    return NATURE\n  }\n\n  get auxColor() {\n    return 'black'\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { left, top, width, height } = this.bounds\n\n    ctx.translate(left, top)\n    ctx.beginPath()\n\n    ctx.strokeStyle = this.auxColor\n    ctx.fillStyle = this.statusColor!\n    ctx.lineWidth = 1\n    ctx.lineCap = 'round'\n    ctx.setLineDash([])\n\n    const radius = Math.round(Math.min(width, height) * 0.1)\n    ctx.roundRect(1, 0, width - 2, height, radius)\n    ctx.roundRect(GAP + 1, GAP, width - (GAP + 1) * 2, height - GAP * 2, radius - 1)\n\n    ctx.fill()\n    ctx.stroke()\n\n    ctx.beginPath()\n\n    // draw wheel metapore\n    ctx.strokeStyle = 'black'\n\n    ctx.moveTo(0, (height * 1) / 3)\n    ctx.lineTo(0, (height * 2) / 3)\n    ctx.moveTo(width, (height * 1) / 3)\n    ctx.lineTo(width, (height * 2) / 3)\n\n    ctx.stroke()\n\n    ctx.translate(-left, -top)\n  }\n}\n\nComponent.register('AGV', AGV)\n"]}

package/dist/buffer.js

@@ -0,0 +1,40 @@
+import { Component } from '@hatiolab/things-scene';
+import MCSMachine from './mcs-machine';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [...MCSMachine.properties]
+};
+export default class Buffer extends MCSMachine {
+    static get nature() {
+        return NATURE;
+    }
+    containable(component) {
+        return super.containable(component) || ['Port'].includes(component.state.type);
+    }
+    render(ctx) {
+        var { lineWidth } = this.state;
+        var { left, top, width, height } = this.bounds;
+        const offset = Math.round(Math.min(width, height) * 0.2);
+        ctx.beginPath();
+        ctx.translate(left, top);
+        ctx.strokeStyle = this.auxColor;
+        ctx.fillStyle = this.statusColor;
+        ctx.lineWidth = lineWidth || 1;
+        ctx.lineCap = 'round';
+        ctx.setLineDash([]);
+        ctx.moveTo(offset, 0);
+        ctx.lineTo(width - offset, 0);
+        ctx.lineTo(width, height / 2);
+        ctx.lineTo(width - offset, height);
+        ctx.lineTo(offset, height);
+        ctx.lineTo(0, height / 2);
+        ctx.lineTo(offset, 0);
+        ctx.translate(-left, -top);
+        ctx.fill();
+        ctx.stroke();
+    }
+}
+Component.register('Buffer', Buffer);
+//# sourceMappingURL=buffer.js.map

package/dist/buffer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buffer.js","sourceRoot":"","sources":["../src/buffer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,MAAM,wBAAwB,CAAA;AACnE,OAAO,UAAU,MAAM,eAAe,CAAA;AAEtC,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,CAAC,GAAG,UAAU,CAAC,UAAU,CAAC;CACvC,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,UAAU;IAC5C,MAAM,KAAK,MAAM;QACf,OAAO,MAAM,CAAA;IACf,CAAC;IAED,WAAW,CAAC,SAAoB;QAC9B,OAAO,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;IAChF,CAAC;IAED,MAAM,CAAC,GAAG;QACR,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAC9B,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAE9C,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,GAAG,CAAC,CAAA;QAExD,GAAG,CAAC,SAAS,EAAE,CAAA;QACf,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;QAExB,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAA;QAC/B,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,WAAY,CAAA;QACjC,GAAG,CAAC,SAAS,GAAG,SAAS,IAAI,CAAC,CAAA;QAC9B,GAAG,CAAC,OAAO,GAAG,OAAO,CAAA;QACrB,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;QAEnB,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;QACrB,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,MAAM,EAAE,CAAC,CAAC,CAAA;QAC7B,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,CAAA;QAC7B,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,MAAM,EAAE,MAAM,CAAC,CAAA;QAClC,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;QAC1B,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,CAAA;QACzB,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;QAErB,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAA;QAE1B,GAAG,CAAC,IAAI,EAAE,CAAA;QACV,GAAG,CAAC,MAAM,EAAE,CAAA;IACd,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA","sourcesContent":["import { Component, ComponentNature } from '@hatiolab/things-scene'\nimport MCSMachine from './mcs-machine'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [...MCSMachine.properties]\n}\n\nexport default class Buffer extends MCSMachine {\n  static get nature() {\n    return NATURE\n  }\n\n  containable(component: Component) {\n    return super.containable(component) || ['Port'].includes(component.state.type)\n  }\n\n  render(ctx) {\n    var { lineWidth } = this.state\n    var { left, top, width, height } = this.bounds\n\n    const offset = Math.round(Math.min(width, height) * 0.2)\n\n    ctx.beginPath()\n    ctx.translate(left, top)\n\n    ctx.strokeStyle = this.auxColor\n    ctx.fillStyle = this.statusColor!\n    ctx.lineWidth = lineWidth || 1\n    ctx.lineCap = 'round'\n    ctx.setLineDash([])\n\n    ctx.moveTo(offset, 0)\n    ctx.lineTo(width - offset, 0)\n    ctx.lineTo(width, height / 2)\n    ctx.lineTo(width - offset, height)\n    ctx.lineTo(offset, height)\n    ctx.lineTo(0, height / 2)\n    ctx.lineTo(offset, 0)\n\n    ctx.translate(-left, -top)\n\n    ctx.fill()\n    ctx.stroke()\n  }\n}\n\nComponent.register('Buffer', Buffer)\n"]}

package/dist/conveyor-join.js

@@ -0,0 +1,169 @@
+import { Component } from '@hatiolab/things-scene';
+import MCSTransport from './mcs-transport';
+import { ConveyorMixin } from './features/conveyor-mixin';
+import { normalizeAngle } from './utils/normalize-angle';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        ...MCSTransport.properties,
+        {
+            type: 'angle',
+            label: 'start-angle',
+            name: 'startAngle'
+        },
+        {
+            type: 'angle',
+            label: 'end-angle',
+            name: 'endAngle'
+        },
+        {
+            type: 'number',
+            label: 'ratio',
+            name: 'ratio'
+        },
+        {
+            type: 'number',
+            label: 'roll-width',
+            name: 'rollWidth'
+        }
+    ]
+};
+var controlHandler = {
+    ondragmove: function (point, index, component) {
+        var { cx, cy, rx, ry, startAngle, endAngle } = component.model;
+        var { x, y } = component.transcoordP2S(point.x, point.y);
+        const angle = (startAngle + endAngle) / 2;
+        /* 원점으로부터 최대 거리 */
+        const dx = Math.abs(rx * Math.sin(angle));
+        const dy = Math.abs(ry * Math.cos(angle));
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        /* 원점으로부터 현재 컨트롤 위치까지의 거리 */
+        const px = Math.abs(cx - x);
+        const py = Math.abs(cy - y);
+        const pdistance = Math.sqrt(px * px + py * py);
+        var ratio = (pdistance / distance) * 100;
+        ratio = ratio >= 100 || ratio <= -100 ? 100 : Math.abs(ratio);
+        component.set({ ratio });
+    }
+};
+var antiClockWiseControlHandler = {
+    ondragmove: function (point, index, component) {
+        var { cx, cy } = component.model;
+        var transcoorded = component.transcoordP2S(point.x, point.y);
+        var theta = Math.atan2(-(transcoorded.y - cy), transcoorded.x - cx);
+        if (theta > 0 && theta <= Math.PI / 2)
+            theta = Math.PI / 2;
+        if (theta < 0 && theta >= -Math.PI / 2)
+            theta = -Math.PI / 2;
+        const startAngle = (-theta + Math.PI / 2 - Math.PI * 2) % (Math.PI * 2);
+        component.set({ startAngle });
+    }
+};
+var clockwiseControlHandler = {
+    ondragmove: function (point, index, component) {
+        var { cx, cy } = component.model;
+        var transcoorded = component.transcoordP2S(point.x, point.y);
+        var theta = Math.atan2(-(transcoorded.y - cy), transcoorded.x - cx);
+        if (theta > 0)
+            if (theta >= Math.PI / 2)
+                theta = Math.PI / 2;
+        if (theta < 0)
+            if (theta <= -Math.PI / 2)
+                theta = -Math.PI / 2;
+        var endAngle = -theta + Math.PI / 2;
+        component.set({ endAngle });
+    }
+};
+export default class ConveyorJoin extends ConveyorMixin(MCSTransport) {
+    get nature() {
+        return NATURE;
+    }
+    containable(component) {
+        return ['Shuttle', 'Port'].includes(component.state.type);
+    }
+    contains(x, y) {
+        var { cx, cy, rx, ry, ratio, startAngle, endAngle } = this.state;
+        rx = Math.abs(rx);
+        ry = Math.abs(ry);
+        const normx = (x - cx) / (rx * 2 - 0.5);
+        const normy = (y - cy) / (ry * 2 - 0.5);
+        const ratiox = (x - cx) / ((rx / 100) * ratio * 2 - 0.5);
+        const ratioy = (y - cy) / ((ry / 100) * ratio * 2 - 0.5);
+        if (normx * normx + normy * normy < 0.25 && ratiox * ratiox + ratioy * ratioy > 0.25) {
+            const angle = normalizeAngle(Math.atan2(-normy, normx) - Math.PI / 2);
+            if (angle >= startAngle && angle <= endAngle) {
+                return true;
+            }
+        }
+        return false;
+    }
+    render(context) {
+        var { ratio = 50, cx, cy, rx, ry, startAngle = 0, endAngle = Math.PI / 2 } = this.state;
+        context.beginPath();
+        startAngle -= Math.PI / 2;
+        endAngle -= Math.PI / 2;
+        /* outer ellipse and inner ellipse */
+        context.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngle, endAngle);
+        context.ellipse(cx, cy, Math.abs((rx / 100) * ratio), Math.abs((ry / 100) * ratio), 0, endAngle, startAngle, true);
+        context.lineTo(rx * Math.cos(startAngle) + cx, ry * Math.sin(startAngle) + cy);
+        this.drawFill(context);
+        this.drawStroke(context);
+    }
+    get path() {
+        var { cx, cy, rx, ry } = this.state;
+        return [
+            {
+                x: cx - rx,
+                y: cy - ry
+            },
+            {
+                x: cx + rx,
+                y: cy - ry
+            },
+            {
+                x: cx + rx,
+                y: cy + ry
+            },
+            {
+                x: cx - rx,
+                y: cy + ry
+            }
+        ];
+    }
+    set path(path) {
+        var left_top = path[0];
+        var right_bottom = path[2];
+        this.set({
+            cx: left_top.x + (right_bottom.x - left_top.x) / 2,
+            cy: left_top.y + (right_bottom.y - left_top.y) / 2,
+            rx: (right_bottom.x - left_top.x) / 2,
+            ry: (right_bottom.y - left_top.y) / 2
+        });
+    }
+    get controls() {
+        var { cx, cy, rx, ry, ratio, startAngle, endAngle } = this.state;
+        var controls = [];
+        controls.push({
+            x: cx + ((rx + (rx * ratio) / 100) / 2) * Math.sin(startAngle),
+            y: cy - ((ry + (ry * ratio) / 100) / 2) * Math.cos(startAngle),
+            handler: antiClockWiseControlHandler
+        });
+        controls.push({
+            x: cx + ((rx + (rx * ratio) / 100) / 2) * Math.sin(endAngle),
+            y: cy - ((ry + (ry * ratio) / 100) / 2) * Math.cos(endAngle),
+            handler: clockwiseControlHandler
+        });
+        const angle = (startAngle + endAngle) / 2;
+        controls.push({
+            x: cx + ((rx * ratio) / 100) * Math.sin(angle),
+            y: cy - ((ry * ratio) / 100) * Math.cos(angle),
+            handler: controlHandler
+        });
+        return controls;
+    }
+}
+Component.memoize(ConveyorJoin.prototype, 'controls', false);
+Component.register('ConveyorJoin', ConveyorJoin);
+//# sourceMappingURL=conveyor-join.js.map

package/dist/conveyor-join.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conveyor-join.js","sourceRoot":"","sources":["../src/conveyor-join.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentNature, Control, POSITION } from '@hatiolab/things-scene'\nimport MCSTransport from './mcs-transport'\nimport { ConveyorMixin } from './features/conveyor-mixin'\nimport { normalizeAngle } from './utils/normalize-angle'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    ...MCSTransport.properties,\n    {\n      type: 'angle',\n      label: 'start-angle',\n      name: 'startAngle'\n    },\n    {\n      type: 'angle',\n      label: 'end-angle',\n      name: 'endAngle'\n    },\n    {\n      type: 'number',\n      label: 'ratio',\n      name: 'ratio'\n    },\n    {\n      type: 'number',\n      label: 'roll-width',\n      name: 'rollWidth'\n    }\n  ]\n}\n\nvar controlHandler = {\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    var { cx, cy, rx, ry, startAngle, endAngle } = component.model\n\n    var { x, y } = component.transcoordP2S(point.x, point.y)\n\n    const angle = (startAngle + endAngle) / 2\n\n    /* 원점으로부터 최대 거리 */\n    const dx = Math.abs(rx * Math.sin(angle))\n    const dy = Math.abs(ry * Math.cos(angle))\n    const distance = Math.sqrt(dx * dx + dy * dy)\n\n    /* 원점으로부터 현재 컨트롤 위치까지의 거리 */\n    const px = Math.abs(cx - x)\n    const py = Math.abs(cy - y)\n    const pdistance = Math.sqrt(px * px + py * py)\n\n    var ratio = (pdistance / distance) * 100\n\n    ratio = ratio >= 100 || ratio <= -100 ? 100 : Math.abs(ratio)\n\n    component.set({ ratio })\n  }\n}\n\nvar antiClockWiseControlHandler = {\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    var { cx, cy } = component.model\n\n    var transcoorded = component.transcoordP2S(point.x, point.y)\n\n    var theta = Math.atan2(-(transcoorded.y - cy), transcoorded.x - cx)\n\n    if (theta > 0 && theta <= Math.PI / 2) theta = Math.PI / 2\n    if (theta < 0 && theta >= -Math.PI / 2) theta = -Math.PI / 2\n\n    const startAngle = (-theta + Math.PI / 2 - Math.PI * 2) % (Math.PI * 2)\n\n    component.set({ startAngle })\n  }\n}\n\nvar clockwiseControlHandler = {\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    var { cx, cy } = component.model\n\n    var transcoorded = component.transcoordP2S(point.x, point.y)\n\n    var theta = Math.atan2(-(transcoorded.y - cy), transcoorded.x - cx)\n\n    if (theta > 0) if (theta >= Math.PI / 2) theta = Math.PI / 2\n    if (theta < 0) if (theta <= -Math.PI / 2) theta = -Math.PI / 2\n\n    var endAngle = -theta + Math.PI / 2\n\n    component.set({ endAngle })\n  }\n}\n\nexport default class ConveyorJoin extends ConveyorMixin(MCSTransport) {\n  get nature() {\n    return NATURE\n  }\n\n  containable(component: Component) {\n    return ['Shuttle', 'Port'].includes(component.state.type)\n  }\n\n  contains(x: number, y: number) {\n    var { cx, cy, rx, ry, ratio, startAngle, endAngle } = this.state\n    rx = Math.abs(rx)\n    ry = Math.abs(ry)\n\n    const normx = (x - cx) / (rx * 2 - 0.5)\n    const normy = (y - cy) / (ry * 2 - 0.5)\n    const ratiox = (x - cx) / ((rx / 100) * ratio * 2 - 0.5)\n    const ratioy = (y - cy) / ((ry / 100) * ratio * 2 - 0.5)\n\n    if (normx * normx + normy * normy < 0.25 && ratiox * ratiox + ratioy * ratioy > 0.25) {\n      const angle = normalizeAngle(Math.atan2(-normy, normx) - Math.PI / 2)\n\n      if (angle >= startAngle && angle <= endAngle) {\n        return true\n      }\n    }\n\n    return false\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { ratio = 50, cx, cy, rx, ry, startAngle = 0, endAngle = Math.PI / 2 } = this.state\n\n    context.beginPath()\n\n    startAngle -= Math.PI / 2\n    endAngle -= Math.PI / 2\n\n    /* outer ellipse and inner ellipse */\n    context.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngle, endAngle)\n    context.ellipse(cx, cy, Math.abs((rx / 100) * ratio), Math.abs((ry / 100) * ratio), 0, endAngle, startAngle, true)\n\n    context.lineTo(rx * Math.cos(startAngle) + cx, ry * Math.sin(startAngle) + cy)\n\n    this.drawFill(context)\n    this.drawStroke(context)\n  }\n\n  get path() {\n    var { cx, cy, rx, ry } = this.state\n\n    return [\n      {\n        x: cx - rx,\n        y: cy - ry\n      },\n      {\n        x: cx + rx,\n        y: cy - ry\n      },\n      {\n        x: cx + rx,\n        y: cy + ry\n      },\n      {\n        x: cx - rx,\n        y: cy + ry\n      }\n    ]\n  }\n\n  set path(path) {\n    var left_top = path[0]\n    var right_bottom = path[2]\n\n    this.set({\n      cx: left_top.x + (right_bottom.x - left_top.x) / 2,\n      cy: left_top.y + (right_bottom.y - left_top.y) / 2,\n      rx: (right_bottom.x - left_top.x) / 2,\n      ry: (right_bottom.y - left_top.y) / 2\n    })\n  }\n\n  get controls(): Control[] {\n    var { cx, cy, rx, ry, ratio, startAngle, endAngle } = this.state\n\n    var controls = [] as Control[]\n\n    controls.push({\n      x: cx + ((rx + (rx * ratio) / 100) / 2) * Math.sin(startAngle),\n      y: cy - ((ry + (ry * ratio) / 100) / 2) * Math.cos(startAngle),\n      handler: antiClockWiseControlHandler\n    })\n\n    controls.push({\n      x: cx + ((rx + (rx * ratio) / 100) / 2) * Math.sin(endAngle),\n      y: cy - ((ry + (ry * ratio) / 100) / 2) * Math.cos(endAngle),\n      handler: clockwiseControlHandler\n    })\n\n    const angle = (startAngle + endAngle) / 2\n    controls.push({\n      x: cx + ((rx * ratio) / 100) * Math.sin(angle),\n      y: cy - ((ry * ratio) / 100) * Math.cos(angle),\n      handler: controlHandler\n    })\n\n    return controls\n  }\n}\n\nComponent.memoize(ConveyorJoin.prototype, 'controls', false)\n\nComponent.register('ConveyorJoin', ConveyorJoin as any)\n"]}

package/dist/conveyor.js

@@ -0,0 +1,84 @@
+import { Component } from '@hatiolab/things-scene';
+import MCSTransport from './mcs-transport';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'select',
+            label: 'conveyor-type',
+            name: 'conveyorType',
+            property: {
+                options: ['', 'conveyor', 'rail']
+            }
+        },
+        ...MCSTransport.properties
+    ],
+    help: 'scene/component/conveyor'
+};
+export default class Conveyor extends MCSTransport {
+    static get nature() {
+        return NATURE;
+    }
+    get auxColor() {
+        return '#777';
+    }
+    containable(component) {
+        return ['Shuttle', 'Port'].includes(component.state.type);
+    }
+    renderConveyor(ctx) {
+        const { left, top, width, height } = this.bounds;
+        const rollWidth = Math.max(10, Math.min(width, height) / 2);
+        ctx.beginPath();
+        ctx.fillStyle = this.statusColor;
+        ctx.strokeStyle = this.auxColor;
+        ctx.lineWidth = 1;
+        ctx.translate(left, top);
+        ctx.rect(0, 0, width, height);
+        ctx.fill();
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.strokeStyle = '#aaa';
+        if (width > height) {
+            for (let d = 0; d < width; d += rollWidth) {
+                ctx.moveTo(d, 0);
+                ctx.lineTo(d, height);
+            }
+        }
+        else {
+            for (let d = 0; d < height; d += rollWidth) {
+                ctx.moveTo(0, d);
+                ctx.lineTo(width, d);
+            }
+        }
+        ctx.stroke();
+        ctx.translate(-left, -top);
+    }
+    renderRtvRail(ctx) {
+        const { left, top, width, height } = this.bounds;
+        ctx.beginPath();
+        ctx.translate(left, top);
+        ctx.fillStyle = this.statusColor;
+        if (width > height) {
+            ctx.fillRect(0, 0, width, (height * 1) / 5);
+            ctx.fillRect(0, (height * 4) / 5, width, (height * 1) / 5);
+        }
+        else {
+            ctx.fillRect(0, 0, (width * 1) / 5, height);
+            ctx.fillRect((width * 4) / 5, 0, (width * 1) / 5, height);
+        }
+        ctx.translate(-left, -top);
+    }
+    render(ctx) {
+        const { conveyorType } = this.state;
+        if (conveyorType == 'rail') {
+            this.renderRtvRail(ctx);
+        }
+        else {
+            this.renderConveyor(ctx);
+        }
+    }
+}
+Component.register('Conveyor', Conveyor);
+//# sourceMappingURL=conveyor.js.map

package/dist/conveyor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conveyor.js","sourceRoot":"","sources":["../src/conveyor.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentNature } from '@hatiolab/things-scene'\nimport MCSTransport from './mcs-transport'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'select',\n      label: 'conveyor-type',\n      name: 'conveyorType',\n      property: {\n        options: ['', 'conveyor', 'rail']\n      }\n    },\n    ...MCSTransport.properties\n  ],\n  help: 'scene/component/conveyor'\n}\n\nexport default class Conveyor extends MCSTransport {\n  static get nature() {\n    return NATURE\n  }\n\n  get auxColor() {\n    return '#777'\n  }\n\n  containable(component: Component) {\n    return ['Shuttle', 'Port'].includes(component.state.type)\n  }\n\n  renderConveyor(ctx: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n\n    const rollWidth = Math.max(10, Math.min(width, height) / 2)\n\n    ctx.beginPath()\n    ctx.fillStyle = this.statusColor!\n    ctx.strokeStyle = this.auxColor!\n    ctx.lineWidth = 1\n\n    ctx.translate(left, top)\n    ctx.rect(0, 0, width, height)\n    ctx.fill()\n    ctx.stroke()\n\n    ctx.beginPath()\n    ctx.strokeStyle = '#aaa'\n\n    if (width > height) {\n      for (let d = 0; d < width; d += rollWidth) {\n        ctx.moveTo(d, 0)\n        ctx.lineTo(d, height)\n      }\n    } else {\n      for (let d = 0; d < height; d += rollWidth) {\n        ctx.moveTo(0, d)\n        ctx.lineTo(width, d)\n      }\n    }\n\n    ctx.stroke()\n\n    ctx.translate(-left, -top)\n  }\n\n  renderRtvRail(ctx: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n\n    ctx.beginPath()\n\n    ctx.translate(left, top)\n\n    ctx.fillStyle = this.statusColor!\n\n    if (width > height) {\n      ctx.fillRect(0, 0, width, (height * 1) / 5)\n      ctx.fillRect(0, (height * 4) / 5, width, (height * 1) / 5)\n    } else {\n      ctx.fillRect(0, 0, (width * 1) / 5, height)\n      ctx.fillRect((width * 4) / 5, 0, (width * 1) / 5, height)\n    }\n\n    ctx.translate(-left, -top)\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    const { conveyorType } = this.state\n\n    if (conveyorType == 'rail') {\n      this.renderRtvRail(ctx)\n    } else {\n      this.renderConveyor(ctx)\n    }\n  }\n}\n\nComponent.register('Conveyor', Conveyor)\n"]}

package/dist/crane.js

@@ -0,0 +1,55 @@
+import { Component } from '@hatiolab/things-scene';
+import MCSVehicle from './mcs-vehicle';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [...MCSVehicle.properties]
+};
+const GAP = 2;
+export default class Crane extends MCSVehicle {
+    static get nature() {
+        return NATURE;
+    }
+    get auxColor() {
+        return 'black';
+    }
+    render(ctx) {
+        var { left, top, width, height } = this.bounds;
+        const { x: cx, y: cy } = this.center;
+        const rx = width / 2;
+        const ry = height / 2;
+        const round = Math.min(rx, ry) * 0.5;
+        ctx.translate(left, top);
+        ctx.beginPath();
+        ctx.strokeStyle = this.auxColor;
+        ctx.fillStyle = this.statusColor;
+        ctx.lineWidth = 1;
+        ctx.lineCap = 'round';
+        ctx.setLineDash([]);
+        const radius = Math.round(Math.min(width, height) * 0.1);
+        ctx.roundRect(1, 0, width - 2, height, radius);
+        ctx.roundRect(GAP + 1, GAP, width - (GAP + 1) * 2, height - GAP * 2, radius - 1);
+        ctx.fill();
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(cx - left, cy - top, round, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.roundRect(width / 2 - (round * 2) / 4 - round / 8, height / 2 - (round * 6) / 5, round / 4, (round * 6) / 5, 1);
+        ctx.roundRect(width / 2 + (round * 2) / 4 - round / 8, height / 2 - (round * 6) / 5, round / 4, (round * 6) / 5, 1);
+        ctx.fill();
+        ctx.stroke();
+        ctx.beginPath();
+        // draw crane bar metapore
+        ctx.strokeStyle = 'black';
+        ctx.lineWidth = 3;
+        ctx.lineCap = 'butt';
+        ctx.moveTo(GAP * 3, height / 2);
+        ctx.lineTo(width - GAP * 3, height / 2);
+        ctx.stroke();
+        ctx.translate(-left, -top);
+    }
+}
+Component.register('Crane', Crane);
+//# sourceMappingURL=crane.js.map

package/dist/crane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"crane.js","sourceRoot":"","sources":["../src/crane.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentNature, Properties } from '@hatiolab/things-scene'\nimport MCSVehicle from './mcs-vehicle'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [...MCSVehicle.properties]\n}\n\nconst GAP = 2\n\nexport default class Crane extends MCSVehicle {\n  static get nature() {\n    return NATURE\n  }\n\n  get auxColor() {\n    return 'black'\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { left, top, width, height } = this.bounds\n    const { x: cx, y: cy } = this.center\n    const rx = width / 2\n    const ry = height / 2\n\n    const round = Math.min(rx, ry) * 0.5\n\n    ctx.translate(left, top)\n    ctx.beginPath()\n\n    ctx.strokeStyle = this.auxColor\n    ctx.fillStyle = this.statusColor!\n    ctx.lineWidth = 1\n    ctx.lineCap = 'round'\n    ctx.setLineDash([])\n\n    const radius = Math.round(Math.min(width, height) * 0.1)\n    ctx.roundRect(1, 0, width - 2, height, radius)\n    ctx.roundRect(GAP + 1, GAP, width - (GAP + 1) * 2, height - GAP * 2, radius - 1)\n    ctx.fill()\n    ctx.stroke()\n\n    ctx.beginPath()\n    ctx.arc(cx - left, cy - top, round, 0, Math.PI * 2)\n    ctx.stroke()\n\n    ctx.beginPath()\n    ctx.roundRect(width / 2 - (round * 2) / 4 - round / 8, height / 2 - (round * 6) / 5, round / 4, (round * 6) / 5, 1)\n    ctx.roundRect(width / 2 + (round * 2) / 4 - round / 8, height / 2 - (round * 6) / 5, round / 4, (round * 6) / 5, 1)\n\n    ctx.fill()\n    ctx.stroke()\n\n    ctx.beginPath()\n\n    // draw crane bar metapore\n    ctx.strokeStyle = 'black'\n    ctx.lineWidth = 3\n    ctx.lineCap = 'butt'\n\n    ctx.moveTo(GAP * 3, height / 2)\n    ctx.lineTo(width - GAP * 3, height / 2)\n\n    ctx.stroke()\n\n    ctx.translate(-left, -top)\n  }\n}\n\nComponent.register('Crane', Crane)\n"]}

package/dist/data-subscription.js

@@ -0,0 +1,126 @@
+import { SubscriptionClient } from 'subscriptions-transport-ws';
+import { Component, DataSource, RectPath, Shape } from '@hatiolab/things-scene';
+const COMPONENT_IMAGE = new URL('../icons/symbol-data-subscription.png', import.meta.url).href;
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'string',
+            label: 'tag',
+            name: 'tag'
+        }
+    ],
+    'value-property': 'tag',
+    help: 'scene/component/data-subscription'
+};
+export default class DataSubscription extends DataSource(RectPath(Shape)) {
+    static get image() {
+        if (!DataSubscription._image) {
+            DataSubscription._image = new Image();
+            DataSubscription._image.src = COMPONENT_IMAGE;
+        }
+        return DataSubscription._image;
+    }
+    dispose() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+        if (this.client) {
+            this.client.unsubscribeAll();
+            this.client.close(true);
+        }
+        super.dispose();
+    }
+    render(context) {
+        var { left, top, width, height } = this.bounds;
+        context.beginPath();
+        this.drawImage(context, DataSubscription.image, left, top, width, height);
+    }
+    ready() {
+        this._initDataSubscription();
+    }
+    get nature() {
+        return NATURE;
+    }
+    get tag() {
+        return this.state.tag;
+    }
+    set tag(tag) {
+        this.setState('tag', tag);
+    }
+    _initDataSubscription() {
+        if (!this.app.isViewMode)
+            return;
+        this.requestData();
+    }
+    async requestData() {
+        var { tag } = this.state;
+        var self = this;
+        var query = `"${tag}"`;
+        // var query = `
+        // subscription {
+        //   data(tag: "${tag}") {
+        //     tag
+        //     data
+        //   }
+        // }`
+        // let wsKey = guid()
+        var endpoint = location.origin.replace(/^http/, 'ws') + '/subscriptions';
+        this.client = new SubscriptionClient(endpoint, {
+            reconnect: true,
+            connectionParams: {
+                headers: {
+                    /*
+                    특정 도메인의 데이타만 받고자 하는 경우에, referer 정보를 제공해서 서버에서 서브도메인 정보를 취득하도록 한다.
+                    referer: location.href
+                    또는, 이미 서브도메인 정보를 알고 있다면,
+                    'x-things-factory-domain': '[subdomain]'
+                    을 보낼 수 있다.
+                    관련 정보를 보내지 않는다면, 사용자가 권한을 가진 모든 도메인의 데이타를 수신하게 된다.
+                  */
+                    referer: location.href
+                }
+            }
+        }
+        // null,
+        // null
+        // wsKey
+        );
+        this.client.onError(e => {
+            var client = this.client;
+            // 보드가 실행중이면 재시도, 아니면 재연결 취소
+            if (this.disposed) {
+                client.reconnect = false;
+                this.client.unsubscribeAll();
+                this.client.close(true);
+            }
+        });
+        this.client.onConnected(() => {
+            // this.subscription = this.client.request({ query }).subscribe({
+            //   next({ data }) {
+            //     if (data) {
+            //       self.data = data.data.data
+            //     }
+            //   }
+            // })
+            // console.log('this.subscription : ', this.subscription)
+        });
+        this.subscription = this.client.request({ query }).subscribe({
+            next({ data }) {
+                if (data) {
+                    self.data = data.data.data;
+                }
+            }
+        });
+        // function guid() {
+        //   function s4() {
+        //     return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+        //   }
+        //   return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4()
+        // }
+    }
+}
+Component.register('data-subscription', DataSubscription);
+//# sourceMappingURL=data-subscription.js.map