@operato/scene-wheel-sorter 0.0.11

package/dist/mixin-conveyor.js

@@ -0,0 +1,121 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, ValueHolder } from '@hatiolab/things-scene';
+const TYPE_ROLLER = 0;
+const TYPE_BELT = 1;
+const FILL_STYLES = ['#ccc', '#afd0f1', '#afd0f1', '#ffba00', '#e9746b']; // IDLE, RUN, RUN(REVERSE), WARN, ERROR
+const STROKE_STYLES = ['#999', '#87b1db', '#87b1db', '#d96f21', '#a73928']; // IDLE, RUN, RUN(REVERSE), WARN, ERROR
+function pattern_for_belt_type(component) {
+    var { height } = component.bounds;
+    var { rollWidth = 10 } = component.model;
+    var width = Math.max(rollWidth, 1);
+    var color = FILL_STYLES[component.value] || FILL_STYLES[0];
+    var stroke = STROKE_STYLES[component.value] || STROKE_STYLES[0];
+    var lineWidth = 1;
+    if (!component._roller_pattern)
+        component._roller_pattern = document.createElement('canvas');
+    component._roller_pattern.width = width;
+    component._roller_pattern.height = height;
+    var context = component._roller_pattern.getContext('2d');
+    context.beginPath();
+    context.fillStyle = color;
+    context.strokeStyle = stroke;
+    context.lineWidth = lineWidth;
+    context.moveTo(0, 0);
+    context.lineTo(width, 0);
+    context.lineTo(width, height);
+    context.lineTo(0, height);
+    context.lineTo(0, 0);
+    context.fill();
+    context.beginPath();
+    context.globalAlpha = 0.2;
+    var x_for_belt = (component._step || 0) % width;
+    if (component.value == 2)
+        x_for_belt = width - x_for_belt;
+    context.moveTo(x_for_belt, height);
+    context.lineTo(x_for_belt, 0);
+    context.stroke();
+    return component._roller_pattern;
+}
+function pattern_for_roller_type(component) {
+    var { height } = component.bounds;
+    var { rollWidth = 10, animated } = component.model;
+    // var modelWidth = component.model.width;
+    var width = Math.max(rollWidth, 1);
+    var color = FILL_STYLES[component.value] || FILL_STYLES[0];
+    var stroke = STROKE_STYLES[component.value] || STROKE_STYLES[0];
+    var lineWidth = Math.min(1, width / 10);
+    width += lineWidth * 2;
+    if (!component._roller_pattern)
+        component._roller_pattern = document.createElement('canvas');
+    var gap = Math.floor((width * 2) / 3);
+    // while (Math.round(modelWidth - width) % (width + gap) > gap) {
+    //   gap++
+    //   console.log(gap, Math.round(modelWidth - width) % (width + gap))
+    // }
+    component._roller_pattern.width = width + gap;
+    component._roller_pattern.height = height;
+    var context = component._roller_pattern.getContext('2d');
+    context.beginPath();
+    context.fillStyle = color;
+    context.strokeStyle = stroke;
+    context.lineWidth = lineWidth;
+    context.ellipse(lineWidth + width / 2, height - width / 4 - lineWidth, width / 2, width / 4, 0, 0, Math.PI);
+    context.moveTo(lineWidth, height - width / 4);
+    context.lineTo(lineWidth, width / 4);
+    context.ellipse(lineWidth + width / 2, width / 4 + lineWidth, width / 2, width / 4, 0, Math.PI, 0);
+    context.lineTo(lineWidth + width, height - width / 4);
+    context.fill();
+    context.stroke();
+    context.globalAlpha = 0.2;
+    context.lineWidth = width / 3;
+    if (animated) {
+        var x_for_roll = component._step % width;
+        if (component.value == 2)
+            x_for_roll = width - x_for_roll;
+        context.moveTo(x_for_roll, height - width / 4);
+        context.lineTo(x_for_roll, width / 4);
+        context.stroke();
+    }
+    return component._roller_pattern;
+}
+const patterns = [pattern_for_roller_type, pattern_for_belt_type];
+export default (superclass) => {
+    var A = class extends ValueHolder(superclass) {
+        dispose() {
+            super.dispose();
+            delete this._roller_pattern;
+        }
+        animOnState() {
+            if ((this.value !== 1 && this.value !== 2) || this.disposed)
+                return;
+            if (!this._step || this._step > 40000)
+                this._step = this.value == 0;
+            this._step++;
+            var self = this;
+            requestAnimationFrame(function () {
+                self.clearCache('fillStyle');
+                self.invalidate();
+            });
+        }
+        get conveyorType() {
+            var conveyorType = this.get('conveyorType');
+            if (conveyorType != TYPE_BELT && conveyorType != TYPE_ROLLER)
+                conveyorType = TYPE_ROLLER;
+            return conveyorType;
+        }
+        get fillStyle() {
+            return {
+                image: patterns[this.conveyorType](this),
+                offsetX: 0,
+                offsetY: 0,
+                type: 'pattern'
+            };
+        }
+    };
+    Component.memoize(A.prototype, 'fillStyle', false);
+    Component.memoize(A.prototype, 'conveyorType', false);
+    return A;
+};
+//# sourceMappingURL=mixin-conveyor.js.map

