@operato/scene-progressbar 0.0.4

package/helps/scene/component/progress-horizontal.md

@@ -0,0 +1,31 @@
+# progress-horizontal
+
+The component which displays the progress with a horizontal bar.
+
+## properties  
+1. Value(Number) - The progress value of progress bar.  
+<figure style="text-align: center;">
+
+![Progress bar-Value application result][progress-horizontal-02]  
+<figurecaption>(value: 80)</figurecaption>
+</figure>
+
+2. BackgroundColor(Color) - The color in which progress is not filled.  
+<figure style="text-align: center;">
+
+![Progress bar-BackgroundColor application result][progress-horizontal-03]  
+<figurecaption>(backgroundColor: #ec5324)</figurecaption>
+</figure>
+
+3. reverse - Fill the progress in reverse direction.  
+<figure style="text-align: center;">
+
+![Progress bar-BackgroundColor application result][progress-horizontal-04]  
+<figurecaption>(backgroundColor: #ec5324)</figurecaption>
+</figure> 
+
+
+[progress-horizontal-01]: ../images/progress-horizontal-01.png
+[progress-horizontal-02]: ../images/progress-horizontal-02.png
+[progress-horizontal-03]: ../images/progress-horizontal-03.png
+[progress-horizontal-04]: ../images/progress-horizontal-04.png

package/helps/scene/component/progress-horizontal.zh.md

@@ -0,0 +1,31 @@
+# progress-horizontal
+用横条形状，显示进度的组件。
+
+## properties  
+
+1. Value(Number) - 进度条的进度值。  
+<figure style="text-align: center;">
+
+![进度条-Value适用结果][progress-horizontal-02]  
+<figurecaption>(value: 80)</figurecaption>
+</figure>
+
+2. BackgroundColor(Color) - 没有填充进度部分的颜色。  
+<figure style="text-align: center;">
+
+![进度条-BackgroundColor适用结果][progress-horizontal-03]  
+<figurecaption>(backgroundColor: #ec5324)</figurecaption>
+</figure>
+
+3. reverse - 从反方向开始，填充进度。  
+<figure style="text-align: center;">
+
+![进度条-BackgroundColor适用结果][progress-horizontal-04]  
+<figurecaption>(backgroundColor: #ec5324)</figurecaption>
+</figure> 
+
+
+[progress-horizontal-01]: ../images/progress-horizontal-01.png
+[progress-horizontal-02]: ../images/progress-horizontal-02.png
+[progress-horizontal-03]: ../images/progress-horizontal-03.png
+[progress-horizontal-04]: ../images/progress-horizontal-04.png

package/helps/scene/component/progress-vertical.ko.md

@@ -0,0 +1,23 @@
+# progress-vertical
+
+진행률을 세로막대 형태로 표시해주는 컴포넌트
+
+## properties  
+1. Value(Number) - 프로그레스바의 진행률 값  
+<figure style="text-align: center;">
+
+![프로그레스바-Value적용결과][progress-vertical-02]  
+<figurecaption>(value: 80)</figurecaption>
+</figure>
+
+2. BackgroundColor(Color) - 진행률이 채워지지 않은 부분의 색  
+<figure style="text-align: center;">
+
+![프로그레스바-Value적용결과][progress-vertical-03]  
+<figurecaption>(backgroundColor: #ec5324)</figurecaption>
+</figure>
+
+
+[progress-vertical-01]: ../images/progress-vertical-01.png
+[progress-vertical-02]: ../images/progress-vertical-02.png
+[progress-vertical-03]: ../images/progress-vertical-03.png

package/helps/scene/component/progress-vertical.md

@@ -0,0 +1,24 @@
+# progress-vertical
+The component which displays the progress with a vertical bar.
+
+## properties  
+1. Value(Number) - The progress value of progress bar.  
+<figure style="text-align: center;">
+
+![Progress bar-Value application result][progress-vertical-02]  
+<figurecaption>(value: 80)</figurecaption>
+</figure>
+
+2. BackgroundColor(Color) - The color in which progress is not filled.  
+<figure style="text-align: center;">
+
+![Progress bar-BackgroundColor application result][progress-vertical-03]  
+<figurecaption>(backgroundColor: #ec5324)</figurecaption>
+</figure>
+
+
+[progress-vertical-01]: ../images/progress-vertical-01.png
+
+[progress-vertical-02]: ../images/progress-vertical-02.png
+
+[progress-vertical-03]: ../images/progress-vertical-03.png

package/helps/scene/component/progress-vertical.zh.md

@@ -0,0 +1,23 @@
+# progress-vertical
+
+用竖条形状，显示进度的组件。
+
+## properties  
+1. Value(Number) - 进度条的进度值。  
+<figure style="text-align: center;">
+
+![进度条-Value适用结果][progress-vertical-02]  
+<figurecaption>(value: 80)</figurecaption>
+</figure>
+
+2. BackgroundColor(Color) - 没有填充进度部分的颜色。  
+<figure style="text-align: center;">
+
+![进度条-BackgroundColor适用结果][progress-vertical-03]  
+<figurecaption>(backgroundColor: #ec5324)</figurecaption>
+</figure>
+
+
+[progress-vertical-01]: ../images/progress-vertical-01.png
+[progress-vertical-02]: ../images/progress-vertical-02.png
+[progress-vertical-03]: ../images/progress-vertical-03.png

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@operato/scene-progressbar",
+  "description": "Progressbar component for things-scene",
+  "license": "MIT",
+  "author": "heartyoh",
+  "version": "0.0.4",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@oprato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hatiolab/things-factory.git",
+    "directory": "packages/scene-progressbar"
+  },
+  "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": {
+    "lit": "^2.0.2"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@hatiolab/things-scene": "^2.7.15",
+    "@operato/board": "^0.2.27",
+    "@things-factory/builder": "^4.0.6",
+    "@things-factory/operato-board": "^4.0.6",
+    "@types/chance": "^1.1.3",
+    "@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": "853ccc00f65e96f0d4807400d792a76fe9ef62d1"
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+export { default as ProgressCircle } from './progress-circle'
+export { default as ProgressVertical } from './progress-vertical'
+export { default as ProgressHorizontal } from './progress-horizontal'

package/src/progress-circle.ts

@@ -0,0 +1,125 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { Component, Ellipse, ValueHolder } from '@hatiolab/things-scene'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'string',
+      label: 'value',
+      name: 'value'
+    },
+    {
+      type: 'number',
+      label: 'start-angle',
+      name: 'startAngle'
+    },
+    {
+      type: 'number',
+      label: 'end-angle',
+      name: 'endAngle'
+    },
+    {
+      type: 'color',
+      label: 'blank-stroke-style',
+      name: 'blankStrokeStyle'
+    },
+    {
+      type: 'checkbox',
+      label: 'packman-style',
+      name: 'packmanStyle'
+    },
+    {
+      type: 'checkbox',
+      label: 'anim-from-base',
+      name: 'animFromBase'
+    }
+  ],
+  help: 'scene/component/progress-circle'
+}
+
+export default class ProgressCircle extends ValueHolder(Ellipse) {
+  _draw(context: CanvasRenderingContext2D) {
+    var {
+      startAngle = 0,
+      endAngle = 360,
+      lineWidth = 20,
+      blankStrokeStyle,
+      cx,
+      cy,
+      rx,
+      ry,
+      packmanStyle = false,
+      animFromBase = false
+    } = this.model
+
+    this.animOnValueChange(this.value, animFromBase, 0)
+
+    const RADIAN = 0.0174533 / Math.PI
+
+    context.beginPath()
+    this.drawStroke(context)
+    // Angle마다 '-90'와 '-0.5 * Math.PI'가 있는 이유는 0도를 시계의 12시 방향으로 맞추기 위함.
+    var startAngleToRadian = (startAngle - 90) * RADIAN * Math.PI
+    var endAngleToRadian = (endAngle - 90) * RADIAN * Math.PI
+
+    //// / 바깥쪽 원 그리기  ////
+    context.strokeStyle = blankStrokeStyle
+    context.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngleToRadian, endAngleToRadian)
+
+    context.lineWidth = lineWidth
+    context.stroke()
+
+    var percent = Math.min(Math.max(this.animValue / 100, 0), 100)
+
+    context.beginPath()
+    if (packmanStyle) {
+      context.ellipse(
+        cx,
+        cy,
+        Math.abs(rx),
+        Math.abs(ry),
+        0,
+        startAngleToRadian,
+        startAngleToRadian + (endAngleToRadian - startAngleToRadian) * percent
+      )
+      context.lineTo(cx, cy)
+    } else {
+      context.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngleToRadian, endAngleToRadian)
+    }
+    this.drawFill(context)
+
+    context.closePath()
+
+    context.beginPath()
+
+    ////  채워지는 원 그리기  ////
+
+    context.ellipse(
+      cx,
+      cy,
+      Math.abs(rx),
+      Math.abs(ry),
+      0,
+      startAngleToRadian,
+      startAngleToRadian + (endAngleToRadian - startAngleToRadian) * percent
+    )
+
+    this.drawStroke(context)
+  }
+
+  _post_draw(context: CanvasRenderingContext2D) {
+    this.drawText(context)
+  }
+
+  get nature() {
+    return NATURE
+  }
+}
+
+Component.register('progress-circle', ProgressCircle)

package/src/progress-horizontal.ts

@@ -0,0 +1,83 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { Component, RectPath, Shape, ValueHolder } from '@hatiolab/things-scene'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'string',
+      label: 'value',
+      name: 'value',
+      property: 'value'
+    },
+    {
+      type: 'color',
+      label: 'background-color',
+      name: 'backgroundColor',
+      property: 'backgroundColor'
+    },
+    {
+      type: 'checkbox',
+      label: 'reverse',
+      name: 'reverse',
+      property: 'reverse'
+    },
+    {
+      type: 'checkbox',
+      label: 'anim-from-base',
+      name: 'animFromBase'
+    }
+  ],
+  help: 'scene/component/progress-horizontal'
+}
+
+export default class ProgressHorizontal extends ValueHolder(RectPath(Shape)) {
+  _draw(context: CanvasRenderingContext2D) {
+    var { top, left, height, width, backgroundColor = 'transparent', reverse, animFromBase = false } = this.model
+
+    this.animOnValueChange(this.value, animFromBase, 0)
+
+    // background의 색상
+    context.beginPath()
+    context.rect(left, top, width, height)
+
+    context.fillStyle = backgroundColor
+    context.fill()
+
+    // value의 색상
+    context.beginPath()
+
+    var drawValue = width - (width * Math.max(Math.min(this.animValue, 100), 0)) / 100
+    drawValue = Math.max(Math.min(drawValue, width), 0) // DrawValue도 높이보다 작거나 커지지 말아야 한다.
+
+    // 그리는 값의 방향을 지정
+    if (reverse) context.rect(left, top, width - drawValue, height)
+    else context.rect(left + drawValue, top, width - drawValue, height)
+
+    this.drawFill(context)
+
+    context.closePath()
+
+    context.beginPath()
+
+    context.rect(left, top, width, height)
+  }
+
+  _post_draw(context: CanvasRenderingContext2D) {
+    this.drawStroke(context)
+    this.drawText(context)
+  }
+
+  // get controls() {}
+
+  get nature() {
+    return NATURE
+  }
+}
+
+Component.register('progress-horizontal', ProgressHorizontal)

