@operato/scene-wheel-sorter 0.0.11

package/dist/templates/index.js

@@ -0,0 +1,123 @@
+import conveyor from '../../assets/conveyor.png';
+import conveyorBelt from '../../assets/conveyor-belt.png';
+import conveyorJoin from '../../assets/conveyor-join.png';
+import conveyorJoinTrapezoid from '../../assets/conveyor-join-trapezoid.png';
+import scanner from '../../assets/scanner.png';
+import wheelSorter from '../../assets/wheel-sorter.png';
+export default [
+    {
+        type: 'conveyor',
+        description: 'roller type conveyor',
+        group: 'warehouse',
+        icon: conveyor,
+        model: {
+            type: 'conveyor',
+            top: 350,
+            left: 100,
+            width: 500,
+            height: 100,
+            strokeStyle: '#999',
+            lineWidth: 1,
+            lineStyle: '#999',
+            value: 1,
+            rollWidth: 13
+        }
+    },
+    {
+        type: 'conveyor-belt',
+        description: 'belt type conveyor',
+        group: 'warehouse',
+        icon: conveyorBelt,
+        model: {
+            type: 'conveyor-belt',
+            top: 500,
+            left: 100,
+            width: 500,
+            height: 100,
+            strokeStyle: '#999',
+            lineWidth: 1,
+            lineStyle: '#999',
+            value: 1,
+            conveyorType: 1,
+            rollWidth: 13
+        }
+    },
+    {
+        type: 'conveyor-join',
+        description: 'join shaped conveyor',
+        group: 'warehouse',
+        icon: conveyorJoin,
+        model: {
+            type: 'conveyor-join',
+            cx: 100,
+            cy: 150,
+            rx: 100,
+            ry: 100,
+            startAngle: -Math.PI / 4,
+            endAngle: Math.PI / 4,
+            ratio: 34,
+            lineWidth: 1,
+            strokeStyle: 'black',
+            value: 2,
+            rollWidth: 12
+        }
+    },
+    {
+        type: 'scanner',
+        description: 'box scanner',
+        group: 'warehouse',
+        icon: scanner,
+        model: {
+            type: 'scanner',
+            top: 100,
+            left: 450,
+            width: 150,
+            height: 100,
+            lineWidth: 1,
+            strokeStyle: '#999',
+            fillStyle: 'transparent',
+            value: 2,
+            rollWidth: 3
+        }
+    },
+    {
+        type: 'conveyor-join-trapezoid',
+        description: 'conveyor join trapezoid',
+        group: 'warehouse',
+        icon: conveyorJoinTrapezoid,
+        model: {
+            type: 'conveyor-join-trapezoid',
+            lineWidth: 1,
+            path: [
+                { x: 50, y: 150 },
+                { x: 150, y: 150 },
+                { x: 150, y: 250 },
+                { x: 100, y: 300 },
+                { x: 50, y: 250 }
+            ],
+            strokeStyle: '#999',
+            fillStyle: 'transparent',
+            value: 3,
+            rollWidth: 10
+        }
+    },
+    {
+        type: 'wheel-sorter',
+        description: 'wheel sorter',
+        group: 'warehouse',
+        icon: wheelSorter,
+        model: {
+            type: 'wheel-sorter',
+            top: 50,
+            left: 200,
+            width: 200,
+            height: 200,
+            strokeStyle: '#999',
+            fillStyle: 'transparent',
+            lineWidth: 2,
+            value: 1,
+            tilt: 1
+        }
+    }
+];
+//# sourceMappingURL=index.js.map

