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 | |
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/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 |
|
61 | import * as Interact from '@interactjs/types/index'
|
62 | import extend from '@interactjs/utils/extend'
|
63 | import { addEdges } from '@interactjs/utils/rect'
|
64 |
|
65 | import Modification from './Modification'
|
66 | import { Modifier, ModifierModule, ModifierState, makeModifier } from './base'
|
67 |
|
68 | export interface AspectRatioOptions {
|
69 | ratio?: number | 'preserve'
|
70 | equalDelta?: boolean
|
71 | modifiers?: Modifier[]
|
72 | enabled?: boolean
|
73 | }
|
74 |
|
75 | export type AspectRatioState = ModifierState<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 |
|
86 | const aspectRatio: ModifierModule<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 && !originalEdges.bottom),
|
103 | left : originalEdges.left || (originalEdges.top && !originalEdges.right),
|
104 | bottom: originalEdges.bottom || (originalEdges.right && !originalEdges.top),
|
105 | right : originalEdges.right || (originalEdges.bottom && !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 |
|
174 | function 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 |
|
183 | function 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 |
|
196 | export default makeModifier(aspectRatio, 'aspectRatio')
|
197 | export { 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>
|