@operato/scene-wheel-sorter 8.0.0-beta.1 → 8.0.0

package/src/mixin-wheel-sorter.ts

@@ -1,117 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Class, 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: Class) => {
-  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: CanvasRenderingContext2D) {
-      var { width, height, left, top } = this.bounds
-
-      var { tilt = 0, wheelSize = 3 } = this.state
-
-      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: CanvasRenderingContext2D, size: number) {
-      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: CanvasRenderingContext2D, size: number, tilt: number) {
-      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: CanvasRenderingContext2D, size: number, tilt: number) {
-      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
-}

package/src/scanner.ts

@@ -1,54 +0,0 @@
-import { Component, ComponentNature, RectPath, Shape } from '@hatiolab/things-scene'
-
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import MixinScanner from './mixin-scanner'
-
-const NATURE: ComponentNature = {
-  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: CanvasRenderingContext2D) {
-    var { width, height, left, top } = this.state
-
-    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 as any)

package/src/templates/index.ts

@@ -1,123 +0,0 @@
-const conveyor = new URL('../../icons/conveyor.png', import.meta.url).href
-const conveyorBelt = new URL('../../icons/conveyor-belt.png', import.meta.url).href
-const conveyorJoin = new URL('../../icons/conveyor-join.png', import.meta.url).href
-const conveyorJoinTrapezoid = new URL('../../icons/conveyor-join-trapezoid.png', import.meta.url).href
-const scanner = new URL('../../icons/scanner.png', import.meta.url).href
-const wheelSorter = new URL('../../icons/wheel-sorter.png', import.meta.url).href
-
-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
-    }
-  }
-]

package/src/wheel-sorter.ts

@@ -1,63 +0,0 @@
-import { Component, ComponentNature, RectPath, Shape } from '@hatiolab/things-scene'
-
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import MixinWheelSorter from './mixin-wheel-sorter'
-
-const NATURE: ComponentNature = {
-  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: CanvasRenderingContext2D) {
-    var { width, height, left, top, animated } = this.state
-
-    animated && this.animOnState()
-
-    ctx.beginPath()
-    ctx.rect(left, top, width, height)
-
-    ctx.clip() // bound를 벗어난 영역에도 그려지는 것을 예방.
-  }
-
-  postrender(ctx: CanvasRenderingContext2D) {
-    super.postrender(ctx)
-    this._draw_pattern(ctx)
-  }
-
-  is3dish() {
-    return false
-  }
-}
-
-Component.register('wheel-sorter', WheelSorter as any)

package/test/basic-test.html

@@ -1,67 +0,0 @@
-<!doctype html>
-<!--
-@license
-Copyright © HatioLab Inc. All rights reserved.
--->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-    <script src="../../web-component-tester/browser.js"></script>
-
-    <!-- Step 1: import the element to test -->
-    <link rel="import" href="../things-scene-wheel-sorter.html">
-  </head>
-  <body>
-
-    <!-- You can use the document as a place to set up your fixtures. -->
-    <test-fixture id="things-scene-wheel-sorter-fixture">
-      <template>
-        <things-scene-wheel-sorter>
-          <h2>things-scene-wheel-sorter</h2>
-        </things-scene-wheel-sorter>
-      </template>
-    </test-fixture>
-
-    <script>
-      suite('<things-scene-wheel-sorter>', function() {
-
-        var myEl;
-
-        setup(function() {
-          myEl = fixture('things-scene-wheel-sorter-fixture');
-        });
-
-        test('defines the "author" property', function() {
-          assert.equal(myEl.author.name, 'Dimitri Glazkov');
-          assert.equal(myEl.author.image, 'http://addyosmani.com/blog/wp-content/uploads/2013/04/unicorn.jpg');
-        });
-
-        test('says hello', function() {
-          assert.equal(myEl.sayHello(), 'things-scene-wheel-sorter says, Hello World!');
-
-          var greetings = myEl.sayHello('greetings Earthlings');
-          assert.equal(greetings, 'things-scene-wheel-sorter says, greetings Earthlings');
-        });
-
-        test('fires lasers', function(done) {
-          myEl.addEventListener('things-scene-wheel-sorter-lasers', function(event) {
-            assert.equal(event.detail.sound, 'Pew pew!');
-            done();
-          });
-          myEl.fireLasers();
-        });
-
-        test('distributed children', function() {
-          var els = myEl.getContentChildren();
-          assert.equal(els.length, 1, 'one distributed node');
-          assert.equal(els[0], myEl.querySelector('h2'), 'content distributed correctly');
-        });
-
-      });
-    </script>
-
-  </body>
-</html>

package/test/index.html

@@ -1,22 +0,0 @@
-<!doctype html>
-<!--
-@license
-Copyright © HatioLab Inc. All rights reserved.
--->
-<html><head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-    <script src="../../web-component-tester/browser.js"></script>
-  </head>
-  <body>
-    <script>
-      // Load and run all tests (.html, .js):
-      WCT.loadSuites([
-        'basic-test.html',
-        'basic-test.html?dom=shadow'
-      ]);
-    </script>
-
-</body></html>

package/test/unit/test-conveyor.js

@@ -1,35 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import './util'
-
-import { expect } from 'chai'
-
-import '../../bower_components/things-scene-core/things-scene-min'
-import { Conveyor } from '../../src/index'
-
-describe('Conveyor', function () {
-
-  var board;
-
-  beforeEach(function () {
-    board = scene.create({
-      model: {
-        components: [{
-          id: 'conveyor',
-          type: 'conveyor',
-          rows: 2,
-          columns: 2
-        }]
-      }
-    })
-  });
-
-  it('XXXX.', function () {
-
-    var conveyor = board.findById('conveyor')
-
-    expect(conveyor.get('id')).to.equal('conveyor')
-  });
-
-});

package/test/unit/util.js

@@ -1,21 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-var noop = () => {}
-
-global.Canvas = require('canvas');
-
-Canvas.prototype.setAttribute = noop;
-Canvas.prototype.style = {};
-
-global.Image = Canvas.Image;
-global.screen = {
-  width: 1280,
-  height: 800
-};
-
-global.window = global;
-
-global.addEventListener = noop;
-global.location = {};
-global.getComputedStyle = noop;

package/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2019", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "src",
-    "declaration": true,
-    "incremental": true,
-    "skipLibCheck": true
-  },
-  "include": ["**/*.ts", "*.d.ts"]
-}