package/dist/templates/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"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","sourcesContent":["import conveyor from '../../assets/conveyor.png'\nimport conveyorBelt from '../../assets/conveyor-belt.png'\nimport conveyorJoin from '../../assets/conveyor-join.png'\nimport conveyorJoinTrapezoid from '../../assets/conveyor-join-trapezoid.png'\nimport scanner from '../../assets/scanner.png'\nimport wheelSorter from '../../assets/wheel-sorter.png'\n\nexport default [\n  {\n    type: 'conveyor',\n    description: 'roller type conveyor',\n    group: 'warehouse',\n    icon: conveyor,\n    model: {\n      type: 'conveyor',\n      top: 350,\n      left: 100,\n      width: 500,\n      height: 100,\n      strokeStyle: '#999',\n      lineWidth: 1,\n      lineStyle: '#999',\n      value: 1,\n      rollWidth: 13\n    }\n  },\n  {\n    type: 'conveyor-belt',\n    description: 'belt type conveyor',\n    group: 'warehouse',\n    icon: conveyorBelt,\n    model: {\n      type: 'conveyor-belt',\n      top: 500,\n      left: 100,\n      width: 500,\n      height: 100,\n      strokeStyle: '#999',\n      lineWidth: 1,\n      lineStyle: '#999',\n      value: 1,\n      conveyorType: 1,\n      rollWidth: 13\n    }\n  },\n  {\n    type: 'conveyor-join',\n    description: 'join shaped conveyor',\n    group: 'warehouse',\n    icon: conveyorJoin,\n    model: {\n      type: 'conveyor-join',\n      cx: 100,\n      cy: 150,\n      rx: 100,\n      ry: 100,\n      startAngle: -Math.PI / 4,\n      endAngle: Math.PI / 4,\n      ratio: 34,\n      lineWidth: 1,\n      strokeStyle: 'black',\n      value: 2,\n      rollWidth: 12\n    }\n  },\n  {\n    type: 'scanner',\n    description: 'box scanner',\n    group: 'warehouse',\n    icon: scanner,\n    model: {\n      type: 'scanner',\n      top: 100,\n      left: 450,\n      width: 150,\n      height: 100,\n      lineWidth: 1,\n      strokeStyle: '#999',\n      fillStyle: 'transparent',\n      value: 2,\n      rollWidth: 3\n    }\n  },\n  {\n    type: 'conveyor-join-trapezoid',\n    description: 'conveyor join trapezoid',\n    group: 'warehouse',\n    icon: conveyorJoinTrapezoid,\n    model: {\n      type: 'conveyor-join-trapezoid',\n      lineWidth: 1,\n      path: [\n        { x: 50, y: 150 },\n        { x: 150, y: 150 },\n        { x: 150, y: 250 },\n        { x: 100, y: 300 },\n        { x: 50, y: 250 }\n      ],\n      strokeStyle: '#999',\n      fillStyle: 'transparent',\n      value: 3,\n      rollWidth: 10\n    }\n  },\n  {\n    type: 'wheel-sorter',\n    description: 'wheel sorter',\n    group: 'warehouse',\n    icon: wheelSorter,\n    model: {\n      type: 'wheel-sorter',\n      top: 50,\n      left: 200,\n      width: 200,\n      height: 200,\n      strokeStyle: '#999',\n      fillStyle: 'transparent',\n      lineWidth: 2,\n      value: 1,\n      tilt: 1\n    }\n  }\n]\n"]}

package/dist/wheel-sorter.d.ts

@@ -0,0 +1,27 @@
+declare const WheelSorter_base: {
+    new (...args: any[]): {
+        [x: string]: any;
+        animOnState(): void;
+        _draw_pattern(ctx: CanvasRenderingContext2D): void;
+        _draw_circle(ctx: CanvasRenderingContext2D, size: number): void;
+        _draw_inner(ctx: CanvasRenderingContext2D, size: number, tilt: number): void;
+        _draw_wheel(ctx: CanvasRenderingContext2D, size: number, tilt: number): void;
+    };
+};
+export default class WheelSorter extends WheelSorter_base {
+    get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: {
+            type: string;
+            label: string;
+            name: string;
+        }[];
+        help: string;
+    };
+    render(ctx: CanvasRenderingContext2D): void;
+    postrender(ctx: CanvasRenderingContext2D): void;
+    is3dish(): boolean;
+}
+export {};

package/dist/wheel-sorter.js

