@operato/scene-progressbar 0.0.4
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 +17 -0
- package/LICENSE +21 -0
- package/README.md +15 -0
- package/assets/progress-circle.png +0 -0
- package/assets/progress-horizontal.png +0 -0
- package/assets/progress-vertical.png +0 -0
- package/dist/src/index.d.ts +3 -0
- package/dist/src/index.js +7 -0
- package/dist/src/index.js.map +1 -0
- package/dist/src/progress-circle.d.ts +22 -0
- package/dist/src/progress-circle.js +82 -0
- package/dist/src/progress-circle.js.map +1 -0
- package/dist/src/progress-horizontal.d.ts +28 -0
- package/dist/src/progress-horizontal.js +69 -0
- package/dist/src/progress-horizontal.js.map +1 -0
- package/dist/src/progress-vertical.d.ts +28 -0
- package/dist/src/progress-vertical.js +58 -0
- package/dist/src/progress-vertical.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/helps/scene/component/progress-circle.ko.md +41 -0
- package/helps/scene/component/progress-circle.md +42 -0
- package/helps/scene/component/progress-circle.zh.md +39 -0
- package/helps/scene/component/progress-horizontal.ko.md +37 -0
- package/helps/scene/component/progress-horizontal.md +31 -0
- package/helps/scene/component/progress-horizontal.zh.md +31 -0
- package/helps/scene/component/progress-vertical.ko.md +23 -0
- package/helps/scene/component/progress-vertical.md +24 -0
- package/helps/scene/component/progress-vertical.zh.md +23 -0
- package/helps/scene/images/progress-circle-01.png +0 -0
- package/helps/scene/images/progress-circle-02.png +0 -0
- package/helps/scene/images/progress-circle-03.png +0 -0
- package/helps/scene/images/progress-circle-04.png +0 -0
- package/helps/scene/images/progress-circle-05.png +0 -0
- package/helps/scene/images/progress-horizontal-01.png +0 -0
- package/helps/scene/images/progress-horizontal-02.png +0 -0
- package/helps/scene/images/progress-horizontal-03.png +0 -0
- package/helps/scene/images/progress-horizontal-04.png +0 -0
- package/helps/scene/images/progress-vertical-01.png +0 -0
- package/helps/scene/images/progress-vertical-02.png +0 -0
- package/helps/scene/images/progress-vertical-03.png +0 -0
- package/package.json +63 -0
- package/src/index.ts +6 -0
- package/src/progress-circle.ts +125 -0
- package/src/progress-horizontal.ts +83 -0
- package/src/progress-vertical.ts +72 -0
- package/test/basic-test.html +67 -0
- package/test/index.html +22 -0
- package/things-scene.config.js +85 -0
- package/translations/en.json +4 -0
- package/translations/ko.json +4 -0
- package/translations/zh.json +4 -0
- package/tsconfig.json +22 -0
package/CHANGELOG.md
ADDED
@@ -0,0 +1,17 @@
|
|
1
|
+
# Change Log
|
2
|
+
|
3
|
+
All notable changes to this project will be documented in this file.
|
4
|
+
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
|
+
|
6
|
+
### [0.0.4](https://github.com/hatiolab/things-factory/compare/v0.0.3...v0.0.4) (2021-12-01)
|
7
|
+
|
8
|
+
|
9
|
+
### :rocket: New Features
|
10
|
+
|
11
|
+
* add @operato/scene-i18n ([92d14ff](https://github.com/hatiolab/things-factory/commit/92d14ff4bcacfb920e39470cf7537ab7560844f1))
|
12
|
+
* add @operato/scene-progressbar ([0a18f8b](https://github.com/hatiolab/things-factory/commit/0a18f8bf01337eff9a040168d36c8efdc9c35b6e))
|
13
|
+
|
14
|
+
|
15
|
+
### :bug: Bug Fix
|
16
|
+
|
17
|
+
* things-scene upgrade ([9e2c0b8](https://github.com/hatiolab/things-factory/commit/9e2c0b85b1aacb0a4ef656866259879a20cd5de4))
|
package/LICENSE
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
MIT License
|
2
|
+
|
3
|
+
Copyright (c) 2021 Hearty, Oh
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
# things-scene-progressbar
|
2
|
+
|
3
|
+
## build
|
4
|
+
|
5
|
+
`$ yarn build`
|
6
|
+
|
7
|
+
| type | filename | for | tested |
|
8
|
+
| ---- | ------------------------------ | -------------- | ------ |
|
9
|
+
| UMD | things-scene-progressbar.js | modern browser | O |
|
10
|
+
| UMD | things-scene-progressbar-ie.js | ie 11 | O |
|
11
|
+
| ESM | things-scene-progressbar.mjs | modern browser | O |
|
12
|
+
|
13
|
+
## publish
|
14
|
+
|
15
|
+
`$ yarn publish`
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1,7 @@
|
|
1
|
+
/*
|
2
|
+
* Copyright © HatioLab Inc. All rights reserved.
|
3
|
+
*/
|
4
|
+
export { default as ProgressCircle } from './progress-circle';
|
5
|
+
export { default as ProgressVertical } from './progress-vertical';
|
6
|
+
export { default as ProgressHorizontal } from './progress-horizontal';
|
7
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAC7D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,uBAAuB,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nexport { default as ProgressCircle } from './progress-circle'\nexport { default as ProgressVertical } from './progress-vertical'\nexport { default as ProgressHorizontal } from './progress-horizontal'\n"]}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import { Ellipse } from '@hatiolab/things-scene';
|
2
|
+
declare const ProgressCircle_base: (new (...args: any[]) => {
|
3
|
+
value: number;
|
4
|
+
animValue: number;
|
5
|
+
animOnValueChange(value: number, animFromBase: boolean, base: number): void;
|
6
|
+
}) & typeof Ellipse;
|
7
|
+
export default class ProgressCircle extends ProgressCircle_base {
|
8
|
+
_draw(context: CanvasRenderingContext2D): void;
|
9
|
+
_post_draw(context: CanvasRenderingContext2D): void;
|
10
|
+
get nature(): {
|
11
|
+
mutable: boolean;
|
12
|
+
resizable: boolean;
|
13
|
+
rotatable: boolean;
|
14
|
+
properties: {
|
15
|
+
type: string;
|
16
|
+
label: string;
|
17
|
+
name: string;
|
18
|
+
}[];
|
19
|
+
help: string;
|
20
|
+
};
|
21
|
+
}
|
22
|
+
export {};
|
@@ -0,0 +1,82 @@
|
|
1
|
+
/*
|
2
|
+
* Copyright © HatioLab Inc. All rights reserved.
|
3
|
+
*/
|
4
|
+
import { Component, Ellipse, ValueHolder } from '@hatiolab/things-scene';
|
5
|
+
const NATURE = {
|
6
|
+
mutable: false,
|
7
|
+
resizable: true,
|
8
|
+
rotatable: true,
|
9
|
+
properties: [
|
10
|
+
{
|
11
|
+
type: 'string',
|
12
|
+
label: 'value',
|
13
|
+
name: 'value'
|
14
|
+
},
|
15
|
+
{
|
16
|
+
type: 'number',
|
17
|
+
label: 'start-angle',
|
18
|
+
name: 'startAngle'
|
19
|
+
},
|
20
|
+
{
|
21
|
+
type: 'number',
|
22
|
+
label: 'end-angle',
|
23
|
+
name: 'endAngle'
|
24
|
+
},
|
25
|
+
{
|
26
|
+
type: 'color',
|
27
|
+
label: 'blank-stroke-style',
|
28
|
+
name: 'blankStrokeStyle'
|
29
|
+
},
|
30
|
+
{
|
31
|
+
type: 'checkbox',
|
32
|
+
label: 'packman-style',
|
33
|
+
name: 'packmanStyle'
|
34
|
+
},
|
35
|
+
{
|
36
|
+
type: 'checkbox',
|
37
|
+
label: 'anim-from-base',
|
38
|
+
name: 'animFromBase'
|
39
|
+
}
|
40
|
+
],
|
41
|
+
help: 'scene/component/progress-circle'
|
42
|
+
};
|
43
|
+
export default class ProgressCircle extends ValueHolder(Ellipse) {
|
44
|
+
_draw(context) {
|
45
|
+
var { startAngle = 0, endAngle = 360, lineWidth = 20, blankStrokeStyle, cx, cy, rx, ry, packmanStyle = false, animFromBase = false } = this.model;
|
46
|
+
this.animOnValueChange(this.value, animFromBase, 0);
|
47
|
+
const RADIAN = 0.0174533 / Math.PI;
|
48
|
+
context.beginPath();
|
49
|
+
this.drawStroke(context);
|
50
|
+
// Angle마다 '-90'와 '-0.5 * Math.PI'가 있는 이유는 0도를 시계의 12시 방향으로 맞추기 위함.
|
51
|
+
var startAngleToRadian = (startAngle - 90) * RADIAN * Math.PI;
|
52
|
+
var endAngleToRadian = (endAngle - 90) * RADIAN * Math.PI;
|
53
|
+
//// / 바깥쪽 원 그리기 ////
|
54
|
+
context.strokeStyle = blankStrokeStyle;
|
55
|
+
context.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngleToRadian, endAngleToRadian);
|
56
|
+
context.lineWidth = lineWidth;
|
57
|
+
context.stroke();
|
58
|
+
var percent = Math.min(Math.max(this.animValue / 100, 0), 100);
|
59
|
+
context.beginPath();
|
60
|
+
if (packmanStyle) {
|
61
|
+
context.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngleToRadian, startAngleToRadian + (endAngleToRadian - startAngleToRadian) * percent);
|
62
|
+
context.lineTo(cx, cy);
|
63
|
+
}
|
64
|
+
else {
|
65
|
+
context.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngleToRadian, endAngleToRadian);
|
66
|
+
}
|
67
|
+
this.drawFill(context);
|
68
|
+
context.closePath();
|
69
|
+
context.beginPath();
|
70
|
+
//// 채워지는 원 그리기 ////
|
71
|
+
context.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngleToRadian, startAngleToRadian + (endAngleToRadian - startAngleToRadian) * percent);
|
72
|
+
this.drawStroke(context);
|
73
|
+
}
|
74
|
+
_post_draw(context) {
|
75
|
+
this.drawText(context);
|
76
|
+
}
|
77
|
+
get nature() {
|
78
|
+
return NATURE;
|
79
|
+
}
|
80
|
+
}
|
81
|
+
Component.register('progress-circle', ProgressCircle);
|
82
|
+
//# sourceMappingURL=progress-circle.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"progress-circle.js","sourceRoot":"","sources":["../../src/progress-circle.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, Ellipse, ValueHolder } from '@hatiolab/things-scene'\n\nconst NATURE = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n {\n type: 'string',\n label: 'value',\n name: 'value'\n },\n {\n type: 'number',\n label: 'start-angle',\n name: 'startAngle'\n },\n {\n type: 'number',\n label: 'end-angle',\n name: 'endAngle'\n },\n {\n type: 'color',\n label: 'blank-stroke-style',\n name: 'blankStrokeStyle'\n },\n {\n type: 'checkbox',\n label: 'packman-style',\n name: 'packmanStyle'\n },\n {\n type: 'checkbox',\n label: 'anim-from-base',\n name: 'animFromBase'\n }\n ],\n help: 'scene/component/progress-circle'\n}\n\nexport default class ProgressCircle extends ValueHolder(Ellipse) {\n _draw(context: CanvasRenderingContext2D) {\n var {\n startAngle = 0,\n endAngle = 360,\n lineWidth = 20,\n blankStrokeStyle,\n cx,\n cy,\n rx,\n ry,\n packmanStyle = false,\n animFromBase = false\n } = this.model\n\n this.animOnValueChange(this.value, animFromBase, 0)\n\n const RADIAN = 0.0174533 / Math.PI\n\n context.beginPath()\n this.drawStroke(context)\n // Angle마다 '-90'와 '-0.5 * Math.PI'가 있는 이유는 0도를 시계의 12시 방향으로 맞추기 위함.\n var startAngleToRadian = (startAngle - 90) * RADIAN * Math.PI\n var endAngleToRadian = (endAngle - 90) * RADIAN * Math.PI\n\n //// / 바깥쪽 원 그리기 ////\n context.strokeStyle = blankStrokeStyle\n context.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngleToRadian, endAngleToRadian)\n\n context.lineWidth = lineWidth\n context.stroke()\n\n var percent = Math.min(Math.max(this.animValue / 100, 0), 100)\n\n context.beginPath()\n if (packmanStyle) {\n context.ellipse(\n cx,\n cy,\n Math.abs(rx),\n Math.abs(ry),\n 0,\n startAngleToRadian,\n startAngleToRadian + (endAngleToRadian - startAngleToRadian) * percent\n )\n context.lineTo(cx, cy)\n } else {\n context.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngleToRadian, endAngleToRadian)\n }\n this.drawFill(context)\n\n context.closePath()\n\n context.beginPath()\n\n //// 채워지는 원 그리기 ////\n\n context.ellipse(\n cx,\n cy,\n Math.abs(rx),\n Math.abs(ry),\n 0,\n startAngleToRadian,\n startAngleToRadian + (endAngleToRadian - startAngleToRadian) * percent\n )\n\n this.drawStroke(context)\n }\n\n _post_draw(context: CanvasRenderingContext2D) {\n this.drawText(context)\n }\n\n get nature() {\n return NATURE\n }\n}\n\nComponent.register('progress-circle', ProgressCircle)\n"]}
|
@@ -0,0 +1,28 @@
|
|
1
|
+
import { Shape } from '@hatiolab/things-scene';
|
2
|
+
declare const ProgressHorizontal_base: (new (...args: any[]) => {
|
3
|
+
value: number;
|
4
|
+
animValue: number;
|
5
|
+
animOnValueChange(value: number, animFromBase: boolean, base: number): void;
|
6
|
+
}) & typeof Shape;
|
7
|
+
export default class ProgressHorizontal extends ProgressHorizontal_base {
|
8
|
+
_draw(context: CanvasRenderingContext2D): void;
|
9
|
+
_post_draw(context: CanvasRenderingContext2D): void;
|
10
|
+
get nature(): {
|
11
|
+
mutable: boolean;
|
12
|
+
resizable: boolean;
|
13
|
+
rotatable: boolean;
|
14
|
+
properties: ({
|
15
|
+
type: string;
|
16
|
+
label: string;
|
17
|
+
name: string;
|
18
|
+
property: string;
|
19
|
+
} | {
|
20
|
+
type: string;
|
21
|
+
label: string;
|
22
|
+
name: string;
|
23
|
+
property?: undefined;
|
24
|
+
})[];
|
25
|
+
help: string;
|
26
|
+
};
|
27
|
+
}
|
28
|
+
export {};
|
@@ -0,0 +1,69 @@
|
|
1
|
+
/*
|
2
|
+
* Copyright © HatioLab Inc. All rights reserved.
|
3
|
+
*/
|
4
|
+
import { Component, RectPath, Shape, ValueHolder } from '@hatiolab/things-scene';
|
5
|
+
const NATURE = {
|
6
|
+
mutable: false,
|
7
|
+
resizable: true,
|
8
|
+
rotatable: true,
|
9
|
+
properties: [
|
10
|
+
{
|
11
|
+
type: 'string',
|
12
|
+
label: 'value',
|
13
|
+
name: 'value',
|
14
|
+
property: 'value'
|
15
|
+
},
|
16
|
+
{
|
17
|
+
type: 'color',
|
18
|
+
label: 'background-color',
|
19
|
+
name: 'backgroundColor',
|
20
|
+
property: 'backgroundColor'
|
21
|
+
},
|
22
|
+
{
|
23
|
+
type: 'checkbox',
|
24
|
+
label: 'reverse',
|
25
|
+
name: 'reverse',
|
26
|
+
property: 'reverse'
|
27
|
+
},
|
28
|
+
{
|
29
|
+
type: 'checkbox',
|
30
|
+
label: 'anim-from-base',
|
31
|
+
name: 'animFromBase'
|
32
|
+
}
|
33
|
+
],
|
34
|
+
help: 'scene/component/progress-horizontal'
|
35
|
+
};
|
36
|
+
export default class ProgressHorizontal extends ValueHolder(RectPath(Shape)) {
|
37
|
+
_draw(context) {
|
38
|
+
var { top, left, height, width, backgroundColor = 'transparent', reverse, animFromBase = false } = this.model;
|
39
|
+
this.animOnValueChange(this.value, animFromBase, 0);
|
40
|
+
// background의 색상
|
41
|
+
context.beginPath();
|
42
|
+
context.rect(left, top, width, height);
|
43
|
+
context.fillStyle = backgroundColor;
|
44
|
+
context.fill();
|
45
|
+
// value의 색상
|
46
|
+
context.beginPath();
|
47
|
+
var drawValue = width - (width * Math.max(Math.min(this.animValue, 100), 0)) / 100;
|
48
|
+
drawValue = Math.max(Math.min(drawValue, width), 0); // DrawValue도 높이보다 작거나 커지지 말아야 한다.
|
49
|
+
// 그리는 값의 방향을 지정
|
50
|
+
if (reverse)
|
51
|
+
context.rect(left, top, width - drawValue, height);
|
52
|
+
else
|
53
|
+
context.rect(left + drawValue, top, width - drawValue, height);
|
54
|
+
this.drawFill(context);
|
55
|
+
context.closePath();
|
56
|
+
context.beginPath();
|
57
|
+
context.rect(left, top, width, height);
|
58
|
+
}
|
59
|
+
_post_draw(context) {
|
60
|
+
this.drawStroke(context);
|
61
|
+
this.drawText(context);
|
62
|
+
}
|
63
|
+
// get controls() {}
|
64
|
+
get nature() {
|
65
|
+
return NATURE;
|
66
|
+
}
|
67
|
+
}
|
68
|
+
Component.register('progress-horizontal', ProgressHorizontal);
|
69
|
+
//# sourceMappingURL=progress-horizontal.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"progress-horizontal.js","sourceRoot":"","sources":["../../src/progress-horizontal.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEhF,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,OAAO;SAClB;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,kBAAkB;YACzB,IAAI,EAAE,iBAAiB;YACvB,QAAQ,EAAE,iBAAiB;SAC5B;QACD;YACE,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,SAAS;SACpB;QACD;YACE,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,gBAAgB;YACvB,IAAI,EAAE,cAAc;SACrB;KACF;IACD,IAAI,EAAE,qCAAqC;CAC5C,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1E,KAAK,CAAC,OAAiC;QACrC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,GAAG,aAAa,EAAE,OAAO,EAAE,YAAY,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAE7G,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC,CAAA;QAEnD,iBAAiB;QACjB,OAAO,CAAC,SAAS,EAAE,CAAA;QACnB,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;QAEtC,OAAO,CAAC,SAAS,GAAG,eAAe,CAAA;QACnC,OAAO,CAAC,IAAI,EAAE,CAAA;QAEd,YAAY;QACZ,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,IAAI,SAAS,GAAG,KAAK,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,CAAA;QAClF,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA,CAAC,kCAAkC;QAEtF,gBAAgB;QAChB,IAAI,OAAO;YAAE,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,SAAS,EAAE,MAAM,CAAC,CAAA;;YAC1D,OAAO,CAAC,IAAI,CAAC,IAAI,GAAG,SAAS,EAAE,GAAG,EAAE,KAAK,GAAG,SAAS,EAAE,MAAM,CAAC,CAAA;QAEnE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;QAEtB,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;IACxC,CAAC;IAED,UAAU,CAAC,OAAiC;QAC1C,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;QACxB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;IACxB,CAAC;IAED,oBAAoB;IAEpB,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,qBAAqB,EAAE,kBAAkB,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, RectPath, Shape, ValueHolder } from '@hatiolab/things-scene'\n\nconst NATURE = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n {\n type: 'string',\n label: 'value',\n name: 'value',\n property: 'value'\n },\n {\n type: 'color',\n label: 'background-color',\n name: 'backgroundColor',\n property: 'backgroundColor'\n },\n {\n type: 'checkbox',\n label: 'reverse',\n name: 'reverse',\n property: 'reverse'\n },\n {\n type: 'checkbox',\n label: 'anim-from-base',\n name: 'animFromBase'\n }\n ],\n help: 'scene/component/progress-horizontal'\n}\n\nexport default class ProgressHorizontal extends ValueHolder(RectPath(Shape)) {\n _draw(context: CanvasRenderingContext2D) {\n var { top, left, height, width, backgroundColor = 'transparent', reverse, animFromBase = false } = this.model\n\n this.animOnValueChange(this.value, animFromBase, 0)\n\n // background의 색상\n context.beginPath()\n context.rect(left, top, width, height)\n\n context.fillStyle = backgroundColor\n context.fill()\n\n // value의 색상\n context.beginPath()\n\n var drawValue = width - (width * Math.max(Math.min(this.animValue, 100), 0)) / 100\n drawValue = Math.max(Math.min(drawValue, width), 0) // DrawValue도 높이보다 작거나 커지지 말아야 한다.\n\n // 그리는 값의 방향을 지정\n if (reverse) context.rect(left, top, width - drawValue, height)\n else context.rect(left + drawValue, top, width - drawValue, height)\n\n this.drawFill(context)\n\n context.closePath()\n\n context.beginPath()\n\n context.rect(left, top, width, height)\n }\n\n _post_draw(context: CanvasRenderingContext2D) {\n this.drawStroke(context)\n this.drawText(context)\n }\n\n // get controls() {}\n\n get nature() {\n return NATURE\n }\n}\n\nComponent.register('progress-horizontal', ProgressHorizontal)\n"]}
|
@@ -0,0 +1,28 @@
|
|
1
|
+
import { Shape } from '@hatiolab/things-scene';
|
2
|
+
declare const ProgressVertical_base: (new (...args: any[]) => {
|
3
|
+
value: number;
|
4
|
+
animValue: number;
|
5
|
+
animOnValueChange(value: number, animFromBase: boolean, base: number): void;
|
6
|
+
}) & typeof Shape;
|
7
|
+
export default class ProgressVertical extends ProgressVertical_base {
|
8
|
+
_draw(context: CanvasRenderingContext2D): void;
|
9
|
+
_post_draw(context: CanvasRenderingContext2D): void;
|
10
|
+
get nature(): {
|
11
|
+
mutable: boolean;
|
12
|
+
resizable: boolean;
|
13
|
+
rotatable: boolean;
|
14
|
+
properties: ({
|
15
|
+
type: string;
|
16
|
+
label: string;
|
17
|
+
name: string;
|
18
|
+
property: string;
|
19
|
+
} | {
|
20
|
+
type: string;
|
21
|
+
label: string;
|
22
|
+
name: string;
|
23
|
+
property?: undefined;
|
24
|
+
})[];
|
25
|
+
help: string;
|
26
|
+
};
|
27
|
+
}
|
28
|
+
export {};
|
@@ -0,0 +1,58 @@
|
|
1
|
+
/*
|
2
|
+
* Copyright © HatioLab Inc. All rights reserved.
|
3
|
+
*/
|
4
|
+
import { Component, RectPath, Shape, ValueHolder } from '@hatiolab/things-scene';
|
5
|
+
const NATURE = {
|
6
|
+
mutable: false,
|
7
|
+
resizable: true,
|
8
|
+
rotatable: true,
|
9
|
+
properties: [
|
10
|
+
{
|
11
|
+
type: 'string',
|
12
|
+
label: 'value',
|
13
|
+
name: 'value',
|
14
|
+
property: 'value'
|
15
|
+
},
|
16
|
+
{
|
17
|
+
type: 'color',
|
18
|
+
label: 'background-color',
|
19
|
+
name: 'backgroundColor',
|
20
|
+
property: 'backgroundColor'
|
21
|
+
},
|
22
|
+
{
|
23
|
+
type: 'checkbox',
|
24
|
+
label: 'anim-from-base',
|
25
|
+
name: 'animFromBase'
|
26
|
+
}
|
27
|
+
],
|
28
|
+
help: 'scene/component/progress-vertical'
|
29
|
+
};
|
30
|
+
export default class ProgressVertical extends ValueHolder(RectPath(Shape)) {
|
31
|
+
_draw(context) {
|
32
|
+
var { top, left, height, width, backgroundColor = 'transparent', animFromBase = false } = this.model;
|
33
|
+
this.animOnValueChange(this.value, animFromBase, 0);
|
34
|
+
// background의 색상
|
35
|
+
context.beginPath();
|
36
|
+
context.rect(left, top, width, height);
|
37
|
+
context.fillStyle = backgroundColor;
|
38
|
+
context.fill();
|
39
|
+
// value의 색상
|
40
|
+
context.beginPath();
|
41
|
+
var drawValue = height - (height * Math.max(Math.min(this.animValue, 100), 0)) / 100;
|
42
|
+
drawValue = Math.max(Math.min(drawValue, height), 0); // DrawValue도 높이보다 작거나 커지지 말아야 한다.
|
43
|
+
context.rect(left, top + drawValue, width, height - drawValue);
|
44
|
+
this.drawFill(context);
|
45
|
+
context.closePath();
|
46
|
+
context.beginPath();
|
47
|
+
context.rect(left, top, width, height);
|
48
|
+
}
|
49
|
+
_post_draw(context) {
|
50
|
+
this.drawStroke(context);
|
51
|
+
this.drawText(context);
|
52
|
+
}
|
53
|
+
get nature() {
|
54
|
+
return NATURE;
|
55
|
+
}
|
56
|
+
}
|
57
|
+
Component.register('progress-vertical', ProgressVertical);
|
58
|
+
//# sourceMappingURL=progress-vertical.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"progress-vertical.js","sourceRoot":"","sources":["../../src/progress-vertical.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEhF,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,OAAO;SAClB;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,kBAAkB;YACzB,IAAI,EAAE,iBAAiB;YACvB,QAAQ,EAAE,iBAAiB;SAC5B;QACD;YACE,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,gBAAgB;YACvB,IAAI,EAAE,cAAc;SACrB;KACF;IACD,IAAI,EAAE,mCAAmC;CAC1C,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxE,KAAK,CAAC,OAAiC;QACrC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,GAAG,aAAa,EAAE,YAAY,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAEpG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC,CAAA;QAEnD,iBAAiB;QACjB,OAAO,CAAC,SAAS,EAAE,CAAA;QACnB,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;QAEtC,OAAO,CAAC,SAAS,GAAG,eAAe,CAAA;QACnC,OAAO,CAAC,IAAI,EAAE,CAAA;QAEd,YAAY;QACZ,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,IAAI,SAAS,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,CAAA;QACpF,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,CAAA,CAAC,kCAAkC;QACvF,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC,CAAA;QAE9D,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;QAEtB,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;IACxC,CAAC;IAED,UAAU,CAAC,OAAiC;QAC1C,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;QACxB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;IACxB,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, RectPath, Shape, ValueHolder } from '@hatiolab/things-scene'\n\nconst NATURE = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n {\n type: 'string',\n label: 'value',\n name: 'value',\n property: 'value'\n },\n {\n type: 'color',\n label: 'background-color',\n name: 'backgroundColor',\n property: 'backgroundColor'\n },\n {\n type: 'checkbox',\n label: 'anim-from-base',\n name: 'animFromBase'\n }\n ],\n help: 'scene/component/progress-vertical'\n}\n\nexport default class ProgressVertical extends ValueHolder(RectPath(Shape)) {\n _draw(context: CanvasRenderingContext2D) {\n var { top, left, height, width, backgroundColor = 'transparent', animFromBase = false } = this.model\n\n this.animOnValueChange(this.value, animFromBase, 0)\n\n // background의 색상\n context.beginPath()\n context.rect(left, top, width, height)\n\n context.fillStyle = backgroundColor\n context.fill()\n\n // value의 색상\n context.beginPath()\n\n var drawValue = height - (height * Math.max(Math.min(this.animValue, 100), 0)) / 100\n drawValue = Math.max(Math.min(drawValue, height), 0) // DrawValue도 높이보다 작거나 커지지 말아야 한다.\n context.rect(left, top + drawValue, width, height - drawValue)\n\n this.drawFill(context)\n\n context.closePath()\n\n context.beginPath()\n\n context.rect(left, top, width, height)\n }\n\n _post_draw(context: CanvasRenderingContext2D) {\n this.drawStroke(context)\n this.drawText(context)\n }\n\n get nature() {\n return NATURE\n }\n}\n\nComponent.register('progress-vertical', ProgressVertical)\n"]}
|
@@ -0,0 +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.es2020.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.es2020.bigint.d.ts","../../../node_modules/typescript/lib/lib.es2020.promise.d.ts","../../../node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../../node_modules/typescript/lib/lib.es2020.string.d.ts","../../../node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../../node_modules/typescript/lib/lib.es2020.intl.d.ts","../../../node_modules/typescript/lib/lib.esnext.intl.d.ts","../../../node_modules/tslib/tslib.d.ts","../node_modules/@hatiolab/things-scene/things-scene.d.ts","../src/progress-circle.ts","../src/progress-vertical.ts","../src/progress-horizontal.ts","../src/index.ts","../../../node_modules/@types/node/assert.d.ts","../../../node_modules/@types/node/assert/strict.d.ts","../../../node_modules/@types/node/globals.d.ts","../../../node_modules/@types/node/async_hooks.d.ts","../../../node_modules/@types/node/buffer.d.ts","../../../node_modules/@types/node/child_process.d.ts","../../../node_modules/@types/node/cluster.d.ts","../../../node_modules/@types/node/console.d.ts","../../../node_modules/@types/node/constants.d.ts","../../../node_modules/@types/node/crypto.d.ts","../../../node_modules/@types/node/dgram.d.ts","../../../node_modules/@types/node/diagnostics_channel.d.ts","../../../node_modules/@types/node/dns.d.ts","../../../node_modules/@types/node/dns/promises.d.ts","../../../node_modules/@types/node/domain.d.ts","../../../node_modules/@types/node/events.d.ts","../../../node_modules/@types/node/fs.d.ts","../../../node_modules/@types/node/fs/promises.d.ts","../../../node_modules/@types/node/http.d.ts","../../../node_modules/@types/node/http2.d.ts","../../../node_modules/@types/node/https.d.ts","../../../node_modules/@types/node/inspector.d.ts","../../../node_modules/@types/node/module.d.ts","../../../node_modules/@types/node/net.d.ts","../../../node_modules/@types/node/os.d.ts","../../../node_modules/@types/node/path.d.ts","../../../node_modules/@types/node/perf_hooks.d.ts","../../../node_modules/@types/node/process.d.ts","../../../node_modules/@types/node/punycode.d.ts","../../../node_modules/@types/node/querystring.d.ts","../../../node_modules/@types/node/readline.d.ts","../../../node_modules/@types/node/repl.d.ts","../../../node_modules/@types/node/stream.d.ts","../../../node_modules/@types/node/stream/promises.d.ts","../../../node_modules/@types/node/stream/consumers.d.ts","../../../node_modules/@types/node/stream/web.d.ts","../../../node_modules/@types/node/string_decoder.d.ts","../../../node_modules/@types/node/timers.d.ts","../../../node_modules/@types/node/timers/promises.d.ts","../../../node_modules/@types/node/tls.d.ts","../../../node_modules/@types/node/trace_events.d.ts","../../../node_modules/@types/node/tty.d.ts","../../../node_modules/@types/node/url.d.ts","../../../node_modules/@types/node/util.d.ts","../../../node_modules/@types/node/v8.d.ts","../../../node_modules/@types/node/vm.d.ts","../../../node_modules/@types/node/wasi.d.ts","../../../node_modules/@types/node/worker_threads.d.ts","../../../node_modules/@types/node/zlib.d.ts","../../../node_modules/@types/node/globals.global.d.ts","../../../node_modules/@types/node/index.d.ts"],"fileInfos":[{"version":"6adbf5efd0e374ff5f427a4f26a5a413e9734eee5067a0e86da69aea41910b52","affectsGlobalScope":true},"dc47c4fa66b9b9890cf076304de2a9c5201e94b740cffdf09f87296d877d71f6","7a387c58583dfca701b6c85e0adaf43fb17d590fb16d5b2dc0a2fbd89f35c467","8a12173c586e95f4433e0c6dc446bc88346be73ffe9ca6eec7aa63c8f3dca7f9","5f4e733ced4e129482ae2186aae29fde948ab7182844c3a5a51dd346182c7b06","e6b724280c694a9f588847f754198fb96c43d805f065c3a5b28bbc9594541c84","e21c071ca3e1b4a815d5f04a7475adcaeea5d64367e840dd0154096d705c3940",{"version":"abba1071bfd89e55e88a054b0c851ea3e8a494c340d0f3fab19eb18f6afb0c9e","affectsGlobalScope":true},{"version":"d8996609230d17e90484a2dd58f22668f9a05a3bfe00bfb1d6271171e54a31fb","affectsGlobalScope":true},{"version":"43fb1d932e4966a39a41b464a12a81899d9ae5f2c829063f5571b6b87e6d2f9c","affectsGlobalScope":true},{"version":"cdccba9a388c2ee3fd6ad4018c640a471a6c060e96f1232062223063b0a5ac6a","affectsGlobalScope":true},{"version":"4378fc8122ec9d1a685b01eb66c46f62aba6b239ca7228bb6483bcf8259ee493","affectsGlobalScope":true},{"version":"0d5f52b3174bee6edb81260ebcd792692c32c81fd55499d69531496f3f2b25e7","affectsGlobalScope":true},{"version":"810627a82ac06fb5166da5ada4159c4ec11978dfbb0805fe804c86406dab8357","affectsGlobalScope":true},{"version":"62d80405c46c3f4c527ee657ae9d43fda65a0bf582292429aea1e69144a522a6","affectsGlobalScope":true},{"version":"3013574108c36fd3aaca79764002b3717da09725a36a6fc02eac386593110f93","affectsGlobalScope":true},{"version":"75ec0bdd727d887f1b79ed6619412ea72ba3c81d92d0787ccb64bab18d261f14","affectsGlobalScope":true},{"version":"3be5a1453daa63e031d266bf342f3943603873d890ab8b9ada95e22389389006","affectsGlobalScope":true},{"version":"17bb1fc99591b00515502d264fa55dc8370c45c5298f4a5c2083557dccba5a2a","affectsGlobalScope":true},{"version":"7ce9f0bde3307ca1f944119f6365f2d776d281a393b576a18a2f2893a2d75c98","affectsGlobalScope":true},{"version":"6a6b173e739a6a99629a8594bfb294cc7329bfb7b227f12e1f7c11bc163b8577","affectsGlobalScope":true},{"version":"12a310447c5d23c7d0d5ca2af606e3bd08afda69100166730ab92c62999ebb9d","affectsGlobalScope":true},{"version":"b0124885ef82641903d232172577f2ceb5d3e60aed4da1153bab4221e1f6dd4e","affectsGlobalScope":true},{"version":"0eb85d6c590b0d577919a79e0084fa1744c1beba6fd0d4e951432fa1ede5510a","affectsGlobalScope":true},{"version":"da233fc1c8a377ba9e0bed690a73c290d843c2c3d23a7bd7ec5cd3d7d73ba1e0","affectsGlobalScope":true},{"version":"d154ea5bb7f7f9001ed9153e876b2d5b8f5c2bb9ec02b3ae0d239ec769f1f2ae","affectsGlobalScope":true},{"version":"bb2d3fb05a1d2ffbca947cc7cbc95d23e1d053d6595391bd325deb265a18d36c","affectsGlobalScope":true},{"version":"c80df75850fea5caa2afe43b9949338ce4e2de086f91713e9af1a06f973872b8","affectsGlobalScope":true},{"version":"9d57b2b5d15838ed094aa9ff1299eecef40b190722eb619bac4616657a05f951","affectsGlobalScope":true},{"version":"6c51b5dd26a2c31dbf37f00cfc32b2aa6a92e19c995aefb5b97a3a64f1ac99de","affectsGlobalScope":true},{"version":"6e7997ef61de3132e4d4b2250e75343f487903ddf5370e7ce33cf1b9db9a63ed","affectsGlobalScope":true},{"version":"2ad234885a4240522efccd77de6c7d99eecf9b4de0914adb9a35c0c22433f993","affectsGlobalScope":true},{"version":"1b3fe904465430e030c93239a348f05e1be80640d91f2f004c3512c2c2c89f34","affectsGlobalScope":true},{"version":"3787b83e297de7c315d55d4a7c546ae28e5f6c0a361b7a1dcec1f1f50a54ef11","affectsGlobalScope":true},{"version":"e7e8e1d368290e9295ef18ca23f405cf40d5456fa9f20db6373a61ca45f75f40","affectsGlobalScope":true},{"version":"faf0221ae0465363c842ce6aa8a0cbda5d9296940a8e26c86e04cc4081eea21e","affectsGlobalScope":true},{"version":"06393d13ea207a1bfe08ec8d7be562549c5e2da8983f2ee074e00002629d1871","affectsGlobalScope":true},{"version":"d071129cba6a5f2700be09c86c07ad2791ab67d4e5ed1eb301d6746c62745ea4","affectsGlobalScope":true},{"version":"10bbdc1981b8d9310ee75bfac28ee0477bb2353e8529da8cff7cb26c409cb5e8","affectsGlobalScope":true},"12f4cfe2fe60b810c3174537bc2ddb20c1067b7768643d12cb1266fd183afb75","4ddc7832014ce8dae75461c71b8e6af7281cfb2eba4d6e4c2deb6300044cf4ce",{"version":"1552afa9ef06c311e86e3e3ca8bf5cb4292e5a8367061b28566afae2967896ee","signature":"c9c71513a14772486f85af6f30c079bb1373360289a5ad25d28b1f4f1e0d5c51"},{"version":"56025d7924df7e49f26ce1df1757446f1aa254b9f1200055c0b0c4b76033c1c2","signature":"6ee8fa68db7a7e1fe231e544f576342531c4d0f55255c312a517dc82bf477650"},{"version":"69ef188ed4e53fa4b6529badc1cb7d98258889af478254b3ebd0ecd014d38fb5","signature":"1abe0a232e905651e3fae056432f73c455837c5f85b196fb3cc74d0c90b88acc"},{"version":"4cc30f216f77cef94e0f7847cd4bdcae2dedad72c8d86affaf3b52709bc71809","signature":"84febfe7e156c8f7c7e3163c8732cff0f2215951b238883d75a5e108bdf18249"},"0d5a2ee1fdfa82740e0103389b9efd6bfe145a20018a2da3c02b89666181f4d9","a69c09dbea52352f479d3e7ac949fde3d17b195abe90b045d619f747b38d6d1a",{"version":"92d63add669d18ebc349efbacd88966d6f2ccdddfb1b880b2db98ae3aa7bf7c4","affectsGlobalScope":true},"ccc94049a9841fe47abe5baef6be9a38fc6228807974ae675fb15dc22531b4be",{"version":"9acfe4d1ff027015151ce81d60797b04b52bffe97ad8310bb0ec2e8fd61e1303","affectsGlobalScope":true},"95843d5cfafced8f3f8a5ce57d2335f0bcd361b9483587d12a25e4bd403b8216","afc6e96061af46bcff47246158caee7e056f5288783f2d83d6858cd25be1c565",{"version":"34f5bcac12b36d70304b73de5f5aab3bb91bd9919f984be80579ebcad03a624e","affectsGlobalScope":true},"82408ed3e959ddc60d3e9904481b5a8dc16469928257af22a3f7d1a3bc7fd8c4","2f520601649a893e6a49a8851ebfcf4be8ce090dc1281c2a08a871cb04e8251f","f50c975ab7b50e25a69e3d8a3773894125b44e9698924105f23b812bf7488baf","2b8c764f856a1dd0a9a2bf23e5efddbff157de8138b0754010be561ae5fcaa90","76650408392bf49a8fbf3e2b6b302712a92d76af77b06e2da1cc8077359c4409","0af3121e68297b2247dd331c0d24dba599e50736a7517a5622d5591aae4a3122","6972fca26f6e9bd56197568d4379f99071a90766e06b4fcb5920a0130a9202be",{"version":"4a2628e95962c8ab756121faa3ac2ed348112ff7a87b5c286dd2cc3326546b4c","affectsGlobalScope":true},"80793b2277f31baa199234daed806fff0fb11491d1ebd3357e520c3558063f00","a049a59a02009fc023684fcfaf0ac526fe36c35dcc5d2b7d620c1750ba11b083","5533392c50c51b1a5c32b89f13145db929c574ef1c5949cf67a074a05ea107d9","b287b810b5035d5685f1df6e1e418f1ca452a3ed4f59fd5cc081dbf2045f0d9b","4b9a003b5c556c96784132945bb41c655ea11273b1917f5c8d0c154dd5fd20dd","a458dc78104cc80048ac24fdc02fe6dce254838094c2f25641b3f954d9721241",{"version":"e8b18c6385ff784228a6f369694fcf1a6b475355ba89090a88de13587a9391d5","affectsGlobalScope":true},"902cd98bf46e95caf4118a0733fb801e9e90eec3edaed6abdad77124afec9ca2","abc1c425b2ad6720433f40f1877abfa4223f0f3dd486c9c28c492179ca183cb6","cd4854d38f4eb5592afd98ab95ca17389a7dfe38013d9079e802d739bdbcc939","94eed4cc2f5f658d5e229ff1ccd38860bddf4233e347bf78edd2154dee1f2b99",{"version":"bd1a08e30569b0fb2f0b21035eb9b039871f68faa9b98accf847e9c878c5e0a9","affectsGlobalScope":true},"9f1069b9e2c051737b1f9b4f1baf50e4a63385a6a89c32235549ae87fc3d5492","ee18f2da7a037c6ceeb112a084e485aead9ea166980bf433474559eac1b46553","29c2706fa0cc49a2bd90c83234da33d08bb9554ecec675e91c1f85087f5a5324","0acbf26bf958f9e80c1ffa587b74749d2697b75b484062d36e103c137c562bc3","d7838022c7dab596357a9604b9c6adffe37dc34085ce0779c958ce9545bd7139","1b952304137851e45bc009785de89ada562d9376177c97e37702e39e60c2f1ff",{"version":"806ef4cac3b3d9fa4a48d849c8e084d7c72fcd7b16d76e06049a9ed742ff79c0","affectsGlobalScope":true},"a7971f9fb2a32ec7788ec6cda9d7a33c02023dfe9a62db2030ad1359649d8050","c33a6ea7147af60d8e98f1ac127047f4b0d4e2ce28b8f08ff3de07ca7cc00637",{"version":"b42b47e17b8ece2424ae8039feb944c2e3ba4b262986aebd582e51efbdca93dc","affectsGlobalScope":true},"664d8f2d59164f2e08c543981453893bc7e003e4dfd29651ce09db13e9457980","2408611d9b4146e35d1dbd1f443ccd8e187c74614a54b80300728277529dbf11","998a3de5237518c0b3ac00a11b3b4417affb008aa20aedee52f3fdae3cb86151","ad41008ffe077206e1811fc873f4d9005b5fd7f6ab52bb6118fef600815a5cb4","d88ecca73348e7c337541c4b8b60a50aca5e87384f6b8a422fc6603c637e4c21","badae0df9a8016ac36994b0a0e7b82ba6aaa3528e175a8c3cb161e4683eec03e","c3db860bcaaaeb3bbc23f353bbda1f8ab82756c8d5e973bebb3953cb09ea68f2","235a53595bd20b0b0eeb1a29cb2887c67c48375e92f03749b2488fbd46d0b1a0","bc09393cd4cd13f69cf1366d4236fbae5359bb550f0de4e15767e9a91d63dfb1","9c266243b01545e11d2733a55ad02b4c00ecdbda99c561cd1674f96e89cdc958","c71155c05fc76ff948a4759abc1cb9feec036509f500174bc18dad4c7827a60c",{"version":"ab9b9a36e5284fd8d3bf2f7d5fcbc60052f25f27e4d20954782099282c60d23e","affectsGlobalScope":true},"1cdb8f094b969dcc183745dc88404e2d8fcf2a858c6e7cc2441011476573238e"],"options":{"allowSyntheticDefaultImports":true,"declaration":true,"esModuleInterop":false,"experimentalDecorators":true,"importHelpers":true,"inlineSources":true,"module":99,"noEmitOnError":true,"outDir":"./","rootDir":"..","sourceMap":true,"strict":true,"target":5},"fileIdsList":[[46,89],[49,89],[50,55,89],[51,61,62,69,78,88,89],[51,52,61,69,89],[53,89],[54,55,62,70,89],[55,78,85,89],[56,58,61,69,89],[57,89],[58,59,89],[60,61,89],[61,89],[61,62,63,78,88,89],[61,62,63,78,89],[89],[64,69,78,88,89],[61,62,64,65,69,78,85,88,89],[64,66,78,85,88,89],[46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95],[61,67,89],[68,88,89],[58,61,69,78,89],[70,89],[71,89],[49,72,89],[73,87,89,93],[74,89],[75,89],[61,76,89],[76,77,89,91],[61,78,79,80,89],[78,80,89],[78,79,89],[81,89],[82,89],[61,83,84,89],[83,84,89],[55,69,85,89],[86,89],[69,87,89],[50,64,75,88,89],[55,89],[78,89,90],[89,91],[89,92],[50,55,61,63,72,78,88,89,91,93],[78,89,94],[40,42,43,44,89],[40,41,89],[42,43,44],[41]],"referencedMap":[[46,1],[47,1],[49,2],[50,3],[51,4],[52,5],[53,6],[54,7],[55,8],[56,9],[57,10],[58,11],[59,11],[60,12],[61,13],[62,14],[63,15],[48,16],[95,16],[64,17],[65,18],[66,19],[96,20],[67,21],[68,22],[69,23],[70,24],[71,25],[72,26],[73,27],[74,28],[75,29],[76,30],[77,31],[78,32],[80,33],[79,34],[81,35],[82,36],[83,37],[84,38],[85,39],[86,40],[87,41],[88,42],[89,43],[90,44],[91,45],[92,46],[93,47],[94,48],[40,16],[8,16],[10,16],[9,16],[2,16],[11,16],[12,16],[13,16],[14,16],[15,16],[16,16],[17,16],[18,16],[3,16],[4,16],[22,16],[19,16],[20,16],[21,16],[23,16],[24,16],[25,16],[5,16],[26,16],[27,16],[28,16],[29,16],[6,16],[30,16],[31,16],[32,16],[33,16],[7,16],[38,16],[34,16],[35,16],[36,16],[37,16],[1,16],[39,16],[41,16],[45,49],[42,50],[44,50],[43,50]],"exportedModulesMap":[[46,1],[47,1],[49,2],[50,3],[51,4],[52,5],[53,6],[54,7],[55,8],[56,9],[57,10],[58,11],[59,11],[60,12],[61,13],[62,14],[63,15],[48,16],[95,16],[64,17],[65,18],[66,19],[96,20],[67,21],[68,22],[69,23],[70,24],[71,25],[72,26],[73,27],[74,28],[75,29],[76,30],[77,31],[78,32],[80,33],[79,34],[81,35],[82,36],[83,37],[84,38],[85,39],[86,40],[87,41],[88,42],[89,43],[90,44],[91,45],[92,46],[93,47],[94,48],[40,16],[8,16],[10,16],[9,16],[2,16],[11,16],[12,16],[13,16],[14,16],[15,16],[16,16],[17,16],[18,16],[3,16],[4,16],[22,16],[19,16],[20,16],[21,16],[23,16],[24,16],[25,16],[5,16],[26,16],[27,16],[28,16],[29,16],[6,16],[30,16],[31,16],[32,16],[33,16],[7,16],[38,16],[34,16],[35,16],[36,16],[37,16],[1,16],[39,16],[41,16],[45,51],[42,52],[44,52],[43,52]],"semanticDiagnosticsPerFile":[46,47,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,48,95,64,65,66,96,67,68,69,70,71,72,73,74,75,76,77,78,80,79,81,82,83,84,85,86,87,88,89,90,91,92,93,94,40,8,10,9,2,11,12,13,14,15,16,17,18,3,4,22,19,20,21,23,24,25,5,26,27,28,29,6,30,31,32,33,7,38,34,35,36,37,1,39,41,45,42,44,43]},"version":"4.5.2"}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
# progress-circle
|
2
|
+
|
3
|
+
## properties
|
4
|
+
1. Value(Number) - 프로그레스바의 진행률 값.
|
5
|
+
<figure style="text-align: center;">
|
6
|
+
|
7
|
+
![진행막대-Value적용결과][progress-circle-02]
|
8
|
+
<figurecaption>(value: 80)</figurecaption>
|
9
|
+
</figure>
|
10
|
+
|
11
|
+
2. startAngle - 프로그레스바의 시작 각도. 12시 방향을 기준으로 시계방향으로 증가한다. 음수일 경우 역방향.
|
12
|
+
<figure style="text-align: center;">
|
13
|
+
|
14
|
+
![진행막대-startAngle적용결과][progress-circle-03]
|
15
|
+
<figurecaption>(startAngle: -120)</figurecaption>
|
16
|
+
</figure>
|
17
|
+
|
18
|
+
3. endAngle - 프로그레스바의 끝 각도. 12시 방향을 기준으로 시계방향으로 증가한다. 음수일 경우 역방향.
|
19
|
+
<figure style="text-align: center;">
|
20
|
+
|
21
|
+
![진행막대-endAngle적용결과][progress-circle-04]
|
22
|
+
<figurecaption>(endAngle: 120)</figurecaption>
|
23
|
+
</figure>
|
24
|
+
|
25
|
+
4. blankStrokeStyle - 프로그레스바가 채워지지 않은 부분의 색상.
|
26
|
+
<figure style="text-align: center;">
|
27
|
+
|
28
|
+
![진행막대-blankStrokeStyle적용결과][progress-circle-05]
|
29
|
+
<figurecaption>(blankStrokeStyle: #ec5324)</figurecaption>
|
30
|
+
</figure>
|
31
|
+
|
32
|
+
|
33
|
+
[progress-circle-01]: ../images/progress-circle-01.png
|
34
|
+
[progress-circle-02]: ../images/progress-circle-02.png
|
35
|
+
[progress-circle-03]: ../images/progress-circle-03.png
|
36
|
+
[progress-circle-04]: ../images/progress-circle-04.png
|
37
|
+
[progress-circle-05]: ../images/progress-circle-05.png
|
38
|
+
|
39
|
+
## properties
|
40
|
+
|
41
|
+
###
|
@@ -0,0 +1,42 @@
|
|
1
|
+
# progress-circle
|
2
|
+
|
3
|
+
|
4
|
+
## properties
|
5
|
+
|
6
|
+
1. Value(Number) - The progress value of progress bar.
|
7
|
+
<figure style="text-align: center;">
|
8
|
+
|
9
|
+
![Progress bar-Valueapplication result][progress-circle-02]
|
10
|
+
<figurecaption>(value: 80)</figurecaption>
|
11
|
+
</figure>
|
12
|
+
|
13
|
+
2. startAngle - The start angle of progress bar. It increases clockwise based on the 12 o'clock position. If a negative value, it will be reverse direction.
|
14
|
+
<figure style="text-align: center;">
|
15
|
+
|
16
|
+
![Progress bar-startAngleapplication result][progress-circle-03]
|
17
|
+
<figurecaption>(startAngle: -120)</figurecaption>
|
18
|
+
</figure>
|
19
|
+
|
20
|
+
3. endAngle - The end angle of progress bar. It increases clockwise based on the 12 o'clock position. If a negative value, it will be reverse direction.
|
21
|
+
<figure style="text-align: center;">
|
22
|
+
|
23
|
+
![Progress bar-endAngleapplication result][progress-circle-04]
|
24
|
+
<figurecaption>(endAngle: 120)</figurecaption>
|
25
|
+
</figure>
|
26
|
+
|
27
|
+
4. blankStrokeStyle - The color in which progress is not filled.
|
28
|
+
<figure style="text-align: center;">
|
29
|
+
|
30
|
+
![Progress bar-blankStrokeStyleapplication result][progress-circle-05]
|
31
|
+
<figurecaption>(blankStrokeStyle: #ec5324)</figurecaption>
|
32
|
+
</figure>
|
33
|
+
|
34
|
+
|
35
|
+
[progress-circle-01]: ../images/progress-circle-01.png
|
36
|
+
[progress-circle-02]: ../images/progress-circle-02.png
|
37
|
+
[progress-circle-03]: ../images/progress-circle-03.png
|
38
|
+
[progress-circle-04]: ../images/progress-circle-04.png
|
39
|
+
[progress-circle-05]: ../images/progress-circle-05.png
|
40
|
+
## properties
|
41
|
+
|
42
|
+
###
|
@@ -0,0 +1,39 @@
|
|
1
|
+
# progress-circle
|
2
|
+
|
3
|
+
|
4
|
+
## properties
|
5
|
+
|
6
|
+
1. Value(Number) - 进度条的进度值。
|
7
|
+
<figure style="text-align: center;">
|
8
|
+
|
9
|
+
![进度条-Value适用结果][progress-circle-02]
|
10
|
+
<figurecaption>(value: 80)</figurecaption>
|
11
|
+
</figure>
|
12
|
+
|
13
|
+
2. startAngle - 进度条的起始角度。以12点方向为标准,向顺时针方向增加。 如果是负数,就会是反方向。
|
14
|
+
<figure style="text-align: center;">
|
15
|
+
|
16
|
+
![进度条-startAngle适用结果][progress-circle-03]
|
17
|
+
<figurecaption>(startAngle: -120)</figurecaption>
|
18
|
+
</figure>
|
19
|
+
|
20
|
+
3. endAngle - 进度条的最终角度。以12点方向为标准,向顺时针方向增加。 如果是负数,就会是反方向。
|
21
|
+
<figure style="text-align: center;">
|
22
|
+
|
23
|
+
![进度条-endAngle适用结果][progress-circle-04]
|
24
|
+
<figurecaption>(endAngle: 120)</figurecaption>
|
25
|
+
</figure>
|
26
|
+
|
27
|
+
4. blankStrokeStyle - 没有填充进度部分的颜色。
|
28
|
+
<figure style="text-align: center;">
|
29
|
+
|
30
|
+
![进度条-blankStrokeStyle适用结果][progress-circle-05]
|
31
|
+
<figurecaption>(blankStrokeStyle: #ec5324)</figurecaption>
|
32
|
+
</figure>
|
33
|
+
|
34
|
+
|
35
|
+
[progress-circle-01]: ../images/progress-circle-01.png
|
36
|
+
[progress-circle-02]: ../images/progress-circle-02.png
|
37
|
+
[progress-circle-03]: ../images/progress-circle-03.png
|
38
|
+
[progress-circle-04]: ../images/progress-circle-04.png
|
39
|
+
[progress-circle-05]: ../images/progress-circle-05.png
|
@@ -0,0 +1,37 @@
|
|
1
|
+
# progress-horizontal
|
2
|
+
진행률을 가로막대 형태로 표시해주는 컴포넌트
|
3
|
+
|
4
|
+
|
5
|
+
## properties
|
6
|
+
1. Value(Number) - 프로그레스바의 진행률 값
|
7
|
+
|
8
|
+
<figure style="text-align: center;">
|
9
|
+
|
10
|
+
![프로그레스바-Value적용결과][progress-horizontal-02]
|
11
|
+
<figurecaption>(value: 80)</figurecaption>
|
12
|
+
</figure>
|
13
|
+
|
14
|
+
2. BackgroundColor(Color) - 진행률이 채워지지 않은 부분의 색
|
15
|
+
|
16
|
+
<figure style="text-align: center;">
|
17
|
+
|
18
|
+
![프로그레스바-BackgroundColor적용결과][progress-horizontal-03]
|
19
|
+
<figurecaption>(backgroundColor: #ec5324)</figurecaption>
|
20
|
+
</figure>
|
21
|
+
|
22
|
+
3. reverse - 진행율을 역방향으로 채운다.
|
23
|
+
|
24
|
+
<figure style="text-align: center;">
|
25
|
+
|
26
|
+
![프로그레스바-BackgroundColor적용결과][progress-horizontal-04]
|
27
|
+
<figurecaption>(backgroundColor: #ec5324)</figurecaption>
|
28
|
+
</figure>
|
29
|
+
|
30
|
+
|
31
|
+
[progress-horizontal-01]: ../images/progress-horizontal-01.png
|
32
|
+
|
33
|
+
[progress-horizontal-02]: ../images/progress-horizontal-02.png
|
34
|
+
|
35
|
+
[progress-horizontal-03]: ../images/progress-horizontal-03.png
|
36
|
+
|
37
|
+
[progress-horizontal-04]: ../images/progress-horizontal-04.png
|