Merge pull request #250 from JunoLab/sp/plotpaneresizing

prevent pointer events while resizing plot pane

Author: pfitzseb

lib/console/console.js

@@ -10,7 +10,6 @@ import { WebLinksAddon } from 'xterm-addon-web-links'
 import { FitAddon } from 'xterm-addon-fit'
 import TerminalElement from './view'
 import PaneItem from '../util/pane-item'
-import ResizeDetector from 'element-resize-detector'
 import { debounce, throttle } from 'underscore-plus'
 import { closest } from './helpers'
 import { openExternal } from 'shell'

lib/plots/pane.js

@@ -4,6 +4,8 @@
 import etch from 'etch'
 
 import PaneItem from '../util/pane-item'
+import ResizeDetector from 'element-resize-detector'
+import { throttle } from 'underscore-plus'
 import { toView, Toolbar, Button, Icon, BackgroundMessage } from '../util/etch'
 
 let defaultPane
@@ -29,8 +31,32 @@ export default class PlotPane extends PaneItem {
     this.ids = []
     this.currentItem = -1
 
+    this.resizer = new ResizeDetector()
+
     etch.initialize(this)
     this.element.setAttribute('tabindex', -1)
+
+    this.resizer.listenTo(this.element, throttle(() => this.resizing(true), 150))
+    this.resizerTimeout = null
+  }
+
+  resizing(isResizing) {
+    if (this.resizerTimeout) {
+      clearTimeout(this.resizerTimeout)
+    }
+
+    const shouldUpdate = isResizing !== this.isResizing
+    this.isResizing = isResizing
+    if (shouldUpdate) {
+      etch.update(this)
+    }
+
+    if (isResizing) {
+      this.resizerTimeout = setTimeout(() => this.resizing(false), 200)
+    } else {
+      clearTimeout(this.resizerTimeout)
+      this.resizerTimeout = null
+    }
   }
 
   update() {
@@ -69,7 +95,12 @@ export default class PlotPane extends PaneItem {
          </div>)
      }
 
-    return <span className='ink-plot-pane'>
+     let cn = 'ink-plot-pane'
+     if (this.isResizing) {
+       cn += ' is-resizing'
+     }
+
+    return <span className={cn}>
              <Toolbar items={buttons}>
                <div className="ink-plot-pane-container fill">
                  {els}

styles/plot-pane.less

@@ -9,4 +9,8 @@
     height: 100%;
     width: 100%;
   }
+
+  &.is-resizing {
+    pointer-events: none;
+  }
 }