package/dist/mixin-conveyor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mixin-conveyor.js","sourceRoot":"","sources":["../src/mixin-conveyor.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Class, Component, ValueHolder } from '@hatiolab/things-scene'\n\nconst TYPE_ROLLER = 0\nconst TYPE_BELT = 1\n\nconst FILL_STYLES = ['#ccc', '#afd0f1', '#afd0f1', '#ffba00', '#e9746b'] // IDLE, RUN, RUN(REVERSE), WARN, ERROR\nconst STROKE_STYLES = ['#999', '#87b1db', '#87b1db', '#d96f21', '#a73928'] // IDLE, RUN, RUN(REVERSE), WARN, ERROR\n\ntype RollerPattern = {\n  width: number\n  height: number\n}\n\nfunction pattern_for_belt_type(component: any) {\n  var { height } = component.bounds\n\n  var { rollWidth = 10 } = component.model\n\n  var width = Math.max(rollWidth, 1)\n\n  var color = FILL_STYLES[component.value] || FILL_STYLES[0]\n  var stroke = STROKE_STYLES[component.value] || STROKE_STYLES[0]\n  var lineWidth = 1\n\n  if (!component._roller_pattern) component._roller_pattern = document.createElement('canvas')\n\n  component._roller_pattern.width = width\n  component._roller_pattern.height = height\n\n  var context = component._roller_pattern.getContext('2d')\n\n  context.beginPath()\n  context.fillStyle = color\n  context.strokeStyle = stroke\n  context.lineWidth = lineWidth\n\n  context.moveTo(0, 0)\n  context.lineTo(width, 0)\n  context.lineTo(width, height)\n  context.lineTo(0, height)\n  context.lineTo(0, 0)\n  context.fill()\n\n  context.beginPath()\n\n  context.globalAlpha = 0.2\n\n  var x_for_belt = (component._step || 0) % width\n  if (component.value == 2) x_for_belt = width - x_for_belt\n\n  context.moveTo(x_for_belt, height)\n  context.lineTo(x_for_belt, 0)\n\n  context.stroke()\n\n  return component._roller_pattern\n}\n\nfunction pattern_for_roller_type(component: any) {\n  var { height } = component.bounds\n\n  var { rollWidth = 10, animated } = component.model\n\n  // var modelWidth = component.model.width;\n\n  var width = Math.max(rollWidth, 1)\n\n  var color = FILL_STYLES[component.value] || FILL_STYLES[0]\n  var stroke = STROKE_STYLES[component.value] || STROKE_STYLES[0]\n  var lineWidth = Math.min(1, width / 10)\n\n  width += lineWidth * 2\n\n  if (!component._roller_pattern) component._roller_pattern = document.createElement('canvas')\n\n  var gap = Math.floor((width * 2) / 3)\n\n  // while (Math.round(modelWidth - width) % (width + gap) > gap) {\n  //   gap++\n  //   console.log(gap, Math.round(modelWidth - width) % (width + gap))\n  // }\n\n  component._roller_pattern.width = width + gap\n  component._roller_pattern.height = height\n\n  var context = component._roller_pattern.getContext('2d')\n\n  context.beginPath()\n  context.fillStyle = color\n  context.strokeStyle = stroke\n  context.lineWidth = lineWidth\n\n  context.ellipse(lineWidth + width / 2, height - width / 4 - lineWidth, width / 2, width / 4, 0, 0, Math.PI)\n\n  context.moveTo(lineWidth, height - width / 4)\n  context.lineTo(lineWidth, width / 4)\n\n  context.ellipse(lineWidth + width / 2, width / 4 + lineWidth, width / 2, width / 4, 0, Math.PI, 0)\n\n  context.lineTo(lineWidth + width, height - width / 4)\n\n  context.fill()\n  context.stroke()\n\n  context.globalAlpha = 0.2\n\n  context.lineWidth = width / 3\n\n  if (animated) {\n    var x_for_roll = component._step % width\n    if (component.value == 2) x_for_roll = width - x_for_roll\n\n    context.moveTo(x_for_roll, height - width / 4)\n    context.lineTo(x_for_roll, width / 4)\n\n    context.stroke()\n  }\n\n  return component._roller_pattern\n}\n\nconst patterns = [pattern_for_roller_type, pattern_for_belt_type]\n\nexport default (superclass: Class) => {\n  var A = class extends ValueHolder(superclass) {\n    dispose() {\n      super.dispose()\n      delete this._roller_pattern\n    }\n\n    animOnState() {\n      if ((this.value !== 1 && this.value !== 2) || this.disposed) return\n\n      if (!this._step || this._step > 40000) this._step = this.value == 0\n\n      this._step++\n\n      var self = this\n\n      requestAnimationFrame(function () {\n        self.clearCache('fillStyle')\n        self.invalidate()\n      })\n    }\n\n    get conveyorType() {\n      var conveyorType = this.get('conveyorType')\n      if (conveyorType != TYPE_BELT && conveyorType != TYPE_ROLLER) conveyorType = TYPE_ROLLER\n      return conveyorType\n    }\n\n    get fillStyle() {\n      return {\n        image: patterns[this.conveyorType](this),\n        offsetX: 0,\n        offsetY: 0,\n        type: 'pattern'\n      }\n    }\n  }\n\n  Component.memoize(A.prototype, 'fillStyle', false)\n  Component.memoize(A.prototype, 'conveyorType', false)\n\n  return A\n}\n"]}