@@ -0,0 +1,54 @@
+import { Component, RectPath, Shape } from '@hatiolab/things-scene';
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import MixinWheelSorter from './mixin-wheel-sorter';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'number',
+            label: 'tilt',
+            name: 'tilt'
+        },
+        {
+            type: 'number',
+            label: 'wheel-size',
+            name: 'wheelSize'
+        },
+        {
+            type: 'number',
+            label: 'value',
+            name: 'value'
+        },
+        {
+            type: 'checkbox',
+            label: 'animation',
+            name: 'animated'
+        }
+    ],
+    help: 'scene/component/wheel-sorter'
+};
+export default class WheelSorter extends MixinWheelSorter(RectPath(Shape)) {
+    get nature() {
+        return NATURE;
+    }
+    render(ctx) {
+        var { width, height, left, top, animated } = this.model;
+        animated && this.animOnState();
+        ctx.beginPath();
+        ctx.rect(left, top, width, height);
+        ctx.clip(); // bound를 벗어난 영역에도 그려지는 것을 예방.
+    }
+    postrender(ctx) {
+        super.postrender(ctx);
+        this._draw_pattern(ctx);
+    }
+    is3dish() {
+        return false;
+    }
+}
+Component.register('wheel-sorter', WheelSorter);
+//# sourceMappingURL=wheel-sorter.js.map

