-
-
Notifications
You must be signed in to change notification settings - Fork 417
/
types.ts
299 lines (292 loc) · 9.63 KB
/
types.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
import { setTransform } from './css'
export type PanzoomEvent =
| 'panzoomstart'
| 'panzoomchange'
| 'panzoompan'
| 'panzoomzoom'
| 'panzoomreset'
| 'panzoomend'
interface MiscOptions {
/** Whether to animate transitions */
animate?: boolean
/**
* This option treats the Panzoom element's parent
* as a canvas. Effectively, Panzoom binds the
* down handler to the parent instead of the Panzoom
* element, so that pointer events anywhere on the "canvas"
* moves its children. See issue #472.
*
* **Note**: setting this option to `true` also changes
* where the `cursor` style is applied (i.e. the parent).
*/
canvas?: boolean
/** Duration of the transition (ms) */
duration?: number
/** CSS Easing used for transitions */
easing?: string
/**
* Add elements to this array that should be excluded
* from Panzoom handling.
* Ancestors of event targets are also checked.
* e.g. links and buttons that should not propagate the click event.
*/
exclude?: Element[]
/**
* Add this class to any element within the Panzoom element
* that you want to exclude from Panzoom handling. That
* element's children will also be excluded.
* e.g. links and buttons that should not propagate the click event.
*/
excludeClass?: string
/**
* `force` should be used sparingly to temporarily
* override and ignore options such as disablePan,
* disableZoom, and panOnlyWhenZoomed.
* This option cannot be passed to the
* Panzoom constructor or setOptions (to avoid
* setting this option globally).
*
* ```js
* // Overrides disablePan and panOnlyWhenZoomed
* panzoom.pan(50, 100, { force: true })
* // Overrides disableZoom
* panzoom.zoom(1, { force: true })
* ```
*/
force?: boolean
/**
* On the first pointer event, when panning starts,
* the default Panzoom behavior is to call
* `event.preventDefault()` and `event.stopPropagation()`
* on that event. The former is almost certainly a necessity;
* the latter enables Panzoom elements within Panzoom elements.
*
* But there are some cases where the default is
* not the desired behavior. Set this option to override that behavior.
*
* ```js
* // Only call preventDefault()
* Panzoom(elem, {
* handleStartEvent: (event) => {
* event.preventDefault()
* }
* })
* // Do nothing (this probably breaks things on mobile tho)
* Panzoom(elem, {
* handleStartEvent: () => {}
* })
* ```
*/
handleStartEvent?: (event: Event) => void
/**
* **Change this at your own risk.**
* The `transform-origin` is the origin from which transforms are applied.
* Default: `'50% 50%'` for HTML and `'0 0'` for SVG.
* The defaults are set because changing the `transform-origin` on
* SVG elements doesn't work in IE.
*
* Changing this should work with many things, but
* it will break focal point zooming, which assumes the
* defaults are set to do the more complicated calculations.
*
* And again, changing this for SVG in IE doesn't work at all.
*/
origin?: string
/** The overflow CSS value for the parent. Defaults to 'hidden' */
overflow?: string
/**
* Override the transform setter.
* This is exposed mostly so the user could
* set other parts of a transform
* aside from scale and translate.
* Default is defined in src/css.ts.
*
* ```js
* // This example always sets a rotation
* // when setting the scale and translation
* const panzoom = Panzoom(elem, {
* setTransform: (elem, { scale, x, y }) => {
* panzoom.setStyle('transform', `rotate(0.5turn) scale(${scale}) translate(${x}px, ${y}px)`)
* }
* })
* ```
*/
setTransform?: typeof setTransform
/** Silence all events */
silent?: boolean
/** X Value used to set the beginning transform */
startX?: number
/** Y Value used to set the beginning transform */
startY?: number
/** Scale used to set the beginning transform */
startScale?: number
/** Pass through any options like data */
[key: string]: any
}
interface PanSpecificOptions {
/**
* Contain the panzoom element either
* inside or outside the parent.
* Inside: The panzoom element is smaller
* than its parent and cannot be panned
* to the outside.
* Outside: The panzoom element is larger
* than its parent and cannot be panned
* to the inside. In other words, no
* empty space around the element will be shown.
*
* **Note**: the containment pan adjustment is not affected by the `disablePan` option.
*/
contain?: 'inside' | 'outside'
/** The cursor style to set on the panzoom element */
cursor?: string
/**
* Disable panning functionality.
* Note: disablePan does not affect focal point zooming or the contain option.
* The element will still pan accordingly.
*/
disablePan?: boolean
/** Pan only on the Y axis */
disableXAxis?: boolean
/** Pan only on the X axis */
disableYAxis?: boolean
/** When passing x and y values to .pan(), treat the values as relative to their current values */
relative?: boolean
/** Disable panning while the scale is equal to the starting value */
panOnlyWhenZoomed?: boolean
}
interface ZoomSpecificOptions {
/** Disable zooming functionality */
disableZoom?: boolean
/**
* Zoom to the given point on the panzoom element.
* This point is expected to be relative to
* the panzoom element's dimensions and is unrelated
* to the parent dimensions.
*/
focal?: { x: number; y: number }
/** The minimum scale when zooming */
minScale?: number
/** The maximum scale when zooming */
maxScale?: number
/** The step affects zoom calculation when zooming with a mouse wheel, when pinch zooming, or when using zoomIn/zoomOut */
step?: number
}
export type PanOptions = MiscOptions & PanSpecificOptions
export type ZoomOptions = MiscOptions & ZoomSpecificOptions
export type PanzoomOptions = PanOptions & ZoomOptions & MiscOptions
export interface CurrentValues {
x: number
y: number
scale: number
isSVG?: boolean
}
export interface PanzoomObject {
/** Remove all event listeners bound to the the Panzoom element */
destroy: () => void
/** Get the current x/y translation */
getPan: () => { x: number; y: number }
/** Get the current scale */
getScale: () => number
/** Returns a _copy_ of the current options object */
getOptions: () => PanzoomOptions
/**
* Pan the Panzoom element to the given x and y coordinates
*
* ```js
* // Translates the element to 50px, 100px
* panzoom.pan(50, 100)
* // Pans the element right 10px and down 10px from its current position
* panzoom.pan(10, 10, { relative: true })
* ```
*/
pan: (x: number | string, y: number | string, panOptions?: PanOptions) => CurrentValues
/**
* Reset the pan and zoom to startX, startY, and startScale.
* Animates by default, ignoring the global option.
* Pass `{ animate: false }` to override.
* Reset ignores the `disablePan`, `disableZoom`, and `panOnlyWhenZoomed` options.
* Pass `{ force: false }` to override.
*
* ```js
* panzoom.reset()
* panzoom.reset({ animate: false })
* ```
*/
reset: (resetOptions?: PanzoomOptions) => CurrentValues
/** Change options for the Panzoom instance */
setOptions: (options?: PanzoomOptions) => void
/** A convenience method for setting prefixed styles on the Panzoom element */
setStyle: (name: string, value: string) => void
/**
* Zoom the Panzoom element to the given scale
*
* ```js
* panzoom.zoom(2.2)
* panzoom.zoom(2.2, { animate: true })
* ```
*/
zoom: (scale: number, zoomOptions?: ZoomOptions) => CurrentValues
/**
* Zoom in using the predetermined increment set in options.
* Animates by default, ignoring the global option.
* Pass `{ animate: false }` to override.
*
* ```js
* panzoom.zoomIn()
* panzoom.zoomIn({ animate: false })
* ```
*/
zoomIn: (zoomOptions?: ZoomOptions) => CurrentValues
/**
* Zoom out using the predetermined increment set in options.
* Animates by default, ignoring the global option.
* Pass `{ animate: false }` to override.
*
* ```js
* panzoom.zoomOut()
* panzoom.zoomOut({ animate: false })
* ```
*/
zoomOut: (zoomOptions?: ZoomOptions) => CurrentValues
/**
* Zoom the Panzoom element to a focal point using
* the given pointer/touch/mouse event or constructed point.
* The clientX/clientY values should be calculated
* the same way as a `pointermove` event on the Panzoom element's parent.
*
* ```js
* panzoom.zoomToPoint(1.2, pointerEvent)
* ```
*/
zoomToPoint: (
scale: number,
point: { clientX: number; clientY: number },
zoomOptions?: ZoomOptions
) => CurrentValues
/**
* Zoom the Panzoom element to a focal point using the given WheelEvent
*
*
* This is a convenience function that may not handle all use cases.
* Other cases should handroll solutions using the `zoomToPoint`
* method or the `zoom` method's focal option.
*
* **Note**: the focal point zooming pan adjustment is not affected by the `disablePan` option.
*
* ```js
* // Bind to mousewheel
* elem.parentElement.addEventListener('wheel', panzoom.zoomWithWheel)
* // Bind to shift+mousewheel
* elem.parentElement.addEventListener('wheel', function(event) {
* if (!event.shiftKey) return
* // Panzoom will automatically use `deltaX` here instead
* // of `deltaY`. On a mac, the shift modifier usually
* // translates to horizontal scrolling, but Panzoom assumes
* // the desired behavior is zooming.
* panzoom.zoomWithWheel(event)
* })
* ```
*/
zoomWithWheel: (event: WheelEvent, zoomOptions?: ZoomOptions) => CurrentValues
}