@operato/scene-gauge 8.0.0-beta.1 → 8.0.0-beta.2

package/src/gauge-vertical.ts

@@ -1,202 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { Component, ComponentNature, RectPath, Shape, ValueHolder } from '@hatiolab/things-scene'
-
-import { PROPERTIES } from './gauge-properties'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    ...PROPERTIES,
-    {
-      type: 'color',
-      label: 'text-fill-style',
-      name: 'textFillStyle',
-      property: 'textFillStyle'
-    },
-    {
-      type: 'color',
-      label: 'needle-fill-style',
-      name: 'needleFillStyle',
-      property: 'needleFillStyle'
-    },
-    {
-      type: 'number',
-      label: 'needle-size',
-      name: 'needleSize',
-      property: 'needleSize'
-    }
-  ],
-  help: 'scene/component/gauge-vertical'
-}
-
-export default class GaugeVertical extends ValueHolder(RectPath(Shape)) {
-  render(context: CanvasRenderingContext2D) {
-    var {
-      startValue,
-      endValue,
-      step,
-      subStep,
-      colorStops,
-      needleFillStyle,
-      stepFillStyle,
-      textFillStyle,
-      needleSize,
-      stepNeedleSize,
-      stepTextSize,
-      showStepText = true,
-      showStartValue = true,
-      showEndValue = true,
-      showStepLine = true,
-      showSubStep = true,
-      width,
-      height,
-      top,
-      left,
-      animFromBase = false
-    } = this.state
-
-    startValue = Number(startValue)
-
-    this.animOnValueChange(this.value, animFromBase, startValue)
-
-    const totalValue = endValue - startValue // 게이지의 시작과 끝 값의 크기
-
-    context.translate(left, top) // top과 left의 좌표에 영향을 받지 않기 위해 transalate를 한다음 모든 탑과 레프트의 좌표를 0으로 줌
-
-    ////  메인 막대 그리기  ////
-    context.beginPath()
-
-    context.rect(0, 0, width, height)
-
-    this.drawFill(context)
-    this.drawStroke(context)
-    context.closePath()
-
-    ////  스텝별 색 칠하기  ////
-    if (colorStops) {
-      let beforeValue = 0
-      colorStops.forEach(function (
-        v: { position: number; color: string },
-        idx: number,
-        arr: { position: number; color: string }[]
-      ) {
-        context.beginPath()
-
-        let value = Math.max(Math.min(v.position - startValue, totalValue), 0) // v.position 범위의 최소값은 0, 최대값은 totalValue가 되야함.
-        let startStepPosition = (height * beforeValue) / totalValue
-        let endStepPosition
-
-        // console.log(startStepPosition + (height * value / totalValue));
-        if (idx === arr.length - 1 || startStepPosition + (height * value) / totalValue)
-          // 배열의 마지막 값이거나 중간 시작값 + 그려지는 값이 height 를 넘을 경우는 무조건 끝까지 채워주도록 한다
-          endStepPosition = height - startStepPosition
-        else endStepPosition = height - (height * value) / totalValue
-
-        if (beforeValue > totalValue || beforeValue > value)
-          // 값이 게이지의 최대 값을 넘어가거나 이전 값 보다 현재값이 작으면 다시 그릴 필요 없음
-          return false
-
-        context.rect(0, height - startStepPosition, width, -endStepPosition)
-
-        context.fillStyle = v.color
-        context.fill()
-        beforeValue = value
-      })
-    }
-
-    ////  바늘 그리기  ////
-    context.beginPath()
-    let drawingValue = this.animValue
-    drawingValue = Math.max(Math.min(drawingValue, endValue), startValue) // 그려지는 값은 startValue보다 작을 수 없고, endValue보다 클 수 없음.
-    let position = height - ((drawingValue - startValue) / totalValue) * height
-
-    needleSize *= 4
-    context.moveTo(width * 1.05, position)
-    context.lineTo(width * 1.05 + needleSize, position + needleSize / 2)
-    context.lineTo(width * 1.05 + needleSize, position - needleSize / 2)
-
-    context.fillStyle = needleFillStyle
-    context.fill()
-    context.closePath()
-
-    ////  스텝 선 그리기  ////
-    context.fillStyle = stepFillStyle
-    if (showStepLine) {
-      let count = totalValue / step
-
-      // Draw StartValue
-      context.fillRect(0, height, height * 0.06, stepNeedleSize)
-      // Draw StepValue
-      for (let num = 1; num < count; num++) {
-        let locate = (height / count) * num
-
-        context.fillRect(0, locate, height * 0.06, stepNeedleSize)
-      }
-      // Draw EndValue
-      context.fillRect(0, 0, height * 0.06, stepNeedleSize)
-    }
-
-    ////  서브 스탭 그리기  ////
-    if (showSubStep) {
-      let count = totalValue
-
-      // Draw StartValue
-      context.fillRect(0, 0, height * 0.027, stepNeedleSize)
-
-      // Draw StepValue
-      for (let num = 1; num <= count; num++) {
-        if (num % step == 0 || num % subStep != 0) {
-          // 메인 스탭과 서브 스탭은 그리지 않음
-          continue
-        }
-        let locate = (height / count) * num
-        context.fillRect(0, locate, height * 0.027, stepNeedleSize)
-      }
-    }
-
-    ////  스텝 텍스트 그리기  ////
-    let fontSize = (height * stepTextSize) / 150
-    context.fillStyle = textFillStyle
-    context.font = fontSize + 'px arial'
-    context.textBaseline = 'middle'
-    context.textAlign = 'center'
-    if (showStartValue) {
-      // Draw StartText
-      context.fillText(startValue, -fontSize, height)
-    }
-
-    if (showEndValue) {
-      // Draw EndText
-      context.fillText(endValue, -fontSize, 0)
-    }
-
-    if (showStepText) {
-      // Draw StepText
-      let count = totalValue / step
-
-      for (let num = 1; num < count; num++) {
-        let value = startValue + Number(step) * num
-        let locate = height - (height / count) * num
-
-        context.fillText(value, -fontSize, locate)
-      }
-    }
-
-    context.translate(-left, -top)
-  }
-
-  postrender(context: CanvasRenderingContext2D) {
-    this.drawText(context)
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('gauge-vertical', GaugeVertical)

package/src/index.ts

@@ -1,6 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-export { default as GaugeCircle } from './gauge-circle'
-export { default as GaugeVertical } from './gauge-vertical'
-export { default as GaugeHorizon } from './gauge-horizon'

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

package/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"fileNames":["../../node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/typescript/lib/lib.es2019.d.ts","../../node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/typescript/lib/lib.es2016.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.arraybuffer.d.ts","../../node_modules/typescript/lib/lib.es2017.date.d.ts","../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/typescript/lib/lib.es2019.array.d.ts","../../node_modules/typescript/lib/lib.es2019.object.d.ts","../../node_modules/typescript/lib/lib.es2019.string.d.ts","../../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../node_modules/typescript/lib/lib.es2019.intl.d.ts","../../node_modules/typescript/lib/lib.decorators.d.ts","../../node_modules/typescript/lib/lib.decorators.legacy.d.ts","../../node_modules/tslib/tslib.d.ts","../../node_modules/@hatiolab/things-scene/things-scene.d.ts","./src/gauge-properties.ts","./src/gauge-circle.ts","./src/gauge-horizon.ts","./src/gauge-vertical.ts","./src/index.ts"],"fileIdsList":[[38,39,40],[38],[38,41,42,43]],"fileInfos":[{"version":"e41c290ef7dd7dab3493e6cbe5909e0148edf4a8dad0271be08edec368a0f7b9","affectsGlobalScope":true,"impliedFormat":1},{"version":"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","impliedFormat":1},{"version":"3facaf05f0c5fc569c5649dd359892c98a85557e3e0c847964caeb67076f4d75","impliedFormat":1},{"version":"e44bb8bbac7f10ecc786703fe0a6a4b952189f908707980ba8f3c8975a760962","impliedFormat":1},{"version":"5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","impliedFormat":1},{"version":"68d73b4a11549f9c0b7d352d10e91e5dca8faa3322bfb77b661839c42b1ddec7","impliedFormat":1},{"version":"4fd3f3422b2d2a3dfd5cdd0f387b3a8ec45f006c6ea896a4cb41264c2100bb2c","affectsGlobalScope":true,"impliedFormat":1},{"version":"c57796738e7f83dbc4b8e65132f11a377649c00dd3eee333f672b8f0a6bea671","affectsGlobalScope":true,"impliedFormat":1},{"version":"dc2df20b1bcdc8c2d34af4926e2c3ab15ffe1160a63e58b7e09833f616efff44","affectsGlobalScope":true,"impliedFormat":1},{"version":"515d0b7b9bea2e31ea4ec968e9edd2c39d3eebf4a2d5cbd04e88639819ae3b71","affectsGlobalScope":true,"impliedFormat":1},{"version":"62bb211266ee48b2d0edf0d8d1b191f0c24fc379a82bd4c1692a082c540bc6b1","affectsGlobalScope":true,"impliedFormat":1},{"version":"0dc1e7ceda9b8b9b455c3a2d67b0412feab00bd2f66656cd8850e8831b08b537","affectsGlobalScope":true,"impliedFormat":1},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true,"impliedFormat":1},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true,"impliedFormat":1},{"version":"4ff2a353abf8a80ee399af572debb8faab2d33ad38c4b4474cff7f26e7653b8d","affectsGlobalScope":true,"impliedFormat":1},{"version":"936e80ad36a2ee83fc3caf008e7c4c5afe45b3cf3d5c24408f039c1d47bdc1df","affectsGlobalScope":true,"impliedFormat":1},{"version":"d15bea3d62cbbdb9797079416b8ac375ae99162a7fba5de2c6c505446486ac0a","affectsGlobalScope":true,"impliedFormat":1},{"version":"68d18b664c9d32a7336a70235958b8997ebc1c3b8505f4f1ae2b7e7753b87618","affectsGlobalScope":true,"impliedFormat":1},{"version":"eb3d66c8327153d8fa7dd03f9c58d351107fe824c79e9b56b462935176cdf12a","affectsGlobalScope":true,"impliedFormat":1},{"version":"38f0219c9e23c915ef9790ab1d680440d95419ad264816fa15009a8851e79119","affectsGlobalScope":true,"impliedFormat":1},{"version":"69ab18c3b76cd9b1be3d188eaf8bba06112ebbe2f47f6c322b5105a6fbc45a2e","affectsGlobalScope":true,"impliedFormat":1},{"version":"fef8cfad2e2dc5f5b3d97a6f4f2e92848eb1b88e897bb7318cef0e2820bceaab","affectsGlobalScope":true,"impliedFormat":1},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true,"impliedFormat":1},{"version":"4de680d5bb41c17f7f68e0419412ca23c98d5749dcaaea1896172f06435891fc","affectsGlobalScope":true,"impliedFormat":1},{"version":"954296b30da6d508a104a3a0b5d96b76495c709785c1d11610908e63481ee667","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac9538681b19688c8eae65811b329d3744af679e0bdfa5d842d0e32524c73e1c","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a969edff4bd52585473d24995c5ef223f6652d6ef46193309b3921d65dd4376","affectsGlobalScope":true,"impliedFormat":1},{"version":"9e9fbd7030c440b33d021da145d3232984c8bb7916f277e8ffd3dc2e3eae2bdb","affectsGlobalScope":true,"impliedFormat":1},{"version":"811ec78f7fefcabbda4bfa93b3eb67d9ae166ef95f9bff989d964061cbf81a0c","affectsGlobalScope":true,"impliedFormat":1},{"version":"717937616a17072082152a2ef351cb51f98802fb4b2fdabd32399843875974ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"d7e7d9b7b50e5f22c915b525acc5a49a7a6584cf8f62d0569e557c5cfc4b2ac2","affectsGlobalScope":true,"impliedFormat":1},{"version":"71c37f4c9543f31dfced6c7840e068c5a5aacb7b89111a4364b1d5276b852557","affectsGlobalScope":true,"impliedFormat":1},{"version":"576711e016cf4f1804676043e6a0a5414252560eb57de9faceee34d79798c850","affectsGlobalScope":true,"impliedFormat":1},{"version":"89c1b1281ba7b8a96efc676b11b264de7a8374c5ea1e6617f11880a13fc56dc6","affectsGlobalScope":true,"impliedFormat":1},{"version":"74f7fa2d027d5b33eb0471c8e82a6c87216223181ec31247c357a3e8e2fddc5b","affectsGlobalScope":true,"impliedFormat":1},{"version":"8e7f8264d0fb4c5339605a15daadb037bf238c10b654bb3eee14208f860a32ea","affectsGlobalScope":true,"impliedFormat":1},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true,"impliedFormat":1},{"version":"a6a5253138c5432c68a1510c70fe78a644fe2e632111ba778e1978010d6edfec","impliedFormat":1},{"version":"ef4e4dc2fd14de20903f5010671dab9cf547c831dce4802306676c80649b990b","impliedFormat":1},{"version":"8e1409f894fa33ed13f49fc8d503a69986b5349d16d3fa51141b6ac37e16df31","signature":"44008f04e6756cf1d3b21bb767fe5cbde6c0df6a0084c0bacd97f4aaa454f273"},{"version":"0fe57d9203d2161c5c95db565a17062f584cea4fc519c71a9b8d4777355b6092","signature":"48797414fafff497cac54f6c10d1e2e7ebb896ee9a572446fdc489901890d0fd"},{"version":"bb0c7a674d1eda5ef4fec9a55b37c50ee33f4cd769cb57d7f5341113dbe5d9ee","signature":"2be736c3a080d1b4d3158e3c5d19d3b635b3e482760655714b0dfefe5d2a3816"},{"version":"3e2848a5cccae467f459efd9aa5344baa105f0c5d81a2f2375b1d3e27bf1be48","signature":"a955feae78869a1b19c45c106aa9d74d6ddeae25c7b5b68fa7b02941b81e15d2"},{"version":"573659b567a69a7ca85bd857b3998a69edb91813c08a48951557b219f39496c3","signature":"9693c626dbb27254cb73153232a55d8c8d5d72afca3b6bbcf158abbdc4a82e9b"}],"root":[[40,44]],"options":{"allowJs":true,"allowSyntheticDefaultImports":true,"declaration":true,"esModuleInterop":false,"experimentalDecorators":true,"importHelpers":true,"inlineSources":true,"module":99,"noEmitOnError":true,"outDir":"./dist","rootDir":"./src","skipLibCheck":true,"sourceMap":true,"strict":true,"target":5},"referencedMap":[[41,1],[42,1],[40,2],[43,1],[44,3]],"version":"5.7.2"}