aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json7
-rw-r--r--src/client/views/DocumentDecorations.tsx21
-rw-r--r--src/client/views/Main.tsx2
-rw-r--r--src/client/views/MainOverlayTextBox.tsx2
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx2
-rw-r--r--src/client/views/collections/CollectionView.tsx1
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx8
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx272
-rw-r--r--src/client/views/collections/collectionFreeForm/MarqueeView.tsx6
-rw-r--r--src/client/views/nodes/CollectionFreeFormDocumentView.tsx33
-rw-r--r--src/client/views/nodes/DocumentView.scss6
-rw-r--r--src/client/views/nodes/DocumentView.tsx244
-rw-r--r--src/client/views/nodes/ImageBox.tsx2
-rw-r--r--src/server/authentication/models/user_model.ts3
-rw-r--r--src/server/database.ts2
-rw-r--r--src/server/index.ts2
-rw-r--r--tslint.json3
-rw-r--r--webpack.config.js19
18 files changed, 258 insertions, 377 deletions
diff --git a/package.json b/package.json
index eb4d9ac98..489bce7e1 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"description": "",
"main": "index.js",
"scripts": {
- "start": "nodemon --watch src/server/**/*.ts --exec ts-node src/server/index.ts",
+ "start": "ts-node-dev -- src/server/index.ts",
"build": "webpack --env production",
"test": "mocha -r ts-node/register test/**/*.ts",
"tsc": "tsc"
@@ -20,11 +20,14 @@
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
+ "fork-ts-checker-webpack-plugin": "^1.0.2",
"mocha": "^5.2.0",
"sass-loader": "^7.1.0",
"scss-loader": "0.0.1",
"style-loader": "^0.23.1",
+ "ts-loader": "^5.3.3",
"ts-node": "^7.0.1",
+ "ts-node-dev": "^1.0.0-pre.32",
"tslint": "^5.15.0",
"tslint-loader": "^3.5.4",
"typescript": "^3.4.1",
@@ -167,4 +170,4 @@
"uuid": "^3.3.2",
"xoauth2": "^1.2.0"
}
-}
+} \ No newline at end of file
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index b97a47a3c..16fac0694 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -1,7 +1,6 @@
import { action, computed, observable } from "mobx";
import { observer } from "mobx-react";
import { Key } from "../../fields/Key";
-//import ContentEditable from 'react-contenteditable'
import { KeyStore } from "../../fields/KeyStore";
import { ListField } from "../../fields/ListField";
import { NumberField } from "../../fields/NumberField";
@@ -70,7 +69,18 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
// TODO: Change field with switch statement
}
else {
- this._title = "changed";
+ if (this._documents.length > 0) {
+ let field = this._documents[0].props.Document.Get(this._fieldKey);
+ if (field instanceof TextField) {
+ this._documents.forEach(d =>
+ d.props.Document.Set(this._fieldKey, new TextField(this._title)));
+ }
+ else if (field instanceof NumberField) {
+ this._documents.forEach(d =>
+ d.props.Document.Set(this._fieldKey, new NumberField(+this._title)));
+ }
+ this._title = "changed";
+ }
}
e.target.blur();
}
@@ -124,7 +134,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
this._dragging = true;
document.removeEventListener("pointermove", this.onBackgroundMove);
document.removeEventListener("pointerup", this.onBackgroundUp);
- DragManager.StartDocumentDrag(SelectionManager.SelectedDocuments().map(docView => docView.ContentRef.current!), dragData, e.x, e.y, {
+ DragManager.StartDocumentDrag(SelectionManager.SelectedDocuments().map(docView => docView.ContentDiv!), dragData, e.x, e.y, {
handlers: {
dragComplete: action(() => this._dragging = false),
},
@@ -176,8 +186,6 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
}
onMinimizeMove = (e: PointerEvent): void => {
e.stopPropagation();
- if (e.button === 0) {
- }
}
onMinimizeUp = (e: PointerEvent): void => {
e.stopPropagation();
@@ -302,7 +310,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
MainOverlayTextBox.Instance.SetTextDoc();
SelectionManager.SelectedDocuments().forEach(element => {
- const rect = element.screenRect();
+ const rect = element.ContentDiv ? element.ContentDiv.getBoundingClientRect() : new DOMRect();
+
if (rect.width !== 0) {
let doc = element.props.Document;
let width = doc.GetNumber(KeyStore.Width, 0);
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 6c18e9ad5..0469211fa 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -211,7 +211,7 @@ export class Main extends React.Component {
let addSchemaNode = action(() => Documents.SchemaDocument([], { width: 200, height: 200, title: "a schema collection" }));
let addTreeNode = action(() => Documents.TreeDocument(this._northstarSchemas, { width: 250, height: 400, title: "northstar schemas", copyDraggedItems: true }));
let addVideoNode = action(() => Documents.VideoDocument(videourl, { width: 200, height: 200, title: "video node" }));
- let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 200, height: 200, title: "a schema collection" }));
+ let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 200, height: 200, title: "a pdf doc" }));
let addImageNode = action(() => Documents.ImageDocument(imgurl, { width: 200, height: 200, title: "an image of a cat" }));
let addWebNode = action(() => Documents.WebDocument(weburl, { width: 200, height: 200, title: "a sample web page" }));
let addAudioNode = action(() => Documents.AudioDocument(audiourl, { width: 200, height: 200, title: "audio node" }));
diff --git a/src/client/views/MainOverlayTextBox.tsx b/src/client/views/MainOverlayTextBox.tsx
index 6d43d88f0..422a45d59 100644
--- a/src/client/views/MainOverlayTextBox.tsx
+++ b/src/client/views/MainOverlayTextBox.tsx
@@ -101,7 +101,7 @@ export class MainOverlayTextBox extends React.Component<MainOverlayTextBoxProps>
s[0] = Math.sqrt((s[0] - t[0]) * (s[0] - t[0]) + (s[1] - t[1]) * (s[1] - t[1]));
return <div className="mainOverlayTextBox-textInput" style={{ pointerEvents: "none", transform: `translate(${x}px, ${y}px) scale(${1 / s[0]},${1 / s[0]})`, width: "auto", height: "auto" }} >
<div className="mainOverlayTextBox-textInput" onPointerDown={this.textBoxDown} ref={this._textProxyDiv} onScroll={this.textScroll} style={{ pointerEvents: "none", transform: `scale(${1}, ${1})`, width: `${w * s[0]}px`, height: `${h * s[0]}px` }}>
- <FormattedTextBox fieldKey={this._textFieldKey!} isOverlay={true} Document={this.TextDoc} isSelected={returnTrue} select={emptyFunction} isTopMost={true}
+ <FormattedTextBox fieldKey={this._textFieldKey} isOverlay={true} Document={this.TextDoc} isSelected={returnTrue} select={emptyFunction} isTopMost={true}
selectOnLoad={true} ContainingCollectionView={undefined} onActiveChanged={emptyFunction} active={returnTrue} ScreenToLocalTransform={() => this._textXf} focus={emptyDocFunction} />
</div>
</ div>;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 2b96e7678..4ea21b2f5 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -263,7 +263,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
let counter: any = this.htmlToElement(`<div class="messageCounter">${count}</div>`);
tab.element.append(counter);
counter.DashDocId = tab.contentItem.config.props.documentId;
- (tab as any).reactionDisposer = reaction(() => [f.GetT(KeyStore.LinkedFromDocs, ListField), f.GetT(KeyStore.LinkedToDocs, ListField)],
+ tab.reactionDisposer = reaction(() => [f.GetT(KeyStore.LinkedFromDocs, ListField), f.GetT(KeyStore.LinkedToDocs, ListField)],
(lists) => {
let count = (lists.length > 0 && lists[0] && lists[0]!.Data ? lists[0]!.Data.length : 0) +
(lists.length > 1 && lists[1] && lists[1]!.Data ? lists[1]!.Data.length : 0);
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 1f69a69e8..bd7a5635f 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -10,6 +10,7 @@ import { CurrentUserUtils } from '../../../server/authentication/models/current_
import { KeyStore } from '../../../fields/KeyStore';
import { observer } from 'mobx-react';
import { undoBatch } from '../../util/UndoManager';
+import { trace } from 'mobx';
@observer
export class CollectionView extends React.Component<FieldViewProps> {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 081b3eb6c..8868f7df0 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -23,10 +23,10 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
let l = this.props.LinkDocs;
let a = this.props.A;
let b = this.props.B;
- let x1 = a.GetNumber(KeyStore.X, 0) + (a.GetBoolean(KeyStore.Minimized, false) ? 5 : a.GetNumber(KeyStore.Width, 0) / 2);
- let y1 = a.GetNumber(KeyStore.Y, 0) + (a.GetBoolean(KeyStore.Minimized, false) ? 5 : a.GetNumber(KeyStore.Height, 0) / 2);
- let x2 = b.GetNumber(KeyStore.X, 0) + (b.GetBoolean(KeyStore.Minimized, false) ? 5 : b.GetNumber(KeyStore.Width, 0) / 2);
- let y2 = b.GetNumber(KeyStore.Y, 0) + (b.GetBoolean(KeyStore.Minimized, false) ? 5 : b.GetNumber(KeyStore.Height, 0) / 2);
+ let x1 = a.GetNumber(KeyStore.X, 0) + (a.GetBoolean(KeyStore.Minimized, false) ? 5 : a.Width() / 2);
+ let y1 = a.GetNumber(KeyStore.Y, 0) + (a.GetBoolean(KeyStore.Minimized, false) ? 5 : a.Height() / 2);
+ let x2 = b.GetNumber(KeyStore.X, 0) + (b.GetBoolean(KeyStore.Minimized, false) ? 5 : b.Width() / 2);
+ let y2 = b.GetNumber(KeyStore.Y, 0) + (b.GetBoolean(KeyStore.Minimized, false) ? 5 : b.Height() / 2);
return (
<line key={Utils.GenerateGuid()} className="collectionfreeformlinkview-linkLine" onPointerDown={this.onPointerDown}
style={{ strokeWidth: `${l.length * 5}` }}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 03426cb27..fa3017258 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1,10 +1,8 @@
-import { action, computed, observable, runInAction, untracked } from "mobx";
+import { action, computed, observable, trace } from "mobx";
import { observer } from "mobx-react";
import Measure from "react-measure";
import { Document } from "../../../../fields/Document";
-import { FieldWaiting } from "../../../../fields/Field";
import { KeyStore } from "../../../../fields/KeyStore";
-import { TextField } from "../../../../fields/TextField";
import { emptyFunction, returnFalse, returnOne } from "../../../../Utils";
import { DocumentManager } from "../../../util/DocumentManager";
import { DragManager } from "../../../util/DragManager";
@@ -13,43 +11,54 @@ import { Transform } from "../../../util/Transform";
import { undoBatch } from "../../../util/UndoManager";
import { COLLECTION_BORDER_WIDTH } from "../../../views/globalCssVariables.scss";
import { InkingCanvas } from "../../InkingCanvas";
-import { Main } from "../../Main";
-import { CollectionFreeFormDocumentView, CollectionFreeFormDocumentViewProps } from "../../nodes/CollectionFreeFormDocumentView";
+import { MainOverlayTextBox } from "../../MainOverlayTextBox";
+import { CollectionFreeFormDocumentView } from "../../nodes/CollectionFreeFormDocumentView";
import { DocumentContentsView } from "../../nodes/DocumentContentsView";
import { DocumentViewProps } from "../../nodes/DocumentView";
-import { CollectionSubView, SubCollectionViewProps } from "../CollectionSubView";
+import { CollectionSubView } from "../CollectionSubView";
import { CollectionFreeFormLinksView } from "./CollectionFreeFormLinksView";
import { CollectionFreeFormRemoteCursors } from "./CollectionFreeFormRemoteCursors";
import "./CollectionFreeFormView.scss";
import { MarqueeView } from "./MarqueeView";
import React = require("react");
import v5 = require("uuid/v5");
-import { MainOverlayTextBox } from "../../MainOverlayTextBox";
@observer
export class CollectionFreeFormView extends CollectionSubView {
- public _canvasRef = React.createRef<HTMLDivElement>();
private _selectOnLoaded: string = ""; // id of document that should be selected once it's loaded (used for click-to-type)
+ private _lastX: number = 0;
+ private _lastY: number = 0;
+ @observable private _pwidth: number = 0;
+ @observable private _pheight: number = 0;
- public addLiveTextBox = (newBox: Document) => {
- // mark this collection so that when the text box is created we can send it the SelectOnLoad prop to focus itself and receive text input
- this._selectOnLoaded = newBox.Id;
+ @computed get nativeWidth() { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); }
+ @computed get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
+ private get borderWidth() { return this.isAnnotationOverlay ? 0 : COLLECTION_BORDER_WIDTH; }
+ private get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey.Id === KeyStore.Annotations.Id; } // bcz: ? Why do we need to compare Id's?
+ private childViews = () => this.views;
+ private panX = () => this.props.Document.GetNumber(KeyStore.PanX, 0);
+ private panY = () => this.props.Document.GetNumber(KeyStore.PanY, 0);
+ private zoomScaling = () => this.props.Document.GetNumber(KeyStore.Scale, 1);
+ private centeringShiftX = () => !this.nativeWidth ? this._pwidth / 2 : 0; // shift so pan position is at center of window for non-overlay collections
+ private centeringShiftY = () => !this.nativeHeight ? this._pheight / 2 : 0;// shift so pan position is at center of window for non-overlay collections
+ private getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.borderWidth, -this.borderWidth).translate(-this.centeringShiftX(), -this.centeringShiftY()).transform(this.getLocalTransform());
+ private getContainerTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.borderWidth, -this.borderWidth);
+ private getLocalTransform = (): Transform => Transform.Identity().scale(1 / this.zoomScaling()).translate(this.panX(), this.panY());
+ private addLiveTextBox = (newBox: Document) => {
+ this._selectOnLoaded = newBox.Id;// track the new text box so we can give it a prop that tells it to focus itself when it's displayed
this.addDocument(newBox, false);
}
-
- public addDocument = (newBox: Document, allowDuplicates: boolean) => {
+ private addDocument = (newBox: Document, allowDuplicates: boolean) => {
if (this.isAnnotationOverlay) {
newBox.SetNumber(KeyStore.Zoom, this.props.Document.GetNumber(KeyStore.Scale, 1));
}
return this.props.addDocument(this.bringToFront(newBox), false);
}
-
- public selectDocuments = (docs: Document[]) => {
+ private selectDocuments = (docs: Document[]) => {
SelectionManager.DeselectAll;
docs.map(doc => DocumentManager.Instance.getDocumentView(doc)).filter(dv => dv).map(dv =>
SelectionManager.SelectDoc(dv!, true));
}
-
public getActiveDocuments = () => {
var curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1);
return this.props.Document.GetList(this.props.fieldKey, [] as Document[]).reduce((active, doc) => {
@@ -61,23 +70,6 @@ export class CollectionFreeFormView extends CollectionSubView {
}, [] as Document[]);
}
- @observable public DownX: number = 0;
- @observable public DownY: number = 0;
- @observable private _lastX: number = 0;
- @observable private _lastY: number = 0;
- @observable private _pwidth: number = 0;
- @observable private _pheight: number = 0;
-
- @computed get panX(): number { return this.props.Document.GetNumber(KeyStore.PanX, 0); }
- @computed get panY(): number { return this.props.Document.GetNumber(KeyStore.PanY, 0); }
- @computed get scale(): number { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
- @computed get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey.Id === KeyStore.Annotations.Id; } // bcz: ? Why do we need to compare Id's?
- @computed get nativeWidth() { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); }
- @computed get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
- @computed get zoomScaling() { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
- @computed get centeringShiftX() { return !this.props.Document.GetNumber(KeyStore.NativeWidth, 0) ? this._pwidth / 2 : 0; } // shift so pan position is at center of window for non-overlay collections
- @computed get centeringShiftY() { return !this.props.Document.GetNumber(KeyStore.NativeHeight, 0) ? this._pheight / 2 : 0; }// shift so pan position is at center of window for non-overlay collections
-
@undoBatch
@action
drop = (e: Event, de: DragManager.DropEvent) => {
@@ -89,6 +81,7 @@ export class CollectionFreeFormView extends CollectionSubView {
de.data.droppedDocuments.map(d => {
d.SetNumber(KeyStore.X, x + (d.GetNumber(KeyStore.X, 0) - dropX));
d.SetNumber(KeyStore.Y, y + (d.GetNumber(KeyStore.Y, 0) - dropY));
+ console.log("x = " + d.GetNumber(KeyStore.X, 0) + " y = " + d.GetNumber(KeyStore.X, 0));
if (!d.GetNumber(KeyStore.Width, 0)) {
d.SetNumber(KeyStore.Width, 300);
}
@@ -115,13 +108,13 @@ export class CollectionFreeFormView extends CollectionSubView {
var dv = DocumentManager.Instance.getDocumentView(doc);
return childSelected || (dv && SelectionManager.IsSelected(dv) ? true : false);
}, false);
- if (((e.button === 2 && (!this.isAnnotationOverlay || this.zoomScaling !== 1)) || (e.button === 0 && e.altKey)) && (childSelected || this.props.active())) {
+ if (((e.button === 2 && (!this.isAnnotationOverlay || this.zoomScaling() !== 1)) || (e.button === 0 && e.altKey)) && (childSelected || this.props.active())) {
document.removeEventListener("pointermove", this.onPointerMove);
document.addEventListener("pointermove", this.onPointerMove);
document.removeEventListener("pointerup", this.onPointerUp);
document.addEventListener("pointerup", this.onPointerUp);
- this._lastX = this.DownX = e.pageX;
- this._lastY = this.DownY = e.pageY;
+ this._lastX = e.pageX;
+ this._lastY = e.pageY;
}
}
@@ -141,9 +134,9 @@ export class CollectionFreeFormView extends CollectionSubView {
let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
if (!this.isAnnotationOverlay) {
let minx = docs.length ? docs[0].GetNumber(KeyStore.X, 0) : 0;
- let maxx = docs.length ? docs[0].GetNumber(KeyStore.Width, 0) + minx : minx;
+ let maxx = docs.length ? docs[0].Width() + minx : minx;
let miny = docs.length ? docs[0].GetNumber(KeyStore.Y, 0) : 0;
- let maxy = docs.length ? docs[0].GetNumber(KeyStore.Height, 0) + miny : miny;
+ let maxy = docs.length ? docs[0].Height() + miny : miny;
let ranges = docs.filter(doc => doc).reduce((range, doc) => {
let x = doc.GetNumber(KeyStore.X, 0);
let xe = x + doc.GetNumber(KeyStore.Width, 0);
@@ -152,14 +145,14 @@ export class CollectionFreeFormView extends CollectionSubView {
return [[range[0][0] > x ? x : range[0][0], range[0][1] < xe ? xe : range[0][1]],
[range[1][0] > y ? y : range[1][0], range[1][1] < ye ? ye : range[1][1]]];
}, [[minx, maxx], [miny, maxy]]);
- let panelwidth = this._pwidth / this.scale / 2;
- let panelheight = this._pheight / this.scale / 2;
+ let panelwidth = this._pwidth / this.zoomScaling() / 2;
+ let panelheight = this._pheight / this.zoomScaling() / 2;
if (x - dx < ranges[0][0] - panelwidth) x = ranges[0][1] + panelwidth + dx;
if (x - dx > ranges[0][1] + panelwidth) x = ranges[0][0] - panelwidth + dx;
if (y - dy < ranges[1][0] - panelheight) y = ranges[1][1] + panelheight + dy;
if (y - dy > ranges[1][1] + panelheight) y = ranges[1][0] - panelheight + dy;
}
- this.SetPan(x - dx, y - dy);
+ this.setPan(x - dx, y - dy);
this._lastX = e.pageX;
this._lastY = e.pageY;
e.stopPropagation();
@@ -180,44 +173,36 @@ export class CollectionFreeFormView extends CollectionSubView {
return;
}
e.stopPropagation();
- let coefficient = 1000;
+ const coefficient = 1000;
if (e.ctrlKey) {
- var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
- var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
- const coefficient = 1000;
let deltaScale = (1 - (e.deltaY / coefficient));
- this.props.Document.SetNumber(KeyStore.NativeWidth, nativeWidth * deltaScale);
- this.props.Document.SetNumber(KeyStore.NativeHeight, nativeHeight * deltaScale);
+ this.props.Document.SetNumber(KeyStore.NativeWidth, this.nativeWidth * deltaScale);
+ this.props.Document.SetNumber(KeyStore.NativeHeight, this.nativeHeight * deltaScale);
e.stopPropagation();
e.preventDefault();
} else {
// if (modes[e.deltaMode] === 'pixels') coefficient = 50;
// else if (modes[e.deltaMode] === 'lines') coefficient = 1000; // This should correspond to line-height??
- let transform = this.getTransform();
-
let deltaScale = (1 - (e.deltaY / coefficient));
- if (deltaScale * this.zoomScaling < 1 && this.isAnnotationOverlay) {
- deltaScale = 1 / this.zoomScaling;
+ if (deltaScale * this.zoomScaling() < 1 && this.isAnnotationOverlay) {
+ deltaScale = 1 / this.zoomScaling();
}
- let [x, y] = transform.transformPoint(e.clientX, e.clientY);
-
- let localTransform = this.getLocalTransform();
- localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y);
- // console.log(localTransform)
+ let [x, y] = this.getTransform().transformPoint(e.clientX, e.clientY);
+ let localTransform = this.getLocalTransform().inverse().scaleAbout(deltaScale, x, y);
this.props.Document.SetNumber(KeyStore.Scale, localTransform.Scale);
- this.SetPan(-localTransform.TranslateX / localTransform.Scale, -localTransform.TranslateY / localTransform.Scale);
+ this.setPan(-localTransform.TranslateX / localTransform.Scale, -localTransform.TranslateY / localTransform.Scale);
e.stopPropagation();
}
}
@action
- private SetPan(panX: number, panY: number) {
+ setPan(panX: number, panY: number) {
MainOverlayTextBox.Instance.SetTextDoc();
- var x1 = this.getLocalTransform().inverse().Scale;
- const newPanX = Math.min((1 - 1 / x1) * this.nativeWidth, Math.max(0, panX));
- const newPanY = Math.min((1 - 1 / x1) * this.nativeHeight, Math.max(0, panY));
+ var scale = this.getLocalTransform().inverse().Scale;
+ const newPanX = Math.min((1 - 1 / scale) * this.nativeWidth, Math.max(0, panX));
+ const newPanY = Math.min((1 - 1 / scale) * this.nativeHeight, Math.max(0, panY));
this.props.Document.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX);
this.props.Document.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY);
}
@@ -233,39 +218,18 @@ export class CollectionFreeFormView extends CollectionSubView {
@action
bringToFront(doc: Document) {
- const { fieldKey: fieldKey, Document: Document } = this.props;
-
- const value: Document[] = Document.GetList<Document>(fieldKey, []).slice();
- value.sort((doc1, doc2) => {
- if (doc1 === doc) {
- return 1;
- }
- if (doc2 === doc) {
- return -1;
- }
+ this.props.Document.GetList<Document>(this.props.fieldKey, []).slice().sort((doc1, doc2) => {
+ if (doc1 === doc) return 1;
+ if (doc2 === doc) return -1;
return doc1.GetNumber(KeyStore.ZIndex, 0) - doc2.GetNumber(KeyStore.ZIndex, 0);
- }).map((doc, index) =>
- doc.SetNumber(KeyStore.ZIndex, index + 1));
+ }).map((doc, index) => doc.SetNumber(KeyStore.ZIndex, index + 1));
return doc;
}
- @computed get backgroundLayout(): string | undefined {
- let field = this.props.Document.GetT(KeyStore.BackgroundLayout, TextField);
- if (field && field !== FieldWaiting) {
- return field.Data;
- }
- }
- @computed get overlayLayout(): string | undefined {
- let field = this.props.Document.GetT(KeyStore.OverlayLayout, TextField);
- if (field && field !== FieldWaiting) {
- return field.Data;
- }
- }
-
focusDocument = (doc: Document) => {
- let x = doc.GetNumber(KeyStore.X, 0) + doc.GetNumber(KeyStore.Width, 0) / 2;
- let y = doc.GetNumber(KeyStore.Y, 0) + doc.GetNumber(KeyStore.Height, 0) / 2;
- this.SetPan(x, y);
+ this.setPan(
+ doc.GetNumber(KeyStore.X, 0) + doc.Width() / 2,
+ doc.GetNumber(KeyStore.Y, 0) + doc.Height() / 2);
this.props.focus(this.props.Document);
}
@@ -280,7 +244,7 @@ export class CollectionFreeFormView extends CollectionSubView {
selectOnLoad: document.Id === this._selectOnLoaded,
PanelWidth: document.Width,
PanelHeight: document.Height,
- ContentScaling: this.noScaling,
+ ContentScaling: returnOne,
ContainingCollectionView: this.props.CollectionView,
focus: this.focusDocument,
parentActive: this.props.active,
@@ -290,92 +254,106 @@ export class CollectionFreeFormView extends CollectionSubView {
@computed
get views() {
- let pw = this.props.CollectionView.props
+ trace();
var curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1);
let docviews = this.props.Document.GetList(this.props.fieldKey, [] as Document[]).filter(doc => doc).reduce((prev, doc) => {
var page = doc.GetNumber(KeyStore.Page, -1);
- var zoom = doc.GetNumber(KeyStore.Zoom, 1);
- let zoomFade = 1;
- var documentView = DocumentManager.Instance.getDocumentView(doc);
- if (documentView) {
- let transform = (documentView.props.ScreenToLocalTransform().scale(documentView.props.ContentScaling())).inverse();
- var [sptX, sptY] = transform.transformPoint(0, 0);
- let [bptX, bptY] = transform.transformPoint(documentView.props.PanelWidth(), documentView.props.PanelHeight());
- let w = bptX - sptX;
- //zoomFade = area < 100 || area > 800 ? Math.max(0, Math.min(1, 2 - 5 * (zoom < this.scale ? this.scale / zoom : zoom / this.scale))) : 1;
- let fadeUp = .75 * 1800;
- let fadeDown = .075 * 1800;
- zoomFade = w < fadeDown || w > fadeUp ? Math.max(0, Math.min(1, 2 - (w < fadeDown ? fadeDown / w : w / fadeUp))) : 1;
- }
if (page === curPage || page === -1) {
- prev.push(<CollectionFreeFormDocumentView key={doc.Id} {...this.getDocumentViewProps(doc)} zoomFade={zoomFade} />);
+ prev.push(<CollectionFreeFormDocumentView key={doc.Id} {...this.getDocumentViewProps(doc)} />);
}
return prev;
}, [] as JSX.Element[]);
- setTimeout(() => { // bcz: surely there must be a better way ....
- this._selectOnLoaded = "";
- }, 600);
+ setTimeout(() => this._selectOnLoaded = "", 600);// bcz: surely there must be a better way ....
return docviews;
}
- @computed
- get backgroundView() {
- return !this.backgroundLayout ? (null) :
- (<DocumentContentsView {...this.getDocumentViewProps(this.props.Document)}
- layoutKey={KeyStore.BackgroundLayout} isTopMost={this.props.isTopMost} isSelected={returnFalse} select={emptyFunction} />);
- }
- @computed
- get overlayView() {
- return !this.overlayLayout ? (null) :
- (<DocumentContentsView {...this.getDocumentViewProps(this.props.Document)}
- layoutKey={KeyStore.OverlayLayout} isTopMost={this.props.isTopMost} isSelected={returnFalse} select={emptyFunction} />);
+ @action
+ onResize = (r: any) => {
+ this._pwidth = r.entry.width;
+ this._pheight = r.entry.height;
}
-
- @computed
- get borderWidth() {
- return this.isAnnotationOverlay ? 0 : COLLECTION_BORDER_WIDTH;
+ @action
+ onCursorMove = (e: React.PointerEvent) => {
+ super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY));
}
- getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.borderWidth, -this.borderWidth).translate(-this.centeringShiftX, -this.centeringShiftY).transform(this.getLocalTransform());
- getContainerTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.borderWidth, -this.borderWidth);
- getLocalTransform = (): Transform => Transform.Identity().scale(1 / this.scale).translate(this.panX, this.panY);
- noScaling = () => 1;
- childViews = () => this.views;
render() {
- const [dx, dy] = [this.centeringShiftX, this.centeringShiftY];
- const panx: number = -this.props.Document.GetNumber(KeyStore.PanX, 0);
- const pany: number = -this.props.Document.GetNumber(KeyStore.PanY, 0);
- const zoom: number = this.zoomScaling;// needs to be a variable outside of the <Measure> otherwise, reactions won't fire
- const backgroundView = this.backgroundView; // needs to be a variable outside of the <Measure> otherwise, reactions won't fire
- const overlayView = this.overlayView;// needs to be a variable outside of the <Measure> otherwise, reactions won't fire
-
+ trace();
+ const containerName = `collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`;
return (
- <Measure onResize={(r: any) => runInAction(() => { this._pwidth = r.entry.width; this._pheight = r.entry.height; })}>
+ <Measure onResize={this.onResize}>
{({ measureRef }) => (
- <div className={`collectionfreeformview-measure`} ref={measureRef}>
- <div className={`collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`}
- onPointerDown={this.onPointerDown} onPointerMove={(e) => super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY))}
- onDrop={this.onDrop.bind(this)} onDragOver={this.onDragOver} onWheel={this.onPointerWheel} ref={this.createDropTarget}>
+ <div className="collectionfreeformview-measure" ref={measureRef}>
+ <div className={containerName} ref={this.createDropTarget} onWheel={this.onPointerWheel}
+ onPointerDown={this.onPointerDown} onPointerMove={this.onCursorMove} onDrop={this.onDrop.bind(this)} onDragOver={this.onDragOver} >
<MarqueeView container={this} activeDocuments={this.getActiveDocuments} selectDocuments={this.selectDocuments}
addDocument={this.addDocument} removeDocument={this.props.removeDocument} addLiveTextDocument={this.addLiveTextBox}
getContainerTransform={this.getContainerTransform} getTransform={this.getTransform}>
- <div className="collectionfreeformview" ref={this._canvasRef}
- style={{ transform: `translate(${dx}px, ${dy}px) scale(${zoom}, ${zoom}) translate(${panx}px, ${pany}px)` }}>
- {backgroundView}
- <CollectionFreeFormLinksView {...this.props}>
+ <CollectionFreeFormViewPannableContents centeringShiftX={this.centeringShiftX} centeringShiftY={this.centeringShiftY}
+ zoomScaling={this.zoomScaling} panX={this.panX} panY={this.panY}>
+ <CollectionFreeFormBackgroundView {...this.getDocumentViewProps(this.props.Document)} />
+ <CollectionFreeFormLinksView {...this.props} key="freeformLinks">
<InkingCanvas getScreenTransform={this.getTransform} Document={this.props.Document} >
{this.childViews}
</InkingCanvas>
</CollectionFreeFormLinksView>
- <CollectionFreeFormRemoteCursors {...this.props} />
- </div>
- {overlayView}
+ <CollectionFreeFormRemoteCursors {...this.props} key="remoteCursors" />
+ </CollectionFreeFormViewPannableContents>
+ <CollectionFreeFormOverlayView {...this.getDocumentViewProps(this.props.Document)} />
</MarqueeView>
</div>
</div>)}
</Measure>
);
}
+}
+
+@observer
+class CollectionFreeFormOverlayView extends React.Component<DocumentViewProps> {
+ @computed get overlayView() {
+ let overlayLayout = this.props.Document.GetText(KeyStore.OverlayLayout, "");
+ return !overlayLayout ? (null) :
+ (<DocumentContentsView {...this.props} layoutKey={KeyStore.OverlayLayout}
+ isTopMost={this.props.isTopMost} isSelected={returnFalse} select={emptyFunction} />);
+ }
+ render() {
+ return this.overlayView;
+ }
+}
+
+@observer
+class CollectionFreeFormBackgroundView extends React.Component<DocumentViewProps> {
+ @computed get backgroundView() {
+ let backgroundLayout = this.props.Document.GetText(KeyStore.BackgroundLayout, "");
+ return !backgroundLayout ? (null) :
+ (<DocumentContentsView {...this.props} layoutKey={KeyStore.BackgroundLayout}
+ isTopMost={this.props.isTopMost} isSelected={returnFalse} select={emptyFunction} />);
+ }
+ render() {
+ return this.backgroundView;
+ }
+}
+
+interface CollectionFreeFormViewPannableContentsProps {
+ centeringShiftX: () => number;
+ centeringShiftY: () => number;
+ panX: () => number;
+ panY: () => number;
+ zoomScaling: () => number;
+}
+
+@observer
+class CollectionFreeFormViewPannableContents extends React.Component<CollectionFreeFormViewPannableContentsProps>{
+ render() {
+ const cenx = this.props.centeringShiftX();
+ const ceny = this.props.centeringShiftY();
+ const panx = -this.props.panX();
+ const pany = -this.props.panY();
+ const zoom = this.props.zoomScaling();// needs to be a variable outside of the <Measure> otherwise, reactions won't fire
+ return <div className="collectionfreeformview" style={{ transform: `translate(${cenx}px, ${ceny}px) scale(${zoom}, ${zoom}) translate(${panx}px, ${pany}px)` }}>
+ {this.props.children}
+ </div>;
+ }
} \ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 783470286..96d59c831 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -147,7 +147,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
d.SetNumber(KeyStore.X, d.GetNumber(KeyStore.X, 0) - bounds.left - bounds.width / 2);
d.SetNumber(KeyStore.Y, d.GetNumber(KeyStore.Y, 0) - bounds.top - bounds.height / 2);
d.SetNumber(KeyStore.Page, -1);
- d.SetText(KeyStore.Title, "" + d.GetNumber(KeyStore.Width, 0) + " " + d.GetNumber(KeyStore.Height, 0));
+ d.SetText(KeyStore.Title, "" + d.Width() + " " + d.Height());
return d;
});
let ink = this.props.container.props.Document.GetT(KeyStore.Ink, InkField);
@@ -211,8 +211,8 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
var z = doc.GetNumber(KeyStore.Zoom, 1);
var x = doc.GetNumber(KeyStore.X, 0);
var y = doc.GetNumber(KeyStore.Y, 0);
- var w = doc.GetNumber(KeyStore.Width, 0) / z;
- var h = doc.GetNumber(KeyStore.Height, 0) / z;
+ var w = doc.Width() / z;
+ var h = doc.Height() / z;
if (this.intersectRect({ left: x, top: y, width: w, height: h }, selRect)) {
selection.push(doc);
}
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index b00cefbf6..68e5a70fb 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -9,17 +9,12 @@ import React = require("react");
import { OmitKeys } from "../../../Utils";
export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
- zoomFade: number;
}
@observer
export class CollectionFreeFormDocumentView extends React.Component<CollectionFreeFormDocumentViewProps> {
private _mainCont = React.createRef<HTMLDivElement>();
- constructor(props: CollectionFreeFormDocumentViewProps) {
- super(props);
- }
-
@computed
get transform(): string {
return `scale(${this.props.ContentScaling()}, ${this.props.ContentScaling()}) translate(${this.props.Document.GetNumber(KeyStore.X, 0)}px, ${this.props.Document.GetNumber(KeyStore.Y, 0)}px) scale(${this.zoom}, ${this.zoom}) `;
@@ -50,33 +45,41 @@ export class CollectionFreeFormDocumentView extends React.Component<CollectionFr
this.props.Document.SetData(KeyStore.ZIndex, h, NumberField);
}
- contentScaling = () => this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
-
getTransform = (): Transform =>
this.props.ScreenToLocalTransform()
.translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0))
.scale(1 / this.contentScaling()).scale(1 / this.zoom)
+ contentScaling = () => this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
+ panelWidth = () => this.props.Document.GetBoolean(KeyStore.Minimized, false) ? 10 : this.props.PanelWidth();
+ panelHeight = () => this.props.Document.GetBoolean(KeyStore.Minimized, false) ? 10 : this.props.PanelHeight();
+
@computed
get docView() {
- return <DocumentView {...this.docViewProps}
+ return <DocumentView {...OmitKeys(this.props, ['zoomFade'])}
ContentScaling={this.contentScaling}
ScreenToLocalTransform={this.getTransform}
PanelWidth={this.panelWidth}
PanelHeight={this.panelHeight}
/>;
}
- @computed
- get docViewProps(): DocumentViewProps {
- return (OmitKeys(this.props, ['zoomFade']));
- }
- panelWidth = () => this.props.Document.GetBoolean(KeyStore.Minimized, false) ? 10 : this.props.PanelWidth();
- panelHeight = () => this.props.Document.GetBoolean(KeyStore.Minimized, false) ? 10 : this.props.PanelHeight();
render() {
+ trace();
+ let zoomFade = 1;
+ // //var zoom = doc.GetNumber(KeyStore.Zoom, 1);
+ // let transform = (this.props.ScreenToLocalTransform().scale(this.props.ContentScaling())).inverse();
+ // var [sptX, sptY] = transform.transformPoint(0, 0);
+ // let [bptX, bptY] = transform.transformPoint(this.props.PanelWidth(), this.props.PanelHeight());
+ // let w = bptX - sptX;
+ // //zoomFade = area < 100 || area > 800 ? Math.max(0, Math.min(1, 2 - 5 * (zoom < this.scale ? this.scale / zoom : zoom / this.scale))) : 1;
+ // let fadeUp = .75 * 1800;
+ // let fadeDown = .075 * 1800;
+ // zoomFade = w < fadeDown || w > fadeUp ? Math.max(0, Math.min(1, 2 - (w < fadeDown ? fadeDown / w : w / fadeUp))) : 1;
+
return (
<div className="collectionFreeFormDocumentView-container" ref={this._mainCont} style={{
- opacity: this.props.zoomFade,
+ opacity: zoomFade,
transformOrigin: "left top",
transform: this.transform,
pointerEvents: "all",
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 5071c9440..6383ac3f6 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -1,10 +1,11 @@
@import "../globalCssVariables";
-.documentView-node .documentView-node-topMost {
+.documentView-node, .documentView-node-topMost {
position: inherit;
top: 0;
left:0;
background: $light-color; //overflow: hidden;
+ transform-origin: left top;
&.minimized {
width: 30px;
@@ -36,7 +37,8 @@
height: 10px;
width: 10px;
border-radius: 2px;
- background: $dark-color
+ background: $dark-color;
+ transform-origin: left top;
}
.minimized-box:hover {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 20592894f..0d974c97e 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -65,14 +65,12 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
let Keys: { [name: string]: any } = {};
let Fields: { [name: string]: any } = {};
for (const key of keys) {
- let fn = emptyFunction;
- Object.defineProperty(fn, "name", { value: key + "Key" });
- Keys[key] = fn;
+ Object.defineProperty(emptyFunction, "name", { value: key + "Key" });
+ Keys[key] = emptyFunction;
}
for (const field of fields) {
- let fn = emptyFunction;
- Object.defineProperty(fn, "name", { value: field });
- Fields[field] = fn;
+ Object.defineProperty(emptyFunction, "name", { value: field });
+ Fields[field] = emptyFunction;
}
let args: JsxArgs = {
Document: function Document() { },
@@ -85,21 +83,24 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
@observer
export class DocumentView extends React.Component<DocumentViewProps> {
- private _mainCont = React.createRef<HTMLDivElement>();
- public get ContentRef() {
- return this._mainCont;
- }
private _downX: number = 0;
private _downY: number = 0;
+ private _mainCont = React.createRef<HTMLDivElement>();
+ private _dropDisposer?: DragManager.DragDropDisposer;
+
+ public get ContentDiv() { return this._mainCont.current; }
@computed get active(): boolean { return SelectionManager.IsSelected(this) || this.props.parentActive(); }
@computed get topMost(): boolean { return this.props.isTopMost; }
@computed get layout(): string { return this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>"); }
@computed get layoutKeys(): Key[] { return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>()); }
@computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>()); }
- screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect();
+
onPointerDown = (e: React.PointerEvent): void => {
this._downX = e.clientX;
this._downY = e.clientY;
+ if (e.button === 2 && !this.isSelected()) {
+ return;
+ }
if (e.shiftKey && e.buttons === 2) {
if (this.props.isTopMost) {
this.startDragging(e.pageX, e.pageY, e.altKey || e.ctrlKey);
@@ -118,11 +119,9 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}
}
- private dropDisposer?: DragManager.DragDropDisposer;
-
componentDidMount() {
if (this._mainCont.current) {
- this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, {
+ this._dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, {
handlers: { drop: this.drop.bind(this) }
});
}
@@ -130,29 +129,26 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}
componentDidUpdate() {
- if (this.dropDisposer) {
- this.dropDisposer();
+ if (this._dropDisposer) {
+ this._dropDisposer();
}
if (this._mainCont.current) {
- this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, {
+ this._dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, {
handlers: { drop: this.drop.bind(this) }
});
}
}
componentWillUnmount() {
- if (this.dropDisposer) {
- this.dropDisposer();
+ if (this._dropDisposer) {
+ this._dropDisposer();
}
runInAction(() => DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1));
}
startDragging(x: number, y: number, dropAliasOfDraggedDoc: boolean) {
if (this._mainCont.current) {
- const [left, top] = this.props
- .ScreenToLocalTransform()
- .inverse()
- .transformPoint(0, 0);
+ const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
let dragData = new DragManager.DocumentDragData([this.props.Document]);
dragData.aliasOnDrop = dropAliasOfDraggedDoc;
dragData.xOffset = x - left;
@@ -171,10 +167,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
if (e.cancelBubble) {
return;
}
- if (
- Math.abs(this._downX - e.clientX) > 3 ||
- Math.abs(this._downY - e.clientY) > 3
- ) {
+ if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
document.removeEventListener("pointermove", this.onPointerMove);
document.removeEventListener("pointerup", this.onPointerUp);
if (!this.topMost || e.buttons === 2 || e.altKey) {
@@ -188,22 +181,17 @@ export class DocumentView extends React.Component<DocumentViewProps> {
document.removeEventListener("pointermove", this.onPointerMove);
document.removeEventListener("pointerup", this.onPointerUp);
e.stopPropagation();
- if (!SelectionManager.IsSelected(this) &&
- e.button !== 2 &&
- Math.abs(e.clientX - this._downX) < 4 &&
- Math.abs(e.clientY - this._downY) < 4
- ) {
+ if (!SelectionManager.IsSelected(this) && e.button !== 2 &&
+ Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
SelectionManager.SelectDoc(this, e.ctrlKey);
}
}
- stopPropogation = (e: React.SyntheticEvent) => {
+ stopPropagation = (e: React.SyntheticEvent) => {
e.stopPropagation();
}
deleteClicked = (): void => {
- if (this.props.removeDocument) {
- this.props.removeDocument(this.props.Document);
- }
+ this.props.removeDocument && this.props.removeDocument(this.props.Document);
}
fieldsClicked = (e: React.MouseEvent): void => {
@@ -214,30 +202,20 @@ export class DocumentView extends React.Component<DocumentViewProps> {
fullScreenClicked = (e: React.MouseEvent): void => {
CollectionDockingView.Instance.OpenFullScreen((this.props.Document.GetPrototype() as Document).MakeDelegate());
ContextMenu.Instance.clearItems();
- ContextMenu.Instance.addItem({
- description: "Close Full Screen",
- event: this.closeFullScreenClicked
- });
+ ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
}
closeFullScreenClicked = (e: React.MouseEvent): void => {
CollectionDockingView.Instance.CloseFullScreen();
ContextMenu.Instance.clearItems();
- ContextMenu.Instance.addItem({
- description: "Full Screen",
- event: this.fullScreenClicked
- });
+ ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked });
ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
}
@action
public minimize = (): void => {
- this.props.Document.SetData(
- KeyStore.Minimized,
- true as boolean,
- BooleanField
- );
+ this.props.Document.SetBoolean(KeyStore.Minimized, true);
SelectionManager.DeselectAll();
}
@@ -253,9 +231,9 @@ export class DocumentView extends React.Component<DocumentViewProps> {
sourceDoc.GetTAsync(KeyStore.Prototype, Document).then(protoSrc =>
runInAction(() => {
let batch = UndoManager.StartBatch("document view drop");
- linkDoc.Set(KeyStore.Title, new TextField("New Link"));
- linkDoc.Set(KeyStore.LinkDescription, new TextField(""));
- linkDoc.Set(KeyStore.LinkTags, new TextField("Default"));
+ linkDoc.SetText(KeyStore.Title, "New Link");
+ linkDoc.SetText(KeyStore.LinkDescription, "");
+ linkDoc.SetText(KeyStore.LinkTags, "Default");
let dstTarg = protoDest ? protoDest : destDoc;
let srcTarg = protoSrc ? protoSrc : sourceDoc;
@@ -286,11 +264,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}
onDrop = (e: React.DragEvent) => {
- if (e.isDefaultPrevented()) {
- return;
- }
let text = e.dataTransfer.getData("text/plain");
- if (text && text.startsWith("<div")) {
+ if (!e.isDefaultPrevented() && text && text.startsWith("<div")) {
let oldLayout = this.props.Document.GetText(KeyStore.Layout, "");
let layout = text.replace("{layout}", oldLayout);
this.props.Document.SetText(KeyStore.Layout, layout);
@@ -302,145 +277,56 @@ export class DocumentView extends React.Component<DocumentViewProps> {
@action
onContextMenu = (e: React.MouseEvent): void => {
e.stopPropagation();
- let moved =
- Math.abs(this._downX - e.clientX) > 3 ||
- Math.abs(this._downY - e.clientY) > 3;
- if (moved || e.isDefaultPrevented()) {
- e.preventDefault();
+ e.preventDefault();
+ if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3 ||
+ e.isDefaultPrevented()) {
return;
}
- e.preventDefault();
- if (!this.isMinimized()) {
- ContextMenu.Instance.addItem({
- description: "Minimize",
- event: this.minimize
- });
- }
- ContextMenu.Instance.addItem({
- description: "Full Screen",
- event: this.fullScreenClicked
- });
- ContextMenu.Instance.addItem({
- description: "Fields",
- event: this.fieldsClicked
- });
- ContextMenu.Instance.addItem({
- description: "Center",
- event: () => this.props.focus(this.props.Document)
- });
- ContextMenu.Instance.addItem({
- description: "Open Right",
- event: () =>
- CollectionDockingView.Instance.AddRightSplit(this.props.Document)
- });
- ContextMenu.Instance.addItem({
- description: "Copy URL",
- event: () => {
- Utils.CopyText(ServerUtils.prepend("/doc/" + this.props.Document.Id));
- }
- });
- ContextMenu.Instance.addItem({
- description: "Copy ID",
- event: () => {
- Utils.CopyText(this.props.Document.Id);
- }
- });
+ !this.isMinimized() && ContextMenu.Instance.addItem({ description: "Minimize", event: this.minimize });
+ ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked });
+ ContextMenu.Instance.addItem({ description: "Fields", event: this.fieldsClicked });
+ ContextMenu.Instance.addItem({ description: "Center", event: () => this.props.focus(this.props.Document) });
+ ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) });
+ ContextMenu.Instance.addItem({ description: "Copy URL", event: () => Utils.CopyText(ServerUtils.prepend("/doc/" + this.props.Document.Id)) });
+ ContextMenu.Instance.addItem({ description: "Copy ID", event: () => Utils.CopyText(this.props.Document.Id) });
//ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
- if (!this.topMost) {
- // DocumentViews should stop propagation of this event
- e.stopPropagation();
- }
-
- ContextMenu.Instance.addItem({
- description: "Delete",
- event: this.deleteClicked
- });
+ ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked });
ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
SelectionManager.SelectDoc(this, e.ctrlKey);
}
- isMinimized = () => {
- let field = this.props.Document.GetT(KeyStore.Minimized, BooleanField);
- if (field && field !== FieldWaiting) {
- return field.Data;
- }
- }
-
@action
- expand = () => {
- this.props.Document.SetData(
- KeyStore.Minimized,
- false as boolean,
- BooleanField
- );
- }
-
+ expand = () => this.props.Document.SetBoolean(KeyStore.Minimized, false)
+ isMinimized = () => this.props.Document.GetBoolean(KeyStore.Minimized, false);
isSelected = () => SelectionManager.IsSelected(this);
+ select = (ctrlPressed: boolean) => SelectionManager.SelectDoc(this, ctrlPressed);
- select = (ctrlPressed: boolean) => {
- SelectionManager.SelectDoc(this, ctrlPressed);
- }
-
- @computed get nativeWidth(): number { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); }
- @computed get nativeHeight(): number { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
- @computed
- get contents() {
- return (<DocumentContentsView
- {...this.props}
- isSelected={this.isSelected}
- select={this.select}
- layoutKey={KeyStore.Layout}
- />);
- }
+ @computed get nativeWidth() { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); }
+ @computed get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
+ @computed get contents() { return (<DocumentContentsView {...this.props} isSelected={this.isSelected} select={this.select} layoutKey={KeyStore.Layout} />); }
render() {
- if (!this.props.Document) {
- return null;
- }
-
var scaling = this.props.ContentScaling();
- var nativeWidth = this.nativeWidth;
- var nativeHeight = this.nativeHeight;
+ var nativeHeight = this.nativeHeight > 0 ? this.nativeHeight.toString() + "px" : "100%";
+ var nativeWidth = this.nativeWidth > 0 ? this.nativeWidth.toString() + "px" : "100%";
if (this.isMinimized()) {
- return (
- <div
- className="minimized-box"
- ref={this._mainCont}
- style={{
- transformOrigin: "left top",
- transform: `scale(${scaling} , ${scaling})`
- }}
- onClick={this.expand}
- onDrop={this.onDrop}
- onPointerDown={this.onPointerDown}
- />
- );
- } else {
- var backgroundcolor = this.props.Document.GetText(
- KeyStore.BackgroundColor,
- ""
- );
- return (
- <div
- className={`documentView-node${this.props.isTopMost ? "-topmost" : ""}`}
- ref={this._mainCont}
- style={{
- background: backgroundcolor,
- width: nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%",
- height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%",
- transformOrigin: "left top",
- transform: `scale(${scaling} , ${scaling})`
- }}
- onDrop={this.onDrop}
- onContextMenu={this.onContextMenu}
- onPointerDown={this.onPointerDown}
- >
- {this.contents}
- </div>
- );
+ return <div className="minimized-box" ref={this._mainCont} onClick={this.expand} onDrop={this.onDrop}
+ style={{ transform: `scale(${scaling} , ${scaling})` }} onPointerDown={this.onPointerDown} />;
}
+ return (
+ <div className={`documentView-node${this.props.isTopMost ? "-topmost" : ""}`}
+ ref={this._mainCont}
+ style={{
+ background: this.props.Document.GetText(KeyStore.BackgroundColor, ""),
+ width: nativeWidth, height: nativeHeight,
+ transform: `scale(${scaling}, ${scaling})`
+ }}
+ onDrop={this.onDrop} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown}
+ >
+ {this.contents}
+ </div>
+ );
}
}
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 9bdbfbb5d..edd7f55fc 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -81,7 +81,7 @@ export class ImageBox extends React.Component<FieldViewProps> {
}
e.stopPropagation();
}
- }))
+ }));
// de.data.removeDocument() bcz: need to implement
}
}
diff --git a/src/server/authentication/models/user_model.ts b/src/server/authentication/models/user_model.ts
index d5c84c311..ee85e1c05 100644
--- a/src/server/authentication/models/user_model.ts
+++ b/src/server/authentication/models/user_model.ts
@@ -85,8 +85,7 @@ userSchema.pre("save", function save(next) {
});
const comparePassword: comparePasswordFunction = function (this: DashUserModel, candidatePassword, cb) {
- bcrypt.compare(candidatePassword, this.password, (err: mongoose.Error, isMatch: boolean) =>
- cb(err, isMatch));
+ bcrypt.compare(candidatePassword, this.password, cb);
};
userSchema.methods.comparePassword = comparePassword;
diff --git a/src/server/database.ts b/src/server/database.ts
index 7914febf8..5457e4dd5 100644
--- a/src/server/database.ts
+++ b/src/server/database.ts
@@ -59,7 +59,7 @@ export class Database {
public getDocument(id: string, fn: (result?: Transferable) => void, collectionName = Database.DocumentsCollection) {
this.db && this.db.collection(collectionName).findOne({ id: id }, (err, result) =>
- fn(result ? ({ id: result._id, type: result.type, data: result.data }) : undefined))
+ fn(result ? ({ id: result._id, type: result.type, data: result.data }) : undefined));
}
public getDocuments(ids: string[], fn: (result: Transferable[]) => void, collectionName = Database.DocumentsCollection) {
diff --git a/src/server/index.ts b/src/server/index.ts
index 3cbe1ca76..70a7d266c 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -35,7 +35,7 @@ import c = require("crypto");
const MongoStore = require('connect-mongo')(session);
const mongoose = require('mongoose');
-const download = (url: string, dest: fs.PathLike) => request.get(url).pipe(fs.createWriteStream(dest));;
+const download = (url: string, dest: fs.PathLike) => request.get(url).pipe(fs.createWriteStream(dest));
const mongoUrl = 'mongodb://localhost:27017/Dash';
mongoose.connect(mongoUrl);
diff --git a/tslint.json b/tslint.json
index aa4dee4e5..76d28b375 100644
--- a/tslint.json
+++ b/tslint.json
@@ -52,5 +52,6 @@
// }
// ],
// "ordered-imports": true
- }
+ },
+ "defaultSeverity": "warning"
} \ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 574401807..c08742272 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,6 +1,7 @@
var path = require('path');
var webpack = require('webpack');
const CopyWebpackPlugin = require("copy-webpack-plugin");
+const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
module.exports = {
mode: 'development',
@@ -11,6 +12,9 @@ module.exports = {
inkControls: ["./src/mobile/InkControls.tsx", 'webpack-hot-middleware/client?reload=true'],
imageUpload: ["./src/mobile/ImageUpload.tsx", 'webpack-hot-middleware/client?reload=true'],
},
+ optimization: {
+ noEmitOnErrors: true
+ },
devtool: "source-map",
node: {
fs: 'empty',
@@ -30,17 +34,10 @@ module.exports = {
module: {
rules: [
{
- test: [/\.tsx?$/, /\.ts?$/,],
- enforce: 'pre',
+ test: [/\.tsx?$/],
use: [
- {
- loader: "tslint-loader",
- }
+ { loader: 'ts-loader', options: { transpileOnly: true } }
]
- }, {
- test: [/\.tsx?$/, /\.ts?$/,],
- loader: "awesome-typescript-loader",
- include: path.join(__dirname, 'src')
},
{
test: /\.scss|css$/,
@@ -78,9 +75,11 @@ module.exports = {
},
plugins: [
new CopyWebpackPlugin([{ from: "deploy", to: path.join(__dirname, "build") }]),
+ new ForkTsCheckerWebpackPlugin({
+ tslint: true, useTypescriptIncrementalApi: true
+ }),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
- new webpack.NoEmitOnErrorsPlugin()
],
devServer: {
compress: false,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 18:04:22 +0000