moving documents and panning stuff now uses right click

4 files changed, 121 insertions, 55 deletions

diff --git a/package-lock.json b/package-lock.json
index b75ff25f8..0ad64517c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,13 +7,13 @@
     "@types/chai": {
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.1.7.tgz",
-      "integrity": "sha512-2Y8uPt0/jwjhQ6EiluT0XCri1Dbplr0ZxfFXUz+ye13gaqE8u5gL5ppao1JrUYr9cIip5S6MvQzBS7Kke7U9VA==",
+      "integrity": "sha1-G44zthqMCcvh+FEzBxuqDb+fpxo=",
       "dev": true
     },
     "@types/mocha": {
       "version": "5.2.5",
       "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-5.2.5.tgz",
-      "integrity": "sha512-lAVp+Kj54ui/vLUFxsJTMtWvZraZxum3w3Nwkble2dNuV5VnPA+Mi2oGX9XYJAaIvZi3tn3cbjS/qcJXRb6Bww==",
+      "integrity": "sha1-ikrM/EA8EkoLr+ip/GGgXsEDIHM=",
       "dev": true
     },
     "@types/node": {
@@ -40,7 +40,7 @@
     "@types/react-dom": {
       "version": "16.0.11",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.0.11.tgz",
-      "integrity": "sha512-x6zUx9/42B5Kl2Vl9HlopV8JF64wLpX3c+Pst9kc1HgzrsH+mkehe/zmHMQTplIrR48H2gpU7ZqurQolYu8XBA==",
+      "integrity": "sha1-vRDMsNkmA0P0uaSdT3qDMKXB8IE=",
       "dev": true,
       "requires": {
         "@types/react": "*"
@@ -49,7 +49,7 @@
     "@types/uuid": {
       "version": "3.4.4",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-3.4.4.tgz",
-      "integrity": "sha512-tPIgT0GUmdJQNSHxp0X2jnpQfBSTfGxUMc/2CXBU2mnyTFVYVa2ojpoQ74w0U2yn2vw3jnC640+77lkFFpdVDw==",
+      "integrity": "sha1-evaTYPpl7w3stB/RUL9MpcDO/fU=",
       "requires": {
         "@types/node": "*"
       }
@@ -502,7 +502,7 @@
     "awesome-typescript-loader": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/awesome-typescript-loader/-/awesome-typescript-loader-5.2.1.tgz",
-      "integrity": "sha512-slv66OAJB8orL+UUaTI3pKlLorwIvS4ARZzYR9iJJyGsEgOqueMfOMdKySWzZ73vIkEe3fcwFgsKMg4d8zyb1g==",
+      "integrity": "sha1-pB2veEdRX0klzbqjB11h8onpE/w=",
       "dev": true,
       "requires": {
         "chalk": "^2.4.1",
@@ -905,7 +905,7 @@
     "chai": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/chai/-/chai-4.2.0.tgz",
-      "integrity": "sha512-XQU3bhBukrOsQCuwZndwGcCVQHyZi53fQ6Ys1Fym7E4olpIqqZZhhoFJoaKVvV17lWQoXYwgWN2nF5crA8J2jw==",
+      "integrity": "sha1-dgqnLPION5XoSxKHfODoNzeqKeU=",
       "dev": true,
       "requires": {
         "assertion-error": "^1.1.0",
@@ -1212,7 +1212,7 @@
     "copy-webpack-plugin": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-4.6.0.tgz",
-      "integrity": "sha512-Y+SQCF+0NoWQryez2zXn5J5knmr9z/9qSQt7fbL78u83rxmigOy8X5+BFn8CFSuX+nKT8gpYwJX68ekqtQt6ZA==",
+      "integrity": "sha1-5/QN2KaEd9QF3Rt6hUquMksVi64=",
       "dev": true,
       "requires": {
         "cacache": "^10.0.4",
@@ -1311,7 +1311,7 @@
         "p-limit": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+          "integrity": "sha1-uGvV8MJWkJEcdZD8v8IBDVSzzLg=",
           "dev": true,
           "requires": {
             "p-try": "^1.0.0"
@@ -2373,12 +2373,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -2393,17 +2395,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -2520,7 +2525,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -2532,6 +2538,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -2546,6 +2553,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -2553,12 +2561,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -2577,6 +2587,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -2657,7 +2668,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -2669,6 +2681,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -2790,6 +2803,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4088,12 +4102,12 @@
     "mobx": {
       "version": "5.8.0",
       "resolved": "https://registry.npmjs.org/mobx/-/mobx-5.8.0.tgz",
-      "integrity": "sha512-NsZB+9bF5j+nv9Qwk6bNeE3np26a4TbTGkMpOLf6o1zXoM9BtHPQn/00px4uZ2AXJXtQML5P4MEWdMm6icMIfQ=="
+      "integrity": "sha1-z1nq5Lqi/eQ4f/tkYrfM87SXsDw="
     },
     "mobx-react": {
       "version": "5.4.3",
       "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-5.4.3.tgz",
-      "integrity": "sha512-WC8yFlwvJ91hy8j6CrydAuFteUafcuvdITFQeHl3LRIf5ayfT/4W3M/byhEYD2BcJWejeXr8y4Rh2H26RunCRQ==",
+      "integrity": "sha1-Zwm33YlnDEDpgVkUrCyknMAr+0c=",
       "requires": {
         "hoist-non-react-statics": "^3.0.0",
         "react-lifecycles-compat": "^3.0.2"
@@ -4102,12 +4116,12 @@
     "mobx-react-devtools": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/mobx-react-devtools/-/mobx-react-devtools-6.0.3.tgz",
-      "integrity": "sha512-PY+lG6XeWaC0DFnDaVC7ImrHJQu7XVXNy4z4fmqHzWc3p+fJisKmaZNwgToO2vJGBghz98Mx2yXUBLw1Ba2mPQ=="
+      "integrity": "sha1-TVNsjN132fS4H16EFde+3MxqKpk="
     },
     "mocha": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/mocha/-/mocha-5.2.0.tgz",
-      "integrity": "sha512-2IUgKDhc3J7Uug+FxMXuqIyYzH7gJjXECKe/w43IGgQHTSj3InJi+yAA7T24L9bQMRKiUEHxEX37G5JpVUGLcQ==",
+      "integrity": "sha1-bYrlCPWRZ/lA8rWzxKYSrlDJCuY=",
       "dev": true,
       "requires": {
         "browser-stdout": "1.3.1",
@@ -4126,13 +4140,13 @@
         "commander": {
           "version": "2.15.1",
           "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz",
-          "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==",
+          "integrity": "sha1-30boZ9D8Kuxmo0ZitAapzK//Ww8=",
           "dev": true
         },
         "debug": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
           "dev": true,
           "requires": {
             "ms": "2.0.0"
@@ -4141,7 +4155,7 @@
         "glob": {
           "version": "7.1.2",
           "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=",
           "dev": true,
           "requires": {
             "fs.realpath": "^1.0.0",
@@ -4155,7 +4169,7 @@
         "supports-color": {
           "version": "5.4.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
-          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
+          "integrity": "sha1-HGszdALCE3YF7+GfEP7DkPb6q1Q=",
           "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
@@ -4321,7 +4335,7 @@
     "node-sass": {
       "version": "4.11.0",
       "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.11.0.tgz",
-      "integrity": "sha512-bHUdHTphgQJZaF1LASx0kAviPH7sGlcyNhWade4eVIpFp6tsn7SV8xNMTbsQFpEV9VXpnwTTnNYlfsZXgGgmkA==",
+      "integrity": "sha1-GD+uw5jpy+k7pDNi4naMqYimNpo=",
       "requires": {
         "async-foreach": "^0.1.3",
         "chalk": "^1.1.1",
@@ -5047,7 +5061,7 @@
     "react": {
       "version": "16.7.0",
       "resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz",
-      "integrity": "sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==",
+      "integrity": "sha512-ZUj2lkUDLjwJaGu4WD0dYSvsfIyhQt2l/AJDlg4ij+rCDU3fSFKgHWanNovViUoaWHAxgrpft3KGFfvWPZH5LA==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -5058,7 +5072,7 @@
     "react-dom": {
       "version": "16.7.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.7.0.tgz",
-      "integrity": "sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==",
+      "integrity": "sha512-GfG8Vh/jMcnJKDpv7T6O1pS/WVqiocjPQ9o9cscW8bjR9W36DT3Xb4pDZT70t1xyVvX48/NrTQGz0H7I3fCLhQ==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -5074,7 +5088,7 @@
     "react-jsx-parser": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/react-jsx-parser/-/react-jsx-parser-1.13.0.tgz",
-      "integrity": "sha512-oypIhM30ESZ8UkU0xDmzSV2Mtb2mVvtVnyNzjDxx2h2PCHpYFdDVLx1c15E3ot6nTIVlIh072tWwS3iJ7VVgmg==",
+      "integrity": "sha1-Dstuus1O41S68+h85SXcJuiPJtQ=",
       "requires": {
         "acorn-jsx": "^4.1.1",
         "react": "^16.4.0"
@@ -5454,7 +5468,7 @@
     "sass-loader": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.1.0.tgz",
-      "integrity": "sha512-+G+BKGglmZM2GUSfT9TLuEp6tzehHPjAMoRRItOojWIqIGPloVCMhNIQuG639eJ+y033PaGTSjLaTHts8Kw79w==",
+      "integrity": "sha1-Fv1ROMuLQkv4p1lSihly1yqtBp0=",
       "dev": true,
       "requires": {
         "clone-deep": "^2.0.1",
@@ -6157,7 +6171,7 @@
     "style-loader": {
       "version": "0.23.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz",
-      "integrity": "sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==",
+      "integrity": "sha1-y5FUYG8+dxq2xKtjcCahBJF02SU=",
       "dev": true,
       "requires": {
         "loader-utils": "^1.1.0",
@@ -6167,7 +6181,7 @@
         "schema-utils": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
-          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "integrity": "sha1-C3mpMgTXtgDUsoUNH2bCo0lRx3A=",
           "dev": true,
           "requires": {
             "ajv": "^6.1.0",
@@ -6361,7 +6375,7 @@
     "ts-node": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-7.0.1.tgz",
-      "integrity": "sha512-BVwVbPJRspzNh2yfslyT1PSbl5uIk03EZlb493RKHN4qej/D06n1cEhjlOJG69oFsE7OT8XjpTUcYf6pKTLMhw==",
+      "integrity": "sha1-lWLcLR5tJI0kvFX3c+P2FDN9m68=",
       "dev": true,
       "requires": {
         "arrify": "^1.0.0",
@@ -6611,7 +6625,7 @@
     "uuid": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
-      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
+      "integrity": "sha1-G0r0lV6zB3xQHCOHL8ZROBFYcTE="
     },
     "v8-compile-cache": {
       "version": "2.0.2",
@@ -6756,7 +6770,7 @@
     "webpack-dev-server": {
       "version": "3.1.14",
       "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.1.14.tgz",
-      "integrity": "sha512-mGXDgz5SlTxcF3hUpfC8hrQ11yhAttuUQWf1Wmb+6zo3x6rb7b9mIfuQvAPLdfDRCGRGvakBWHdHOa0I9p/EVQ==",
+      "integrity": "sha1-YPsim5l/xaCh/GI3QhAwGAlZ1Gk=",
       "dev": true,
       "requires": {
         "ansi-html": "0.0.7",
@@ -6794,7 +6808,7 @@
         "debug": {
           "version": "3.2.6",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "integrity": "sha1-6D0X3hbYp++3cX7b5fsQE17uYps=",
           "dev": true,
           "requires": {
             "ms": "^2.1.1"
@@ -6809,7 +6823,7 @@
         "schema-utils": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
-          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "integrity": "sha1-C3mpMgTXtgDUsoUNH2bCo0lRx3A=",
           "dev": true,
           "requires": {
             "ajv": "^6.1.0",
@@ -6820,7 +6834,7 @@
         "webpack-log": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz",
-          "integrity": "sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==",
+          "integrity": "sha1-W3ko4GN1k/EZ0y9iJ8HgrDHhtH8=",
           "dev": true,
           "requires": {
             "ansi-colors": "^3.0.0",
diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx
index 7c523e70d..8bdf1849a 100644
--- a/src/views/freeformcanvas/CollectionFreeFormView.tsx
+++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx
@@ -26,19 +26,23 @@ export class CollectionFreeFormView extends React.Component<IProps> {
     @action
     onPointerDown = (e: React.PointerEvent): void => {
         e.stopPropagation();
-        this._isPointerDown = true;
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.addEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-        document.addEventListener("pointerup", this.onPointerUp);
+        if (e.button === 2) {
+            this._isPointerDown = true;
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.addEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+            document.addEventListener("pointerup", this.onPointerUp);
+        }
     }
 
     @action
     onPointerUp = (e: PointerEvent): void => {
         e.stopPropagation();
-        this._isPointerDown = false;
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
+        if (e.button === 2) {
+            this._isPointerDown = false;
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+        }
     }
 
     @action
@@ -69,7 +73,7 @@ export class CollectionFreeFormView extends React.Component<IProps> {
         const panx: number = doc.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
         const pany: number = doc.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
         return (
-            <div className="collectionfreeformview-container" onPointerDown={this.onPointerDown} onWheel={this.onPointerWheel}>
+            <div className="collectionfreeformview-container" onPointerDown={this.onPointerDown} onWheel={this.onPointerWheel} onContextMenu={(e) => e.preventDefault()}>
                 <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px)`, transformOrigin: '50% 50%' }}>
                     <div className="node-container">
                         {value.map(doc => {
diff --git a/src/views/freeformcanvas/FreeFormCanvas.tsx b/src/views/freeformcanvas/FreeFormCanvas.tsx
index cee093fcb..9ef5ab8f7 100644
--- a/src/views/freeformcanvas/FreeFormCanvas.tsx
+++ b/src/views/freeformcanvas/FreeFormCanvas.tsx
@@ -27,19 +27,23 @@ export class FreeFormCanvas extends React.Component<IProps> {
     @action
     onPointerDown = (e: React.PointerEvent): void => {
         e.stopPropagation();
-        this._isPointerDown = true;
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.addEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-        document.addEventListener("pointerup", this.onPointerUp);
+        if (e.button === 2) {
+            this._isPointerDown = true;
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.addEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+            document.addEventListener("pointerup", this.onPointerUp);
+        }
     }
 
     @action
     onPointerUp = (e: PointerEvent): void => {
         e.stopPropagation();
-        this._isPointerDown = false;
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
+        if (e.button === 2) {
+            this._isPointerDown = false;
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+        }
 
         // let doc = this.props.store.Docs[0];
         // let dataField = doc.GetFieldT(KeyStore.Data, TextField);
@@ -68,7 +72,7 @@ export class FreeFormCanvas extends React.Component<IProps> {
     render() {
         let store = this.props.store;
         return (
-            <div className="freeformcanvas-container" onPointerDown={this.onPointerDown} onWheel={this.onPointerWheel}>
+            <div className="freeformcanvas-container" onPointerDown={this.onPointerDown} onWheel={this.onPointerWheel} onContextMenu={(e) => e.preventDefault()}>
                 <div className="freeformcanvas" style={{ transform: store.Transform, transformOrigin: '50% 50%' }}>
                     <div className="node-container">
                         {this.props.store.Docs.map(doc => {
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index b9fbef91c..1c9f850ed 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -28,6 +28,14 @@ export class DocumentView extends React.Component<IProps> {
         return this.props.dvm.Doc.GetFieldValue(KeyStore.Y, NumberField, Number(0));
     }
 
+    set x(x: number) {
+        this.props.dvm.Doc.SetFieldValue(KeyStore.X, x, NumberField)
+    }
+
+    set y(y: number) {
+        this.props.dvm.Doc.SetFieldValue(KeyStore.Y, y, NumberField)
+    }
+
     @computed
     get transform(): string {
         return `translate(${this.x}px, ${this.y}px)`;
@@ -64,6 +72,39 @@ export class DocumentView extends React.Component<IProps> {
         return this.props.dvm.Doc.GetFieldValue(KeyStore.LayoutFields, ListField, new Array<Key>());
     }
 
+    private _isPointerDown = false;
+
+    onPointerDown = (e: React.PointerEvent): void => {
+        e.stopPropagation();
+        if (e.button === 2) {
+            this._isPointerDown = true;
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.addEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+            document.addEventListener("pointerup", this.onPointerUp);
+        }
+    }
+
+    onPointerUp = (e: PointerEvent): void => {
+        e.stopPropagation();
+        if (e.button === 2) {
+            e.preventDefault();
+            this._isPointerDown = false;
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+        }
+    }
+
+    onPointerMove = (e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (!this._isPointerDown) {
+            return;
+        }
+        this.x += e.movementX;
+        this.y += e.movementY;
+    }
+
     render() {
         let doc = this.props.dvm.Doc;
         let bindings: any = {
@@ -83,7 +124,10 @@ export class DocumentView extends React.Component<IProps> {
                 transform: this.transform,
                 width: this.width,
                 height: this.height
-            }}>
+            }} onPointerDown={this.onPointerDown} onContextMenu={
+                (e) => {
+                    e.preventDefault()
+                }}>
                 <JsxParser
                     components={{ FieldTextBox, FreeFormCanvas, CollectionFreeFormView }}
                     bindings={bindings}