aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package-lock.json71
-rw-r--r--src/client/views/InkingCanvas.scss10
-rw-r--r--src/client/views/InkingCanvas.tsx46
-rw-r--r--src/client/views/InkingControl.tsx36
-rw-r--r--src/client/views/InkingStroke.tsx6
-rw-r--r--src/client/views/collections/CollectionFreeFormView.tsx4
-rw-r--r--src/fields/InkField.ts6
7 files changed, 95 insertions, 84 deletions
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);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-16 09:15:49 +0000