package/dist/wheel-sorter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wheel-sorter.js","sourceRoot":"","sources":["../src/wheel-sorter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAEnE;;GAEG;AACH,OAAO,gBAAgB,MAAM,sBAAsB,CAAA;AAEnD,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,MAAM;SACb;QACD;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,YAAY;YACnB,IAAI,EAAE,WAAW;SAClB;QACD;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,OAAO;SACd;QACD;YACE,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,WAAW;YAClB,IAAI,EAAE,UAAU;SACjB;KACF;IACD,IAAI,EAAE,8BAA8B;CACrC,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxE,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;IAED,MAAM,CAAC,GAA6B;QAClC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAEvD,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE,CAAA;QAE9B,GAAG,CAAC,SAAS,EAAE,CAAA;QACf,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;QAElC,GAAG,CAAC,IAAI,EAAE,CAAA,CAAC,8BAA8B;IAC3C,CAAC;IAED,UAAU,CAAC,GAA6B;QACtC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAA;QACrB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;IACzB,CAAC;IAED,OAAO;QACL,OAAO,KAAK,CAAA;IACd,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,WAAkB,CAAC,CAAA","sourcesContent":["import { Component, RectPath, Shape } from '@hatiolab/things-scene'\n\n/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport MixinWheelSorter from './mixin-wheel-sorter'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'tilt',\n      name: 'tilt'\n    },\n    {\n      type: 'number',\n      label: 'wheel-size',\n      name: 'wheelSize'\n    },\n    {\n      type: 'number',\n      label: 'value',\n      name: 'value'\n    },\n    {\n      type: 'checkbox',\n      label: 'animation',\n      name: 'animated'\n    }\n  ],\n  help: 'scene/component/wheel-sorter'\n}\n\nexport default class WheelSorter extends MixinWheelSorter(RectPath(Shape)) {\n  get nature() {\n    return NATURE\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { width, height, left, top, animated } = this.model\n\n    animated && this.animOnState()\n\n    ctx.beginPath()\n    ctx.rect(left, top, width, height)\n\n    ctx.clip() // bound를 벗어난 영역에도 그려지는 것을 예방.\n  }\n\n  postrender(ctx: CanvasRenderingContext2D) {\n    super.postrender(ctx)\n    this._draw_pattern(ctx)\n  }\n\n  is3dish() {\n    return false\n  }\n}\n\nComponent.register('wheel-sorter', WheelSorter as any)\n"]}

package/helps/scene/component/conveyor-join-trapezoid.ko.md

@@ -0,0 +1,6 @@
+# conveyor-join-trapezoid[ko]
+
+
+## properties
+
+### 

package/helps/scene/component/conveyor-join-trapezoid.md

@@ -0,0 +1,6 @@
+# conveyor-join-trapezoid[en]
+
+
+## properties
+
+### 

package/helps/scene/component/conveyor-join-trapezoid.zh.md

@@ -0,0 +1,6 @@
+# conveyor-join-trapezoid[zh]
+
+
+## properties
+
+### 

package/helps/scene/component/conveyor-join.ko.md

@@ -0,0 +1,6 @@
+# conveyor-join[ko]
+
+
+## properties
+
+### 

package/helps/scene/component/conveyor-join.md

@@ -0,0 +1,6 @@
+# conveyor-join[en]
+
+
+## properties
+
+### 

package/helps/scene/component/conveyor-join.zh.md

@@ -0,0 +1,6 @@
+# conveyor-join[zh]
+
+
+## properties
+
+### 

package/helps/scene/component/conveyor.ko.md

@@ -0,0 +1,6 @@
+# conveyor[ko]
+
+
+## properties
+
+### 

package/helps/scene/component/conveyor.md

@@ -0,0 +1,6 @@
+# conveyor[en]
+
+
+## properties
+
+### 

package/helps/scene/component/conveyor.zh.md

@@ -0,0 +1,6 @@
+# conveyor[zh]
+
+
+## properties
+
+### 

package/helps/scene/component/wheel-sorter.ko.md

@@ -0,0 +1,6 @@
+# wheel-sorter[ko]
+
+
+## properties
+
+### 

package/helps/scene/component/wheel-sorter.md

@@ -0,0 +1,6 @@
+# wheel-sorter[en]
+
+
+## properties
+
+### 

package/helps/scene/component/wheel-sorter.zh.md

@@ -0,0 +1,6 @@
+# wheel-sorter[zh]
+
+
+## properties
+
+### 

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@operato/scene-wheel-sorter",
+  "description": "The wheel sorter component for things-scene",
+  "license": "MIT",
+  "author": "heartyoh",
+  "version": "0.0.11",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@oprato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/things-scene/operato-scene.git",
+    "directory": "packages/wheel-sorter"
+  },
+  "scripts": {
+    "serve": "tsc && things-factory-dev",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc",
+    "prepublish": "tsc",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "migration": "things-factory-migration"
+  },
+  "dependencies": {
+    "@hatiolab/things-scene": "^2.7.23"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@hatiolab/things-scene": "^2.7.23",
+    "@operato/board": "^0.2.35",
+    "@things-factory/builder": "^4.0.10",
+    "@things-factory/operato-board": "^4.0.10",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.1.28",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "1421380ee3530169c280b01a21c81af8d1b9f9c4"
+}

package/src/conveyor-join-trapezoid.ts

@@ -0,0 +1,69 @@
+import { Component, Polygon } from '@hatiolab/things-scene'
+
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import MixinRoller from './mixin-conveyor'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'select',
+      label: 'conveyor-type',
+      name: 'conveyorType',
+      property: {
+        options: [
+          {
+            display: 'Roller',
+            value: 0
+          },
+          {
+            display: 'Belt',
+            value: 1
+          }
+        ]
+      }
+    },
+    {
+      type: 'number',
+      label: 'roll-width',
+      name: 'rollWidth'
+    },
+    {
+      type: 'number',
+      label: 'value',
+      name: 'value'
+    },
+    {
+      type: 'checkbox',
+      label: 'animation',
+      name: 'animated'
+    }
+  ],
+  help: 'scene/component/conveyor-join-trapezoid'
+}
+
+const STAT_IDLE = 0
+const STAT_RUN = 1
+const STAT_CHUTE_FULL = 3
+const STAT_ERROR = 4
+
+export default class ConveyorJoinTrapezoid extends MixinRoller(Polygon) {
+  get nature() {
+    return NATURE
+  }
+
+  is3dish() {
+    return false
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    this.get('animated') && this.animOnState()
+    super.render(context)
+  }
+}
+
+Component.register('conveyor-join-trapezoid', ConveyorJoinTrapezoid as any)

package/src/conveyor-join.ts

