@operato/scene-gauge 0.0.16

package/helps/scene/component/gauge-horizon.zh.md

@@ -0,0 +1,145 @@
+# gauge horizon
+![组件-仪表（垂直）][gauge-vertical-01]  
+用竖条形状，显示仪表的组件。
+
+
+## properties
+  
+1. Value(Number) - 仪表的值。  
+<figure style="text-align: center;">
+
+![仪表-Value适用结果][gauge-vertical-02]  
+<figurecaption>(value: 85)</figurecaption>
+</figure>
+
+2. startValue - 仪表的起始值。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-03]  
+<figurecaption>(startValue: 10)</figurecaption>
+</figure>
+
+3. endValue - 仪表的最终值。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-04]  
+<figurecaption>(endValue: 120)</figurecaption>
+</figure>
+
+4. step - 仪表的刻度间隔。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-05]  
+<figurecaption>(step: 30)</figurecaption>
+</figure>
+
+5. stepTextSize - 仪表的刻度文本大小。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-06]  
+<figurecaption>(stepTextSize: 10)</figurecaption>
+</figure>
+
+6. subStep - 仪表的刻度之间间隔。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-07]  
+<figurecaption>(subStep: 10)</figurecaption>
+</figure>
+
+7. stepNeedleSize - 仪表的刻度大小。
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-08]  
+<figurecaption>(stepNeedleSize: 3)</figurecaption>
+</figure>
+
+8. textColor - 仪表的刻度文本颜色。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-09]  
+<figurecaption>(textColor: #ec5324)</figurecaption>
+</figure>
+
+9. needleFillStyle - 仪表的针色。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-10]  
+<figurecaption>(needleFillStyle: #ec5324)</figurecaption>
+</figure>
+
+10. needleSize - 仪表指针大小。
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-11]  
+<figurecaption>(needleSize: 10)</figurecaption>
+</figure>
+
+11. stepFillStyle - 仪表刻度的颜色。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-12]  
+<figurecaption>(stepFillStyle: #ec5324)</figurecaption>
+</figure>
+
+12. colorStops - 仪表的各个区间的颜色。可以通过双击而添加区间，也可以向下拖动标记而删除区间。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-13]  
+<figurecaption>(colorStops: <img src="{{site.baseurl}}/assets/components/color-stops-value.png" height="30" alt="color stops">)</figurecaption>
+</figure>
+
+13. showStartValue - 决定是否显示仪表的起始值。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-14]  
+<figurecaption>(showStartValue: unchecked)</figurecaption>
+</figure>
+
+14. showEndValue - 决定是否显示仪表的最终值。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-15]  
+<figurecaption>(showEndValue: unchecked)</figurecaption>
+</figure>
+
+15. showStepLine - 决定是否显示仪表的刻度。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-16]  
+<figurecaption>(showStepLine: unchecked)</figurecaption>
+</figure>
+
+16. showStepText - 决定是否显示仪表的刻度值。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-17]  
+<figurecaption>(showStepText: unchecked)</figurecaption>
+</figure>
+
+17. showSubStep - 决定是否显示仪表的分刻度。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-18]  
+<figurecaption>(showSubStep: unchecked)</figurecaption>
+</figure>
+
+
+[gauge-vertical-01]:../images/gauge-vertical-01.png
+[gauge-vertical-02]:../images/gauge-vertical-02.png
+[gauge-vertical-03]:../images/gauge-vertical-03.png
+[gauge-vertical-04]:../images/gauge-vertical-04.png
+[gauge-vertical-05]:../images/gauge-vertical-05.png
+[gauge-vertical-06]:../images/gauge-vertical-06.png
+[gauge-vertical-07]:../images/gauge-vertical-07.png
+[gauge-vertical-08]:../images/gauge-vertical-08.png
+[gauge-vertical-09]:../images/gauge-vertical-09.png
+[gauge-vertical-10]:../images/gauge-vertical-10.png
+[gauge-vertical-11]:../images/gauge-vertical-11.png
+[gauge-vertical-12]:../images/gauge-vertical-12.png
+[gauge-vertical-13]:../images/gauge-vertical-13.png
+[gauge-vertical-14]:../images/gauge-vertical-14.png
+[gauge-vertical-15]:../images/gauge-vertical-15.png
+[gauge-vertical-16]:../images/gauge-vertical-16.png
+[gauge-vertical-17]:../images/gauge-vertical-17.png
+[gauge-vertical-18]:../images/gauge-vertical-18.png

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

