feat(contain): add contain: 'outside' option

README.md

@@ -33,7 +33,7 @@ One could implement transitions manually in those browsers using the `setTransfo
 
 ## Loading Panzoom
 
-Panzoom uses (UMD)[https://github.com/umdjs/umd] and can be loaded a lot of ways.
+Panzoom uses [UMD](https://github.com/umdjs/umd) and can be loaded a lot of ways.
 
 With ES6 imports:
 

docs/README.md

@@ -1,4 +1,4 @@
-> **[@panzoom/core](README.md)**
+> **[@panzoom/panzoom](README.md)**
 
 [Globals](globals.md) /
 
@@ -37,7 +37,7 @@ One could implement transitions manually in those browsers using the `setTransfo
 
 ## Loading Panzoom
 
-Panzoom uses (UMD)[https://github.com/umdjs/umd] and can be loaded a lot of ways.
+Panzoom uses [UMD](https://github.com/umdjs/umd) and can be loaded a lot of ways.
 
 With ES6 imports:
 
@@ -69,31 +69,16 @@ const panzoom = Panzoom('.panzoom', {
 
 ## FAQ
 
-1\. How do I make it so that I never see the background behind the Panzoom element? [example](https://codepen.io/timmywil/pen/qjvBF)
+1\. What is `transform-origin` and why is it added to the panzoom element?
 
-- This can be done with the `contain` option. Set `contain` to `"invert"` or `"auto"` and make sure the Panzoom element is the same size or larger than its parent.
+- The `transform-origin` is the origin from which transforms are applied. Panzoom ensures the defaults are set to what it expects to calculate focal point zooming.
+- HTML elements default to '50% 50%'.
+- SVG elements default to '0 0'.
 
-```js
-$('.panzoom-elements').panzoom({
-  contain: 'invert',
-  minScale: 1
-})
-```
-
-2\. How do I make links work if they're within a Panzoom element? [example](https://codepen.io/timmywil/pen/bFiqy)
-
-- Event propagation is stopped for `mousedown` and `touchstart` events in order to allow for Panzoom elements within Panzoom elements. To fix the links, bind an event handler that prevents the event from reaching the Panzoom handler:
-
-```js
-$('.panzoom a').on('mousedown touchstart', function(e) {
-  e.stopImmediatePropagation()
-})
-```
-
-3\. What is `transform-origin` and why is it set to `'0 0'` on the panzoom element?
+2\. I am using Panzoom with an `<object>` tag. It zooms but does not pan. [example](https://codepen.io/timmywil/pen/qNpykA)
 
-- The `transform-origin` is the origin from which transforms are applied. The default for SVG is already `'0 0'`. Panzoom normalizes HTML to the same default, which makes working with both much simpler. The SVG default was chosen over the HTML one because changing the `transform-origin` on SVG elements doesn't work in IE. Anything that can be done with a `transform-origin` of `'50% 50%'` can be done with `'0 0'`; the transform values just need adjusting.
+Object elements can eat up events, making it so they never reach Panzoom. To fix this, disable pointer events (`pointer-events: none`) on the `<object>` tag and call Panzoom using a wrapper.
 
-4\. I am using Panzoom with an `<object>` tag. It zooms but does not pan. [example](https://codepen.io/timmywil/pen/qNpykA)
+3\. My links aren't working! How do I enable an anchor within a panzoom element?
 
-Object elements can eat up events, making it so they never reach Panzoom. To fix this, disable pointer events (`pointer-events: none`) on the `<object>` tag and call Panzoom using a wrapper.
+Add class `options.clickable` (default is `"clickable"`) to whatever element you want to be clickable. This will add a listener that calls `event.stopImmediatePropagation()` to prevent the event from reaching panzoom. You could also do this yourself.

docs/globals.md

@@ -1,8 +1,8 @@
-> **[@panzoom/core](README.md)**
+> **[@panzoom/panzoom](README.md)**
 
 [Globals](globals.md) /
 
-# @panzoom/core
+# @panzoom/panzoom
 
 ## Index
 

docs/interfaces/_types_.miscoptions.md

@@ -0,0 +1,139 @@
+> **[@panzoom/panzoom](../README.md)**
+
+[Globals](../globals.md) / ["types"](../modules/_types_.md) / [MiscOptions](_types_.miscoptions.md) /
+
+# Interface: MiscOptions
+
+## Hierarchy
+
+* **MiscOptions**
+
+## Indexable
+
+● \[▪ **key**: *string*\]: any
+
+Pass through any options like data
+
+## Index
+
+### Properties
+
+* [animate](_types_.miscoptions.md#optional-animate)
+* [clickableClass](_types_.miscoptions.md#optional-clickableclass)
+* [duration](_types_.miscoptions.md#optional-duration)
+* [easing](_types_.miscoptions.md#optional-easing)
+* [origin](_types_.miscoptions.md#optional-origin)
+* [setTransform](_types_.miscoptions.md#optional-settransform)
+* [startScale](_types_.miscoptions.md#optional-startscale)
+* [startX](_types_.miscoptions.md#optional-startx)
+* [startY](_types_.miscoptions.md#optional-starty)
+
+## Properties
+
+### `Optional` animate
+
+• **animate**? : *boolean*
+
+*Defined in [types.ts:5](https://github.com/timmywil/panzoom/blob/a7078e8/src/types.ts#L5)*
+
+Whether to animate transitions
+
+___
+
+### `Optional` clickableClass
+
+• **clickableClass**? : *string*
+
+*Defined in [types.ts:10](https://github.com/timmywil/panzoom/blob/a7078e8/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**? : *number*
+
+*Defined in [types.ts:12](https://github.com/timmywil/panzoom/blob/a7078e8/src/types.ts#L12)*
+
+Duration of the transition (ms)
+
+___
+
+### `Optional` easing
+
+• **easing**? : *string*
+
+*Defined in [types.ts:14](https://github.com/timmywil/panzoom/blob/a7078e8/src/types.ts#L14)*
+
+CSS Easing used for transitions
+
+___
+
+### `Optional` origin
+
+• **origin**? : *string*
+
+*Defined in [types.ts:28](https://github.com/timmywil/panzoom/blob/a7078e8/src/types.ts#L28)*
+
+**Change this at your own risk.**
+The `transform-origin` is the origin from which transforms are applied.
+Default: `'50% 50%'` for HTML and `'0 0'` for SVG.
+The defaults are set because changing the `transform-origin` on
+SVG elements doesn't work in IE.
+
+Changing this should work with most things, but
+it will break focal point zooming, which assumes the
+defaults are set to do the more complicated calculations.
+
+And again, changing this for SVG in IE doesn't work at all.
+
+___
+
+### `Optional` setTransform
+
+• **setTransform**? : *[setTransform](../modules/_css_.md#settransform)*
+
+*Defined in [types.ts:45](https://github.com/timmywil/panzoom/blob/a7078e8/src/types.ts#L45)*
+
+Override the transform setter
+This is exposed mostly so the user could
+set other parts of a transform
+aside from scale and translate.
+
+```js
+// This example always sets a rotation
+// 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)`)
+  }
+})
+```
+
+___
+
+### `Optional` startScale
+
+• **startScale**? : *number*
+
+*Defined in [types.ts:49](https://github.com/timmywil/panzoom/blob/a7078e8/src/types.ts#L49)*
+
+___
+
+### `Optional` startX
+
+• **startX**? : *number*
+
+*Defined in [types.ts:47](https://github.com/timmywil/panzoom/blob/a7078e8/src/types.ts#L47)*
+
+Values used to set the beginning transform
+
+___
+
+### `Optional` startY
+
+• **startY**? : *number*
+
+*Defined in [types.ts:48](https://github.com/timmywil/panzoom/blob/a7078e8/src/types.ts#L48)*