package/src/progress-vertical.ts

@@ -0,0 +1,72 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { Component, RectPath, Shape, ValueHolder } from '@hatiolab/things-scene'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'string',
+      label: 'value',
+      name: 'value',
+      property: 'value'
+    },
+    {
+      type: 'color',
+      label: 'background-color',
+      name: 'backgroundColor',
+      property: 'backgroundColor'
+    },
+    {
+      type: 'checkbox',
+      label: 'anim-from-base',
+      name: 'animFromBase'
+    }
+  ],
+  help: 'scene/component/progress-vertical'
+}
+
+export default class ProgressVertical extends ValueHolder(RectPath(Shape)) {
+  _draw(context: CanvasRenderingContext2D) {
+    var { top, left, height, width, backgroundColor = 'transparent', animFromBase = false } = this.model
+
+    this.animOnValueChange(this.value, animFromBase, 0)
+
+    // background의 색상
+    context.beginPath()
+    context.rect(left, top, width, height)
+
+    context.fillStyle = backgroundColor
+    context.fill()
+
+    // value의 색상
+    context.beginPath()
+
+    var drawValue = height - (height * Math.max(Math.min(this.animValue, 100), 0)) / 100
+    drawValue = Math.max(Math.min(drawValue, height), 0) // DrawValue도 높이보다 작거나 커지지 말아야 한다.
+    context.rect(left, top + drawValue, width, height - drawValue)
+
+    this.drawFill(context)
+
+    context.closePath()
+
+    context.beginPath()
+
+    context.rect(left, top, width, height)
+  }
+
+  _post_draw(context: CanvasRenderingContext2D) {
+    this.drawStroke(context)
+    this.drawText(context)
+  }
+
+  get nature() {
+    return NATURE
+  }
+}
+
+Component.register('progress-vertical', ProgressVertical)

package/test/basic-test.html

@@ -0,0 +1,67 @@
+<!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

@@ -0,0 +1,22 @@
+<!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>