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 | |
11 |
|
12 |
|
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'
|
45 | import type { Point, FullRect, PointerEventType, Element } from '@interactjs/types/index'
|
46 | import extend from '@interactjs/utils/extend'
|
47 | import getOriginXY from '@interactjs/utils/getOriginXY'
|
48 | import hypot from '@interactjs/utils/hypot'
|
49 |
|
50 | import { BaseEvent } from './BaseEvent'
|
51 | import type { Interaction } from './Interaction'
|
52 | import { defaults } from './options'
|
53 |
|
54 | export type EventPhase = keyof PhaseMap
|
55 |
|
56 | export 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
|
64 | export 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 |
|
78 | export class InteractEvent<
|
79 | T extends ActionName = never,
|
80 | P extends EventPhase = EventPhase
|
81 | > extends BaseEvent<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<InteractEvent<T>['getSwipe']>
|
107 | timeStamp: any
|
108 | // resize
|
109 | axes?: 'x' | 'y' | 'xy'
|
110 | preEnd?: boolean
|
111 |
|
112 | /** */
|
113 | constructor (
|
114 | interaction: Interaction<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 && 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 < 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 < 0) {
|
200 | angle += 360
|
201 | }
|
202 |
|
203 | const left = 135 - overlap <= angle && angle < 225 + overlap
|
204 | const up = 225 - overlap <= angle && angle < 315 + overlap
|
205 |
|
206 | const right = !left && (315 - overlap <= angle || angle < 45 + overlap)
|
207 | const down = !up && 45 - overlap <= angle && angle < 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
|
242 | Object.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>
|