@@ -0,0 +1,12 @@
+# virtical gauge
+![컴포넌트-게이지(수평)][gauge-horizontal-01]  
+게이지를 가로막대 형태로 표시해주는 컴포넌트
+
+- Category : Gauge
+- 속성 :  
+  < 수직 게이지와 동일 >
+
+
+[gauge-horizontal-01]: ../images/gauge-horizontal-01.png
+
+## properties

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

@@ -0,0 +1,9 @@
+# virtical gauge
+![Component-Gauge(Horizontal)][gauge-horizontal-01]  
+The component which displays the gauge with a horizontal bar.
+
+- Property :  
+  < The same as the vertical gauge >
+
+
+[gauge-horizontal-01]: ../images/gauge-horizontal-01.png

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

@@ -0,0 +1,10 @@
+# virtical gauge[en]
+![组件-仪表（水平）][gauge-horizontal-01]  
+用横条形状，显示仪表的组件。
+
+- 属性：  
+  <同垂直仪表。>
+
+
+[gauge-horizontal-01]: ../images/gauge-horizontal-01.png
+## properties

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@operato/scene-gauge",
+  "version": "0.0.16",
+  "description": "Things Scene Gauge Component",
+  "license": "MIT",
+  "author": "heartyoh",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@operato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/things-scene/operato-scene.git",
+    "directory": "packages/gauge"
+  },
+  "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": {
+    "@hatiolab/things-scene": "^2.7.25"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@operato/board": "^0.2.44",
+    "@things-factory/builder": "^4.0.12",
+    "@things-factory/operato-board": "^4.0.12",
+    "@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": "29382f4c11826d2e6514c545ab4d7b4d2f3bbf0d"
+}

package/src/gauge-circle.ts