package/dist/mixin-scanner.d.ts

@@ -0,0 +1,15 @@
+import { Class } from '@hatiolab/things-scene';
+declare const _default: (superclass: Class) => {
+    new (...args: any[]): {
+        [x: string]: any;
+        dispose(): void;
+        readonly fillStyle: {
+            image: any;
+            offsetX: number;
+            offsetY: number;
+            type: string;
+            fitPattern: boolean;
+        };
+    };
+};
+export default _default;

package/dist/mixin-scanner.js

@@ -0,0 +1,99 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, ValueHolder } from '@hatiolab/things-scene';
+const FILL_STYLES = ['rgba(0,0,0,.4)', 'rgba(175,208,241,.7)', 'rgba(255,186,0,.7)', 'rgba(198,50,40,.7)']; // IDLE, RUN, WARN, ERROR
+const STROKE_STYLES = ['rgba(0,0,0,.7)', 'rgba(175,208,241,1)', 'rgba(255,186,0,1)', 'rgba(198,50,40,1)']; // IDLE, RUN, WARN, ERROR
+function pattern(component) {
+    var { width, height } = component.bounds;
+    var color = FILL_STYLES[component.value] || FILL_STYLES[0];
+    var stroke = STROKE_STYLES[component.value] || STROKE_STYLES[0];
+    var lineWidth = 1;
+    if (!component._scanner_pattern)
+        component._scanner_pattern = document.createElement('canvas');
+    component._scanner_pattern.width = width;
+    component._scanner_pattern.height = height;
+    var ctx = component._scanner_pattern.getContext('2d');
+    var radius = width / 10;
+    var left = 0;
+    var top = 0;
+    // outer box
+    ctx.beginPath();
+    ctx.fillStyle = color;
+    ctx.strokeStyle = stroke;
+    ctx.rect(0, 0, width, height);
+    ctx.fill();
+    // ctx.stroke();
+    // inner box
+    radius = width / 40;
+    left = width / 4;
+    top = height / 4;
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(0,0,0,.7)';
+    ctx.strokeStyle = null;
+    ctx.moveTo(left + radius, top);
+    ctx.lineTo(left + width / 2 - radius, top);
+    ctx.quadraticCurveTo(left + width / 2, top, left + width / 2, top + radius);
+    ctx.lineTo(left + width / 2, top + height / 2 - radius);
+    ctx.quadraticCurveTo(left + width / 2, top + height / 2, left + width / 2 - radius, top + height / 2);
+    ctx.lineTo(left + radius, top + height / 2);
+    ctx.quadraticCurveTo(left, top + height / 2, left, top + height / 2 - radius);
+    ctx.lineTo(left, top + radius);
+    ctx.quadraticCurveTo(left, top, left + radius, top);
+    ctx.fill();
+    // barcode
+    left = left + width * 0.1;
+    top = top + height * 0.05;
+    var offsetTop = 0;
+    var barcodeAreaWidth = width * 0.3;
+    var barcodeAreaHeight = height * 0.4;
+    ctx.beginPath();
+    ctx.fillStyle = '#fff';
+    ctx.moveTo(left, top);
+    ctx.rect(left, top + offsetTop, barcodeAreaWidth, (barcodeAreaHeight / 14) * 0.9);
+    offsetTop = (barcodeAreaHeight / 14) * 2;
+    ctx.rect(left, top + offsetTop, barcodeAreaWidth, (barcodeAreaHeight / 14) * 0.3);
+    offsetTop = (barcodeAreaHeight / 14) * 4;
+    ctx.rect(left, top + offsetTop, barcodeAreaWidth, (barcodeAreaHeight / 14) * 0.4);
+    offsetTop = (barcodeAreaHeight / 14) * 6;
+    ctx.rect(left, top + offsetTop, barcodeAreaWidth, (barcodeAreaHeight / 14) * 0.8);
+    offsetTop = (barcodeAreaHeight / 14) * 8;
+    ctx.rect(left, top + offsetTop, barcodeAreaWidth, (barcodeAreaHeight / 14) * 0.6);
+    offsetTop = (barcodeAreaHeight / 14) * 10;
+    ctx.rect(left, top + offsetTop, barcodeAreaWidth, barcodeAreaHeight / 14);
+    offsetTop = (barcodeAreaHeight / 14) * 11;
+    ctx.rect(left, top + offsetTop, barcodeAreaWidth, barcodeAreaHeight / 14);
+    offsetTop = (barcodeAreaHeight / 14) * 14;
+    ctx.rect(left, top + offsetTop, barcodeAreaWidth, (barcodeAreaHeight / 14) * 0.3);
+    ctx.fill();
+    // lazer
+    ctx.beginPath();
+    left = width / 2;
+    top = height * 0.1;
+    ctx.strokeStyle = '#cc3300';
+    ctx.lineWidth = 1;
+    ctx.moveTo(left, top);
+    ctx.lineTo(left, height * 0.9);
+    ctx.stroke();
+    return component._scanner_pattern;
+}
+export default (superclass) => {
+    var A = class extends ValueHolder(superclass) {
+        dispose() {
+            super.dispose();
+            delete this._scanner_pattern;
+        }
+        get fillStyle() {
+            return {
+                image: pattern(this),
+                offsetX: 0,
+                offsetY: 0,
+                type: 'pattern',
+                fitPattern: true
+            };
+        }
+    };
+    Component.memoize(A.prototype, 'fillStyle', false);
+    return A;
+};
+//# sourceMappingURL=mixin-scanner.js.map

