@operato/scene-clock 8.0.0-beta.1 → 9.0.0-beta.0

package/src/clock-analog.ts

@@ -1,183 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { Component, ComponentNature, Ellipse } from '@hatiolab/things-scene'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'number',
-      label: 'hour-width',
-      name: 'hourWidth',
-      property: 'hourWidth'
-    },
-    {
-      type: 'number',
-      label: 'minute-width',
-      name: 'minuteWidth',
-      property: 'minuteWidth'
-    },
-    {
-      type: 'number',
-      label: 'second-width',
-      name: 'secondWidth',
-      property: 'secondWidth'
-    },
-    {
-      type: 'checkbox',
-      label: 'needle-round',
-      name: 'needleRound',
-      property: 'needleRound'
-    },
-    {
-      type: 'checkbox',
-      label: 'show-second',
-      name: 'showSecond',
-      property: 'showSecond'
-    },
-    {
-      type: 'checkbox',
-      label: 'show-number',
-      name: 'showNumber',
-      property: 'showNumber'
-    },
-    {
-      type: 'number',
-      label: 'inner-circle-size',
-      name: 'innerCircleSize',
-      property: 'innerCircleSize'
-    },
-    {
-      type: 'color',
-      label: 'inner-circle-color',
-      name: 'innerCircleColor',
-      property: 'innerCircleColor'
-    }
-  ],
-  help: 'scene/component/analog-clock'
-}
-
-function drawHand(ctx: CanvasRenderingContext2D, pos: number, length: number, rx: number, needleRound: boolean) {
-  ctx.beginPath()
-  ctx.lineWidth = rx
-  ctx.lineCap = needleRound ? 'round' : 'square'
-  ctx.moveTo(0, 0)
-  ctx.rotate(pos)
-  ctx.lineTo(0, -length)
-  ctx.stroke()
-  ctx.rotate(-pos)
-}
-
-export default class ClockAnalog extends Ellipse {
-  is3dish() {
-    return false
-  }
-
-  render(ctx: CanvasRenderingContext2D) {
-    var {
-      cx,
-      cy,
-      rx,
-      ry,
-      fillStyle,
-      strokeStyle,
-      fontColor = '#000',
-      lineWidth,
-      hourWidth,
-      minuteWidth,
-      secondWidth,
-      needleRound = false,
-      showSecond = true,
-      showNumber = true,
-      innerCircleSize = 5,
-      innerCircleColor = '#000'
-    } = this.state
-
-    // 시계 원 그리기.
-    ctx.beginPath()
-    ctx.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, 0, 2 * Math.PI)
-
-    ctx.fillStyle = fillStyle
-
-    ctx.strokeStyle = strokeStyle
-    ctx.lineWidth = lineWidth || rx * 0.1
-    this.drawFill(ctx)
-    this.drawStroke(ctx)
-
-    ctx.beginPath()
-    ctx.translate(cx, cy)
-    ctx.scale(1, ry / rx)
-
-    // 시계 숫자 그리기
-    if (showNumber) {
-      var ang
-      var num
-      ctx.font = rx * 0.15 + 'px arial'
-      ctx.textBaseline = 'middle'
-      ctx.textAlign = 'center'
-      ctx.fillStyle = fontColor
-
-      for (num = 1; num < 13; num++) {
-        ang = (num * Math.PI) / 6
-        ctx.rotate(ang)
-        ctx.translate(0, -rx * 0.85)
-        ctx.rotate(-ang)
-        ctx.fillText(num.toString(), 0, 0)
-        ctx.rotate(ang)
-        ctx.translate(0, rx * 0.85)
-        ctx.rotate(-ang)
-      }
-    }
-
-    // 시계 침 그리기
-    var now = new Date()
-    var hour = now.getHours()
-    var minute = now.getMinutes()
-    var second = now.getSeconds()
-
-    // hour needle
-    hour = hour % 12
-    hour = (hour * Math.PI) / 6 + (minute * Math.PI) / (6 * 60) + (second * Math.PI) / (360 * 60)
-
-    drawHand(ctx, hour, rx * 0.55, hourWidth || rx * 0.07, needleRound)
-
-    // minute needle
-    minute = (minute * Math.PI) / 30 + (second * Math.PI) / (30 * 60)
-    drawHand(ctx, minute, rx * 0.8, minuteWidth || rx * 0.07, needleRound)
-
-    // second needle
-    if (showSecond) {
-      second = (second * Math.PI) / 30
-      drawHand(ctx, second, rx * 0.9, secondWidth || rx * 0.02, needleRound)
-    }
-
-    ctx.beginPath()
-
-    // Inner Circle
-    if (innerCircleSize) {
-      ctx.ellipse(0, 0, innerCircleSize, innerCircleSize, 0, 0, 2 * Math.PI)
-      ctx.fillStyle = innerCircleColor
-      ctx.fill()
-    }
-
-    ctx.beginPath()
-
-    ctx.scale(1, rx / ry)
-    ctx.translate(-cx, -cy)
-
-    var timeOut = setTimeout(() => {
-      this.invalidate()
-      clearTimeout(timeOut)
-    }, 1000)
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('clock-analog', ClockAnalog)

package/src/clock-text.ts

@@ -1,112 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import 'dayjs/esm/locale/ko'
-import 'dayjs/esm/locale/zh-cn'
-import 'dayjs/esm/locale/ja'
-
-import dayjs from 'dayjs/esm/index'
-import utc from 'dayjs/esm/plugin/utc'
-
-import { Component, ComponentNature, Text } from '@hatiolab/things-scene'
-
-dayjs.extend(utc)
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'time-format',
-      name: 'timeFormat'
-    },
-    {
-      type: 'checkbox',
-      label: 'is-local-time',
-      name: 'localTime'
-    },
-    {
-      type: 'number',
-      label: 'utc',
-      name: 'utc'
-    },
-    {
-      type: 'select',
-      label: 'week-language',
-      name: 'weekLanguage',
-      property: {
-        options: [
-          {
-            display: 'English',
-            value: 'en'
-          },
-          {
-            display: 'Korean',
-            value: 'ko'
-          },
-          {
-            display: 'Chinese',
-            value: 'zh-cn'
-          },
-          {
-            display: 'Japanese',
-            value: 'ja'
-          }
-        ]
-      }
-    }
-  ],
-  help: 'scene/component/clock-text'
-}
-
-export default class ClockText extends Text {
-  private _raf?: number
-
-  is3dish() {
-    return false
-  }
-
-  get nature() {
-    return NATURE
-  }
-
-  ready() {
-    this.timing()
-  }
-
-  timing() {
-    this._raf = requestAnimationFrame(() => {
-      setTimeout(() => {
-        this.setState('data', this._getTimeStamp())
-
-        this.timing()
-      }, 1000)
-    })
-  }
-
-  _getTimeStamp() {
-    var d = dayjs()
-
-    var utc = this.getState('utc')
-    var formatStr = this.getState('timeFormat') || 'YYYY-MM-DD HH:mm:ss'
-    var week_lang = this.getState('weekLanguage')
-    if (!this.getState('weekLanguage')) {
-      week_lang = 'en'
-    }
-    if (this.getState('localTime')) {
-      return d.local().locale(week_lang).format(formatStr)
-    } else {
-      return d.utc().utcOffset(Number(utc)).locale(week_lang).format(formatStr)
-    }
-  }
-
-  dispose() {
-    super.dispose()
-    this._raf !== undefined && cancelAnimationFrame(this._raf)
-  }
-}
-
-Component.register('clock-text', ClockText)

package/src/index.ts

@@ -1,5 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-export { default as ClockAnalog } from './clock-analog'
-export { default as ClockText } from './clock-text'

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-clock.html">
-  </head>
-  <body>
-
-    <!-- You can use the document as a place to set up your fixtures. -->
-    <test-fixture id="things-scene-clock-fixture">
-      <template>
-        <things-scene-clock>
-          <h2>things-scene-clock</h2>
-        </things-scene-clock>
-      </template>
-    </test-fixture>
-
-    <script>
-      suite('<things-scene-clock>', function() {
-
-        var myEl;
-
-        setup(function() {
-          myEl = fixture('things-scene-clock-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-clock says, Hello World!');
-
-          var greetings = myEl.sayHello('greetings Earthlings');
-          assert.equal(greetings, 'things-scene-clock says, greetings Earthlings');
-        });
-
-        test('fires lasers', function(done) {
-          myEl.addEventListener('things-scene-clock-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/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"]
-}