UNPKG

13.3 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1">
6 <title>packages/@interactjs/core/InteractEvent.ts - Documentation</title>
7
8 <script src="scripts/prettify/prettify.js"></script>
9 <script src="scripts/prettify/lang-css.js"></script>
10 <!--[if lt IE 9]>
11 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
12 <![endif]-->
13 <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
14 <link type="text/css" rel="stylesheet" href="styles/prettify.css">
15 <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
16</head>
17<body>
18
19<input type="checkbox" id="nav-trigger" class="nav-trigger" />
20<label for="nav-trigger" class="navicon-button x">
21 <div class="navicon"></div>
22</label>
23
24<label for="nav-trigger" class="overlay"></label>
25
26<nav>
27 <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="DropEvent_DropEvent.html">DropEvent</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Interactable.html">Interactable</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#context">context</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#deltaSource">deltaSource</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#draggable">draggable</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#dropCheck">dropCheck</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#dropzone">dropzone</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#fire">fire</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#gesturable">gesturable</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#getRect">getRect</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#off">off</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#on">on</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#origin">origin</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#rectChecker">rectChecker</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#reflow">reflow</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#resizable">resizable</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#set">set</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#unset">unset</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="InteractEvent_InteractEvent.html">InteractEvent</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Interaction_Interaction.html">Interaction</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="module.exports_module.exports.html">exports</a></span></li><li class="nav-heading">Modules</li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-interact.html">interact</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.isSet">isSet</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.maxInteractions">maxInteractions</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.pointerMoveTolerance">pointerMoveTolerance</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.stop">stop</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.supportsPointerEvent">supportsPointerEvent</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.supportsTouch">supportsTouch</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.use">use</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-modifiers_aspectRatio.html">modifiers/aspectRatio</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-modifiers_snapEdges.html">modifiers/snapEdges</a></span></li><li class="nav-heading"><a href="global.html">Globals</a></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#interact">interact</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#preventDefault">preventDefault</a></span></li>
28</nav>
29
30<div class="code-col-bg"></div>
31
32<div id="main">
33
34 <h1 class="page-title">packages/@interactjs/core/InteractEvent.ts</h1>
35
36
37
38
39
40
41
42 <section>
43 <article>
44 <pre class="prettyprint source linenums"><code>import type { ActionName } from '@interactjs/core/scope'
45import type { Point, FullRect, PointerEventType, Element } from '@interactjs/types/index'
46import extend from '@interactjs/utils/extend'
47import getOriginXY from '@interactjs/utils/getOriginXY'
48import hypot from '@interactjs/utils/hypot'
49
50import { BaseEvent } from './BaseEvent'
51import type { Interaction } from './Interaction'
52import { defaults } from './options'
53
54export type EventPhase = keyof PhaseMap
55
56export interface PhaseMap {
57 start: true
58 move: true
59 end: true
60}
61
62// defined outside of class definition to avoid assignment of undefined during
63// construction
64export interface InteractEvent {
65 pageX: number
66 pageY: number
67
68 clientX: number
69 clientY: number
70
71 dx: number
72 dy: number
73
74 velocityX: number
75 velocityY: number
76}
77
78export class InteractEvent&lt;
79 T extends ActionName = never,
80 P extends EventPhase = EventPhase
81> extends BaseEvent&lt;T> {
82 target: Element
83 currentTarget: Element
84 relatedTarget: Element | null = null
85 screenX?: number
86 screenY?: number
87 button: number
88 buttons: number
89 ctrlKey: boolean
90 shiftKey: boolean
91 altKey: boolean
92 metaKey: boolean
93 page: Point
94 client: Point
95 delta: Point
96 rect: FullRect
97 x0: number
98 y0: number
99 t0: number
100 dt: number
101 duration: number
102 clientX0: number
103 clientY0: number
104 velocity: Point
105 speed: number
106 swipe: ReturnType&lt;InteractEvent&lt;T>['getSwipe']>
107 timeStamp: any
108 // resize
109 axes?: 'x' | 'y' | 'xy'
110 preEnd?: boolean
111
112 /** */
113 constructor (
114 interaction: Interaction&lt;T>,
115 event: PointerEventType,
116 actionName: T,
117 phase: P,
118 element: Element,
119 preEnd?: boolean,
120 type?: string,
121 ) {
122 super(interaction)
123
124 element = element || interaction.element
125
126 const target = interaction.interactable
127 const deltaSource = (((target &amp;&amp; target.options) || defaults) as any).deltaSource as 'page' | 'client'
128 const origin = getOriginXY(target, element, actionName)
129 const starting = phase === 'start'
130 const ending = phase === 'end'
131 const prevEvent = starting ? this : interaction.prevEvent
132 const coords = starting
133 ? interaction.coords.start
134 : ending
135 ? { page: prevEvent.page, client: prevEvent.client, timeStamp: interaction.coords.cur.timeStamp }
136 : interaction.coords.cur
137
138 this.page = extend({}, coords.page)
139 this.client = extend({}, coords.client)
140 this.rect = extend({}, interaction.rect)
141 this.timeStamp = coords.timeStamp
142
143 if (!ending) {
144 this.page.x -= origin.x
145 this.page.y -= origin.y
146
147 this.client.x -= origin.x
148 this.client.y -= origin.y
149 }
150
151 this.ctrlKey = event.ctrlKey
152 this.altKey = event.altKey
153 this.shiftKey = event.shiftKey
154 this.metaKey = event.metaKey
155 this.button = (event as MouseEvent).button
156 this.buttons = (event as MouseEvent).buttons
157 this.target = element
158 this.currentTarget = element
159 this.preEnd = preEnd
160 this.type = type || actionName + (phase || '')
161 this.interactable = target
162
163 this.t0 = starting ? interaction.pointers[interaction.pointers.length - 1].downTime : prevEvent.t0
164
165 this.x0 = interaction.coords.start.page.x - origin.x
166 this.y0 = interaction.coords.start.page.y - origin.y
167 this.clientX0 = interaction.coords.start.client.x - origin.x
168 this.clientY0 = interaction.coords.start.client.y - origin.y
169
170 if (starting || ending) {
171 this.delta = { x: 0, y: 0 }
172 } else {
173 this.delta = {
174 x: this[deltaSource].x - prevEvent[deltaSource].x,
175 y: this[deltaSource].y - prevEvent[deltaSource].y,
176 }
177 }
178
179 this.dt = interaction.coords.delta.timeStamp
180 this.duration = this.timeStamp - this.t0
181
182 // velocity and speed in pixels per second
183 this.velocity = extend({}, interaction.coords.velocity[deltaSource])
184 this.speed = hypot(this.velocity.x, this.velocity.y)
185
186 this.swipe = ending || phase === 'inertiastart' ? this.getSwipe() : null
187 }
188
189 getSwipe () {
190 const interaction = this._interaction
191
192 if (interaction.prevEvent.speed &lt; 600 || this.timeStamp - interaction.prevEvent.timeStamp > 150) {
193 return null
194 }
195
196 let angle = (180 * Math.atan2(interaction.prevEvent.velocityY, interaction.prevEvent.velocityX)) / Math.PI
197 const overlap = 22.5
198
199 if (angle &lt; 0) {
200 angle += 360
201 }
202
203 const left = 135 - overlap &lt;= angle &amp;&amp; angle &lt; 225 + overlap
204 const up = 225 - overlap &lt;= angle &amp;&amp; angle &lt; 315 + overlap
205
206 const right = !left &amp;&amp; (315 - overlap &lt;= angle || angle &lt; 45 + overlap)
207 const down = !up &amp;&amp; 45 - overlap &lt;= angle &amp;&amp; angle &lt; 135 + overlap
208
209 return {
210 up,
211 down,
212 left,
213 right,
214 angle,
215 speed: interaction.prevEvent.speed,
216 velocity: {
217 x: interaction.prevEvent.velocityX,
218 y: interaction.prevEvent.velocityY,
219 },
220 }
221 }
222
223 preventDefault () {}
224
225 /**
226 * Don't call listeners on the remaining targets
227 */
228 stopImmediatePropagation () {
229 this.immediatePropagationStopped = this.propagationStopped = true
230 }
231
232 /**
233 * Don't call any other listeners (even on the current target)
234 */
235 stopPropagation () {
236 this.propagationStopped = true
237 }
238}
239
240// getters and setters defined here to support typescript 3.6 and below which
241// don't support getter and setters in .d.ts files
242Object.defineProperties(InteractEvent.prototype, {
243 pageX: {
244 get () {
245 return this.page.x
246 },
247 set (value) {
248 this.page.x = value
249 },
250 },
251 pageY: {
252 get () {
253 return this.page.y
254 },
255 set (value) {
256 this.page.y = value
257 },
258 },
259
260 clientX: {
261 get () {
262 return this.client.x
263 },
264 set (value) {
265 this.client.x = value
266 },
267 },
268 clientY: {
269 get () {
270 return this.client.y
271 },
272 set (value) {
273 this.client.y = value
274 },
275 },
276
277 dx: {
278 get () {
279 return this.delta.x
280 },
281 set (value) {
282 this.delta.x = value
283 },
284 },
285 dy: {
286 get () {
287 return this.delta.y
288 },
289 set (value) {
290 this.delta.y = value
291 },
292 },
293
294 velocityX: {
295 get () {
296 return this.velocity.x
297 },
298 set (value) {
299 this.velocity.x = value
300 },
301 },
302 velocityY: {
303 get () {
304 return this.velocity.y
305 },
306 set (value) {
307 this.velocity.y = value
308 },
309 },
310})
311</code></pre>
312 </article>
313 </section>
314
315
316
317
318</div>
319
320<script>prettyPrint();</script>
321<script src="scripts/linenumber.js"></script>
322</body>
323</html>