package/dist/mixin-scanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mixin-scanner.js","sourceRoot":"","sources":["../src/mixin-scanner.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Class, Component, ValueHolder } from '@hatiolab/things-scene'\n\nconst FILL_STYLES = ['rgba(0,0,0,.4)', 'rgba(175,208,241,.7)', 'rgba(255,186,0,.7)', 'rgba(198,50,40,.7)'] // IDLE, RUN, WARN, ERROR\nconst STROKE_STYLES = ['rgba(0,0,0,.7)', 'rgba(175,208,241,1)', 'rgba(255,186,0,1)', 'rgba(198,50,40,1)'] // IDLE, RUN, WARN, ERROR\n\nfunction pattern(component: any) {\n  var { width, height } = component.bounds\n\n  var color = FILL_STYLES[component.value] || FILL_STYLES[0]\n  var stroke = STROKE_STYLES[component.value] || STROKE_STYLES[0]\n  var lineWidth = 1\n\n  if (!component._scanner_pattern) component._scanner_pattern = document.createElement('canvas')\n\n  component._scanner_pattern.width = width\n  component._scanner_pattern.height = height\n\n  var ctx = component._scanner_pattern.getContext('2d')\n\n  var radius = width / 10\n  var left = 0\n  var top = 0\n\n  // outer box\n  ctx.beginPath()\n  ctx.fillStyle = color\n  ctx.strokeStyle = stroke\n\n  ctx.rect(0, 0, width, height)\n  ctx.fill()\n  // ctx.stroke();\n\n  // inner box\n  radius = width / 40\n  left = width / 4\n  top = height / 4\n\n  ctx.beginPath()\n  ctx.fillStyle = 'rgba(0,0,0,.7)'\n  ctx.strokeStyle = null\n\n  ctx.moveTo(left + radius, top)\n  ctx.lineTo(left + width / 2 - radius, top)\n  ctx.quadraticCurveTo(left + width / 2, top, left + width / 2, top + radius)\n  ctx.lineTo(left + width / 2, top + height / 2 - radius)\n  ctx.quadraticCurveTo(left + width / 2, top + height / 2, left + width / 2 - radius, top + height / 2)\n  ctx.lineTo(left + radius, top + height / 2)\n  ctx.quadraticCurveTo(left, top + height / 2, left, top + height / 2 - radius)\n  ctx.lineTo(left, top + radius)\n  ctx.quadraticCurveTo(left, top, left + radius, top)\n  ctx.fill()\n\n  // barcode\n  left = left + width * 0.1\n  top = top + height * 0.05\n\n  var offsetTop = 0\n  var barcodeAreaWidth = width * 0.3\n  var barcodeAreaHeight = height * 0.4\n\n  ctx.beginPath()\n  ctx.fillStyle = '#fff'\n\n  ctx.moveTo(left, top)\n  ctx.rect(left, top + offsetTop, barcodeAreaWidth, (barcodeAreaHeight / 14) * 0.9)\n  offsetTop = (barcodeAreaHeight / 14) * 2\n  ctx.rect(left, top + offsetTop, barcodeAreaWidth, (barcodeAreaHeight / 14) * 0.3)\n  offsetTop = (barcodeAreaHeight / 14) * 4\n  ctx.rect(left, top + offsetTop, barcodeAreaWidth, (barcodeAreaHeight / 14) * 0.4)\n  offsetTop = (barcodeAreaHeight / 14) * 6\n  ctx.rect(left, top + offsetTop, barcodeAreaWidth, (barcodeAreaHeight / 14) * 0.8)\n  offsetTop = (barcodeAreaHeight / 14) * 8\n  ctx.rect(left, top + offsetTop, barcodeAreaWidth, (barcodeAreaHeight / 14) * 0.6)\n  offsetTop = (barcodeAreaHeight / 14) * 10\n  ctx.rect(left, top + offsetTop, barcodeAreaWidth, barcodeAreaHeight / 14)\n  offsetTop = (barcodeAreaHeight / 14) * 11\n  ctx.rect(left, top + offsetTop, barcodeAreaWidth, barcodeAreaHeight / 14)\n  offsetTop = (barcodeAreaHeight / 14) * 14\n  ctx.rect(left, top + offsetTop, barcodeAreaWidth, (barcodeAreaHeight / 14) * 0.3)\n\n  ctx.fill()\n\n  // lazer\n  ctx.beginPath()\n  left = width / 2\n  top = height * 0.1\n\n  ctx.strokeStyle = '#cc3300'\n  ctx.lineWidth = 1\n  ctx.moveTo(left, top)\n  ctx.lineTo(left, height * 0.9)\n\n  ctx.stroke()\n\n  return component._scanner_pattern\n}\n\nexport default (superclass: Class) => {\n  var A = class extends ValueHolder(superclass) {\n    dispose() {\n      super.dispose()\n      delete this._scanner_pattern\n    }\n\n    get fillStyle() {\n      return {\n        image: pattern(this),\n        offsetX: 0,\n        offsetY: 0,\n        type: 'pattern',\n        fitPattern: true\n      }\n    }\n  }\n\n  Component.memoize(A.prototype, 'fillStyle', false)\n\n  return A\n}\n"]}

