fix(zoom): need the before and after dimensions to constrain

Fixes gh-426

README.md

@@ -115,7 +115,7 @@ Alternatively, add a reference to the element to the `exclude` option, or call `
 
 ▸ **Panzoom**(`elem`: HTMLElement | SVGElement, `options?`: Omit‹[PanzoomOptions](#PanzoomOptions), "force"›): _[PanzoomObject](#PanzoomObject)_
 
-_Defined in [panzoom.ts:45](https://github.com/timmywil/panzoom/blob/5a075a0/src/panzoom.ts#L45)_
+_Defined in [panzoom.ts:47](https://github.com/timmywil/panzoom/blob/761a0ec/src/panzoom.ts#L47)_
 
 **Parameters:**
 
@@ -138,7 +138,7 @@ Includes `MiscOptions`, `PanOptions`, and `ZoomOptions`
 
 • **animate**? : _boolean_ (Default: **false**)
 
-_Defined in [types.ts:13](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L13)_
+_Defined in [types.ts:13](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L13)_
 
 Whether to animate transitions
 
@@ -148,7 +148,7 @@ Whether to animate transitions
 
 • **duration**? : _number_ (Default: **200**)
 
-_Defined in [types.ts:15](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L15)_
+_Defined in [types.ts:15](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L15)_
 
 Duration of the transition (ms)
 
@@ -158,7 +158,7 @@ Duration of the transition (ms)
 
 • **easing**? : _string_ (Default: **"ease-in-out"**)
 
-_Defined in [types.ts:17](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L17)_
+_Defined in [types.ts:17](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L17)_
 
 CSS Easing used for transitions
 
@@ -168,7 +168,7 @@ CSS Easing used for transitions
 
 • **exclude**? : _Element[]_
 
-_Defined in [types.ts:23](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L23)_
+_Defined in [types.ts:23](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L23)_
 
 Add elements to this array that should be excluded
 from Panzoom handling.
@@ -180,7 +180,7 @@ e.g. links and buttons that should not propagate the click event.
 
 • **excludeClass**? : _string_ (Default: **"panzoom-exclude"**)
 
-_Defined in [types.ts:29](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L29)_
+_Defined in [types.ts:29](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L29)_
 
 Add this class to any element within the Panzoom element
 that you want to exclude from Panzoom handling.
@@ -192,7 +192,7 @@ e.g. links and buttons that should not propagate the click event.
 
 • **force**? : _boolean_
 
-_Defined in [types.ts:45](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L45)_
+_Defined in [types.ts:45](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L45)_
 
 `force` should be used sparingly to temporarily
 override and ignore options such as disablePan,
@@ -214,7 +214,7 @@ panzoom.zoom(1, { force: true })
 
 • **handleStartEvent**? : _function_
 
-_Defined in [types.ts:69](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L69)_
+_Defined in [types.ts:69](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L69)_
 
 On the first pointer event, when panning starts,
 the default Panzoom behavior is to call
@@ -254,7 +254,7 @@ Panzoom(elem, {
 
 • **origin**? : _string_
 
-_Defined in [types.ts:83](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L83)_
+_Defined in [types.ts:83](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L83)_
 
 **Change this at your own risk.**
 The `transform-origin` is the origin from which transforms are applied.
@@ -274,7 +274,7 @@ And again, changing this for SVG in IE doesn't work at all.
 
 • **setTransform**? : _setTransform_
 
-_Defined in [types.ts:101](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L101)_
+_Defined in [types.ts:101](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L101)_
 
 Override the transform setter.
 This is exposed mostly so the user could
@@ -298,7 +298,7 @@ const panzoom = Panzoom(elem, {
 
 • **silent**? : _boolean_
 
-_Defined in [types.ts:103](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L103)_
+_Defined in [types.ts:103](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L103)_
 
 Silence all events
 
@@ -308,7 +308,7 @@ Silence all events
 
 • **startScale**? : _number_ (Default: **1**)
 
-_Defined in [types.ts:109](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L109)_
+_Defined in [types.ts:109](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L109)_
 
 Scale used to set the beginning transform
 
@@ -318,7 +318,7 @@ Scale used to set the beginning transform
 
 • **startX**? : _number_ (Default: **0**)
 
-_Defined in [types.ts:105](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L105)_
+_Defined in [types.ts:105](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L105)_
 
 X Value used to set the beginning transform
 
@@ -328,7 +328,7 @@ X Value used to set the beginning transform
 
 • **startY**? : _number_ (Default: **0**)
 
-_Defined in [types.ts:107](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L107)_
+_Defined in [types.ts:107](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L107)_
 
 Y Value used to set the beginning transform
 
@@ -342,7 +342,7 @@ Includes `MiscOptions`
 
 • **contain**? : _"inside" | "outside"_
 
-_Defined in [types.ts:126](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L126)_
+_Defined in [types.ts:126](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L126)_
 
 Contain the panzoom element either
 inside or outside the parent.
@@ -360,7 +360,7 @@ empty space around the element will be shown.
 
 • **cursor**? : _string_ (Default: **"move"**)
 
-_Defined in [types.ts:128](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L128)_
+_Defined in [types.ts:128](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L128)_
 
 The cursor style to set on the panzoom element
 
@@ -370,17 +370,19 @@ The cursor style to set on the panzoom element
 
 • **disablePan**? : _boolean_ (Default: **false**)
 
-_Defined in [types.ts:130](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L130)_
+_Defined in [types.ts:134](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L134)_
 
-Disable panning functionality. Note: disablePan also disables focal point zooming
+Disable panning functionality.
+Note: disablePan does not affect focal point zooming or the constrain option.
+The element will still pan accordingly.
 
 ---
 
 ### disableXAxis
 
 • **disableXAxis**? : _boolean_ (Default: **false**)
 
-_Defined in [types.ts:132](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L132)_
+_Defined in [types.ts:136](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L136)_
 
 Pan only on the Y axis
 
@@ -390,7 +392,7 @@ Pan only on the Y axis
 
 • **disableYAxis**? : _boolean_ (Default: **false**)
 
-_Defined in [types.ts:134](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L134)_
+_Defined in [types.ts:138](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L138)_
 
 Pan only on the X axis
 
@@ -400,7 +402,7 @@ Pan only on the X axis
 
 • **panOnlyWhenZoomed**? : _boolean_ (Default: **false**)
 
-_Defined in [types.ts:138](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L138)_
+_Defined in [types.ts:142](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L142)_
 
 Disable panning while the scale is equal to the starting value
 
@@ -410,7 +412,7 @@ Disable panning while the scale is equal to the starting value
 
 • **relative**? : _boolean_ (Default: **false**)
 
-_Defined in [types.ts:136](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L136)_
+_Defined in [types.ts:140](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L140)_
 
 When passing x and y values to .pan(), treat the values as relative to their current values
 
@@ -424,7 +426,7 @@ Includes `MiscOptions`
 
 • **disableZoom**? : _boolean_ (Default: **false**)
 
-_Defined in [types.ts:143](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L143)_
+_Defined in [types.ts:147](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L147)_
 
 Disable zooming functionality
 
@@ -434,7 +436,7 @@ Disable zooming functionality
 
 • **focal**? : _object_
 
-_Defined in [types.ts:150](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L150)_
+_Defined in [types.ts:154](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L154)_
 
 Zoom to the given point on the panzoom element.
 This point is expected to be relative to
@@ -453,7 +455,7 @@ to the parent dimensions.
 
 • **maxScale**? : _number_ (Default: **4**)
 
-_Defined in [types.ts:154](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L154)_
+_Defined in [types.ts:158](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L158)_
 
 The maximum scale when zooming
 
@@ -463,7 +465,7 @@ The maximum scale when zooming
 
 • **minScale**? : _number_ (Default: **0.125**)
 
-_Defined in [types.ts:152](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L152)_
+_Defined in [types.ts:156](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L156)_
 
 The minimum scale when zooming
 
@@ -473,7 +475,7 @@ The minimum scale when zooming
 
 • **step**? : _number_ (Default: **0.3**)
 
-_Defined in [types.ts:156](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L156)_
+_Defined in [types.ts:160](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L160)_
 
 The step affects zoom calculation when zooming with a mouse wheel, when pinch zooming, or when using zoomIn/zoomOut
 
@@ -487,7 +489,7 @@ These methods are available after initializing Panzoom
 
 • **destroy**: _function_
 
-_Defined in [types.ts:171](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L171)_
+_Defined in [types.ts:175](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L175)_
 
 Remove all event listeners bind to the the Panzoom element
 
@@ -501,7 +503,7 @@ Remove all event listeners bind to the the Panzoom element
 
 • **getOptions**: _function_
 
-_Defined in [types.ts:177](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L177)_
+_Defined in [types.ts:181](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L181)_
 
 Returns a _copy_ of the current options object
 
@@ -515,7 +517,7 @@ Returns a _copy_ of the current options object
 
 • **getPan**: _function_
 
-_Defined in [types.ts:173](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L173)_
+_Defined in [types.ts:177](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L177)_
 
 Get the current x/y translation
 
@@ -533,7 +535,7 @@ Get the current x/y translation
 
 • **getScale**: _function_
 
-_Defined in [types.ts:175](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L175)_
+_Defined in [types.ts:179](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L179)_
 
 Get the current scale
 
@@ -547,7 +549,7 @@ Get the current scale
 
 • **pan**: _function_
 
-_Defined in [types.ts:188](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L188)_
+_Defined in [types.ts:192](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L192)_
 
 Pan the Panzoom element to the given x and y coordinates
 
@@ -576,7 +578,7 @@ panzoom.pan(10, 10, { relative: true })
 
 • **reset**: _function_
 
-_Defined in [types.ts:199](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L199)_
+_Defined in [types.ts:203](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L203)_
 
 Reset the pan and zoom to startX, startY, and startScale.
 Animates by default, ignoring the global option.
@@ -603,7 +605,7 @@ panzoom.reset({ animate: false })
 
 • **setOptions**: _function_
 
-_Defined in [types.ts:201](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L201)_
+_Defined in [types.ts:205](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L205)_
 
 Change options for the Panzoom instance
 
@@ -623,7 +625,7 @@ Change options for the Panzoom instance
 
 • **setStyle**: _function_
 
-_Defined in [types.ts:203](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L203)_
+_Defined in [types.ts:207](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L207)_
 
 A convenience method for setting prefixed styles on the Panzoom element
 
@@ -644,7 +646,7 @@ A convenience method for setting prefixed styles on the Panzoom element
 
 • **zoom**: _function_
 
-_Defined in [types.ts:212](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L212)_
+_Defined in [types.ts:216](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L216)_
 
 Zoom the Panzoom element to the given scale
 
@@ -670,7 +672,7 @@ panzoom.zoom(2.2, { animate: true })
 
 • **zoomIn**: _function_
 
-_Defined in [types.ts:223](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L223)_
+_Defined in [types.ts:227](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L227)_
 
 Zoom in using the predetermined increment set in options.
 Animates by default, ignoring the global option.
@@ -697,7 +699,7 @@ panzoom.zoomIn({ animate: false })
 
 • **zoomOut**: _function_
 
-_Defined in [types.ts:234](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L234)_
+_Defined in [types.ts:238](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L238)_
 
 Zoom out using the predetermined increment set in options.
 Animates by default, ignoring the global option.
@@ -724,7 +726,7 @@ panzoom.zoomOut({ animate: false })
 
 • **zoomToPoint**: _function_
 
-_Defined in [types.ts:245](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L245)_
+_Defined in [types.ts:249](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L249)_
 
 Zoom the Panzoom element to a focal point using
 the given pointer/touch/mouse event or constructed point.
@@ -758,7 +760,7 @@ panzoom.zoomToPoint(1.2, pointerEvent)
 
 • **zoomWithWheel**: _function_
 
-_Defined in [types.ts:274](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L274)_
+_Defined in [types.ts:278](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L278)_
 
 Zoom the Panzoom element to a focal point using the given WheelEvent
 
@@ -802,23 +804,23 @@ elem.parentElement.addEventListener('wheel', function(event) {
 
 • **scale**: _number_
 
-_Defined in [types.ts:166](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L166)_
+_Defined in [types.ts:170](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L170)_
 
 ---
 
 ### x
 
 • **x**: _number_
 
-_Defined in [types.ts:164](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L164)_
+_Defined in [types.ts:168](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L168)_
 
 ---
 
 ### y
 
 • **y**: _number_
 
-_Defined in [types.ts:165](https://github.com/timmywil/panzoom/blob/5a075a0/src/types.ts#L165)_
+_Defined in [types.ts:169](https://github.com/timmywil/panzoom/blob/761a0ec/src/types.ts#L169)_
 
 ## Events
 

demo/global-panzoom.ts

@@ -0,0 +1,8 @@
+import Panzoom from '../src/panzoom'
+
+declare global {
+  interface Window {
+    Panzoom: typeof Panzoom
+  }
+}
+window.Panzoom = Panzoom