@operato/scene-gauge 1.2.46 → 1.2.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/dist/gauge-circle.d.ts +2 -2
- package/dist/gauge-circle.js +2 -2
- package/dist/gauge-circle.js.map +1 -1
- package/dist/gauge-horizon.d.ts +2 -2
- package/dist/gauge-horizon.js +2 -2
- package/dist/gauge-horizon.js.map +1 -1
- package/dist/gauge-vertical.d.ts +2 -2
- package/dist/gauge-vertical.js +2 -2
- package/dist/gauge-vertical.js.map +1 -1
- package/package.json +2 -2
- package/src/gauge-circle.ts +2 -2
- package/src/gauge-horizon.ts +2 -2
- package/src/gauge-vertical.ts +2 -2
- package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.2.50](https://github.com/things-scene/operato-scene/compare/v1.2.49...v1.2.50) (2023-07-13)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* conveyor-join contains ([06c76ba](https://github.com/things-scene/operato-scene/commit/06c76bae3b408d9291fc24e54e10c89ae4823d49))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [1.2.49](https://github.com/things-scene/operato-scene/compare/v1.2.48...v1.2.49) (2023-06-26)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Bug Fix
|
|
19
|
+
|
|
20
|
+
* missing .npmignore ([61ba4f2](https://github.com/things-scene/operato-scene/commit/61ba4f2ae22a865d700a971d62eb01f950c34d0e))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
## [1.2.46](https://github.com/things-scene/operato-scene/compare/v1.2.45...v1.2.46) (2023-06-10)
|
|
7
25
|
|
|
8
26
|
|
package/dist/gauge-circle.d.ts
CHANGED
|
@@ -5,9 +5,9 @@ declare const GaugeCircle_base: (new (...args: any[]) => {
|
|
|
5
5
|
animOnValueChange(value: number, animFromBase: boolean, base: number): void;
|
|
6
6
|
}) & typeof Donut;
|
|
7
7
|
export default class GaugeCircle extends GaugeCircle_base {
|
|
8
|
-
|
|
8
|
+
render(context: CanvasRenderingContext2D): void;
|
|
9
9
|
contains(x: number, y: number): boolean;
|
|
10
|
-
|
|
10
|
+
postrender(context: CanvasRenderingContext2D): void;
|
|
11
11
|
get nature(): ComponentNature;
|
|
12
12
|
}
|
|
13
13
|
export {};
|
package/dist/gauge-circle.js
CHANGED
|
@@ -82,7 +82,7 @@ function drawNeedle(context, rx, ang) {
|
|
|
82
82
|
context.rotate(-ang);
|
|
83
83
|
}
|
|
84
84
|
export default class GaugeCircle extends ValueHolder(Donut) {
|
|
85
|
-
|
|
85
|
+
render(context) {
|
|
86
86
|
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, // 스텝별 각각 다른 색
|
|
87
87
|
fillStyle, textFillStyle = 'black', needleFillStyle = 'black', innerCircleFillStyle = 'gray', stepNeedleSize = 2, stepFillStyle, stepTextSize, cx, cy, rx, ry, ratio, animFromBase = false } = this.state;
|
|
88
88
|
startValue = Number(startValue);
|
|
@@ -200,7 +200,7 @@ export default class GaugeCircle extends ValueHolder(Donut) {
|
|
|
200
200
|
var normy = (y - cy) / (ry * 2 - 0.5);
|
|
201
201
|
return normx * normx + normy * normy < 0.25;
|
|
202
202
|
}
|
|
203
|
-
|
|
203
|
+
postrender(context) {
|
|
204
204
|
this.drawText(context);
|
|
205
205
|
}
|
|
206
206
|
get nature() {
|
package/dist/gauge-circle.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gauge-circle.js","sourceRoot":"","sources":["../src/gauge-circle.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, Donut, ValueHolder } from '@hatiolab/things-scene'\n\nimport { PROPERTIES } from './gauge-properties'\n\nconst NATURE: ComponentNature = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n ...PROPERTIES,\n {\n type: 'number',\n label: 'start-angle',\n name: 'startAngle',\n property: 'startAngle'\n },\n {\n type: 'number',\n label: 'end-angle',\n name: 'endAngle',\n property: 'endAngle'\n },\n {\n type: 'color',\n label: 'text-fill-style',\n name: 'textFillStyle',\n property: 'textFillStyle'\n },\n {\n type: 'color',\n label: 'needle-fill-style',\n name: 'needleFillStyle',\n property: 'needleFillStyle'\n },\n {\n type: 'color',\n label: 'inner-circle-fill-style',\n name: 'innerCircleFillStyle',\n property: 'innerCircleFillStyle'\n },\n {\n type: 'checkbox',\n label: 'in-text',\n name: 'inText',\n property: 'inText'\n }\n ],\n help: 'scene/component/gauge-circle'\n}\n\nfunction drawStepLine(context: CanvasRenderingContext2D, ang: number, rx: number, stepNeedleSize: number) {\n context.rotate(ang)\n context.translate(0, -rx)\n\n context.fillRect(0, -rx * 0.14, stepNeedleSize, rx * 0.175)\n context.translate(0, rx)\n context.rotate(-ang)\n}\n\nfunction drawSubStepLine(context: CanvasRenderingContext2D, ang: number, rx: number, stepNeedleSize: number) {\n context.rotate(ang)\n context.translate(0, -rx)\n\n context.fillRect(0, -rx * 0.04, stepNeedleSize, rx * 0.075)\n context.translate(0, rx)\n context.rotate(-ang)\n}\n\nfunction drawStepText(context: CanvasRenderingContext2D, text: string, ang: number, rx: number) {\n context.rotate(ang)\n context.translate(0, -rx * 0.83)\n context.rotate(-ang)\n\n context.fillText(text, 0, 0)\n context.rotate(ang)\n context.translate(0, rx * 0.83)\n context.rotate(-ang)\n}\n\nfunction drawNeedle(context: CanvasRenderingContext2D, rx: number, ang: number) {\n context.rotate(ang)\n\n context.beginPath()\n\n context.moveTo(rx * 0.035, 0) // 중앙 두께\n\n context.lineTo(0, rx * 0.8) // 끝 점\n\n context.lineTo(-rx * 0.035, 0) // 중앙 두께\n\n context.lineTo(-rx * 0.015, -rx * 0.2) // 뒷쪽 두께\n context.lineTo(rx * 0.015, -rx * 0.2) // 뒷쪽 두께\n\n context.rotate(-ang)\n}\n\nexport default class GaugeCircle extends ValueHolder(Donut) {\n _draw(context: CanvasRenderingContext2D) {\n var {\n lineWidth = 20,\n startValue,\n endValue,\n step,\n subStep,\n startAngle = 0,\n endAngle = 180,\n fontColor = 'black',\n showStepText = true,\n showStartValue = true,\n showEndValue = true,\n showStepLine = true,\n showSubStep = true,\n inText = true,\n colorStops, // 스텝별 각각 다른 색\n fillStyle,\n textFillStyle = 'black',\n needleFillStyle = 'black',\n innerCircleFillStyle = 'gray',\n stepNeedleSize = 2,\n stepFillStyle,\n stepTextSize,\n cx,\n cy,\n rx,\n ry,\n ratio,\n animFromBase = false\n } = this.state\n\n startValue = Number(startValue)\n\n this.animOnValueChange(this.value, animFromBase, startValue)\n\n const RADIAN = 0.0174533 / Math.PI\n const rxRatio = (rx / 100) * ratio // 원 안에 지워지는 비율을 계산한 rx - ratio의 비율에 따라 크기가 변함\n const ryRatio = (ry / 100) * ratio // 원 안에 지워지는 비율을 계산한 ry - ratio의 비율에 따라 크기가 변함\n const circleSize = (endAngle - startAngle) / 180 // 원의 총 길이. - PI * 2가 원이므로 (360도 = 2, 180도 = 1)\n const totalValue = endValue - startValue // 게이지의 시작과 끝 값의 크기\n\n startAngle = startAngle * RADIAN - 0.5 // 맨 위쪽을 중심으로 앵글의 범위에 따라 왼쪽으로 넓어짐\n endAngle = endAngle * RADIAN - 0.5 // 맨 위쪽을 중심으로 앵글의 범위에 따라 오른쪽으로 넓어짐\n\n context.translate(cx, cy)\n\n //// 메인 게이지 원 그리기 ////\n context.beginPath()\n\n context.ellipse(0, 0, Math.abs(rx), Math.abs(ry), 0, startAngle * Math.PI, endAngle * Math.PI)\n this.drawStroke(context)\n context.ellipse(0, 0, Math.abs(rxRatio), Math.abs(ryRatio), 0, endAngle * Math.PI, startAngle * Math.PI, true) // 반대로 그리며 원을 지움.\n // this.drawFill(context)\n\n context.closePath()\n\n //// 스텝별 색 칠하기 ////\n if (colorStops) {\n let beforeValue = 0\n let endStepAngle = 0\n context.moveTo(0, 0)\n\n colorStops.forEach(function (\n v: { position: number; color: string },\n idx: number,\n arr: { position: number; color: string }[]\n ) {\n context.beginPath()\n\n let value = Math.max(Math.min(v.position - startValue, totalValue), 0) // v.position 범위의 최소값은 0, 최대값은 totalValue가 되야함.\n let startStepAngle = endStepAngle || Math.PI * (startAngle + (circleSize * beforeValue) / totalValue)\n\n if (idx === arr.length - 1)\n // 마지막값은 무조건 끝까지 채워주도록 한다\n endStepAngle = Math.PI * (startAngle + circleSize)\n else endStepAngle = Math.PI * (startAngle + (circleSize * value) / totalValue)\n\n if (beforeValue > totalValue || beforeValue > value)\n // 값이 게이지의 최대 값을 넘어가거나 이전 값 보다 현재값이 작으면 다시 그릴 필요 없음\n return false\n\n context.ellipse(0, 0, Math.abs(rx), Math.abs(ry), 0, startStepAngle, endStepAngle)\n context.ellipse(0, 0, Math.abs(rxRatio), Math.abs(ryRatio), 0, endStepAngle, startStepAngle, true)\n context.fillStyle = v.color\n context.fill()\n\n beforeValue = value\n })\n }\n context.scale(1, ry / rx)\n\n //// 바늘 그리기 ////\n context.beginPath()\n let drawingValue = this.animValue\n drawingValue = Math.max(Math.min(drawingValue, endValue), startValue) // 그려지는 값은 startValue보다 작을 수 없고, endValue보다 클 수 없음.\n\n let ang = Math.PI * ((circleSize * (drawingValue - startValue)) / totalValue + startAngle - 0.5)\n\n drawNeedle(context, rx, ang)\n\n context.fillStyle = needleFillStyle\n context.fill()\n\n //// 중앙 원 그리기 ////\n context.beginPath()\n context.ellipse(0, 0, Math.abs(rx) / 15, Math.abs(rx) / 15, 0, 0, 2 * Math.PI)\n context.fillStyle = innerCircleFillStyle\n context.fill()\n\n //// 스텝 선 그리기 ////\n context.fillStyle = stepFillStyle\n if (showStepLine) {\n let count = totalValue / step\n\n // Draw StartValue\n drawStepLine(context, Math.PI * (startAngle + 0.5), rx * 0.8, stepNeedleSize) // 원을 그릴때 PI는 45도 부터 그리지만 angle은 0도부터 틀어서 + 0.5도를 곱해줘야함\n // Draw StepValue\n for (let num = 1; num < count; num++) {\n let ang = Math.PI * ((circleSize / count) * num + startAngle + 0.5)\n\n drawStepLine(context, ang, rx * 0.8, stepNeedleSize)\n }\n // Draw EndValue\n drawStepLine(context, Math.PI * (endAngle + 0.5), rx * 0.8, stepNeedleSize)\n }\n\n //// 서브 스탭 그리기 ////\n if (showSubStep) {\n let count = totalValue\n\n // Draw StepValue\n for (let num = 1; num <= count; num++) {\n if (num % step == 0 || num % subStep != 0) {\n // 메인 스탭과 서브 스탭은 그리지 않음\n continue\n }\n let ang = Math.PI * ((circleSize / count) * num + startAngle + 0.5)\n\n drawSubStepLine(context, ang, rx * 0.8, stepNeedleSize)\n }\n }\n\n //// 스텝 텍스트 그리기 ////\n context.fillStyle = textFillStyle\n context.font = (rx * stepTextSize) / 50 + 'px arial'\n context.textBaseline = 'middle'\n context.textAlign = 'center'\n let textLocation = inText ? 0.8 : 1.35\n\n if (showStartValue) {\n // Draw StartText\n drawStepText(context, startValue, Math.PI * (startAngle + 0.5), rx * textLocation)\n }\n\n if (showEndValue) {\n // Draw EndText\n drawStepText(context, endValue, Math.PI * (endAngle + 0.5), rx * textLocation)\n }\n\n if (showStepText) {\n // Draw StepText\n let count = totalValue / step\n\n for (let num = 1; num < count; num++) {\n let value = startValue + step * num\n let ang = Math.PI * ((circleSize / count) * num + startAngle + 0.5)\n\n drawStepText(context, value, ang, rx * textLocation)\n }\n }\n\n context.scale(1, rx / ry)\n context.translate(-cx, -cy)\n }\n\n contains(x: number, y: number): boolean {\n // 컨테인즈는 Ellipse로 정의함\n var { cx, cy, rx, ry } = this.state\n\n var normx = (x - cx) / (rx * 2 - 0.5)\n var normy = (y - cy) / (ry * 2 - 0.5)\n\n return normx * normx + normy * normy < 0.25\n }\n\n _post_draw(context: CanvasRenderingContext2D) {\n this.drawText(context)\n }\n\n get nature() {\n return NATURE\n }\n}\n\nComponent.register('gauge-circle', GaugeCircle)\n"]}
|
|
1
|
+
{"version":3,"file":"gauge-circle.js","sourceRoot":"","sources":["../src/gauge-circle.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, Donut, ValueHolder } from '@hatiolab/things-scene'\n\nimport { PROPERTIES } from './gauge-properties'\n\nconst NATURE: ComponentNature = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n ...PROPERTIES,\n {\n type: 'number',\n label: 'start-angle',\n name: 'startAngle',\n property: 'startAngle'\n },\n {\n type: 'number',\n label: 'end-angle',\n name: 'endAngle',\n property: 'endAngle'\n },\n {\n type: 'color',\n label: 'text-fill-style',\n name: 'textFillStyle',\n property: 'textFillStyle'\n },\n {\n type: 'color',\n label: 'needle-fill-style',\n name: 'needleFillStyle',\n property: 'needleFillStyle'\n },\n {\n type: 'color',\n label: 'inner-circle-fill-style',\n name: 'innerCircleFillStyle',\n property: 'innerCircleFillStyle'\n },\n {\n type: 'checkbox',\n label: 'in-text',\n name: 'inText',\n property: 'inText'\n }\n ],\n help: 'scene/component/gauge-circle'\n}\n\nfunction drawStepLine(context: CanvasRenderingContext2D, ang: number, rx: number, stepNeedleSize: number) {\n context.rotate(ang)\n context.translate(0, -rx)\n\n context.fillRect(0, -rx * 0.14, stepNeedleSize, rx * 0.175)\n context.translate(0, rx)\n context.rotate(-ang)\n}\n\nfunction drawSubStepLine(context: CanvasRenderingContext2D, ang: number, rx: number, stepNeedleSize: number) {\n context.rotate(ang)\n context.translate(0, -rx)\n\n context.fillRect(0, -rx * 0.04, stepNeedleSize, rx * 0.075)\n context.translate(0, rx)\n context.rotate(-ang)\n}\n\nfunction drawStepText(context: CanvasRenderingContext2D, text: string, ang: number, rx: number) {\n context.rotate(ang)\n context.translate(0, -rx * 0.83)\n context.rotate(-ang)\n\n context.fillText(text, 0, 0)\n context.rotate(ang)\n context.translate(0, rx * 0.83)\n context.rotate(-ang)\n}\n\nfunction drawNeedle(context: CanvasRenderingContext2D, rx: number, ang: number) {\n context.rotate(ang)\n\n context.beginPath()\n\n context.moveTo(rx * 0.035, 0) // 중앙 두께\n\n context.lineTo(0, rx * 0.8) // 끝 점\n\n context.lineTo(-rx * 0.035, 0) // 중앙 두께\n\n context.lineTo(-rx * 0.015, -rx * 0.2) // 뒷쪽 두께\n context.lineTo(rx * 0.015, -rx * 0.2) // 뒷쪽 두께\n\n context.rotate(-ang)\n}\n\nexport default class GaugeCircle extends ValueHolder(Donut) {\n render(context: CanvasRenderingContext2D) {\n var {\n lineWidth = 20,\n startValue,\n endValue,\n step,\n subStep,\n startAngle = 0,\n endAngle = 180,\n fontColor = 'black',\n showStepText = true,\n showStartValue = true,\n showEndValue = true,\n showStepLine = true,\n showSubStep = true,\n inText = true,\n colorStops, // 스텝별 각각 다른 색\n fillStyle,\n textFillStyle = 'black',\n needleFillStyle = 'black',\n innerCircleFillStyle = 'gray',\n stepNeedleSize = 2,\n stepFillStyle,\n stepTextSize,\n cx,\n cy,\n rx,\n ry,\n ratio,\n animFromBase = false\n } = this.state\n\n startValue = Number(startValue)\n\n this.animOnValueChange(this.value, animFromBase, startValue)\n\n const RADIAN = 0.0174533 / Math.PI\n const rxRatio = (rx / 100) * ratio // 원 안에 지워지는 비율을 계산한 rx - ratio의 비율에 따라 크기가 변함\n const ryRatio = (ry / 100) * ratio // 원 안에 지워지는 비율을 계산한 ry - ratio의 비율에 따라 크기가 변함\n const circleSize = (endAngle - startAngle) / 180 // 원의 총 길이. - PI * 2가 원이므로 (360도 = 2, 180도 = 1)\n const totalValue = endValue - startValue // 게이지의 시작과 끝 값의 크기\n\n startAngle = startAngle * RADIAN - 0.5 // 맨 위쪽을 중심으로 앵글의 범위에 따라 왼쪽으로 넓어짐\n endAngle = endAngle * RADIAN - 0.5 // 맨 위쪽을 중심으로 앵글의 범위에 따라 오른쪽으로 넓어짐\n\n context.translate(cx, cy)\n\n //// 메인 게이지 원 그리기 ////\n context.beginPath()\n\n context.ellipse(0, 0, Math.abs(rx), Math.abs(ry), 0, startAngle * Math.PI, endAngle * Math.PI)\n this.drawStroke(context)\n context.ellipse(0, 0, Math.abs(rxRatio), Math.abs(ryRatio), 0, endAngle * Math.PI, startAngle * Math.PI, true) // 반대로 그리며 원을 지움.\n // this.drawFill(context)\n\n context.closePath()\n\n //// 스텝별 색 칠하기 ////\n if (colorStops) {\n let beforeValue = 0\n let endStepAngle = 0\n context.moveTo(0, 0)\n\n colorStops.forEach(function (\n v: { position: number; color: string },\n idx: number,\n arr: { position: number; color: string }[]\n ) {\n context.beginPath()\n\n let value = Math.max(Math.min(v.position - startValue, totalValue), 0) // v.position 범위의 최소값은 0, 최대값은 totalValue가 되야함.\n let startStepAngle = endStepAngle || Math.PI * (startAngle + (circleSize * beforeValue) / totalValue)\n\n if (idx === arr.length - 1)\n // 마지막값은 무조건 끝까지 채워주도록 한다\n endStepAngle = Math.PI * (startAngle + circleSize)\n else endStepAngle = Math.PI * (startAngle + (circleSize * value) / totalValue)\n\n if (beforeValue > totalValue || beforeValue > value)\n // 값이 게이지의 최대 값을 넘어가거나 이전 값 보다 현재값이 작으면 다시 그릴 필요 없음\n return false\n\n context.ellipse(0, 0, Math.abs(rx), Math.abs(ry), 0, startStepAngle, endStepAngle)\n context.ellipse(0, 0, Math.abs(rxRatio), Math.abs(ryRatio), 0, endStepAngle, startStepAngle, true)\n context.fillStyle = v.color\n context.fill()\n\n beforeValue = value\n })\n }\n context.scale(1, ry / rx)\n\n //// 바늘 그리기 ////\n context.beginPath()\n let drawingValue = this.animValue\n drawingValue = Math.max(Math.min(drawingValue, endValue), startValue) // 그려지는 값은 startValue보다 작을 수 없고, endValue보다 클 수 없음.\n\n let ang = Math.PI * ((circleSize * (drawingValue - startValue)) / totalValue + startAngle - 0.5)\n\n drawNeedle(context, rx, ang)\n\n context.fillStyle = needleFillStyle\n context.fill()\n\n //// 중앙 원 그리기 ////\n context.beginPath()\n context.ellipse(0, 0, Math.abs(rx) / 15, Math.abs(rx) / 15, 0, 0, 2 * Math.PI)\n context.fillStyle = innerCircleFillStyle\n context.fill()\n\n //// 스텝 선 그리기 ////\n context.fillStyle = stepFillStyle\n if (showStepLine) {\n let count = totalValue / step\n\n // Draw StartValue\n drawStepLine(context, Math.PI * (startAngle + 0.5), rx * 0.8, stepNeedleSize) // 원을 그릴때 PI는 45도 부터 그리지만 angle은 0도부터 틀어서 + 0.5도를 곱해줘야함\n // Draw StepValue\n for (let num = 1; num < count; num++) {\n let ang = Math.PI * ((circleSize / count) * num + startAngle + 0.5)\n\n drawStepLine(context, ang, rx * 0.8, stepNeedleSize)\n }\n // Draw EndValue\n drawStepLine(context, Math.PI * (endAngle + 0.5), rx * 0.8, stepNeedleSize)\n }\n\n //// 서브 스탭 그리기 ////\n if (showSubStep) {\n let count = totalValue\n\n // Draw StepValue\n for (let num = 1; num <= count; num++) {\n if (num % step == 0 || num % subStep != 0) {\n // 메인 스탭과 서브 스탭은 그리지 않음\n continue\n }\n let ang = Math.PI * ((circleSize / count) * num + startAngle + 0.5)\n\n drawSubStepLine(context, ang, rx * 0.8, stepNeedleSize)\n }\n }\n\n //// 스텝 텍스트 그리기 ////\n context.fillStyle = textFillStyle\n context.font = (rx * stepTextSize) / 50 + 'px arial'\n context.textBaseline = 'middle'\n context.textAlign = 'center'\n let textLocation = inText ? 0.8 : 1.35\n\n if (showStartValue) {\n // Draw StartText\n drawStepText(context, startValue, Math.PI * (startAngle + 0.5), rx * textLocation)\n }\n\n if (showEndValue) {\n // Draw EndText\n drawStepText(context, endValue, Math.PI * (endAngle + 0.5), rx * textLocation)\n }\n\n if (showStepText) {\n // Draw StepText\n let count = totalValue / step\n\n for (let num = 1; num < count; num++) {\n let value = startValue + step * num\n let ang = Math.PI * ((circleSize / count) * num + startAngle + 0.5)\n\n drawStepText(context, value, ang, rx * textLocation)\n }\n }\n\n context.scale(1, rx / ry)\n context.translate(-cx, -cy)\n }\n\n contains(x: number, y: number): boolean {\n // 컨테인즈는 Ellipse로 정의함\n var { cx, cy, rx, ry } = this.state\n\n var normx = (x - cx) / (rx * 2 - 0.5)\n var normy = (y - cy) / (ry * 2 - 0.5)\n\n return normx * normx + normy * normy < 0.25\n }\n\n postrender(context: CanvasRenderingContext2D) {\n this.drawText(context)\n }\n\n get nature() {\n return NATURE\n }\n}\n\nComponent.register('gauge-circle', GaugeCircle)\n"]}
|
package/dist/gauge-horizon.d.ts
CHANGED
|
@@ -5,8 +5,8 @@ declare const GaugeHorizon_base: (new (...args: any[]) => {
|
|
|
5
5
|
animOnValueChange(value: number, animFromBase: boolean, base: number): void;
|
|
6
6
|
}) & typeof Shape;
|
|
7
7
|
export default class GaugeHorizon extends GaugeHorizon_base {
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
render(context: CanvasRenderingContext2D): void;
|
|
9
|
+
postrender(context: CanvasRenderingContext2D): void;
|
|
10
10
|
get nature(): ComponentNature;
|
|
11
11
|
}
|
|
12
12
|
export {};
|
package/dist/gauge-horizon.js
CHANGED
|
@@ -31,7 +31,7 @@ const NATURE = {
|
|
|
31
31
|
help: 'scene/component/gauge-horizon'
|
|
32
32
|
};
|
|
33
33
|
export default class GaugeHorizon extends ValueHolder(RectPath(Shape)) {
|
|
34
|
-
|
|
34
|
+
render(context) {
|
|
35
35
|
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;
|
|
36
36
|
startValue = Number(startValue);
|
|
37
37
|
this.animOnValueChange(this.value, animFromBase, startValue);
|
|
@@ -134,7 +134,7 @@ export default class GaugeHorizon extends ValueHolder(RectPath(Shape)) {
|
|
|
134
134
|
context.closePath();
|
|
135
135
|
context.translate(-left, -top);
|
|
136
136
|
}
|
|
137
|
-
|
|
137
|
+
postrender(context) {
|
|
138
138
|
this.drawText(context);
|
|
139
139
|
}
|
|
140
140
|
get nature() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gauge-horizon.js","sourceRoot":"","sources":["../src/gauge-horizon.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, RectPath, Shape, ValueHolder } from '@hatiolab/things-scene'\n\nimport { PROPERTIES } from './gauge-properties'\n\nconst NATURE: ComponentNature = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n ...PROPERTIES,\n {\n type: 'color',\n label: 'text-fill-style',\n name: 'textFillStyle',\n property: 'textFillStyle'\n },\n {\n type: 'color',\n label: 'needle-fill-style',\n name: 'needleFillStyle',\n property: 'needleFillStyle'\n },\n {\n type: 'number',\n label: 'needle-size',\n name: 'needleSize',\n property: 'needleSize'\n }\n ],\n help: 'scene/component/gauge-horizon'\n}\n\nexport default class GaugeHorizon extends ValueHolder(RectPath(Shape)) {\n _draw(context: CanvasRenderingContext2D) {\n var {\n startValue,\n endValue,\n step,\n subStep,\n colorStops,\n needleFillStyle,\n stepFillStyle,\n textFillStyle,\n needleSize,\n stepNeedleSize,\n stepTextSize,\n showStepText = true,\n showStartValue = true,\n showEndValue = true,\n showStepLine = true,\n showSubStep = true,\n width,\n height,\n top,\n left,\n animFromBase = false\n } = this.state\n\n startValue = Number(startValue)\n\n this.animOnValueChange(this.value, animFromBase, startValue)\n\n const totalValue = endValue - startValue // 게이지의 시작과 끝 값의 크기\n\n context.translate(left, top) // top과 left의 좌표에 영향을 받지 않기 위해 transalate를 한다음 모든 탑과 레프트의 좌표를 0으로 줌\n\n //// 메인 막대 그리기 ////\n context.beginPath()\n\n context.rect(0, 0, width, height)\n\n this.drawFill(context)\n this.drawStroke(context)\n context.closePath()\n\n //// 스텝별 색 칠하기 ////\n if (colorStops) {\n let beforeValue = 0\n colorStops.forEach(function (\n v: { position: number; color: string },\n idx: number,\n arr: { position: number; color: string }[]\n ) {\n context.beginPath()\n\n let value = Math.max(Math.min(v.position - startValue, totalValue), 0) // v.position 범위의 최소값은 0, 최대값은 totalValue가 되야함.\n let startStepPosition = (width * beforeValue) / totalValue\n let endStepPosition\n // console.log(startStepPosition + (width * value / totalValue));\n if (idx == arr.length - 1 || startStepPosition + (width * value) / totalValue)\n // 배열의 마지막 값이거나 중간 시작값 + 그려지는 값이 width 를 넘을 경우는 무조건 끝까지 채워주도록 한다\n endStepPosition = width - startStepPosition\n else endStepPosition = (width * value) / totalValue\n\n if (beforeValue > totalValue || beforeValue > value)\n // 값이 게이지의 최대 값을 넘어가거나 이전 값 보다 현재값이 작으면 다시 그릴 필요 없음\n return false\n\n context.rect(startStepPosition, 0, endStepPosition, height)\n\n context.fillStyle = v.color\n context.fill()\n\n beforeValue = value\n })\n }\n\n //// 스텝 선 그리기 ////\n context.fillStyle = stepFillStyle\n if (showStepLine) {\n let count = totalValue / step\n let stepSize = width * 0.06\n\n // Draw StartValue\n context.fillRect(0, height - stepSize, stepNeedleSize, stepSize)\n // Draw StepValue\n for (let num = 1; num < count; num++) {\n let locate = (width / count) * num\n\n context.fillRect(locate, height - stepSize, stepNeedleSize, stepSize)\n }\n // Draw EndValue\n context.fillRect(width, height - stepSize, stepNeedleSize, stepSize)\n }\n\n //// 서브 스탭 그리기 ////\n if (showSubStep) {\n let count = totalValue\n let subStepSize = width * 0.027\n // Draw StartValue\n context.fillRect(0, height - subStepSize, stepNeedleSize, subStepSize)\n\n // Draw StepValue\n for (let num = 1; num <= count; num++) {\n if (num % step == 0 || num % subStep != 0) {\n // 메인 스탭과 서브 스탭은 그리지 않음\n continue\n }\n let locate = (width / count) * num\n context.fillRect(locate, height - subStepSize, stepNeedleSize, subStepSize)\n }\n }\n\n //// 스텝 텍스트 그리기 ////\n let fontSize = (width * stepTextSize) / 150\n context.fillStyle = textFillStyle\n context.font = fontSize + 'px arial'\n context.textBaseline = 'middle'\n context.textAlign = 'center'\n if (showStartValue) {\n // Draw StartText\n context.fillText(startValue, 0, height + fontSize * 0.75)\n }\n\n if (showEndValue) {\n // Draw EndText\n context.fillText(endValue, width, height + fontSize * 0.75)\n }\n\n if (showStepText) {\n // Draw StepText\n let count = totalValue / step\n\n for (let num = 1; num < count; num++) {\n let value = startValue + step * num\n let locate = (width / count) * num\n\n context.fillText(value, locate, height + fontSize * 0.75)\n }\n }\n\n //// 바늘 그리기 ////\n context.beginPath()\n let drawingValue = this.animValue\n drawingValue = Math.max(Math.min(drawingValue, endValue), startValue) // 그려지는 값은 startValue보다 작을 수 없고, endValue보다 클 수 없음.\n let position = ((drawingValue - startValue) / totalValue) * width\n\n needleSize *= 4\n context.moveTo(position, height + fontSize * 1.4)\n context.lineTo(position + needleSize / 2, height + needleSize + fontSize * 1.4)\n context.lineTo(position - needleSize / 2, height + needleSize + fontSize * 1.4)\n\n context.fillStyle = needleFillStyle\n context.fill()\n context.closePath()\n\n context.translate(-left, -top)\n }\n\n _post_draw(context: CanvasRenderingContext2D) {\n this.drawText(context)\n }\n\n get nature() {\n return NATURE\n }\n}\n\nComponent.register('gauge-horizon', GaugeHorizon)\n"]}
|
|
1
|
+
{"version":3,"file":"gauge-horizon.js","sourceRoot":"","sources":["../src/gauge-horizon.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, RectPath, Shape, ValueHolder } from '@hatiolab/things-scene'\n\nimport { PROPERTIES } from './gauge-properties'\n\nconst NATURE: ComponentNature = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n ...PROPERTIES,\n {\n type: 'color',\n label: 'text-fill-style',\n name: 'textFillStyle',\n property: 'textFillStyle'\n },\n {\n type: 'color',\n label: 'needle-fill-style',\n name: 'needleFillStyle',\n property: 'needleFillStyle'\n },\n {\n type: 'number',\n label: 'needle-size',\n name: 'needleSize',\n property: 'needleSize'\n }\n ],\n help: 'scene/component/gauge-horizon'\n}\n\nexport default class GaugeHorizon extends ValueHolder(RectPath(Shape)) {\n render(context: CanvasRenderingContext2D) {\n var {\n startValue,\n endValue,\n step,\n subStep,\n colorStops,\n needleFillStyle,\n stepFillStyle,\n textFillStyle,\n needleSize,\n stepNeedleSize,\n stepTextSize,\n showStepText = true,\n showStartValue = true,\n showEndValue = true,\n showStepLine = true,\n showSubStep = true,\n width,\n height,\n top,\n left,\n animFromBase = false\n } = this.state\n\n startValue = Number(startValue)\n\n this.animOnValueChange(this.value, animFromBase, startValue)\n\n const totalValue = endValue - startValue // 게이지의 시작과 끝 값의 크기\n\n context.translate(left, top) // top과 left의 좌표에 영향을 받지 않기 위해 transalate를 한다음 모든 탑과 레프트의 좌표를 0으로 줌\n\n //// 메인 막대 그리기 ////\n context.beginPath()\n\n context.rect(0, 0, width, height)\n\n this.drawFill(context)\n this.drawStroke(context)\n context.closePath()\n\n //// 스텝별 색 칠하기 ////\n if (colorStops) {\n let beforeValue = 0\n colorStops.forEach(function (\n v: { position: number; color: string },\n idx: number,\n arr: { position: number; color: string }[]\n ) {\n context.beginPath()\n\n let value = Math.max(Math.min(v.position - startValue, totalValue), 0) // v.position 범위의 최소값은 0, 최대값은 totalValue가 되야함.\n let startStepPosition = (width * beforeValue) / totalValue\n let endStepPosition\n // console.log(startStepPosition + (width * value / totalValue));\n if (idx == arr.length - 1 || startStepPosition + (width * value) / totalValue)\n // 배열의 마지막 값이거나 중간 시작값 + 그려지는 값이 width 를 넘을 경우는 무조건 끝까지 채워주도록 한다\n endStepPosition = width - startStepPosition\n else endStepPosition = (width * value) / totalValue\n\n if (beforeValue > totalValue || beforeValue > value)\n // 값이 게이지의 최대 값을 넘어가거나 이전 값 보다 현재값이 작으면 다시 그릴 필요 없음\n return false\n\n context.rect(startStepPosition, 0, endStepPosition, height)\n\n context.fillStyle = v.color\n context.fill()\n\n beforeValue = value\n })\n }\n\n //// 스텝 선 그리기 ////\n context.fillStyle = stepFillStyle\n if (showStepLine) {\n let count = totalValue / step\n let stepSize = width * 0.06\n\n // Draw StartValue\n context.fillRect(0, height - stepSize, stepNeedleSize, stepSize)\n // Draw StepValue\n for (let num = 1; num < count; num++) {\n let locate = (width / count) * num\n\n context.fillRect(locate, height - stepSize, stepNeedleSize, stepSize)\n }\n // Draw EndValue\n context.fillRect(width, height - stepSize, stepNeedleSize, stepSize)\n }\n\n //// 서브 스탭 그리기 ////\n if (showSubStep) {\n let count = totalValue\n let subStepSize = width * 0.027\n // Draw StartValue\n context.fillRect(0, height - subStepSize, stepNeedleSize, subStepSize)\n\n // Draw StepValue\n for (let num = 1; num <= count; num++) {\n if (num % step == 0 || num % subStep != 0) {\n // 메인 스탭과 서브 스탭은 그리지 않음\n continue\n }\n let locate = (width / count) * num\n context.fillRect(locate, height - subStepSize, stepNeedleSize, subStepSize)\n }\n }\n\n //// 스텝 텍스트 그리기 ////\n let fontSize = (width * stepTextSize) / 150\n context.fillStyle = textFillStyle\n context.font = fontSize + 'px arial'\n context.textBaseline = 'middle'\n context.textAlign = 'center'\n if (showStartValue) {\n // Draw StartText\n context.fillText(startValue, 0, height + fontSize * 0.75)\n }\n\n if (showEndValue) {\n // Draw EndText\n context.fillText(endValue, width, height + fontSize * 0.75)\n }\n\n if (showStepText) {\n // Draw StepText\n let count = totalValue / step\n\n for (let num = 1; num < count; num++) {\n let value = startValue + step * num\n let locate = (width / count) * num\n\n context.fillText(value, locate, height + fontSize * 0.75)\n }\n }\n\n //// 바늘 그리기 ////\n context.beginPath()\n let drawingValue = this.animValue\n drawingValue = Math.max(Math.min(drawingValue, endValue), startValue) // 그려지는 값은 startValue보다 작을 수 없고, endValue보다 클 수 없음.\n let position = ((drawingValue - startValue) / totalValue) * width\n\n needleSize *= 4\n context.moveTo(position, height + fontSize * 1.4)\n context.lineTo(position + needleSize / 2, height + needleSize + fontSize * 1.4)\n context.lineTo(position - needleSize / 2, height + needleSize + fontSize * 1.4)\n\n context.fillStyle = needleFillStyle\n context.fill()\n context.closePath()\n\n context.translate(-left, -top)\n }\n\n postrender(context: CanvasRenderingContext2D) {\n this.drawText(context)\n }\n\n get nature() {\n return NATURE\n }\n}\n\nComponent.register('gauge-horizon', GaugeHorizon)\n"]}
|
package/dist/gauge-vertical.d.ts
CHANGED
|
@@ -5,8 +5,8 @@ declare const GaugeVertical_base: (new (...args: any[]) => {
|
|
|
5
5
|
animOnValueChange(value: number, animFromBase: boolean, base: number): void;
|
|
6
6
|
}) & typeof Shape;
|
|
7
7
|
export default class GaugeVertical extends GaugeVertical_base {
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
render(context: CanvasRenderingContext2D): void;
|
|
9
|
+
postrender(context: CanvasRenderingContext2D): void;
|
|
10
10
|
get nature(): ComponentNature;
|
|
11
11
|
}
|
|
12
12
|
export {};
|
package/dist/gauge-vertical.js
CHANGED
|
@@ -31,7 +31,7 @@ const NATURE = {
|
|
|
31
31
|
help: 'scene/component/gauge-vertical'
|
|
32
32
|
};
|
|
33
33
|
export default class GaugeVertical extends ValueHolder(RectPath(Shape)) {
|
|
34
|
-
|
|
34
|
+
render(context) {
|
|
35
35
|
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;
|
|
36
36
|
startValue = Number(startValue);
|
|
37
37
|
this.animOnValueChange(this.value, animFromBase, startValue);
|
|
@@ -132,7 +132,7 @@ export default class GaugeVertical extends ValueHolder(RectPath(Shape)) {
|
|
|
132
132
|
}
|
|
133
133
|
context.translate(-left, -top);
|
|
134
134
|
}
|
|
135
|
-
|
|
135
|
+
postrender(context) {
|
|
136
136
|
this.drawText(context);
|
|
137
137
|
}
|
|
138
138
|
get nature() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gauge-vertical.js","sourceRoot":"","sources":["../src/gauge-vertical.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,SAAS,EAAmB,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEjG,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAE/C,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,GAAG,UAAU;QACb;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,iBAAiB;YACxB,IAAI,EAAE,eAAe;YACrB,QAAQ,EAAE,eAAe;SAC1B;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,mBAAmB;YAC1B,IAAI,EAAE,iBAAiB;YACvB,QAAQ,EAAE,iBAAiB;SAC5B;QACD;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,aAAa;YACpB,IAAI,EAAE,YAAY;YAClB,QAAQ,EAAE,YAAY;SACvB;KACF;IACD,IAAI,EAAE,gCAAgC;CACvC,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACrE,KAAK,CAAC,OAAiC;QACrC,IAAI,EACF,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,UAAU,EACV,eAAe,EACf,aAAa,EACb,aAAa,EACb,UAAU,EACV,cAAc,EACd,YAAY,EACZ,YAAY,GAAG,IAAI,EACnB,cAAc,GAAG,IAAI,EACrB,YAAY,GAAG,IAAI,EACnB,YAAY,GAAG,IAAI,EACnB,WAAW,GAAG,IAAI,EAClB,KAAK,EACL,MAAM,EACN,GAAG,EACH,IAAI,EACJ,YAAY,GAAG,KAAK,EACrB,GAAG,IAAI,CAAC,KAAK,CAAA;QAEd,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;QAE/B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,EAAE,UAAU,CAAC,CAAA;QAE5D,MAAM,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAA,CAAC,mBAAmB;QAE5D,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA,CAAC,mEAAmE;QAEhG,qBAAqB;QACrB,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;QAEjC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;QACtB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;QACxB,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,qBAAqB;QACrB,IAAI,UAAU,EAAE;YACd,IAAI,WAAW,GAAG,CAAC,CAAA;YACnB,UAAU,CAAC,OAAO,CAAC,UACjB,CAAsC,EACtC,GAAW,EACX,GAA0C;gBAE1C,OAAO,CAAC,SAAS,EAAE,CAAA;gBAEnB,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,GAAG,UAAU,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC,CAAA,CAAC,+CAA+C;gBACtH,IAAI,iBAAiB,GAAG,CAAC,MAAM,GAAG,WAAW,CAAC,GAAG,UAAU,CAAA;gBAC3D,IAAI,eAAe,CAAA;gBAEnB,kEAAkE;gBAClE,IAAI,GAAG,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,IAAI,iBAAiB,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,UAAU;oBAC7E,iEAAiE;oBACjE,eAAe,GAAG,MAAM,GAAG,iBAAiB,CAAA;;oBACzC,eAAe,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,UAAU,CAAA;gBAE7D,IAAI,WAAW,GAAG,UAAU,IAAI,WAAW,GAAG,KAAK;oBACjD,mDAAmD;oBACnD,OAAO,KAAK,CAAA;gBAEd,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,GAAG,iBAAiB,EAAE,KAAK,EAAE,CAAC,eAAe,CAAC,CAAA;gBAEpE,OAAO,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,CAAA;gBAC3B,OAAO,CAAC,IAAI,EAAE,CAAA;gBACd,WAAW,GAAG,KAAK,CAAA;YACrB,CAAC,CAAC,CAAA;SACH;QAED,kBAAkB;QAClB,OAAO,CAAC,SAAS,EAAE,CAAA;QACnB,IAAI,YAAY,GAAG,IAAI,CAAC,SAAS,CAAA;QACjC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAA,CAAC,mDAAmD;QACzH,IAAI,QAAQ,GAAG,MAAM,GAAG,CAAC,CAAC,YAAY,GAAG,UAAU,CAAC,GAAG,UAAU,CAAC,GAAG,MAAM,CAAA;QAE3E,UAAU,IAAI,CAAC,CAAA;QACf,OAAO,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,EAAE,QAAQ,CAAC,CAAA;QACtC,OAAO,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,GAAG,UAAU,EAAE,QAAQ,GAAG,UAAU,GAAG,CAAC,CAAC,CAAA;QACpE,OAAO,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,GAAG,UAAU,EAAE,QAAQ,GAAG,UAAU,GAAG,CAAC,CAAC,CAAA;QAEpE,OAAO,CAAC,SAAS,GAAG,eAAe,CAAA;QACnC,OAAO,CAAC,IAAI,EAAE,CAAA;QACd,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,oBAAoB;QACpB,OAAO,CAAC,SAAS,GAAG,aAAa,CAAA;QACjC,IAAI,YAAY,EAAE;YAChB,IAAI,KAAK,GAAG,UAAU,GAAG,IAAI,CAAA;YAE7B,kBAAkB;YAClB,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,cAAc,CAAC,CAAA;YAC1D,iBAAiB;YACjB,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,KAAK,EAAE,GAAG,EAAE,EAAE;gBACpC,IAAI,MAAM,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,GAAG,CAAA;gBAEnC,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,cAAc,CAAC,CAAA;aAC3D;YACD,gBAAgB;YAChB,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,cAAc,CAAC,CAAA;SACtD;QAED,qBAAqB;QACrB,IAAI,WAAW,EAAE;YACf,IAAI,KAAK,GAAG,UAAU,CAAA;YAEtB,kBAAkB;YAClB,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,EAAE,cAAc,CAAC,CAAA;YAEtD,iBAAiB;YACjB,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,IAAI,KAAK,EAAE,GAAG,EAAE,EAAE;gBACrC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,GAAG,GAAG,OAAO,IAAI,CAAC,EAAE;oBACzC,uBAAuB;oBACvB,SAAQ;iBACT;gBACD,IAAI,MAAM,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,GAAG,CAAA;gBACnC,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,KAAK,EAAE,cAAc,CAAC,CAAA;aAC5D;SACF;QAED,sBAAsB;QACtB,IAAI,QAAQ,GAAG,CAAC,MAAM,GAAG,YAAY,CAAC,GAAG,GAAG,CAAA;QAC5C,OAAO,CAAC,SAAS,GAAG,aAAa,CAAA;QACjC,OAAO,CAAC,IAAI,GAAG,QAAQ,GAAG,UAAU,CAAA;QACpC,OAAO,CAAC,YAAY,GAAG,QAAQ,CAAA;QAC/B,OAAO,CAAC,SAAS,GAAG,QAAQ,CAAA;QAC5B,IAAI,cAAc,EAAE;YAClB,iBAAiB;YACjB,OAAO,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;SAChD;QAED,IAAI,YAAY,EAAE;YAChB,eAAe;YACf,OAAO,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAA;SACzC;QAED,IAAI,YAAY,EAAE;YAChB,gBAAgB;YAChB,IAAI,KAAK,GAAG,UAAU,GAAG,IAAI,CAAA;YAE7B,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,KAAK,EAAE,GAAG,EAAE,EAAE;gBACpC,IAAI,KAAK,GAAG,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,GAAG,CAAA;gBAC3C,IAAI,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,GAAG,CAAA;gBAE5C,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;aAC3C;SACF;QAED,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAA;IAChC,CAAC;IAED,UAAU,CAAC,OAAiC;QAC1C,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;IACxB,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, RectPath, Shape, ValueHolder } from '@hatiolab/things-scene'\n\nimport { PROPERTIES } from './gauge-properties'\n\nconst NATURE: ComponentNature = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n ...PROPERTIES,\n {\n type: 'color',\n label: 'text-fill-style',\n name: 'textFillStyle',\n property: 'textFillStyle'\n },\n {\n type: 'color',\n label: 'needle-fill-style',\n name: 'needleFillStyle',\n property: 'needleFillStyle'\n },\n {\n type: 'number',\n label: 'needle-size',\n name: 'needleSize',\n property: 'needleSize'\n }\n ],\n help: 'scene/component/gauge-vertical'\n}\n\nexport default class GaugeVertical extends ValueHolder(RectPath(Shape)) {\n _draw(context: CanvasRenderingContext2D) {\n var {\n startValue,\n endValue,\n step,\n subStep,\n colorStops,\n needleFillStyle,\n stepFillStyle,\n textFillStyle,\n needleSize,\n stepNeedleSize,\n stepTextSize,\n showStepText = true,\n showStartValue = true,\n showEndValue = true,\n showStepLine = true,\n showSubStep = true,\n width,\n height,\n top,\n left,\n animFromBase = false\n } = this.state\n\n startValue = Number(startValue)\n\n this.animOnValueChange(this.value, animFromBase, startValue)\n\n const totalValue = endValue - startValue // 게이지의 시작과 끝 값의 크기\n\n context.translate(left, top) // top과 left의 좌표에 영향을 받지 않기 위해 transalate를 한다음 모든 탑과 레프트의 좌표를 0으로 줌\n\n //// 메인 막대 그리기 ////\n context.beginPath()\n\n context.rect(0, 0, width, height)\n\n this.drawFill(context)\n this.drawStroke(context)\n context.closePath()\n\n //// 스텝별 색 칠하기 ////\n if (colorStops) {\n let beforeValue = 0\n colorStops.forEach(function (\n v: { position: number; color: string },\n idx: number,\n arr: { position: number; color: string }[]\n ) {\n context.beginPath()\n\n let value = Math.max(Math.min(v.position - startValue, totalValue), 0) // v.position 범위의 최소값은 0, 최대값은 totalValue가 되야함.\n let startStepPosition = (height * beforeValue) / totalValue\n let endStepPosition\n\n // console.log(startStepPosition + (height * value / totalValue));\n if (idx === arr.length - 1 || startStepPosition + (height * value) / totalValue)\n // 배열의 마지막 값이거나 중간 시작값 + 그려지는 값이 height 를 넘을 경우는 무조건 끝까지 채워주도록 한다\n endStepPosition = height - startStepPosition\n else endStepPosition = height - (height * value) / totalValue\n\n if (beforeValue > totalValue || beforeValue > value)\n // 값이 게이지의 최대 값을 넘어가거나 이전 값 보다 현재값이 작으면 다시 그릴 필요 없음\n return false\n\n context.rect(0, height - startStepPosition, width, -endStepPosition)\n\n context.fillStyle = v.color\n context.fill()\n beforeValue = value\n })\n }\n\n //// 바늘 그리기 ////\n context.beginPath()\n let drawingValue = this.animValue\n drawingValue = Math.max(Math.min(drawingValue, endValue), startValue) // 그려지는 값은 startValue보다 작을 수 없고, endValue보다 클 수 없음.\n let position = height - ((drawingValue - startValue) / totalValue) * height\n\n needleSize *= 4\n context.moveTo(width * 1.05, position)\n context.lineTo(width * 1.05 + needleSize, position + needleSize / 2)\n context.lineTo(width * 1.05 + needleSize, position - needleSize / 2)\n\n context.fillStyle = needleFillStyle\n context.fill()\n context.closePath()\n\n //// 스텝 선 그리기 ////\n context.fillStyle = stepFillStyle\n if (showStepLine) {\n let count = totalValue / step\n\n // Draw StartValue\n context.fillRect(0, height, height * 0.06, stepNeedleSize)\n // Draw StepValue\n for (let num = 1; num < count; num++) {\n let locate = (height / count) * num\n\n context.fillRect(0, locate, height * 0.06, stepNeedleSize)\n }\n // Draw EndValue\n context.fillRect(0, 0, height * 0.06, stepNeedleSize)\n }\n\n //// 서브 스탭 그리기 ////\n if (showSubStep) {\n let count = totalValue\n\n // Draw StartValue\n context.fillRect(0, 0, height * 0.027, stepNeedleSize)\n\n // Draw StepValue\n for (let num = 1; num <= count; num++) {\n if (num % step == 0 || num % subStep != 0) {\n // 메인 스탭과 서브 스탭은 그리지 않음\n continue\n }\n let locate = (height / count) * num\n context.fillRect(0, locate, height * 0.027, stepNeedleSize)\n }\n }\n\n //// 스텝 텍스트 그리기 ////\n let fontSize = (height * stepTextSize) / 150\n context.fillStyle = textFillStyle\n context.font = fontSize + 'px arial'\n context.textBaseline = 'middle'\n context.textAlign = 'center'\n if (showStartValue) {\n // Draw StartText\n context.fillText(startValue, -fontSize, height)\n }\n\n if (showEndValue) {\n // Draw EndText\n context.fillText(endValue, -fontSize, 0)\n }\n\n if (showStepText) {\n // Draw StepText\n let count = totalValue / step\n\n for (let num = 1; num < count; num++) {\n let value = startValue + Number(step) * num\n let locate = height - (height / count) * num\n\n context.fillText(value, -fontSize, locate)\n }\n }\n\n context.translate(-left, -top)\n }\n\n _post_draw(context: CanvasRenderingContext2D) {\n this.drawText(context)\n }\n\n get nature() {\n return NATURE\n }\n}\n\nComponent.register('gauge-vertical', GaugeVertical)\n"]}
|
|
1
|
+
{"version":3,"file":"gauge-vertical.js","sourceRoot":"","sources":["../src/gauge-vertical.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, RectPath, Shape, ValueHolder } from '@hatiolab/things-scene'\n\nimport { PROPERTIES } from './gauge-properties'\n\nconst NATURE: ComponentNature = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n ...PROPERTIES,\n {\n type: 'color',\n label: 'text-fill-style',\n name: 'textFillStyle',\n property: 'textFillStyle'\n },\n {\n type: 'color',\n label: 'needle-fill-style',\n name: 'needleFillStyle',\n property: 'needleFillStyle'\n },\n {\n type: 'number',\n label: 'needle-size',\n name: 'needleSize',\n property: 'needleSize'\n }\n ],\n help: 'scene/component/gauge-vertical'\n}\n\nexport default class GaugeVertical extends ValueHolder(RectPath(Shape)) {\n render(context: CanvasRenderingContext2D) {\n var {\n startValue,\n endValue,\n step,\n subStep,\n colorStops,\n needleFillStyle,\n stepFillStyle,\n textFillStyle,\n needleSize,\n stepNeedleSize,\n stepTextSize,\n showStepText = true,\n showStartValue = true,\n showEndValue = true,\n showStepLine = true,\n showSubStep = true,\n width,\n height,\n top,\n left,\n animFromBase = false\n } = this.state\n\n startValue = Number(startValue)\n\n this.animOnValueChange(this.value, animFromBase, startValue)\n\n const totalValue = endValue - startValue // 게이지의 시작과 끝 값의 크기\n\n context.translate(left, top) // top과 left의 좌표에 영향을 받지 않기 위해 transalate를 한다음 모든 탑과 레프트의 좌표를 0으로 줌\n\n //// 메인 막대 그리기 ////\n context.beginPath()\n\n context.rect(0, 0, width, height)\n\n this.drawFill(context)\n this.drawStroke(context)\n context.closePath()\n\n //// 스텝별 색 칠하기 ////\n if (colorStops) {\n let beforeValue = 0\n colorStops.forEach(function (\n v: { position: number; color: string },\n idx: number,\n arr: { position: number; color: string }[]\n ) {\n context.beginPath()\n\n let value = Math.max(Math.min(v.position - startValue, totalValue), 0) // v.position 범위의 최소값은 0, 최대값은 totalValue가 되야함.\n let startStepPosition = (height * beforeValue) / totalValue\n let endStepPosition\n\n // console.log(startStepPosition + (height * value / totalValue));\n if (idx === arr.length - 1 || startStepPosition + (height * value) / totalValue)\n // 배열의 마지막 값이거나 중간 시작값 + 그려지는 값이 height 를 넘을 경우는 무조건 끝까지 채워주도록 한다\n endStepPosition = height - startStepPosition\n else endStepPosition = height - (height * value) / totalValue\n\n if (beforeValue > totalValue || beforeValue > value)\n // 값이 게이지의 최대 값을 넘어가거나 이전 값 보다 현재값이 작으면 다시 그릴 필요 없음\n return false\n\n context.rect(0, height - startStepPosition, width, -endStepPosition)\n\n context.fillStyle = v.color\n context.fill()\n beforeValue = value\n })\n }\n\n //// 바늘 그리기 ////\n context.beginPath()\n let drawingValue = this.animValue\n drawingValue = Math.max(Math.min(drawingValue, endValue), startValue) // 그려지는 값은 startValue보다 작을 수 없고, endValue보다 클 수 없음.\n let position = height - ((drawingValue - startValue) / totalValue) * height\n\n needleSize *= 4\n context.moveTo(width * 1.05, position)\n context.lineTo(width * 1.05 + needleSize, position + needleSize / 2)\n context.lineTo(width * 1.05 + needleSize, position - needleSize / 2)\n\n context.fillStyle = needleFillStyle\n context.fill()\n context.closePath()\n\n //// 스텝 선 그리기 ////\n context.fillStyle = stepFillStyle\n if (showStepLine) {\n let count = totalValue / step\n\n // Draw StartValue\n context.fillRect(0, height, height * 0.06, stepNeedleSize)\n // Draw StepValue\n for (let num = 1; num < count; num++) {\n let locate = (height / count) * num\n\n context.fillRect(0, locate, height * 0.06, stepNeedleSize)\n }\n // Draw EndValue\n context.fillRect(0, 0, height * 0.06, stepNeedleSize)\n }\n\n //// 서브 스탭 그리기 ////\n if (showSubStep) {\n let count = totalValue\n\n // Draw StartValue\n context.fillRect(0, 0, height * 0.027, stepNeedleSize)\n\n // Draw StepValue\n for (let num = 1; num <= count; num++) {\n if (num % step == 0 || num % subStep != 0) {\n // 메인 스탭과 서브 스탭은 그리지 않음\n continue\n }\n let locate = (height / count) * num\n context.fillRect(0, locate, height * 0.027, stepNeedleSize)\n }\n }\n\n //// 스텝 텍스트 그리기 ////\n let fontSize = (height * stepTextSize) / 150\n context.fillStyle = textFillStyle\n context.font = fontSize + 'px arial'\n context.textBaseline = 'middle'\n context.textAlign = 'center'\n if (showStartValue) {\n // Draw StartText\n context.fillText(startValue, -fontSize, height)\n }\n\n if (showEndValue) {\n // Draw EndText\n context.fillText(endValue, -fontSize, 0)\n }\n\n if (showStepText) {\n // Draw StepText\n let count = totalValue / step\n\n for (let num = 1; num < count; num++) {\n let value = startValue + Number(step) * num\n let locate = height - (height / count) * num\n\n context.fillText(value, -fontSize, locate)\n }\n }\n\n context.translate(-left, -top)\n }\n\n postrender(context: CanvasRenderingContext2D) {\n this.drawText(context)\n }\n\n get nature() {\n return NATURE\n }\n}\n\nComponent.register('gauge-vertical', GaugeVertical)\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@operato/scene-gauge",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.50",
|
|
4
4
|
"description": "Things Scene Gauge Component",
|
|
5
5
|
"author": "heartyoh",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"prettier --write"
|
|
58
58
|
]
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "a0b29bd5518ed24918a79b73f10053f4d6b41adb"
|
|
61
61
|
}
|
package/src/gauge-circle.ts
CHANGED
|
@@ -99,7 +99,7 @@ function drawNeedle(context: CanvasRenderingContext2D, rx: number, ang: number)
|
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
export default class GaugeCircle extends ValueHolder(Donut) {
|
|
102
|
-
|
|
102
|
+
render(context: CanvasRenderingContext2D) {
|
|
103
103
|
var {
|
|
104
104
|
lineWidth = 20,
|
|
105
105
|
startValue,
|
|
@@ -285,7 +285,7 @@ export default class GaugeCircle extends ValueHolder(Donut) {
|
|
|
285
285
|
return normx * normx + normy * normy < 0.25
|
|
286
286
|
}
|
|
287
287
|
|
|
288
|
-
|
|
288
|
+
postrender(context: CanvasRenderingContext2D) {
|
|
289
289
|
this.drawText(context)
|
|
290
290
|
}
|
|
291
291
|
|
package/src/gauge-horizon.ts
CHANGED
|
@@ -35,7 +35,7 @@ const NATURE: ComponentNature = {
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
export default class GaugeHorizon extends ValueHolder(RectPath(Shape)) {
|
|
38
|
-
|
|
38
|
+
render(context: CanvasRenderingContext2D) {
|
|
39
39
|
var {
|
|
40
40
|
startValue,
|
|
41
41
|
endValue,
|
|
@@ -191,7 +191,7 @@ export default class GaugeHorizon extends ValueHolder(RectPath(Shape)) {
|
|
|
191
191
|
context.translate(-left, -top)
|
|
192
192
|
}
|
|
193
193
|
|
|
194
|
-
|
|
194
|
+
postrender(context: CanvasRenderingContext2D) {
|
|
195
195
|
this.drawText(context)
|
|
196
196
|
}
|
|
197
197
|
|
package/src/gauge-vertical.ts
CHANGED
|
@@ -35,7 +35,7 @@ const NATURE: ComponentNature = {
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
export default class GaugeVertical extends ValueHolder(RectPath(Shape)) {
|
|
38
|
-
|
|
38
|
+
render(context: CanvasRenderingContext2D) {
|
|
39
39
|
var {
|
|
40
40
|
startValue,
|
|
41
41
|
endValue,
|
|
@@ -190,7 +190,7 @@ export default class GaugeVertical extends ValueHolder(RectPath(Shape)) {
|
|
|
190
190
|
context.translate(-left, -top)
|
|
191
191
|
}
|
|
192
192
|
|
|
193
|
-
|
|
193
|
+
postrender(context: CanvasRenderingContext2D) {
|
|
194
194
|
this.drawText(context)
|
|
195
195
|
}
|
|
196
196
|
|
package/tsconfig.tsbuildinfo
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"program":{"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.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"],"fileInfos":[{"version":"f59215c5f1d886b05395ee7aca73e0ac69ddfad2843aa88530e797879d511bad","affectsGlobalScope":true},"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","dc48272d7c333ccf58034c0026162576b7d50ea0e69c3b9292f803fc20720fd5","27147504487dc1159369da4f4da8a26406364624fa9bc3db632f7d94a5bae2c3","5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","68d73b4a11549f9c0b7d352d10e91e5dca8faa3322bfb77b661839c42b1ddec7",{"version":"3dda5344576193a4ae48b8d03f105c86f20b2f2aff0a1d1fd7935f5d68649654","affectsGlobalScope":true},{"version":"9d9885c728913c1d16e0d2831b40341d6ad9a0ceecaabc55209b306ad9c736a5","affectsGlobalScope":true},{"version":"17bea081b9c0541f39dd1ae9bc8c78bdd561879a682e60e2f25f688c0ecab248","affectsGlobalScope":true},{"version":"4443e68b35f3332f753eacc66a04ac1d2053b8b035a0e0ac1d455392b5e243b3","affectsGlobalScope":true},{"version":"ab22100fdd0d24cfc2cc59d0a00fc8cf449830d9c4030dc54390a46bd562e929","affectsGlobalScope":true},{"version":"f7bd636ae3a4623c503359ada74510c4005df5b36de7f23e1db8a5c543fd176b","affectsGlobalScope":true},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true},{"version":"0c20f4d2358eb679e4ae8a4432bdd96c857a2960fd6800b21ec4008ec59d60ea","affectsGlobalScope":true},{"version":"36ae84ccc0633f7c0787bc6108386c8b773e95d3b052d9464a99cd9b8795fbec","affectsGlobalScope":true},{"version":"82d0d8e269b9eeac02c3bd1c9e884e85d483fcb2cd168bccd6bc54df663da031","affectsGlobalScope":true},{"version":"b8deab98702588840be73d67f02412a2d45a417a3c097b2e96f7f3a42ac483d1","affectsGlobalScope":true},{"version":"4738f2420687fd85629c9efb470793bb753709c2379e5f85bc1815d875ceadcd","affectsGlobalScope":true},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true},{"version":"376d554d042fb409cb55b5cbaf0b2b4b7e669619493c5d18d5fa8bd67273f82a","affectsGlobalScope":true},{"version":"9fc46429fbe091ac5ad2608c657201eb68b6f1b8341bd6d670047d32ed0a88fa","affectsGlobalScope":true},{"version":"61c37c1de663cf4171e1192466e52c7a382afa58da01b1dc75058f032ddf0839","affectsGlobalScope":true},{"version":"c4138a3dd7cd6cf1f363ca0f905554e8d81b45844feea17786cdf1626cb8ea06","affectsGlobalScope":true},{"version":"6ff3e2452b055d8f0ec026511c6582b55d935675af67cdb67dd1dc671e8065df","affectsGlobalScope":true},{"version":"03de17b810f426a2f47396b0b99b53a82c1b60e9cba7a7edda47f9bb077882f4","affectsGlobalScope":true},{"version":"8184c6ddf48f0c98429326b428478ecc6143c27f79b79e85740f17e6feb090f1","affectsGlobalScope":true},{"version":"261c4d2cf86ac5a89ad3fb3fafed74cbb6f2f7c1d139b0540933df567d64a6ca","affectsGlobalScope":true},{"version":"6af1425e9973f4924fca986636ac19a0cf9909a7e0d9d3009c349e6244e957b6","affectsGlobalScope":true},{"version":"576711e016cf4f1804676043e6a0a5414252560eb57de9faceee34d79798c850","affectsGlobalScope":true},{"version":"89c1b1281ba7b8a96efc676b11b264de7a8374c5ea1e6617f11880a13fc56dc6","affectsGlobalScope":true},{"version":"15a630d6817718a2ddd7088c4f83e4673fde19fa992d2eae2cf51132a302a5d3","affectsGlobalScope":true},{"version":"189c0703923150aa30673fa3de411346d727cc44a11c75d05d7cf9ef095daa22","affectsGlobalScope":true},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true},"
|
|
1
|
+
{"program":{"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.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"],"fileInfos":[{"version":"f59215c5f1d886b05395ee7aca73e0ac69ddfad2843aa88530e797879d511bad","affectsGlobalScope":true},"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","dc48272d7c333ccf58034c0026162576b7d50ea0e69c3b9292f803fc20720fd5","27147504487dc1159369da4f4da8a26406364624fa9bc3db632f7d94a5bae2c3","5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","68d73b4a11549f9c0b7d352d10e91e5dca8faa3322bfb77b661839c42b1ddec7",{"version":"3dda5344576193a4ae48b8d03f105c86f20b2f2aff0a1d1fd7935f5d68649654","affectsGlobalScope":true},{"version":"9d9885c728913c1d16e0d2831b40341d6ad9a0ceecaabc55209b306ad9c736a5","affectsGlobalScope":true},{"version":"17bea081b9c0541f39dd1ae9bc8c78bdd561879a682e60e2f25f688c0ecab248","affectsGlobalScope":true},{"version":"4443e68b35f3332f753eacc66a04ac1d2053b8b035a0e0ac1d455392b5e243b3","affectsGlobalScope":true},{"version":"ab22100fdd0d24cfc2cc59d0a00fc8cf449830d9c4030dc54390a46bd562e929","affectsGlobalScope":true},{"version":"f7bd636ae3a4623c503359ada74510c4005df5b36de7f23e1db8a5c543fd176b","affectsGlobalScope":true},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true},{"version":"0c20f4d2358eb679e4ae8a4432bdd96c857a2960fd6800b21ec4008ec59d60ea","affectsGlobalScope":true},{"version":"36ae84ccc0633f7c0787bc6108386c8b773e95d3b052d9464a99cd9b8795fbec","affectsGlobalScope":true},{"version":"82d0d8e269b9eeac02c3bd1c9e884e85d483fcb2cd168bccd6bc54df663da031","affectsGlobalScope":true},{"version":"b8deab98702588840be73d67f02412a2d45a417a3c097b2e96f7f3a42ac483d1","affectsGlobalScope":true},{"version":"4738f2420687fd85629c9efb470793bb753709c2379e5f85bc1815d875ceadcd","affectsGlobalScope":true},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true},{"version":"376d554d042fb409cb55b5cbaf0b2b4b7e669619493c5d18d5fa8bd67273f82a","affectsGlobalScope":true},{"version":"9fc46429fbe091ac5ad2608c657201eb68b6f1b8341bd6d670047d32ed0a88fa","affectsGlobalScope":true},{"version":"61c37c1de663cf4171e1192466e52c7a382afa58da01b1dc75058f032ddf0839","affectsGlobalScope":true},{"version":"c4138a3dd7cd6cf1f363ca0f905554e8d81b45844feea17786cdf1626cb8ea06","affectsGlobalScope":true},{"version":"6ff3e2452b055d8f0ec026511c6582b55d935675af67cdb67dd1dc671e8065df","affectsGlobalScope":true},{"version":"03de17b810f426a2f47396b0b99b53a82c1b60e9cba7a7edda47f9bb077882f4","affectsGlobalScope":true},{"version":"8184c6ddf48f0c98429326b428478ecc6143c27f79b79e85740f17e6feb090f1","affectsGlobalScope":true},{"version":"261c4d2cf86ac5a89ad3fb3fafed74cbb6f2f7c1d139b0540933df567d64a6ca","affectsGlobalScope":true},{"version":"6af1425e9973f4924fca986636ac19a0cf9909a7e0d9d3009c349e6244e957b6","affectsGlobalScope":true},{"version":"576711e016cf4f1804676043e6a0a5414252560eb57de9faceee34d79798c850","affectsGlobalScope":true},{"version":"89c1b1281ba7b8a96efc676b11b264de7a8374c5ea1e6617f11880a13fc56dc6","affectsGlobalScope":true},{"version":"15a630d6817718a2ddd7088c4f83e4673fde19fa992d2eae2cf51132a302a5d3","affectsGlobalScope":true},{"version":"189c0703923150aa30673fa3de411346d727cc44a11c75d05d7cf9ef095daa22","affectsGlobalScope":true},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true},"7a1971efcba559ea9002ada4c4e3c925004fb67a755300d53b5edf9399354900","a0359c849836fc32f8064bd60934411e0bf6650f30fb691fed925ed0269fb4d1",{"version":"8e1409f894fa33ed13f49fc8d503a69986b5349d16d3fa51141b6ac37e16df31","signature":"44008f04e6756cf1d3b21bb767fe5cbde6c0df6a0084c0bacd97f4aaa454f273"},{"version":"538df41c71d13a0c594b28f7fd5b5be89cf1cbfb39266c79e3e56d37947a8b48","signature":"48797414fafff497cac54f6c10d1e2e7ebb896ee9a572446fdc489901890d0fd"},{"version":"bb0c7a674d1eda5ef4fec9a55b37c50ee33f4cd769cb57d7f5341113dbe5d9ee","signature":"2be736c3a080d1b4d3158e3c5d19d3b635b3e482760655714b0dfefe5d2a3816"},{"version":"3e2848a5cccae467f459efd9aa5344baa105f0c5d81a2f2375b1d3e27bf1be48","signature":"a955feae78869a1b19c45c106aa9d74d6ddeae25c7b5b68fa7b02941b81e15d2"},{"version":"573659b567a69a7ca85bd857b3998a69edb91813c08a48951557b219f39496c3","signature":"9693c626dbb27254cb73153232a55d8c8d5d72afca3b6bbcf158abbdc4a82e9b"}],"root":[[37,41]],"options":{"allowSyntheticDefaultImports":true,"declaration":true,"esModuleInterop":false,"experimentalDecorators":true,"importHelpers":true,"inlineSources":true,"module":99,"noEmitOnError":true,"outDir":"./dist","rootDir":"./src","sourceMap":true,"strict":true,"target":5},"fileIdsList":[[35,36,37],[35],[35,38,39,40],[36],[38,39,40]],"referencedMap":[[38,1],[39,1],[37,2],[40,1],[41,3]],"exportedModulesMap":[[38,4],[39,4],[40,4],[41,5]],"semanticDiagnosticsPerFile":[36,35,33,34,7,9,8,2,10,11,12,13,14,15,16,17,3,4,21,18,19,20,22,23,24,5,25,26,27,28,6,32,29,30,31,1,38,39,37,40,41]},"version":"5.1.6"}
|