various plot related fixes

Author: pfitzseb

lib/plots/canopy.js

@@ -77,14 +77,22 @@ export class Pannable extends Etch {
     this.left = 0
     this.top = 0
 
+    this.isLoaded = false
+
     // force update, so readAfterUpdate gets executed
     this.update()
-    item.onload = () => {
-      etch.update(this).then(() => {
-        this.setInitialScale(item)
-        etch.update(this)
-      })
+    if (item && item.nodeName && item.nodeName.toLowerCase() === 'img') {
+      item.onload = () => {
+        etch.update(this).then(() => {
+          this.setInitialScale(item)
+          this.isLoaded = true
+          etch.update(this)
+        })
+      }
+    } else {
+      this.isLoaded = true
     }
+    this.update()
   }
 
   readAfterUpdate () {
@@ -120,7 +128,7 @@ export class Pannable extends Etch {
   }
 
   zoom(e, amount) {
-    const zoom = amount || Math.pow(0.99, e.deltaY)
+    const zoom = amount || Math.pow(e.shiftKey ? 0.99 : 0.999, e.deltaY)
 
     if (zoom*this.scale > this.maxScale || zoom*this.scale < this.minScale) return
 
@@ -160,14 +168,19 @@ export class Pannable extends Etch {
       this.toolbar = this.toolbar.concat(this.item.toolbar)
     }
 
-    let position = {position:'relative', height:'inherit', width:'inherit', transformOrigin: '0px 0px'}
+    let style = {position:'relative', height:'inherit', width:'inherit', transformOrigin: '0px 0px'}
 
     if (this.zoomstrategy == 'width') {
-      position.transform = 'translate('+this.left+'px,'+this.top+'px)'
-      position.height = scale
-      position.width = scale
+      style.transform = 'translate('+this.left+'px,'+this.top+'px)'
+      style.height = scale
+      style.width = scale
     } else if (this.zoomstrategy == 'transform') {
-      position.transform = 'translate('+this.left+'px,'+this.top+'px) scale('+this.scale+')'
+      style.transform = 'translate('+this.left+'px,'+this.top+'px) scale('+this.scale+')'
+    }
+    if (this.isLoaded) {
+      style.visibility = 'initial'
+    } else {
+      style.visibility = 'hidden'
     }
 
     return <div style={{height:'100%',width:'100%'}}
@@ -177,7 +190,7 @@ export class Pannable extends Etch {
                 onmousemove={e=>this.ondrag(e)}
                 onmousewheel={e=>this.zoom(e)}
                 ondblclick={e=>this.resetAll()}>
-      <div style={position} className='ink-pannable'>
+      <div style={style} className='ink-pannable'>
         {toView(this.item)}
       </div>
     </div>;

styles/canopy.less

@@ -34,6 +34,9 @@
 }
 
 .ink-pannable {
+  .noshow {
+    visibility: hidden;
+  }
   img {
     pointer-events: none;
   }