diff --git a/klay-noflo.js b/klay-noflo.js
index 80ec56bf689e9d35c7a4af4d8dd3d42392287228..58f438ce8eeb0106296e4554f0e2b938b29709ab 100644
--- a/klay-noflo.js
+++ b/klay-noflo.js
@@ -1,4 +1,4 @@
-var klayNoflo = (function () {
+export const klayNoflo = (function () {
   "use strict";
   
   var worker;
diff --git a/package.json b/package.json
index e78946c6141f2245e744976ba4a0bd3581057976..053d8a4b20e53a41871fd74ae26c778479eea762 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "klayjs": "^0.2.1"
   },
+  "type": "module",
   "devDependencies": {
     "grunt": "~0.4.1",
     "grunt-contrib-clean": "~0.5.0",

diff --git a/lib/ComponentLoader.d.ts b/lib/ComponentLoader.d.ts
index 8e7731dbdaa53005d58d55e6a834d20d032eff7e..faa04bafb5667a24ceabbf0432439e9b42856f4b 100644
--- a/lib/ComponentLoader.d.ts
+++ b/lib/ComponentLoader.d.ts
@@ -79,7 +79,7 @@ export class ComponentLoader {
      * @param {import("fbp-graph/lib/Types").GraphNodeMetadata} metadata
      * @returns {Promise<import("./Component").Component>}
      */
-    protected createComponent(name: string, component: ComponentDefinitionWithoutGraph, metadata: import("fbp-graph/lib/Types").GraphNodeMetadata): Promise<import("./Component").Component>;
+    createComponent(name: string, component: ComponentDefinitionWithoutGraph, metadata: import("fbp-graph/lib/Types").GraphNodeMetadata): Promise<import("./Component").Component>;
     /**
      * @param {import("fbp-graph").Graph|object|string} cPath
      * @returns {boolean}
diff --git a/src/lib/ComponentLoader.js b/src/lib/ComponentLoader.js
index b3215074ff63d5be2f352a4dc94635f82212836c..98c7b653da5ec47072656afaef1c50b6c7ebd646 100644
--- a/src/lib/ComponentLoader.js
+++ b/src/lib/ComponentLoader.js
@@ -226,9 +226,8 @@ export class ComponentLoader {
     return promise;
   }
 
-  // Creates an instance of a component.
   /**
-   * @protected
+   * Creates an instance of a component.
    * @param {string} name
    * @param {ComponentDefinitionWithoutGraph} component
    * @param {import("fbp-graph/lib/Types").GraphNodeMetadata} metadata

diff --git a/the-graph/the-graph-app.js b/the-graph/the-graph-app.js
index 08aa19642e811c336fdc5c1ea99b6b9906109d5b..c21d6f9470d4ebd609c6553688a7074bc4657391 100644
--- a/the-graph/the-graph-app.js
+++ b/the-graph/the-graph-app.js
@@ -167,6 +167,7 @@ module.exports.register = function (context) {
         onPanScale: null,
         onNodeSelection: null,
         onEdgeSelection: null,
+        getEditorRef: null,
       };
     },
     getInitialState: function() {
@@ -424,6 +425,10 @@ module.exports.register = function (context) {
       this.hideContext();
     },
     componentDidMount: function () {
+      // make sure user side parent context can access methods defined here
+      if (this.props.getEditorRef !== undefined) {
+        this.props.getEditorRef.current = this;
+      }
       var domNode = ReactDOM.findDOMNode(this.refs.svg);
 
       // Unselect edges and nodes
diff --git a/the-graph/the-graph-edge.js b/the-graph/the-graph-edge.js
index 9d658061b85ebb47eb5a8c3e16d765150ea17033..ece77b909a96e9f6c7db61535d81e5a00d5709c7 100644
--- a/the-graph/the-graph-edge.js
+++ b/the-graph/the-graph-edge.js
@@ -79,7 +79,7 @@ module.exports.register = function (context) {
     mixins: [
       TooltipMixin
     ],
-    componentWillMount: function() {
+    UNSAFE_componentWillMount: function() {
     },
     componentDidMount: function () {
       var domNode = ReactDOM.findDOMNode(this);
diff --git a/the-graph/the-graph-graph.js b/the-graph/the-graph-graph.js
index 803b63b8cd42682f230172e015acfea2574b2919..bdf9bff23349781e36d8a1f0c61b182b035e6035 100644
--- a/the-graph/the-graph-graph.js
+++ b/the-graph/the-graph-graph.js
@@ -121,7 +121,7 @@ module.exports.register = function (context) {
     componentWillUnmount: function () {
         this.mounted = false;
     },
-    componentWillReceiveProps: function(nextProps) {
+    UNSAFE_componentWillReceiveProps: function(nextProps) {
       this.subscribeGraph(this.props.graph, nextProps.graph);
       this.markDirty();
     },
diff --git a/the-graph-nav/the-graph-nav.js b/the-graph-nav/the-graph-nav.js
index 206975d0fc2b3efb89d18b2543830c1922cd740d..cdbcbd1b9e5f1fc60cafa0f105c32dd40b0d25f1 100644
--- a/the-graph-nav/the-graph-nav.js
+++ b/the-graph-nav/the-graph-nav.js
@@ -1,7 +1,9 @@
 
 var React = require('react');
+const ReactDOM = require('react-dom');
 var createReactClass = require('create-react-class');
-var Hammer = require('hammerjs');
+const Hammer = require('hammerjs');
+const hammerhacks = require('../the-graph/hammer.js');
 var thumb = require('../the-graph-thumb/the-graph-thumb.js');
 
 function calculateStyleFromTheme(theme) {
@@ -20,19 +22,19 @@ function calculateStyleFromTheme(theme) {
   return style;
 }
 
-function renderViewRectangle(context, viewrect, props) {
+function renderViewRectangle(context, viewrect, style) {
 
-  context.clearRect(0, 0, props.width, props.height);
-  context.fillStyle = props.outsideFill;
+  context.clearRect(0, 0, style.width, style.height);
+  context.fillStyle = style.outsideFill;
 
   // Scaled view rectangle
-  var x = Math.round( (props.viewrectangle[0]/props.scale - props.thumbrectangle[0]) * props.thumbscale );
-  var y = Math.round( (props.viewrectangle[1]/props.scale - props.thumbrectangle[1]) * props.thumbscale );
-  var w = Math.round( props.viewrectangle[2] * props.thumbscale / props.scale );
-  var h = Math.round( props.viewrectangle[3] * props.thumbscale / props.scale );
+  var x = Math.round( (style.viewrectangle[0]/style.scale - style.thumbrectangle[0]) * style.thumbscale );
+  var y = Math.round( (style.viewrectangle[1]/style.scale - style.thumbrectangle[1]) * style.thumbscale );
+  var w = Math.round( style.viewrectangle[2] * style.thumbscale / style.scale );
+  var h = Math.round( style.viewrectangle[3] * style.thumbscale / style.scale );
 
   var hide = false;
-  if (x<0 && y<0 && w>props.width-x && h>props.height-y) {
+  if (x<0 && y<0 && w>style.width-x && h>style.height-y) {
     // Hide map
     hide = true;
     return {
@@ -48,35 +50,35 @@ function renderViewRectangle(context, viewrect, props) {
   if (x < 0) { 
     w += x; 
     x = 0;
-    viewrect.style.borderLeftColor = props.viewBoxBorder2;
+    viewrect.style.borderLeftColor = style.viewBoxBorder2;
   } else {
-    viewrect.style.borderLeftColor = props.viewBoxBorder;
-    context.fillRect(0, 0, x, props.height);
+    viewrect.style.borderLeftColor = style.viewBoxBorder;
+    context.fillRect(0, 0, x, style.height);
   }
   // Top
   if (y < 0) { 
     h += y; 
     y = 0;
-    viewrect.style.borderTopColor = props.viewBoxBorder2;
+    viewrect.style.borderTopColor = style.viewBoxBorder2;
   } else {
-    viewrect.style.borderTopColor = props.viewBoxBorder;
+    viewrect.style.borderTopColor = style.viewBoxBorder;
     context.fillRect(x, 0, w, y);
   }
   // Right
-  if (w > props.width-x) { 
-    w = props.width-x;
-    viewrect.style.borderRightColor = props.viewBoxBorder2;
+  if (w > style.width-x) { 
+    w = style.width-x;
+    viewrect.style.borderRightColor = style.viewBoxBorder2;
   } else {
-    viewrect.style.borderRightColor = props.viewBoxBorder;
-    context.fillRect(x+w, 0, props.width-(x+w), props.height);
+    viewrect.style.borderRightColor = style.viewBoxBorder;
+    context.fillRect(x+w, 0, style.width-(x+w), style.height);
   }
   // Bottom
-  if (h > props.height-y) { 
-    h = props.height-y;
-    viewrect.style.borderBottomColor = props.viewBoxBorder2;
+  if (h > style.height-y) { 
+    h = style.height-y;
+    viewrect.style.borderBottomColor = style.viewBoxBorder2;
   } else {
-    viewrect.style.borderBottomColor = props.viewBoxBorder;
-    context.fillRect(x, y+h, w, props.height-(y+h));
+    viewrect.style.borderBottomColor = style.viewBoxBorder;
+    context.fillRect(x, y+h, w, style.height-(y+h));
   }
 
   // Size and translate rect
@@ -139,8 +141,7 @@ var Component = createReactClass({
   },
   getInitialState: function() {
     return {
-      thumbscale: 1.0,
-      currentPan: [0.0, 0.0],
+      panStartPoint: [0.0, 0.0],
     };
   },
   render: function() {
@@ -193,19 +194,17 @@ var Component = createReactClass({
     ]);
   },
   componentDidUpdate: function() {
-    this._updatePan();
     this._renderElements();
   },
   componentDidMount: function() {
-    this._updatePan();
     this._renderElements();
     this._setupEvents();
   },
   _refThumbCanvas: function(canvas) {
-      this._thumbContext = canvas.getContext('2d');
+      this._thumbContext = canvas?.getContext?.('2d');
   },
   _refViewboxCanvas: function(canvas) {
-      this._viewboxContext = canvas.getContext('2d');
+      this._viewboxContext = canvas?.getContext?.('2d');
   },
   _refViewboxElement: function(el) {
       this._viewboxElement = el;
@@ -218,40 +217,49 @@ var Component = createReactClass({
     //this.state.thumbscale = t.scale;
     renderViewboxFromProps(this._viewboxContext, this._viewboxElement, t, this.props);
   },
-  _updatePan: function() {
-    this.state.currentPan = [
-      -(this.props.viewrectangle[0]),
-      -(this.props.viewrectangle[1]),
-    ];
+  onDragOrPan: function ({ deltaX, deltaY }) {
+    if (this.props.onPanTo) {
+      // Calculate where event pans to, in editor coordinates
+      var x = this.state.panStartPoint[0];
+      var y = this.state.panStartPoint[1];
+      var panscale = 1 / this.props.viewscale;
+      const speedupFactorX = this.props.viewrectangle[2] / this.props.width * 2;
+      const speedupFactorY = this.props.viewrectangle[3] / this.props.height * 2;
+      x -= deltaX / panscale * speedupFactorX;
+      y -= deltaY / panscale * speedupFactorY;
+      var panTo = { x: Math.round(x), y: Math.round(y) };
+      this.props.onPanTo(panTo, event);
+    }
+  },
+  onTrackStart(event) {
+    this.state.panStartPoint[0] = -this.props.viewrectangle[0];
+    this.state.panStartPoint[1] = -this.props.viewrectangle[1];
+    this._topElement.addEventListener('panmove', this.onTrack);
+    this._topElement.addEventListener('panend', this.onTrackEnd);
+  },
+  onTrack(event) {
+    this.onDragOrPan({
+      deltaX: event.gesture.deltaX,
+      deltaY: event.gesture.deltaY,
+    });
+  },
+  onTrackEnd(event) {
+    // Don't click app (unselect)
+    event.stopPropagation();
+    this._topElement.removeEventListener('panmove', this.onTrack);
+    this._topElement.removeEventListener('panend', this.onTrackEnd);
   },
   _setupEvents: function() {
     this.hammer = new Hammer.Manager(this._topElement, {
+      domEvents: true,
+      inputClass: hammerhacks.Input,
       recognizers: [
-        [ Hammer.Tap ],
-        [ Hammer.Pan, { direction: Hammer.DIRECTION_ALL } ],
+        [Hammer.Tap],
+        [Hammer.Pan, { direction: Hammer.DIRECTION_ALL, threshold: 5 }],
       ],
     });
-    this.hammer.on('tap', (function(event) {
-      if (this.props.onTap) {
-        this.props.onTap(null, event);
-      }
-    }).bind(this));
-    this.hammer.on('panmove', (function(event) {
-      if (this.props.onPanTo) {
-        // Calculate where event pans to, in editor coordinates
-        var x = this.state.currentPan[0];
-        var y = this.state.currentPan[1];
-        var panscale = this.state.thumbscale / this.props.viewscale;
-        x -= event.deltaX / panscale;
-        y -= event.deltaY / panscale;
-        var panTo = { x: Math.round(x), y: Math.round(y) };
-        // keep track of the current pan, because prop/component update
-        // may be delayed, or never arrive.
-        this.state.currentPan[0] = panTo.x;
-        this.state.currentPan[1] = panTo.y;
-        this.props.onPanTo(panTo, event);
-      }
-    }).bind(this));
+    this.hammer.on('tap', (event) => this.props.onTap(event));
+    this._topElement.addEventListener('panstart', (event) => this.onTrackStart(event));
   }
 });