fix(zoom): set min and max scale based on containment

Fixes gh-426
timmywil · Nov 14, 2019 · d05f1e7 · d05f1e7
1 parent eab60fa
commit d05f1e7
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 3 deletions.
diff --git a/demo/examples/ContainOutside.tsx b/demo/examples/ContainOutside.tsx
@@ -1,17 +1,43 @@
 import React, { useEffect, useRef } from 'react'
-import Panzoom from '../../src/panzoom'
+
 import Code from '../Code'
 import Demo from '../Demo'
+import Panzoom from '../../src/panzoom'
+import { PanzoomObject } from '../../src/types'
 
 const code = <Code>{`Panzoom(elem, { contain: 'outside', startScale: 1.5 })`}</Code>
 
 export default function ContainOutside() {
   const elem = useRef<HTMLDivElement>(null)
+  let panzoom: PanzoomObject
   useEffect(() => {
-    Panzoom(elem.current, { contain: 'outside', startScale: 1.5 })
+    setTimeout(() => {
+      panzoom = Panzoom(elem.current, { contain: 'outside', startScale: 1.5 })
+    }, 1000)
   }, [])
   return (
     <Demo title="Containment within the parent" code={code}>
+      <div className="buttons">
+        <label>Try me: </label>
+        <button
+          onClick={() => {
+            panzoom.zoomIn()
+          }}>
+          Zoom in
+        </button>
+        <button
+          onClick={() => {
+            panzoom.zoomOut()
+          }}>
+          Zoom out
+        </button>
+        <button
+          onClick={() => {
+            panzoom.reset()
+          }}>
+          Reset
+        </button>
+      </div>
       <div className="panzoom-parent" style={{ height: '900px' }}>
         <div
           className="panzoom"

diff --git a/src/panzoom.ts b/src/panzoom.ts
@@ -75,6 +75,13 @@ function Panzoom(
     if (opts.hasOwnProperty('cursor')) {
       elem.style.cursor = opts.cursor
     }
+    if (
+      opts.hasOwnProperty('minScale') ||
+      opts.hasOwnProperty('maxScale') ||
+      opts.hasOwnProperty('contain')
+    ) {
+      setMinMax()
+    }
   }
 
   // Set overflow on the parent
@@ -107,6 +114,7 @@ function Panzoom(
   // for accurate dimensions
   // to constrain initial values
   setTimeout(() => {
+    setMinMax()
     pan(options.startX, options.startY, { animate: false })
   })
 
@@ -127,6 +135,23 @@ function Panzoom(
     return value
   }
 
+  function setMinMax() {
+    if (options.contain) {
+      const dims = getDimensions(elem)
+      const parentWidth = dims.parent.width - dims.parent.border.left - dims.parent.border.right
+      const parentHeight = dims.parent.height - dims.parent.border.top - dims.parent.border.bottom
+      const elemWidth = dims.elem.width / scale
+      const elemHeight = dims.elem.height / scale
+      const elemScaledWidth = parentWidth / elemWidth
+      const elemScaledHeight = parentHeight / elemHeight
+      if (options.contain === 'inside') {
+        options.maxScale = Math.min(elemScaledWidth, elemScaledHeight)
+      } else if (options.contain === 'outside') {
+        options.minScale = Math.max(elemScaledWidth, elemScaledHeight)
+      }
+    }
+  }
+
   function constrainXY(toX: number | string, toY: number | string, panOptions?: PanOptions) {
     const opts = { ...options, ...panOptions }
     const result = { x, y, opts }
@@ -235,8 +260,12 @@ function Panzoom(
       x = panResult.x
       y = panResult.y
     }
-
     scale = toScale
+    if (!opts.focal) {
+      const panResult = constrainXY(x, y, { relative: false })
+      x = panResult.x
+      y = panResult.y
+    }
     return setTransformWithEvent('panzoomzoom', opts)
   }
 

diff --git a/test/unit/panzoom.test.ts b/test/unit/panzoom.test.ts
@@ -85,6 +85,19 @@ describe('Panzoom', () => {
     assert.equal(div.style.cursor, 'default', 'Cursor style changes when setting the cursor option')
     document.body.removeChild(div)
   })
+  describe('contain option', () => {
+    it(': outside sets the pan on the zoom to maintain containment', () => {
+      const div = document.createElement('div')
+      document.body.appendChild(div)
+      const panzoom = Panzoom(div, { contain: 'outside' })
+      panzoom.zoom(2)
+      panzoom.pan(100, 100)
+      panzoom.zoom(1)
+      const pan = panzoom.getPan()
+      assert.equal(pan.x, 0)
+      assert.equal(pan.y, 0)
+    })
+  })
   describe('force option', () => {
     it('ignores disablePan', () => {
       const div = document.createElement('div')