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/interactStatic.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/core/interactStatic.ts</h1>
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 | <section>
|
43 | <article>
|
44 | <pre class="prettyprint source linenums"><code>/** @module interact */
|
45 | import * as Interact from '@interactjs/types/index'
|
46 | import browser from '@interactjs/utils/browser'
|
47 | import * as domUtils from '@interactjs/utils/domUtils'
|
48 | import is from '@interactjs/utils/is'
|
49 | import * as pointerUtils from '@interactjs/utils/pointerUtils'
|
50 |
|
51 | import { Interactable } from './Interactable'
|
52 | import { Options } from './defaultOptions'
|
53 | import isNonNativeEvent from './isNonNativeEvent'
|
54 |
|
55 | export interface InteractStatic {
|
56 | (target: Interact.Target, options?: Options): Interactable
|
57 | getPointerAverage: typeof pointerUtils.pointerAverage
|
58 | getTouchBBox: typeof pointerUtils.touchBBox
|
59 | getTouchDistance: typeof pointerUtils.touchDistance
|
60 | getTouchAngle: typeof pointerUtils.touchAngle
|
61 | getElementRect: typeof domUtils.getElementRect
|
62 | getElementClientRect: typeof domUtils.getElementClientRect
|
63 | matchesSelector: typeof domUtils.matchesSelector
|
64 | closest: typeof domUtils.closest
|
65 | /** @internal */ globalEvents: any
|
66 | version: string
|
67 | /** @internal */ scope: Interact.Scope
|
68 | use(plugin: Interact.Plugin, options?: {
|
69 | [key: string]: any
|
70 | }): any
|
71 | isSet(target: Interact.Element, options?: any): boolean
|
72 | on(type: string | Interact.EventTypes, listener: Interact.ListenersArg, options?: object): any
|
73 | off(type: Interact.EventTypes, listener: any, options?: object): any
|
74 | debug(): any
|
75 | supportsTouch(): boolean
|
76 | supportsPointerEvent(): boolean
|
77 | stop(): any
|
78 | pointerMoveTolerance(newValue?: number): any
|
79 | addDocument(doc: Document, options?: object): void
|
80 | removeDocument(doc: Document): void
|
81 | }
|
82 |
|
83 | export function createInteractStatic (scope: Interact.Scope): Interact.InteractStatic {
|
84 | /**
|
85 | * ```js
|
86 | * interact('#draggable').draggable(true)
|
87 | *
|
88 | * var rectables = interact('rect')
|
89 | * rectables
|
90 | * .gesturable(true)
|
91 | * .on('gesturemove', function (event) {
|
92 | * // ...
|
93 | * })
|
94 | * ```
|
95 | *
|
96 | * The methods of this variable can be used to set elements as interactables
|
97 | * and also to change various default settings.
|
98 | *
|
99 | * Calling it as a function and passing an element or a valid CSS selector
|
100 | * string returns an Interactable object which has various methods to configure
|
101 | * it.
|
102 | *
|
103 | * @global
|
104 | *
|
105 | * @param {Element | string} target The HTML or SVG Element to interact with
|
106 | * or CSS selector
|
107 | * @return {Interactable}
|
108 | */
|
109 | const interact = ((target, options) => {
|
110 | let interactable = scope.interactables.get(target, options)
|
111 |
|
112 | if (!interactable) {
|
113 | interactable = scope.interactables.new(target, options)
|
114 | interactable.events.global = interact.globalEvents
|
115 | }
|
116 |
|
117 | return interactable
|
118 | }) as InteractStatic
|
119 |
|
120 | // expose the functions used to calculate multi-touch properties
|
121 | interact.getPointerAverage = pointerUtils.pointerAverage
|
122 | interact.getTouchBBox = pointerUtils.touchBBox
|
123 | interact.getTouchDistance = pointerUtils.touchDistance
|
124 | interact.getTouchAngle = pointerUtils.touchAngle
|
125 |
|
126 | interact.getElementRect = domUtils.getElementRect
|
127 | interact.getElementClientRect = domUtils.getElementClientRect
|
128 | interact.matchesSelector = domUtils.matchesSelector
|
129 | interact.closest = domUtils.closest
|
130 |
|
131 | interact.globalEvents = {} as any
|
132 |
|
133 | // eslint-disable-next-line no-undef
|
134 | interact.version = process.env.npm_package_version
|
135 | interact.scope = scope
|
136 | /**
|
137 | * Use a plugin
|
138 | *
|
139 | * @alias module:interact.use
|
140 | *
|
141 | * @param {Object} plugin
|
142 | * @param {function} plugin.install
|
143 | * @return {Interact.InteractStatic}
|
144 | */
|
145 | interact.use = function (plugin, options) {
|
146 | this.scope.usePlugin(plugin, options)
|
147 |
|
148 | return this
|
149 | }
|
150 |
|
151 | /**
|
152 | * Check if an element or selector has been set with the {@link interact}
|
153 | * function
|
154 | *
|
155 | * @alias module:interact.isSet
|
156 | *
|
157 | * @param {Element} element The Element being searched for
|
158 | * @return {boolean} Indicates if the element or CSS selector was previously
|
159 | * passed to interact
|
160 | */
|
161 | interact.isSet = function (target, options) {
|
162 | return !!this.scope.interactables.get(target, options && options.context)
|
163 | }
|
164 |
|
165 | /**
|
166 | * Add a global listener for an InteractEvent or adds a DOM event to `document`
|
167 | *
|
168 | * @alias module:interact.on
|
169 | *
|
170 | * @param {string | array | object} type The types of events to listen for
|
171 | * @param {function} listener The function event (s)
|
172 | * @param {object | boolean} [options] object or useCapture flag for
|
173 | * addEventListener
|
174 | * @return {object} interact
|
175 | */
|
176 | interact.on = function (type: string | Interact.EventTypes, listener: Interact.ListenersArg, options?: object) {
|
177 | if (is.string(type) && type.search(' ') !== -1) {
|
178 | type = type.trim().split(/ +/)
|
179 | }
|
180 |
|
181 | if (is.array(type)) {
|
182 | for (const eventType of (type as any[])) {
|
183 | this.on(eventType, listener, options)
|
184 | }
|
185 |
|
186 | return this
|
187 | }
|
188 |
|
189 | if (is.object(type)) {
|
190 | for (const prop in type) {
|
191 | this.on(prop, (type as any)[prop], listener)
|
192 | }
|
193 |
|
194 | return this
|
195 | }
|
196 |
|
197 | // if it is an InteractEvent type, add listener to globalEvents
|
198 | if (isNonNativeEvent(type, this.scope.actions)) {
|
199 | // if this type of event was never bound
|
200 | if (!this.globalEvents[type]) {
|
201 | this.globalEvents[type] = [listener]
|
202 | }
|
203 | else {
|
204 | this.globalEvents[type].push(listener)
|
205 | }
|
206 | }
|
207 | // If non InteractEvent type, addEventListener to document
|
208 | else {
|
209 | this.scope.events.add(this.scope.document, type, listener as Interact.Listener, { options })
|
210 | }
|
211 |
|
212 | return this
|
213 | }
|
214 |
|
215 | /**
|
216 | * Removes a global InteractEvent listener or DOM event from `document`
|
217 | *
|
218 | * @alias module:interact.off
|
219 | *
|
220 | * @param {string | array | object} type The types of events that were listened
|
221 | * for
|
222 | * @param {function} listener The listener function to be removed
|
223 | * @param {object | boolean} options [options] object or useCapture flag for
|
224 | * removeEventListener
|
225 | * @return {object} interact
|
226 | */
|
227 | interact.off = function (type: Interact.EventTypes, listener: any, options?: object) {
|
228 | if (is.string(type) && type.search(' ') !== -1) {
|
229 | type = type.trim().split(/ +/)
|
230 | }
|
231 |
|
232 | if (is.array(type)) {
|
233 | for (const eventType of type) {
|
234 | this.off(eventType, listener, options)
|
235 | }
|
236 |
|
237 | return this
|
238 | }
|
239 |
|
240 | if (is.object(type)) {
|
241 | for (const prop in type) {
|
242 | this.off(prop, type[prop], listener)
|
243 | }
|
244 |
|
245 | return this
|
246 | }
|
247 |
|
248 | if (isNonNativeEvent(type, this.scope.actions)) {
|
249 | let index: number
|
250 |
|
251 | if (type in this.globalEvents &&
|
252 | (index = this.globalEvents[type].indexOf(listener)) !== -1) {
|
253 | this.globalEvents[type].splice(index, 1)
|
254 | }
|
255 | }
|
256 | else {
|
257 | this.scope.events.remove(this.scope.document, type, listener, options)
|
258 | }
|
259 |
|
260 | return this
|
261 | }
|
262 |
|
263 | interact.debug = function () {
|
264 | return this.scope
|
265 | }
|
266 |
|
267 | /**
|
268 | * @alias module:interact.supportsTouch
|
269 | *
|
270 | * @return {boolean} Whether or not the browser supports touch input
|
271 | */
|
272 | interact.supportsTouch = function () {
|
273 | return browser.supportsTouch
|
274 | }
|
275 |
|
276 | /**
|
277 | * @alias module:interact.supportsPointerEvent
|
278 | *
|
279 | * @return {boolean} Whether or not the browser supports PointerEvents
|
280 | */
|
281 | interact.supportsPointerEvent = function () {
|
282 | return browser.supportsPointerEvent
|
283 | }
|
284 |
|
285 | /**
|
286 | * Cancels all interactions (end events are not fired)
|
287 | *
|
288 | * @alias module:interact.stop
|
289 | *
|
290 | * @return {object} interact
|
291 | */
|
292 | interact.stop = function () {
|
293 | for (const interaction of this.scope.interactions.list) {
|
294 | interaction.stop()
|
295 | }
|
296 |
|
297 | return this
|
298 | }
|
299 |
|
300 | /**
|
301 | * Returns or sets the distance the pointer must be moved before an action
|
302 | * sequence occurs. This also affects tolerance for tap events.
|
303 | *
|
304 | * @alias module:interact.pointerMoveTolerance
|
305 | *
|
306 | * @param {number} [newValue] The movement from the start position must be greater than this value
|
307 | * @return {interact | number}
|
308 | */
|
309 | interact.pointerMoveTolerance = function (newValue?: number) {
|
310 | if (is.number(newValue)) {
|
311 | this.scope.interactions.pointerMoveTolerance = newValue
|
312 |
|
313 | return this
|
314 | }
|
315 |
|
316 | return this.scope.interactions.pointerMoveTolerance
|
317 | }
|
318 |
|
319 | interact.addDocument = function (doc: Document, options?: object) {
|
320 | this.scope.addDocument(doc, options)
|
321 | }
|
322 |
|
323 | interact.removeDocument = function (doc: Document) {
|
324 | this.scope.removeDocument(doc)
|
325 | }
|
326 |
|
327 | return interact as any
|
328 | }
|
329 | </code></pre>
|
330 | </article>
|
331 | </section>
|
332 |
|
333 |
|
334 |
|
335 |
|
336 | </div>
|
337 |
|
338 | <script>prettyPrint();</script>
|
339 | <script src="scripts/linenumber.js"></script>
|
340 | </body>
|
341 | </html>
|