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/actions/gesture/plugin.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#.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="module-interact.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="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/actions/gesture/plugin.ts</h1>
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 | <section>
|
43 | <article>
|
44 | <pre class="prettyprint source linenums"><code>import * as Interact from '@interactjs/types/index'
|
45 | import is from '@interactjs/utils/is'
|
46 | import * as pointerUtils from '@interactjs/utils/pointerUtils'
|
47 | export type GesturableMethod = Interact.ActionMethod<Interact.GesturableOptions>
|
48 |
|
49 | declare module '@interactjs/core/Interaction' {
|
50 | interface Interaction {
|
51 | gesture?: {
|
52 | angle: number // angle from first to second touch
|
53 | distance: number
|
54 | scale: number // gesture.distance / gesture.startDistance
|
55 | startAngle: number // angle of line joining two touches
|
56 | startDistance: number // distance between two touches of touchStart
|
57 | }
|
58 | }
|
59 | }
|
60 |
|
61 | declare module '@interactjs/core/Interactable' {
|
62 | interface Interactable {
|
63 | gesturable: GesturableMethod
|
64 | }
|
65 | }
|
66 |
|
67 | declare module '@interactjs/core/defaultOptions' {
|
68 | interface ActionDefaults {
|
69 | gesture: Interact.GesturableOptions
|
70 | }
|
71 | }
|
72 |
|
73 | declare module '@interactjs/core/scope' {
|
74 | interface ActionMap {
|
75 | gesture?: typeof gesture
|
76 | }
|
77 | }
|
78 |
|
79 | export interface GestureEvent extends Interact.InteractEvent<'gesture'> {
|
80 | distance: number
|
81 | angle: number
|
82 | da: number // angle change
|
83 | scale: number // ratio of distance start to current event
|
84 | ds: number // scale change
|
85 | box: Interact.Rect // enclosing box of all points
|
86 | touches: Interact.PointerType[]
|
87 | }
|
88 |
|
89 | export interface GestureSignalArg extends Interact.DoPhaseArg<'gesture', Interact.EventPhase> {
|
90 | iEvent: GestureEvent
|
91 | interaction: Interact.Interaction<'gesture'>
|
92 | }
|
93 |
|
94 | function install (scope: Interact.Scope) {
|
95 | const {
|
96 | actions,
|
97 | Interactable,
|
98 | defaults,
|
99 | } = scope
|
100 |
|
101 | /**
|
102 | * ```js
|
103 | * interact(element).gesturable({
|
104 | * onstart: function (event) {},
|
105 | * onmove : function (event) {},
|
106 | * onend : function (event) {},
|
107 | *
|
108 | * // limit multiple gestures.
|
109 | * // See the explanation in {@link Interactable.draggable} example
|
110 | * max: Infinity,
|
111 | * maxPerElement: 1,
|
112 | * })
|
113 | *
|
114 | * var isGestureable = interact(element).gesturable()
|
115 | * ```
|
116 | *
|
117 | * Gets or sets whether multitouch gestures can be performed on the target
|
118 | *
|
119 | * @param {boolean | object} [options] true/false or An object with event
|
120 | * listeners to be fired on gesture events (makes the Interactable gesturable)
|
121 | * @return {boolean | Interactable} A boolean indicating if this can be the
|
122 | * target of gesture events, or this Interactable
|
123 | */
|
124 | Interactable.prototype.gesturable = function (this: Interact.Interactable, options: Interact.GesturableOptions | boolean) {
|
125 | if (is.object(options)) {
|
126 | this.options.gesture.enabled = options.enabled !== false
|
127 | this.setPerAction('gesture', options)
|
128 | this.setOnEvents('gesture', options)
|
129 |
|
130 | return this
|
131 | }
|
132 |
|
133 | if (is.bool(options)) {
|
134 | this.options.gesture.enabled = options
|
135 |
|
136 | return this
|
137 | }
|
138 |
|
139 | return this.options.gesture as Interact.Options
|
140 | } as GesturableMethod
|
141 |
|
142 | actions.map.gesture = gesture
|
143 | actions.methodDict.gesture = 'gesturable'
|
144 |
|
145 | defaults.actions.gesture = gesture.defaults
|
146 | }
|
147 |
|
148 | function updateGestureProps ({ interaction, iEvent, phase }: GestureSignalArg) {
|
149 | if (interaction.prepared.name !== 'gesture') { return }
|
150 |
|
151 | const pointers = interaction.pointers.map(p => p.pointer)
|
152 | const starting = phase === 'start'
|
153 | const ending = phase === 'end'
|
154 | const deltaSource = interaction.interactable.options.deltaSource
|
155 |
|
156 | iEvent.touches = [pointers[0], pointers[1]]
|
157 |
|
158 | if (starting) {
|
159 | iEvent.distance = pointerUtils.touchDistance(pointers, deltaSource)
|
160 | iEvent.box = pointerUtils.touchBBox(pointers)
|
161 | iEvent.scale = 1
|
162 | iEvent.ds = 0
|
163 | iEvent.angle = pointerUtils.touchAngle(pointers, deltaSource)
|
164 | iEvent.da = 0
|
165 |
|
166 | interaction.gesture.startDistance = iEvent.distance
|
167 | interaction.gesture.startAngle = iEvent.angle
|
168 | }
|
169 | else if (ending) {
|
170 | const prevEvent = interaction.prevEvent as GestureEvent
|
171 |
|
172 | iEvent.distance = prevEvent.distance
|
173 | iEvent.box = prevEvent.box
|
174 | iEvent.scale = prevEvent.scale
|
175 | iEvent.ds = 0
|
176 | iEvent.angle = prevEvent.angle
|
177 | iEvent.da = 0
|
178 | }
|
179 | else {
|
180 | iEvent.distance = pointerUtils.touchDistance(pointers, deltaSource)
|
181 | iEvent.box = pointerUtils.touchBBox(pointers)
|
182 | iEvent.scale = iEvent.distance / interaction.gesture.startDistance
|
183 | iEvent.angle = pointerUtils.touchAngle(pointers, deltaSource)
|
184 |
|
185 | iEvent.ds = iEvent.scale - interaction.gesture.scale
|
186 | iEvent.da = iEvent.angle - interaction.gesture.angle
|
187 | }
|
188 |
|
189 | interaction.gesture.distance = iEvent.distance
|
190 | interaction.gesture.angle = iEvent.angle
|
191 |
|
192 | if (is.number(iEvent.scale) &&
|
193 | iEvent.scale !== Infinity &&
|
194 | !isNaN(iEvent.scale)) {
|
195 | interaction.gesture.scale = iEvent.scale
|
196 | }
|
197 | }
|
198 |
|
199 | const gesture: Interact.Plugin = {
|
200 | id: 'actions/gesture',
|
201 | before: ['actions/drag', 'actions/resize'],
|
202 | install,
|
203 | listeners: {
|
204 | 'interactions:action-start': updateGestureProps,
|
205 | 'interactions:action-move': updateGestureProps,
|
206 | 'interactions:action-end': updateGestureProps,
|
207 |
|
208 | 'interactions:new': ({ interaction }) => {
|
209 | interaction.gesture = {
|
210 | angle: 0,
|
211 | distance: 0,
|
212 | scale: 1,
|
213 | startAngle: 0,
|
214 | startDistance: 0,
|
215 | }
|
216 | },
|
217 |
|
218 | 'auto-start:check': arg => {
|
219 | if (arg.interaction.pointers.length < 2) {
|
220 | return undefined
|
221 | }
|
222 |
|
223 | const gestureOptions = arg.interactable.options.gesture
|
224 |
|
225 | if (!(gestureOptions && gestureOptions.enabled)) {
|
226 | return undefined
|
227 | }
|
228 |
|
229 | arg.action = { name: 'gesture' }
|
230 |
|
231 | return false
|
232 | },
|
233 | },
|
234 |
|
235 | defaults: {
|
236 | },
|
237 |
|
238 | getCursor () {
|
239 | return ''
|
240 | },
|
241 | }
|
242 |
|
243 | export default gesture
|
244 | </code></pre>
|
245 | </article>
|
246 | </section>
|
247 |
|
248 |
|
249 |
|
250 |
|
251 | </div>
|
252 |
|
253 | <script>prettyPrint();</script>
|
254 | <script src="scripts/linenumber.js"></script>
|
255 | </body>
|
256 | </html>
|