From c6781458648c4265f2f995be526529be54312f54 Mon Sep 17 00:00:00 2001
From: Fawn <fangrui_tong@brown.edu>
Date: Wed, 6 Mar 2019 18:58:00 -0500
Subject: all inking code

---
 src/client/views/InkingControl.tsx | 77 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 src/client/views/InkingControl.tsx

(limited to 'src/client/views/InkingControl.tsx')

diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
new file mode 100644
index 000000000..9162eeb09
--- /dev/null
+++ b/src/client/views/InkingControl.tsx
@@ -0,0 +1,77 @@
+import { observable, action, computed } from "mobx";
+import { CirclePicker, ColorResult } from 'react-color'
+import React = require("react");
+import "./InkingCanvas.scss"
+import { InkTool } from "../../fields/InkField";
+
+
+export class InkingControl extends React.Component {
+    private static Instance: InkingControl;
+
+    @observable private _selectedTool: InkTool = InkTool.None;
+    @observable private _selectedColor: string = "#f44336";
+    @observable private _selectedWidth: string = "25";
+
+    private constructor(props: Readonly<{}>) {
+        super(props);
+    }
+
+    static getInstance = (): InkingControl => {
+        if (!InkingControl.Instance) {
+            InkingControl.Instance = new InkingControl({});
+        }
+        return InkingControl.Instance;
+    }
+
+    @action
+    switchTool = (tool: InkTool): void => {
+        this._selectedTool = tool;
+    }
+
+    @action
+    switchColor = (color: ColorResult): void => {
+        this._selectedColor = color.hex;
+    }
+
+    @action
+    switchWidth = (width: string): void => {
+        this._selectedWidth = width;
+    }
+
+    @computed
+    get selectedTool() {
+        return this._selectedTool;
+    }
+
+    @computed
+    get selectedColor() {
+        return this._selectedColor;
+    }
+
+    @computed
+    get selectedWidth() {
+        return this._selectedWidth;
+    }
+
+    render() {
+        console.log(this._selectedTool);
+        return (
+            <div className="inking-control">
+                <div className="ink-tools ink-panel">
+                    <button onClick={() => InkingControl.getInstance().switchTool(InkTool.Pen)}>Pen</button>
+                    <button onClick={() => InkingControl.getInstance().switchTool(InkTool.Highlighter)}>Highlighter</button>
+                    <button onClick={() => InkingControl.getInstance().switchTool(InkTool.Eraser)}>Eraser</button>
+                    <button onClick={() => InkingControl.getInstance().switchTool(InkTool.None)}> None</button>
+                </div>
+                <div className="ink-size ink-panel">
+                    <label htmlFor="stroke-width">Size</label>
+                    <input type="range" min="1" max="100" defaultValue="25" name="stroke-width"
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => InkingControl.getInstance().switchWidth(e.target.value)} />
+                </div>
+                <div className="ink-color ink-panel">
+                    <CirclePicker onChange={InkingControl.getInstance().switchColor} />
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 9e33d53b7dfe1a7e8bd515a0a985c9b37057aca1 Mon Sep 17 00:00:00 2001
From: yipstanley <stanley_yip@brown.edu>
Date: Thu, 7 Mar 2019 23:53:13 -0500
Subject: fixes/changes

---
 package-lock.json                                  | 71 +++++++++++++---------
 src/client/views/InkingCanvas.scss                 | 10 +--
 src/client/views/InkingCanvas.tsx                  | 46 +++++++-------
 src/client/views/InkingControl.tsx                 | 36 +++++------
 src/client/views/InkingStroke.tsx                  |  6 +-
 .../views/collections/CollectionFreeFormView.tsx   |  4 --
 src/fields/InkField.ts                             |  6 +-
 7 files changed, 95 insertions(+), 84 deletions(-)

(limited to 'src/client/views/InkingControl.tsx')

diff --git a/package-lock.json b/package-lock.json
index a9da598c5..22c238491 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -107,7 +107,7 @@
     "@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/connect": {
@@ -223,7 +223,7 @@
     "@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/mongodb": {
@@ -388,7 +388,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": "*"
@@ -484,7 +484,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": "*"
       }
@@ -1057,7 +1057,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",
@@ -1648,7 +1648,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",
@@ -2094,7 +2094,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",
@@ -3424,11 +3424,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3441,15 +3443,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3552,7 +3557,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3562,6 +3568,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3574,6 +3581,7 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3673,7 +3681,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3683,6 +3692,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3788,6 +3798,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5530,7 +5541,7 @@
     "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"
@@ -5539,12 +5550,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",
@@ -5563,7 +5574,7 @@
         "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"
@@ -5572,7 +5583,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",
@@ -5586,7 +5597,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"
@@ -5845,7 +5856,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",
@@ -10029,7 +10040,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",
@@ -10061,7 +10072,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",
@@ -10096,7 +10107,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"
@@ -10528,7 +10539,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",
@@ -11321,7 +11332,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",
@@ -11744,7 +11755,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",
@@ -12118,7 +12129,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",
@@ -12503,7 +12514,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",
@@ -12575,7 +12586,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"
@@ -12722,7 +12733,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/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss
index 6168697aa..f654b194b 100644
--- a/src/client/views/InkingCanvas.scss
+++ b/src/client/views/InkingCanvas.scss
@@ -1,10 +1,10 @@
 .inking-canvas {
-    position: absolute;
-    top: 0px;
-    left: 0px; // z-index: 99; //overlays ink on top of everything
+    position: fixed;
+    top: -50000px;
+    left: -50000px; // z-index: 99; //overlays ink on top of everything
     svg {
-        width: 10000px;
-        height: 10000px;
+        width: 100000px;
+        height: 100000px;
         .highlight {
             mix-blend-mode: multiply;
         }
diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx
index fb1387b68..baf1567b7 100644
--- a/src/client/views/InkingCanvas.tsx
+++ b/src/client/views/InkingCanvas.tsx
@@ -10,6 +10,7 @@ import { JsxArgs } from "./nodes/DocumentView";
 import { InkingStroke } from "./InkingStroke";
 import "./InkingCanvas.scss"
 import { CollectionDockingView } from "./collections/CollectionDockingView";
+import { Utils } from "../../Utils";
 
 
 interface InkCanvasProps {
@@ -21,16 +22,10 @@ interface InkCanvasProps {
 export class InkingCanvas extends React.Component<InkCanvasProps> {
 
     private _isDrawing: boolean = false;
-    private _idGenerator: number = -1;
+    private _idGenerator: string = "";
 
     constructor(props: Readonly<InkCanvasProps>) {
         super(props);
-
-        this.handleMouseDown = this.handleMouseDown.bind(this);
-        this.handleMouseMove = this.handleMouseMove.bind(this);
-        this.handleMouseUp = this.handleMouseUp.bind(this);
-        this.relativeCoordinatesForEvent = this.relativeCoordinatesForEvent.bind(this);
-
     }
 
     get inkData(): StrokeMap {
@@ -51,35 +46,42 @@ export class InkingCanvas extends React.Component<InkCanvasProps> {
 
 
     @action
-    handleMouseDown = (e: React.MouseEvent): void => {
+    handleMouseDown = (e: React.PointerEvent): void => {
         if (e.button != 0 ||
-            InkingControl.getInstance().selectedTool === InkTool.None ||
-            InkingControl.getInstance().selectedTool === InkTool.Eraser) {
+            InkingControl.Instance.selectedTool === InkTool.None) {
             return;
         }
+        e.stopPropagation()
+        if (InkingControl.Instance.selectedTool === InkTool.Eraser) {
+            return
+        }
+        e.stopPropagation()
         const point = this.relativeCoordinatesForEvent(e);
 
-        // start the new line
-        this._idGenerator = Date.now();
+        // start the new line, saves a uuid to represent the field of the stroke
+        this._idGenerator = Utils.GenerateGuid();
         let data = this.inkData;
         data.set(this._idGenerator,
             {
                 pathData: [point],
-                color: InkingControl.getInstance().selectedColor,
-                width: InkingControl.getInstance().selectedWidth,
-                tool: InkingControl.getInstance().selectedTool
+                color: InkingControl.Instance.selectedColor,
+                width: InkingControl.Instance.selectedWidth,
+                tool: InkingControl.Instance.selectedTool
             });
         this.inkData = data;
         this._isDrawing = true;
     }
 
     @action
-    handleMouseMove = (e: React.MouseEvent): void => {
+    handleMouseMove = (e: React.PointerEvent): void => {
         if (!this._isDrawing ||
-            InkingControl.getInstance().selectedTool === InkTool.None ||
-            InkingControl.getInstance().selectedTool === InkTool.Eraser) {
+            InkingControl.Instance.selectedTool === InkTool.None) {
             return;
         }
+        e.stopPropagation()
+        if (InkingControl.Instance.selectedTool === InkTool.Eraser) {
+            return
+        }
         const point = this.relativeCoordinatesForEvent(e);
 
         // add points to new line as it is being drawn
@@ -100,11 +102,13 @@ export class InkingCanvas extends React.Component<InkCanvasProps> {
 
     relativeCoordinatesForEvent = (e: React.MouseEvent): { x: number, y: number } => {
         let [x, y] = this.props.getScreenTransform().transformPoint(e.clientX, e.clientY);
+        x += 50000
+        y += 50000
         return { x, y };
     }
 
     @action
-    removeLine = (id: number): void => {
+    removeLine = (id: string): void => {
         let data = this.inkData;
         data.delete(id);
         this.inkData = data;
@@ -113,7 +117,7 @@ export class InkingCanvas extends React.Component<InkCanvasProps> {
     render() {
         // styling for cursor
         let canvasStyle = {};
-        if (InkingControl.getInstance().selectedTool === InkTool.None) {
+        if (InkingControl.Instance.selectedTool === InkTool.None) {
             canvasStyle = { pointerEvents: "none" };
         } else {
             canvasStyle = { pointerEvents: "auto", cursor: "crosshair" };
@@ -147,7 +151,7 @@ export class InkingCanvas extends React.Component<InkCanvasProps> {
         return (
 
             <div className="inking-canvas" style={canvasStyle}
-                onMouseDown={this.handleMouseDown} onMouseMove={this.handleMouseMove} >
+                onPointerDown={this.handleMouseDown} onPointerMove={this.handleMouseMove} >
                 <svg>
                     {paths}
                 </svg>
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index 9162eeb09..929fb42a1 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -3,24 +3,18 @@ import { CirclePicker, ColorResult } from 'react-color'
 import React = require("react");
 import "./InkingCanvas.scss"
 import { InkTool } from "../../fields/InkField";
+import { observer } from "mobx-react";
 
-
+@observer
 export class InkingControl extends React.Component {
-    private static Instance: InkingControl;
-
+    static Instance: InkingControl = new InkingControl({});
     @observable private _selectedTool: InkTool = InkTool.None;
     @observable private _selectedColor: string = "#f44336";
     @observable private _selectedWidth: string = "25";
 
-    private constructor(props: Readonly<{}>) {
+    constructor(props: Readonly<{}>) {
         super(props);
-    }
-
-    static getInstance = (): InkingControl => {
-        if (!InkingControl.Instance) {
-            InkingControl.Instance = new InkingControl({});
-        }
-        return InkingControl.Instance;
+        InkingControl.Instance = this
     }
 
     @action
@@ -53,23 +47,29 @@ export class InkingControl extends React.Component {
         return this._selectedWidth;
     }
 
+    selected = (tool: InkTool) => {
+        if (this._selectedTool === tool) {
+            return { backgroundColor: "black", color: "white" }
+        }
+        return {}
+    }
+
     render() {
-        console.log(this._selectedTool);
         return (
             <div className="inking-control">
                 <div className="ink-tools ink-panel">
-                    <button onClick={() => InkingControl.getInstance().switchTool(InkTool.Pen)}>Pen</button>
-                    <button onClick={() => InkingControl.getInstance().switchTool(InkTool.Highlighter)}>Highlighter</button>
-                    <button onClick={() => InkingControl.getInstance().switchTool(InkTool.Eraser)}>Eraser</button>
-                    <button onClick={() => InkingControl.getInstance().switchTool(InkTool.None)}> None</button>
+                    <button onClick={() => this.switchTool(InkTool.Pen)} style={this.selected(InkTool.Pen)}>Pen</button>
+                    <button onClick={() => this.switchTool(InkTool.Highlighter)} style={this.selected(InkTool.Highlighter)}>Highlighter</button>
+                    <button onClick={() => this.switchTool(InkTool.Eraser)} style={this.selected(InkTool.Eraser)}>Eraser</button>
+                    <button onClick={() => this.switchTool(InkTool.None)} style={this.selected(InkTool.None)}> None</button>
                 </div>
                 <div className="ink-size ink-panel">
                     <label htmlFor="stroke-width">Size</label>
                     <input type="range" min="1" max="100" defaultValue="25" name="stroke-width"
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => InkingControl.getInstance().switchWidth(e.target.value)} />
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.switchWidth(e.target.value)} />
                 </div>
                 <div className="ink-color ink-panel">
-                    <CirclePicker onChange={InkingControl.getInstance().switchColor} />
+                    <CirclePicker onChange={this.switchColor} />
                 </div>
             </div>
         )
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index bab9f3a60..d724421d3 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -6,12 +6,12 @@ import React = require("react");
 
 
 interface StrokeProps {
-    id: number;
+    id: string;
     line: Array<{ x: number, y: number }>;
     color: string;
     width: string;
     tool: InkTool;
-    deleteCallback: (index: number) => void;
+    deleteCallback: (index: string) => void;
 }
 
 @observer
@@ -24,7 +24,7 @@ export class InkingStroke extends React.Component<StrokeProps> {
     private _canvasColor: string = "#cdcdcd";
 
     deleteStroke = (e: React.MouseEvent): void => {
-        if (InkingControl.getInstance().selectedTool === InkTool.Eraser && e.buttons === 1) {
+        if (InkingControl.Instance.selectedTool === InkTool.Eraser && e.buttons === 1) {
             this.props.deleteCallback(this.props.id);
         }
     }
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index dfc9d41e6..aac0153dd 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -69,10 +69,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        // if ink is selected, don't pan
-        let isInking = !(InkingControl.getInstance().selectedTool === InkTool.None);
-        if (isInking) return;
-
         if ((e.button === 2 && this.props.active()) ||
             !e.defaultPrevented) {
             document.removeEventListener("pointermove", this.onPointerMove);
diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts
index 0af72a8ea..a475e2aae 100644
--- a/src/fields/InkField.ts
+++ b/src/fields/InkField.ts
@@ -14,7 +14,7 @@ export interface StrokeData {
     width: string;
     tool: InkTool;
 }
-export type StrokeMap = Map<number, StrokeData>;
+export type StrokeMap = Map<string, StrokeData>;
 
 export class InkField extends BasicField<StrokeMap> {
     constructor(data: StrokeMap = new Map, id?: FieldId, save: boolean = true) {
@@ -38,9 +38,9 @@ export class InkField extends BasicField<StrokeMap> {
     }
 
     static FromJson(id: string, data: any): InkField {
-        let map = new Map<number, StrokeData>();
+        let map = new Map<string, StrokeData>();
         Object.keys(data).forEach(key => {
-            map.set(parseInt(key), data[key]);
+            map.set(key, data[key]);
         });
         return new InkField(map, id, false);
     }
-- 
cgit v1.2.3-70-g09d2