package/dist/mixin-wheel-sorter.d.ts

@@ -0,0 +1,12 @@
+import { Class } from '@hatiolab/things-scene';
+declare const _default: (superclass: Class) => {
+    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 _default;

package/dist/mixin-wheel-sorter.js

@@ -0,0 +1,92 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, ValueHolder } from '@hatiolab/things-scene';
+const FILL_STYLES = ['#ccc', '#afd0f1', '#ffba00', '#e9746b']; // IDLE, RUN, WARN, ERROR
+const STROKE_STYLES = ['#999', '#87b1db', '#d96f21', '#a73928']; // IDLE, RUN, WARN, ERROR
+export default (superclass) => {
+    var A = class extends ValueHolder(superclass) {
+        animOnState() {
+            if (this.value !== 1 || this.disposed)
+                return;
+            var self = this;
+            var alpha = Math.floor(Math.random() * 100);
+            if (alpha < 10)
+                alpha = 2;
+            else if (alpha > 90)
+                alpha = 1;
+            else
+                alpha = 0;
+            requestAnimationFrame(function () {
+                self.delta('tilt', alpha);
+                self.clearCache('fillStyle');
+                self.invalidate();
+            });
+        }
+        _draw_pattern(ctx) {
+            var { width, height, left, top } = this.bounds;
+            var { tilt = 0, wheelSize = 3 } = this.model;
+            tilt += this.delta('tilt') || 0;
+            tilt %= 3;
+            tilt -= 1;
+            var color = FILL_STYLES[this.value] || FILL_STYLES[0];
+            var stroke = STROKE_STYLES[this.value] || STROKE_STYLES[0];
+            var lineWidth = 1;
+            var pattern_size = wheelSize * 10 || Math.min(width / 5, height / 5);
+            ctx.beginPath();
+            ctx.fillStyle = color;
+            ctx.rect(left, top, width, height);
+            ctx.fill();
+            ctx.strokeStyle = stroke;
+            ctx.lineWidth = lineWidth;
+            this._draw_wheel(ctx, pattern_size, tilt);
+        }
+        _draw_circle(ctx, size) {
+            var { width, height } = this.bounds;
+            var offsetX = 0, offsetY = 0;
+            while (offsetY < height) {
+                offsetX = 0;
+                while (offsetX < width) {
+                    ctx.moveTo(offsetX + size / 2 + size / 3, offsetY + size / 2);
+                    ctx.ellipse(offsetX + size / 2, offsetY + size / 2, size / 3, size / 3, 0, 0, 2 * Math.PI, false);
+                    offsetX += size;
+                }
+                offsetY += size;
+            }
+            ctx.stroke();
+        }
+        _draw_inner(ctx, size, tilt) {
+            var { width, height } = this.bounds;
+            var offsetX = 0, offsetY = 0;
+            while (offsetY < height) {
+                offsetX = 0;
+                while (offsetX < width) {
+                    ctx.translate(offsetX, offsetY);
+                    ctx.beginPath();
+                    ctx.translate(size / 2, size / 2);
+                    ctx.rotate(tilt);
+                    ctx.moveTo(-size / 6, -size / 6);
+                    ctx.lineTo(-size / 6, size / 6);
+                    ctx.moveTo(size / 6, -size / 6);
+                    ctx.lineTo(size / 6, size / 6);
+                    ctx.stroke();
+                    ctx.rotate(-tilt);
+                    ctx.translate(-size / 2, -size / 2);
+                    ctx.translate(-offsetX, -offsetY);
+                    offsetX += size;
+                }
+                offsetY += size;
+            }
+        }
+        _draw_wheel(ctx, size, tilt) {
+            var { left, top } = this.bounds;
+            ctx.beginPath();
+            ctx.translate(left, top);
+            this._draw_circle(ctx, size);
+            this._draw_inner(ctx, size, tilt);
+        }
+    };
+    Component.memoize(A.prototype, 'fillStyle', false);
+    return A;
+};
+//# sourceMappingURL=mixin-wheel-sorter.js.map

