Merge pull request #241 from JunoLab/sp/fixcanopyresize

fix pannable initial scale

Author: pfitzseb

lib/plots/canopy.js

@@ -96,19 +96,21 @@ export class Pannable extends Etch {
   }
 
   readAfterUpdate () {
-    this.containerRect =
-      this.element.getElementsByClassName('ink-pannable')[0].getBoundingClientRect()
+    this.innerContainerRect = this.refs.innerContainer.getBoundingClientRect()
+    this.outerContainerRect = this.refs.outerContainer.getBoundingClientRect()
+
     this.setInitialScale(this.item)
+    
     etch.update(this)
   }
 
   setInitialScale (item) {
     this.initialScale = 1
-    if (item.naturalHeight && item.naturalWidth && this.containerRect) {
+    if (item.naturalHeight && item.naturalWidth && this.outerContainerRect) {
       // only scale down, not up:
       this.initialScale = Math.min(
-        this.containerRect.width/item.naturalWidth,
-        this.containerRect.height/item.naturalHeight,
+        this.outerContainerRect.width/item.naturalWidth,
+        this.outerContainerRect.height/item.naturalHeight,
         1
       )
     }
@@ -136,14 +138,14 @@ export class Pannable extends Etch {
 
     this.scale *= zoom
 
-    if (this.containerRect) {
+    if (this.innerContainerRect) {
       let x, y
       if (amount) {
-        x = this.containerRect.width/2
-        y = this.containerRect.height/2
+        x = this.innerContainerRect.width/2
+        y = this.innerContainerRect.height/2
       } else {
-        x = clamp(e.clientX - this.containerRect.left, 0, this.containerRect.width)
-        y = clamp(e.clientY - this.containerRect.top, 0, this.containerRect.height)
+        x = clamp(e.clientX - this.innerContainerRect.left, 0, this.innerContainerRect.width)
+        y = clamp(e.clientY - this.innerContainerRect.top, 0, this.innerContainerRect.height)
       }
 
       this.left -= x*zoom - x
@@ -191,8 +193,9 @@ export class Pannable extends Etch {
                 onmouseleave={e=>this.dragging=false}
                 onmousemove={e=>this.ondrag(e)}
                 onmousewheel={e=>this.zoom(e)}
-                ondblclick={e=>this.resetAll()}>
-      <div style={style} className='ink-pannable'>
+                ondblclick={e=>this.resetAll()}
+                ref='outerContainer'>
+      <div style={style} className='ink-pannable' ref='innerContainer'>
         {toView(this.item)}
       </div>
     </div>;