@@ -0,0 +1,170 @@
+import { Component, Donut, POSITION, Rect } from '@hatiolab/things-scene'
+
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import MixinRoller from './mixin-conveyor'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'select',
+      label: 'conveyor-type',
+      name: 'conveyorType',
+      property: {
+        options: [
+          {
+            display: 'Roller',
+            value: 0
+          },
+          {
+            display: 'Belt',
+            value: 1
+          }
+        ]
+      }
+    },
+    {
+      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'
+    },
+    {
+      type: 'number',
+      label: 'value',
+      name: 'value'
+    },
+    {
+      type: 'checkbox',
+      label: 'animation',
+      name: 'animated'
+    }
+  ],
+  help: 'scene/component/conveyor-join'
+}
+
+const RADIAN = 0.0174533 / Math.PI
+
+var controlHandler = {
+  ondragmove: function (point: POSITION, index: number, component: Component) {
+    var { cx, rx } = component.model
+
+    var transcoorded = component.transcoordP2S(point.x, point.y)
+
+    var ratio = ((transcoorded.x - cx) / rx) * 100
+
+    ratio = ratio >= 100 || ratio <= -100 ? 100 : Math.abs(ratio)
+
+    component.set({ ratio })
+  }
+}
+
+var antiClockWiseControlHandler = {
+  ondragmove: function (point: POSITION, index: number, component: 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 startAngle = -theta + Math.PI / 2
+
+    component.set({ startAngle })
+  }
+}
+
+var clockwiseControlHandler = {
+  ondragmove: function (point: POSITION, index: number, component: 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 MixinRoller(Donut) {
+  get nature() {
+    return NATURE
+  }
+
+  is3dish() {
+    return false
+  }
+
+  render(ctx: CanvasRenderingContext2D) {
+    var { ratio = 50, cx, cy, rx, ry, startAngle = 0, endAngle = Math.PI / 2, animated = false } = this.model
+
+    animated && this.animOnState()
+
+    ctx.beginPath()
+
+    startAngle -= Math.PI / 2
+    endAngle -= Math.PI / 2
+
+    ctx.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngle, endAngle)
+
+    // ctx.moveTo(cx + (rx / 100) * ratio ,cy);
+    // 맨 마지막 속성이 true면 원의 범위만큼 공백이 됨
+
+    ctx.ellipse(cx, cy, Math.abs((rx / 100) * ratio), Math.abs((ry / 100) * ratio), 0, endAngle, startAngle, true)
+
+    ctx.lineTo(rx * Math.cos(startAngle) + cx, rx * Math.sin(startAngle) + cy)
+  }
+
+  get controls() {
+    var { cx, cy, rx, ratio, startAngle, endAngle } = this.model
+
+    var controls = []
+
+    controls.push({
+      x: cx + ((rx + (rx * ratio) / 100) / 2) * Math.sin(startAngle),
+      y: cy - ((rx + (rx * ratio) / 100) / 2) * Math.cos(startAngle),
+      handler: antiClockWiseControlHandler
+    })
+
+    controls.push({
+      x: cx + ((rx + (rx * ratio) / 100) / 2) * Math.sin(endAngle),
+      y: cy - ((rx + (rx * ratio) / 100) / 2) * Math.cos(endAngle),
+      handler: clockwiseControlHandler
+    })
+
+    controls.push({
+      x: cx + (rx / 100) * ratio,
+      y: cy,
+      handler: controlHandler
+    })
+
+    return controls
+  }
+}
+
+Component.register('conveyor-join', ConveyorJoin as any)

package/src/conveyor.ts

@@ -0,0 +1,69 @@
+import { Component, RectPath, Shape } from '@hatiolab/things-scene'
+
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import MixinRoller from './mixin-conveyor'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'select',
+      label: 'conveyor-type',
+      name: 'conveyorType',
+      property: {
+        options: [
+          {
+            display: 'Roller',
+            value: 0
+          },
+          {
+            display: 'Belt',
+            value: 1
+          }
+        ]
+      }
+    },
+    {
+      type: 'number',
+      label: 'roll-width',
+      name: 'rollWidth'
+    },
+    {
+      type: 'number',
+      label: 'value',
+      name: 'value'
+    },
+    {
+      type: 'checkbox',
+      label: 'animation',
+      name: 'animated'
+    }
+  ],
+  help: 'scene/component/conveyor'
+}
+
+export default class Conveyor extends MixinRoller(RectPath(Shape)) {
+  get nature() {
+    return NATURE
+  }
+
+  render(ctx: CanvasRenderingContext2D) {
+    var { width, height, left, top, animated = false } = this.model
+
+    animated && this.animOnState()
+
+    ctx.beginPath()
+    ctx.rect(left, top, width, height)
+  }
+
+  is3dish() {
+    return false
+  }
+}
+
+Component.register('conveyor', Conveyor as any)
+Component.register('conveyor-belt', Conveyor as any)