package/dist/mixin-wheel-sorter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mixin-wheel-sorter.js","sourceRoot":"","sources":["../src/mixin-wheel-sorter.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Class, Component, ValueHolder } from '@hatiolab/things-scene'\n\nconst FILL_STYLES = ['#ccc', '#afd0f1', '#ffba00', '#e9746b'] // IDLE, RUN, WARN, ERROR\nconst STROKE_STYLES = ['#999', '#87b1db', '#d96f21', '#a73928'] // IDLE, RUN, WARN, ERROR\n\nexport default (superclass: Class) => {\n  var A = class extends ValueHolder(superclass) {\n    animOnState() {\n      if (this.value !== 1 || this.disposed) return\n\n      var self = this\n\n      var alpha = Math.floor(Math.random() * 100)\n      if (alpha < 10) alpha = 2\n      else if (alpha > 90) alpha = 1\n      else alpha = 0\n\n      requestAnimationFrame(function () {\n        self.delta('tilt', alpha)\n        self.clearCache('fillStyle')\n        self.invalidate()\n      })\n    }\n\n    _draw_pattern(ctx: CanvasRenderingContext2D) {\n      var { width, height, left, top } = this.bounds\n\n      var { tilt = 0, wheelSize = 3 } = this.model\n\n      tilt += this.delta('tilt') || 0\n      tilt %= 3\n      tilt -= 1\n\n      var color = FILL_STYLES[this.value] || FILL_STYLES[0]\n      var stroke = STROKE_STYLES[this.value] || STROKE_STYLES[0]\n      var lineWidth = 1\n\n      var pattern_size = wheelSize * 10 || Math.min(width / 5, height / 5)\n\n      ctx.beginPath()\n      ctx.fillStyle = color\n      ctx.rect(left, top, width, height)\n      ctx.fill()\n\n      ctx.strokeStyle = stroke\n      ctx.lineWidth = lineWidth\n\n      this._draw_wheel(ctx, pattern_size, tilt)\n    }\n\n    _draw_circle(ctx: CanvasRenderingContext2D, size: number) {\n      var { width, height } = this.bounds\n\n      var offsetX = 0,\n        offsetY = 0\n\n      while (offsetY < height) {\n        offsetX = 0\n        while (offsetX < width) {\n          ctx.moveTo(offsetX + size / 2 + size / 3, offsetY + size / 2)\n          ctx.ellipse(offsetX + size / 2, offsetY + size / 2, size / 3, size / 3, 0, 0, 2 * Math.PI, false)\n\n          offsetX += size\n        }\n        offsetY += size\n      }\n\n      ctx.stroke()\n    }\n\n    _draw_inner(ctx: CanvasRenderingContext2D, size: number, tilt: number) {\n      var { width, height } = this.bounds\n\n      var offsetX = 0,\n        offsetY = 0\n\n      while (offsetY < height) {\n        offsetX = 0\n        while (offsetX < width) {\n          ctx.translate(offsetX, offsetY)\n          ctx.beginPath()\n          ctx.translate(size / 2, size / 2)\n          ctx.rotate(tilt)\n\n          ctx.moveTo(-size / 6, -size / 6)\n          ctx.lineTo(-size / 6, size / 6)\n          ctx.moveTo(size / 6, -size / 6)\n          ctx.lineTo(size / 6, size / 6)\n\n          ctx.stroke()\n          ctx.rotate(-tilt)\n          ctx.translate(-size / 2, -size / 2)\n          ctx.translate(-offsetX, -offsetY)\n\n          offsetX += size\n        }\n        offsetY += size\n      }\n    }\n\n    _draw_wheel(ctx: CanvasRenderingContext2D, size: number, tilt: number) {\n      var { left, top } = this.bounds\n\n      ctx.beginPath()\n      ctx.translate(left, top)\n      this._draw_circle(ctx, size)\n      this._draw_inner(ctx, size, tilt)\n    }\n  }\n\n  Component.memoize(A.prototype, 'fillStyle', false)\n\n  return A\n}\n"]}

