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/auto-start/InteractableMethods.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/auto-start/InteractableMethods.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 { warnOnce } from '@interactjs/utils/misc'
|
47 |
|
48 | declare module '@interactjs/core/Interactable' {
|
49 | interface Interactable {
|
50 | getAction: (
|
51 | this: Interact.Interactable,
|
52 | pointer: Interact.PointerType,
|
53 | event: Interact.PointerEventType,
|
54 | interaction: Interact.Interaction,
|
55 | element: Interact.Element,
|
56 | ) => Interact.ActionProps | null
|
57 | styleCursor: typeof styleCursor
|
58 | actionChecker: typeof actionChecker
|
59 | ignoreFrom: {
|
60 | (...args: any[]): Interactable
|
61 | (): boolean
|
62 | }
|
63 | allowFrom: {
|
64 | (...args: any[]): Interactable
|
65 | (): boolean
|
66 | }
|
67 | }
|
68 | }
|
69 |
|
70 | function install (scope: Interact.Scope) {
|
71 | const {
|
72 | /** @lends Interactable */
|
73 | Interactable, // tslint:disable-line no-shadowed-variable
|
74 | } = scope
|
75 |
|
76 | Interactable.prototype.getAction = function getAction (
|
77 | this: Interact.Interactable,
|
78 | pointer: Interact.PointerType,
|
79 | event: Interact.PointerEventType,
|
80 | interaction: Interact.Interaction,
|
81 | element: Interact.Element,
|
82 | ): Interact.ActionProps {
|
83 | const action = defaultActionChecker(this, event, interaction, element, scope)
|
84 |
|
85 | if (this.options.actionChecker) {
|
86 | return this.options.actionChecker(pointer, event, action, this, element, interaction)
|
87 | }
|
88 |
|
89 | return action
|
90 | }
|
91 |
|
92 | /**
|
93 | * ```js
|
94 | * interact(element, { ignoreFrom: document.getElementById('no-action') })
|
95 | * // or
|
96 | * interact(element).ignoreFrom('input, textarea, a')
|
97 | * ```
|
98 | * @deprecated
|
99 | * If the target of the `mousedown`, `pointerdown` or `touchstart` event or any
|
100 | * of it's parents match the given CSS selector or Element, no
|
101 | * drag/resize/gesture is started.
|
102 | *
|
103 | * Don't use this method. Instead set the `ignoreFrom` option for each action
|
104 | * or for `pointerEvents`
|
105 | *
|
106 | * @example
|
107 | * interact(targett)
|
108 | * .draggable({
|
109 | * ignoreFrom: 'input, textarea, a[href]'',
|
110 | * })
|
111 | * .pointerEvents({
|
112 | * ignoreFrom: '[no-pointer]',
|
113 | * })
|
114 | *
|
115 | * @param {string | Element | null} [newValue] a CSS selector string, an
|
116 | * Element or `null` to not ignore any elements
|
117 | * @return {string | Element | object} The current ignoreFrom value or this
|
118 | * Interactable
|
119 | */
|
120 | Interactable.prototype.ignoreFrom = warnOnce(function (this: Interact.Interactable, newValue) {
|
121 | return this._backCompatOption('ignoreFrom', newValue)
|
122 | }, 'Interactable.ignoreFrom() has been deprecated. Use Interactble.draggable({ignoreFrom: newValue}).')
|
123 |
|
124 | /**
|
125 | * @deprecated
|
126 | *
|
127 | * A drag/resize/gesture is started only If the target of the `mousedown`,
|
128 | * `pointerdown` or `touchstart` event or any of it's parents match the given
|
129 | * CSS selector or Element.
|
130 | *
|
131 | * Don't use this method. Instead set the `allowFrom` option for each action
|
132 | * or for `pointerEvents`
|
133 | *
|
134 | * @example
|
135 | * interact(targett)
|
136 | * .resizable({
|
137 | * allowFrom: '.resize-handle',
|
138 | * .pointerEvents({
|
139 | * allowFrom: '.handle',,
|
140 | * })
|
141 | *
|
142 | * @param {string | Element | null} [newValue] a CSS selector string, an
|
143 | * Element or `null` to allow from any element
|
144 | * @return {string | Element | object} The current allowFrom value or this
|
145 | * Interactable
|
146 | */
|
147 | Interactable.prototype.allowFrom = warnOnce(function (this: Interact.Interactable, newValue) {
|
148 | return this._backCompatOption('allowFrom', newValue)
|
149 | }, 'Interactable.allowFrom() has been deprecated. Use Interactble.draggable({allowFrom: newValue}).')
|
150 |
|
151 | /**
|
152 | * ```js
|
153 | * interact('.resize-drag')
|
154 | * .resizable(true)
|
155 | * .draggable(true)
|
156 | * .actionChecker(function (pointer, event, action, interactable, element, interaction) {
|
157 | *
|
158 | * if (interact.matchesSelector(event.target, '.drag-handle')) {
|
159 | * // force drag with handle target
|
160 | * action.name = drag
|
161 | * }
|
162 | * else {
|
163 | * // resize from the top and right edges
|
164 | * action.name = 'resize'
|
165 | * action.edges = { top: true, right: true }
|
166 | * }
|
167 | *
|
168 | * return action
|
169 | * })
|
170 | * ```
|
171 | *
|
172 | * Returns or sets the function used to check action to be performed on
|
173 | * pointerDown
|
174 | *
|
175 | * @param {function | null} [checker] A function which takes a pointer event,
|
176 | * defaultAction string, interactable, element and interaction as parameters
|
177 | * and returns an object with name property 'drag' 'resize' or 'gesture' and
|
178 | * optionally an `edges` object with boolean 'top', 'left', 'bottom' and right
|
179 | * props.
|
180 | * @return {Function | Interactable} The checker function or this Interactable
|
181 | */
|
182 | Interactable.prototype.actionChecker = actionChecker
|
183 |
|
184 | /**
|
185 | * Returns or sets whether the the cursor should be changed depending on the
|
186 | * action that would be performed if the mouse were pressed and dragged.
|
187 | *
|
188 | * @param {boolean} [newValue]
|
189 | * @return {boolean | Interactable} The current setting or this Interactable
|
190 | */
|
191 | Interactable.prototype.styleCursor = styleCursor
|
192 | }
|
193 |
|
194 | function defaultActionChecker (
|
195 | interactable: Interact.Interactable,
|
196 | event: Interact.PointerEventType,
|
197 | interaction: Interact.Interaction,
|
198 | element: Interact.Element,
|
199 | scope: Interact.Scope,
|
200 | ) {
|
201 | const rect = interactable.getRect(element)
|
202 | const buttons = (event as MouseEvent).buttons || ({
|
203 | 0: 1,
|
204 | 1: 4,
|
205 | 3: 8,
|
206 | 4: 16,
|
207 | })[(event as MouseEvent).button as 0 | 1 | 3 | 4]
|
208 | const arg = {
|
209 | action: null,
|
210 | interactable,
|
211 | interaction,
|
212 | element,
|
213 | rect,
|
214 | buttons,
|
215 | }
|
216 |
|
217 | scope.fire('auto-start:check', arg)
|
218 |
|
219 | return arg.action
|
220 | }
|
221 |
|
222 | function styleCursor (this: Interact.Interactable): boolean
|
223 | function styleCursor (this: Interact.Interactable, newValue: boolean): typeof this
|
224 | function styleCursor (this: Interact.Interactable, newValue?: boolean) {
|
225 | if (is.bool(newValue)) {
|
226 | this.options.styleCursor = newValue
|
227 |
|
228 | return this
|
229 | }
|
230 |
|
231 | if (newValue === null) {
|
232 | delete this.options.styleCursor
|
233 |
|
234 | return this
|
235 | }
|
236 |
|
237 | return this.options.styleCursor
|
238 | }
|
239 |
|
240 | function actionChecker (this: Interact.Interactable, checker: any) {
|
241 | if (is.func(checker)) {
|
242 | this.options.actionChecker = checker
|
243 |
|
244 | return this
|
245 | }
|
246 |
|
247 | if (checker === null) {
|
248 | delete this.options.actionChecker
|
249 |
|
250 | return this
|
251 | }
|
252 |
|
253 | return this.options.actionChecker
|
254 | }
|
255 |
|
256 | export default {
|
257 | id: 'auto-start/interactableMethods',
|
258 | install,
|
259 | }
|
260 | </code></pre>
|
261 | </article>
|
262 | </section>
|
263 |
|
264 |
|
265 |
|
266 |
|
267 | </div>
|
268 |
|
269 | <script>prettyPrint();</script>
|
270 | <script src="scripts/linenumber.js"></script>
|
271 | </body>
|
272 | </html>
|