@egjs/axes
Version:
A module used to change the information of user action entered by various input devices such as touch screen or mouse into the logical virtual coordinates. You can easily create a UI that responds to user actions.
619 lines (618 loc) • 18 kB
HTML
<html lang="en">
<head>
<title>Code coverage report for src/inputType/RotatePanInput.ts</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../../prettify.css" />
<link rel="stylesheet" href="../../base.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type='text/css'>
.coverage-summary .sorter {
background-image: url(../../sort-arrow-sprite.png);
}
</style>
</head>
<body>
<div class='wrapper'>
<div class='pad1'>
<h1>
<a href="../../index.html">All files</a> / <a href="index.html">src/inputType</a> RotatePanInput.ts
</h1>
<div class='clearfix'>
</div>
</div>
<div class='status-line high'></div>
<pre><table class="coverage">
<tr><td class="line-count quiet">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192</td><td class="line-coverage quiet"><span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-yes">2692x</span>
<span class="cline-any cline-yes">2692x</span>
<span class="cline-any cline-yes">2692x</span>
<span class="cline-any cline-yes">2692x</span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2692x</span>
<span class="cline-any cline-yes">2692x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2692x</span>
<span class="cline-any cline-yes">2692x</span>
<span class="cline-any cline-yes">2692x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-yes">2720x</span>
<span class="cline-any cline-yes">2720x</span>
<span class="cline-any cline-yes">2720x</span>
<span class="cline-any cline-yes">2720x</span>
<span class="cline-any cline-yes">2720x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2720x</span>
<span class="cline-any cline-yes">2720x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2720x</span>
<span class="cline-any cline-yes">1422x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1298x</span>
<span class="cline-any cline-yes">1298x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2720x</span>
<span class="cline-any cline-yes">14x</span>
<span class="cline-any cline-yes">2706x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">2705x</span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2705x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2720x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-yes">5440x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2720x</span>
<span class="cline-any cline-yes">2720x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2720x</span>
<span class="cline-any cline-yes">1577x</span>
<span class="cline-any cline-yes">1143x</span>
<span class="cline-any cline-yes">809x</span>
<span class="cline-any cline-yes">334x</span>
<span class="cline-any cline-yes">199x</span>
<span class="cline-any cline-yes">135x</span>
<span class="cline-any cline-yes">135x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2720x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-neutral"> </span></td><td class="text"><pre class="prettyprint lang-js">/*
* Copyright (c) 2015 NAVER Corp.
* egjs projects are licensed under the MIT license
*/
import Axes from "../Axes";
import { ElementType, ExtendedEvent } from "../types";
import { getAngle } from "../utils";
import { toAxis } from "./InputType";
import { PanInput, PanInputOption } from "./PanInput";
/**
* A module that passes the angle moved by touch to Axes and uses one axis of rotation.
* [Details](https://github.com/naver/egjs-axes/wiki/RotatePanInput)
* @ko 터치에 의해 움직인 각도를 Axes 에 전달하며 1개의 회전축만 사용한다.
* [상세내용](https://github.com/naver/egjs-axes/wiki/RotatePanInput-%7C-%ED%95%9C%EA%B5%AD%EC%96%B4)
*
* @example
* ```js
* const input = new eg.Axes.RotatePanInput("#area");
*
* var axes = new eg.Axes({
* // property name('angle') could be anything you want (eg. x, y, z...)
* angle: {
* range: [-180, 180] // from -180deg to 180deg
* }
* });
*
* axes.connect("angle", input)
* ```
* @param {HTMLElement|String|jQuery} element An element to use the eg.Axes.RotatePanInput module <ko>eg.Axes.RotatePanInput 모듈을 사용할 엘리먼트</ko>
* @param {PanInputOption} [options] The option object of the eg.Axes.PanInput module<ko>eg.Axes.PanInput 모듈의 옵션 객체</ko>
* @extends PanInput
*/
export class RotatePanInput extends PanInput {
private _rotateOrigin: number[];
private _prevAngle: number;
private _prevQuadrant: number = null;
private _lastDiff = 0;
private _coefficientForDistanceToAngle: number;
/**
*
*/
public constructor(el: ElementType, options?: PanInputOption) {
super(el, options);
}
public mapAxes(axes: string[]) {
this._direction = Axes.DIRECTION_ALL;
this.axes = axes;
}
protected _onPanstart(event: MouseEvent) {
const { inputKey, inputButton } = this.options;
const activeEvent = this._activeEvent;
const panEvent = activeEvent.onEventStart(event, inputKey, inputButton);
<span class="missing-if-branch" title="if path not taken" >I</span>if (!panEvent || !this.isEnabled()) {
<span class="cstat-no" title="statement not covered" > return;</span>
}
const rect = this.element.getBoundingClientRect();
this._observer.hold(this, panEvent);
this._attachWindowEvent(activeEvent, event);
// TODO: how to do if element is ellipse not circle.
this._coefficientForDistanceToAngle = 360 / (rect.width * Math.PI); // from 2*pi*r * x / 360
// TODO: provide a way to set origin like https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
this._rotateOrigin = [
rect.left + (rect.width - 1) / 2,
rect.top + (rect.height - 1) / 2,
];
// init angle.
this._prevAngle = null;
this._triggerChange(panEvent);
activeEvent.prevEvent = panEvent;
}
protected _onPanmove(event: MouseEvent) {
const { inputKey, inputButton } = this.options;
const activeEvent = this._activeEvent;
const panEvent = activeEvent.onEventMove(event, inputKey, inputButton);
<span class="missing-if-branch" title="if path not taken" >I</span>if (!panEvent || !this.isEnabled()) {
<span class="cstat-no" title="statement not covered" > return;</span>
}
<span class="missing-if-branch" title="else path not taken" >E</span>if (panEvent.srcEvent.cancelable !== false) {
panEvent.srcEvent.preventDefault();
}
panEvent.srcEvent.stopPropagation();
this._triggerChange(panEvent);
activeEvent.prevEvent = panEvent;
}
protected _onPanend(event: MouseEvent) {
const activeEvent = this._activeEvent;
activeEvent.onEventEnd(event);
<span class="missing-if-branch" title="if path not taken" >I</span>if (!this.isEnabled()) {
<span class="cstat-no" title="statement not covered" > return;</span>
}
const prevEvent = activeEvent.prevEvent;
this._triggerChange(prevEvent);
const vx = prevEvent.velocityX;
const vy = prevEvent.velocityY;
const velocity =
Math.sqrt(vx * vx + vy * vy) * (this._lastDiff > 0 ? -1 : 1); // clockwise
activeEvent.onRelease();
this._observer.release(this, prevEvent, [
velocity * this._coefficientForDistanceToAngle,
]);
this._detachWindowEvent(activeEvent);
}
private _triggerChange(event: ExtendedEvent) {
const { x, y } = this._getPosFromOrigin(event.center.x, event.center.y);
const angle = getAngle(x, y);
const positiveAngle = angle < 0 ? 360 + angle : angle;
const quadrant = this._getQuadrant(event.center.x, event.center.y);
const diff = this._getDifference(
this._prevAngle,
positiveAngle,
this._prevQuadrant,
quadrant
);
this._prevAngle = positiveAngle;
this._prevQuadrant = quadrant;
if (diff === 0) {
return;
}
this._lastDiff = diff;
this._observer.change(this, event, toAxis(this.axes, [-diff])); // minus for clockwise
}
private _getDifference(
prevAngle: number,
angle: number,
prevQuadrant: number,
quadrant: number
) {
let diff: number;
if (prevAngle === null) {
diff = 0;
} else if (prevQuadrant === 1 && quadrant === 4) {
diff = -prevAngle - (360 - angle);
} else <span class="missing-if-branch" title="if path not taken" >I</span>if (prevQuadrant === 4 && quadrant === 1) {
<span class="cstat-no" title="statement not covered" > diff = 360 - prevAngle + angle;</span>
} else {
diff = angle - prevAngle;
}
return diff;
}
private _getPosFromOrigin(posX: number, posY: number) {
return {
x: posX - this._rotateOrigin[0],
y: this._rotateOrigin[1] - posY,
};
}
private _getQuadrant(posX: number, posY: number) {
/**
* Quadrant
* y(+)
* |
* 2 | 1
* --------------->x(+)
* 3 | 4
* |
*/
const { x, y } = this._getPosFromOrigin(posX, posY);
let q = 0;
if (x >= 0 && y >= 0) {
q = 1;
} else if (x < 0 && y >= 0) {
q = 2;
} else if (x < 0 && y < 0) {
q = 3;
} else <span class="missing-if-branch" title="else path not taken" >E</span>if (x >= 0 && y < 0) {
q = 4;
}
return q;
}
}
</pre></td></tr>
</table></pre>
<div class='push'></div><!-- for sticky footer -->
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage
generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Wed Sep 16 2026 14:00:55 GMT+0900 (Korean Standard Time)
</div>
</div>
<script src="../../prettify.js"></script>
<script>
window.onload = function () {
if (typeof prettyPrint === 'function') {
prettyPrint();
}
};
</script>
<script src="../../sorter.js"></script>
</body>
</html>