From 64da747fec2aa34a9419aca2b0200da7c8cdf0c5 Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Thu, 8 Aug 2019 13:51:17 -0400 Subject: [PATCH 01/18] docs(readme): add Greenkeeper badge (#393) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3b6fda3b..8396389f 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Panzoom -[![Build Status](https://travis-ci.org/timmywil/panzoom.png?branch=master)](https://travis-ci.org/timmywil/panzoom) +[![Build Status](https://travis-ci.org/timmywil/panzoom.png?branch=master)](https://travis-ci.org/timmywil/panzoom) [![Greenkeeper badge](https://badges.greenkeeper.io/timmywil/panzoom.svg)](https://greenkeeper.io/) **[Examples](https://timmywil.com/panzoom/demo/)** From 85561c66f26a25fb143412439e5ba52b23dd52ef Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Thu, 8 Aug 2019 14:46:40 -0400 Subject: [PATCH 02/18] docs: linkify PanOptions and ZoomOptions --- README.md | 176 ++++++++++++++++--------------- demo/examples/ContainOutside.tsx | 2 +- src/types.ts | 8 +- tasks/docs.js | 31 +++--- 4 files changed, 111 insertions(+), 106 deletions(-) diff --git a/README.md b/README.md index 8396389f..e1127d37 100644 --- a/README.md +++ b/README.md @@ -92,7 +92,7 @@ You can also call `event.stopImmediatePropagation()` in an event handler on the ▸ **Panzoom**(`elem`: `HTMLElement` | `SVGElement`, `options?`: [PanzoomOptions](#PanzoomOptions)): _[PanzoomObject](#PanzoomObject)_ -_Defined in [panzoom.ts:38](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L38)_ +_Defined in [panzoom.ts:38](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L38)_ **Parameters:** @@ -105,109 +105,109 @@ _Defined in [panzoom.ts:38](https://github.com/timmywil/panzoom/blob/213f0df/src ### `Const` defaultOptions -_Defined in [panzoom.ts:18](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L18)_ +_Defined in [panzoom.ts:18](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L18)_ ### animate • **animate**: _false_ = false -_Defined in [panzoom.ts:19](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L19)_ +_Defined in [panzoom.ts:19](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L19)_ ### clickableClass • **clickableClass**: _string_ = "clickable" -_Defined in [panzoom.ts:20](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L20)_ +_Defined in [panzoom.ts:20](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L20)_ ### cursor • **cursor**: _string_ = "move" -_Defined in [panzoom.ts:21](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L21)_ +_Defined in [panzoom.ts:21](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L21)_ ### disablePan • **disablePan**: _false_ = false -_Defined in [panzoom.ts:22](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L22)_ +_Defined in [panzoom.ts:22](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L22)_ ### disableXAxis • **disableXAxis**: _false_ = false -_Defined in [panzoom.ts:24](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L24)_ +_Defined in [panzoom.ts:24](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L24)_ ### disableYAxis • **disableYAxis**: _false_ = false -_Defined in [panzoom.ts:25](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L25)_ +_Defined in [panzoom.ts:25](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L25)_ ### disableZoom • **disableZoom**: _false_ = false -_Defined in [panzoom.ts:23](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L23)_ +_Defined in [panzoom.ts:23](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L23)_ ### duration • **duration**: _number_ = 200 -_Defined in [panzoom.ts:26](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L26)_ +_Defined in [panzoom.ts:26](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L26)_ ### easing • **easing**: _string_ = "ease-in-out" -_Defined in [panzoom.ts:27](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L27)_ +_Defined in [panzoom.ts:27](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L27)_ ### maxScale • **maxScale**: _number_ = 4 -_Defined in [panzoom.ts:28](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L28)_ +_Defined in [panzoom.ts:28](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L28)_ ### minScale • **minScale**: _number_ = 0.125 -_Defined in [panzoom.ts:29](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L29)_ +_Defined in [panzoom.ts:29](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L29)_ ### relative • **relative**: _false_ = false -_Defined in [panzoom.ts:30](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L30)_ +_Defined in [panzoom.ts:30](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L30)_ ### setTransform • **setTransform**: _`setTransform`_ -_Defined in [panzoom.ts:31](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L31)_ +_Defined in [panzoom.ts:31](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L31)_ ### startScale • **startScale**: _number_ = 1 -_Defined in [panzoom.ts:34](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L34)_ +_Defined in [panzoom.ts:34](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L34)_ ### startX • **startX**: _number_ = 0 -_Defined in [panzoom.ts:32](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L32)_ +_Defined in [panzoom.ts:32](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L32)_ ### startY • **startY**: _number_ = 0 -_Defined in [panzoom.ts:33](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L33)_ +_Defined in [panzoom.ts:33](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L33)_ ### step • **step**: _number_ = 0.3 -_Defined in [panzoom.ts:35](https://github.com/timmywil/panzoom/blob/213f0df/src/panzoom.ts#L35)_ +_Defined in [panzoom.ts:35](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L35)_ ## `PanzoomOptions` @@ -221,7 +221,7 @@ Includes `MiscOptions`, `PanOptions`, and `ZoomOptions` • **animate**? : _boolean_ -_Defined in [types.ts:5](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L5)_ +_Defined in [types.ts:5](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L5)_ Whether to animate transitions @@ -231,7 +231,7 @@ Whether to animate transitions • **clickableClass**? : _string_ -_Defined in [types.ts:10](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L10)_ +_Defined in [types.ts:10](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L10)_ Add this class to any element within the panzoom element that you want to be clickable and not initiate the drag @@ -242,7 +242,7 @@ that you want to be clickable and not initiate the drag • **duration**? : _number_ -_Defined in [types.ts:12](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L12)_ +_Defined in [types.ts:12](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L12)_ Duration of the transition (ms) @@ -252,7 +252,7 @@ Duration of the transition (ms) • **easing**? : _string_ -_Defined in [types.ts:14](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L14)_ +_Defined in [types.ts:14](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L14)_ CSS Easing used for transitions @@ -262,7 +262,7 @@ CSS Easing used for transitions • **origin**? : _string_ -_Defined in [types.ts:28](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L28)_ +_Defined in [types.ts:28](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L28)_ **Change this at your own risk.** The `transform-origin` is the origin from which transforms are applied. @@ -282,9 +282,9 @@ And again, changing this for SVG in IE doesn't work at all. • **setTransform**? : _`setTransform`_ -_Defined in [types.ts:45](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L45)_ +_Defined in [types.ts:45](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L45)_ -Override the transform setter +Override the transform setter. This is exposed mostly so the user could set other parts of a transform aside from scale and translate. @@ -294,7 +294,11 @@ aside from scale and translate. // when setting the scale and translation Panzoom(elem, { setTransform: (elem, { scale, x, y }) => { - setStyle(elem, 'transform', `rotate(0.5turn) scale(${scale}) translate(${x}px, ${y}px)`) + setStyle( + elem, + 'transform', + `rotate(0.5turn) scale(${scale}) translate(${x}px, ${y}px)` + ) } }) ``` @@ -305,7 +309,7 @@ Panzoom(elem, { • **startScale**? : _number_ -_Defined in [types.ts:49](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L49)_ +_Defined in [types.ts:49](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L49)_ --- @@ -313,7 +317,7 @@ _Defined in [types.ts:49](https://github.com/timmywil/panzoom/blob/213f0df/src/t • **startX**? : _number_ -_Defined in [types.ts:47](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L47)_ +_Defined in [types.ts:47](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L47)_ Values used to set the beginning transform @@ -323,7 +327,7 @@ Values used to set the beginning transform • **startY**? : _number_ -_Defined in [types.ts:48](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L48)_ +_Defined in [types.ts:48](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L48)_ --- @@ -335,7 +339,7 @@ Includes `MiscOptions` • **contain**? : _"inside" | "outside"_ -_Defined in [types.ts:66](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L66)_ +_Defined in [types.ts:66](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L66)_ Contain the panzoom element either inside or outside the parent. @@ -353,7 +357,7 @@ empty space around the element will be shown. • **cursor**? : _string_ -_Defined in [types.ts:68](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L68)_ +_Defined in [types.ts:68](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L68)_ The cursor style to set on the panzoom element @@ -363,7 +367,7 @@ The cursor style to set on the panzoom element • **disablePan**? : _boolean_ -_Defined in [types.ts:70](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L70)_ +_Defined in [types.ts:70](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L70)_ Disable panning functionality. Note: disablePan also disables focal point zooming @@ -373,7 +377,7 @@ Disable panning functionality. Note: disablePan also disables focal point zoomin • **disableXAxis**? : _boolean_ -_Defined in [types.ts:72](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L72)_ +_Defined in [types.ts:72](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L72)_ Pan only on the Y axis @@ -383,7 +387,7 @@ Pan only on the Y axis • **disableYAxis**? : _boolean_ -_Defined in [types.ts:74](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L74)_ +_Defined in [types.ts:74](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L74)_ Pan only on the X axis @@ -393,7 +397,7 @@ Pan only on the X axis • **panOnlyWhenZoomed**? : _boolean_ -_Defined in [types.ts:78](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L78)_ +_Defined in [types.ts:78](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L78)_ Disable panning while the scale is equal to the starting value @@ -403,7 +407,7 @@ Disable panning while the scale is equal to the starting value • **relative**? : _boolean_ -_Defined in [types.ts:76](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L76)_ +_Defined in [types.ts:76](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L76)_ When passing x and y values to .pan(), treat the values as relative to their current values @@ -417,7 +421,7 @@ Includes `MiscOptions` • **disableZoom**? : _boolean_ -_Defined in [types.ts:83](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L83)_ +_Defined in [types.ts:83](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L83)_ Disable zooming functionality @@ -427,7 +431,7 @@ Disable zooming functionality • **focal**? : _object_ -_Defined in [types.ts:90](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L90)_ +_Defined in [types.ts:90](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L90)_ Zoom to the given point on the panzoom element. This point is expected to be relative to @@ -446,7 +450,7 @@ to the parent dimensions. • **maxScale**? : _number_ -_Defined in [types.ts:94](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L94)_ +_Defined in [types.ts:94](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L94)_ The maximum scale when zooming @@ -456,7 +460,7 @@ The maximum scale when zooming • **minScale**? : _number_ -_Defined in [types.ts:92](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L92)_ +_Defined in [types.ts:92](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L92)_ The minimum scale when zooming @@ -466,9 +470,9 @@ The minimum scale when zooming • **step**? : _number_ -_Defined in [types.ts:96](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L96)_ +_Defined in [types.ts:96](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L96)_ -The step affects the rate of zooming with a mouse wheel, pinching, or range element +The step affects zoom calculation when zooming with a mouse wheel, when pinch zooming, or when using zoomIn/zoomOut --- @@ -480,7 +484,7 @@ These methods are available after initializing Panzoom • **getOptions**: _function_ -_Defined in [types.ts:117](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L117)_ +_Defined in [types.ts:117](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L117)_ Returns a _copy_ of the current options object @@ -494,7 +498,7 @@ Returns a _copy_ of the current options object • **getPan**: _function_ -_Defined in [types.ts:113](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L113)_ +_Defined in [types.ts:113](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L113)_ Get the current x/y translation @@ -512,7 +516,7 @@ Get the current x/y translation • **getScale**: _function_ -_Defined in [types.ts:115](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L115)_ +_Defined in [types.ts:115](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L115)_ Get the current scale @@ -526,7 +530,7 @@ Get the current scale • **pan**: _function_ -_Defined in [types.ts:128](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L128)_ +_Defined in [types.ts:128](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L128)_ Pan the Panzoom element to the given x and y coordinates @@ -539,15 +543,15 @@ panzoom.pan(10, 10, { relative: true }) #### Signature with return type: -▸ (`x`: number | string, `y`: number | string, `panOptions?`: PanOptions): _[CurrentValues](#CurrentValues)_ +▸ (`x`: number | string, `y`: number | string, `panOptions?`: [PanOptions](#PanOptions)): _[CurrentValues](#CurrentValues)_ **Parameters:** -| Name | Type | -| ------------- | ---------------- | -| `x` | number \| string | -| `y` | number \| string | -| `panOptions?` | PanOptions | +| Name | Type | +| ------------- | ------------------------- | +| `x` | number \| string | +| `y` | number \| string | +| `panOptions?` | [PanOptions](#PanOptions) | --- @@ -555,7 +559,7 @@ panzoom.pan(10, 10, { relative: true }) • **reset**: _function_ -_Defined in [types.ts:134](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L134)_ +_Defined in [types.ts:134](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L134)_ Reset the pan and zoom to startX, startY, and startScale. Animates by default, ignoring the global option. @@ -577,7 +581,7 @@ Pass `{ animate: false }` to override. • **setOptions**: _function_ -_Defined in [types.ts:136](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L136)_ +_Defined in [types.ts:136](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L136)_ Change options for the Panzoom instance @@ -597,7 +601,7 @@ Change options for the Panzoom instance • **setStyle**: _`setStyle`_ -_Defined in [types.ts:138](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L138)_ +_Defined in [types.ts:138](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L138)_ A convenience method for setting prefixed styles on the Panzoom element @@ -607,7 +611,7 @@ A convenience method for setting prefixed styles on the Panzoom element • **zoom**: _function_ -_Defined in [types.ts:147](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L147)_ +_Defined in [types.ts:147](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L147)_ Zoom the Panzoom element to the given scale @@ -618,14 +622,14 @@ panzoom.zoom(2.2, { animate: true }) #### Signature with return type: -▸ (`scale`: number, `zoomOptions?`: ZoomOptions): _[CurrentValues](#CurrentValues)_ +▸ (`scale`: number, `zoomOptions?`: [ZoomOptions](#ZoomOptions)): _[CurrentValues](#CurrentValues)_ **Parameters:** -| Name | Type | -| -------------- | ----------- | -| `scale` | number | -| `zoomOptions?` | ZoomOptions | +| Name | Type | +| -------------- | --------------------------- | +| `scale` | number | +| `zoomOptions?` | [ZoomOptions](#ZoomOptions) | --- @@ -633,21 +637,21 @@ panzoom.zoom(2.2, { animate: true }) • **zoomIn**: _function_ -_Defined in [types.ts:153](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L153)_ +_Defined in [types.ts:153](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L153)_ -Zoom in using the predetermined increment set in options +Zoom in using the predetermined increment set in options. Animates by default, ignoring the global option. Pass `{ animate: false }` to override. #### Signature with return type: -▸ (`zoomOptions?`: ZoomOptions): _[CurrentValues](#CurrentValues)_ +▸ (`zoomOptions?`: [ZoomOptions](#ZoomOptions)): _[CurrentValues](#CurrentValues)_ **Parameters:** -| Name | Type | -| -------------- | ----------- | -| `zoomOptions?` | ZoomOptions | +| Name | Type | +| -------------- | --------------------------- | +| `zoomOptions?` | [ZoomOptions](#ZoomOptions) | --- @@ -655,21 +659,21 @@ Pass `{ animate: false }` to override. • **zoomOut**: _function_ -_Defined in [types.ts:159](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L159)_ +_Defined in [types.ts:159](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L159)_ -Zoom out using the predetermined increment set in options +Zoom out using the predetermined increment set in options. Animates by default, ignoring the global option. Pass `{ animate: false }` to override. #### Signature with return type: -▸ (`zoomOptions?`: ZoomOptions): _[CurrentValues](#CurrentValues)_ +▸ (`zoomOptions?`: [ZoomOptions](#ZoomOptions)): _[CurrentValues](#CurrentValues)_ **Parameters:** -| Name | Type | -| -------------- | ----------- | -| `zoomOptions?` | ZoomOptions | +| Name | Type | +| -------------- | --------------------------- | +| `zoomOptions?` | [ZoomOptions](#ZoomOptions) | --- @@ -677,7 +681,7 @@ Pass `{ animate: false }` to override. • **zoomToPoint**: _function_ -_Defined in [types.ts:166](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L166)_ +_Defined in [types.ts:166](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L166)_ Zoom the Panzoom element to a focal point using the given pointer/touch/mouse event or constructed point. @@ -686,7 +690,7 @@ the same way as a pointer event on the Panzoom element. #### Signature with return type: -▸ (`scale`: number, `point`: object, `zoomOptions?`: ZoomOptions): _[CurrentValues](#CurrentValues)_ +▸ (`scale`: number, `point`: object, `zoomOptions?`: [ZoomOptions](#ZoomOptions)): _[CurrentValues](#CurrentValues)_ **Parameters:** @@ -699,7 +703,7 @@ the same way as a pointer event on the Panzoom element. | `clientX` | number | | `clientY` | number | -▪`Optional` **zoomOptions**: _ZoomOptions_ +▪`Optional` **zoomOptions**: _[ZoomOptions](#ZoomOptions)_ --- @@ -707,7 +711,7 @@ the same way as a pointer event on the Panzoom element. • **zoomWithWheel**: _function_ -_Defined in [types.ts:195](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L195)_ +_Defined in [types.ts:195](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L195)_ Zoom the Panzoom element to a focal point using the given WheelEvent @@ -734,14 +738,14 @@ elem.parentElement.addEventListener('wheel', function(event) { #### Signature with return type: -▸ (`event`: `WheelEvent`, `zoomOptions?`: ZoomOptions): _[CurrentValues](#CurrentValues)_ +▸ (`event`: `WheelEvent`, `zoomOptions?`: [ZoomOptions](#ZoomOptions)): _[CurrentValues](#CurrentValues)_ **Parameters:** -| Name | Type | -| -------------- | ------------ | -| `event` | `WheelEvent` | -| `zoomOptions?` | ZoomOptions | +| Name | Type | +| -------------- | --------------------------- | +| `event` | `WheelEvent` | +| `zoomOptions?` | [ZoomOptions](#ZoomOptions) | --- @@ -751,7 +755,7 @@ elem.parentElement.addEventListener('wheel', function(event) { • **scale**: _number_ -_Defined in [types.ts:108](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L108)_ +_Defined in [types.ts:108](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L108)_ --- @@ -759,7 +763,7 @@ _Defined in [types.ts:108](https://github.com/timmywil/panzoom/blob/213f0df/src/ • **x**: _number_ -_Defined in [types.ts:106](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L106)_ +_Defined in [types.ts:106](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L106)_ --- @@ -767,4 +771,4 @@ _Defined in [types.ts:106](https://github.com/timmywil/panzoom/blob/213f0df/src/ • **y**: _number_ -_Defined in [types.ts:107](https://github.com/timmywil/panzoom/blob/213f0df/src/types.ts#L107)_ +_Defined in [types.ts:107](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L107)_ diff --git a/demo/examples/ContainOutside.tsx b/demo/examples/ContainOutside.tsx index 552b2951..cc4955fb 100644 --- a/demo/examples/ContainOutside.tsx +++ b/demo/examples/ContainOutside.tsx @@ -11,7 +11,7 @@ export default function ContainOutside() { Panzoom(elem.current, { contain: 'outside', startScale: 1.5 }) }, []) return ( - +
CurrentValues /** - * Zoom in using the predetermined increment set in options + * Zoom in using the predetermined increment set in options. * Animates by default, ignoring the global option. * Pass `{ animate: false }` to override. */ zoomIn: (zoomOptions?: ZoomOptions) => CurrentValues /** - * Zoom out using the predetermined increment set in options + * Zoom out using the predetermined increment set in options. * Animates by default, ignoring the global option. * Pass `{ animate: false }` to override. */ diff --git a/tasks/docs.js b/tasks/docs.js index 4e724fa0..da5ce117 100644 --- a/tasks/docs.js +++ b/tasks/docs.js @@ -16,40 +16,41 @@ function redoLinks(data) { // Remove links that aren't links to source .replace(/\[([^:]+)\]\(.*?\)/g, '$1') .replace(/PanzoomOptions/g, '[PanzoomOptions](#PanzoomOptions)') + .replace(/PanOptions/g, '[PanOptions](#PanOptions)') + .replace(/ZoomOptions/g, '[ZoomOptions](#ZoomOptions)') .replace(/PanzoomObject/g, '[PanzoomObject](#PanzoomObject)') .replace(/CurrentValues/g, '[CurrentValues](#CurrentValues)') ) } -const constructor = read('../docs/modules/_panzoom_.md') +const constructor = redoLinks(read('../docs/modules/_panzoom_.md')) // Remove unwanted text .replace(/[\w\W]+###\s*Panzoom/, '') .replace('## Object literals\n\n', '') .replace('### ▪ **defaultOptions**: *object*\n\n', '') -data += '\n\n### Default export\n\n' + redoLinks(constructor) +data += '\n\n### Default export\n\n' + constructor const panzoomOptions = - read('../docs/interfaces/_types_.miscoptions.md') + '\n\n## `PanzoomOptions`\n\nIncludes `MiscOptions`, `PanOptions`, and `ZoomOptions`\n\n' + + redoLinks(read('../docs/interfaces/_types_.miscoptions.md')) // Remove unwanted text .replace(/[\w\W]+##\s*Properties/, '\n\n---\n\n## `MiscOptions`\n') + - read('../docs/interfaces/_types_.panoptions.md') + redoLinks(read('../docs/interfaces/_types_.panoptions.md')) // Remove unwanted text .replace(/[\w\W]+##\s*Properties/, '\n\n---\n\n## `PanOptions`\n\nIncludes `MiscOptions`\n\n') + - read('../docs/interfaces/_types_.zoomoptions.md') + redoLinks(read('../docs/interfaces/_types_.zoomoptions.md')) // Remove unwanted text .replace(/[\w\W]+##\s*Properties/, '\n\n---\n\n## `ZoomOptions`\n\nIncludes `MiscOptions`\n\n') -data += - '\n\n## `PanzoomOptions`\n\nIncludes `MiscOptions`, `PanOptions`, and `ZoomOptions`\n\n' + - redoLinks(panzoomOptions) +data += panzoomOptions -const panzoomObject = read('../docs/interfaces/_types_.panzoomobject.md') - // Remove unwanted text - .replace(/[\w\W]+##\s*Properties/, '') - // Type declaration refers to the signature - .replace(/Type declaration:/g, 'Signature with return type:') -data += +const panzoomObject = '\n\n---\n\n## `PanzoomObject`\n\nThese methods are available after initializing Panzoom\n\n' + - redoLinks(panzoomObject) + redoLinks(read('../docs/interfaces/_types_.panzoomobject.md')) + // Remove unwanted text + .replace(/[\w\W]+##\s*Properties/, '') + // Type declaration refers to the signature + .replace(/Type declaration:/g, 'Signature with return type:') +data += panzoomObject const currentValues = read('../docs/interfaces/_types_.currentvalues.md') // Remove unwanted text From 2693a52433b10f3381b65972bcc5aeafb1d2af3a Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Thu, 8 Aug 2019 14:55:00 -0400 Subject: [PATCH 03/18] docs(readme): minor edits --- README.md | 34 ++++++++++++++++++++++++++++------ 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index e1127d37..450126be 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ Rather than using absolute positioning or setting width and height, Panzoom uses panzoom.min.js, included in this repo, is compressed with [uglifyjs](https://github.com/mishoo/UglifyJS). -For common support questions, see [the FAQ](https://github.com/timmywil/panzoom#faq) at the bottom. +For common support questions, see [the FAQ](https://github.com/timmywil/panzoom#faq). ## Browser support @@ -35,7 +35,19 @@ In IE11, CSS animations/transitions do not work on SVG elements, at least for th One could implement transitions manually in IE11 using the `setTransform` option and integrating a tweening library for javascript animations (such as [tween.js](https://www.createjs.com/#!/TweenJS)). -## Loading Panzoom +## Installing + +With npm: + +```bash +$ npm install --save @panzoom/panzoom +``` + +With yarn: + +```bash +$ yarn add @panzoom/panzoom +``` Panzoom uses [UMD](https://github.com/umdjs/umd) and can be loaded a lot of ways. @@ -45,7 +57,13 @@ With ES6 imports: import Panzoom from 'panzoom' ``` -With AMD loader in an anonymous module: +With commonjs or browserify: + +``` +const Panzoom = require('panzoom') +``` + +With an AMD loader in an anonymous module: ```js define(['panzoom'], function(Panzoom) { @@ -53,18 +71,22 @@ define(['panzoom'], function(Panzoom) { }) ``` -With script tags: +With a script tag: ```html ``` -## Initialization +## Usage ```js -const panzoom = Panzoom('.panzoom', { +const elem = document.getElementById('panzoom-element') +const panzoom = Panzoom(elem, { maxScale: 5 }) +panzoom.pan(10, 10) +panzoom.zoom(2, { animate: true }) +elem.parentElement.addEventListener('wheel', panzoom.zoomWithWheel) ``` ## FAQ From dcd52d13616d76ba8170ec9cdc2fdfa33a99b993 Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Thu, 8 Aug 2019 15:02:18 -0400 Subject: [PATCH 04/18] docs(readme): remove stale example --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 450126be..b5728fd1 100644 --- a/README.md +++ b/README.md @@ -97,14 +97,14 @@ elem.parentElement.addEventListener('wheel', panzoom.zoomWithWheel) - HTML elements default to '50% 50%'. - SVG elements default to '0 0'. -2\. I am using Panzoom with an `` tag. It zooms but does not pan. [example](https://codepen.io/timmywil/pen/qNpykA) +2\. I am using Panzoom with an `` tag and it's not working. What's wrong? Object elements can eat up events, making it so they never reach Panzoom. To fix this, disable pointer events (`pointer-events: none`) on the `` tag and call Panzoom using a wrapper. 3\. My links aren't working! How do I enable an anchor within a panzoom element? Add class `options.clickableClass` (default is `"clickable"`) to whatever element you want to be clickable. Panzoom will check for this class before handling the event. -You can also call `event.stopImmediatePropagation()` in an event handler on the clickable element. +Alternatively, call `event.stopImmediatePropagation()` in an event handler on the clickable element. --- From 643953f1d69f85e224c7c13cd5ff2d499fa2d9d0 Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Thu, 8 Aug 2019 15:06:28 -0400 Subject: [PATCH 05/18] docs: remove 'Optional' from options --- README.md | 152 +++++++++++++++++++++++++------------------------- tasks/docs.js | 15 +++-- 2 files changed, 86 insertions(+), 81 deletions(-) diff --git a/README.md b/README.md index b5728fd1..a9adb047 100644 --- a/README.md +++ b/README.md @@ -114,7 +114,7 @@ Alternatively, call `event.stopImmediatePropagation()` in an event handler on th ▸ **Panzoom**(`elem`: `HTMLElement` | `SVGElement`, `options?`: [PanzoomOptions](#PanzoomOptions)): _[PanzoomObject](#PanzoomObject)_ -_Defined in [panzoom.ts:38](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L38)_ +_Defined in [panzoom.ts:38](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L38)_ **Parameters:** @@ -127,109 +127,109 @@ _Defined in [panzoom.ts:38](https://github.com/timmywil/panzoom/blob/0958e8a/src ### `Const` defaultOptions -_Defined in [panzoom.ts:18](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L18)_ +_Defined in [panzoom.ts:18](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L18)_ ### animate • **animate**: _false_ = false -_Defined in [panzoom.ts:19](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L19)_ +_Defined in [panzoom.ts:19](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L19)_ ### clickableClass • **clickableClass**: _string_ = "clickable" -_Defined in [panzoom.ts:20](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L20)_ +_Defined in [panzoom.ts:20](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L20)_ ### cursor • **cursor**: _string_ = "move" -_Defined in [panzoom.ts:21](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L21)_ +_Defined in [panzoom.ts:21](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L21)_ ### disablePan • **disablePan**: _false_ = false -_Defined in [panzoom.ts:22](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L22)_ +_Defined in [panzoom.ts:22](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L22)_ ### disableXAxis • **disableXAxis**: _false_ = false -_Defined in [panzoom.ts:24](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L24)_ +_Defined in [panzoom.ts:24](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L24)_ ### disableYAxis • **disableYAxis**: _false_ = false -_Defined in [panzoom.ts:25](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L25)_ +_Defined in [panzoom.ts:25](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L25)_ ### disableZoom • **disableZoom**: _false_ = false -_Defined in [panzoom.ts:23](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L23)_ +_Defined in [panzoom.ts:23](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L23)_ ### duration • **duration**: _number_ = 200 -_Defined in [panzoom.ts:26](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L26)_ +_Defined in [panzoom.ts:26](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L26)_ ### easing • **easing**: _string_ = "ease-in-out" -_Defined in [panzoom.ts:27](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L27)_ +_Defined in [panzoom.ts:27](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L27)_ ### maxScale • **maxScale**: _number_ = 4 -_Defined in [panzoom.ts:28](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L28)_ +_Defined in [panzoom.ts:28](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L28)_ ### minScale • **minScale**: _number_ = 0.125 -_Defined in [panzoom.ts:29](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L29)_ +_Defined in [panzoom.ts:29](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L29)_ ### relative • **relative**: _false_ = false -_Defined in [panzoom.ts:30](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L30)_ +_Defined in [panzoom.ts:30](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L30)_ ### setTransform • **setTransform**: _`setTransform`_ -_Defined in [panzoom.ts:31](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L31)_ +_Defined in [panzoom.ts:31](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L31)_ ### startScale • **startScale**: _number_ = 1 -_Defined in [panzoom.ts:34](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L34)_ +_Defined in [panzoom.ts:34](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L34)_ ### startX • **startX**: _number_ = 0 -_Defined in [panzoom.ts:32](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L32)_ +_Defined in [panzoom.ts:32](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L32)_ ### startY • **startY**: _number_ = 0 -_Defined in [panzoom.ts:33](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L33)_ +_Defined in [panzoom.ts:33](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L33)_ ### step • **step**: _number_ = 0.3 -_Defined in [panzoom.ts:35](https://github.com/timmywil/panzoom/blob/0958e8a/src/panzoom.ts#L35)_ +_Defined in [panzoom.ts:35](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L35)_ ## `PanzoomOptions` @@ -239,52 +239,52 @@ Includes `MiscOptions`, `PanOptions`, and `ZoomOptions` ## `MiscOptions` -### `Optional` animate +### animate • **animate**? : _boolean_ -_Defined in [types.ts:5](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L5)_ +_Defined in [types.ts:5](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L5)_ Whether to animate transitions --- -### `Optional` clickableClass +### clickableClass • **clickableClass**? : _string_ -_Defined in [types.ts:10](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L10)_ +_Defined in [types.ts:10](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L10)_ Add this class to any element within the panzoom element that you want to be clickable and not initiate the drag --- -### `Optional` duration +### duration • **duration**? : _number_ -_Defined in [types.ts:12](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L12)_ +_Defined in [types.ts:12](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L12)_ Duration of the transition (ms) --- -### `Optional` easing +### easing • **easing**? : _string_ -_Defined in [types.ts:14](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L14)_ +_Defined in [types.ts:14](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L14)_ CSS Easing used for transitions --- -### `Optional` origin +### origin • **origin**? : _string_ -_Defined in [types.ts:28](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L28)_ +_Defined in [types.ts:28](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L28)_ **Change this at your own risk.** The `transform-origin` is the origin from which transforms are applied. @@ -300,11 +300,11 @@ And again, changing this for SVG in IE doesn't work at all. --- -### `Optional` setTransform +### setTransform • **setTransform**? : _`setTransform`_ -_Defined in [types.ts:45](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L45)_ +_Defined in [types.ts:45](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L45)_ Override the transform setter. This is exposed mostly so the user could @@ -327,29 +327,29 @@ Panzoom(elem, { --- -### `Optional` startScale +### startScale • **startScale**? : _number_ -_Defined in [types.ts:49](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L49)_ +_Defined in [types.ts:49](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L49)_ --- -### `Optional` startX +### startX • **startX**? : _number_ -_Defined in [types.ts:47](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L47)_ +_Defined in [types.ts:47](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L47)_ Values used to set the beginning transform --- -### `Optional` startY +### startY • **startY**? : _number_ -_Defined in [types.ts:48](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L48)_ +_Defined in [types.ts:48](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L48)_ --- @@ -357,11 +357,11 @@ _Defined in [types.ts:48](https://github.com/timmywil/panzoom/blob/0958e8a/src/t Includes `MiscOptions` -### `Optional` contain +### contain • **contain**? : _"inside" | "outside"_ -_Defined in [types.ts:66](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L66)_ +_Defined in [types.ts:66](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L66)_ Contain the panzoom element either inside or outside the parent. @@ -375,61 +375,61 @@ empty space around the element will be shown. --- -### `Optional` cursor +### cursor • **cursor**? : _string_ -_Defined in [types.ts:68](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L68)_ +_Defined in [types.ts:68](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L68)_ The cursor style to set on the panzoom element --- -### `Optional` disablePan +### disablePan • **disablePan**? : _boolean_ -_Defined in [types.ts:70](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L70)_ +_Defined in [types.ts:70](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L70)_ Disable panning functionality. Note: disablePan also disables focal point zooming --- -### `Optional` disableXAxis +### disableXAxis • **disableXAxis**? : _boolean_ -_Defined in [types.ts:72](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L72)_ +_Defined in [types.ts:72](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L72)_ Pan only on the Y axis --- -### `Optional` disableYAxis +### disableYAxis • **disableYAxis**? : _boolean_ -_Defined in [types.ts:74](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L74)_ +_Defined in [types.ts:74](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L74)_ Pan only on the X axis --- -### `Optional` panOnlyWhenZoomed +### panOnlyWhenZoomed • **panOnlyWhenZoomed**? : _boolean_ -_Defined in [types.ts:78](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L78)_ +_Defined in [types.ts:78](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L78)_ Disable panning while the scale is equal to the starting value --- -### `Optional` relative +### relative • **relative**? : _boolean_ -_Defined in [types.ts:76](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L76)_ +_Defined in [types.ts:76](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L76)_ When passing x and y values to .pan(), treat the values as relative to their current values @@ -439,21 +439,21 @@ When passing x and y values to .pan(), treat the values as relative to their cur Includes `MiscOptions` -### `Optional` disableZoom +### disableZoom • **disableZoom**? : _boolean_ -_Defined in [types.ts:83](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L83)_ +_Defined in [types.ts:83](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L83)_ Disable zooming functionality --- -### `Optional` focal +### focal • **focal**? : _object_ -_Defined in [types.ts:90](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L90)_ +_Defined in [types.ts:90](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L90)_ Zoom to the given point on the panzoom element. This point is expected to be relative to @@ -468,31 +468,31 @@ to the parent dimensions. --- -### `Optional` maxScale +### maxScale • **maxScale**? : _number_ -_Defined in [types.ts:94](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L94)_ +_Defined in [types.ts:94](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L94)_ The maximum scale when zooming --- -### `Optional` minScale +### minScale • **minScale**? : _number_ -_Defined in [types.ts:92](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L92)_ +_Defined in [types.ts:92](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L92)_ The minimum scale when zooming --- -### `Optional` step +### step • **step**? : _number_ -_Defined in [types.ts:96](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L96)_ +_Defined in [types.ts:96](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L96)_ The step affects zoom calculation when zooming with a mouse wheel, when pinch zooming, or when using zoomIn/zoomOut @@ -506,7 +506,7 @@ These methods are available after initializing Panzoom • **getOptions**: _function_ -_Defined in [types.ts:117](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L117)_ +_Defined in [types.ts:117](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L117)_ Returns a _copy_ of the current options object @@ -520,7 +520,7 @@ Returns a _copy_ of the current options object • **getPan**: _function_ -_Defined in [types.ts:113](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L113)_ +_Defined in [types.ts:113](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L113)_ Get the current x/y translation @@ -538,7 +538,7 @@ Get the current x/y translation • **getScale**: _function_ -_Defined in [types.ts:115](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L115)_ +_Defined in [types.ts:115](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L115)_ Get the current scale @@ -552,7 +552,7 @@ Get the current scale • **pan**: _function_ -_Defined in [types.ts:128](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L128)_ +_Defined in [types.ts:128](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L128)_ Pan the Panzoom element to the given x and y coordinates @@ -581,7 +581,7 @@ panzoom.pan(10, 10, { relative: true }) • **reset**: _function_ -_Defined in [types.ts:134](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L134)_ +_Defined in [types.ts:134](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L134)_ Reset the pan and zoom to startX, startY, and startScale. Animates by default, ignoring the global option. @@ -603,7 +603,7 @@ Pass `{ animate: false }` to override. • **setOptions**: _function_ -_Defined in [types.ts:136](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L136)_ +_Defined in [types.ts:136](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L136)_ Change options for the Panzoom instance @@ -623,7 +623,7 @@ Change options for the Panzoom instance • **setStyle**: _`setStyle`_ -_Defined in [types.ts:138](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L138)_ +_Defined in [types.ts:138](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L138)_ A convenience method for setting prefixed styles on the Panzoom element @@ -633,7 +633,7 @@ A convenience method for setting prefixed styles on the Panzoom element • **zoom**: _function_ -_Defined in [types.ts:147](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L147)_ +_Defined in [types.ts:147](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L147)_ Zoom the Panzoom element to the given scale @@ -659,7 +659,7 @@ panzoom.zoom(2.2, { animate: true }) • **zoomIn**: _function_ -_Defined in [types.ts:153](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L153)_ +_Defined in [types.ts:153](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L153)_ Zoom in using the predetermined increment set in options. Animates by default, ignoring the global option. @@ -681,7 +681,7 @@ Pass `{ animate: false }` to override. • **zoomOut**: _function_ -_Defined in [types.ts:159](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L159)_ +_Defined in [types.ts:159](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L159)_ Zoom out using the predetermined increment set in options. Animates by default, ignoring the global option. @@ -703,7 +703,7 @@ Pass `{ animate: false }` to override. • **zoomToPoint**: _function_ -_Defined in [types.ts:166](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L166)_ +_Defined in [types.ts:166](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L166)_ Zoom the Panzoom element to a focal point using the given pointer/touch/mouse event or constructed point. @@ -733,7 +733,7 @@ the same way as a pointer event on the Panzoom element. • **zoomWithWheel**: _function_ -_Defined in [types.ts:195](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L195)_ +_Defined in [types.ts:195](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L195)_ Zoom the Panzoom element to a focal point using the given WheelEvent @@ -777,7 +777,7 @@ elem.parentElement.addEventListener('wheel', function(event) { • **scale**: _number_ -_Defined in [types.ts:108](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L108)_ +_Defined in [types.ts:108](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L108)_ --- @@ -785,7 +785,7 @@ _Defined in [types.ts:108](https://github.com/timmywil/panzoom/blob/0958e8a/src/ • **x**: _number_ -_Defined in [types.ts:106](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L106)_ +_Defined in [types.ts:106](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L106)_ --- @@ -793,4 +793,4 @@ _Defined in [types.ts:106](https://github.com/timmywil/panzoom/blob/0958e8a/src/ • **y**: _number_ -_Defined in [types.ts:107](https://github.com/timmywil/panzoom/blob/0958e8a/src/types.ts#L107)_ +_Defined in [types.ts:107](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L107)_ diff --git a/tasks/docs.js b/tasks/docs.js index da5ce117..9d66e43c 100644 --- a/tasks/docs.js +++ b/tasks/docs.js @@ -30,31 +30,36 @@ const constructor = redoLinks(read('../docs/modules/_panzoom_.md')) .replace('### ▪ **defaultOptions**: *object*\n\n', '') data += '\n\n### Default export\n\n' + constructor +const rProperties = /[\w\W]+##\s*Properties/ +const rOptional = /`Optional` /g const panzoomOptions = '\n\n## `PanzoomOptions`\n\nIncludes `MiscOptions`, `PanOptions`, and `ZoomOptions`\n\n' + redoLinks(read('../docs/interfaces/_types_.miscoptions.md')) // Remove unwanted text - .replace(/[\w\W]+##\s*Properties/, '\n\n---\n\n## `MiscOptions`\n') + + .replace(rOptional, '') + .replace(rProperties, '\n\n---\n\n## `MiscOptions`\n') + redoLinks(read('../docs/interfaces/_types_.panoptions.md')) // Remove unwanted text - .replace(/[\w\W]+##\s*Properties/, '\n\n---\n\n## `PanOptions`\n\nIncludes `MiscOptions`\n\n') + + .replace(rOptional, '') + .replace(rProperties, '\n\n---\n\n## `PanOptions`\n\nIncludes `MiscOptions`\n\n') + redoLinks(read('../docs/interfaces/_types_.zoomoptions.md')) // Remove unwanted text - .replace(/[\w\W]+##\s*Properties/, '\n\n---\n\n## `ZoomOptions`\n\nIncludes `MiscOptions`\n\n') + .replace(rOptional, '') + .replace(rProperties, '\n\n---\n\n## `ZoomOptions`\n\nIncludes `MiscOptions`\n\n') data += panzoomOptions const panzoomObject = '\n\n---\n\n## `PanzoomObject`\n\nThese methods are available after initializing Panzoom\n\n' + redoLinks(read('../docs/interfaces/_types_.panzoomobject.md')) // Remove unwanted text - .replace(/[\w\W]+##\s*Properties/, '') + .replace(rProperties, '') // Type declaration refers to the signature .replace(/Type declaration:/g, 'Signature with return type:') data += panzoomObject const currentValues = read('../docs/interfaces/_types_.currentvalues.md') // Remove unwanted text - .replace(/[\w\W]+##\s*Properties/, '\n\n---\n\n## `CurrentValues`\n') + .replace(rProperties, '\n\n---\n\n## `CurrentValues`\n') data += currentValues // Write a pretty version From df5679c4d3b4510eeea1c8157648ef74d1822653 Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Fri, 9 Aug 2019 11:13:43 -0400 Subject: [PATCH 06/18] chore(deps): upgrade dependencies (#396) --- package.json | 7 +++--- yarn.lock | 68 +++++++++++++++++++++------------------------------- 2 files changed, 30 insertions(+), 45 deletions(-) diff --git a/package.json b/package.json index 28f1d753..67354826 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,6 @@ "@semantic-release/git": "^7.0.16", "@types/mocha": "^5.2.7", "@types/prismjs": "^1.16.0", - "@types/react": "^16.8.25", "@types/react-dom": "^16.8.5", "commitizen": "^4.0.3", "commitlint": "^8.1.0", @@ -61,7 +60,7 @@ "css-loader": "^3.2.0", "gzip-size-cli": "^3.0.0", "html-webpack-plugin": "^3.2.0", - "husky": "^3.0.2", + "husky": "^3.0.3", "karma": "^4.2.0", "karma-chrome-launcher": "^3.0.0", "karma-mocha": "^1.3.0", @@ -71,8 +70,8 @@ "prettier": "^1.18.2", "prismjs": "^1.17.1", "puppeteer": "^1.19.0", - "react": "^16.8.6", - "react-dom": "^16.8.6", + "react": "^16.9.0", + "react-dom": "^16.9.0", "rollup": "^1.19.4", "rollup-plugin-typescript2": "^0.22.1", "semantic-release": "^15.13.19", diff --git a/yarn.lock b/yarn.lock index 67bf7d7e..7ec7f856 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1035,10 +1035,10 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^16.8.25": - version "16.8.25" - resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.25.tgz#0247613ab58b1b11ba10fed662e1947c5f2bb89c" - integrity sha512-ydAAkLnNTC4oYSxJ3zwK/4QcVmEecACJ4ZdxXITbxz/dhahBSDKY6OQ1uawAW6rE/7kfHccxulYLSAIZVrSq0A== +"@types/react@*": + version "16.9.1" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.1.tgz#862c83b4c9d5cd116e42fd9a4f3694843cd2c051" + integrity sha512-jGM2x8F7m7/r+81N/BOaUKVwbC5Cdw6ExlWEUpr77XPwVeNvAppnPEnMMLMfxRDYL8FPEX8MHjwtD2NQMJ0yyQ== dependencies: "@types/prop-types" "*" csstype "^2.2.0" @@ -2707,15 +2707,7 @@ conventional-commit-types@^2.0.0: resolved "https://registry.yarnpkg.com/conventional-commit-types/-/conventional-commit-types-2.1.1.tgz#352eb53f56fbc7c1a6c1ba059c2b6670c90b2a8a" integrity sha512-0Ts+fEdmjqYDOQ1yZ+LNgdSPO335XZw9qC10M7CxtLP3nIMGmeMhmkM8Taffa4+MXN13bRPlp0CtH+QfOzKTzw== -conventional-commits-filter@^2.0.0: - version "2.0.1" - resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-2.0.1.tgz#55a135de1802f6510b6758e0a6aa9e0b28618db3" - integrity sha512-92OU8pz/977udhBjgPEbg3sbYzIxMDFTlQT97w7KdhR9igNqdJvy8smmedAAgn4tPiqseFloKkrVfbXCVd+E7A== - dependencies: - is-subset "^0.1.1" - modify-values "^1.0.0" - -conventional-commits-filter@^2.0.2: +conventional-commits-filter@^2.0.0, conventional-commits-filter@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-2.0.2.tgz#f122f89fbcd5bb81e2af2fcac0254d062d1039c1" integrity sha512-WpGKsMeXfs21m1zIw4s9H5sys2+9JccTzpN6toXtxhpw2VNF2JUXwIakthKBy+LN4DvJm+TzWhxOMWOs1OFCFQ== @@ -4844,10 +4836,10 @@ humanize-ms@^1.2.1: dependencies: ms "^2.0.0" -husky@^3.0.2: - version "3.0.2" - resolved "https://registry.yarnpkg.com/husky/-/husky-3.0.2.tgz#e78fd2ae16edca59fc88e56aeb8d70acdcc1c082" - integrity sha512-WXCtaME2x0o4PJlKY4ap8BzLA+D0zlvefqAvLCPriOOu+x0dpO5uc5tlB7CY6/0SE2EESmoZsj4jW5D09KrJoA== +husky@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/husky/-/husky-3.0.3.tgz#6f3fb99f60ef72cdf34e5d78445c2f798c441b1d" + integrity sha512-DBBMPSiBYEMx7EVUTRE/ymXJa/lOL+WplcsV/lZu+/HHGt0gzD+5BIz9EJnCrWyUa7hkMuBh7/9OZ04qDkM+Nw== dependencies: chalk "^2.4.2" cosmiconfig "^5.2.1" @@ -4856,7 +4848,7 @@ husky@^3.0.2: is-ci "^2.0.0" opencollective-postinstall "^2.0.2" pkg-dir "^4.2.0" - please-upgrade-node "^3.1.1" + please-upgrade-node "^3.2.0" read-pkg "^5.1.1" run-node "^1.0.0" slash "^3.0.0" @@ -5427,11 +5419,6 @@ is-stream@^1.0.0, is-stream@^1.1.0: resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ= -is-subset@^0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6" - integrity sha1-ilkRfZMt4d4A8kX83TnOQ/HpOaY= - is-symbol@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.2.tgz#a055f6ae57192caee329e7a860118b497a950f38" @@ -7789,10 +7776,10 @@ pkg-dir@^4.2.0: dependencies: find-up "^4.0.0" -please-upgrade-node@^3.1.1: - version "3.1.1" - resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.1.1.tgz#ed320051dfcc5024fae696712c8288993595e8ac" - integrity sha512-KY1uHnQ2NlQHqIJQpnh/i54rKkuxCEBx+voJIS/Mvb+L2iYd2NMotwduhKTMjfC1uKoX3VXOxLjIYG66dfJTVQ== +please-upgrade-node@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942" + integrity sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg== dependencies: semver-compare "^1.0.0" @@ -8178,30 +8165,29 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7, rc@^1.2.8: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-dom@^16.8.6: - version "16.8.6" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f" - integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA== +react-dom@^16.9.0: + version "16.9.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962" + integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.13.6" + scheduler "^0.15.0" react-is@^16.8.1: version "16.8.6" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== -react@^16.8.6: - version "16.8.6" - resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe" - integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw== +react@^16.9.0: + version "16.9.0" + resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa" + integrity sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.13.6" read-cmd-shim@^1.0.1, read-cmd-shim@~1.0.1: version "1.0.1" @@ -8854,10 +8840,10 @@ sax@^1.2.4: resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== -scheduler@^0.13.6: - version "0.13.6" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889" - integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ== +scheduler@^0.15.0: + version "0.15.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.15.0.tgz#6bfcf80ff850b280fed4aeecc6513bc0b4f17f8e" + integrity sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" From 67795ac8fe1dd20f9eaa57e500b2de2c4d3d300f Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Fri, 9 Aug 2019 13:54:27 -0400 Subject: [PATCH 07/18] docs: move default values to option declarations also add parens to methods --- README.md | 247 ++++++++++++++----------------------------------- src/panzoom.ts | 1 + src/types.ts | 11 ++- tasks/docs.js | 16 +++- 4 files changed, 94 insertions(+), 181 deletions(-) diff --git a/README.md b/README.md index a9adb047..4be59f9a 100644 --- a/README.md +++ b/README.md @@ -110,11 +110,9 @@ Alternatively, call `event.stopImmediatePropagation()` in an event handler on th ## Documentation -### Default export - ▸ **Panzoom**(`elem`: `HTMLElement` | `SVGElement`, `options?`: [PanzoomOptions](#PanzoomOptions)): _[PanzoomObject](#PanzoomObject)_ -_Defined in [panzoom.ts:38](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L38)_ +_Defined in [panzoom.ts:39](https://github.com/timmywil/panzoom/blob/643953f/src/panzoom.ts#L39)_ **Parameters:** @@ -125,112 +123,6 @@ _Defined in [panzoom.ts:38](https://github.com/timmywil/panzoom/blob/85561c6/src **Returns:** _[PanzoomObject](#PanzoomObject)_ -### `Const` defaultOptions - -_Defined in [panzoom.ts:18](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L18)_ - -### animate - -• **animate**: _false_ = false - -_Defined in [panzoom.ts:19](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L19)_ - -### clickableClass - -• **clickableClass**: _string_ = "clickable" - -_Defined in [panzoom.ts:20](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L20)_ - -### cursor - -• **cursor**: _string_ = "move" - -_Defined in [panzoom.ts:21](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L21)_ - -### disablePan - -• **disablePan**: _false_ = false - -_Defined in [panzoom.ts:22](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L22)_ - -### disableXAxis - -• **disableXAxis**: _false_ = false - -_Defined in [panzoom.ts:24](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L24)_ - -### disableYAxis - -• **disableYAxis**: _false_ = false - -_Defined in [panzoom.ts:25](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L25)_ - -### disableZoom - -• **disableZoom**: _false_ = false - -_Defined in [panzoom.ts:23](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L23)_ - -### duration - -• **duration**: _number_ = 200 - -_Defined in [panzoom.ts:26](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L26)_ - -### easing - -• **easing**: _string_ = "ease-in-out" - -_Defined in [panzoom.ts:27](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L27)_ - -### maxScale - -• **maxScale**: _number_ = 4 - -_Defined in [panzoom.ts:28](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L28)_ - -### minScale - -• **minScale**: _number_ = 0.125 - -_Defined in [panzoom.ts:29](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L29)_ - -### relative - -• **relative**: _false_ = false - -_Defined in [panzoom.ts:30](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L30)_ - -### setTransform - -• **setTransform**: _`setTransform`_ - -_Defined in [panzoom.ts:31](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L31)_ - -### startScale - -• **startScale**: _number_ = 1 - -_Defined in [panzoom.ts:34](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L34)_ - -### startX - -• **startX**: _number_ = 0 - -_Defined in [panzoom.ts:32](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L32)_ - -### startY - -• **startY**: _number_ = 0 - -_Defined in [panzoom.ts:33](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L33)_ - -### step - -• **step**: _number_ = 0.3 - -_Defined in [panzoom.ts:35](https://github.com/timmywil/panzoom/blob/85561c6/src/panzoom.ts#L35)_ - ## `PanzoomOptions` Includes `MiscOptions`, `PanOptions`, and `ZoomOptions` @@ -241,9 +133,9 @@ Includes `MiscOptions`, `PanOptions`, and `ZoomOptions` ### animate -• **animate**? : _boolean_ +• **animate**? : _boolean_ (Default: **false**) -_Defined in [types.ts:5](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L5)_ +_Defined in [types.ts:5](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L5)_ Whether to animate transitions @@ -251,9 +143,9 @@ Whether to animate transitions ### clickableClass -• **clickableClass**? : _string_ +• **clickableClass**? : _string_ (Default: **"clickable"**) -_Defined in [types.ts:10](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L10)_ +_Defined in [types.ts:10](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L10)_ Add this class to any element within the panzoom element that you want to be clickable and not initiate the drag @@ -262,9 +154,9 @@ that you want to be clickable and not initiate the drag ### duration -• **duration**? : _number_ +• **duration**? : _number_ (Default: **200**) -_Defined in [types.ts:12](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L12)_ +_Defined in [types.ts:12](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L12)_ Duration of the transition (ms) @@ -272,9 +164,9 @@ Duration of the transition (ms) ### easing -• **easing**? : _string_ +• **easing**? : _string_ (Default: **"ease-in-out"**) -_Defined in [types.ts:14](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L14)_ +_Defined in [types.ts:14](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L14)_ CSS Easing used for transitions @@ -284,7 +176,7 @@ CSS Easing used for transitions • **origin**? : _string_ -_Defined in [types.ts:28](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L28)_ +_Defined in [types.ts:28](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L28)_ **Change this at your own risk.** The `transform-origin` is the origin from which transforms are applied. @@ -304,12 +196,13 @@ And again, changing this for SVG in IE doesn't work at all. • **setTransform**? : _`setTransform`_ -_Defined in [types.ts:45](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L45)_ +_Defined in [types.ts:46](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L46)_ 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 @@ -329,27 +222,31 @@ Panzoom(elem, { ### startScale -• **startScale**? : _number_ +• **startScale**? : _number_ (Default: **1**) -_Defined in [types.ts:49](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L49)_ +_Defined in [types.ts:52](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L52)_ + +Scale used to set the beginning transform --- ### startX -• **startX**? : _number_ +• **startX**? : _number_ (Default: **0**) -_Defined in [types.ts:47](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L47)_ +_Defined in [types.ts:48](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L48)_ -Values used to set the beginning transform +X Value used to set the beginning transform --- ### startY -• **startY**? : _number_ +• **startY**? : _number_ (Default: **0**) + +_Defined in [types.ts:50](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L50)_ -_Defined in [types.ts:48](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L48)_ +Y Value used to set the beginning transform --- @@ -361,7 +258,7 @@ Includes `MiscOptions` • **contain**? : _"inside" | "outside"_ -_Defined in [types.ts:66](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L66)_ +_Defined in [types.ts:69](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L69)_ Contain the panzoom element either inside or outside the parent. @@ -377,9 +274,9 @@ empty space around the element will be shown. ### cursor -• **cursor**? : _string_ +• **cursor**? : _string_ (Default: **"move"**) -_Defined in [types.ts:68](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L68)_ +_Defined in [types.ts:71](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L71)_ The cursor style to set on the panzoom element @@ -387,9 +284,9 @@ The cursor style to set on the panzoom element ### disablePan -• **disablePan**? : _boolean_ +• **disablePan**? : _boolean_ (Default: **false**) -_Defined in [types.ts:70](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L70)_ +_Defined in [types.ts:73](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L73)_ Disable panning functionality. Note: disablePan also disables focal point zooming @@ -397,9 +294,9 @@ Disable panning functionality. Note: disablePan also disables focal point zoomin ### disableXAxis -• **disableXAxis**? : _boolean_ +• **disableXAxis**? : _boolean_ (Default: **false**) -_Defined in [types.ts:72](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L72)_ +_Defined in [types.ts:75](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L75)_ Pan only on the Y axis @@ -407,9 +304,9 @@ Pan only on the Y axis ### disableYAxis -• **disableYAxis**? : _boolean_ +• **disableYAxis**? : _boolean_ (Default: **false**) -_Defined in [types.ts:74](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L74)_ +_Defined in [types.ts:77](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L77)_ Pan only on the X axis @@ -417,9 +314,9 @@ Pan only on the X axis ### panOnlyWhenZoomed -• **panOnlyWhenZoomed**? : _boolean_ +• **panOnlyWhenZoomed**? : _boolean_ (Default: **false**) -_Defined in [types.ts:78](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L78)_ +_Defined in [types.ts:81](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L81)_ Disable panning while the scale is equal to the starting value @@ -427,9 +324,9 @@ Disable panning while the scale is equal to the starting value ### relative -• **relative**? : _boolean_ +• **relative**? : _boolean_ (Default: **false**) -_Defined in [types.ts:76](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L76)_ +_Defined in [types.ts:79](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L79)_ When passing x and y values to .pan(), treat the values as relative to their current values @@ -441,9 +338,9 @@ Includes `MiscOptions` ### disableZoom -• **disableZoom**? : _boolean_ +• **disableZoom**? : _boolean_ (Default: **false**) -_Defined in [types.ts:83](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L83)_ +_Defined in [types.ts:86](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L86)_ Disable zooming functionality @@ -453,7 +350,7 @@ Disable zooming functionality • **focal**? : _object_ -_Defined in [types.ts:90](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L90)_ +_Defined in [types.ts:93](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L93)_ Zoom to the given point on the panzoom element. This point is expected to be relative to @@ -470,9 +367,9 @@ to the parent dimensions. ### maxScale -• **maxScale**? : _number_ +• **maxScale**? : _number_ (Default: **4**) -_Defined in [types.ts:94](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L94)_ +_Defined in [types.ts:97](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L97)_ The maximum scale when zooming @@ -480,9 +377,9 @@ The maximum scale when zooming ### minScale -• **minScale**? : _number_ +• **minScale**? : _number_ (Default: **0.125**) -_Defined in [types.ts:92](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L92)_ +_Defined in [types.ts:95](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L95)_ The minimum scale when zooming @@ -490,9 +387,9 @@ The minimum scale when zooming ### step -• **step**? : _number_ +• **step**? : _number_ (Default: **0.3**) -_Defined in [types.ts:96](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L96)_ +_Defined in [types.ts:99](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L99)_ The step affects zoom calculation when zooming with a mouse wheel, when pinch zooming, or when using zoomIn/zoomOut @@ -502,11 +399,11 @@ The step affects zoom calculation when zooming with a mouse wheel, when pinch zo These methods are available after initializing Panzoom -### getOptions +### getOptions() • **getOptions**: _function_ -_Defined in [types.ts:117](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L117)_ +_Defined in [types.ts:120](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L120)_ Returns a _copy_ of the current options object @@ -516,11 +413,11 @@ Returns a _copy_ of the current options object --- -### getPan +### getPan() • **getPan**: _function_ -_Defined in [types.ts:113](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L113)_ +_Defined in [types.ts:116](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L116)_ Get the current x/y translation @@ -534,11 +431,11 @@ Get the current x/y translation --- -### getScale +### getScale() • **getScale**: _function_ -_Defined in [types.ts:115](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L115)_ +_Defined in [types.ts:118](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L118)_ Get the current scale @@ -548,11 +445,11 @@ Get the current scale --- -### pan +### pan() • **pan**: _function_ -_Defined in [types.ts:128](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L128)_ +_Defined in [types.ts:131](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L131)_ Pan the Panzoom element to the given x and y coordinates @@ -577,11 +474,11 @@ panzoom.pan(10, 10, { relative: true }) --- -### reset +### reset() • **reset**: _function_ -_Defined in [types.ts:134](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L134)_ +_Defined in [types.ts:137](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L137)_ Reset the pan and zoom to startX, startY, and startScale. Animates by default, ignoring the global option. @@ -599,11 +496,11 @@ Pass `{ animate: false }` to override. --- -### setOptions +### setOptions() • **setOptions**: _function_ -_Defined in [types.ts:136](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L136)_ +_Defined in [types.ts:139](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L139)_ Change options for the Panzoom instance @@ -619,21 +516,21 @@ Change options for the Panzoom instance --- -### setStyle +### setStyle() • **setStyle**: _`setStyle`_ -_Defined in [types.ts:138](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L138)_ +_Defined in [types.ts:141](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L141)_ A convenience method for setting prefixed styles on the Panzoom element --- -### zoom +### zoom() • **zoom**: _function_ -_Defined in [types.ts:147](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L147)_ +_Defined in [types.ts:150](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L150)_ Zoom the Panzoom element to the given scale @@ -655,11 +552,11 @@ panzoom.zoom(2.2, { animate: true }) --- -### zoomIn +### zoomIn() • **zoomIn**: _function_ -_Defined in [types.ts:153](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L153)_ +_Defined in [types.ts:156](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L156)_ Zoom in using the predetermined increment set in options. Animates by default, ignoring the global option. @@ -677,11 +574,11 @@ Pass `{ animate: false }` to override. --- -### zoomOut +### zoomOut() • **zoomOut**: _function_ -_Defined in [types.ts:159](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L159)_ +_Defined in [types.ts:162](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L162)_ Zoom out using the predetermined increment set in options. Animates by default, ignoring the global option. @@ -699,11 +596,11 @@ Pass `{ animate: false }` to override. --- -### zoomToPoint +### zoomToPoint() • **zoomToPoint**: _function_ -_Defined in [types.ts:166](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L166)_ +_Defined in [types.ts:169](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L169)_ Zoom the Panzoom element to a focal point using the given pointer/touch/mouse event or constructed point. @@ -729,11 +626,11 @@ the same way as a pointer event on the Panzoom element. --- -### zoomWithWheel +### zoomWithWheel() • **zoomWithWheel**: _function_ -_Defined in [types.ts:195](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L195)_ +_Defined in [types.ts:198](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L198)_ Zoom the Panzoom element to a focal point using the given WheelEvent @@ -777,7 +674,7 @@ elem.parentElement.addEventListener('wheel', function(event) { • **scale**: _number_ -_Defined in [types.ts:108](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L108)_ +_Defined in [types.ts:111](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L111)_ --- @@ -785,7 +682,7 @@ _Defined in [types.ts:108](https://github.com/timmywil/panzoom/blob/85561c6/src/ • **x**: _number_ -_Defined in [types.ts:106](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L106)_ +_Defined in [types.ts:109](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L109)_ --- @@ -793,4 +690,4 @@ _Defined in [types.ts:106](https://github.com/timmywil/panzoom/blob/85561c6/src/ • **y**: _number_ -_Defined in [types.ts:107](https://github.com/timmywil/panzoom/blob/85561c6/src/types.ts#L107)_ +_Defined in [types.ts:110](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L110)_ diff --git a/src/panzoom.ts b/src/panzoom.ts index 70312e9f..f3f2fe18 100644 --- a/src/panzoom.ts +++ b/src/panzoom.ts @@ -27,6 +27,7 @@ const defaultOptions: PanzoomOptions = { easing: 'ease-in-out', maxScale: 4, minScale: 0.125, + panOnlyWhenZoomed: false, relative: false, setTransform, startX: 0, diff --git a/src/types.ts b/src/types.ts index de974a56..98ab5374 100644 --- a/src/types.ts +++ b/src/types.ts @@ -31,6 +31,7 @@ interface MiscOptions { * 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 @@ -43,10 +44,12 @@ interface MiscOptions { * ``` */ setTransform?: typeof setTransform - /** Values used to set the beginning transform */ - startX?: number /* Default: 0 */ - startY?: number /* Default: 0 */ - startScale?: number /* Default: 1 */ + /** 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 } diff --git a/tasks/docs.js b/tasks/docs.js index 9d66e43c..2e91564c 100644 --- a/tasks/docs.js +++ b/tasks/docs.js @@ -23,12 +23,18 @@ function redoLinks(data) { ) } -const constructor = redoLinks(read('../docs/modules/_panzoom_.md')) +const [constructor, defaultOptions] = redoLinks(read('../docs/modules/_panzoom_.md')) // Remove unwanted text .replace(/[\w\W]+###\s*Panzoom/, '') .replace('## Object literals\n\n', '') .replace('### ▪ **defaultOptions**: *object*\n\n', '') -data += '\n\n### Default export\n\n' + constructor + .split('### `Const` defaultOptions') +data += constructor +const parsedDefaults = {} +defaultOptions.replace(/\*\*(\w+)\*\*: \*\w+\* = (["\w-\.]+)/g, function(all, key, value) { + parsedDefaults[key] = value + return all +}) const rProperties = /[\w\W]+##\s*Properties/ const rOptional = /`Optional` /g @@ -47,6 +53,10 @@ const panzoomOptions = .replace(rOptional, '') .replace(rProperties, '\n\n---\n\n## `ZoomOptions`\n\nIncludes `MiscOptions`\n\n') data += panzoomOptions + // Add in default values to option descriptions + .replace(/\*\*(\w+)\*\*\??\s*: \*\w+\*/g, function(all, key) { + return parsedDefaults[key] ? `${all} (Default: **${parsedDefaults[key]}**)` : all + }) const panzoomObject = '\n\n---\n\n## `PanzoomObject`\n\nThese methods are available after initializing Panzoom\n\n' + @@ -56,6 +66,8 @@ const panzoomObject = // Type declaration refers to the signature .replace(/Type declaration:/g, 'Signature with return type:') data += panzoomObject + // Add parens to method names + .replace(/([^#])\#\#\#\s*(\w+)/g, '$1### $2()') const currentValues = read('../docs/interfaces/_types_.currentvalues.md') // Remove unwanted text From 6daf7885ee388f2a17bfbfee3543efa54bc4468c Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Fri, 9 Aug 2019 14:16:28 -0400 Subject: [PATCH 08/18] docs(readme): add gzipped size --- README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index 4be59f9a..17d8113d 100644 --- a/README.md +++ b/README.md @@ -10,11 +10,9 @@ Have a look at the [GitHub project](https://github.com/timmywil/panzoom/projects --- -Panzoom is a small library to add panning and zooming functionality to an element. +Panzoom is a small library (<3kb gzipped) to add panning and zooming functionality to an element. Rather than using absolute positioning or setting width and height, Panzoom uses CSS transforms to take advantage of hardware/GPU acceleration in the browser, which means the element can be _anything_: an image, a video, an iframe, a canvas, text, WHATEVER. -panzoom.min.js, included in this repo, is compressed with [uglifyjs](https://github.com/mishoo/UglifyJS). - For common support questions, see [the FAQ](https://github.com/timmywil/panzoom#faq). ## Browser support From 6a4e45070608e9afd5beb84f945205b90e8d13b3 Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Fri, 9 Aug 2019 16:03:31 -0400 Subject: [PATCH 09/18] docs(contributing): minor edits --- .github/CONTRIBUTING.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 0f33f50a..e6913159 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -19,19 +19,20 @@ the expected behavior & use case, where they’ll remain closed until sufficient [e.g. :+1: reactions](https://help.github.com/articles/about-discussions-in-issues-and-pull-requests/), has been [shown by the community](https://github.com/timmywil/panzoom/issues?q=label%3A%22votes+needed%22+sort%3Areactions-%2B1-desc). Before submitting a request, please search for similar ones in the -[closed issues](https://github.com/timmywil/panzoom/issues?q=is%3Aissue+is%3Aclosed+label%3Aenhancement). +[closed issues](https://github.com/timmywil/panzoom/issues?q=is%3Aissue+is%3Aclosed+label%3Afeature). -I got this convention from [lodash](https://github.com/lodash/lodash). It helps keep the issues list as empty as possible. +I got this convention from [lodash](https://github.com/lodash/lodash). It helps keep the open issues list uncluttered. ## Pull Requests -For additions or bug fixes you should only need to modify `panzoom.ts`. Include +For additions or bug fixes you should only need to modify files in `src/`. Include updated unit tests in the `test` directory as part of your pull request. Don’t worry about regenerating the built files or docs. -Before running the unit tests you’ll need to install, `yarn` or `npm i`, -[development dependencies](https://docs.npmjs.com/files/package.json#devdependencies). -Run unit tests from the command-line via `yarn test` or `npm test`. +Before running the unit tests you’ll need to install +[development dependencies](https://docs.npmjs.com/files/package.json#devdependencies) via `yarn` or `npm i`. + +Run the unit tests from the command-line via `yarn test` or `npm test`, or use the `test:watch` script during development. ## Coding Guidelines @@ -110,7 +111,7 @@ First run `yarn start`, then run VS Code Debug with the following config to enab "request": "launch", "name": "Launch Chrome", "url": "http://localhost:8080", - "webRoot": "${workspaceRoot}", + "webRoot": "${workspaceFolder}", "sourceMaps": true } ``` From 983f3becc0e751410b196419d560225695b2716d Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Fri, 9 Aug 2019 16:18:25 -0400 Subject: [PATCH 10/18] docs(contributing): add notes on changing docs and building --- .github/CONTRIBUTING.md | 46 ++++++++++++++++++++++++++--------------- 1 file changed, 29 insertions(+), 17 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index e6913159..ebef401c 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -26,13 +26,37 @@ I got this convention from [lodash](https://github.com/lodash/lodash). It helps ## Pull Requests For additions or bug fixes you should only need to modify files in `src/`. Include -updated unit tests in the `test` directory as part of your pull request. Don’t -worry about regenerating the built files or docs. +updated unit tests in the `test` directory or an updated/added demo in the `demo` directory as part of your pull request. Don’t worry about regenerating the built files. -Before running the unit tests you’ll need to install -[development dependencies](https://docs.npmjs.com/files/package.json#devdependencies) via `yarn` or `npm i`. +## Editing documentation -Run the unit tests from the command-line via `yarn test` or `npm test`, or use the `test:watch` script during development. +### Do not edit below the "Documentation" header in the README + +Edit the comments and type declarations in the `src/` folder. + +The documentation is auto-generated using a combination of [typedoc](https://typedoc.org/) and a hand-rolled script (`tasks/docs.js`). First, typedoc generates markdown from the TypeScript files into the `docs/` folder, which is ignored by git, and then `tasks/docs.js` concatenates those files and cleans them up for presentation in the README. + +## Testing + +Tests are written with [mocha](https://mochajs.org/) and [Node's official assert module](https://nodejs.org/api/assert.html#assert_assert). + +Here are the npm scripts that run tests: + +```bash +$ yarn test # Lints and runs the unit tests +$ yarn test:unit # Runs the unit tests +$ yarn test:watch # Watches files and runs the unit tests on file save +``` + +## Building + +The `dist/` folder is ignored on master and included in releases. To build, first make sure dependencies are installed (`yarn` or `npm i`) and run the following: + +```bash +$ yarn build # or npm run build +``` + +This is usually unnecessary as `yarn start` will rebuild automatically as you change files. ## Coding Guidelines @@ -89,18 +113,6 @@ Run the following after staging files: $ yarn commit ``` -## Testing - -Tests are written with [mocha](https://mochajs.org/) and [Node's official assert module](https://nodejs.org/api/assert.html#assert_assert). - -Here are the npm scripts that run tests: - -```bash -$ yarn test # Lints and runs the unit tests -$ yarn test:unit # Runs the unit tests -$ yarn test:watch # Watches files and runs the unit tests on file save -``` - ## Debugging in VS Code First run `yarn start`, then run VS Code Debug with the following config to enable breakpoints: From e07b2759b78b33a80b5dc83e2a46b37987b7b6d8 Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Fri, 9 Aug 2019 17:26:18 -0400 Subject: [PATCH 11/18] chore: remove old demo HTML --- test/old_demo.html | 1657 -------------------------------------------- 1 file changed, 1657 deletions(-) delete mode 100644 test/old_demo.html diff --git a/test/old_demo.html b/test/old_demo.html deleted file mode 100644 index 4d732eee..00000000 --- a/test/old_demo.html +++ /dev/null @@ -1,1657 +0,0 @@ - - - - Panzoom - - - - - -
-

Panzoom for panning and zooming elements using modern CSS

-
-
-

Panning and zooming

-
-
- -
-
-
- - - - -
- -
-
-
-

Pan only when zoomed

-
-
- -
-
-
- - - - -
- -
-
-
-

Containment within the parent element

-
- -
-
- - - - -
- -
-
-
-

Inverted containment within the parent element (to hide what's behind)

-
- -
-
- - - - -
- - -
-
-
-

- Automatically determine the best containment option based on the panzoom element's relation - to the parent -

-
- -
-
- - - - -
- -
-
-
-

Panning and zooming a rotated element

-
-
- -
-
-
- - - - -
- -
-
-
-

SVG support (move it all!)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
-
-
-

Using the $set option

- -
-
- -
-
- -
-
- -
-
-
- - - - -
- -
-
-
-

Pan only along the X axis (disableYAxis: true)

- -
-
- -
-
-
- - - - -
- -
-
-
-

Pan only along the Y axis (disableXAxis: true)

- -
-
- -
-
-
- - - - -
- -
-
-
-

Use the mousewheel to zoom on a focal point

-
-
- -
-
- -
- - From 1ddd93e09fbb49c517fca606867c1a24cad6b277 Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Fri, 9 Aug 2019 17:41:44 -0400 Subject: [PATCH 12/18] chore: remove reference to old version --- old.js | 1355 -------------------------------------------------------- 1 file changed, 1355 deletions(-) delete mode 100644 old.js diff --git a/old.js b/old.js deleted file mode 100644 index dc3b7f98..00000000 --- a/old.js +++ /dev/null @@ -1,1355 +0,0 @@ -/** - * @license jquery.panzoom.js v@VERSION - * Updated: @DATE - * Add pan and zoom functionality to any element - * Copyright (c) timmy willison - * Released under the MIT license - * https://github.com/timmywil/jquery.panzoom/blob/master/MIT-License.txt - */ - -;(function(global, factory) { - // AMD - if (typeof define === 'function' && define.amd) { - define(['jquery'], function(jQuery) { - return factory(global, jQuery) - }) - // CommonJS/Browserify - } else if (typeof exports === 'object') { - factory(global, require('jquery')) - // Global - } else { - factory(global, global.jQuery) - } -})(typeof window !== 'undefined' ? window : this, function(window, $) { - 'use strict' - - var document = window.document - var datakey = '__pz__' - var slice = Array.prototype.slice - var rIE11 = /trident\/7./i - var supportsInputEvent = (function() { - // IE11 returns a false positive - if (rIE11.test(navigator.userAgent)) { - return false - } - var input = document.createElement('input') - input.setAttribute('oninput', 'return') - return typeof input.oninput === 'function' - })() - - // Regex - var rupper = /([A-Z])/g - var rsvg = /^http:[\w\.\/]+svg$/ - - var floating = '(\\-?\\d[\\d\\.e-]*)' - var commaSpace = '\\,?\\s*' - var rmatrix = new RegExp( - '^matrix\\(' + - floating + - commaSpace + - floating + - commaSpace + - floating + - commaSpace + - floating + - commaSpace + - floating + - commaSpace + - floating + - '\\)$' - ) - - /** - * Utility for determining transform matrix equality - * Checks backwards to test translation first - * @param {Array} first - * @param {Array} second - */ - function matrixEquals(first, second) { - var i = first.length - while (--i) { - if (Math.round(+first[i]) !== Math.round(+second[i])) { - return false - } - } - return true - } - - /** - * Creates the options object for reset functions - * @param {Boolean|Object} opts See reset methods - * @returns {Object} Returns the newly-created options object - */ - function createResetOptions(opts) { - var options = { range: true, animate: true } - if (typeof opts === 'boolean') { - options.animate = opts - } else { - $.extend(options, opts) - } - return options - } - - /** - * Represent a transformation matrix with a 3x3 matrix for calculations - * Matrix functions adapted from Louis Remi's jQuery.transform (https://github.com/louisremi/jquery.transform.js) - * @param {Array|Number} a An array of six values representing a 2d transformation matrix - */ - function Matrix(a, b, c, d, e, f, g, h, i) { - if ($.type(a) === 'array') { - this.elements = [+a[0], +a[2], +a[4], +a[1], +a[3], +a[5], 0, 0, 1] - } else { - this.elements = [a, b, c, d, e, f, g || 0, h || 0, i || 1] - } - } - - Matrix.prototype = { - /** - * Multiply a 3x3 matrix by a similar matrix or a vector - * @param {Matrix|Vector} matrix - * @return {Matrix|Vector} Returns a vector if multiplying by a vector - */ - x: function(matrix) { - var isVector = matrix instanceof Vector - - var a = this.elements, - b = matrix.elements - - if (isVector && b.length === 3) { - // b is actually a vector - return new Vector( - a[0] * b[0] + a[1] * b[1] + a[2] * b[2], - a[3] * b[0] + a[4] * b[1] + a[5] * b[2], - a[6] * b[0] + a[7] * b[1] + a[8] * b[2] - ) - } else if (b.length === a.length) { - // b is a 3x3 matrix - return new Matrix( - a[0] * b[0] + a[1] * b[3] + a[2] * b[6], - a[0] * b[1] + a[1] * b[4] + a[2] * b[7], - a[0] * b[2] + a[1] * b[5] + a[2] * b[8], - - a[3] * b[0] + a[4] * b[3] + a[5] * b[6], - a[3] * b[1] + a[4] * b[4] + a[5] * b[7], - a[3] * b[2] + a[4] * b[5] + a[5] * b[8], - - a[6] * b[0] + a[7] * b[3] + a[8] * b[6], - a[6] * b[1] + a[7] * b[4] + a[8] * b[7], - a[6] * b[2] + a[7] * b[5] + a[8] * b[8] - ) - } - return false // fail - }, - /** - * Generates an inverse of the current matrix - * @returns {Matrix} - */ - inverse: function() { - var d = 1 / this.determinant(), - a = this.elements - return new Matrix( - d * (a[8] * a[4] - a[7] * a[5]), - d * -(a[8] * a[1] - a[7] * a[2]), - d * (a[5] * a[1] - a[4] * a[2]), - - d * -(a[8] * a[3] - a[6] * a[5]), - d * (a[8] * a[0] - a[6] * a[2]), - d * -(a[5] * a[0] - a[3] * a[2]), - - d * (a[7] * a[3] - a[6] * a[4]), - d * -(a[7] * a[0] - a[6] * a[1]), - d * (a[4] * a[0] - a[3] * a[1]) - ) - }, - /** - * Calculates the determinant of the current matrix - * @returns {Number} - */ - determinant: function() { - var a = this.elements - return ( - a[0] * (a[8] * a[4] - a[7] * a[5]) - - a[3] * (a[8] * a[1] - a[7] * a[2]) + - a[6] * (a[5] * a[1] - a[4] * a[2]) - ) - } - } - - /** - * Create a vector containing three values - */ - function Vector(x, y, z) { - this.elements = [x, y, z] - } - - /** - * Get the element at zero-indexed index i - * @param {Number} i - */ - Vector.prototype.e = Matrix.prototype.e = function(i) { - return this.elements[i] - } - - /** - * Create a Panzoom object for a given element - * @constructor - * @param {Element} elem - Element to use pan and zoom - * @param {Object} [options] - An object literal containing options to override default options - * (See Panzoom.defaults for ones not listed below) - * @param {jQuery} [options.$zoomIn] - zoom in buttons/links collection (you can also bind these yourself - * e.g. $button.on('click', function(e) { e.preventDefault(); $elem.panzoom('zoomIn'); });) - * @param {jQuery} [options.$zoomOut] - zoom out buttons/links collection on which to bind zoomOut - * @param {jQuery} [options.$zoomRange] - zoom in/out with this range control - * @param {jQuery} [options.$reset] - Reset buttons/links collection on which to bind the reset method - * @param {Function} [options.on[Start|Change|Zoom|Pan|End|Reset] - Optional callbacks for panzoom events - */ - function Panzoom(elem, options) { - // Allow instantiation without `new` keyword - if (!(this instanceof Panzoom)) { - return new Panzoom(elem, options) - } - - // Sanity checks - if (elem.nodeType !== 1) { - $.error('Panzoom called on non-Element node') - } - if (!$.contains(document, elem)) { - $.error('Panzoom element must be attached to the document') - } - - // Don't remake - var d = $.data(elem, datakey) - if (d) { - return d - } - - // Extend default with given object literal - // Each instance gets its own options - this.options = options = $.extend({}, Panzoom.defaults, options) - this.elem = elem - var $elem = (this.$elem = $(elem)) - this.$set = options.$set && options.$set.length ? options.$set : $elem - this.$doc = $(elem.ownerDocument || document) - this.$parent = $elem.parent() - this.parent = this.$parent[0] - - // This is SVG if the namespace is SVG - // However, while elements are SVG, we want to treat those like other elements - this.isSVG = rsvg.test(elem.namespaceURI) && elem.nodeName.toLowerCase() !== 'svg' - - this.panning = false - - // Save the original transform value - // Save the prefixed transform style key - // Set the starting transform - this._buildTransform() - - // Build the appropriately-prefixed transform style property name - // De-camelcase - this._transform = $.cssProps.transform - ? $.cssProps.transform.replace(rupper, '-$1').toLowerCase() - : 'transform' - - // Build the transition value - this._buildTransition() - - // Build containment dimensions - this.resetDimensions() - - // Add zoom and reset buttons to `this` - var $empty = $() - var self = this - $.each(['$zoomIn', '$zoomOut', '$zoomRange', '$reset'], function(i, name) { - self[name] = options[name] || $empty - }) - - this.enable() - - this.scale = this.getMatrix()[0] - this._checkPanWhenZoomed() - - // Save the instance - $.data(elem, datakey, this) - } - - // Attach regex for possible use (immutable) - Panzoom.rmatrix = rmatrix - - Panzoom.defaults = { - // Should always be non-empty - // Used to bind jQuery events without collisions - // A guid is not added here as different instantiations/versions of panzoom - // on the same element is not supported, so don't do it. - eventNamespace: '.panzoom', - - // Whether or not to transition the scale - transition: true, - - // Default cursor style for the element - cursor: 'move', - - // There may be some use cases for zooming without panning or vice versa - disablePan: false, - disableZoom: false, - - // Pan only on the X or Y axes - disableXAxis: false, - disableYAxis: false, - - // Set whether you'd like to pan on left (1), middle (2), or right click (3) - which: 1, - - // The increment at which to zoom - // Should be a number greater than 0 - increment: 0.3, - - // When no scale is passed, this option tells - // the `zoom` method to increment - // the scale *linearly* based on the increment option. - // This often ends up looking like very little happened at larger zoom levels. - // The default is to multiply/divide the scale based on the increment. - linearZoom: false, - - // Pan only when the scale is greater than minScale - panOnlyWhenZoomed: false, - - // min and max zoom scales - minScale: 0.3, - maxScale: 6, - - // The default step for the range input - // Precendence: default < HTML attribute < option setting - rangeStep: 0.05, - - // Animation duration (ms) - duration: 200, - // CSS easing used for scale transition - easing: 'ease-in-out', - - // Indicate that the element should be contained within it's parent when panning - // Note: this does not affect zooming outside of the parent - // Set this value to 'invert' to only allow panning outside of the parent element (basically the opposite of the normal use of contain) - // 'invert' is useful for a large panzoom element where you don't want to show anything behind it - contain: false - } - - Panzoom.prototype = { - constructor: Panzoom, - - /** - * @returns {Panzoom} Returns the instance - */ - instance: function() { - return this - }, - - /** - * Enable or re-enable the panzoom instance - */ - enable: function() { - // Unbind first - this._initStyle() - this._bind() - this.disabled = false - }, - - /** - * Disable panzoom - */ - disable: function() { - this.disabled = true - this._resetStyle() - this._unbind() - }, - - /** - * @returns {Boolean} Returns whether the current panzoom instance is disabled - */ - isDisabled: function() { - return this.disabled - }, - - /** - * Destroy the panzoom instance - */ - destroy: function() { - this.disable() - $.removeData(this.elem, datakey) - }, - - /** - * Builds the restricing dimensions from the containment element - * Also used with focal points - * Call this method whenever the dimensions of the element or parent are changed - */ - resetDimensions: function() { - // Reset container properties - this.container = this.parent.getBoundingClientRect() - - // Set element properties - var elem = this.elem - // getBoundingClientRect() works with SVG, offsetWidth does not - var dims = elem.getBoundingClientRect() - var absScale = Math.abs(this.scale) - this.dimensions = { - width: dims.width, - height: dims.height, - left: $.css(elem, 'left', true) || 0, - top: $.css(elem, 'top', true) || 0, - // Borders and margins are scaled - border: { - top: $.css(elem, 'borderTopWidth', true) * absScale || 0, - bottom: $.css(elem, 'borderBottomWidth', true) * absScale || 0, - left: $.css(elem, 'borderLeftWidth', true) * absScale || 0, - right: $.css(elem, 'borderRightWidth', true) * absScale || 0 - }, - margin: { - top: $.css(elem, 'marginTop', true) * absScale || 0, - left: $.css(elem, 'marginLeft', true) * absScale || 0 - } - } - }, - - /** - * Return the element to it's original transform matrix - * @param {Boolean} [options] If a boolean is passed, animate the reset (default: true). If an options object is passed, simply pass that along to setMatrix. - * @param {Boolean} [options.silent] Silence the reset event - */ - reset: function(options) { - options = createResetOptions(options) - // Reset the transform to its original value - var matrix = this.setMatrix(this._origTransform, options) - if (!options.silent) { - this._trigger('reset', matrix) - } - }, - - /** - * Only resets zoom level - * @param {Boolean|Object} [options] Whether to animate the reset (default: true) or an object of options to pass to zoom() - */ - resetZoom: function(options) { - options = createResetOptions(options) - var origMatrix = this.getMatrix(this._origTransform) - options.dValue = origMatrix[3] - this.zoom(origMatrix[0], options) - }, - - /** - * Only reset panning - * @param {Boolean|Object} [options] Whether to animate the reset (default: true) or an object of options to pass to pan() - */ - resetPan: function(options) { - var origMatrix = this.getMatrix(this._origTransform) - this.pan(origMatrix[4], origMatrix[5], createResetOptions(options)) - }, - - /** - * Sets a transform on the $set - * For SVG, the style attribute takes precedence - * and allows us to animate - * @param {String} transform - */ - setTransform: function(transform) { - var $set = this.$set - var i = $set.length - while (i--) { - $.style($set[i], 'transform', transform) - - // Support IE9-11, Edge 13-14+ - // Set attribute alongside style attribute - // since IE and Edge do not respect style settings on SVG - // See https://css-tricks.com/transforms-on-svg-elements/ - if (this.isSVG) { - $set[i].setAttribute('transform', transform) - } - } - }, - - /** - * Retrieving the transform is different for SVG - * (unless a style transform is already present) - * Uses the $set collection for retrieving the transform - * @param {String} [transform] Pass in an transform value (like 'scale(1.1)') - * to have it formatted into matrix format for use by Panzoom - * @returns {String} Returns the current transform value of the element - */ - getTransform: function(transform) { - var $set = this.$set - var transformElem = $set[0] - if (transform) { - this.setTransform(transform) - } else { - // IE and Edge still set the transform style properly - // They just don't render it on SVG - // So we get a correct value here - transform = $.style(transformElem, 'transform') - - if (this.isSVG && (!transform || transform === 'none')) { - transform = $.attr(transformElem, 'transform') || 'none' - } - } - - // Convert any transforms set by the user to matrix format - // by setting to computed - if (transform !== 'none' && !rmatrix.test(transform)) { - // Get computed and set for next time - this.setTransform((transform = $.css(transformElem, 'transform'))) - } - - return transform || 'none' - }, - - /** - * Retrieve the current transform matrix for $elem (or turn a transform into it's array values) - * @param {String} [transform] matrix-formatted transform value - * @returns {Array} Returns the current transform matrix split up into it's parts, or a default matrix - */ - getMatrix: function(transform) { - var matrix = rmatrix.exec(transform || this.getTransform()) - if (matrix) { - matrix.shift() - } - return matrix || [1, 0, 0, 1, 0, 0] - }, - - /** - * Get the current scale. - * @param {String} [transform] matrix-formatted transform value - * @returns {Number} Current scale relative to the initial scale (height / width = 1) - */ - getScale: function(matrix) { - return Math.sqrt(Math.pow(matrix[0], 2) + Math.pow(matrix[1], 2)) - }, - - /** - * Given a matrix object, quickly set the current matrix of the element - * @param {Array|String} matrix - * @param {Object} [options] - * @param {Boolean|String} [options.animate] Whether to animate the transform change, or 'skip' indicating that it is unnecessary to set - * @param {Boolean} [options.contain] Override the global contain option - * @param {Boolean} [options.range] If true, $zoomRange's value will be updated. - * @param {Boolean} [options.silent] If true, the change event will not be triggered - * @returns {Array} Returns the newly-set matrix - */ - setMatrix: function(matrix, options) { - if (this.disabled) { - return - } - if (!options) { - options = {} - } - // Convert to array - if (typeof matrix === 'string') { - matrix = this.getMatrix(matrix) - } - var scale = this.getScale(matrix) - var contain = typeof options.contain !== 'undefined' ? options.contain : this.options.contain - - // Apply containment - if (contain) { - var dims = options.dims - if (!dims) { - this.resetDimensions() - dims = this.dimensions - } - var spaceWLeft, spaceWRight, scaleDiff - var container = this.container - var width = dims.width - var height = dims.height - var conWidth = container.width - var conHeight = container.height - var zoomAspectW = conWidth / width - var zoomAspectH = conHeight / height - - // If the element is not naturally centered, - // assume full space right - if ( - this.$parent.css('textAlign') !== 'center' || - $.css(this.elem, 'display') !== 'inline' - ) { - // offsetWidth gets us the width without the transform - scaleDiff = (width - this.elem.offsetWidth) / 2 - spaceWLeft = scaleDiff - dims.border.left - spaceWRight = width - conWidth - scaleDiff + dims.border.right - } else { - spaceWLeft = spaceWRight = (width - conWidth) / 2 - } - var spaceHTop = (height - conHeight) / 2 + dims.border.top - var spaceHBottom = (height - conHeight) / 2 - dims.border.top - dims.border.bottom - - if (contain === 'invert' || (contain === 'automatic' && zoomAspectW < 1.01)) { - matrix[4] = Math.max(Math.min(matrix[4], spaceWLeft - dims.border.left), -spaceWRight) - } else { - matrix[4] = Math.min(Math.max(matrix[4], spaceWLeft), -spaceWRight) - } - - if (contain === 'invert' || (contain === 'automatic' && zoomAspectH < 1.01)) { - matrix[5] = Math.max(Math.min(matrix[5], spaceHTop - dims.border.top), -spaceHBottom) - } else { - matrix[5] = Math.min(Math.max(matrix[5], spaceHTop), -spaceHBottom) - } - } - - // Animate - if (options.animate !== 'skip') { - // Set transition - this.transition(!options.animate) - } - - // Update range element - if (options.range) { - this.$zoomRange.val(scale) - } - - // Set the matrix on this.$set - if (this.options.disableXAxis || this.options.disableYAxis) { - var originalMatrix = this.getMatrix() - if (this.options.disableXAxis) { - matrix[4] = originalMatrix[4] - } - if (this.options.disableYAxis) { - matrix[5] = originalMatrix[5] - } - } - this.setTransform('matrix(' + matrix.join(',') + ')') - - this.scale = scale - - // Disable/enable panning if zooming is at minimum and panOnlyWhenZoomed is true - this._checkPanWhenZoomed(scale) - - if (!options.silent) { - this._trigger('change', matrix) - } - - return matrix - }, - - /** - * @returns {Boolean} Returns whether the panzoom element is currently being dragged - */ - isPanning: function() { - return this.panning - }, - - /** - * Apply the current transition to the element, if allowed - * @param {Boolean} [off] Indicates that the transition should be turned off - */ - transition: function(off) { - if (!this._transition) { - return - } - var transition = off || !this.options.transition ? 'none' : this._transition - var $set = this.$set - var i = $set.length - while (i--) { - // Avoid reflows when zooming - if ($.style($set[i], 'transition') !== transition) { - $.style($set[i], 'transition', transition) - } - } - }, - - /** - * Pan the element to the specified translation X and Y - * Note: this is not the same as setting jQuery#offset() or jQuery#position() - * @param {Number} x - * @param {Number} y - * @param {Object} [options] These options are passed along to setMatrix - * @param {Array} [options.matrix] The matrix being manipulated (if already known so it doesn't have to be retrieved again) - * @param {Boolean} [options.silent] Silence the pan event. Note that this will also silence the setMatrix change event. - * @param {Boolean} [options.relative] Make the x and y values relative to the existing matrix - */ - pan: function(x, y, options) { - if (this.options.disablePan) { - return - } - if (!options) { - options = {} - } - var matrix = options.matrix - if (!matrix) { - matrix = this.getMatrix() - } - // Cast existing matrix values to numbers - if (options.relative) { - x += +matrix[4] - y += +matrix[5] - } - matrix[4] = x - matrix[5] = y - this.setMatrix(matrix, options) - if (!options.silent) { - this._trigger('pan', matrix[4], matrix[5]) - } - }, - - /** - * Zoom in/out the element using the scale properties of a transform matrix - * @param {Number|Boolean} [scale] The scale to which to zoom or a boolean indicating to transition a zoom out - * @param {Object} [opts] All global options can be overwritten by this options object. For example, override the default increment. - * @param {Boolean} [opts.noSetRange] Specify that the method should not set the $zoomRange value (as is the case when $zoomRange is calling zoom on change) - * @param {jQuery.Event|Object} [opts.focal] A focal point on the panzoom element on which to zoom. - * If an object, set the clientX and clientY properties to the position relative to the parent - * @param {Boolean} [opts.animate] Whether to animate the zoom (defaults to true if scale is not a number, false otherwise) - * @param {Boolean} [opts.silent] Silence the zoom event - * @param {Array} [opts.matrix] Optionally pass the current matrix so it doesn't need to be retrieved - * @param {Number} [opts.dValue] Think of a transform matrix as four values a, b, c, d - * where a/d are the horizontal/vertical scale values and b/c are the skew values - * (5 and 6 of matrix array are the tx/ty transform values). - * Normally, the scale is set to both the a and d values of the matrix. - * This option allows you to specify a different d value for the zoom. - * For instance, to flip vertically, you could set -1 as the dValue. - */ - zoom: function(scale, opts) { - // Shuffle arguments - if (typeof scale === 'object') { - opts = scale - scale = null - } else if (!opts) { - opts = {} - } - var options = $.extend({}, this.options, opts) - // Check if disabled - if (options.disableZoom) { - return - } - var animate = false - var matrix = options.matrix || this.getMatrix() - var surfaceM = new Matrix(matrix) - var startScale = this.getScale(matrix) - - // Calculate zoom based on increment - if (typeof scale !== 'number') { - if (options.linearZoom) { - scale = 1 + (options.increment * (scale ? -1 : 1)) / startScale - } else { - scale = scale ? 1 / (1 + options.increment) : 1 + options.increment - } - animate = true - } else { - scale = 1 / startScale - } - - // Constrain scale - scale = Math.max( - Math.min(scale, options.maxScale / startScale), - options.minScale / startScale - ) - var m = surfaceM.x( - new Matrix( - scale, - 0, - 0, - 0, - typeof options.dValue === 'number' ? options.dValue / startScale : scale, - 0 - ) - ) - - // Calculate focal point based on scale - var focal = options.focal - if (focal && !options.disablePan) { - // Adapted from code by Florian Günther - // https://github.com/florianguenther/zui53 - this.resetDimensions() - var dims = (options.dims = this.dimensions) - var clientX = focal.clientX - var clientY = focal.clientY - - // Adjust the focal point for transform-origin 50% 50% - // SVG elements have a transform origin of 0 0 - if (!this.isSVG) { - clientX -= dims.width / startScale / 2 - clientY -= dims.height / startScale / 2 - } - - var clientV = new Vector(clientX, clientY, 1) - // Supply an offset manually if necessary - var o = this.parentOffset || this.$parent.offset() - var offsetM = new Matrix( - 1, - 0, - o.left - this.$doc.scrollLeft(), - 0, - 1, - o.top - this.$doc.scrollTop() - ) - var surfaceV = surfaceM.inverse().x(offsetM.inverse().x(clientV)) - surfaceM = surfaceM.x(new Matrix([scale, 0, 0, scale, 0, 0])) - clientV = offsetM.x(surfaceM.x(surfaceV)) - matrix[4] = +matrix[4] + (clientX - clientV.e(0)) - matrix[5] = +matrix[5] + (clientY - clientV.e(1)) - } - - // Set the scale - matrix[0] = m.e(0) - matrix[1] = m.e(3) - matrix[2] = m.e(1) - matrix[3] = m.e(4) - - // Calling zoom may still pan the element - this.setMatrix(matrix, { - animate: typeof options.animate !== 'undefined' ? options.animate : animate, - // Set the zoomRange value - range: !options.noSetRange - }) - - // Trigger zoom event - if (!options.silent) { - this._trigger('zoom', scale, options) - } - }, - - /** - * Get/set option on an existing instance - * @returns {Array|undefined} If getting, returns an array of all values - * on each instance for a given key. If setting, continue chaining by returning undefined. - */ - option: function(key, value) { - var options - if (!key) { - // Avoids returning direct reference - return $.extend({}, this.options) - } - - if (typeof key === 'string') { - if (arguments.length === 1) { - return this.options[key] !== undefined ? this.options[key] : null - } - options = {} - options[key] = value - } else { - options = key - } - - this._setOptions(options) - }, - - /** - * Internally sets options - * @param {Object} options - An object literal of options to set - * @private - */ - _setOptions: function(options) { - $.each( - options, - $.proxy(function(key, value) { - switch (key) { - case 'disablePan': - this._resetStyle() - /* falls through */ - case '$zoomIn': - case '$zoomOut': - case '$zoomRange': - case '$reset': - case 'disableZoom': - case 'onStart': - case 'onChange': - case 'onZoom': - case 'onPan': - case 'onEnd': - case 'onReset': - case 'eventNamespace': - this._unbind() - } - this.options[key] = value - switch (key) { - case 'disablePan': - this._initStyle() - /* falls through */ - case '$zoomIn': - case '$zoomOut': - case '$zoomRange': - case '$reset': - // Set these on the instance - this[key] = value - /* falls through */ - case 'disableZoom': - case 'onStart': - case 'onChange': - case 'onZoom': - case 'onPan': - case 'onEnd': - case 'onReset': - case 'eventNamespace': - this._bind() - break - case 'cursor': - $.style(this.elem, 'cursor', value) - break - case 'minScale': - this.$zoomRange.attr('min', value) - break - case 'maxScale': - this.$zoomRange.attr('max', value) - break - case 'rangeStep': - this.$zoomRange.attr('step', value) - break - case 'startTransform': - this._buildTransform() - break - case 'duration': - case 'easing': - this._buildTransition() - /* falls through */ - case 'transition': - this.transition() - break - case 'panOnlyWhenZoomed': - this._checkPanWhenZoomed() - break - case '$set': - if (value instanceof $ && value.length) { - this.$set = value - // Reset styles - this._initStyle() - this._buildTransform() - } - } - }, this) - ) - }, - - /** - * Disable/enable panning depending on whether the current scale - * matches the minimum - * @param {Number} [scale] - * @private - */ - _checkPanWhenZoomed: function(scale) { - var options = this.options - if (options.panOnlyWhenZoomed) { - if (!scale) { - scale = this.getMatrix()[0] - } - var toDisable = scale <= options.minScale - if (options.disablePan !== toDisable) { - this.option('disablePan', toDisable) - } - } - }, - - /** - * Initialize base styles for the element and its parent - * @private - */ - _initStyle: function() { - var styles = { - // Set the same default whether SVG or HTML - // transform-origin cannot be changed to 50% 50% in IE9-11 or Edge 13-14+ - 'transform-origin': this.isSVG ? '0 0' : '50% 50%' - } - // Set elem styles - if (!this.options.disablePan) { - styles.cursor = this.options.cursor - } - this.$set.css(styles) - - // Set parent to relative if set to static - var $parent = this.$parent - // No need to add styles to the body - if ($parent.length && !$.nodeName(this.parent, 'body')) { - styles = { - overflow: 'hidden' - } - if ($parent.css('position') === 'static') { - styles.position = 'relative' - } - $parent.css(styles) - } - }, - - /** - * Undo any styles attached in this plugin - * @private - */ - _resetStyle: function() { - this.$elem.css({ - cursor: '', - transition: '' - }) - this.$parent.css({ - overflow: '', - position: '' - }) - }, - - /** - * Binds all necessary events - * @private - */ - _bind: function() { - var self = this - var options = this.options - var ns = options.eventNamespace - var str_down = 'mousedown' + ns + ' pointerdown' + ns + ' MSPointerDown' + ns - var str_start = 'touchstart' + ns + ' ' + str_down - var str_click = 'touchend' + ns + ' click' + ns + ' pointerup' + ns + ' MSPointerUp' + ns - var events = {} - var $reset = this.$reset - var $zoomRange = this.$zoomRange - - // Bind panzoom events from options - $.each(['Start', 'Change', 'Zoom', 'Pan', 'End', 'Reset'], function() { - var m = options['on' + this] - if ($.isFunction(m)) { - events['panzoom' + this.toLowerCase() + ns] = m - } - }) - - // Bind $elem drag and click/touchdown events - // Bind touchstart if either panning or zooming is enabled - if (!options.disablePan || !options.disableZoom) { - events[str_start] = function(e) { - var touches - if ( - e.type === 'touchstart' - ? // Touch - (touches = e.touches || e.originalEvent.touches) && - ((touches.length === 1 && !options.disablePan) || touches.length === 2) - : // Mouse/Pointer: Ignore unexpected click types - // Support: IE10 only - // IE10 does not support e.button for MSPointerDown, but does have e.which - !options.disablePan && (e.which || e.originalEvent.which) === options.which - ) { - e.preventDefault() - e.stopPropagation() - self._startMove(e, touches) - } - } - // Prevent the contextmenu event - // if we're binding to right-click - if (options.which === 3) { - events.contextmenu = false - } - } - this.$elem.on(events) - - // Bind reset - if ($reset.length) { - $reset.on(str_click, function(e) { - e.preventDefault() - self.reset() - }) - } - - // Set default attributes for the range input - if ($zoomRange.length) { - $zoomRange - .attr({ - // Only set the range step if explicit or - // set the default if there is no attribute present - step: - (options.rangeStep === Panzoom.defaults.rangeStep && $zoomRange.attr('step')) || - options.rangeStep, - min: options.minScale, - max: options.maxScale - }) - .prop({ - value: this.getMatrix()[0] - }) - } - - // No bindings if zooming is disabled - if (options.disableZoom) { - return - } - - var $zoomIn = this.$zoomIn - var $zoomOut = this.$zoomOut - - // Bind zoom in/out - // Don't bind one without the other - if ($zoomIn.length && $zoomOut.length) { - // preventDefault cancels future mouse events on touch events - $zoomIn.on(str_click, function(e) { - e.preventDefault() - self.zoom() - }) - $zoomOut.on(str_click, function(e) { - e.preventDefault() - self.zoom(true) - }) - } - - if ($zoomRange.length) { - events = {} - // Cannot prevent default action here - events[str_down] = function() { - self.transition(true) - } - // Zoom on input events if available and change events - // See https://github.com/timmywil/jquery.panzoom/issues/90 - events[(supportsInputEvent ? 'input' : 'change') + ns] = function() { - self.zoom(+this.value, { noSetRange: true }) - } - $zoomRange.on(events) - } - }, - - /** - * Unbind all events - * @private - */ - _unbind: function() { - this.$elem - .add(this.$zoomIn) - .add(this.$zoomOut) - .add(this.$reset) - .off(this.options.eventNamespace) - }, - - /** - * Builds the original transform value - * @private - */ - _buildTransform: function() { - // Save the original transform - // Retrieving this also adds the correct prefixed style name - // to jQuery's internal $.cssProps - return (this._origTransform = this.getTransform(this.options.startTransform)) - }, - - /** - * Set transition property for later use when zooming - * @private - */ - _buildTransition: function() { - if (this._transform) { - var options = this.options - this._transition = this._transform + ' ' + options.duration + 'ms ' + options.easing - } - }, - - /** - * Calculates the distance between two touch points - * Remember pythagorean? - * @param {Array} touches - * @returns {Number} Returns the distance - * @private - */ - _getDistance: function(touches) { - var touch1 = touches[0] - var touch2 = touches[1] - return Math.sqrt( - Math.pow(Math.abs(touch2.clientX - touch1.clientX), 2) + - Math.pow(Math.abs(touch2.clientY - touch1.clientY), 2) - ) - }, - - /** - * Constructs an approximated point in the middle of two touch points - * @returns {Object} Returns an object containing pageX and pageY - * @private - */ - _getMiddle: function(touches) { - var touch1 = touches[0] - var touch2 = touches[1] - return { - clientX: (touch2.clientX - touch1.clientX) / 2 + touch1.clientX, - clientY: (touch2.clientY - touch1.clientY) / 2 + touch1.clientY - } - }, - - /** - * Trigger a panzoom event on our element - * The event is passed the Panzoom instance - * @param {String|jQuery.Event} event - * @param {Mixed} arg1[, arg2, arg3, ...] Arguments to append to the trigger - * @private - */ - _trigger: function(event) { - if (typeof event === 'string') { - event = 'panzoom' + event - } - this.$elem.triggerHandler(event, [this].concat(slice.call(arguments, 1))) - }, - - /** - * Starts the pan - * This is bound to mouse/touchmove on the element - * @param {jQuery.Event} event An event with pageX, pageY, and possibly the touches list - * @param {TouchList} [touches] The touches list if present - * @private - */ - _startMove: function(event, touches) { - if (this.panning) { - return - } - var moveEvent, endEvent, startDistance, startScale, startMiddle, startPageX, startPageY, touch - var self = this - var options = this.options - var ns = options.eventNamespace - var matrix = this.getMatrix() - var original = matrix.slice(0) - var origPageX = +original[4] - var origPageY = +original[5] - var panOptions = { matrix: matrix, animate: 'skip' } - var type = event.type - - // Use proper events - if (type === 'pointerdown') { - moveEvent = 'pointermove' - endEvent = 'pointerup' - } else if (type === 'touchstart') { - moveEvent = 'touchmove' - endEvent = 'touchend' - } else if (type === 'MSPointerDown') { - moveEvent = 'MSPointerMove' - endEvent = 'MSPointerUp' - } else { - moveEvent = 'mousemove' - endEvent = 'mouseup' - } - - // Add namespace - moveEvent += ns - endEvent += ns - - // Remove any transitions happening - this.transition(true) - - // Indicate that we are currently panning - this.panning = true - - // Trigger start event - this._trigger('start', event, touches) - - var setStart = function(event, touches) { - if (touches) { - if (touches.length === 2) { - if (startDistance != null) { - return - } - startDistance = self._getDistance(touches) - startScale = self.getScale(matrix) - startMiddle = self._getMiddle(touches) - return - } - if (startPageX != null) { - return - } - if ((touch = touches[0])) { - startPageX = touch.pageX - startPageY = touch.pageY - } - } - if (startPageX != null) { - return - } - startPageX = event.pageX - startPageY = event.pageY - } - - setStart(event, touches) - - var move = function(e) { - var coords - e.preventDefault() - touches = e.touches || e.originalEvent.touches - setStart(e, touches) - - if (touches) { - if (touches.length === 2) { - // Calculate move on middle point - var middle = self._getMiddle(touches) - var diff = self._getDistance(touches) - startDistance - - // Set zoom - self.zoom(diff * (options.increment / 100) + startScale, { - focal: middle, - matrix: matrix, - animate: 'skip' - }) - - // Set pan - self.pan( - +matrix[4] + middle.clientX - startMiddle.clientX, - +matrix[5] + middle.clientY - startMiddle.clientY, - panOptions - ) - startMiddle = middle - return - } - coords = touches[0] || { pageX: 0, pageY: 0 } - } - - if (!coords) { - coords = e - } - - self.pan( - origPageX + coords.pageX - startPageX, - origPageY + coords.pageY - startPageY, - panOptions - ) - } - - // Bind the handlers - $(document) - .off(ns) - .on(moveEvent, move) - .on(endEvent, function(e) { - e.preventDefault() - // Unbind all document events - $(this).off(ns) - self.panning = false - // Trigger our end event - // Simply set the type to "panzoomend" to pass through all end properties - // jQuery's `not` is used here to compare Array equality - e.type = 'panzoomend' - self._trigger(e, matrix, !matrixEquals(matrix, original)) - }) - } - } - - // Add Panzoom as a static property - $.Panzoom = Panzoom - - /** - * Extend jQuery - * @param {Object|String} options - The name of a method to call on the prototype - * or an object literal of options - * @returns {jQuery|Mixed} jQuery instance for regular chaining or the return value(s) of a panzoom method call - */ - $.fn.panzoom = function(options) { - var instance, args, m, ret - - // Call methods widget-style - if (typeof options === 'string') { - ret = [] - args = slice.call(arguments, 1) - this.each(function() { - instance = $.data(this, datakey) - - if (!instance) { - ret.push(undefined) - - // Ignore methods beginning with `_` - } else if ( - options.charAt(0) !== '_' && - typeof (m = instance[options]) === 'function' && - // If nothing is returned, do not add to return values - (m = m.apply(instance, args)) !== undefined - ) { - ret.push(m) - } - }) - - // Return an array of values for the jQuery instances - // Or the value itself if there is only one - // Or keep chaining - return ret.length ? (ret.length === 1 ? ret[0] : ret) : this - } - - return this.each(function() { - new Panzoom(this, options) - }) - } - - return Panzoom -}) From 39ffa9a4778b2b3f81ff6e4332a535da56bc109d Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Fri, 9 Aug 2019 17:48:33 -0400 Subject: [PATCH 13/18] docs: add more example function calls --- README.md | 97 +++++++++++++++++++++++++++++++--------------------- src/types.ts | 23 +++++++++++-- 2 files changed, 79 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index 17d8113d..57cf520f 100644 --- a/README.md +++ b/README.md @@ -110,7 +110,7 @@ Alternatively, call `event.stopImmediatePropagation()` in an event handler on th ▸ **Panzoom**(`elem`: `HTMLElement` | `SVGElement`, `options?`: [PanzoomOptions](#PanzoomOptions)): _[PanzoomObject](#PanzoomObject)_ -_Defined in [panzoom.ts:39](https://github.com/timmywil/panzoom/blob/643953f/src/panzoom.ts#L39)_ +_Defined in [panzoom.ts:39](https://github.com/timmywil/panzoom/blob/1ddd93e/src/panzoom.ts#L39)_ **Parameters:** @@ -133,7 +133,7 @@ Includes `MiscOptions`, `PanOptions`, and `ZoomOptions` • **animate**? : _boolean_ (Default: **false**) -_Defined in [types.ts:5](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L5)_ +_Defined in [types.ts:5](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L5)_ Whether to animate transitions @@ -143,7 +143,7 @@ Whether to animate transitions • **clickableClass**? : _string_ (Default: **"clickable"**) -_Defined in [types.ts:10](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L10)_ +_Defined in [types.ts:10](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L10)_ Add this class to any element within the panzoom element that you want to be clickable and not initiate the drag @@ -154,7 +154,7 @@ that you want to be clickable and not initiate the drag • **duration**? : _number_ (Default: **200**) -_Defined in [types.ts:12](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L12)_ +_Defined in [types.ts:12](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L12)_ Duration of the transition (ms) @@ -164,7 +164,7 @@ Duration of the transition (ms) • **easing**? : _string_ (Default: **"ease-in-out"**) -_Defined in [types.ts:14](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L14)_ +_Defined in [types.ts:14](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L14)_ CSS Easing used for transitions @@ -174,7 +174,7 @@ CSS Easing used for transitions • **origin**? : _string_ -_Defined in [types.ts:28](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L28)_ +_Defined in [types.ts:28](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L28)_ **Change this at your own risk.** The `transform-origin` is the origin from which transforms are applied. @@ -194,7 +194,7 @@ And again, changing this for SVG in IE doesn't work at all. • **setTransform**? : _`setTransform`_ -_Defined in [types.ts:46](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L46)_ +_Defined in [types.ts:46](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L46)_ Override the transform setter. This is exposed mostly so the user could @@ -222,7 +222,7 @@ Panzoom(elem, { • **startScale**? : _number_ (Default: **1**) -_Defined in [types.ts:52](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L52)_ +_Defined in [types.ts:52](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L52)_ Scale used to set the beginning transform @@ -232,7 +232,7 @@ Scale used to set the beginning transform • **startX**? : _number_ (Default: **0**) -_Defined in [types.ts:48](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L48)_ +_Defined in [types.ts:48](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L48)_ X Value used to set the beginning transform @@ -242,7 +242,7 @@ X Value used to set the beginning transform • **startY**? : _number_ (Default: **0**) -_Defined in [types.ts:50](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L50)_ +_Defined in [types.ts:50](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L50)_ Y Value used to set the beginning transform @@ -256,7 +256,7 @@ Includes `MiscOptions` • **contain**? : _"inside" | "outside"_ -_Defined in [types.ts:69](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L69)_ +_Defined in [types.ts:69](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L69)_ Contain the panzoom element either inside or outside the parent. @@ -274,7 +274,7 @@ empty space around the element will be shown. • **cursor**? : _string_ (Default: **"move"**) -_Defined in [types.ts:71](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L71)_ +_Defined in [types.ts:71](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L71)_ The cursor style to set on the panzoom element @@ -284,7 +284,7 @@ The cursor style to set on the panzoom element • **disablePan**? : _boolean_ (Default: **false**) -_Defined in [types.ts:73](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L73)_ +_Defined in [types.ts:73](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L73)_ Disable panning functionality. Note: disablePan also disables focal point zooming @@ -294,7 +294,7 @@ Disable panning functionality. Note: disablePan also disables focal point zoomin • **disableXAxis**? : _boolean_ (Default: **false**) -_Defined in [types.ts:75](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L75)_ +_Defined in [types.ts:75](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L75)_ Pan only on the Y axis @@ -304,7 +304,7 @@ Pan only on the Y axis • **disableYAxis**? : _boolean_ (Default: **false**) -_Defined in [types.ts:77](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L77)_ +_Defined in [types.ts:77](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L77)_ Pan only on the X axis @@ -314,7 +314,7 @@ Pan only on the X axis • **panOnlyWhenZoomed**? : _boolean_ (Default: **false**) -_Defined in [types.ts:81](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L81)_ +_Defined in [types.ts:81](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L81)_ Disable panning while the scale is equal to the starting value @@ -324,7 +324,7 @@ Disable panning while the scale is equal to the starting value • **relative**? : _boolean_ (Default: **false**) -_Defined in [types.ts:79](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L79)_ +_Defined in [types.ts:79](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L79)_ When passing x and y values to .pan(), treat the values as relative to their current values @@ -338,7 +338,7 @@ Includes `MiscOptions` • **disableZoom**? : _boolean_ (Default: **false**) -_Defined in [types.ts:86](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L86)_ +_Defined in [types.ts:86](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L86)_ Disable zooming functionality @@ -348,7 +348,7 @@ Disable zooming functionality • **focal**? : _object_ -_Defined in [types.ts:93](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L93)_ +_Defined in [types.ts:93](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L93)_ Zoom to the given point on the panzoom element. This point is expected to be relative to @@ -367,7 +367,7 @@ to the parent dimensions. • **maxScale**? : _number_ (Default: **4**) -_Defined in [types.ts:97](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L97)_ +_Defined in [types.ts:97](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L97)_ The maximum scale when zooming @@ -377,7 +377,7 @@ The maximum scale when zooming • **minScale**? : _number_ (Default: **0.125**) -_Defined in [types.ts:95](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L95)_ +_Defined in [types.ts:95](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L95)_ The minimum scale when zooming @@ -387,7 +387,7 @@ The minimum scale when zooming • **step**? : _number_ (Default: **0.3**) -_Defined in [types.ts:99](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L99)_ +_Defined in [types.ts:99](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L99)_ The step affects zoom calculation when zooming with a mouse wheel, when pinch zooming, or when using zoomIn/zoomOut @@ -401,7 +401,7 @@ These methods are available after initializing Panzoom • **getOptions**: _function_ -_Defined in [types.ts:120](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L120)_ +_Defined in [types.ts:120](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L120)_ Returns a _copy_ of the current options object @@ -415,7 +415,7 @@ Returns a _copy_ of the current options object • **getPan**: _function_ -_Defined in [types.ts:116](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L116)_ +_Defined in [types.ts:116](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L116)_ Get the current x/y translation @@ -433,7 +433,7 @@ Get the current x/y translation • **getScale**: _function_ -_Defined in [types.ts:118](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L118)_ +_Defined in [types.ts:118](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L118)_ Get the current scale @@ -447,7 +447,7 @@ Get the current scale • **pan**: _function_ -_Defined in [types.ts:131](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L131)_ +_Defined in [types.ts:131](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L131)_ Pan the Panzoom element to the given x and y coordinates @@ -476,12 +476,17 @@ panzoom.pan(10, 10, { relative: true }) • **reset**: _function_ -_Defined in [types.ts:137](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L137)_ +_Defined in [types.ts:142](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L142)_ Reset the pan and zoom to startX, startY, and startScale. Animates by default, ignoring the global option. Pass `{ animate: false }` to override. +```js +panzoom.reset() +panzoom.reset({ animate: false }) +``` + #### Signature with return type: ▸ (`resetOptions?`: [PanzoomOptions](#PanzoomOptions)): _[CurrentValues](#CurrentValues)_ @@ -498,7 +503,7 @@ Pass `{ animate: false }` to override. • **setOptions**: _function_ -_Defined in [types.ts:139](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L139)_ +_Defined in [types.ts:144](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L144)_ Change options for the Panzoom instance @@ -518,7 +523,7 @@ Change options for the Panzoom instance • **setStyle**: _`setStyle`_ -_Defined in [types.ts:141](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L141)_ +_Defined in [types.ts:146](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L146)_ A convenience method for setting prefixed styles on the Panzoom element @@ -528,7 +533,7 @@ A convenience method for setting prefixed styles on the Panzoom element • **zoom**: _function_ -_Defined in [types.ts:150](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L150)_ +_Defined in [types.ts:155](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L155)_ Zoom the Panzoom element to the given scale @@ -554,12 +559,17 @@ panzoom.zoom(2.2, { animate: true }) • **zoomIn**: _function_ -_Defined in [types.ts:156](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L156)_ +_Defined in [types.ts:166](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L166)_ 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 }) +``` + #### Signature with return type: ▸ (`zoomOptions?`: [ZoomOptions](#ZoomOptions)): _[CurrentValues](#CurrentValues)_ @@ -576,12 +586,17 @@ Pass `{ animate: false }` to override. • **zoomOut**: _function_ -_Defined in [types.ts:162](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L162)_ +_Defined in [types.ts:177](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L177)_ 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 }) +``` + #### Signature with return type: ▸ (`zoomOptions?`: [ZoomOptions](#ZoomOptions)): _[CurrentValues](#CurrentValues)_ @@ -598,13 +613,17 @@ Pass `{ animate: false }` to override. • **zoomToPoint**: _function_ -_Defined in [types.ts:169](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L169)_ +_Defined in [types.ts:188](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L188)_ 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 pointer event on the Panzoom element. +```js +panzoom.zoomToPoint(1.2, pointerEvent) +``` + #### Signature with return type: ▸ (`scale`: number, `point`: object, `zoomOptions?`: [ZoomOptions](#ZoomOptions)): _[CurrentValues](#CurrentValues)_ @@ -628,7 +647,7 @@ the same way as a pointer event on the Panzoom element. • **zoomWithWheel**: _function_ -_Defined in [types.ts:198](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L198)_ +_Defined in [types.ts:217](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L217)_ Zoom the Panzoom element to a focal point using the given WheelEvent @@ -645,11 +664,11 @@ method or the `zoom` method's focal option. ```js // Bind to mousewheel -elem.parentElement.addEventListener('wheel', panzoom.zoomUsingWheel) +elem.parentElement.addEventListener('wheel', panzoom.zoomWithWheel) // Bind to shift+mousewheel elem.parentElement.addEventListener('wheel', function(event) { if (!event.shiftKey) return - panzoom.zoomUsingWheel(event) + panzoom.zoomWithWheel(event) }) ``` @@ -672,7 +691,7 @@ elem.parentElement.addEventListener('wheel', function(event) { • **scale**: _number_ -_Defined in [types.ts:111](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L111)_ +_Defined in [types.ts:111](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L111)_ --- @@ -680,7 +699,7 @@ _Defined in [types.ts:111](https://github.com/timmywil/panzoom/blob/643953f/src/ • **x**: _number_ -_Defined in [types.ts:109](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L109)_ +_Defined in [types.ts:109](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L109)_ --- @@ -688,4 +707,4 @@ _Defined in [types.ts:109](https://github.com/timmywil/panzoom/blob/643953f/src/ • **y**: _number_ -_Defined in [types.ts:110](https://github.com/timmywil/panzoom/blob/643953f/src/types.ts#L110)_ +_Defined in [types.ts:110](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L110)_ diff --git a/src/types.ts b/src/types.ts index 98ab5374..11248d1f 100644 --- a/src/types.ts +++ b/src/types.ts @@ -133,6 +133,11 @@ export interface PanzoomObject { * Reset the pan and zoom to startX, startY, and startScale. * Animates by default, ignoring the global option. * Pass `{ animate: false }` to override. + * + * ```js + * panzoom.reset() + * panzoom.reset({ animate: false }) + * ``` */ reset: (resetOptions?: PanzoomOptions) => CurrentValues /** Change options for the Panzoom instance */ @@ -152,12 +157,22 @@ export interface PanzoomObject { * 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 /** @@ -165,6 +180,10 @@ export interface PanzoomObject { * the given pointer/touch/mouse event or constructed point. * The clientX/clientY values should be calculated * the same way as a pointer event on the Panzoom element. + * + * ```js + * panzoom.zoomToPoint(1.2, pointerEvent) + * ``` */ zoomToPoint: ( scale: number, @@ -187,11 +206,11 @@ export interface PanzoomObject { * * ```js * // Bind to mousewheel - * elem.parentElement.addEventListener('wheel', panzoom.zoomUsingWheel) + * elem.parentElement.addEventListener('wheel', panzoom.zoomWithWheel) * // Bind to shift+mousewheel * elem.parentElement.addEventListener('wheel', function(event) { * if (!event.shiftKey) return - * panzoom.zoomUsingWheel(event) + * panzoom.zoomWithWheel(event) * }) * ``` */ From f6533b533daf4c3e0fdc96504db1ca86b9699a16 Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Fri, 9 Aug 2019 17:54:02 -0400 Subject: [PATCH 14/18] docs(usage): add note about what is done up front --- README.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 57cf520f..9ffabf81 100644 --- a/README.md +++ b/README.md @@ -84,6 +84,11 @@ const panzoom = Panzoom(elem, { }) panzoom.pan(10, 10) panzoom.zoom(2, { animate: true }) + +// Panning and pinch zooming are bound automatically. +// There are several available methods for zooming +// that can be bound on button clicks or mousewheel. +button.addEventListener('click', panzoom.zoomIn) elem.parentElement.addEventListener('wheel', panzoom.zoomWithWheel) ``` @@ -207,11 +212,7 @@ Default is defined in src/css.ts. // when setting the scale and translation Panzoom(elem, { setTransform: (elem, { scale, x, y }) => { - setStyle( - elem, - 'transform', - `rotate(0.5turn) scale(${scale}) translate(${x}px, ${y}px)` - ) + setStyle(elem, 'transform', `rotate(0.5turn) scale(${scale}) translate(${x}px, ${y}px)`) } }) ``` From b4b8329d58566f3c6bf67f33c072ba3bf74a2f88 Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Fri, 9 Aug 2019 17:55:18 -0400 Subject: [PATCH 15/18] docs(usage): unless disablePan is true --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9ffabf81..6c23ea9d 100644 --- a/README.md +++ b/README.md @@ -85,7 +85,7 @@ const panzoom = Panzoom(elem, { panzoom.pan(10, 10) panzoom.zoom(2, { animate: true }) -// Panning and pinch zooming are bound automatically. +// Panning and pinch zooming are bound automatically (unless disablePan is true). // There are several available methods for zooming // that can be bound on button clicks or mousewheel. button.addEventListener('click', panzoom.zoomIn) From 7713025236964706cc00d23e3e1f2d8227ffc48d Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Fri, 9 Aug 2019 19:36:51 -0400 Subject: [PATCH 16/18] feat(events): add custom events for panning and zooming (#398) --- .github/CONTRIBUTING.md | 2 +- README.md | 127 ++++++++++++++++++++++++++++------------ src/css.ts | 4 +- src/panzoom.ts | 66 +++++++++++++-------- src/polyfills.js | 10 ++++ src/types.ts | 4 +- tasks/EVENTS.md | 40 +++++++++++++ tasks/docs.js | 8 ++- 8 files changed, 194 insertions(+), 67 deletions(-) create mode 100644 tasks/EVENTS.md diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index ebef401c..cd1c69e8 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -32,7 +32,7 @@ updated unit tests in the `test` directory or an updated/added demo in the `demo ### Do not edit below the "Documentation" header in the README -Edit the comments and type declarations in the `src/` folder. +Edit the comments and type declarations in the `src/` folder, or the markdown files in the `tasks/` folder. The documentation is auto-generated using a combination of [typedoc](https://typedoc.org/) and a hand-rolled script (`tasks/docs.js`). First, typedoc generates markdown from the TypeScript files into the `docs/` folder, which is ignored by git, and then `tasks/docs.js` concatenates those files and cleans them up for presentation in the README. diff --git a/README.md b/README.md index 6c23ea9d..6d0cae45 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Have a look at the [GitHub project](https://github.com/timmywil/panzoom/projects --- -Panzoom is a small library (<3kb gzipped) to add panning and zooming functionality to an element. +Panzoom is a small library (~3kb gzipped) to add panning and zooming functionality to an element. Rather than using absolute positioning or setting width and height, Panzoom uses CSS transforms to take advantage of hardware/GPU acceleration in the browser, which means the element can be _anything_: an image, a video, an iframe, a canvas, text, WHATEVER. For common support questions, see [the FAQ](https://github.com/timmywil/panzoom#faq). @@ -115,7 +115,7 @@ Alternatively, call `event.stopImmediatePropagation()` in an event handler on th ▸ **Panzoom**(`elem`: `HTMLElement` | `SVGElement`, `options?`: [PanzoomOptions](#PanzoomOptions)): _[PanzoomObject](#PanzoomObject)_ -_Defined in [panzoom.ts:39](https://github.com/timmywil/panzoom/blob/1ddd93e/src/panzoom.ts#L39)_ +_Defined in [panzoom.ts:39](https://github.com/timmywil/panzoom/blob/b4b8329/src/panzoom.ts#L39)_ **Parameters:** @@ -138,7 +138,7 @@ Includes `MiscOptions`, `PanOptions`, and `ZoomOptions` • **animate**? : _boolean_ (Default: **false**) -_Defined in [types.ts:5](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L5)_ +_Defined in [types.ts:5](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L5)_ Whether to animate transitions @@ -148,7 +148,7 @@ Whether to animate transitions • **clickableClass**? : _string_ (Default: **"clickable"**) -_Defined in [types.ts:10](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L10)_ +_Defined in [types.ts:10](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L10)_ Add this class to any element within the panzoom element that you want to be clickable and not initiate the drag @@ -159,7 +159,7 @@ that you want to be clickable and not initiate the drag • **duration**? : _number_ (Default: **200**) -_Defined in [types.ts:12](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L12)_ +_Defined in [types.ts:12](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L12)_ Duration of the transition (ms) @@ -169,7 +169,7 @@ Duration of the transition (ms) • **easing**? : _string_ (Default: **"ease-in-out"**) -_Defined in [types.ts:14](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L14)_ +_Defined in [types.ts:14](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L14)_ CSS Easing used for transitions @@ -179,7 +179,7 @@ CSS Easing used for transitions • **origin**? : _string_ -_Defined in [types.ts:28](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L28)_ +_Defined in [types.ts:28](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L28)_ **Change this at your own risk.** The `transform-origin` is the origin from which transforms are applied. @@ -199,7 +199,7 @@ And again, changing this for SVG in IE doesn't work at all. • **setTransform**? : _`setTransform`_ -_Defined in [types.ts:46](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L46)_ +_Defined in [types.ts:46](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L46)_ Override the transform setter. This is exposed mostly so the user could @@ -219,11 +219,21 @@ Panzoom(elem, { --- +### silent + +• **silent**? : _boolean_ + +_Defined in [types.ts:48](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L48)_ + +Silence all events + +--- + ### startScale • **startScale**? : _number_ (Default: **1**) -_Defined in [types.ts:52](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L52)_ +_Defined in [types.ts:54](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L54)_ Scale used to set the beginning transform @@ -233,7 +243,7 @@ Scale used to set the beginning transform • **startX**? : _number_ (Default: **0**) -_Defined in [types.ts:48](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L48)_ +_Defined in [types.ts:50](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L50)_ X Value used to set the beginning transform @@ -243,7 +253,7 @@ X Value used to set the beginning transform • **startY**? : _number_ (Default: **0**) -_Defined in [types.ts:50](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L50)_ +_Defined in [types.ts:52](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L52)_ Y Value used to set the beginning transform @@ -257,7 +267,7 @@ Includes `MiscOptions` • **contain**? : _"inside" | "outside"_ -_Defined in [types.ts:69](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L69)_ +_Defined in [types.ts:71](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L71)_ Contain the panzoom element either inside or outside the parent. @@ -275,7 +285,7 @@ empty space around the element will be shown. • **cursor**? : _string_ (Default: **"move"**) -_Defined in [types.ts:71](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L71)_ +_Defined in [types.ts:73](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L73)_ The cursor style to set on the panzoom element @@ -285,7 +295,7 @@ The cursor style to set on the panzoom element • **disablePan**? : _boolean_ (Default: **false**) -_Defined in [types.ts:73](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L73)_ +_Defined in [types.ts:75](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L75)_ Disable panning functionality. Note: disablePan also disables focal point zooming @@ -295,7 +305,7 @@ Disable panning functionality. Note: disablePan also disables focal point zoomin • **disableXAxis**? : _boolean_ (Default: **false**) -_Defined in [types.ts:75](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L75)_ +_Defined in [types.ts:77](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L77)_ Pan only on the Y axis @@ -305,7 +315,7 @@ Pan only on the Y axis • **disableYAxis**? : _boolean_ (Default: **false**) -_Defined in [types.ts:77](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L77)_ +_Defined in [types.ts:79](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L79)_ Pan only on the X axis @@ -315,7 +325,7 @@ Pan only on the X axis • **panOnlyWhenZoomed**? : _boolean_ (Default: **false**) -_Defined in [types.ts:81](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L81)_ +_Defined in [types.ts:83](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L83)_ Disable panning while the scale is equal to the starting value @@ -325,7 +335,7 @@ Disable panning while the scale is equal to the starting value • **relative**? : _boolean_ (Default: **false**) -_Defined in [types.ts:79](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L79)_ +_Defined in [types.ts:81](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L81)_ When passing x and y values to .pan(), treat the values as relative to their current values @@ -339,7 +349,7 @@ Includes `MiscOptions` • **disableZoom**? : _boolean_ (Default: **false**) -_Defined in [types.ts:86](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L86)_ +_Defined in [types.ts:88](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L88)_ Disable zooming functionality @@ -349,7 +359,7 @@ Disable zooming functionality • **focal**? : _object_ -_Defined in [types.ts:93](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L93)_ +_Defined in [types.ts:95](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L95)_ Zoom to the given point on the panzoom element. This point is expected to be relative to @@ -368,7 +378,7 @@ to the parent dimensions. • **maxScale**? : _number_ (Default: **4**) -_Defined in [types.ts:97](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L97)_ +_Defined in [types.ts:99](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L99)_ The maximum scale when zooming @@ -378,7 +388,7 @@ The maximum scale when zooming • **minScale**? : _number_ (Default: **0.125**) -_Defined in [types.ts:95](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L95)_ +_Defined in [types.ts:97](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L97)_ The minimum scale when zooming @@ -388,7 +398,7 @@ The minimum scale when zooming • **step**? : _number_ (Default: **0.3**) -_Defined in [types.ts:99](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L99)_ +_Defined in [types.ts:101](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L101)_ The step affects zoom calculation when zooming with a mouse wheel, when pinch zooming, or when using zoomIn/zoomOut @@ -402,7 +412,7 @@ These methods are available after initializing Panzoom • **getOptions**: _function_ -_Defined in [types.ts:120](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L120)_ +_Defined in [types.ts:122](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L122)_ Returns a _copy_ of the current options object @@ -416,7 +426,7 @@ Returns a _copy_ of the current options object • **getPan**: _function_ -_Defined in [types.ts:116](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L116)_ +_Defined in [types.ts:118](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L118)_ Get the current x/y translation @@ -434,7 +444,7 @@ Get the current x/y translation • **getScale**: _function_ -_Defined in [types.ts:118](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L118)_ +_Defined in [types.ts:120](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L120)_ Get the current scale @@ -448,7 +458,7 @@ Get the current scale • **pan**: _function_ -_Defined in [types.ts:131](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L131)_ +_Defined in [types.ts:133](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L133)_ Pan the Panzoom element to the given x and y coordinates @@ -477,7 +487,7 @@ panzoom.pan(10, 10, { relative: true }) • **reset**: _function_ -_Defined in [types.ts:142](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L142)_ +_Defined in [types.ts:144](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L144)_ Reset the pan and zoom to startX, startY, and startScale. Animates by default, ignoring the global option. @@ -504,7 +514,7 @@ panzoom.reset({ animate: false }) • **setOptions**: _function_ -_Defined in [types.ts:144](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L144)_ +_Defined in [types.ts:146](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L146)_ Change options for the Panzoom instance @@ -524,7 +534,7 @@ Change options for the Panzoom instance • **setStyle**: _`setStyle`_ -_Defined in [types.ts:146](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L146)_ +_Defined in [types.ts:148](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L148)_ A convenience method for setting prefixed styles on the Panzoom element @@ -534,7 +544,7 @@ A convenience method for setting prefixed styles on the Panzoom element • **zoom**: _function_ -_Defined in [types.ts:155](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L155)_ +_Defined in [types.ts:157](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L157)_ Zoom the Panzoom element to the given scale @@ -560,7 +570,7 @@ panzoom.zoom(2.2, { animate: true }) • **zoomIn**: _function_ -_Defined in [types.ts:166](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L166)_ +_Defined in [types.ts:168](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L168)_ Zoom in using the predetermined increment set in options. Animates by default, ignoring the global option. @@ -587,7 +597,7 @@ panzoom.zoomIn({ animate: false }) • **zoomOut**: _function_ -_Defined in [types.ts:177](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L177)_ +_Defined in [types.ts:179](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L179)_ Zoom out using the predetermined increment set in options. Animates by default, ignoring the global option. @@ -614,7 +624,7 @@ panzoom.zoomOut({ animate: false }) • **zoomToPoint**: _function_ -_Defined in [types.ts:188](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L188)_ +_Defined in [types.ts:190](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L190)_ Zoom the Panzoom element to a focal point using the given pointer/touch/mouse event or constructed point. @@ -648,7 +658,7 @@ panzoom.zoomToPoint(1.2, pointerEvent) • **zoomWithWheel**: _function_ -_Defined in [types.ts:217](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L217)_ +_Defined in [types.ts:219](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L219)_ Zoom the Panzoom element to a focal point using the given WheelEvent @@ -692,7 +702,7 @@ elem.parentElement.addEventListener('wheel', function(event) { • **scale**: _number_ -_Defined in [types.ts:111](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L111)_ +_Defined in [types.ts:113](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L113)_ --- @@ -700,7 +710,7 @@ _Defined in [types.ts:111](https://github.com/timmywil/panzoom/blob/1ddd93e/src/ • **x**: _number_ -_Defined in [types.ts:109](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L109)_ +_Defined in [types.ts:111](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L111)_ --- @@ -708,4 +718,45 @@ _Defined in [types.ts:109](https://github.com/timmywil/panzoom/blob/1ddd93e/src/ • **y**: _number_ -_Defined in [types.ts:110](https://github.com/timmywil/panzoom/blob/1ddd93e/src/types.ts#L110)_ +_Defined in [types.ts:112](https://github.com/timmywil/panzoom/blob/b4b8329/src/types.ts#L112)_ + +## Events + +The following events are available as custom events on the panzoom element using the native [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) API. +Add listeners the same way you would any other event. + +```js +elem.addEventListener('panzoomchange', (event) => { + console.log(event.detail) // => { x: 0, y: 0, scale: 1 } +}) +``` + +### Notes about all events + +- The event object passed as an argument to the listener will always have a `detail` property with the current `x`, `y`, and `scale` values. +- Events can be silenced when the `silent` option is set to `true`, either globally or when passed to `pan`, any `zoom` method, or `reset`. +- Avoid putting too much logic in these event handlers as it could effect the performance of panning or zooming. + +### `"panzoomstart"` + +Fired when the user starts a move or pinch zoom gesture on mobile. + +### `"panzoomchange"` + +Fired whenever there is a pan, zoom, or reset. Note that direct calls to `options.setTransform` do not fire this event. + +### `"panzoomzoom"` + +Fired whenever the zoom is changed by any Panzoom `zoom` method, directly or internally. + +### `"panzoompan"` + +Fired whenever the zoom is changed by the `pan` method, directly or internally. + +### `"panzoomend"` + +Fired when the user finishes a move or finishes a pinch zoom gesture on mobile. + +### `"panzoomreset"` + +Fired whenever reset is called. diff --git a/src/css.ts b/src/css.ts index f65d9782..fe93709a 100644 --- a/src/css.ts +++ b/src/css.ts @@ -1,4 +1,4 @@ -import { PanzoomOptions } from './types' +import { CurrentValues, PanzoomOptions } from './types' /** * Proper prefixing for cross-browser compatibility @@ -88,7 +88,7 @@ export function setTransition(elem: HTMLElement | SVGElement, options: PanzoomOp */ export function setTransform( elem: HTMLElement | SVGElement, - { x, y, scale }: { x: number; y: number; scale: number }, + { x, y, scale }: CurrentValues, options: PanzoomOptions = {} ) { if (typeof options.animate === 'boolean') { diff --git a/src/panzoom.ts b/src/panzoom.ts index f3f2fe18..ba60875e 100644 --- a/src/panzoom.ts +++ b/src/panzoom.ts @@ -101,6 +101,22 @@ function Panzoom(elem: HTMLElement | SVGElement, options?: PanzoomOptions): Panz pan(options.startX, options.startY, { animate: false }) }) + function trigger(eventName: string, detail: any, opts: PanzoomOptions) { + if (opts.silent) { + return + } + const event = new CustomEvent(eventName, { detail }) + elem.dispatchEvent(event) + } + + function setTransformWithEvent(eventName: string, opts: PanzoomOptions) { + const value = { x, y, scale } + opts.setTransform(elem, value, opts) + trigger(eventName, value, opts) + trigger('panzoomchange', value, opts) + return value + } + function constrainXY(toX: number | string, toY: number | string, panOptions?: PanOptions) { const opts = { ...options, ...panOptions } const result = { x, y, opts } @@ -187,9 +203,7 @@ function Panzoom(elem: HTMLElement | SVGElement, options?: PanzoomOptions): Panz x = result.x y = result.y - const values = { x, y, scale } - opts.setTransform(elem, values, opts) - return values + return setTransformWithEvent('panzoompan', opts) } function zoom(toScale: number, zoomOptions?: ZoomOptions) { @@ -213,9 +227,7 @@ function Panzoom(elem: HTMLElement | SVGElement, options?: PanzoomOptions): Panz } scale = toScale - const values = { x, y, scale } - opts.setTransform(elem, values, opts) - return values + return setTransformWithEvent('panzoomzoom', opts) } function zoomInOut(isIn: boolean, zoomOptions?: ZoomOptions) { @@ -311,39 +323,39 @@ function Panzoom(elem: HTMLElement | SVGElement, options?: PanzoomOptions): Panz x = panResult.x y = panResult.y scale = constrainScale(opts.startScale, opts).scale - const values = { x, y, scale } - opts.setTransform(elem, values, opts) - return values + return setTransformWithEvent('panzoomreset', opts) } let origX: number let origY: number - let startX: number - let startY: number + let startClientX: number + let startClientY: number let startScale: number let startDistance: number const pointers: PointerEvent[] = [] function handleDown(event: PointerEvent) { - addEvent(pointers, event) - if (event.pointerId) { - elem.setPointerCapture(event.pointerId) - } // Don't handle this event if the target is a clickable if (event.target && (event.target as Element).classList.contains(options.clickableClass)) { return } + addEvent(pointers, event) + if (event.pointerId) { + elem.setPointerCapture(event.pointerId) + } isPanning = true event.preventDefault() event.stopPropagation() origX = x origY = y + trigger('panzoomstart', { x, y, scale }, options) + // This works whether there are multiple // pointers or not const point = getMiddle(pointers) - startX = point.clientX - startY = point.clientY + startClientX = point.clientX + startClientY = point.clientY startScale = scale startDistance = getDistance(pointers) } @@ -354,8 +366,8 @@ function Panzoom(elem: HTMLElement | SVGElement, options?: PanzoomOptions): Panz !isPanning || origX === undefined || origY === undefined || - startX === undefined || - startY === undefined + startClientX === undefined || + startClientY === undefined ) { return } @@ -369,12 +381,20 @@ function Panzoom(elem: HTMLElement | SVGElement, options?: PanzoomOptions): Panz zoomToPoint(toScale, current) } - pan(origX + (current.clientX - startX) / scale, origY + (current.clientY - startY) / scale, { - animate: false - }) + pan( + origX + (current.clientX - startClientX) / scale, + origY + (current.clientY - startClientY) / scale, + { + animate: false + } + ) } function handleUp(event: PointerEvent) { + // Only call panzoomend once + if (pointers.length === 1) { + trigger('panzoomend', { x, y, scale }, options) + } // Note: don't remove all pointers // Can restart without having to reinitiate all of them removeEvent(pointers, event) @@ -382,7 +402,7 @@ function Panzoom(elem: HTMLElement | SVGElement, options?: PanzoomOptions): Panz elem.releasePointerCapture(event.pointerId) } isPanning = false - origX = origY = startX = startY = undefined + origX = origY = startClientX = startClientY = undefined } if (!options.disablePan) { diff --git a/src/polyfills.js b/src/polyfills.js index 83ede1ca..fcf2e94a 100644 --- a/src/polyfills.js +++ b/src/polyfills.js @@ -2,3 +2,13 @@ if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach } +// Support: IE11 only +// CustomEvent is an object instead of a constructor +if (typeof window.CustomEvent !== 'function') { + window.CustomEvent = function CustomEvent(event, params) { + params = params || { bubbles: false, cancelable: false, detail: null } + var evt = document.createEvent('CustomEvent') + evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail) + return evt + } +} diff --git a/src/types.ts b/src/types.ts index 11248d1f..73a82864 100644 --- a/src/types.ts +++ b/src/types.ts @@ -44,6 +44,8 @@ interface MiscOptions { * ``` */ 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 */ @@ -105,7 +107,7 @@ type ZoomOnlyOptions = MiscOptions & ZoomOptions export { ZoomOnlyOptions as ZoomOptions } export type PanzoomOptions = PanOptions & ZoomOptions & MiscOptions -interface CurrentValues { +export interface CurrentValues { x: number y: number scale: number diff --git a/tasks/EVENTS.md b/tasks/EVENTS.md new file mode 100644 index 00000000..6e2f152a --- /dev/null +++ b/tasks/EVENTS.md @@ -0,0 +1,40 @@ +## Events + +The following events are available as custom events on the panzoom element using the native [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) API. +Add listeners the same way you would any other event. + +```js +elem.addEventListener('panzoomchange', (event) => { + console.log(event.detail) // => { x: 0, y: 0, scale: 1 } +}) +``` + +### Notes about all events + +- The event object passed as an argument to the listener will always have a `detail` property with the current `x`, `y`, and `scale` values. +- Events can be silenced when the `silent` option is set to `true`, either globally or when passed to `pan`, any `zoom` method, or `reset`. +- Avoid putting too much logic in these event handlers as it could effect the performance of panning or zooming. + +### `"panzoomstart"` + +Fired when the user starts a move or pinch zoom gesture on mobile. + +### `"panzoomchange"` + +Fired whenever there is a pan, zoom, or reset. Note that direct calls to `options.setTransform` do not fire this event. + +### `"panzoomzoom"` + +Fired whenever the zoom is changed by any Panzoom `zoom` method, directly or internally. + +### `"panzoompan"` + +Fired whenever the zoom is changed by the `pan` method, directly or internally. + +### `"panzoomend"` + +Fired when the user finishes a move or finishes a pinch zoom gesture on mobile. + +### `"panzoomreset"` + +Fired whenever reset is called. diff --git a/tasks/docs.js b/tasks/docs.js index 2e91564c..2e35ab28 100644 --- a/tasks/docs.js +++ b/tasks/docs.js @@ -1,5 +1,6 @@ const fs = require('fs') const prettier = require('prettier') +const pkg = require('../package.json') function read(filename) { return fs.readFileSync(`${__dirname}/${filename}`, { encoding: 'utf8' }) } @@ -72,7 +73,10 @@ data += panzoomObject const currentValues = read('../docs/interfaces/_types_.currentvalues.md') // Remove unwanted text .replace(rProperties, '\n\n---\n\n## `CurrentValues`\n') -data += currentValues +data += currentValues + '\n' + +const events = read('./EVENTS.md') +data += events // Write a pretty version -write('../README.md', prettier.format(data, { parser: 'markdown', semi: false, singleQuote: true })) +write('../README.md', prettier.format(data, { ...pkg.prettier, parser: 'markdown' })) From 2d7cd0033e43b8922265abb710b78001d00f76cc Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Fri, 9 Aug 2019 19:43:59 -0400 Subject: [PATCH 17/18] docs(readme): update module name in loading --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 6d0cae45..9d29b098 100644 --- a/README.md +++ b/README.md @@ -52,19 +52,19 @@ Panzoom uses [UMD](https://github.com/umdjs/umd) and can be loaded a lot of ways With ES6 imports: ```js -import Panzoom from 'panzoom' +import Panzoom from '@panzoom/panzoom' ``` With commonjs or browserify: ``` -const Panzoom = require('panzoom') +const Panzoom = require('@panzoom/panzoom') ``` With an AMD loader in an anonymous module: ```js -define(['panzoom'], function(Panzoom) { +define(['@panzoom/panzoom'], function(Panzoom) { Panzoom('.panzoom') }) ``` From 2c4c3030bd4af61bc990d51716b0776d0c9c6a22 Mon Sep 17 00:00:00 2001 From: Timmy Willison <4timmywil@gmail.com> Date: Mon, 12 Aug 2019 13:41:37 -0400 Subject: [PATCH 18/18] fix(events): fallback to touch and mouse events (#399) --- src/events.ts | 33 +++++++++++++++++++++++++++++++++ src/panzoom.ts | 29 +++++++++++------------------ src/pointers.ts | 24 +++++++++++++++++++++--- 3 files changed, 65 insertions(+), 21 deletions(-) create mode 100644 src/events.ts diff --git a/src/events.ts b/src/events.ts new file mode 100644 index 00000000..1640044d --- /dev/null +++ b/src/events.ts @@ -0,0 +1,33 @@ +let events: { down: string; move: string; up: string } +if (typeof (window as any).PointerEvent === 'function') { + events = { + down: 'pointerdown', + move: 'pointermove', + up: 'pointerup pointerleave pointercancel' + } +} else if (typeof (window as any).TouchEvent === 'function') { + events = { + down: 'touchstart', + move: 'touchmove', + up: 'touchend touchcancel' + } +} else { + events = { + down: 'mousedown', + move: 'mousemove', + up: 'mouseup mouseleave' + } +} + +export function onPointer( + event: 'down' | 'move' | 'up', + elem: HTMLElement | SVGElement | Document, + handler: (event: PointerEvent) => void, + eventOpts?: any +) { + events[event].split(' ').forEach((name) => { + ;(elem as HTMLElement).addEventListener< + 'pointerdown' | 'pointermove' | 'pointerup' | 'pointerleave' | 'pointercancel' + >(name as any, handler, eventOpts) + }) +} diff --git a/src/panzoom.ts b/src/panzoom.ts index ba60875e..cc50bfe3 100644 --- a/src/panzoom.ts +++ b/src/panzoom.ts @@ -8,9 +8,10 @@ * */ import { getDimensions, setStyle, setTransform } from './css' +import { onPointer } from './events' import isAttached from './isAttached' import isSVGElement from './isSVGElement' -import { addEvent, getDistance, getMiddle, removeEvent } from './pointers' +import { addPointer, getDistance, getMiddle, removePointer } from './pointers' import './polyfills' import shallowClone from './shallowClone' import { PanOptions, PanzoomObject, PanzoomOptions, ZoomOptions } from './types' @@ -53,8 +54,6 @@ function Panzoom(elem: HTMLElement | SVGElement, options?: PanzoomOptions): Panz } const isSVG = isSVGElement(elem) - // SVG has pointer events, but TypeScript doesn't know that - const htmlElem = elem as HTMLElement function setOptions(opts: PanzoomOptions = {}) { for (const key in opts) { @@ -339,10 +338,7 @@ function Panzoom(elem: HTMLElement | SVGElement, options?: PanzoomOptions): Panz if (event.target && (event.target as Element).classList.contains(options.clickableClass)) { return } - addEvent(pointers, event) - if (event.pointerId) { - elem.setPointerCapture(event.pointerId) - } + addPointer(pointers, event) isPanning = true event.preventDefault() event.stopPropagation() @@ -361,7 +357,6 @@ function Panzoom(elem: HTMLElement | SVGElement, options?: PanzoomOptions): Panz } function move(event: PointerEvent) { - // console.log(elem, event.type, event.pointerId) if ( !isPanning || origX === undefined || @@ -371,7 +366,7 @@ function Panzoom(elem: HTMLElement | SVGElement, options?: PanzoomOptions): Panz ) { return } - addEvent(pointers, event) + addPointer(pointers, event) const current = getMiddle(pointers) if (pointers.length > 1) { // Use the distance between the first 2 pointers @@ -391,26 +386,24 @@ function Panzoom(elem: HTMLElement | SVGElement, options?: PanzoomOptions): Panz } function handleUp(event: PointerEvent) { + if (!isPanning) { + return + } // Only call panzoomend once if (pointers.length === 1) { trigger('panzoomend', { x, y, scale }, options) } // Note: don't remove all pointers // Can restart without having to reinitiate all of them - removeEvent(pointers, event) - if (event.pointerId) { - elem.releasePointerCapture(event.pointerId) - } + removePointer(pointers, event) isPanning = false origX = origY = startClientX = startClientY = undefined } if (!options.disablePan) { - htmlElem.addEventListener('pointerdown', handleDown) - htmlElem.addEventListener('pointermove', move, { passive: true }) - htmlElem.addEventListener('pointerup', handleUp, { passive: true }) - htmlElem.addEventListener('pointerleave', handleUp, { passive: true }) - htmlElem.addEventListener('pointercancel', handleUp, { passive: true }) + onPointer('down', elem, handleDown) + onPointer('move', document, move, { passive: true }) + onPointer('up', document, handleUp, { passive: true }) } return { diff --git a/src/pointers.ts b/src/pointers.ts index 32b119c3..9f802f4c 100644 --- a/src/pointers.ts +++ b/src/pointers.ts @@ -12,8 +12,18 @@ function findEventIndex(pointers: PointerEvent[], event: PointerEvent) { return -1 } -export function addEvent(pointers: PointerEvent[], event: PointerEvent) { - const i = findEventIndex(pointers, event) +export function addPointer(pointers: PointerEvent[], event: PointerEvent) { + let i + // Add touches if applicable + if ((event as any).touches) { + i = 0 + for (const touch of (event as any).touches) { + touch.pointerId = i++ + addPointer(pointers, touch) + } + return + } + i = findEventIndex(pointers, event) // Update if already present if (i > -1) { pointers.splice(i, 1) @@ -21,7 +31,15 @@ export function addEvent(pointers: PointerEvent[], event: PointerEvent) { pointers.push(event) } -export function removeEvent(pointers: PointerEvent[], event: PointerEvent) { +export function removePointer(pointers: PointerEvent[], event: PointerEvent) { + // Add touches if applicable + if ((event as any).touches) { + // Remove all touches + while (pointers.length) { + pointers.pop() + } + return + } const i = findEventIndex(pointers, event) if (i > -1) { pointers.splice(i, 1)