@operato/scene-clock 0.0.10
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/@types/global/index.d.ts +1 -0
- package/CHANGELOG.md +12 -0
- package/LICENSE +21 -0
- package/README.md +11 -0
- package/assets/clock-analog.png +0 -0
- package/assets/clock-digital.png +0 -0
- package/demo/index.html +163 -0
- package/demo/things-scene-clock.html +6 -0
- package/dist/clock-analog.d.ts +17 -0
- package/dist/clock-analog.js +144 -0
- package/dist/clock-analog.js.map +1 -0
- package/dist/clock-text.d.ts +34 -0
- package/dist/clock-text.js +98 -0
- package/dist/clock-text.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +6 -0
- package/dist/index.js.map +1 -0
- package/helps/scene/component/analog-clock.ko.md +6 -0
- package/helps/scene/component/analog-clock.md +8 -0
- package/helps/scene/component/analog-clock.zh.md +6 -0
- package/helps/scene/component/text-clock.ko.md +25 -0
- package/helps/scene/component/text-clock.md +22 -0
- package/helps/scene/component/text-clock.zh.md +22 -0
- package/helps/scene/images/clock-analog-01.png +0 -0
- package/helps/scene/images/clock-text-01.png +0 -0
- package/helps/scene/images/clock-text-02.png +0 -0
- package/helps/scene/images/clock-text-03.png +0 -0
- package/helps/scene/images/clock-text-04.png +0 -0
- package/logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json +14 -0
- package/logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json +14 -0
- package/logs/application-2021-12-06-16.log +61 -0
- package/logs/connections-2021-12-06-16.log +480 -0
- package/package.json +63 -0
- package/src/clock-analog.ts +187 -0
- package/src/clock-text.ts +112 -0
- package/src/index.ts +5 -0
- package/test/basic-test.html +67 -0
- package/test/index.html +22 -0
- package/things-scene.config.js +48 -0
- package/tsconfig.json +23 -0
- package/tsconfig.tsbuildinfo +1 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
declare module '*.png'
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
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.10](https://github.com/things-scene/operato-scene/compare/v0.0.9...v0.0.10) (2021-12-06)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :rocket: New Features
|
|
10
|
+
|
|
11
|
+
* add @operato/scene-clock ([74da632](https://github.com/things-scene/operato-scene/commit/74da632211643f47f50a886ca7173bced0132b62))
|
|
12
|
+
* add @operato/scene-clock ([8b0d55c](https://github.com/things-scene/operato-scene/commit/8b0d55ce3ce35f0b4e8aee02703370937a30275a))
|
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,11 @@
|
|
|
1
|
+
# things-scene-clock
|
|
2
|
+
|
|
3
|
+
## build
|
|
4
|
+
|
|
5
|
+
`$ yarn build`
|
|
6
|
+
|
|
7
|
+
| type | filename | for | tested |
|
|
8
|
+
| ---- | ------------------------ | -------------- | ------ |
|
|
9
|
+
| UMD | things-scene-clock.js | modern browser | O |
|
|
10
|
+
| UMD | things-scene-clock-ie.js | ie 11 | O |
|
|
11
|
+
| ESM | things-scene-clock.mjs | modern browser | O |
|
|
Binary file
|
|
Binary file
|
package/demo/index.html
ADDED
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<!--
|
|
3
|
+
@license
|
|
4
|
+
Copyright © HatioLab Inc. All rights reserved.
|
|
5
|
+
-->
|
|
6
|
+
<html>
|
|
7
|
+
<head>
|
|
8
|
+
<meta charset="utf-8">
|
|
9
|
+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
|
10
|
+
<title>things-scene-clock Demo</title>
|
|
11
|
+
<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
|
|
12
|
+
|
|
13
|
+
<link rel="import" href="../../things-scene-viewer/things-scene-viewer.html">
|
|
14
|
+
<link rel="import" href="../../things-scene-viewer/things-scene-layer.html">
|
|
15
|
+
<link rel="import" href="../../things-scene-viewer/things-scene-handler.html">
|
|
16
|
+
|
|
17
|
+
<link rel="import" href="../../things-designer-elements/things-editor-color.html">
|
|
18
|
+
<link rel="import" href="../../things-designer-elements/things-editor-color-stops.html">
|
|
19
|
+
<link rel="import" href="../../things-designer-elements/things-editor-properties.html">
|
|
20
|
+
<link rel="import" href="../../things-scene-modeler/things-scene-properties.html">
|
|
21
|
+
|
|
22
|
+
<link rel="import" href="./things-scene-clock.html">
|
|
23
|
+
|
|
24
|
+
<style is="custom-style">
|
|
25
|
+
|
|
26
|
+
@font-face {
|
|
27
|
+
font-family: "Bitstream Vera Serif Bold";
|
|
28
|
+
src: url("fonts/VeraSeBd.ttf");
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
things-scene-viewer {
|
|
32
|
+
display: block;
|
|
33
|
+
width: 900px;
|
|
34
|
+
height: 600px;
|
|
35
|
+
}
|
|
36
|
+
</style>
|
|
37
|
+
</head>
|
|
38
|
+
<body unresolved>
|
|
39
|
+
|
|
40
|
+
<template is="dom-bind" id="app">
|
|
41
|
+
<p>An example of <code><things-scene-clock></code>:</p>
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
<things-scene-viewer id='scene'
|
|
45
|
+
scene='{{scene}}'
|
|
46
|
+
selected='{{selected}}'
|
|
47
|
+
model='[[model]]'
|
|
48
|
+
mode="1">
|
|
49
|
+
<things-scene-layer type="selection-layer"></things-scene-layer>
|
|
50
|
+
<things-scene-layer type="modeling-layer"></things-scene-layer>
|
|
51
|
+
<things-scene-handler type="text-editor"></things-scene-handler>
|
|
52
|
+
<things-scene-handler type="move-handler"></things-scene-handler>
|
|
53
|
+
</things-scene-viewer>
|
|
54
|
+
|
|
55
|
+
<fieldset class="same-width">
|
|
56
|
+
<legend>Clock style</legend>
|
|
57
|
+
<things-scene-properties scene="[[scene]]"
|
|
58
|
+
selected="[[selected]]"
|
|
59
|
+
model="{{target}}"
|
|
60
|
+
bounds="{{bounds}}">
|
|
61
|
+
<things-editor-properties id="properties"
|
|
62
|
+
target="{{target}}"
|
|
63
|
+
props="{{props}}">
|
|
64
|
+
</things-editor-properties>
|
|
65
|
+
</things-scene-properties>
|
|
66
|
+
</fieldset>
|
|
67
|
+
|
|
68
|
+
<button id="change">Change Value</button>
|
|
69
|
+
|
|
70
|
+
</template>
|
|
71
|
+
|
|
72
|
+
<script>
|
|
73
|
+
window.addEventListener('WebComponentsReady', function(e) {
|
|
74
|
+
var app = document.querySelector('#app')
|
|
75
|
+
|
|
76
|
+
app.$.change.addEventListener('click', function() {
|
|
77
|
+
var viewer = app.$.scene
|
|
78
|
+
viewer.findAll('clock-analog')[0].set('value', 0 + Math.round(Math.random() * 240))
|
|
79
|
+
viewer.findAll('clock-analog')[0].set('colorStops',[
|
|
80
|
+
{ position:40,
|
|
81
|
+
color: '#00ff00'},
|
|
82
|
+
{ position: 70,
|
|
83
|
+
color: '#ffff00'},
|
|
84
|
+
{ position: 170,
|
|
85
|
+
color: '#ff0000'}])
|
|
86
|
+
})
|
|
87
|
+
|
|
88
|
+
app.model = {
|
|
89
|
+
width: 1500,
|
|
90
|
+
height: 1500,
|
|
91
|
+
components: [{
|
|
92
|
+
type: 'clock-analog',
|
|
93
|
+
cx: 300,
|
|
94
|
+
cy: 300,
|
|
95
|
+
rx: 100,
|
|
96
|
+
ry: 100,
|
|
97
|
+
hourWidth: 3,
|
|
98
|
+
minuteWidth: 2,
|
|
99
|
+
fillStyle: '',
|
|
100
|
+
strokeStyle: '#FF0000',
|
|
101
|
+
fontColor: '#0000FF',
|
|
102
|
+
lineWidth: 5,
|
|
103
|
+
innerCircleSize: 20,
|
|
104
|
+
innerCircleColor: '#00FF00',
|
|
105
|
+
// }, {
|
|
106
|
+
// type: 'clock-text',
|
|
107
|
+
// top: 300,
|
|
108
|
+
// left: 800,
|
|
109
|
+
// width: 100,
|
|
110
|
+
// height: 50,
|
|
111
|
+
// fillStyle: '#ff00ff',
|
|
112
|
+
// fontColor: '#FF0000',
|
|
113
|
+
// lineWidth: 5,
|
|
114
|
+
// localTime: true,
|
|
115
|
+
// utc : 10
|
|
116
|
+
}]
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
app.props = [{
|
|
120
|
+
type: 'number',
|
|
121
|
+
label: 'hourwidth',
|
|
122
|
+
name: 'hourWidth',
|
|
123
|
+
property: 'hourWidth'
|
|
124
|
+
},{
|
|
125
|
+
type: 'number',
|
|
126
|
+
label: 'minute-width',
|
|
127
|
+
name: 'minuteWidth',
|
|
128
|
+
property: 'minuteWidth'
|
|
129
|
+
},{
|
|
130
|
+
type: 'number',
|
|
131
|
+
label: 'second-width',
|
|
132
|
+
name: 'secondWidth',
|
|
133
|
+
property: 'secondWidth'
|
|
134
|
+
},{
|
|
135
|
+
type: 'checkbox',
|
|
136
|
+
label: 'needle-round',
|
|
137
|
+
name: 'needleRound',
|
|
138
|
+
property: 'needleRound'
|
|
139
|
+
},{
|
|
140
|
+
type: 'checkbox',
|
|
141
|
+
label: 'show-second',
|
|
142
|
+
name: 'showSecond',
|
|
143
|
+
property: 'showSecond'
|
|
144
|
+
},{
|
|
145
|
+
type: 'checkbox',
|
|
146
|
+
label: 'show-number',
|
|
147
|
+
name: 'showNumber',
|
|
148
|
+
property: 'showNumber'
|
|
149
|
+
},{
|
|
150
|
+
type: 'number',
|
|
151
|
+
label: 'inner-circle-size',
|
|
152
|
+
name: 'innerCircleSize',
|
|
153
|
+
property: 'innerCircleSize'
|
|
154
|
+
},{
|
|
155
|
+
type: 'color',
|
|
156
|
+
label: 'inner-circle-color',
|
|
157
|
+
name: 'innerCircleColor',
|
|
158
|
+
property: 'innerCircleColor'
|
|
159
|
+
}]
|
|
160
|
+
});
|
|
161
|
+
</script>
|
|
162
|
+
</body>
|
|
163
|
+
</html>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { Ellipse } from '@hatiolab/things-scene';
|
|
2
|
+
export default class ClockAnalog extends Ellipse {
|
|
3
|
+
is3dish(): boolean;
|
|
4
|
+
_draw(ctx: CanvasRenderingContext2D): void;
|
|
5
|
+
get nature(): {
|
|
6
|
+
mutable: boolean;
|
|
7
|
+
resizable: boolean;
|
|
8
|
+
rotatable: boolean;
|
|
9
|
+
properties: {
|
|
10
|
+
type: string;
|
|
11
|
+
label: string;
|
|
12
|
+
name: string;
|
|
13
|
+
property: string;
|
|
14
|
+
}[];
|
|
15
|
+
help: string;
|
|
16
|
+
};
|
|
17
|
+
}
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
+
*/
|
|
4
|
+
import { Component, Ellipse } from '@hatiolab/things-scene';
|
|
5
|
+
const NATURE = {
|
|
6
|
+
mutable: false,
|
|
7
|
+
resizable: true,
|
|
8
|
+
rotatable: true,
|
|
9
|
+
properties: [
|
|
10
|
+
{
|
|
11
|
+
type: 'number',
|
|
12
|
+
label: 'hour-width',
|
|
13
|
+
name: 'hourWidth',
|
|
14
|
+
property: 'hourWidth'
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
type: 'number',
|
|
18
|
+
label: 'minute-width',
|
|
19
|
+
name: 'minuteWidth',
|
|
20
|
+
property: 'minuteWidth'
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
type: 'number',
|
|
24
|
+
label: 'second-width',
|
|
25
|
+
name: 'secondWidth',
|
|
26
|
+
property: 'secondWidth'
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
type: 'checkbox',
|
|
30
|
+
label: 'needle-round',
|
|
31
|
+
name: 'needleRound',
|
|
32
|
+
property: 'needleRound'
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
type: 'checkbox',
|
|
36
|
+
label: 'show-second',
|
|
37
|
+
name: 'showSecond',
|
|
38
|
+
property: 'showSecond'
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
type: 'checkbox',
|
|
42
|
+
label: 'show-number',
|
|
43
|
+
name: 'showNumber',
|
|
44
|
+
property: 'showNumber'
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
type: 'number',
|
|
48
|
+
label: 'inner-circle-size',
|
|
49
|
+
name: 'innerCircleSize',
|
|
50
|
+
property: 'innerCircleSize'
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
type: 'color',
|
|
54
|
+
label: 'inner-circle-color',
|
|
55
|
+
name: 'innerCircleColor',
|
|
56
|
+
property: 'innerCircleColor'
|
|
57
|
+
}
|
|
58
|
+
],
|
|
59
|
+
help: 'scene/component/analog-clock'
|
|
60
|
+
};
|
|
61
|
+
function drawHand(ctx, pos, length, rx, needleRound) {
|
|
62
|
+
ctx.beginPath();
|
|
63
|
+
ctx.lineWidth = rx;
|
|
64
|
+
ctx.lineCap = needleRound ? 'round' : 'square';
|
|
65
|
+
ctx.moveTo(0, 0);
|
|
66
|
+
ctx.rotate(pos);
|
|
67
|
+
ctx.lineTo(0, -length);
|
|
68
|
+
ctx.stroke();
|
|
69
|
+
ctx.rotate(-pos);
|
|
70
|
+
}
|
|
71
|
+
export default class ClockAnalog extends Ellipse {
|
|
72
|
+
is3dish() {
|
|
73
|
+
return false;
|
|
74
|
+
}
|
|
75
|
+
_draw(ctx) {
|
|
76
|
+
var { cx, cy, rx, ry, fillStyle, strokeStyle, fontColor = '#000', lineWidth, hourWidth, minuteWidth, secondWidth, needleRound = false, showSecond = true, showNumber = true, innerCircleSize = 5, innerCircleColor = '#000' } = this.model;
|
|
77
|
+
// 시계 원 그리기.
|
|
78
|
+
ctx.beginPath();
|
|
79
|
+
ctx.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, 0, 2 * Math.PI);
|
|
80
|
+
ctx.fillStyle = fillStyle;
|
|
81
|
+
ctx.strokeStyle = strokeStyle;
|
|
82
|
+
ctx.lineWidth = lineWidth || rx * 0.1;
|
|
83
|
+
this.drawFill(ctx);
|
|
84
|
+
this.drawStroke(ctx);
|
|
85
|
+
ctx.beginPath();
|
|
86
|
+
ctx.translate(cx, cy);
|
|
87
|
+
ctx.scale(1, ry / rx);
|
|
88
|
+
// 시계 숫자 그리기
|
|
89
|
+
if (showNumber) {
|
|
90
|
+
var ang;
|
|
91
|
+
var num;
|
|
92
|
+
ctx.font = rx * 0.15 + 'px arial';
|
|
93
|
+
ctx.textBaseline = 'middle';
|
|
94
|
+
ctx.textAlign = 'center';
|
|
95
|
+
ctx.fillStyle = fontColor;
|
|
96
|
+
for (num = 1; num < 13; num++) {
|
|
97
|
+
ang = (num * Math.PI) / 6;
|
|
98
|
+
ctx.rotate(ang);
|
|
99
|
+
ctx.translate(0, -rx * 0.85);
|
|
100
|
+
ctx.rotate(-ang);
|
|
101
|
+
ctx.fillText(num.toString(), 0, 0);
|
|
102
|
+
ctx.rotate(ang);
|
|
103
|
+
ctx.translate(0, rx * 0.85);
|
|
104
|
+
ctx.rotate(-ang);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
// 시계 침 그리기
|
|
108
|
+
var now = new Date();
|
|
109
|
+
var hour = now.getHours();
|
|
110
|
+
var minute = now.getMinutes();
|
|
111
|
+
var second = now.getSeconds();
|
|
112
|
+
// hour needle
|
|
113
|
+
hour = hour % 12;
|
|
114
|
+
hour = (hour * Math.PI) / 6 + (minute * Math.PI) / (6 * 60) + (second * Math.PI) / (360 * 60);
|
|
115
|
+
drawHand(ctx, hour, rx * 0.55, hourWidth || rx * 0.07, needleRound);
|
|
116
|
+
// minute needle
|
|
117
|
+
minute = (minute * Math.PI) / 30 + (second * Math.PI) / (30 * 60);
|
|
118
|
+
drawHand(ctx, minute, rx * 0.8, minuteWidth || rx * 0.07, needleRound);
|
|
119
|
+
// second needle
|
|
120
|
+
if (showSecond) {
|
|
121
|
+
second = (second * Math.PI) / 30;
|
|
122
|
+
drawHand(ctx, second, rx * 0.9, secondWidth || rx * 0.02, needleRound);
|
|
123
|
+
}
|
|
124
|
+
ctx.beginPath();
|
|
125
|
+
// Inner Circle
|
|
126
|
+
if (innerCircleSize) {
|
|
127
|
+
ctx.ellipse(0, 0, innerCircleSize, innerCircleSize, 0, 0, 2 * Math.PI);
|
|
128
|
+
ctx.fillStyle = innerCircleColor;
|
|
129
|
+
ctx.fill();
|
|
130
|
+
}
|
|
131
|
+
ctx.beginPath();
|
|
132
|
+
ctx.scale(1, rx / ry);
|
|
133
|
+
ctx.translate(-cx, -cy);
|
|
134
|
+
var timeOut = setTimeout(function (self) {
|
|
135
|
+
self.invalidate();
|
|
136
|
+
clearTimeout(timeOut);
|
|
137
|
+
}, 1000, this);
|
|
138
|
+
}
|
|
139
|
+
get nature() {
|
|
140
|
+
return NATURE;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
Component.register('clock-analog', ClockAnalog);
|
|
144
|
+
//# sourceMappingURL=clock-analog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"clock-analog.js","sourceRoot":"","sources":["../src/clock-analog.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, Ellipse } from '@hatiolab/things-scene'\n\nconst NATURE = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n {\n type: 'number',\n label: 'hour-width',\n name: 'hourWidth',\n property: 'hourWidth'\n },\n {\n type: 'number',\n label: 'minute-width',\n name: 'minuteWidth',\n property: 'minuteWidth'\n },\n {\n type: 'number',\n label: 'second-width',\n name: 'secondWidth',\n property: 'secondWidth'\n },\n {\n type: 'checkbox',\n label: 'needle-round',\n name: 'needleRound',\n property: 'needleRound'\n },\n {\n type: 'checkbox',\n label: 'show-second',\n name: 'showSecond',\n property: 'showSecond'\n },\n {\n type: 'checkbox',\n label: 'show-number',\n name: 'showNumber',\n property: 'showNumber'\n },\n {\n type: 'number',\n label: 'inner-circle-size',\n name: 'innerCircleSize',\n property: 'innerCircleSize'\n },\n {\n type: 'color',\n label: 'inner-circle-color',\n name: 'innerCircleColor',\n property: 'innerCircleColor'\n }\n ],\n help: 'scene/component/analog-clock'\n}\n\nfunction drawHand(ctx: CanvasRenderingContext2D, pos: number, length: number, rx: number, needleRound: boolean) {\n ctx.beginPath()\n ctx.lineWidth = rx\n ctx.lineCap = needleRound ? 'round' : 'square'\n ctx.moveTo(0, 0)\n ctx.rotate(pos)\n ctx.lineTo(0, -length)\n ctx.stroke()\n ctx.rotate(-pos)\n}\n\nexport default class ClockAnalog extends Ellipse {\n is3dish() {\n return false\n }\n\n _draw(ctx: CanvasRenderingContext2D) {\n var {\n cx,\n cy,\n rx,\n ry,\n fillStyle,\n strokeStyle,\n fontColor = '#000',\n lineWidth,\n hourWidth,\n minuteWidth,\n secondWidth,\n needleRound = false,\n showSecond = true,\n showNumber = true,\n innerCircleSize = 5,\n innerCircleColor = '#000'\n } = this.model\n\n // 시계 원 그리기.\n ctx.beginPath()\n ctx.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, 0, 2 * Math.PI)\n\n ctx.fillStyle = fillStyle\n\n ctx.strokeStyle = strokeStyle\n ctx.lineWidth = lineWidth || rx * 0.1\n this.drawFill(ctx)\n this.drawStroke(ctx)\n\n ctx.beginPath()\n ctx.translate(cx, cy)\n ctx.scale(1, ry / rx)\n\n // 시계 숫자 그리기\n if (showNumber) {\n var ang\n var num\n ctx.font = rx * 0.15 + 'px arial'\n ctx.textBaseline = 'middle'\n ctx.textAlign = 'center'\n ctx.fillStyle = fontColor\n\n for (num = 1; num < 13; num++) {\n ang = (num * Math.PI) / 6\n ctx.rotate(ang)\n ctx.translate(0, -rx * 0.85)\n ctx.rotate(-ang)\n ctx.fillText(num.toString(), 0, 0)\n ctx.rotate(ang)\n ctx.translate(0, rx * 0.85)\n ctx.rotate(-ang)\n }\n }\n\n // 시계 침 그리기\n var now = new Date()\n var hour = now.getHours()\n var minute = now.getMinutes()\n var second = now.getSeconds()\n\n // hour needle\n hour = hour % 12\n hour = (hour * Math.PI) / 6 + (minute * Math.PI) / (6 * 60) + (second * Math.PI) / (360 * 60)\n\n drawHand(ctx, hour, rx * 0.55, hourWidth || rx * 0.07, needleRound)\n\n // minute needle\n minute = (minute * Math.PI) / 30 + (second * Math.PI) / (30 * 60)\n drawHand(ctx, minute, rx * 0.8, minuteWidth || rx * 0.07, needleRound)\n\n // second needle\n if (showSecond) {\n second = (second * Math.PI) / 30\n drawHand(ctx, second, rx * 0.9, secondWidth || rx * 0.02, needleRound)\n }\n\n ctx.beginPath()\n\n // Inner Circle\n if (innerCircleSize) {\n ctx.ellipse(0, 0, innerCircleSize, innerCircleSize, 0, 0, 2 * Math.PI)\n ctx.fillStyle = innerCircleColor\n ctx.fill()\n }\n\n ctx.beginPath()\n\n ctx.scale(1, rx / ry)\n ctx.translate(-cx, -cy)\n\n var timeOut: NodeJS.Timeout = setTimeout(\n function (self) {\n self.invalidate()\n clearTimeout(timeOut)\n },\n 1000,\n this\n )\n }\n\n get nature() {\n return NATURE\n }\n}\n\nComponent.register('clock-analog', ClockAnalog)\n"]}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import 'dayjs/esm/locale/ko';
|
|
2
|
+
import 'dayjs/esm/locale/zh-cn';
|
|
3
|
+
import 'dayjs/esm/locale/ja';
|
|
4
|
+
import { Text } from '@hatiolab/things-scene';
|
|
5
|
+
export default class ClockText extends Text {
|
|
6
|
+
private _raf?;
|
|
7
|
+
is3dish(): boolean;
|
|
8
|
+
get nature(): {
|
|
9
|
+
mutable: boolean;
|
|
10
|
+
resizable: boolean;
|
|
11
|
+
rotatable: boolean;
|
|
12
|
+
properties: ({
|
|
13
|
+
type: string;
|
|
14
|
+
label: string;
|
|
15
|
+
name: string;
|
|
16
|
+
property?: undefined;
|
|
17
|
+
} | {
|
|
18
|
+
type: string;
|
|
19
|
+
label: string;
|
|
20
|
+
name: string;
|
|
21
|
+
property: {
|
|
22
|
+
options: {
|
|
23
|
+
display: string;
|
|
24
|
+
value: string;
|
|
25
|
+
}[];
|
|
26
|
+
};
|
|
27
|
+
})[];
|
|
28
|
+
help: string;
|
|
29
|
+
};
|
|
30
|
+
render(ctx: CanvasRenderingContext2D): void;
|
|
31
|
+
_timer(): void;
|
|
32
|
+
_getTimeStamp(): string;
|
|
33
|
+
dispose(): void;
|
|
34
|
+
}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
+
*/
|
|
4
|
+
import 'dayjs/esm/locale/ko';
|
|
5
|
+
import 'dayjs/esm/locale/zh-cn';
|
|
6
|
+
import 'dayjs/esm/locale/ja';
|
|
7
|
+
import dayjs from 'dayjs/esm/index';
|
|
8
|
+
import utc from 'dayjs/esm/plugin/utc';
|
|
9
|
+
import { Component, Text } from '@hatiolab/things-scene';
|
|
10
|
+
dayjs.extend(utc);
|
|
11
|
+
const NATURE = {
|
|
12
|
+
mutable: false,
|
|
13
|
+
resizable: true,
|
|
14
|
+
rotatable: true,
|
|
15
|
+
properties: [
|
|
16
|
+
{
|
|
17
|
+
type: 'string',
|
|
18
|
+
label: 'time-format',
|
|
19
|
+
name: 'timeFormat'
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
type: 'checkbox',
|
|
23
|
+
label: 'is-local-time',
|
|
24
|
+
name: 'localTime'
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
type: 'number',
|
|
28
|
+
label: 'utc',
|
|
29
|
+
name: 'utc'
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
type: 'select',
|
|
33
|
+
label: 'week-language',
|
|
34
|
+
name: 'weekLanguage',
|
|
35
|
+
property: {
|
|
36
|
+
options: [
|
|
37
|
+
{
|
|
38
|
+
display: 'English',
|
|
39
|
+
value: 'en'
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
display: 'Korean',
|
|
43
|
+
value: 'ko'
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
display: 'Chinese',
|
|
47
|
+
value: 'zh-cn'
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
display: 'Japanese',
|
|
51
|
+
value: 'ja'
|
|
52
|
+
}
|
|
53
|
+
]
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
],
|
|
57
|
+
help: 'scene/component/clock-text'
|
|
58
|
+
};
|
|
59
|
+
export default class ClockText extends Text {
|
|
60
|
+
is3dish() {
|
|
61
|
+
return false;
|
|
62
|
+
}
|
|
63
|
+
get nature() {
|
|
64
|
+
return NATURE;
|
|
65
|
+
}
|
|
66
|
+
render(ctx) {
|
|
67
|
+
super.render(ctx);
|
|
68
|
+
this._raf = requestAnimationFrame(() => {
|
|
69
|
+
setTimeout(() => {
|
|
70
|
+
this._timer();
|
|
71
|
+
}, 1000);
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
_timer() {
|
|
75
|
+
this.set('data', this._getTimeStamp());
|
|
76
|
+
}
|
|
77
|
+
_getTimeStamp() {
|
|
78
|
+
var d = dayjs();
|
|
79
|
+
var utc = this.get('utc');
|
|
80
|
+
var formatStr = this.get('timeFormat') || 'YYYY-MM-DD HH:mm:ss';
|
|
81
|
+
var week_lang = this.get('weekLanguage');
|
|
82
|
+
if (!this.get('weekLanguage')) {
|
|
83
|
+
week_lang = 'en';
|
|
84
|
+
}
|
|
85
|
+
if (this.get('localTime')) {
|
|
86
|
+
return d.local().locale(week_lang).format(formatStr);
|
|
87
|
+
}
|
|
88
|
+
else {
|
|
89
|
+
return d.utc().utcOffset(Number(utc)).locale(week_lang).format(formatStr);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
dispose() {
|
|
93
|
+
super.dispose();
|
|
94
|
+
this._raf !== undefined && cancelAnimationFrame(this._raf);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
Component.register('clock-text', ClockText);
|
|
98
|
+
//# sourceMappingURL=clock-text.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"clock-text.js","sourceRoot":"","sources":["../src/clock-text.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport 'dayjs/esm/locale/ko'\nimport 'dayjs/esm/locale/zh-cn'\nimport 'dayjs/esm/locale/ja'\n\nimport dayjs from 'dayjs/esm/index'\nimport utc from 'dayjs/esm/plugin/utc'\n\nimport { Component, Text } from '@hatiolab/things-scene'\n\ndayjs.extend(utc)\n\nconst NATURE = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n {\n type: 'string',\n label: 'time-format',\n name: 'timeFormat'\n },\n {\n type: 'checkbox',\n label: 'is-local-time',\n name: 'localTime'\n },\n {\n type: 'number',\n label: 'utc',\n name: 'utc'\n },\n {\n type: 'select',\n label: 'week-language',\n name: 'weekLanguage',\n property: {\n options: [\n {\n display: 'English',\n value: 'en'\n },\n {\n display: 'Korean',\n value: 'ko'\n },\n {\n display: 'Chinese',\n value: 'zh-cn'\n },\n {\n display: 'Japanese',\n value: 'ja'\n }\n ]\n }\n }\n ],\n help: 'scene/component/clock-text'\n}\n\nexport default class ClockText extends Text {\n private _raf?: number\n\n is3dish() {\n return false\n }\n\n get nature() {\n return NATURE\n }\n\n render(ctx: CanvasRenderingContext2D) {\n super.render(ctx)\n\n this._raf = requestAnimationFrame(() => {\n setTimeout(() => {\n this._timer()\n }, 1000)\n })\n }\n\n _timer() {\n this.set('data', this._getTimeStamp())\n }\n\n _getTimeStamp() {\n var d = dayjs()\n\n var utc = this.get('utc')\n var formatStr = this.get('timeFormat') || 'YYYY-MM-DD HH:mm:ss'\n var week_lang = this.get('weekLanguage')\n if (!this.get('weekLanguage')) {\n week_lang = 'en'\n }\n if (this.get('localTime')) {\n return d.local().locale(week_lang).format(formatStr)\n } else {\n return d.utc().utcOffset(Number(utc)).locale(week_lang).format(formatStr)\n }\n }\n\n dispose() {\n super.dispose()\n this._raf !== undefined && cancelAnimationFrame(this._raf)\n }\n}\n\nComponent.register('clock-text', ClockText)\n"]}
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nexport { default as ClockAnalog } from './clock-analog'\nexport { default as ClockText } from './clock-text'\n"]}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
# clock
|
|
2
|
+
![컴포넌트-텍스트시계][clock-text-01]
|
|
3
|
+
텍스트 형식의 시계
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
## 속성 :
|
|
7
|
+
|
|
8
|
+
1. time-format(YYYY-MM-DD HH:mm:ss) - 시간 형식을 지정
|
|
9
|
+
![텍스트시계-time-format적용결과][clock-text-02]
|
|
10
|
+
|
|
11
|
+
2. is-local-time(checkbox) - 현지 시간(기본적으로 체크되어 있음)
|
|
12
|
+
![텍스트시계-is-local-time적용결과][clock-text-03]
|
|
13
|
+
|
|
14
|
+
3. utc - 협정세계시(is-local-time을 체크 해제하고 지정해야 함)
|
|
15
|
+
![텍스트시계-utc적용결과][clock-text-04]
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
[clock-text-01]: ../images/clock-text-01.png
|
|
19
|
+
|
|
20
|
+
[clock-text-02]: ../images/clock-text-02.png
|
|
21
|
+
|
|
22
|
+
[clock-text-03]: ../images/clock-text-03.png
|
|
23
|
+
|
|
24
|
+
[clock-text-04]: ../images/clock-text-04.png
|
|
25
|
+
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# clock[en]
|
|
2
|
+
![Component-Text Clock][clock-text-01]
|
|
3
|
+
The clock of text format.
|
|
4
|
+
|
|
5
|
+
## properties:
|
|
6
|
+
1. time-format(YYYY-MM-DD HH:mm:ss) - Specify the time format.
|
|
7
|
+
![Text Clock-time-format application result][clock-text-02]
|
|
8
|
+
|
|
9
|
+
2. is-local-time(checkbox) - Local time (checked by default)
|
|
10
|
+
![Text Clock-is-local-time application result][clock-text-03]
|
|
11
|
+
|
|
12
|
+
3. utc - universal time coordinated (Should specify before uncheck is-local-time.)
|
|
13
|
+
![Text Clock-utc application result][clock-text-04]
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
[clock-text-01]: ../images/clock-text-01.png
|
|
17
|
+
|
|
18
|
+
[clock-text-02]: ../images/clock-text-02.png
|
|
19
|
+
|
|
20
|
+
[clock-text-03]: ../images/clock-text-03.png
|
|
21
|
+
|
|
22
|
+
[clock-text-04]: ../images/clock-text-04.png
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# clock[zh]
|
|
2
|
+
![组件-文本钟][clock-text-01]
|
|
3
|
+
文本格式的时钟。
|
|
4
|
+
|
|
5
|
+
## 属性：
|
|
6
|
+
1. time-format(YYYY-MM-DD HH:mm:ss) - 指定时间格式。
|
|
7
|
+
![文本钟-time-format适用结果][clock-text-02]
|
|
8
|
+
|
|
9
|
+
2. is-local-time(checkbox) - 当地时间（默认被选）
|
|
10
|
+
![文本钟-is-local-time适用结果][clock-text-03]
|
|
11
|
+
|
|
12
|
+
3. utc - 协调世界时（指定时，需要先解除勾选is-local-time。）
|
|
13
|
+
![文本钟-utc适用结果][clock-text-04]
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
[clock-text-01]: ../images/clock-text-01.png
|
|
17
|
+
|
|
18
|
+
[clock-text-02]: ../images/clock-text-02.png
|
|
19
|
+
|
|
20
|
+
[clock-text-03]: ../images/clock-text-03.png
|
|
21
|
+
|
|
22
|
+
[clock-text-04]: ../images/clock-text-04.png
|