UNPKG

12.9 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/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 <!--[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#.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'
45import is from '@interactjs/utils/is'
46import * as pointerUtils from '@interactjs/utils/pointerUtils'
47export type GesturableMethod = Interact.ActionMethod&lt;Interact.GesturableOptions>
48
49declare 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
61declare module '@interactjs/core/Interactable' {
62 interface Interactable {
63 gesturable: GesturableMethod
64 }
65}
66
67declare module '@interactjs/core/defaultOptions' {
68 interface ActionDefaults {
69 gesture: Interact.GesturableOptions
70 }
71}
72
73declare module '@interactjs/core/scope' {
74 interface ActionMap {
75 gesture?: typeof gesture
76 }
77}
78
79export interface GestureEvent extends Interact.InteractEvent&lt;'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
89export interface GestureSignalArg extends Interact.DoPhaseArg&lt;'gesture', Interact.EventPhase> {
90 iEvent: GestureEvent
91 interaction: Interact.Interaction&lt;'gesture'>
92}
93
94function 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
148function 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) &amp;&amp;
193 iEvent.scale !== Infinity &amp;&amp;
194 !isNaN(iEvent.scale)) {
195 interaction.gesture.scale = iEvent.scale
196 }
197}
198
199const 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 &lt; 2) {
220 return undefined
221 }
222
223 const gestureOptions = arg.interactable.options.gesture
224
225 if (!(gestureOptions &amp;&amp; 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
243export 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>