package/dist/scanner.d.ts

@@ -0,0 +1,28 @@
+declare const Scanner_base: {
+    new (...args: any[]): {
+        [x: string]: any;
+        dispose(): void;
+        readonly fillStyle: {
+            image: any;
+            offsetX: number;
+            offsetY: number;
+            type: string;
+            fitPattern: boolean;
+        };
+    };
+};
+export default class Scanner extends Scanner_base {
+    get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: {
+            type: string;
+            label: string;
+            name: string;
+        }[];
+    };
+    render(ctx: CanvasRenderingContext2D): void;
+    is3dish(): boolean;
+}
+export {};

package/dist/scanner.js

@@ -0,0 +1,46 @@
+import { Component, RectPath, Shape } from '@hatiolab/things-scene';
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import MixinScanner from './mixin-scanner';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'number',
+            label: 'value',
+            name: 'value'
+        }
+    ]
+};
+const STAT_IDLE = 0;
+const STAT_RUN = 1;
+const STAT_CHUTE_FULL = 2;
+const STAT_ERROR = 3;
+export default class Scanner extends MixinScanner(RectPath(Shape)) {
+    get nature() {
+        return NATURE;
+    }
+    render(ctx) {
+        var { width, height, left, top } = this.model;
+        var radius = width / 10;
+        ctx.beginPath();
+        ctx.moveTo(left + radius, top);
+        ctx.lineTo(left + width - radius, top);
+        ctx.quadraticCurveTo(left + width, top, left + width, top + radius);
+        ctx.lineTo(left + width, top + height - radius);
+        ctx.quadraticCurveTo(left + width, top + height, left + width - radius, top + height);
+        ctx.lineTo(left + radius, top + height);
+        ctx.quadraticCurveTo(left, top + height, left, top + height - radius);
+        ctx.lineTo(left, top + radius);
+        ctx.quadraticCurveTo(left, top, left + radius, top);
+        ctx.clip();
+    }
+    is3dish() {
+        return false;
+    }
+}
+Component.register('scanner', Scanner);
+//# sourceMappingURL=scanner.js.map

package/dist/scanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scanner.js","sourceRoot":"","sources":["../src/scanner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAEnE;;GAEG;AACH,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAE1C,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,OAAO;YACd,IAAI,EAAE,OAAO;SACd;KACF;CACF,CAAA;AAED,MAAM,SAAS,GAAG,CAAC,CAAA;AACnB,MAAM,QAAQ,GAAG,CAAC,CAAA;AAClB,MAAM,eAAe,GAAG,CAAC,CAAA;AACzB,MAAM,UAAU,GAAG,CAAC,CAAA;AAEpB,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;IAED,MAAM,CAAC,GAA6B;QAClC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAE7C,IAAI,MAAM,GAAG,KAAK,GAAG,EAAE,CAAA;QAEvB,GAAG,CAAC,SAAS,EAAE,CAAA;QACf,GAAG,CAAC,MAAM,CAAC,IAAI,GAAG,MAAM,EAAE,GAAG,CAAC,CAAA;QAC9B,GAAG,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,GAAG,MAAM,EAAE,GAAG,CAAC,CAAA;QACtC,GAAG,CAAC,gBAAgB,CAAC,IAAI,GAAG,KAAK,EAAE,GAAG,EAAE,IAAI,GAAG,KAAK,EAAE,GAAG,GAAG,MAAM,CAAC,CAAA;QACnE,GAAG,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,EAAE,GAAG,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA;QAC/C,GAAG,CAAC,gBAAgB,CAAC,IAAI,GAAG,KAAK,EAAE,GAAG,GAAG,MAAM,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,EAAE,GAAG,GAAG,MAAM,CAAC,CAAA;QACrF,GAAG,CAAC,MAAM,CAAC,IAAI,GAAG,MAAM,EAAE,GAAG,GAAG,MAAM,CAAC,CAAA;QACvC,GAAG,CAAC,gBAAgB,CAAC,IAAI,EAAE,GAAG,GAAG,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA;QACrE,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,GAAG,MAAM,CAAC,CAAA;QAC9B,GAAG,CAAC,gBAAgB,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,GAAG,MAAM,EAAE,GAAG,CAAC,CAAA;QACnD,GAAG,CAAC,IAAI,EAAE,CAAA;IACZ,CAAC;IAED,OAAO;QACL,OAAO,KAAK,CAAA;IACd,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,OAAc,CAAC,CAAA","sourcesContent":["import { Component, RectPath, Shape } from '@hatiolab/things-scene'\n\n/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport MixinScanner from './mixin-scanner'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'value',\n      name: 'value'\n    }\n  ]\n}\n\nconst STAT_IDLE = 0\nconst STAT_RUN = 1\nconst STAT_CHUTE_FULL = 2\nconst STAT_ERROR = 3\n\nexport default class Scanner extends MixinScanner(RectPath(Shape)) {\n  get nature() {\n    return NATURE\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { width, height, left, top } = this.model\n\n    var radius = width / 10\n\n    ctx.beginPath()\n    ctx.moveTo(left + radius, top)\n    ctx.lineTo(left + width - radius, top)\n    ctx.quadraticCurveTo(left + width, top, left + width, top + radius)\n    ctx.lineTo(left + width, top + height - radius)\n    ctx.quadraticCurveTo(left + width, top + height, left + width - radius, top + height)\n    ctx.lineTo(left + radius, top + height)\n    ctx.quadraticCurveTo(left, top + height, left, top + height - radius)\n    ctx.lineTo(left, top + radius)\n    ctx.quadraticCurveTo(left, top, left + radius, top)\n    ctx.clip()\n  }\n\n  is3dish() {\n    return false\n  }\n}\n\nComponent.register('scanner', Scanner as any)\n"]}

