UNPKG

11.8 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/modifiers/aspectRatio.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/modifiers/aspectRatio.ts</h1>
35
36
37
38
39
40
41
42 <section>
43 <article>
44 <pre class="prettyprint source linenums"><code>/**
45 * @module modifiers/aspectRatio
46 *
47 * @description
48 * This module forces elements to be resized with a specified dx/dy ratio.
49 *
50 * @example
51 * interact(target).resizable({
52 * modifiers: [
53 * interact.modifiers.snapSize({
54 * targets: [ interact.createSnapGrid({ x: 20, y: 20 }) ],
55 * }),
56 * interact.aspectRatio({ ratio: 'preserve' }),
57 * ],
58 * });
59 */
60
61import * as Interact from '@interactjs/types/index'
62import extend from '@interactjs/utils/extend'
63import { addEdges } from '@interactjs/utils/rect'
64
65import Modification from './Modification'
66import { Modifier, ModifierModule, ModifierState, makeModifier } from './base'
67
68export interface AspectRatioOptions {
69 ratio?: number | 'preserve'
70 equalDelta?: boolean
71 modifiers?: Modifier[]
72 enabled?: boolean
73}
74
75export type AspectRatioState = ModifierState&lt;AspectRatioOptions, {
76 startCoords: Interact.Point
77 startRect: Interact.Rect
78 linkedEdges: Interact.EdgeOptions
79 ratio: number
80 equalDelta: boolean
81 xIsPrimaryAxis: boolean
82 edgeSign: 1 | -1
83 subModification: Modification
84}>
85
86const aspectRatio: ModifierModule&lt;AspectRatioOptions, AspectRatioState> = {
87 start (arg) {
88 const { state, rect, edges: originalEdges, pageCoords: coords } = arg
89 let { ratio } = state.options
90 const { equalDelta, modifiers } = state.options
91
92 if (ratio === 'preserve') {
93 ratio = rect.width / rect.height
94 }
95
96 state.startCoords = extend({}, coords)
97 state.startRect = extend({}, rect)
98 state.ratio = ratio
99 state.equalDelta = equalDelta
100
101 const linkedEdges = state.linkedEdges = {
102 top : originalEdges.top || (originalEdges.left &amp;&amp; !originalEdges.bottom),
103 left : originalEdges.left || (originalEdges.top &amp;&amp; !originalEdges.right),
104 bottom: originalEdges.bottom || (originalEdges.right &amp;&amp; !originalEdges.top),
105 right : originalEdges.right || (originalEdges.bottom &amp;&amp; !originalEdges.left),
106 }
107
108 state.xIsPrimaryAxis = !!(originalEdges.left || originalEdges.right)
109
110 if (state.equalDelta) {
111 state.edgeSign = (linkedEdges.left ? 1 : -1) * (linkedEdges.top ? 1 : -1) as 1 | -1
112 }
113 else {
114 const negativeSecondaryEdge = state.xIsPrimaryAxis ? linkedEdges.top : linkedEdges.left
115 state.edgeSign = negativeSecondaryEdge ? -1 : 1
116 }
117
118 extend(arg.edges, linkedEdges)
119
120 if (!modifiers || !modifiers.length) { return }
121
122 const subModification = new Modification(arg.interaction)
123
124 subModification.copyFrom(arg.interaction.modification)
125 subModification.prepareStates(modifiers)
126
127 state.subModification = subModification
128 subModification.startAll({ ...arg })
129 },
130
131 set (arg) {
132 const { state, rect, coords } = arg
133 const initialCoords = extend({}, coords)
134 const aspectMethod = state.equalDelta ? setEqualDelta : setRatio
135
136 aspectMethod(state, state.xIsPrimaryAxis, coords, rect)
137
138 if (!state.subModification) { return null }
139
140 const correctedRect = extend({}, rect)
141
142 addEdges(state.linkedEdges, correctedRect, { x: coords.x - initialCoords.x, y: coords.y - initialCoords.y })
143
144 const result = state.subModification.setAll({
145 ...arg,
146 rect: correctedRect,
147 edges: state.linkedEdges,
148 pageCoords: coords,
149 prevCoords: coords,
150 prevRect: correctedRect,
151 })
152
153 const { delta } = result
154
155 if (result.changed) {
156 const xIsCriticalAxis = Math.abs(delta.x) > Math.abs(delta.y)
157
158 // do aspect modification again with critical edge axis as primary
159 aspectMethod(state, xIsCriticalAxis, result.coords, result.rect)
160 extend(coords, result.coords)
161 }
162
163 return result.eventProps
164 },
165
166 defaults: {
167 ratio: 'preserve',
168 equalDelta: false,
169 modifiers: [],
170 enabled: false,
171 },
172}
173
174function setEqualDelta ({ startCoords, edgeSign }: AspectRatioState, xIsPrimaryAxis: boolean, coords: Interact.Point) {
175 if (xIsPrimaryAxis) {
176 coords.y = startCoords.y + (coords.x - startCoords.x) * edgeSign
177 }
178 else {
179 coords.x = startCoords.x + (coords.y - startCoords.y) * edgeSign
180 }
181}
182
183function setRatio ({ startRect, startCoords, ratio, edgeSign }: AspectRatioState, xIsPrimaryAxis: boolean, coords: Interact.Point, rect: Interact.Rect) {
184 if (xIsPrimaryAxis) {
185 const newHeight = rect.width / ratio
186
187 coords.y = startCoords.y + (newHeight - startRect.height) * edgeSign
188 }
189 else {
190 const newWidth = rect.height * ratio
191
192 coords.x = startCoords.x + (newWidth - startRect.width) * edgeSign
193 }
194}
195
196export default makeModifier(aspectRatio, 'aspectRatio')
197export { aspectRatio }
198</code></pre>
199 </article>
200 </section>
201
202
203
204
205</div>
206
207<script>prettyPrint();</script>
208<script src="scripts/linenumber.js"></script>
209</body>
210</html>