From c6781458648c4265f2f995be526529be54312f54 Mon Sep 17 00:00:00 2001 From: Fawn Date: Wed, 6 Mar 2019 18:58:00 -0500 Subject: all inking code --- src/fields/InkField.ts | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 src/fields/InkField.ts (limited to 'src/fields/InkField.ts') diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts new file mode 100644 index 000000000..0af72a8ea --- /dev/null +++ b/src/fields/InkField.ts @@ -0,0 +1,47 @@ +import { BasicField } from "./BasicField"; +import { Types } from "../server/Message"; +import { FieldId } from "./Field"; + +export enum InkTool { + None, + Pen, + Highlighter, + Eraser +} +export interface StrokeData { + pathData: Array<{ x: number, y: number }>; + color: string; + width: string; + tool: InkTool; +} +export type StrokeMap = Map; + +export class InkField extends BasicField { + constructor(data: StrokeMap = new Map, id?: FieldId, save: boolean = true) { + super(data, save, id); + } + + ToScriptString(): string { + return `new InkField("${this.Data}")`; + } + + Copy() { + return new InkField(this.Data); + } + + ToJson(): { _id: string; type: Types; data: any; } { + return { + type: Types.Ink, + data: this.Data, + _id: this.Id, + } + } + + static FromJson(id: string, data: any): InkField { + let map = new Map(); + Object.keys(data).forEach(key => { + map.set(parseInt(key), data[key]); + }); + return new InkField(map, id, false); + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 9e33d53b7dfe1a7e8bd515a0a985c9b37057aca1 Mon Sep 17 00:00:00 2001 From: yipstanley 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/fields/InkField.ts') 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 { private _isDrawing: boolean = false; - private _idGenerator: number = -1; + private _idGenerator: string = ""; constructor(props: Readonly) { 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 { @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 { 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 { 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 { return (
+ onPointerDown={this.handleMouseDown} onPointerMove={this.handleMouseMove} > {paths} 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 (
- - - - + + + +
) => InkingControl.getInstance().switchWidth(e.target.value)} /> + onChange={(e: React.ChangeEvent) => this.switchWidth(e.target.value)} />
- +
) 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 { 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; +export type StrokeMap = Map; export class InkField extends BasicField { constructor(data: StrokeMap = new Map, id?: FieldId, save: boolean = true) { @@ -38,9 +38,9 @@ export class InkField extends BasicField { } static FromJson(id: string, data: any): InkField { - let map = new Map(); + let map = new Map(); 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 From c4eff83d814b1f9b94b7fc75ca06e8f0474de20d Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 8 Mar 2019 11:44:28 -0500 Subject: working version of pdfs with annotations. --- src/client/documents/Documents.ts | 4 +- src/client/views/InkingCanvas.tsx | 17 ++-- .../views/collections/CollectionFreeFormView.scss | 2 +- .../views/collections/CollectionFreeFormView.tsx | 32 +++---- src/client/views/collections/CollectionPDFView.tsx | 74 +++++++++++++++++ src/client/views/collections/CollectionView.tsx | 78 ++++++++++------- src/client/views/nodes/DocumentView.tsx | 3 +- src/client/views/nodes/PDFBox.tsx | 97 ++++++++-------------- src/fields/InkField.ts | 1 + src/fields/KeyStore.ts | 3 + 10 files changed, 193 insertions(+), 118 deletions(-) create mode 100644 src/client/views/collections/CollectionPDFView.tsx (limited to 'src/fields/InkField.ts') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index f73823603..fb1c3d867 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -16,6 +16,7 @@ import { Field } from "../../fields/Field"; import { KeyValueBox } from "../views/nodes/KeyValueBox" import { PDFField } from "../../fields/PDFField"; import { PDFBox } from "../views/nodes/PDFBox"; +import { CollectionPDFView } from "../views/collections/CollectionPDFView"; export interface DocumentOptions { x?: number; @@ -97,8 +98,9 @@ export namespace Documents { } function GetPdfPrototype(): Document { if (!pdfProto) { - pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", CollectionView.LayoutString("AnnotationsKey"), + pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", CollectionPDFView.LayoutString("AnnotationsKey"), { x: 0, y: 0, nativeWidth: 600, width: 300, layoutKeys: [KeyStore.Data, KeyStore.Annotations] }); + pdfProto.SetNumber(KeyStore.Page, 1); pdfProto.SetText(KeyStore.BackgroundLayout, PDFBox.LayoutString()); } return pdfProto; diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index baf1567b7..14a779837 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -66,7 +66,8 @@ export class InkingCanvas extends React.Component { pathData: [point], color: InkingControl.Instance.selectedColor, width: InkingControl.Instance.selectedWidth, - tool: InkingControl.Instance.selectedTool + tool: InkingControl.Instance.selectedTool, + page: this.props.Document.GetNumber(KeyStore.CurPage, 0) }); this.inkData = data; this._isDrawing = true; @@ -137,15 +138,17 @@ export class InkingCanvas extends React.Component { // parse data from server let paths: Array = [] + let curPage = this.props.Document.GetNumber(KeyStore.CurPage, 0) Array.from(lines).map(item => { let id = item[0]; let strokeData = item[1]; - paths.push() + if (strokeData.page == 0 || strokeData.page == curPage) + paths.push() }) return ( diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index f496517f5..b059163ed 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -34,7 +34,7 @@ border-style: solid; box-sizing: border-box; - position: relative; + position: absolute; top: 0; left: 0; width: 100%; diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 74e70ef33..782313e55 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -12,6 +12,7 @@ import { undoBatch } from "../../util/UndoManager"; import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionSchemaView } from "../collections/CollectionSchemaView"; import { CollectionView } from "../collections/CollectionView"; +import { CollectionPDFView } from "../collections/CollectionPDFView"; import { InkingCanvas } from "../InkingCanvas"; import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; import { DocumentView } from "../nodes/DocumentView"; @@ -224,21 +225,24 @@ export class CollectionFreeFormView extends CollectionViewBase { @computed get views() { + var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1); const lvalue = this.props.Document.GetT>(this.props.fieldKey, ListField); if (lvalue && lvalue != FieldWaiting) { return lvalue.Data.map(doc => { - return (); + var page = doc.GetNumber(KeyStore.Page, 0); + return (page != curPage && page != 0) ? (null) : + (); }) } return null; @@ -248,7 +252,7 @@ export class CollectionFreeFormView extends CollectionViewBase { get backgroundView() { return !this.backgroundLayout ? (null) : ( { + + public static LayoutString(fieldKey: string = "DataKey") { + return `<${CollectionPDFView.name} Document={Document} + ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings} + isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`; + } + + @action onPageBack = () => this.curPage > 1 ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage - 1) : 0; + @action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : 0; + + @computed private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, 0); } + @computed private get numPages() { return this.props.Document.GetNumber(KeyStore.NumPages, 0); } + @computed private get uIButtons() { + return ( +
+ + +
); + } + + // CollectionView API starts here... + + public active: () => boolean = () => CollectionView.Active(this); + + @action + addDocument = (doc: Document): void => { + doc.SetNumber(KeyStore.Page, this.curPage); + CollectionView.AddDocument(this.props, doc); + } + + @action removeDocument = (doc: Document): boolean => { + return CollectionView.RemoveDocument(this.props, doc); + } + + specificContextMenu = (e: React.MouseEvent): void => { + if (!e.isPropagationStopped) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 + ContextMenu.Instance.addItem({ description: "PDFOptions", event: () => { } }) + } + } + + get collectionViewType(): CollectionViewType { return CollectionViewType.Freeform; } + + + @computed + get subView(): any { return CollectionView.SubView(this); } + + render() { + return (
+ {this.subView} + {this.props.isSelected() ? this.uIButtons : (null)} +
) + } +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 8d175ee35..504538e85 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -1,4 +1,4 @@ -import { action } from "mobx"; +import { action, computed } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { ListField } from "../../../fields/ListField"; @@ -28,32 +28,42 @@ export const COLLECTION_BORDER_WIDTH = 2; export class CollectionView extends React.Component { public static LayoutString(fieldKey: string = "DataKey") { - return ``; } - public active = () => { - var isSelected = this.props.isSelected(); - var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this); - var topMost = this.props.isTopMost; + + public active: () => boolean = () => CollectionView.Active(this); + + public static Active(self: CollectionView): boolean { + var isSelected = self.props.isSelected(); + var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == self); + var topMost = self.props.isTopMost; return isSelected || childSelected || topMost; } - @action + addDocument = (doc: Document): void => { - if (this.props.Document.Get(this.props.fieldKey) instanceof Field) { + CollectionView.AddDocument(this.props, doc); + } + removeDocument = (doc: Document): boolean => { + return CollectionView.RemoveDocument(this.props, doc); + } + + @action + public static AddDocument(props: CollectionViewProps, doc: Document) { + if (props.Document.Get(props.fieldKey) instanceof Field) { //TODO This won't create the field if it doesn't already exist - const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array()) + const value = props.Document.GetData(props.fieldKey, ListField, new Array()) value.push(doc); } else { - this.props.Document.SetData(this.props.fieldKey, [doc], ListField); + props.Document.SetData(props.fieldKey, [doc], ListField); } } - @action - removeDocument = (doc: Document): boolean => { + public static RemoveDocument(props: CollectionViewProps, doc: Document): boolean { //TODO This won't create the field if it doesn't already exist - const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array()) + const value = props.Document.GetData(props.fieldKey, ListField, new Array()) let index = -1; for (let i = 0; i < value.length; i++) { if (value[i].Id == doc.Id) { @@ -98,36 +108,40 @@ export class CollectionView extends React.Component { } } - render() { - let viewType = this.collectionViewType; - let subView: JSX.Element; + @computed + get subView() { return CollectionView.SubView(this); } + + public static SubView(self: CollectionView) { + let viewType = self.collectionViewType; + let subView = (null); switch (viewType) { case CollectionViewType.Freeform: - subView = () + subView = () break; case CollectionViewType.Schema: - subView = () + subView = () break; case CollectionViewType.Docking: - subView = () + subView = () break; case CollectionViewType.Tree: - subView = () - break; - default: - subView =
+ subView = () break; } + return subView; + } + + render() { return (
- {subView} + {this.subView}
) } } \ No newline at end of file diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 20526c256..41e93df35 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -12,6 +12,7 @@ import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"; import { CollectionSchemaView } from "../collections/CollectionSchemaView"; import { CollectionView, CollectionViewType } from "../collections/CollectionView"; +import { CollectionPDFView } from "../collections/CollectionPDFView"; import { ContextMenu } from "../ContextMenu"; import { FormattedTextBox } from "../nodes/FormattedTextBox"; import { ImageBox } from "../nodes/ImageBox"; @@ -195,7 +196,7 @@ export class DocumentView extends React.Component { } @computed get mainContent() { return { //very useful for keeping track of X and y position throughout the PDF Canvas private initX: number = 0; private initY: number = 0; + private initPage: boolean = false; //checks if tool is on private _toolOn: boolean = false; //checks if tool is on @@ -77,47 +77,36 @@ export class PDFBox extends React.Component { private _highlightTool = React.createRef(); //highlighter button reference private _highlightToolOn: boolean = false; private _pdfCanvas: any; + private _reactionDisposer: Opt; @observable private _perPageInfo: Object[] = []; //stores pageInfo @observable private _pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno @observable private _currAnno: any = [] - @observable private _page: number = 1; //default is the first page. - @observable private _numPages: number = 1; //default number of pages @observable private _interactive: boolean = false; @observable private _loaded: boolean = false; - /** - * for pagination backwards - */ - @action - onPageBack = () => { - if (this._page > 1) { - this._page -= 1; - this._currAnno = []; - this._perPageInfo[this._page] = this._pageInfo - this._pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default - if (this._perPageInfo[this._page - 1]) { - this._pageInfo = this._perPageInfo[this._page - 1]; - } - this.saveThumbnail(); - } + @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, 0); } + + componentDidMount() { + this._reactionDisposer = reaction( + () => this.curPage, + () => { + if (this.curPage && this.initPage) { + this.saveThumbnail(); + this._interactive = true; + } else { + if (this.curPage) + this.initPage = true; + } + }, + { fireImmediately: true }); + } - /** - * for pagination forwards - */ - @action - onPageForward = () => { - if (this._page < this._numPages) { - this._page += 1; - this._currAnno = []; - this._perPageInfo[this._page - 2] = this._pageInfo; - this._pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default - if (this._perPageInfo[this._page - 1]) { - this._pageInfo = this._perPageInfo[this._page - 1]; - } - this.saveThumbnail(); + componentWillUnmount() { + if (this._reactionDisposer) { + this._reactionDisposer(); } } @@ -386,8 +375,6 @@ export class PDFBox extends React.Component { } - - @action saveThumbnail = () => { setTimeout(() => { @@ -420,9 +407,11 @@ export class PDFBox extends React.Component { } }) } - this._numPages = page._transport.numPages; + + // bcz: the number of pages should really be set when the document is imported. + this.props.doc.SetNumber(KeyStore.NumPages, page._transport.numPages); if (this._perPageInfo.length == 0) { //Makes sure it only runs once - this._perPageInfo = [...Array(this._numPages)] + this._perPageInfo = [...Array(page._transport.numPages)] } this._loaded = true; } @@ -441,24 +430,9 @@ export class PDFBox extends React.Component { } } - @computed - get uIButtons() { - return ( -
- - - - - - - - - -
); - } - @computed get pdfContent() { + const page = this.curPage; const renderHeight = 2400; let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField); let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight; @@ -467,7 +441,7 @@ export class PDFBox extends React.Component { {({ measureRef }) =>
- +
} @@ -485,7 +459,6 @@ export class PDFBox extends React.Component { return [ this._pageInfo.area.filter(() => this._pageInfo.area).map((element: any) => element), this._currAnno.map((element: any) => element), - this.uIButtons,
{this.pdfContent} {proxy} diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts index a475e2aae..1108a04a5 100644 --- a/src/fields/InkField.ts +++ b/src/fields/InkField.ts @@ -13,6 +13,7 @@ export interface StrokeData { color: string; width: string; tool: InkTool; + page: number; } export type StrokeMap = Map; diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts index 259d1acaf..f67257093 100644 --- a/src/fields/KeyStore.ts +++ b/src/fields/KeyStore.ts @@ -4,6 +4,7 @@ export namespace KeyStore { export const Prototype = new Key("Prototype"); export const X = new Key("X"); export const Y = new Key("Y"); + export const Page = new Key("Page"); export const Title = new Key("Title"); export const Author = new Key("Author"); export const PanX = new Key("PanX"); @@ -27,5 +28,7 @@ export namespace KeyStore { export const ActiveFrame = new Key("ActiveFrame"); export const DocumentText = new Key("DocumentText"); export const Thumbnail = new Key("Thumbnail"); + export const CurPage = new Key("CurPage"); + export const NumPages = new Key("NumPages"); export const Ink = new Key("Ink"); } -- cgit v1.2.3-70-g09d2 From b52a583deffe7a3729e182840c0e3f1b1a4e4433 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 8 Mar 2019 17:53:36 -0500 Subject: fixed network updating of ink --- src/client/views/InkingCanvas.tsx | 11 +++++++++-- src/fields/InkField.ts | 7 ++++++- 2 files changed, 15 insertions(+), 3 deletions(-) (limited to 'src/fields/InkField.ts') diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index 14a779837..0d87c1239 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -1,5 +1,5 @@ import { observer } from "mobx-react"; -import { action } from "mobx"; +import { action, computed } from "mobx"; import { InkingControl } from "./InkingControl"; import React = require("react"); import { Transform } from "../util/Transform"; @@ -11,6 +11,8 @@ import { InkingStroke } from "./InkingStroke"; import "./InkingCanvas.scss" import { CollectionDockingView } from "./collections/CollectionDockingView"; import { Utils } from "../../Utils"; +import { FieldWaiting } from "../../fields/Field"; +import { getMapLikeKeys } from "mobx/lib/internal"; interface InkCanvasProps { @@ -28,8 +30,13 @@ export class InkingCanvas extends React.Component { super(props); } + @computed get inkData(): StrokeMap { - return new Map(this.props.Document.GetData(KeyStore.Ink, InkField, new Map)); + let map = this.props.Document.GetT(KeyStore.Ink, InkField); + if (!map || map === FieldWaiting) { + return new Map; + } + return new Map(map.Data); } set inkData(value: StrokeMap) { diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts index 1108a04a5..2a4ed18e7 100644 --- a/src/fields/InkField.ts +++ b/src/fields/InkField.ts @@ -1,6 +1,7 @@ import { BasicField } from "./BasicField"; import { Types } from "../server/Message"; import { FieldId } from "./Field"; +import { observable, ObservableMap } from "mobx"; export enum InkTool { None, @@ -38,8 +39,12 @@ export class InkField extends BasicField { } } + UpdateFromServer(data: any) { + this.data = new ObservableMap(data); + } + static FromJson(id: string, data: any): InkField { - let map = new Map(); + let map: StrokeMap = new Map(); Object.keys(data).forEach(key => { map.set(key, data[key]); }); -- cgit v1.2.3-70-g09d2