package/dist/templates/index.d.ts

@@ -0,0 +1,173 @@
+declare const _default: ({
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+        strokeStyle: string;
+        lineWidth: number;
+        lineStyle: string;
+        value: number;
+        rollWidth: number;
+        conveyorType?: undefined;
+        cx?: undefined;
+        cy?: undefined;
+        rx?: undefined;
+        ry?: undefined;
+        startAngle?: undefined;
+        endAngle?: undefined;
+        ratio?: undefined;
+        fillStyle?: undefined;
+        path?: undefined;
+        tilt?: undefined;
+    };
+} | {
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+        strokeStyle: string;
+        lineWidth: number;
+        lineStyle: string;
+        value: number;
+        conveyorType: number;
+        rollWidth: number;
+        cx?: undefined;
+        cy?: undefined;
+        rx?: undefined;
+        ry?: undefined;
+        startAngle?: undefined;
+        endAngle?: undefined;
+        ratio?: undefined;
+        fillStyle?: undefined;
+        path?: undefined;
+        tilt?: undefined;
+    };
+} | {
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        cx: number;
+        cy: number;
+        rx: number;
+        ry: number;
+        startAngle: number;
+        endAngle: number;
+        ratio: number;
+        lineWidth: number;
+        strokeStyle: string;
+        value: number;
+        rollWidth: number;
+        top?: undefined;
+        left?: undefined;
+        width?: undefined;
+        height?: undefined;
+        lineStyle?: undefined;
+        conveyorType?: undefined;
+        fillStyle?: undefined;
+        path?: undefined;
+        tilt?: undefined;
+    };
+} | {
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+        lineWidth: number;
+        strokeStyle: string;
+        fillStyle: string;
+        value: number;
+        rollWidth: number;
+        lineStyle?: undefined;
+        conveyorType?: undefined;
+        cx?: undefined;
+        cy?: undefined;
+        rx?: undefined;
+        ry?: undefined;
+        startAngle?: undefined;
+        endAngle?: undefined;
+        ratio?: undefined;
+        path?: undefined;
+        tilt?: undefined;
+    };
+} | {
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        lineWidth: number;
+        path: {
+            x: number;
+            y: number;
+        }[];
+        strokeStyle: string;
+        fillStyle: string;
+        value: number;
+        rollWidth: number;
+        top?: undefined;
+        left?: undefined;
+        width?: undefined;
+        height?: undefined;
+        lineStyle?: undefined;
+        conveyorType?: undefined;
+        cx?: undefined;
+        cy?: undefined;
+        rx?: undefined;
+        ry?: undefined;
+        startAngle?: undefined;
+        endAngle?: undefined;
+        ratio?: undefined;
+        tilt?: undefined;
+    };
+} | {
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+        strokeStyle: string;
+        fillStyle: string;
+        lineWidth: number;
+        value: number;
+        tilt: number;
+        lineStyle?: undefined;
+        rollWidth?: undefined;
+        conveyorType?: undefined;
+        cx?: undefined;
+        cy?: undefined;
+        rx?: undefined;
+        ry?: undefined;
+        startAngle?: undefined;
+        endAngle?: undefined;
+        ratio?: undefined;
+        path?: undefined;
+    };
+})[];
+export default _default;