@@ -0,0 +1,310 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { Component, Donut, ValueHolder } from '@hatiolab/things-scene';
+
+import { PROPERTIES } from './gauge-properties';
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    ...PROPERTIES,
+    {
+      type: 'number',
+      label: 'start-angle',
+      name: 'startAngle',
+      property: 'startAngle'
+    },
+    {
+      type: 'number',
+      label: 'end-angle',
+      name: 'endAngle',
+      property: 'endAngle'
+    },
+    {
+      type: 'color',
+      label: 'text-fill-style',
+      name: 'textFillStyle',
+      property: 'textFillStyle'
+    },
+    {
+      type: 'color',
+      label: 'needle-fill-style',
+      name: 'needleFillStyle',
+      property: 'needleFillStyle'
+    },
+    {
+      type: 'color',
+      label: 'inner-circle-fill-style',
+      name: 'innerCircleFillStyle',
+      property: 'innerCircleFillStyle'
+    },
+    {
+      type: 'checkbox',
+      label: 'in-text',
+      name: 'inText',
+      property: 'inText'
+    }
+  ],
+  help: 'scene/component/gauge-circle'
+}
+
+function drawStepLine(context: CanvasRenderingContext2D, ang: number, rx: number, stepNeedleSize: number) {
+  context.rotate(ang)
+  context.translate(0, -rx)
+
+  context.fillRect(0, -rx * 0.14, stepNeedleSize, rx * 0.175)
+  context.translate(0, rx)
+  context.rotate(-ang)
+}
+
+function drawSubStepLine(context: CanvasRenderingContext2D, ang: number, rx: number, stepNeedleSize: number) {
+  context.rotate(ang)
+  context.translate(0, -rx)
+
+  context.fillRect(0, -rx * 0.04, stepNeedleSize, rx * 0.075)
+  context.translate(0, rx)
+  context.rotate(-ang)
+}
+
+function drawStepText(context: CanvasRenderingContext2D, text: string, ang: number, rx: number) {
+  context.rotate(ang)
+  context.translate(0, -rx * 0.83)
+  context.rotate(-ang)
+
+  context.fillText(text, 0, 0)
+  context.rotate(ang)
+  context.translate(0, rx * 0.83)
+  context.rotate(-ang)
+}
+
+function drawNeedle(context: CanvasRenderingContext2D, rx: number, ang: number) {
+  context.rotate(ang)
+
+  context.beginPath()
+
+  context.moveTo(rx * 0.035, 0) // 중앙 두께
+
+  context.lineTo(0, rx * 0.8) // 끝 점
+
+  context.lineTo(-rx * 0.035, 0) // 중앙 두께
+
+  context.lineTo(-rx * 0.015, -rx * 0.2) // 뒷쪽 두께
+  context.lineTo(rx * 0.015, -rx * 0.2) // 뒷쪽 두께
+
+  context.rotate(-ang)
+}
+
+export default class GaugeCircle extends ValueHolder(Donut) {
+  _draw(context: CanvasRenderingContext2D) {
+    var {
+      lineWidth = 20,
+      startValue,
+      endValue,
+      step,
+      subStep,
+      startAngle = 0,
+      endAngle = 180,
+      fontColor = 'black',
+      showStepText = true,
+      showStartValue = true,
+      showEndValue = true,
+      showStepLine = true,
+      showSubStep = true,
+      inText = true,
+      colorStops, // 스텝별 각각 다른 색
+      fillStyle,
+      textFillStyle = 'black',
+      needleFillStyle = 'black',
+      innerCircleFillStyle = 'gray',
+      stepNeedleSize = 2,
+      stepFillStyle,
+      stepTextSize,
+      cx,
+      cy,
+      rx,
+      ry,
+      ratio,
+      animFromBase = false
+    } = this.model
+
+    startValue = Number(startValue)
+
+    this.animOnValueChange(this.value, animFromBase, startValue)
+
+    const RADIAN = 0.0174533 / Math.PI
+    const rxRatio = (rx / 100) * ratio // 원 안에 지워지는 비율을 계산한 rx - ratio의 비율에 따라 크기가 변함
+    const ryRatio = (ry / 100) * ratio // 원 안에 지워지는 비율을 계산한 ry - ratio의 비율에 따라 크기가 변함
+    const circleSize = (endAngle - startAngle) / 180 // 원의 총 길이. - PI * 2가 원이므로 (360도 = 2, 180도 = 1)
+    const totalValue = endValue - startValue // 게이지의 시작과 끝 값의 크기
+
+    startAngle = startAngle * RADIAN - 0.5 //  맨 위쪽을 중심으로 앵글의 범위에 따라 왼쪽으로 넓어짐
+    endAngle = endAngle * RADIAN - 0.5 //  맨 위쪽을 중심으로 앵글의 범위에 따라 오른쪽으로 넓어짐
+
+    context.translate(cx, cy)
+
+    ////  메인 게이지 원 그리기  ////
+    context.beginPath()
+
+    context.ellipse(
+      0,
+      0,
+      Math.abs(rx),
+      Math.abs(ry),
+      0,
+      startAngle * Math.PI,
+      endAngle * Math.PI
+    )
+    this.drawStroke(context)
+    context.ellipse(
+      0,
+      0,
+      Math.abs(rxRatio),
+      Math.abs(ryRatio),
+      0,
+      endAngle * Math.PI,
+      startAngle * Math.PI,
+      true
+    ) // 반대로 그리며 원을 지움.
+    // this.drawFill(context)
+
+    context.closePath()
+
+    ////  스텝별 색 칠하기  ////
+    if (colorStops) {
+      let beforeValue = 0
+      let endStepAngle = 0
+      context.moveTo(0, 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 startStepAngle = endStepAngle || Math.PI * (startAngle + (circleSize * beforeValue) / totalValue)
+
+        if (idx === arr.length - 1)
+          // 마지막값은 무조건 끝까지 채워주도록 한다
+          endStepAngle = Math.PI * (startAngle + circleSize)
+        else endStepAngle = Math.PI * (startAngle + (circleSize * value) / totalValue)
+
+        if (beforeValue > totalValue || beforeValue > value)
+          // 값이 게이지의 최대 값을 넘어가거나 이전 값 보다 현재값이 작으면 다시 그릴 필요 없음
+          return false
+
+        context.ellipse(0, 0, Math.abs(rx), Math.abs(ry), 0, startStepAngle, endStepAngle)
+        context.ellipse(0, 0, Math.abs(rxRatio), Math.abs(ryRatio), 0, endStepAngle, startStepAngle, true)
+        context.fillStyle = v.color
+        context.fill()
+
+        beforeValue = value
+      })
+    }
+    context.scale(1, ry / rx)
+
+    ////  바늘 그리기  ////
+    context.beginPath()
+    let drawingValue = this.animValue
+    drawingValue = Math.max(Math.min(drawingValue, endValue), startValue) // 그려지는 값은 startValue보다 작을 수 없고, endValue보다 클 수 없음.
+
+    let ang = Math.PI * ((circleSize * (drawingValue - startValue)) / totalValue + startAngle - 0.5)
+
+    drawNeedle(context, rx, ang)
+
+    context.fillStyle = needleFillStyle
+    context.fill()
+
+    ////  중앙 원 그리기  ////
+    context.beginPath()
+    context.ellipse(0, 0, Math.abs(rx) / 15, Math.abs(rx) / 15, 0, 0, 2 * Math.PI)
+    context.fillStyle = innerCircleFillStyle
+    context.fill()
+
+    ////  스텝 선 그리기  ////
+    context.fillStyle = stepFillStyle
+    if (showStepLine) {
+      let count = totalValue / step
+
+      // Draw StartValue
+      drawStepLine(context, Math.PI * (startAngle + 0.5), rx * 0.8, stepNeedleSize) // 원을 그릴때 PI는 45도 부터 그리지만 angle은 0도부터 틀어서 + 0.5도를 곱해줘야함
+      // Draw StepValue
+      for (let num = 1; num < count; num++) {
+        let ang = Math.PI * ((circleSize / count) * num + startAngle + 0.5)
+
+        drawStepLine(context, ang, rx * 0.8, stepNeedleSize)
+      }
+      // Draw EndValue
+      drawStepLine(context, Math.PI * (endAngle + 0.5), rx * 0.8, stepNeedleSize)
+    }
+
+    ////  서브 스탭 그리기  ////
+    if (showSubStep) {
+      let count = totalValue
+
+      // Draw StepValue
+      for (let num = 1; num <= count; num++) {
+        if (num % step == 0 || num % subStep != 0) {
+          // 메인 스탭과 서브 스탭은 그리지 않음
+          continue
+        }
+        let ang = Math.PI * ((circleSize / count) * num + startAngle + 0.5)
+
+        drawSubStepLine(context, ang, rx * 0.8, stepNeedleSize)
+      }
+    }
+
+    ////  스텝 텍스트 그리기  ////
+    context.fillStyle = textFillStyle
+    context.font = (rx * stepTextSize) / 50 + 'px arial'
+    context.textBaseline = 'middle'
+    context.textAlign = 'center'
+    let textLocation = inText ? 0.8 : 1.35
+
+    if (showStartValue) {
+      // Draw StartText
+      drawStepText(context, startValue, Math.PI * (startAngle + 0.5), rx * textLocation)
+    }
+
+    if (showEndValue) {
+      // Draw EndText
+      drawStepText(context, endValue, Math.PI * (endAngle + 0.5), rx * textLocation)
+    }
+
+    if (showStepText) {
+      // Draw StepText
+      let count = totalValue / step
+
+      for (let num = 1; num < count; num++) {
+        let value = startValue + step * num
+        let ang = Math.PI * ((circleSize / count) * num + startAngle + 0.5)
+
+        drawStepText(context, value, ang, rx * textLocation)
+      }
+    }
+
+    context.scale(1, rx / ry)
+    context.translate(-cx, -cy)
+  }
+
+  contains(x: number, y: number): boolean {
+    // 컨테인즈는 Ellipse로 정의함
+    var { cx, cy, rx, ry } = this.model
+
+    var normx = (x - cx) / (rx * 2 - 0.5)
+    var normy = (y - cy) / (ry * 2 - 0.5)
+
+    return normx * normx + normy * normy < 0.25
+  }
+
+  _post_draw(context: CanvasRenderingContext2D) {
+    this.drawText(context)
+  }
+
+  get nature() {
+    return NATURE
+  }
+}
+
+Component.register('gauge-circle', GaugeCircle)