From f6c6220d92b8556615f3c17463ca5b0c7452b439 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 28 Mar 2019 00:27:36 -0400 Subject: placeholder for drawing links. --- .../views/nodes/CollectionFreeFormDocumentView.tsx | 42 +++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 50dc5a619..ed3468400 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -1,4 +1,4 @@ -import { computed, trace } from "mobx"; +import { computed, trace, reaction, runInAction, observable } from "mobx"; import { observer } from "mobx-react"; import { KeyStore } from "../../../fields/KeyStore"; import { NumberField } from "../../../fields/NumberField"; @@ -6,6 +6,8 @@ import { Transform } from "../../util/Transform"; import { DocumentView, DocumentViewProps } from "./DocumentView"; import "./DocumentView.scss"; import React = require("react"); +import { Document } from "../../../fields/Document"; +import { DocumentManager } from "../../util/DocumentManager"; @observer @@ -67,8 +69,46 @@ export class CollectionFreeFormDocumentView extends React.Component } + @observable _docView1: DocumentView | null = null; + @observable _docView2: DocumentView | null = null; + + componentDidMount() { + reaction(() => { + let linkFrom = this.props.Document.GetT(KeyStore.LinkedFromDocs, Document); + let linkTo = this.props.Document.GetT(KeyStore.LinkedToDocs, Document); + let docView1: DocumentView | null = null; + let docView2: DocumentView | null = null; + if (linkFrom instanceof Document && linkTo instanceof Document) { + docView1 = DocumentManager.Instance.getDocumentView(linkFrom); + docView2 = DocumentManager.Instance.getDocumentView(linkTo); + } + return [docView1, docView2]; + }, (vals) => runInAction(() => { + this._docView1 = vals[0]; + this._docView2 = vals[1]; + }), { fireImmediately: true }); + } render() { + if (this._docView1 != null && this._docView2 != null) { + let doc1 = this._docView1.props.Document; + let doc2 = this._docView2.props.Document; + let x1 = doc1.GetNumber(KeyStore.X, 0) + doc1.GetNumber(KeyStore.Width, 0) / 2; + let y1 = doc1.GetNumber(KeyStore.Y, 0) + doc1.GetNumber(KeyStore.Height, 0) / 2; + let x2 = doc2.GetNumber(KeyStore.X, 0) + doc2.GetNumber(KeyStore.Width, 0) / 2; + let y2 = doc2.GetNumber(KeyStore.Y, 0) + doc2.GetNumber(KeyStore.Height, 0) / 2; + let lx = Math.min(x1, x2); + let ly = Math.min(y1, y2); + let w = Math.max(x1, x2) - lx; + let h = Math.max(y1, y2) - ly; + let unflipped = (x1 == lx && y1 == ly) || (x2 == lx && y2 == ly); + return ( +
+ + + +
); + } return (
Date: Thu, 28 Mar 2019 10:04:28 -0400 Subject: made links show up on collections --- src/client/util/DocumentManager.ts | 27 ++++++-- .../views/collections/CollectionFreeFormView.tsx | 72 ++++++++++++++++++++-- .../views/nodes/CollectionFreeFormDocumentView.tsx | 38 ------------ src/client/views/nodes/DocumentView.tsx | 2 - 4 files changed, 89 insertions(+), 50 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 03df11ad7..5bc16343e 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -35,12 +35,6 @@ export class DocumentManager { DocumentManager.Instance.DocumentViews.map(view => { let doc = view.props.Document; // if (view.props.ContainingCollectionView instanceof CollectionFreeFormView) { - // if (Object.is(doc, toFind)) { - // toReturn = view; - // return; - // } - // } - if (Object.is(doc, toFind)) { toReturn = view; @@ -52,6 +46,27 @@ export class DocumentManager { } }) + return (toReturn); + } + public getDocumentViews(toFind: Document): DocumentView[] { + + let toReturn: DocumentView[] = []; + + //gets document view that is in a freeform canvas collection + DocumentManager.Instance.DocumentViews.map(view => { + let doc = view.props.Document; + // if (view.props.ContainingCollectionView instanceof CollectionFreeFormView) { + + if (Object.is(doc, toFind)) { + toReturn.push(view); + } else { + let docSrc = doc.GetT(KeyStore.Prototype, Document); + if (docSrc && docSrc != FieldWaiting && Object.is(docSrc, toFind)) { + toReturn.push(view); + } + } + }) + return (toReturn); } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 1eab3e475..d75c53b7e 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -1,7 +1,7 @@ -import { action, computed, observable } from "mobx"; +import { action, computed, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; -import { FieldWaiting } from "../../../fields/Field"; +import { FieldWaiting, Field } from "../../../fields/Field"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; import { TextField } from "../../../fields/TextField"; @@ -11,14 +11,16 @@ import { undoBatch } from "../../util/UndoManager"; import { InkingCanvas } from "../InkingCanvas"; import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; import { DocumentContentsView } from "../nodes/DocumentContentsView"; -import { DocumentViewProps } from "../nodes/DocumentView"; +import { DocumentViewProps, DocumentView } from "../nodes/DocumentView"; import "./CollectionFreeFormView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; -import { CollectionViewBase } from "./CollectionViewBase"; +import { CollectionViewBase, CollectionViewProps } from "./CollectionViewBase"; import { MarqueeView } from "./MarqueeView"; import { PreviewCursor } from "./PreviewCursor"; import React = require("react"); import v5 = require("uuid/v5"); +import { DocumentManager } from "../../util/DocumentManager"; +import { Utils } from "../../../Utils"; @observer export class CollectionFreeFormView extends CollectionViewBase { @@ -360,6 +362,7 @@ export class CollectionFreeFormView extends CollectionViewBase { {this.views} + {super.getCursors().map(entry => { if (entry.Data.length > 0) { let id = entry.Data[0][0]; @@ -411,4 +414,65 @@ export class CollectionFreeFormView extends CollectionViewBase {
); } +} + +@observer +export class LinksView extends React.Component { + private _mainCont = React.createRef(); + + constructor(props: CollectionViewProps) { + super(props); + } + + @observable _pairs: { a: DocumentView, b: DocumentView }[] = []; + + findPairs() { + return DocumentManager.Instance.DocumentViews.filter(dv => dv.props.ContainingCollectionView && dv.props.ContainingCollectionView.props.Document === this.props.Document).reduce((pairs, dv) => { + let linksList = dv.props.Document.GetT(KeyStore.LinkedToDocs, ListField); + if (linksList && linksList != FieldWaiting && linksList.Data.length) { + pairs.push(...linksList.Data.reduce((pairs, link) => { + if (link instanceof Document) { + let linkToDoc = link.GetT(KeyStore.LinkedToDocs, Document); + if (linkToDoc && linkToDoc != FieldWaiting) { + DocumentManager.Instance.getDocumentViews(linkToDoc).map(docView1 => + pairs.push({ a: dv, b: docView1 }) + ) + } + } + return pairs; + }, [] as { a: DocumentView, b: DocumentView }[])); + } + return pairs; + }, [] as { a: DocumentView, b: DocumentView }[]); + } + componentDidMount() { + reaction(() => this.findPairs() + , (pairs) => runInAction(() => this._pairs = pairs)); + } + + render() { + if (!this._pairs.length) + return (null); + return
+ {this._pairs.map(pair => { + let doc1 = pair.a.props.Document; + let doc2 = pair.b.props.Document; + let x1 = doc1.GetNumber(KeyStore.X, 0) + doc1.GetNumber(KeyStore.Width, 0) / 2; + let y1 = doc1.GetNumber(KeyStore.Y, 0) + doc1.GetNumber(KeyStore.Height, 0) / 2; + let x2 = doc2.GetNumber(KeyStore.X, 0) + doc2.GetNumber(KeyStore.Width, 0) / 2; + let y2 = doc2.GetNumber(KeyStore.Y, 0) + doc2.GetNumber(KeyStore.Height, 0) / 2; + let lx = Math.min(x1, x2); + let ly = Math.min(y1, y2); + let w = Math.max(x1, x2) - lx; + let h = Math.max(y1, y2) - ly; + let unflipped = (x1 == lx && y1 == ly) || (x2 == lx && y2 == ly); + return ( +
+ + + +
); + })} +
+ } } \ No newline at end of file diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index ed3468400..7f951864e 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -69,46 +69,8 @@ export class CollectionFreeFormDocumentView extends React.Component } - @observable _docView1: DocumentView | null = null; - @observable _docView2: DocumentView | null = null; - - componentDidMount() { - reaction(() => { - let linkFrom = this.props.Document.GetT(KeyStore.LinkedFromDocs, Document); - let linkTo = this.props.Document.GetT(KeyStore.LinkedToDocs, Document); - let docView1: DocumentView | null = null; - let docView2: DocumentView | null = null; - if (linkFrom instanceof Document && linkTo instanceof Document) { - docView1 = DocumentManager.Instance.getDocumentView(linkFrom); - docView2 = DocumentManager.Instance.getDocumentView(linkTo); - } - return [docView1, docView2]; - }, (vals) => runInAction(() => { - this._docView1 = vals[0]; - this._docView2 = vals[1]; - }), { fireImmediately: true }); - } render() { - if (this._docView1 != null && this._docView2 != null) { - let doc1 = this._docView1.props.Document; - let doc2 = this._docView2.props.Document; - let x1 = doc1.GetNumber(KeyStore.X, 0) + doc1.GetNumber(KeyStore.Width, 0) / 2; - let y1 = doc1.GetNumber(KeyStore.Y, 0) + doc1.GetNumber(KeyStore.Height, 0) / 2; - let x2 = doc2.GetNumber(KeyStore.X, 0) + doc2.GetNumber(KeyStore.Width, 0) / 2; - let y2 = doc2.GetNumber(KeyStore.Y, 0) + doc2.GetNumber(KeyStore.Height, 0) / 2; - let lx = Math.min(x1, x2); - let ly = Math.min(y1, y2); - let w = Math.max(x1, x2) - lx; - let h = Math.max(y1, y2) - ly; - let unflipped = (x1 == lx && y1 == ly) || (x2 == lx && y2 == ly); - return ( -
- - - -
); - } return (
{ linkDoc.Set(KeyStore.LinkedFromDocs, srcTarg); dstTarg.GetOrCreateAsync(KeyStore.LinkedFromDocs, ListField, field => { (field as ListField).Data.push(linkDoc) }) srcTarg.GetOrCreateAsync(KeyStore.LinkedToDocs, ListField, field => { (field as ListField).Data.push(linkDoc) }) - if (this.props.AddDocument) - this.props.AddDocument(linkDoc, false); })) ) e.stopPropagation(); -- cgit v1.2.3-70-g09d2 From 2ac86b53d28abb8be2f3abd501b801e543973e28 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 31 Mar 2019 22:45:43 -0400 Subject: restructured inkingCanvas and linksViews --- src/client/views/InkingCanvas.scss | 164 +++------------------ src/client/views/InkingCanvas.tsx | 121 +++++++-------- src/client/views/InkingControl.scss | 135 +++++++++++++++++ src/client/views/InkingControl.tsx | 3 +- .../CollectionFreeFormLinksView.scss | 3 + .../CollectionFreeFormLinksView.tsx | 9 +- .../collectionFreeForm/CollectionFreeFormView.scss | 10 -- .../collectionFreeForm/CollectionFreeFormView.tsx | 10 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 6 +- src/client/views/nodes/PDFBox.tsx | 10 +- 10 files changed, 233 insertions(+), 238 deletions(-) create mode 100644 src/client/views/InkingControl.scss (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss index e79b146b9..6d7821cd2 100644 --- a/src/client/views/InkingCanvas.scss +++ b/src/client/views/InkingCanvas.scss @@ -1,149 +1,25 @@ @import "global_variables"; -.inking-canvas { + +.inkingCanvas-paths, .inkingCanvas-paths-none { position: absolute; top: -50000px; - left: -50000px; // z-index: 99; //overlays ink on top of everything - svg { - position:absolute; - width: 100000px; - height: 100000px; - .highlight { - mix-blend-mode: multiply; - } - } + left: -50000px; + width: 100000px; + height: 100000px; + //z-index: 10000; // z-index: 99; //overlays ink on top of everything but that messes up blending and events don't propagate down to nested collections + .highlight { + mix-blend-mode: multiply; + } + .inkingCanvas-children { + transform: translate(50000px, 50000px); + pointer-events: none; + } + cursor:"crosshair"; + pointer-events: auto; + +} +.inkingCanvas-paths-none { + pointer-events: none; + cursor: "arrow"; } -.inking-control { - position: absolute; - left: 70px; - bottom: 70px; - margin: 0; - padding: 0; - display: flex; - label, - input, - option { - font-size: 12px; - } - input[type="range"] { - -webkit-appearance: none; - background-color: transparent; - vertical-align: middle; - margin-top: 8px; - &:focus { - outline: none; - } - &::-webkit-slider-runnable-track { - width: 100%; - height: 3px; - border-radius: 1.5px; - cursor: pointer; - background: $intermediate-color; - } - &::-webkit-slider-thumb { - height: 12px; - width: 12px; - border: 1px solid $intermediate-color; - border-radius: 6px; - background: $light-color; - cursor: pointer; - -webkit-appearance: none; - margin-top: -4px; - } - &::-moz-range-track { - width: 100%; - height: 3px; - border-radius: 1.5px; - cursor: pointer; - background: $light-color; - } - &::-moz-range-thumb { - height: 12px; - width: 12px; - border: 1px solid $intermediate-color; - border-radius: 6px; - background: $light-color; - cursor: pointer; - -webkit-appearance: none; - margin-top: -4px; - } - } - input[type="text"] { - border: none; - padding: 0 0px; - background: transparent; - color: $dark-color; - font-size: 12px; - margin-top: 4px; - } - .ink-panel { - margin: 6px 12px 6px 0; - height: 30px; - vertical-align: middle; - line-height: 36px; - padding: 0 10px; - color: $intermediate-color; - &:first { - margin-top: 0; - } - } - .ink-tools { - display: flex; - background-color: transparent; - border-radius: 0; - padding: 0; - button { - height: 36px; - padding: 0px; - padding-bottom: 3px; - margin-left: 10px; - background-color: transparent; - color: $intermediate-color; - } - button:hover { - transform: scale(1.15); - } - } - .ink-size { - display: flex; - justify-content: space-between; - input[type="text"] { - width: 42px; - } - >* { - margin-right: 6px; - &:last-child { - margin-right: 0; - } - } - } - .ink-color { - display: flex; - position: relative; - padding-right: 0; - label { - margin-right: 6px; - } - .ink-color-display { - border-radius: 11px; - width: 22px; - height: 22px; - margin-top: 6px; - cursor: pointer; - text-align: center; // span { - // color: $light-color; - // font-size: 8px; - // user-select: none; - // } - } - .ink-color-picker { - background-color: $light-color; - border-radius: 5px; - padding: 12px; - position: absolute; - bottom: 36px; - left: -3px; - box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw; - } - } -} \ No newline at end of file diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index 8fb74ec48..a971264b9 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -57,51 +57,62 @@ export class InkingCanvas extends React.Component { } @action - handleMouseDown = (e: React.PointerEvent): void => { - if (e.button != 0 || + onPointerDown = (e: React.PointerEvent): void => { + this._isDrawing = false; + if (e.button != 0 || e.altKey || e.ctrlKey || InkingControl.Instance.selectedTool === InkTool.None) { return; } - e.stopPropagation() - if (InkingControl.Instance.selectedTool === InkTool.Eraser) { - return - } - const point = this.relativeCoordinatesForEvent(e); - - // start the new line, saves a uuid to represent the field of the stroke - this._idGenerator = Utils.GenerateGuid(); - this.inkData.set(this._idGenerator, - { - pathData: [point], - color: InkingControl.Instance.selectedColor, - width: InkingControl.Instance.selectedWidth, - tool: InkingControl.Instance.selectedTool, - page: this.props.Document.GetNumber(KeyStore.CurPage, -1) - }); + document.addEventListener("pointermove", this.onPointerMove, true); + document.addEventListener("pointerup", this.onPointerUp, true); + e.stopPropagation(); + this._isDrawing = true; + if (InkingControl.Instance.selectedTool != InkTool.Eraser) { + const point = this.relativeCoordinatesForEvent(e.clientX, e.clientY); + + // start the new line, saves a uuid to represent the field of the stroke + this._idGenerator = Utils.GenerateGuid(); + this.inkData.set(this._idGenerator, + { + pathData: [point], + color: InkingControl.Instance.selectedColor, + width: InkingControl.Instance.selectedWidth, + tool: InkingControl.Instance.selectedTool, + page: this.props.Document.GetNumber(KeyStore.CurPage, -1) + }); + } } - @action - handleMouseMove = (e: React.PointerEvent): void => { - if (!this._isDrawing || - InkingControl.Instance.selectedTool === InkTool.None) { - return; + onPointerUp = (e: PointerEvent): void => { + if (this._isDrawing) { + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + this._isDrawing = false; + e.stopPropagation(); } - e.stopPropagation() - if (InkingControl.Instance.selectedTool === InkTool.Eraser) { - return - } - const point = this.relativeCoordinatesForEvent(e); + } - // add points to new line as it is being drawn - let data = this.inkData; - let strokeData = data.get(this._idGenerator); - if (strokeData) { - strokeData.pathData.push(point); - data.set(this._idGenerator, strokeData); + @action + onPointerMove = (e: PointerEvent): void => { + if (this._isDrawing) { + e.stopPropagation() + e.preventDefault(); + if (InkingControl.Instance.selectedTool === InkTool.Eraser) { + return + } + const point = this.relativeCoordinatesForEvent(e.clientX, e.clientY); + + // add points to new line as it is being drawn + let data = this.inkData; + let strokeData = data.get(this._idGenerator); + if (strokeData) { + strokeData.pathData.push(point); + data.set(this._idGenerator, strokeData); + } + + this.inkData = data; } - - this.inkData = data; } @action @@ -109,8 +120,8 @@ export class InkingCanvas extends React.Component { this._isDrawing = false; } - relativeCoordinatesForEvent = (e: React.MouseEvent): { x: number, y: number } => { - let [x, y] = this.props.getScreenTransform().transformPoint(e.clientX, e.clientY); + relativeCoordinatesForEvent = (ex: number, ey: number): { x: number, y: number } => { + let [x, y] = this.props.getScreenTransform().transformPoint(ex, ey); x += InkingCanvas.InkOffset; y += InkingCanvas.InkOffset; return { x, y }; @@ -124,32 +135,9 @@ export class InkingCanvas extends React.Component { } render() { - // styling for cursor - let canvasStyle = {}; - if (InkingControl.Instance.selectedTool === InkTool.None) { - canvasStyle = { pointerEvents: "none" }; - } else { - canvasStyle = { pointerEvents: "auto", cursor: "crosshair" }; - } - - // get data from server - // let inkField = this.props.Document.GetT(KeyStore.Ink, InkField); - // if (!inkField || inkField == FieldWaiting) { - // return (
- // - // - //
) - // } - - let lines = this.inkData; - // parse data from server - let paths: Array = [] let curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1) - Array.from(lines).map(item => { - let id = item[0]; - let strokeData = item[1]; + let paths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { if (strokeData.page == -1 || strokeData.page == curPage) paths.push( { width={strokeData.width} tool={strokeData.tool} deleteCallback={this.removeLine} />) - }) + return paths; + }, [] as JSX.Element[]); + let svgCanvasStyle = InkingControl.Instance.selectedTool == InkTool.None ? "-none" : ""; return ( -
- +
+ {paths} + {this.props.children}
) } diff --git a/src/client/views/InkingControl.scss b/src/client/views/InkingControl.scss new file mode 100644 index 000000000..0d8fd8784 --- /dev/null +++ b/src/client/views/InkingControl.scss @@ -0,0 +1,135 @@ +@import "global_variables"; +.inking-control { + position: absolute; + left: 70px; + bottom: 70px; + margin: 0; + padding: 0; + display: flex; + label, + input, + option { + font-size: 12px; + } + input[type="range"] { + -webkit-appearance: none; + background-color: transparent; + vertical-align: middle; + margin-top: 8px; + &:focus { + outline: none; + } + &::-webkit-slider-runnable-track { + width: 100%; + height: 3px; + border-radius: 1.5px; + cursor: pointer; + background: $intermediate-color; + } + &::-webkit-slider-thumb { + height: 12px; + width: 12px; + border: 1px solid $intermediate-color; + border-radius: 6px; + background: $light-color; + cursor: pointer; + -webkit-appearance: none; + margin-top: -4px; + } + &::-moz-range-track { + width: 100%; + height: 3px; + border-radius: 1.5px; + cursor: pointer; + background: $light-color; + } + &::-moz-range-thumb { + height: 12px; + width: 12px; + border: 1px solid $intermediate-color; + border-radius: 6px; + background: $light-color; + cursor: pointer; + -webkit-appearance: none; + margin-top: -4px; + } + } + input[type="text"] { + border: none; + padding: 0 0px; + background: transparent; + color: $dark-color; + font-size: 12px; + margin-top: 4px; + } + .ink-panel { + margin: 6px 12px 6px 0; + height: 30px; + vertical-align: middle; + line-height: 36px; + padding: 0 10px; + color: $intermediate-color; + &:first { + margin-top: 0; + } + } + .ink-tools { + display: flex; + background-color: transparent; + border-radius: 0; + padding: 0; + button { + height: 36px; + padding: 0px; + padding-bottom: 3px; + margin-left: 10px; + background-color: transparent; + color: $intermediate-color; + } + button:hover { + transform: scale(1.15); + } + } + .ink-size { + display: flex; + justify-content: space-between; + input[type="text"] { + width: 42px; + } + >* { + margin-right: 6px; + &:last-child { + margin-right: 0; + } + } + } + .ink-color { + display: flex; + position: relative; + padding-right: 0; + label { + margin-right: 6px; + } + .ink-color-display { + border-radius: 11px; + width: 22px; + height: 22px; + margin-top: 6px; + cursor: pointer; + text-align: center; // span { + // color: $light-color; + // font-size: 8px; + // user-select: none; + // } + } + .ink-color-picker { + background-color: $light-color; + border-radius: 5px; + padding: 12px; + position: absolute; + bottom: 36px; + left: -3px; + box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw; + } + } +} \ No newline at end of file diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index eb2172d03..c1519dff8 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -2,10 +2,9 @@ import { observable, action, computed } from "mobx"; import { CirclePicker, ColorResult } from 'react-color' import React = require("react"); -import "./InkingCanvas.scss" import { InkTool } from "../../fields/InkField"; import { observer } from "mobx-react"; -import "./InkingCanvas.scss" +import "./InkingControl.scss" import { library } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPen, faHighlighter, faEraser, faBan } from '@fortawesome/free-solid-svg-icons'; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss index 9af0df7f5..4341c82f7 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss @@ -4,4 +4,7 @@ width: 20000px; height: 20000px; pointer-events: none; + } + .collectionfreeformlinksview-container { + pointer-events: none; } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx index ea392eaea..ef60aa672 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx @@ -94,9 +94,12 @@ export class CollectionFreeFormLinksView extends React.Component - {this.uniqueConnections.map(c => )} +
+ + {this.uniqueConnections.map(c => )} + {this.props.children} - ); +
+ ); } } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index c979b27a9..81d21d89a 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -7,9 +7,6 @@ width: 100%; height: 100%; transform-origin: left top; - .inking-canvas { - transform-origin: 50000px 50000px; - } } .collectionfreeformview-container { .collectionfreeformview > .jsx-parser { @@ -18,9 +15,6 @@ width: 100%; } - .inking-canvas { - transform-origin: 50000px 50000px; - } //nested freeform views // .collectionfreeformview-container { // background-image: linear-gradient(to right, $light-color-secondary 1px, transparent 1px), @@ -48,10 +42,6 @@ background: $light-color-secondary; } - .inking-canvas { - transform-origin: 50000px 50000px; - } - opacity: 0.99; border: 0px solid transparent; border-radius: $border-radius; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index cdc5bdfb0..ae1c775e6 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -314,16 +314,18 @@ export class CollectionFreeFormView extends CollectionViewBase {
super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY))} onDrop={this.onDrop.bind(this)} onDragOver={this.onDragOver} onWheel={this.onPointerWheel} - style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} tabIndex={0} ref={this.createDropTarget}> + style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} ref={this.createDropTarget}>
{this.backgroundView} - - {this.views} - + + + {this.views} + + {super.getCursors().map(entry => { if (entry.Data.length > 0) { let id = entry.Data[0][0]; diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 7f951864e..d52b662bd 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -1,4 +1,4 @@ -import { computed, trace, reaction, runInAction, observable } from "mobx"; +import { computed } from "mobx"; import { observer } from "mobx-react"; import { KeyStore } from "../../../fields/KeyStore"; import { NumberField } from "../../../fields/NumberField"; @@ -6,8 +6,7 @@ import { Transform } from "../../util/Transform"; import { DocumentView, DocumentViewProps } from "./DocumentView"; import "./DocumentView.scss"; import React = require("react"); -import { Document } from "../../../fields/Document"; -import { DocumentManager } from "../../util/DocumentManager"; +import { thisExpression } from "babel-types"; @observer @@ -75,6 +74,7 @@ export class CollectionFreeFormDocumentView extends React.Component { @observable private _interactive: boolean = false; @observable private _loaded: boolean = false; - @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, -1); } + @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, 1); } @computed private get thumbnailPage() { return this.props.doc.GetNumber(KeyStore.ThumbnailPage, -1); } componentDidMount() { @@ -435,8 +435,6 @@ export class PDFBox extends React.Component { @computed get pdfContent() { let page = this.curPage; - if (page == 0) - page = 1; const renderHeight = 2400; let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField); let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight; @@ -463,10 +461,8 @@ 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.pdfContent} - {proxy} -
+ this.pdfContent, + proxy ]; } -- cgit v1.2.3-70-g09d2 From dc2a998acdae1545c8e7bf9ee9f4ca98bba82ac9 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Thu, 4 Apr 2019 01:30:01 -0400 Subject: Started adding linting --- package.json | 2 + src/Utils.ts | 2 +- src/client/Server.ts | 52 +++++++------- src/client/SocketStub.ts | 2 +- src/client/northstar/manager/Gateway.ts | 24 +++---- src/client/util/DocumentManager.ts | 10 +-- src/client/util/DragManager.ts | 23 +++--- src/client/util/Scripting.ts | 14 ++-- src/client/util/SelectionManager.ts | 5 +- src/client/util/Transform.ts | 50 ++++++------- src/client/util/TypedEvent.ts | 5 +- src/client/util/UndoManager.ts | 4 +- src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/EditableView.tsx | 4 +- src/client/views/InkingCanvas.tsx | 14 ++-- src/client/views/InkingControl.tsx | 4 +- src/client/views/InkingStroke.tsx | 7 +- src/client/views/Main.tsx | 13 ++-- .../views/collections/CollectionBaseView.tsx | 4 +- .../views/collections/CollectionSchemaView.tsx | 17 ++--- .../views/collections/CollectionVideoView.tsx | 2 +- .../views/collections/CollectionViewBase.tsx | 5 +- .../CollectionFreeFormLinksView.tsx | 18 ++--- .../collectionFreeForm/CollectionFreeFormView.tsx | 4 +- .../collections/collectionFreeForm/MarqueeView.tsx | 2 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 12 ++-- src/client/views/nodes/DocumentView.tsx | 5 +- src/client/views/nodes/FieldView.tsx | 5 +- src/client/views/nodes/ImageBox.tsx | 2 +- src/client/views/nodes/KeyValueBox.tsx | 5 +- src/client/views/nodes/PDFBox.tsx | 36 +++++----- src/client/views/nodes/VideoBox.tsx | 4 +- src/debug/Viewer.tsx | 7 +- src/fields/Document.ts | 14 ++-- src/fields/WebField.ts | 2 +- src/mobile/ImageUpload.tsx | 5 +- .../authentication/controllers/WorkspacesMenu.tsx | 2 +- .../authentication/controllers/user_controller.ts | 12 ++-- src/server/database.ts | 2 +- src/server/index.ts | 8 +-- test/test.ts | 2 +- tslint.json | 56 +++++++++++++++ webpack.config.js | 83 ++++++++++++---------- 43 files changed, 292 insertions(+), 259 deletions(-) create mode 100644 tslint.json (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/package.json b/package.json index 27b3eead1..4fc253834 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,8 @@ "scss-loader": "0.0.1", "style-loader": "^0.23.1", "ts-node": "^7.0.1", + "tslint": "^5.15.0", + "tslint-loader": "^3.5.4", "typescript": "^3.3.3333", "webpack": "^4.29.6", "webpack-cli": "^3.2.3", diff --git a/src/Utils.ts b/src/Utils.ts index 3eb192eb8..8bd7f2f5c 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -18,7 +18,7 @@ export class Utils { return { scale: 1, translateX: 1, translateY: 1 } } const rect = ele.getBoundingClientRect(); - const scale = ele.offsetWidth == 0 && rect.width == 0 ? 1 : rect.width / ele.offsetWidth; + const scale = ele.offsetWidth === 0 && rect.width === 0 ? 1 : rect.width / ele.offsetWidth; const translateX = rect.left; const translateY = rect.top; diff --git a/src/client/Server.ts b/src/client/Server.ts index c301b04d3..e3f4448cb 100644 --- a/src/client/Server.ts +++ b/src/client/Server.ts @@ -21,11 +21,11 @@ export class Server { let fn = (cb: (field: Opt) => void) => { let cached = this.ClientFieldsCached.get(fieldid); - if (!cached) { + if (cached === undefined) { this.ClientFieldsCached.set(fieldid, FieldWaiting); SocketStub.SEND_FIELD_REQUEST(fieldid, action((field: Field | undefined) => { let cached = this.ClientFieldsCached.get(fieldid); - if (cached != FieldWaiting) + if (cached !== FieldWaiting) cb(cached); else { if (field) { @@ -36,23 +36,22 @@ export class Server { cb(field) } })); - } else if (cached != FieldWaiting) { + } else if (cached !== FieldWaiting) { setTimeout(() => cb(cached as Field), 0); } else { - reaction(() => { - return this.ClientFieldsCached.get(fieldid); - }, (field, reaction) => { - if (field !== FieldWaiting) { - reaction.dispose() - cb(field) - } - }) + reaction(() => + this.ClientFieldsCached.get(fieldid), (field, reaction) => { + if (field !== FieldWaiting) { + reaction.dispose() + cb(field) + } + }) } } if (callback) { fn(callback); } else { - return new Promise(res => fn(res)); + return new Promise(fn); } } @@ -92,24 +91,23 @@ export class Server { } } } - reaction(() => { - return waitingFieldIds.map(id => this.ClientFieldsCached.get(id)); - }, (cachedFields, reaction) => { - if (!cachedFields.some(field => !field || field === FieldWaiting)) { - reaction.dispose(); - for (let field of cachedFields) { - let realField = field as Field; - existingFields[realField.Id] = realField; + reaction(() => + waitingFieldIds.map(id => this.ClientFieldsCached.get(id)), (cachedFields, reaction) => { + if (!cachedFields.some(field => !field)) { + reaction.dispose(); + for (let field of cachedFields) { + let realField = field as Field; + existingFields[realField.Id] = realField; + } + cb({ ...fields, ...existingFields }) } - cb({ ...fields, ...existingFields }) - } - }, { fireImmediately: true }) + }, { fireImmediately: true }) })); }; if (callback) { fn(callback); } else { - return new Promise(res => fn(res)); + return new Promise(fn); } } @@ -153,19 +151,19 @@ export class Server { @action private static cacheField(clientField: Field) { var cached = this.ClientFieldsCached.get(clientField.Id); - if (!cached || cached == FieldWaiting) { + if (!cached || cached === FieldWaiting) { this.ClientFieldsCached.set(clientField.Id, clientField); } else { // probably should overwrite the values within any field that was already here... } - return this.ClientFieldsCached.get(clientField.Id) as Field; + return this.ClientFieldsCached.get(clientField.Id); } @action static updateField(field: { _id: string, data: any, type: Types }) { if (Server.ClientFieldsCached.has(field._id)) { var f = Server.ClientFieldsCached.get(field._id); - if (f && f != FieldWaiting) { + if (f && f !== FieldWaiting) { // console.log("Applying : " + field._id); f.UpdateFromServer(field.data); f.init(() => { }); diff --git a/src/client/SocketStub.ts b/src/client/SocketStub.ts index 5045037c5..c3cd8bee6 100644 --- a/src/client/SocketStub.ts +++ b/src/client/SocketStub.ts @@ -55,7 +55,7 @@ export class SocketStub { if (callback) { fn(callback); } else { - return new Promise(res => fn(res)) + return new Promise(fn) } } diff --git a/src/client/northstar/manager/Gateway.ts b/src/client/northstar/manager/Gateway.ts index 5ae5e4f47..3e72a50ae 100644 --- a/src/client/northstar/manager/Gateway.ts +++ b/src/client/northstar/manager/Gateway.ts @@ -246,18 +246,18 @@ export class Settings { else { this.ServerUrl = environment["SERVER_URL"] ? environment["SERVER_URL"] : document.URL; }*/ - this.ServerUrl = environment["SERVER_URL"] ? environment["SERVER_URL"] : document.URL; - this.ServerApiPath = environment["SERVER_API_PATH"]; - this.SampleSize = environment["SAMPLE_SIZE"]; - this.XBins = environment["X_BINS"]; - this.YBins = environment["Y_BINS"]; - this.SplashTimeInMS = environment["SPLASH_TIME_IN_MS"]; - this.ShowFpsCounter = environment["SHOW_FPS_COUNTER"]; - this.ShowShutdownButton = environment["SHOW_SHUTDOWN_BUTTON"]; - this.IsMenuFixed = environment["IS_MENU_FIXED"]; - this.IsDarpa = environment["IS_DARPA"]; - this.IsIGT = environment["IS_IGT"]; - this.DegreeOfParallelism = environment["DEGREE_OF_PARALLISM"]; + this.ServerUrl = environment.SERVER_URL ? environment.SERVER_URL : document.URL; + this.ServerApiPath = environment.SERVER_API_PATH; + this.SampleSize = environment.SAMPLE_SIZE; + this.XBins = environment.X_BINS; + this.YBins = environment.Y_BINS; + this.SplashTimeInMS = environment.SPLASH_TIME_IN_MS; + this.ShowFpsCounter = environment.SHOW_FPS_COUNTER; + this.ShowShutdownButton = environment.SHOW_SHUTDOWN_BUTTON; + this.IsMenuFixed = environment.IS_MENU_FIXED; + this.IsDarpa = environment.IS_DARPA; + this.IsIGT = environment.IS_IGT; + this.DegreeOfParallelism = environment.DEGREE_OF_PARALLISM; } public static get Instance(): Settings { diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index bf59fbb43..7cb368f47 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -29,7 +29,7 @@ export class DocumentManager { public getAllDocumentViews(collection: Document) { return this.DocumentViews.filter(dv => - dv.props.ContainingCollectionView && dv.props.ContainingCollectionView.props.Document == collection); + dv.props.ContainingCollectionView && dv.props.ContainingCollectionView.props.Document === collection); } public getDocumentView(toFind: Document): DocumentView | null { @@ -47,7 +47,7 @@ export class DocumentManager { return; } let docSrc = doc.GetT(KeyStore.Prototype, Document); - if (docSrc && docSrc != FieldWaiting && Object.is(docSrc, toFind)) { + if (docSrc && docSrc !== FieldWaiting && Object.is(docSrc, toFind)) { toReturn = view; } }) @@ -67,7 +67,7 @@ export class DocumentManager { toReturn.push(view); } else { let docSrc = doc.GetT(KeyStore.Prototype, Document); - if (docSrc && docSrc != FieldWaiting && Object.is(docSrc, toFind)) { + if (docSrc && docSrc !== FieldWaiting && Object.is(docSrc, toFind)) { toReturn.push(view); } } @@ -80,11 +80,11 @@ export class DocumentManager { public get LinkedDocumentViews() { return DocumentManager.Instance.DocumentViews.reduce((pairs, dv) => { let linksList = dv.props.Document.GetT(KeyStore.LinkedToDocs, ListField); - if (linksList && linksList != FieldWaiting && linksList.Data.length) { + if (linksList && linksList !== FieldWaiting && linksList.Data.length) { pairs.push(...linksList.Data.reduce((pairs, link) => { if (link instanceof Document) { let linkToDoc = link.GetT(KeyStore.LinkedToDocs, Document); - if (linkToDoc && linkToDoc != FieldWaiting) { + if (linkToDoc && linkToDoc !== FieldWaiting) { DocumentManager.Instance.getDocumentViews(linkToDoc).map(docView1 => { pairs.push({ a: dv, b: docView1, l: link }) }) diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 96c965c23..ff778302b 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -6,6 +6,7 @@ import { ImageField } from "../../fields/ImageField"; import { KeyStore } from "../../fields/KeyStore"; import { CollectionView } from "../views/collections/CollectionView"; import { DocumentView } from "../views/nodes/DocumentView"; +import { emptyFunction } from "../../Utils"; export function setupDrag(_reference: React.RefObject, docFunc: () => Document, removeFunc: (containingCollection: CollectionView) => void = () => { }) { let onRowMove = action((e: PointerEvent): void => { @@ -24,7 +25,7 @@ export function setupDrag(_reference: React.RefObject, docFunc: }); let onItemDown = (e: React.PointerEvent) => { // if (this.props.isSelected() || this.props.isTopMost) { - if (e.button == 0) { + if (e.button === 0) { e.stopPropagation(); if (e.shiftKey) { CollectionDockingView.Instance.StartOtherDrag([docFunc()], e); @@ -88,7 +89,7 @@ export namespace DragManager { if ("canDrop" in element.dataset) { throw new Error("Element is already droppable, can't make it droppable again"); } - element.dataset["canDrop"] = "true"; + element.dataset.canDrop = "true"; const handler = (e: Event) => { const ce = e as CustomEvent; options.handlers.drop(e, ce.detail); @@ -96,7 +97,7 @@ export namespace DragManager { element.addEventListener("dashOnDrop", handler); return () => { element.removeEventListener("dashOnDrop", handler); - delete element.dataset["canDrop"] + delete element.dataset.canDrop }; } @@ -167,11 +168,11 @@ export namespace DragManager { let thumbnail = docs[0].GetT(KeyStore.Thumbnail, ImageField); if (pdfBox && pdfBox.childElementCount && thumbnail) { let img = new Image(); - img!.src = thumbnail.toString(); - img!.style.position = "absolute"; - img!.style.width = `${rect.width / scaleX}px`; - img!.style.height = `${rect.height / scaleY}px`; - pdfBox.replaceChild(img!, pdfBox.children[0]) + img.src = thumbnail.toString(); + img.style.position = "absolute"; + img.style.width = `${rect.width / scaleX}px`; + img.style.height = `${rect.height / scaleY}px`; + pdfBox.replaceChild(img, pdfBox.children[0]) } } @@ -224,9 +225,9 @@ export namespace DragManager { }); const target = document.elementFromPoint(e.x, e.y); removed.map(r => { - let dragEle: HTMLElement = r[0]!; - let parent: HTMLElement | null = r[1]; - if (parent) + let dragEle = r[0]; + let parent = r[1]; + if (parent && dragEle) parent.appendChild(dragEle); }); if (target) { diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts index 4e97b9401..8aef44a3a 100644 --- a/src/client/util/Scripting.ts +++ b/src/client/util/Scripting.ts @@ -26,7 +26,7 @@ export interface ExecutableScript { } function Compile(script: string | undefined, diagnostics: Opt, scope: { [name: string]: any }): ExecutableScript { - const compiled = !(diagnostics && diagnostics.some(diag => diag.category == ts.DiagnosticCategory.Error)); + const compiled = !(diagnostics && diagnostics.some(diag => diag.category === ts.DiagnosticCategory.Error)); let func: () => Opt; if (compiled && script) { @@ -40,7 +40,7 @@ function Compile(script: string | undefined, diagnostics: Opt, scope: { [ paramNames.push(prop); params.push(scope[prop]); } - let thisParam = scope["this"]; + let thisParam = scope.this; let compiledFunction = new Function(...paramNames, script); func = function (): Opt { return compiledFunction.apply(thisParam, params) @@ -49,10 +49,8 @@ function Compile(script: string | undefined, diagnostics: Opt, scope: { [ func = () => undefined; } - return Object.assign(func, - { - compiled - }); + Object.assign(func, { compiled }); + return func as ExecutableScript; } interface File { @@ -125,9 +123,9 @@ export function CompileScript(script: string, scope?: { [name: string]: any }, a } export function ToField(data: any): Opt { - if (typeof data == "string") { + if (typeof data === "string") { return new TextField(data); - } else if (typeof data == "number") { + } else if (typeof data === "number") { return new NumberField(data); } return undefined; diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 05810b61c..494420f0b 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -40,9 +40,8 @@ export namespace SelectionManager { export function DeselectAll(except?: Document): void { let found: DocumentView | undefined = undefined; if (except) { - for (let i = 0; i < manager.SelectedDocuments.length; i++) { - let view = manager.SelectedDocuments[i]; - if (view.props.Document == except) + for (const view of manager.SelectedDocuments) { + if (view.props.Document === except) found = view; } } diff --git a/src/client/util/Transform.ts b/src/client/util/Transform.ts index 889134e3e..8608264a1 100644 --- a/src/client/util/Transform.ts +++ b/src/client/util/Transform.ts @@ -62,33 +62,26 @@ export class Transform { return this; } - translated = (x: number, y: number): Transform => { - return this.copy().translate(x, y); - } + translated = (x: number, y: number): Transform => + this.copy().translate(x, y) - preTranslated = (x: number, y: number): Transform => { - return this.copy().preTranslate(x, y); - } + preTranslated = (x: number, y: number): Transform => + this.copy().preTranslate(x, y) - scaled = (scale: number): Transform => { - return this.copy().scale(scale); - } + scaled = (scale: number): Transform => + this.copy().scale(scale) - scaledAbout = (scale: number, x: number, y: number): Transform => { - return this.copy().scaleAbout(scale, x, y); - } + scaledAbout = (scale: number, x: number, y: number): Transform => + this.copy().scaleAbout(scale, x, y) - preScaled = (scale: number): Transform => { - return this.copy().preScale(scale); - } + preScaled = (scale: number): Transform => + this.copy().preScale(scale) - transformed = (transform: Transform): Transform => { - return this.copy().transform(transform); - } + transformed = (transform: Transform): Transform => + this.copy().transform(transform) - preTransformed = (transform: Transform): Transform => { - return this.copy().preTransform(transform); - } + preTransformed = (transform: Transform): Transform => + this.copy().preTransform(transform) transformPoint = (x: number, y: number): [number, number] => { x *= this._scale; @@ -98,9 +91,8 @@ export class Transform { return [x, y]; } - transformDirection = (x: number, y: number): [number, number] => { - return [x * this._scale, y * this._scale]; - } + transformDirection = (x: number, y: number): [number, number] => + [x * this._scale, y * this._scale] transformBounds(x: number, y: number, width: number, height: number): { x: number, y: number, width: number, height: number } { [x, y] = this.transformPoint(x, y); @@ -108,12 +100,10 @@ export class Transform { return { x, y, width, height }; } - inverse = () => { - return new Transform(-this._translateX / this._scale, -this._translateY / this._scale, 1 / this._scale) - } + inverse = () => + new Transform(-this._translateX / this._scale, -this._translateY / this._scale, 1 / this._scale) - copy = () => { - return new Transform(this._translateX, this._translateY, this._scale); - } + copy = () => + new Transform(this._translateX, this._translateY, this._scale) } \ No newline at end of file diff --git a/src/client/util/TypedEvent.ts b/src/client/util/TypedEvent.ts index 0714a7f5c..c590d3734 100644 --- a/src/client/util/TypedEvent.ts +++ b/src/client/util/TypedEvent.ts @@ -36,7 +36,6 @@ export class TypedEvent { this.listenersOncer = []; } - pipe = (te: TypedEvent): Disposable => { - return this.on((e) => te.emit(e)); - } + pipe = (te: TypedEvent): Disposable => + this.on((e) => te.emit(e)) } \ No newline at end of file diff --git a/src/client/util/UndoManager.ts b/src/client/util/UndoManager.ts index 6d1b2f1b8..1e5028375 100644 --- a/src/client/util/UndoManager.ts +++ b/src/client/util/UndoManager.ts @@ -159,8 +159,8 @@ export namespace UndoManager { } undoing = true; - for (let i = 0; i < commands.length; i++) { - commands[i].redo(); + for (const command of commands) { + command.redo(); } undoing = false; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index d0699e1ab..b0aa190e5 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -75,7 +75,7 @@ export class DocumentDecorations extends React.Component { this._dragging = true; document.removeEventListener("pointermove", this.onBackgroundMove); document.removeEventListener("pointerup", this.onBackgroundUp); - DragManager.StartDocumentDrag(SelectionManager.SelectedDocuments().map(docView => (docView as any)._mainCont!.current!), dragData, { + DragManager.StartDocumentDrag(SelectionManager.SelectedDocuments().map(docView => (docView as any)._mainCont.current), dragData, { handlers: { dragComplete: action(() => this._dragging = false), }, diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 29bf6add7..982aacdea 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -38,7 +38,7 @@ export class EditableView extends React.Component { @action onKeyDown = (e: React.KeyboardEvent) => { - if (e.key == "Enter") { + if (e.key === "Enter") { if (!e.ctrlKey) { if (this.props.SetValue(e.currentTarget.value)) { this.editing = false; @@ -47,7 +47,7 @@ export class EditableView extends React.Component { this.props.OnFillDown(e.currentTarget.value); this.editing = false; } - } else if (e.key == "Escape") { + } else if (e.key === "Escape") { this.editing = false; } } diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index cad4b74b1..a2956f1b6 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -56,7 +56,7 @@ export class InkingCanvas extends React.Component { @action onPointerDown = (e: React.PointerEvent): void => { - if (e.button != 0 || e.altKey || e.ctrlKey || InkingControl.Instance.selectedTool === InkTool.None) { + if (e.button !== 0 || e.altKey || e.ctrlKey || InkingControl.Instance.selectedTool === InkTool.None) { return; } document.addEventListener("pointermove", this.onPointerMove, true); @@ -64,7 +64,7 @@ export class InkingCanvas extends React.Component { e.stopPropagation(); e.preventDefault(); - if (InkingControl.Instance.selectedTool != InkTool.Eraser) { + if (InkingControl.Instance.selectedTool !== InkTool.Eraser) { // start the new line, saves a uuid to represent the field of the stroke this._currentStrokeId = Utils.GenerateGuid(); this.inkData.set(this._currentStrokeId, { @@ -94,7 +94,7 @@ export class InkingCanvas extends React.Component { onPointerMove = (e: PointerEvent): void => { e.stopPropagation() e.preventDefault(); - if (InkingControl.Instance.selectedTool != InkTool.Eraser) { + if (InkingControl.Instance.selectedTool !== InkTool.Eraser) { let data = this.inkData; // add points to new line as it is being drawn let strokeData = data.get(this._currentStrokeId); if (strokeData) { @@ -121,7 +121,7 @@ export class InkingCanvas extends React.Component { get drawnPaths() { let curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1) let paths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { - if (strokeData.page == -1 || strokeData.page == curPage) + if (strokeData.page === -1 || strokeData.page === curPage) paths.push( { }, [] as JSX.Element[]); return [ - {paths.filter(path => path.props.tool == InkTool.Highlighter)} + {paths.filter(path => path.props.tool === InkTool.Highlighter)} , - {paths.filter(path => path.props.tool != InkTool.Highlighter)} + {paths.filter(path => path.props.tool !== InkTool.Highlighter)} ]; } render() { - let svgCanvasStyle = InkingControl.Instance.selectedTool != InkTool.None ? "canSelect" : "noSelect"; + let svgCanvasStyle = InkingControl.Instance.selectedTool !== InkTool.None ? "canSelect" : "noSelect"; return (
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index c1519dff8..13f0a0acc 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -36,9 +36,9 @@ export class InkingControl extends React.Component { @action switchColor = (color: ColorResult): void => { this._selectedColor = color.hex; - if (SelectionManager.SelectedDocuments().length == 1) { + if (SelectionManager.SelectedDocuments().length === 1) { var sdoc = SelectionManager.SelectedDocuments()[0]; - if (sdoc.props.ContainingCollectionView && sdoc.props.ContainingCollectionView) { + if (sdoc.props.ContainingCollectionView) { sdoc.props.Document.SetDataOnPrototype(KeyStore.BackgroundColor, color.hex, TextField); } } diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 615f8af7e..dbb79c0c6 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -29,9 +29,8 @@ export class InkingStroke extends React.Component { } } - parseData = (line: Array<{ x: number, y: number }>): string => { - return !line.length ? "" : "M " + line.map(p => (p.x + this.props.offsetX) + " " + (p.y + this.props.offsetY)).join(" L "); - } + parseData = (line: Array<{ x: number, y: number }>): string => + !line.length ? "" : "M " + line.map(p => (p.x + this.props.offsetX) + " " + (p.y + this.props.offsetY)).join(" L ") createStyle() { switch (this._strokeTool) { @@ -49,7 +48,7 @@ export class InkingStroke extends React.Component { let pathStyle = this.createStyle(); let pathData = this.parseData(this.props.line); - let pointerEvents: any = InkingControl.Instance.selectedTool == InkTool.Eraser ? "all" : "none"; + let pointerEvents: any = InkingControl.Instance.selectedTool === InkTool.Eraser ? "all" : "none"; return ( diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 8f67c006d..446c3d55f 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -204,9 +204,7 @@ export class Main extends React.Component { @observable workspacesShown: boolean = false; - areWorkspacesShown = () => { - return this.workspacesShown; - } + areWorkspacesShown = () => this.workspacesShown @action toggleWorkspaces = () => { this.workspacesShown = !this.workspacesShown; @@ -373,8 +371,7 @@ export class Main extends React.Component { } } -Documents.initProtos().then(() => { - return CurrentUserUtils.loadCurrentUser() -}).then(() => { - ReactDOM.render(
, document.getElementById('root')); -}); +Documents.initProtos().then(() => + CurrentUserUtils.loadCurrentUser()).then(() => { + ReactDOM.render(
, document.getElementById('root')); + }); diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index 301467d99..9b68ee06c 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { FieldViewProps } from '../nodes/FieldView'; import { KeyStore } from '../../../fields/KeyStore'; import { NumberField } from '../../../fields/NumberField'; -import { FieldWaiting, Field } from '../../../fields/Field'; +import { FieldWaiting, Field, FieldValue } from '../../../fields/Field'; import { ContextMenu } from '../ContextMenu'; import { SelectionManager } from '../../util/SelectionManager'; import { Document } from '../../../fields/Document'; @@ -72,7 +72,7 @@ export class CollectionBaseView extends React.Component { if (this.createsCycle(annots[i], containerDocument)) return true; } - for (let containerProto: any = containerDocument; containerProto && containerProto != FieldWaiting; containerProto = containerProto.GetPrototype()) { + for (let containerProto: FieldValue = containerDocument; containerProto && containerProto != FieldWaiting; containerProto = containerProto.GetPrototype()) { if (containerProto.Id == documentToAdd.Id) return true; } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 78a813a99..ced46cc25 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -122,9 +122,7 @@ export class CollectionSchemaView extends CollectionViewBase { } return field || ""; }} - SetValue={(value: string) => { - return applyToDoc(props.Document, value); - }} + SetValue={(value: string) => applyToDoc(props.Document, value)} OnFillDown={(value: string) => { this.props.Document.GetTAsync>(this.props.fieldKey, ListField).then((val) => { if (val) { @@ -240,12 +238,8 @@ export class CollectionSchemaView extends CollectionViewBase { getContentScaling = (): number => this._contentScaling; getPanelWidth = (): number => this._panelWidth; getPanelHeight = (): number => this._panelHeight; - getTransform = (): Transform => { - return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._contentScaling); - } - getPreviewTransform = (): Transform => { - return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX - this._tableWidth, - COLLECTION_BORDER_WIDTH).scale(1 / this._contentScaling); - } + getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._contentScaling) + getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX - this._tableWidth, - COLLECTION_BORDER_WIDTH).scale(1 / this._contentScaling) focusDocument = (doc: Document) => { } @@ -332,9 +326,8 @@ export class CollectionSchemaView extends CollectionViewBase {
Show Preview
Displayed Columns
    - {Array.from(Object.keys(allKeys)).map(item => { - return () - })} + {Array.from(Object.keys(allKeys)).map(item => + ())}
diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index 7cb461b4d..3ab6db5ef 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -43,7 +43,7 @@ export class CollectionVideoView extends React.Component { @action mainCont = (ele: HTMLDivElement | null) => { if (ele) { - this._player = ele!.getElementsByTagName("video")[0]; + this._player = ele.getElementsByTagName("video")[0]; if (this.props.Document.GetNumber(KeyStore.CurPage, -1) >= 0) { this._currentTimecode = this.props.Document.GetNumber(KeyStore.CurPage, -1); } diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 71a639137..51280275c 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -171,9 +171,8 @@ export class CollectionViewBase extends React.Component fetch(upload, { method: 'POST', body: formData - }).then((res: Response) => { - return res.json() - }).then(json => { + }).then((res: Response) => + res.json()).then(json => { json.map((file: any) => { let path = window.location.origin + file runInAction(() => { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx index eb20b3100..b682ab303 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx @@ -37,11 +37,11 @@ export class CollectionFreeFormLinksView extends React.Component) => field.Data.findIndex(brush => { let bdocs = brush.GetList(KeyStore.BrushingDocs, [] as Document[]); - return (bdocs.length == 0 || (bdocs[0] == dstTarg && bdocs[1] == srcTarg) || (bdocs[0] == srcTarg && bdocs[1] == dstTarg)) + return (bdocs.length === 0 || (bdocs[0] === dstTarg && bdocs[1] === srcTarg) || (bdocs[0] === srcTarg && bdocs[1] === dstTarg)) }); let brushAction = (field: ListField) => { let found = findBrush(field); - if (found != -1) + if (found !== -1) field.Data.splice(found, 1); }; if (Math.abs(x1 + x1w - x2) < 20 || Math.abs(x2 + x2w - x1) < 20) { @@ -50,7 +50,7 @@ export class CollectionFreeFormLinksView extends React.Component) => (findBrush(field) == -1) && field.Data.push(linkDoc); + brushAction = brushAction = (field: ListField) => (findBrush(field) === -1) && field.Data.push(linkDoc); } dstTarg.GetOrCreateAsync(KeyStore.BrushingDocs, ListField, brushAction); srcTarg.GetOrCreateAsync(KeyStore.BrushingDocs, ListField, brushAction); @@ -63,10 +63,10 @@ export class CollectionFreeFormLinksView extends React.Component sv.props.ContainingCollectionView && sv.props.ContainingCollectionView.props.Document == this.props.Document); + return equalViews.filter(sv => sv.props.ContainingCollectionView && sv.props.ContainingCollectionView.props.Document === this.props.Document); } @computed @@ -78,14 +78,14 @@ export class CollectionFreeFormLinksView extends React.Component targetViews.map(tv => possiblePairs.push({ a: sv.props.Document, b: tv.props.Document }))); possiblePairs.map(possiblePair => { if (!drawnPairs.reduce((found, drawnPair) => { - let match = (possiblePair.a == drawnPair.a && possiblePair.b == drawnPair.b); + let match = (possiblePair.a === drawnPair.a && possiblePair.b === drawnPair.b); if (match) { - if (!drawnPair.l.reduce((found, link) => found || link.Id == connection.l.Id, false)) + if (!drawnPair.l.reduce((found, link) => found || link.Id === connection.l.Id, false)) drawnPair.l.push(connection.l); } return match || found; }, false)) { - drawnPairs.push({ a: possiblePair.a, b: possiblePair.b, l: [connection.l] as Document[] }); + drawnPairs.push({ a: possiblePair.a, b: possiblePair.b, l: [connection.l] }); } }) return drawnPairs diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index b04438ede..8c5d3f536 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -83,8 +83,8 @@ export class CollectionFreeFormView extends CollectionViewBase { drop = (e: Event, de: DragManager.DropEvent) => { if (super.drop(e, de)) { if (de.data instanceof DragManager.DocumentDragData) { - let screenX = de.x - (de.data.xOffset as number || 0); - let screenY = de.y - (de.data.yOffset as number || 0); + let screenX = de.x - (de.data.xOffset || 0); + let screenY = de.y - (de.data.yOffset || 0); const [x, y] = this.getTransform().transformPoint(screenX, screenY); let dragDoc = de.data.draggedDocuments[0]; let dragX = dragDoc.GetNumber(KeyStore.X, 0); diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index e2239c8be..b068d49d0 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -146,7 +146,7 @@ export class MarqueeView extends React.Component if (InkingCanvas.IntersectStrokeRect(value, this.Bounds)) { idata.set(key, { - pathData: value.pathData.map(val => { return { x: val.x + centerShiftX, y: val.y + centerShiftY } }), + pathData: value.pathData.map(val => ({ x: val.x + centerShiftX, y: val.y + centerShiftY })), color: value.color, width: value.width, tool: value.tool, diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index d52b662bd..e6475ee2a 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -52,14 +52,12 @@ export class CollectionFreeFormDocumentView extends React.Component { - return this.nativeWidth > 0 ? this.width / this.nativeWidth : 1; - } + contentScaling = () => + this.nativeWidth > 0 ? this.width / this.nativeWidth : 1 - getTransform = (): Transform => { - return this.props.ScreenToLocalTransform(). - translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)).scale(1 / this.contentScaling()); - } + getTransform = (): Transform => + this.props.ScreenToLocalTransform(). + translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)).scale(1 / this.contentScaling()) @computed get docView() { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 6c05f6924..34eb8919f 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -287,9 +287,8 @@ export class DocumentView extends React.Component { } - isSelected = () => { - return SelectionManager.IsSelected(this); - } + isSelected = () => + SelectionManager.IsSelected(this) select = (ctrlPressed: boolean) => { SelectionManager.SelectDoc(this, ctrlPressed) diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 4c6062a2f..d6035a076 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -96,9 +96,8 @@ export class FieldView extends React.Component { } else if (field instanceof ListField) { return (
- {(field as ListField).Data.map(f => { - return f instanceof Document ? f.Title : f.GetValue().toString(); - }).join(", ")} + {(field as ListField).Data.map(f => + f instanceof Document ? f.Title : f.GetValue().toString()).join(", ")}
) } // bcz: this belongs here, but it doesn't render well so taking it out for now diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 9b9dfe645..c5f29f7b0 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -104,7 +104,7 @@ export class ImageBox extends React.Component { render() { let field = this.props.Document.Get(this.props.fieldKey); - let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" : + let path = field === FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" : field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif"; let nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 1); return ( diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index a3478143d..9b067aeeb 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -103,14 +103,13 @@ export class KeyValueBox extends React.Component { this._valueInput = e.currentTarget.value; } - newKeyValue = () => { - return ( + newKeyValue = () => + ( ) - } render() { return (
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 3b5e3a570..66c9f477e 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -94,7 +94,7 @@ export class PDFBox extends React.Component { this._reactionDisposer = reaction( () => [this.curPage, this.thumbnailPage], () => { - if (this.curPage > 0 && this.thumbnailPage > 0 && this.curPage != this.thumbnailPage) { + if (this.curPage > 0 && this.thumbnailPage > 0 && this.curPage !== this.thumbnailPage) { this.saveThumbnail(); this._interactive = true; } @@ -165,16 +165,16 @@ export class PDFBox extends React.Component { let obj: Object = { parentDivs: [], spans: [] }; //@ts-ignore - if (range.commonAncestorContainer.className == 'react-pdf__Page__textContent') { //multiline highlighting case + if (range.commonAncestorContainer.className === 'react-pdf__Page__textContent') { //multiline highlighting case obj = this.highlightNodes(range.commonAncestorContainer.childNodes) } else { //single line highlighting case let parentDiv = range.commonAncestorContainer.parentElement if (parentDiv) { - if (parentDiv.className == 'react-pdf__Page__textContent') { //when highlight is overwritten + if (parentDiv.className === 'react-pdf__Page__textContent') { //when highlight is overwritten obj = this.highlightNodes(parentDiv.childNodes) } else { parentDiv.childNodes.forEach((child) => { - if (child.nodeName == 'SPAN') { + if (child.nodeName === 'SPAN') { //@ts-ignore obj.parentDivs.push(parentDiv) //@ts-ignore @@ -197,7 +197,7 @@ export class PDFBox extends React.Component { let temp = { parentDivs: [], spans: [] } nodes.forEach((div) => { div.childNodes.forEach((child) => { - if (child.nodeName == 'SPAN') { + if (child.nodeName === 'SPAN') { //@ts-ignore temp.parentDivs.push(div) //@ts-ignore @@ -221,7 +221,7 @@ export class PDFBox extends React.Component { let index: any; this._pageInfo.divs.forEach((obj: any) => { obj.spans.forEach((element: any) => { - if (element == span) { + if (element === span) { if (!index) { index = this._pageInfo.divs.indexOf(obj); } @@ -230,11 +230,11 @@ export class PDFBox extends React.Component { }) if (this._pageInfo.anno.length >= index + 1) { - if (this._currAnno.length == 0) { + if (this._currAnno.length === 0) { this._currAnno.push(this._pageInfo.anno[index]); } } else { - if (this._currAnno.length == 0) { //if there are no current annotation + if (this._currAnno.length === 0) { //if there are no current annotation let div = span.offsetParent; //@ts-ignore let divX = div.style.left @@ -315,7 +315,7 @@ export class PDFBox extends React.Component { * starts drawing the line when user presses down. */ onDraw = () => { - if (this._currTool != null) { + if (this._currTool !== null) { this._currTool.style.backgroundColor = "grey"; } @@ -340,13 +340,13 @@ export class PDFBox extends React.Component { * for changing color (for ink/pen) */ onColorChange = (e: React.PointerEvent) => { - if (e.currentTarget.innerHTML == "Red") { + if (e.currentTarget.innerHTML === "Red") { this._currColor = "red"; - } else if (e.currentTarget.innerHTML == "Blue") { + } else if (e.currentTarget.innerHTML === "Blue") { this._currColor = "blue"; - } else if (e.currentTarget.innerHTML == "Green") { + } else if (e.currentTarget.innerHTML === "Green") { this._currColor = "green"; - } else if (e.currentTarget.innerHTML == "Black") { + } else if (e.currentTarget.innerHTML === "Black") { this._currColor = "black"; } @@ -358,7 +358,7 @@ export class PDFBox extends React.Component { */ onHighlight = () => { this._drawToolOn = false; - if (this._currTool != null) { + if (this._currTool !== null) { this._currTool.style.backgroundColor = "grey"; } if (this._highlightTool.current) { @@ -394,7 +394,7 @@ export class PDFBox extends React.Component { onLoaded = (page: any) => { if (this._mainDiv.current) { this._mainDiv.current.childNodes.forEach((element) => { - if (element.nodeName == "DIV") { + if (element.nodeName === "DIV") { element.childNodes[0].childNodes.forEach((e) => { if (e instanceof HTMLCanvasElement) { @@ -410,7 +410,7 @@ export class PDFBox extends React.Component { // bcz: the number of pages should really be set when the document is imported. this.props.Document.SetNumber(KeyStore.NumPages, page._transport.numPages); - if (this._perPageInfo.length == 0) { //Makes sure it only runs once + if (this._perPageInfo.length === 0) { //Makes sure it only runs once this._perPageInfo = [...Array(page._transport.numPages)] } this._loaded = true; @@ -455,7 +455,7 @@ export class PDFBox extends React.Component { get pdfRenderer() { let proxy = this._loaded ? (null) : this.imageProxyRenderer; let pdfUrl = this.props.Document.GetT(this.props.fieldKey, PDFField); - if ((!this._interactive && proxy) || !pdfUrl || pdfUrl == FieldWaiting) { + if ((!this._interactive && proxy) || !pdfUrl || pdfUrl === FieldWaiting) { return proxy; } return [ @@ -470,7 +470,7 @@ export class PDFBox extends React.Component { get imageProxyRenderer() { let thumbField = this.props.Document.Get(KeyStore.Thumbnail); if (thumbField) { - let path = thumbField == FieldWaiting || this.thumbnailPage != this.curPage ? "https://image.flaticon.com/icons/svg/66/66163.svg" : + let path = thumbField === FieldWaiting || this.thumbnailPage !== this.curPage ? "https://image.flaticon.com/icons/svg/66/66163.svg" : thumbField instanceof ImageField ? thumbField.Data.href : "http://cs.brown.edu/people/bcz/prairie.jpg"; return ; } diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 72495a964..b4590df34 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -50,8 +50,8 @@ export class VideoBox extends React.Component { @action setVideoRef = (vref: HTMLVideoElement | null) => { if (this.curPage >= 0 && vref) { - vref!.currentTime = this.curPage; - (vref! as any).AHackBecauseSomethingResetsTheVideoToZero = this.curPage; + vref.currentTime = this.curPage; + (vref as any).AHackBecauseSomethingResetsTheVideoToZero = this.curPage; } } diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx index 7fdd77bf3..9f52d0ea6 100644 --- a/src/debug/Viewer.tsx +++ b/src/debug/Viewer.tsx @@ -87,7 +87,7 @@ class DocumentViewer extends React.Component<{ field: Document }> { return (
({key ? key.Name : kv[0]}): - +
) }) @@ -177,9 +177,8 @@ class Viewer extends React.Component { onChange={this.inputOnChange} onKeyDown={this.onKeyPress} />
- {this.ids.map(id => { - return - })} + {this.ids.map(id => + )}
) diff --git a/src/fields/Document.ts b/src/fields/Document.ts index 85ff6ddcb..45e4f93f6 100644 --- a/src/fields/Document.ts +++ b/src/fields/Document.ts @@ -30,9 +30,9 @@ export class Document extends Field { } } - public Width = () => { return this.GetNumber(KeyStore.Width, 0) } - public Height = () => { return this.GetNumber(KeyStore.Height, this.GetNumber(KeyStore.NativeWidth, 0) ? this.GetNumber(KeyStore.NativeHeight, 0) / this.GetNumber(KeyStore.NativeWidth, 0) * this.GetNumber(KeyStore.Width, 0) : 0) } - public Scale = () => { return this.GetNumber(KeyStore.Scale, 1) } + public Width = () => this.GetNumber(KeyStore.Width, 0) + public Height = () => this.GetNumber(KeyStore.Height, this.GetNumber(KeyStore.NativeWidth, 0) ? this.GetNumber(KeyStore.NativeHeight, 0) / this.GetNumber(KeyStore.NativeWidth, 0) * this.GetNumber(KeyStore.Width, 0) : 0) + public Scale = () => this.GetNumber(KeyStore.Scale, 1) @computed public get Title(): string { @@ -90,7 +90,7 @@ export class Document extends Field { } } else { let doc: FieldValue = this; - while (doc && doc != FieldWaiting && field != FieldWaiting) { + while (doc && doc !== FieldWaiting && field !== FieldWaiting) { let curField = doc.fields.get(key.Id); let curProxy = doc._proxies.get(key.Id); if (!curField || (curProxy && curField.field.Id !== curProxy)) { @@ -118,7 +118,7 @@ export class Document extends Field { break; } } - if (doc == FieldWaiting) + if (doc === FieldWaiting) field = FieldWaiting; } @@ -165,7 +165,7 @@ export class Document extends Field { if (callback) { fn(callback); } else { - return new Promise(res => fn(res)); + return new Promise(fn); } } @@ -356,7 +356,7 @@ export class Document extends Field { let fields: [string, string][] = [] this._proxies.forEach((field, key) => { if (field) { - fields.push([key, field as string]) + fields.push([key, field]) } }); diff --git a/src/fields/WebField.ts b/src/fields/WebField.ts index 6c4de5000..0cbcc6d33 100644 --- a/src/fields/WebField.ts +++ b/src/fields/WebField.ts @@ -4,7 +4,7 @@ import { Types } from "../server/Message"; export class WebField extends BasicField { constructor(data: URL | undefined = undefined, id?: FieldId, save: boolean = true) { - super(data == undefined ? new URL("https://crossorigin.me/" + "https://cs.brown.edu/") : data, save, id); + super(data === undefined ? new URL("https://crossorigin.me/" + "https://cs.brown.edu/") : data, save, id); } toString(): string { diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index ae48dd2c6..c4d346876 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -33,9 +33,8 @@ const onFileLoad = (file: any) => { fetch(upload, { method: 'POST', body: formData - }).then((res: Response) => { - return res.json() - }).then(json => { + }).then((res: Response) => + res.json()).then(json => { json.map((file: any) => { let path = window.location.origin + file var doc: Document = Documents.ImageDocument(path, { nativeWidth: 200, width: 200 }) diff --git a/src/server/authentication/controllers/WorkspacesMenu.tsx b/src/server/authentication/controllers/WorkspacesMenu.tsx index 8e14cf98e..835432c8e 100644 --- a/src/server/authentication/controllers/WorkspacesMenu.tsx +++ b/src/server/authentication/controllers/WorkspacesMenu.tsx @@ -73,7 +73,7 @@ export class WorkspacesMenu extends React.Component { {i + 1} - { return s.Title }} + GetValue={() => s.Title} SetValue={(title: string): boolean => { s.SetText(KeyStore.Title, title); return true; diff --git a/src/server/authentication/controllers/user_controller.ts b/src/server/authentication/controllers/user_controller.ts index e365b8dce..2bbb334b5 100644 --- a/src/server/authentication/controllers/user_controller.ts +++ b/src/server/authentication/controllers/user_controller.ts @@ -4,7 +4,7 @@ import * as passport from "passport"; import { IVerifyOptions } from "passport-local"; import "../config/passport"; import * as request from "express-validator"; -const flash = require("express-flash"); +import flash = require("express-flash"); import * as session from "express-session"; import * as pug from 'pug'; import * as async from 'async'; @@ -109,12 +109,12 @@ export let postLogin = (req: Request, res: Response, next: NextFunction) => { } passport.authenticate("local", (err: Error, user: DashUserModel, info: IVerifyOptions) => { - if (err) { return next(err); } + if (err) { next(err); return } if (!user) { return res.redirect(RouteStore.signup); } req.logIn(user, (err) => { - if (err) { return next(err); } + if (err) { next(err); return } res.redirect(RouteStore.home); }); })(req, res, next); @@ -158,7 +158,8 @@ export let postForgot = function (req: Request, res: Response, next: NextFunctio User.findOne({ email }, function (err, user: DashUserModel) { if (!user) { // NO ACCOUNT WITH SUBMITTED EMAIL - return res.redirect(RouteStore.forgot); + res.redirect(RouteStore.forgot); + return } user.passwordResetToken = token; user.passwordResetExpires = new Date(Date.now() + 3600000); // 1 HOUR @@ -228,7 +229,8 @@ export let postReset = function (req: Request, res: Response) { user.save(function (err) { if (err) { - return res.redirect(RouteStore.login); + res.redirect(RouteStore.login); + return; } req.logIn(user, function (err) { if (err) { diff --git a/src/server/database.ts b/src/server/database.ts index a42d29aac..87a0b3c70 100644 --- a/src/server/database.ts +++ b/src/server/database.ts @@ -27,7 +27,7 @@ export class Database { console.log(err.errmsg); } if (res) { - console.log(JSON.stringify(res.result)); + // console.log(JSON.stringify(res.result)); } callback() }); diff --git a/src/server/index.ts b/src/server/index.ts index 17d7432e0..0c61f6885 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -264,11 +264,9 @@ function deleteFields() { } function deleteAll() { - return Database.Instance.deleteAll().then(() => { - return Database.Instance.deleteAll('sessions') - }).then(() => { - return Database.Instance.deleteAll('users') - }); + return Database.Instance.deleteAll().then(() => + Database.Instance.deleteAll('sessions')).then(() => + Database.Instance.deleteAll('users')); } function barReceived(guid: String) { diff --git a/test/test.ts b/test/test.ts index 0fa1ea15b..db24cae5f 100644 --- a/test/test.ts +++ b/test/test.ts @@ -152,7 +152,7 @@ describe("Reference", () => { let ran = false; reaction(() => { let field = doc2.GetT(key, NumberField); - if (field && field != FieldWaiting) { + if (field && field !== FieldWaiting) { return field.Data; } return undefined; diff --git a/tslint.json b/tslint.json new file mode 100644 index 000000000..54876916e --- /dev/null +++ b/tslint.json @@ -0,0 +1,56 @@ +{ + "rules": { + // "no-non-null-assertion": true, + "no-return-await": true, + "no-string-literal": true, + // "no-var-keyword": true, + // "no-var-requires": true, + "prefer-object-spread": true, + "prefer-for-of": true, + "no-unnecessary-type-assertion": true, + // "no-void-expression": [ + // true, + // "ignore-arrow-function-shorthand" + // ], + "triple-equals": true, + // "prefer-const": true, + "no-unnecessary-callback-wrapper": true, + // "align": [ + // true, + // "parameters", + // "arguments", + // "statements", + // "members", + // "elements" + // ], + "class-name": true, + "arrow-return-shorthand": true, + // "object-literal-shorthand": true, + // "object-literal-sort-keys": true, + // "semicolon": [ + // true, + // "always" + // ], + // "curly": [ + // true, + // "ignore-same-line" + // ], + // "quotemark": [ + // true, + // "double", + // "jsx-double", + // "avoid-template", + // "avoid-escape" + // ], + "no-tautology-expression": true, + "unnecessary-constructor": true + // "trailing-comma": [ + // true, + // { + // "multiline": "always", + // "singleline": "never" + // } + // ], + // "ordered-imports": true + } +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 5ba9dd4b5..50079255f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -28,44 +28,53 @@ module.exports = { extensions: ['.js', '.ts', '.tsx'] }, module: { - rules: [{ - test: [/\.tsx?$/, /\.ts?$/,], - loader: "awesome-typescript-loader", - include: path.join(__dirname, 'src') - }, - { - test: /\.scss|css$/, - use: [ - { - loader: "style-loader" - }, - { - loader: "css-loader" - }, - { - loader: "sass-loader" - } - ] - }, - { - test: /\.(jpg|png|pdf)$/, - use: [ - { - loader: 'file-loader' - } - ] - }, - { - test: /\.(png|jpg|gif)$/i, - use: [ - { - loader: 'url-loader', - options: { - limit: 8192 + rules: [ + { + test: [/\.tsx?$/, /\.ts?$/,], + enforce: 'pre', + use: [ + { + loader: "tslint-loader", } - } - ] - }] + ] + }, { + test: [/\.tsx?$/, /\.ts?$/,], + loader: "awesome-typescript-loader", + include: path.join(__dirname, 'src') + }, + { + test: /\.scss|css$/, + use: [ + { + loader: "style-loader" + }, + { + loader: "css-loader" + }, + { + loader: "sass-loader" + } + ] + }, + { + test: /\.(jpg|png|pdf)$/, + use: [ + { + loader: 'file-loader' + } + ] + }, + { + test: /\.(png|jpg|gif)$/i, + use: [ + { + loader: 'url-loader', + options: { + limit: 8192 + } + } + ] + }] }, plugins: [ new CopyWebpackPlugin([{ from: "deploy", to: path.join(__dirname, "build") }]), -- cgit v1.2.3-70-g09d2 From b78aff5115862cbfa5e704422cb738aa7fd73c64 Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 4 Apr 2019 14:13:29 -0400 Subject: fixed a number of smaller issues related to linking --- src/client/northstar/dash-nodes/HistogramBox.scss | 5 + src/client/util/DragManager.ts | 533 +++++++------- src/client/util/SelectionManager.ts | 74 +- src/client/views/DocumentDecorations.scss | 61 +- src/client/views/DocumentDecorations.tsx | 81 ++- src/client/views/InkingCanvas.scss | 2 + src/client/views/Main.scss | 7 + .../views/collections/CollectionDockingView.scss | 2 +- .../views/collections/CollectionPDFView.scss | 2 + .../views/collections/CollectionVideoView.scss | 2 + .../views/collections/CollectionViewBase.tsx | 20 + .../CollectionFreeFormLinkView.tsx | 8 +- .../CollectionFreeFormLinksView.scss | 2 + .../collectionFreeForm/CollectionFreeFormView.scss | 6 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 13 +- .../collectionFreeForm/MarqueeView.scss | 2 + .../collectionFreeForm/PreviewCursor.scss | 4 + .../views/nodes/CollectionFreeFormDocumentView.tsx | 4 + src/client/views/nodes/DocumentView.scss | 2 + src/client/views/nodes/PDFBox.scss | 4 + src/client/views/nodes/WebBox.scss | 2 + src/fields/Document.ts | 773 +++++++++++---------- 22 files changed, 882 insertions(+), 727 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/northstar/dash-nodes/HistogramBox.scss b/src/client/northstar/dash-nodes/HistogramBox.scss index b11840a65..94da36e29 100644 --- a/src/client/northstar/dash-nodes/HistogramBox.scss +++ b/src/client/northstar/dash-nodes/HistogramBox.scss @@ -1,6 +1,8 @@ .histogrambox-container { padding: 0vw; position: absolute; + top: 0; + left:0; text-align: center; width: 100%; height: 100%; @@ -8,6 +10,7 @@ } .histogrambox-xaxislabel { position:absolute; + left:0; width:100%; text-align: center; bottom:0; @@ -19,11 +22,13 @@ position:absolute; height:100%; width: 25px; + left:0; bottom:0; background: lightgray; } .histogrambox-yaxislabel-text { position:absolute; + left:0; transform-origin: left; transform: rotate(-90deg); text-align: center; diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index c0f482e18..e8f8cce7c 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -8,304 +8,307 @@ import { CollectionView } from "../views/collections/CollectionView"; import { DocumentView } from "../views/nodes/DocumentView"; export function setupDrag( - _reference: React.RefObject, - docFunc: () => Document, - removeFunc: (containingCollection: CollectionView) => void = () => {} + _reference: React.RefObject, + docFunc: () => Document, + removeFunc: (containingCollection: CollectionView) => void = () => { } ) { - let onRowMove = action( - (e: PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); + let onRowMove = action( + (e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); - document.removeEventListener("pointermove", onRowMove); - document.removeEventListener("pointerup", onRowUp); - var dragData = new DragManager.DocumentDragData([docFunc()]); - dragData.removeDocument = removeFunc; - DragManager.StartDocumentDrag([_reference.current!], dragData); - } - ); - let onRowUp = action( - (e: PointerEvent): void => { - document.removeEventListener("pointermove", onRowMove); - document.removeEventListener("pointerup", onRowUp); - } - ); - let onItemDown = (e: React.PointerEvent) => { - // if (this.props.isSelected() || this.props.isTopMost) { - if (e.button == 0) { - e.stopPropagation(); - if (e.shiftKey) { - CollectionDockingView.Instance.StartOtherDrag([docFunc()], e); - } else { - document.addEventListener("pointermove", onRowMove); - document.addEventListener("pointerup", onRowUp); - } - } - //} - }; - return onItemDown; + document.removeEventListener("pointermove", onRowMove); + document.removeEventListener("pointerup", onRowUp); + var dragData = new DragManager.DocumentDragData([docFunc()]); + dragData.removeDocument = removeFunc; + DragManager.StartDocumentDrag([_reference.current!], dragData); + } + ); + let onRowUp = action( + (e: PointerEvent): void => { + document.removeEventListener("pointermove", onRowMove); + document.removeEventListener("pointerup", onRowUp); + } + ); + let onItemDown = (e: React.PointerEvent) => { + // if (this.props.isSelected() || this.props.isTopMost) { + if (e.button == 0) { + e.stopPropagation(); + if (e.shiftKey) { + CollectionDockingView.Instance.StartOtherDrag([docFunc()], e); + } else { + document.addEventListener("pointermove", onRowMove); + document.addEventListener("pointerup", onRowUp); + } + } + //} + }; + return onItemDown; } export namespace DragManager { - export function Root() { - const root = document.getElementById("root"); - if (!root) { - throw new Error("No root element found"); + export function Root() { + const root = document.getElementById("root"); + if (!root) { + throw new Error("No root element found"); + } + return root; } - return root; - } - let dragDiv: HTMLDivElement; + let dragDiv: HTMLDivElement; - export enum DragButtons { - Left = 1, - Right = 2, - Both = Left | Right - } + export enum DragButtons { + Left = 1, + Right = 2, + Both = Left | Right + } - interface DragOptions { - handlers: DragHandlers; + interface DragOptions { + handlers: DragHandlers; - hideSource: boolean | (() => boolean); - } + hideSource: boolean | (() => boolean); + } - export interface DragDropDisposer { - (): void; - } + export interface DragDropDisposer { + (): void; + } - export class DragCompleteEvent {} + export class DragCompleteEvent { } - export interface DragHandlers { - dragComplete: (e: DragCompleteEvent) => void; - } + export interface DragHandlers { + dragComplete: (e: DragCompleteEvent) => void; + } - export interface DropOptions { - handlers: DropHandlers; - } - export class DropEvent { - constructor( - readonly x: number, - readonly y: number, - readonly data: { [id: string]: any } - ) {} - } + export interface DropOptions { + handlers: DropHandlers; + } + export class DropEvent { + constructor( + readonly x: number, + readonly y: number, + readonly data: { [id: string]: any } + ) { } + } - export interface DropHandlers { - drop: (e: Event, de: DropEvent) => void; - } + export interface DropHandlers { + drop: (e: Event, de: DropEvent) => void; + } - export function MakeDropTarget( - element: HTMLElement, - options: DropOptions - ): DragDropDisposer { - if ("canDrop" in element.dataset) { - throw new Error( - "Element is already droppable, can't make it droppable again" - ); + export function MakeDropTarget( + element: HTMLElement, + options: DropOptions + ): DragDropDisposer { + if ("canDrop" in element.dataset) { + throw new Error( + "Element is already droppable, can't make it droppable again" + ); + } + element.dataset["canDrop"] = "true"; + const handler = (e: Event) => { + const ce = e as CustomEvent; + options.handlers.drop(e, ce.detail); + }; + element.addEventListener("dashOnDrop", handler); + return () => { + element.removeEventListener("dashOnDrop", handler); + delete element.dataset["canDrop"]; + }; } - element.dataset["canDrop"] = "true"; - const handler = (e: Event) => { - const ce = e as CustomEvent; - options.handlers.drop(e, ce.detail); - }; - element.addEventListener("dashOnDrop", handler); - return () => { - element.removeEventListener("dashOnDrop", handler); - delete element.dataset["canDrop"]; - }; - } - export class DocumentDragData { - constructor(dragDoc: Document[]) { - this.draggedDocuments = dragDoc; - this.droppedDocuments = dragDoc; + export class DocumentDragData { + constructor(dragDoc: Document[]) { + this.draggedDocuments = dragDoc; + this.droppedDocuments = dragDoc; + } + draggedDocuments: Document[]; + droppedDocuments: Document[]; + xOffset?: number; + yOffset?: number; + aliasOnDrop?: boolean; + removeDocument?: (collectionDrop: CollectionView) => void; + [id: string]: any; } - draggedDocuments: Document[]; - droppedDocuments: Document[]; - xOffset?: number; - yOffset?: number; - aliasOnDrop?: boolean; - removeDocument?: (collectionDrop: CollectionView) => void; - [id: string]: any; - } - export function StartDocumentDrag( - eles: HTMLElement[], - dragData: DocumentDragData, - options?: DragOptions - ) { - StartDrag( - eles, - dragData, - options, - (dropData: { [id: string]: any }) => - (dropData.droppedDocuments = dragData.aliasOnDrop - ? dragData.draggedDocuments.map(d => d.CreateAlias()) - : dragData.draggedDocuments) - ); - } + export function StartDocumentDrag( + eles: HTMLElement[], + dragData: DocumentDragData, + options?: DragOptions + ) { + StartDrag( + eles, + dragData, + options, + (dropData: { [id: string]: any }) => + (dropData.droppedDocuments = dragData.aliasOnDrop + ? dragData.draggedDocuments.map(d => d.CreateAlias()) + : dragData.draggedDocuments) + ); + } - export class LinkDragData { - constructor(linkSourceDoc: DocumentView) { - this.linkSourceDocumentView = linkSourceDoc; + export class LinkDragData { + constructor(linkSourceDoc: DocumentView) { + this.linkSourceDocumentView = linkSourceDoc; + } + droppedDocuments: Document[] = []; + linkSourceDocumentView: DocumentView; + [id: string]: any; } - linkSourceDocumentView: DocumentView; - [id: string]: any; - } - export function StartLinkDrag( - ele: HTMLElement, - dragData: LinkDragData, - options?: DragOptions - ) { - StartDrag([ele], dragData, options); - } - function StartDrag( - eles: HTMLElement[], - dragData: { [id: string]: any }, - options?: DragOptions, - finishDrag?: (dropData: { [id: string]: any }) => void - ) { - if (!dragDiv) { - dragDiv = document.createElement("div"); - dragDiv.className = "dragManager-dragDiv"; - DragManager.Root().appendChild(dragDiv); + export function StartLinkDrag( + ele: HTMLElement, + dragData: LinkDragData, + options?: DragOptions + ) { + StartDrag([ele], dragData, options); } + function StartDrag( + eles: HTMLElement[], + dragData: { [id: string]: any }, + options?: DragOptions, + finishDrag?: (dropData: { [id: string]: any }) => void + ) { + if (!dragDiv) { + dragDiv = document.createElement("div"); + dragDiv.className = "dragManager-dragDiv"; + DragManager.Root().appendChild(dragDiv); + } - let scaleXs: number[] = []; - let scaleYs: number[] = []; - let xs: number[] = []; - let ys: number[] = []; + let scaleXs: number[] = []; + let scaleYs: number[] = []; + let xs: number[] = []; + let ys: number[] = []; - const docs: Document[] = - dragData instanceof DocumentDragData ? dragData.draggedDocuments : []; - let dragElements = eles.map(ele => { - const w = ele.offsetWidth, - h = ele.offsetHeight; - const rect = ele.getBoundingClientRect(); - const scaleX = rect.width / w, - scaleY = rect.height / h; - let x = rect.left, - y = rect.top; - xs.push(x); - ys.push(y); - scaleXs.push(scaleX); - scaleYs.push(scaleY); - let dragElement = ele.cloneNode(true) as HTMLElement; - dragElement.style.opacity = "0.7"; - dragElement.style.position = "absolute"; - dragElement.style.bottom = ""; - dragElement.style.left = ""; - dragElement.style.transformOrigin = "0 0"; - dragElement.style.zIndex = "1000"; - dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`; - dragElement.style.width = `${rect.width / scaleX}px`; - dragElement.style.height = `${rect.height / scaleY}px`; + const docs: Document[] = + dragData instanceof DocumentDragData ? dragData.draggedDocuments : []; + let dragElements = eles.map(ele => { + const w = ele.offsetWidth, + h = ele.offsetHeight; + const rect = ele.getBoundingClientRect(); + const scaleX = rect.width / w, + scaleY = rect.height / h; + let x = rect.left, + y = rect.top; + xs.push(x); + ys.push(y); + scaleXs.push(scaleX); + scaleYs.push(scaleY); + let dragElement = ele.cloneNode(true) as HTMLElement; + dragElement.style.opacity = "0.7"; + dragElement.style.position = "absolute"; + dragElement.style.margin = "0"; + dragElement.style.top = "0"; + dragElement.style.bottom = ""; + dragElement.style.left = "0"; + dragElement.style.transformOrigin = "0 0"; + dragElement.style.zIndex = "1000"; + dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`; + dragElement.style.width = `${rect.width / scaleX}px`; + dragElement.style.height = `${rect.height / scaleY}px`; - // bcz: PDFs don't show up if you clone them because they contain a canvas. - // however, PDF's have a thumbnail field that contains an image of their canvas. - // So we replace the pdf's canvas with the image thumbnail - if (docs.length) { - var pdfBox = dragElement.getElementsByClassName( - "pdfBox-cont" - )[0] as HTMLElement; - let thumbnail = docs[0].GetT(KeyStore.Thumbnail, ImageField); - if (pdfBox && pdfBox.childElementCount && thumbnail) { - let img = new Image(); - img!.src = thumbnail.toString(); - img!.style.position = "absolute"; - img!.style.width = `${rect.width / scaleX}px`; - img!.style.height = `${rect.height / scaleY}px`; - pdfBox.replaceChild(img!, pdfBox.children[0]); + // bcz: PDFs don't show up if you clone them because they contain a canvas. + // however, PDF's have a thumbnail field that contains an image of their canvas. + // So we replace the pdf's canvas with the image thumbnail + if (docs.length) { + var pdfBox = dragElement.getElementsByClassName( + "pdfBox-cont" + )[0] as HTMLElement; + let thumbnail = docs[0].GetT(KeyStore.Thumbnail, ImageField); + if (pdfBox && pdfBox.childElementCount && thumbnail) { + let img = new Image(); + img!.src = thumbnail.toString(); + img!.style.position = "absolute"; + img!.style.width = `${rect.width / scaleX}px`; + img!.style.height = `${rect.height / scaleY}px`; + pdfBox.replaceChild(img!, pdfBox.children[0]); + } + } + + dragDiv.appendChild(dragElement); + return dragElement; + }); + + let hideSource = false; + if (options) { + if (typeof options.hideSource === "boolean") { + hideSource = options.hideSource; + } else { + hideSource = options.hideSource(); + } } - } + eles.map(ele => (ele.hidden = hideSource)); - dragDiv.appendChild(dragElement); - return dragElement; - }); + const moveHandler = (e: PointerEvent) => { + e.stopPropagation(); + e.preventDefault(); + if (dragData instanceof DocumentDragData) + dragData.aliasOnDrop = e.ctrlKey || e.altKey; + if (e.shiftKey) { + abortDrag(); + CollectionDockingView.Instance.StartOtherDrag(docs, { + pageX: e.pageX, + pageY: e.pageY, + preventDefault: () => { }, + button: 0 + }); + } + dragElements.map( + (dragElement, i) => + (dragElement.style.transform = `translate(${(xs[i] += + e.movementX)}px, ${(ys[i] += e.movementY)}px) scale(${ + scaleXs[i] + }, ${scaleYs[i]})`) + ); + }; - let hideSource = false; - if (options) { - if (typeof options.hideSource === "boolean") { - hideSource = options.hideSource; - } else { - hideSource = options.hideSource(); - } + const abortDrag = () => { + document.removeEventListener("pointermove", moveHandler, true); + document.removeEventListener("pointerup", upHandler); + dragElements.map(dragElement => dragDiv.removeChild(dragElement)); + eles.map(ele => (ele.hidden = false)); + }; + const upHandler = (e: PointerEvent) => { + abortDrag(); + FinishDrag(eles, e, dragData, options, finishDrag); + }; + document.addEventListener("pointermove", moveHandler, true); + document.addEventListener("pointerup", upHandler); } - eles.map(ele => (ele.hidden = hideSource)); - const moveHandler = (e: PointerEvent) => { - e.stopPropagation(); - e.preventDefault(); - if (dragData instanceof DocumentDragData) - dragData.aliasOnDrop = e.ctrlKey || e.altKey; - if (e.shiftKey) { - abortDrag(); - CollectionDockingView.Instance.StartOtherDrag(docs, { - pageX: e.pageX, - pageY: e.pageY, - preventDefault: () => {}, - button: 0 + function FinishDrag( + dragEles: HTMLElement[], + e: PointerEvent, + dragData: { [index: string]: any }, + options?: DragOptions, + finishDrag?: (dragData: { [index: string]: any }) => void + ) { + let removed = dragEles.map(dragEle => { + let parent = dragEle.parentElement; + if (parent) parent.removeChild(dragEle); + return [dragEle, parent]; }); - } - dragElements.map( - (dragElement, i) => - (dragElement.style.transform = `translate(${(xs[i] += - e.movementX)}px, ${(ys[i] += e.movementY)}px) scale(${ - scaleXs[i] - }, ${scaleYs[i]})`) - ); - }; - - const abortDrag = () => { - document.removeEventListener("pointermove", moveHandler, true); - document.removeEventListener("pointerup", upHandler); - dragElements.map(dragElement => dragDiv.removeChild(dragElement)); - eles.map(ele => (ele.hidden = false)); - }; - const upHandler = (e: PointerEvent) => { - abortDrag(); - FinishDrag(eles, e, dragData, options, finishDrag); - }; - document.addEventListener("pointermove", moveHandler, true); - document.addEventListener("pointerup", upHandler); - } - - function FinishDrag( - dragEles: HTMLElement[], - e: PointerEvent, - dragData: { [index: string]: any }, - options?: DragOptions, - finishDrag?: (dragData: { [index: string]: any }) => void - ) { - let removed = dragEles.map(dragEle => { - let parent = dragEle.parentElement; - if (parent) parent.removeChild(dragEle); - return [dragEle, parent]; - }); - const target = document.elementFromPoint(e.x, e.y); - removed.map(r => { - let dragEle: HTMLElement = r[0]!; - let parent: HTMLElement | null = r[1]; - if (parent) parent.appendChild(dragEle); - }); - if (target) { - if (finishDrag) finishDrag(dragData); + const target = document.elementFromPoint(e.x, e.y); + removed.map(r => { + let dragEle: HTMLElement = r[0]!; + let parent: HTMLElement | null = r[1]; + if (parent) parent.appendChild(dragEle); + }); + if (target) { + if (finishDrag) finishDrag(dragData); - target.dispatchEvent( - new CustomEvent("dashOnDrop", { - bubbles: true, - detail: { - x: e.x, - y: e.y, - data: dragData - } - }) - ); + target.dispatchEvent( + new CustomEvent("dashOnDrop", { + bubbles: true, + detail: { + x: e.x, + y: e.y, + data: dragData + } + }) + ); - if (options) { - options.handlers.dragComplete({}); - } + if (options) { + options.handlers.dragComplete({}); + } + } + DocumentDecorations.Instance.Hidden = false; } - DocumentDecorations.Instance.Hidden = false; - } } diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 438659108..958c14491 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -3,48 +3,46 @@ import { DocumentView } from "../views/nodes/DocumentView"; import { Document } from "../../fields/Document"; export namespace SelectionManager { - class Manager { - @observable - SelectedDocuments: Array = []; - - @action - SelectDoc(doc: DocumentView, ctrlPressed: boolean): void { - // if doc is not in SelectedDocuments, add it - if (!ctrlPressed) { - manager.SelectedDocuments = []; - } - - if (manager.SelectedDocuments.indexOf(doc) === -1) { - manager.SelectedDocuments.push(doc); - } + class Manager { + @observable + SelectedDocuments: Array = []; + + @action + SelectDoc(doc: DocumentView, ctrlPressed: boolean): void { + // if doc is not in SelectedDocuments, add it + if (!ctrlPressed) { + manager.SelectedDocuments = []; + } + + if (manager.SelectedDocuments.indexOf(doc) === -1) { + manager.SelectedDocuments.push(doc); + } + } } - } - const manager = new Manager(); + const manager = new Manager(); - export function SelectDoc(doc: DocumentView, ctrlPressed: boolean): void { - if (!doc.isMinimized()) { - manager.SelectDoc(doc, ctrlPressed); + export function SelectDoc(doc: DocumentView, ctrlPressed: boolean): void { + manager.SelectDoc(doc, ctrlPressed); } - } - - export function IsSelected(doc: DocumentView): boolean { - return manager.SelectedDocuments.indexOf(doc) !== -1; - } - - export function DeselectAll(except?: Document): void { - let found: DocumentView | undefined = undefined; - if (except) { - for (let i = 0; i < manager.SelectedDocuments.length; i++) { - let view = manager.SelectedDocuments[i]; - if (view.props.Document == except) found = view; - } + + export function IsSelected(doc: DocumentView): boolean { + return manager.SelectedDocuments.indexOf(doc) !== -1; + } + + export function DeselectAll(except?: Document): void { + let found: DocumentView | undefined = undefined; + if (except) { + for (let i = 0; i < manager.SelectedDocuments.length; i++) { + let view = manager.SelectedDocuments[i]; + if (view.props.Document == except) found = view; + } + } + manager.SelectedDocuments.length = 0; + if (found) manager.SelectedDocuments.push(found); } - manager.SelectedDocuments.length = 0; - if (found) manager.SelectedDocuments.push(found); - } - export function SelectedDocuments(): Array { - return manager.SelectedDocuments; - } + export function SelectedDocuments(): Array { + return manager.SelectedDocuments; + } } diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index befe175b5..080c9fa1e 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -2,13 +2,16 @@ #documentDecorations-container { position: absolute; + top: 0; + left:0; display: grid; z-index: 1000; grid-template-rows: 20px 8px 1fr 8px; - grid-template-columns: 8px 1fr 8px; + grid-template-columns: 8px 8px 1fr 8px; pointer-events: none; #documentDecorations-centerCont { + grid-column:3; background: none; } @@ -18,6 +21,24 @@ opacity: 0.8; } + #documentDecorations-topLeftResizer, + #documentDecorations-leftResizer, + #documentDecorations-bottomLeftResizer { + grid-column: 1 + } + + #documentDecorations-topResizer, + #documentDecorations-bottomResizer { + grid-column-start: 2; + grid-column-end: 4; + } + + #documentDecorations-bottomRightResizer, + #documentDecorations-topRightResizer, + #documentDecorations-rightResizer { + grid-column:4 + } + #documentDecorations-topLeftResizer, #documentDecorations-bottomRightResizer { cursor: nwse-resize; @@ -39,15 +60,19 @@ } .title{ background: lightblue; - grid-column-start:2; - grid-column-end: 4; + grid-column-start:3; + grid-column-end: 5; pointer-events: auto; } } .documentDecorations-minimizeButton { - background: rgb(250, 57, 9); + background:$alt-accent; + opacity: 0.8; + grid-column-start: 1; + grid-column-end: 3; pointer-events: all; + text-align: center; } .documentDecorations-background { background: lightblue; @@ -87,7 +112,8 @@ // } // } .linkFlyout { - grid-column: 1/4 + grid-column: 1/4; + margin-left: 25px; } .linkButton-empty:hover { @@ -102,6 +128,31 @@ cursor: pointer; } +.linkButton-linker { + position:absolute; + bottom:0px; + left: 0px; + height: 20px; + width: 20px; + margin-top: 10px; + margin-right: 5px; + border-radius: 50%; + opacity: 0.9; + pointer-events: auto; + color: $dark-color; + border: $dark-color 1px solid; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + transition: transform 0.2s; + text-align: center; + display: flex; + justify-content: center; + align-items: center; +} +.linkButton-tray { + grid-column: 1/4; +} .linkButton-empty { height: 20px; width: 20px; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index b74737ec9..a46087c9a 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,10 +1,11 @@ -import { action, computed, observable } from "mobx"; +import { action, computed, observable, trace, runInAction } 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"; +import { Document } from "../../fields/Document"; import { TextField } from "../../fields/TextField"; import { DragManager } from "../util/DragManager"; import { SelectionManager } from "../util/SelectionManager"; @@ -13,6 +14,7 @@ import './DocumentDecorations.scss'; import { DocumentView } from "./nodes/DocumentView"; import { LinkMenu } from "./nodes/LinkMenu"; import React = require("react"); +import { FieldWaiting } from "../../fields/Field"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -28,6 +30,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> private _linkBoxHeight = 30; private _titleHeight = 20; private _linkButton = React.createRef(); + private _linkerButton = React.createRef(); //@observable private _title: string = this._documents[0].props.Document.Title; @observable private _title: string = this._documents.length > 0 ? this._documents[0].props.Document.Title : ""; @observable private _fieldKey: Key = KeyStore.Title; @@ -174,18 +177,40 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> } } - onLinkButtonDown = (e: React.PointerEvent): void => { - // if () - // let linkMenu = new LinkMenu(SelectionManager.SelectedDocuments()[0]); - // linkMenu.Hidden = false; - console.log("down"); + onLinkerButtonDown = (e: React.PointerEvent): void => { + e.stopPropagation(); + document.removeEventListener("pointermove", this.onLinkerButtonMoved) + document.addEventListener("pointermove", this.onLinkerButtonMoved); + document.removeEventListener("pointerup", this.onLinkerButtonUp) + document.addEventListener("pointerup", this.onLinkerButtonUp); + } + onLinkerButtonUp = (e: PointerEvent): void => { + document.removeEventListener("pointermove", this.onLinkerButtonMoved) + document.removeEventListener("pointerup", this.onLinkerButtonUp) + e.stopPropagation(); + } + onLinkerButtonMoved = (e: PointerEvent): void => { + if (this._linkerButton.current != null) { + document.removeEventListener("pointermove", this.onLinkerButtonMoved) + document.removeEventListener("pointerup", this.onLinkerButtonUp) + let dragData = new DragManager.LinkDragData(SelectionManager.SelectedDocuments()[0]); + DragManager.StartLinkDrag(this._linkerButton.current, dragData, { + handlers: { + dragComplete: action(() => { }), + }, + hideSource: false + }) + } + e.stopPropagation(); + } + + onLinkButtonDown = (e: React.PointerEvent): void => { e.stopPropagation(); document.removeEventListener("pointermove", this.onLinkButtonMoved) document.addEventListener("pointermove", this.onLinkButtonMoved); document.removeEventListener("pointerup", this.onLinkButtonUp) document.addEventListener("pointerup", this.onLinkButtonUp); - } onLinkButtonUp = (e: PointerEvent): void => { @@ -194,18 +219,32 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> e.stopPropagation(); } - onLinkButtonMoved = (e: PointerEvent): void => { if (this._linkButton.current != null) { document.removeEventListener("pointermove", this.onLinkButtonMoved) - document.removeEventListener("pointerup", this.onLinkButtonUp) - let dragData = new DragManager.LinkDragData(SelectionManager.SelectedDocuments()[0]); - DragManager.StartLinkDrag(this._linkButton.current, dragData, { - handlers: { - dragComplete: action(() => { }), - }, - hideSource: false - }) + document.removeEventListener("pointerup", this.onLinkButtonUp); + + let sourceDoc = SelectionManager.SelectedDocuments()[0].props.Document; + let srcTarg = sourceDoc.GetT(KeyStore.Prototype, Document) + let draggedDocs = (srcTarg && srcTarg != FieldWaiting) ? + srcTarg.GetList(KeyStore.LinkedToDocs, [] as Document[]).map(linkDoc => + (linkDoc.GetT(KeyStore.LinkedToDocs, Document)) as Document) : []; + let draggedFromDocs = (srcTarg && srcTarg != FieldWaiting) ? + srcTarg.GetList(KeyStore.LinkedFromDocs, [] as Document[]).map(linkDoc => + (linkDoc.GetT(KeyStore.LinkedFromDocs, Document)) as Document) : []; + draggedDocs.push(...draggedFromDocs); + if (draggedDocs.length) { + let dragData = new DragManager.DocumentDragData(draggedDocs.map(d => { + let annot = d.GetT(KeyStore.AnnotationOn, Document); // bcz: ... needs to change ... the annotationOn document may not have been retrieved yet... + return annot && annot != FieldWaiting ? annot : d; + })); + DragManager.StartDocumentDrag([this._linkButton.current], dragData, { + handlers: { + dragComplete: action(() => { }), + }, + hideSource: false + }) + } } e.stopPropagation(); } @@ -298,7 +337,6 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> } getValue = (): string => { - console.log("value watched"); if (this._title === "changed" && this._documents.length > 0) { let field = this._documents[0].props.Document.Get(this._fieldKey); if (field instanceof TextField) { @@ -338,8 +376,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> linkButton = ( - + }>
{linkCount}
); @@ -361,7 +398,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> top: bounds.y - this._resizeBorderWidth / 2 - this._titleHeight, opacity: this._opacity }}> -
v
+
...
e.preventDefault()}>
e.preventDefault()}>
@@ -373,8 +410,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
e.preventDefault()}>
e.preventDefault()}>
-
{linkButton}
- +
{linkButton}
+
∞
) diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss index 35c8ee942..c5a2a50cb 100644 --- a/src/client/views/InkingCanvas.scss +++ b/src/client/views/InkingCanvas.scss @@ -2,6 +2,8 @@ .inkingCanvas-paths-ink, .inkingCanvas-paths-markers, .inkingCanvas-noSelect, .inkingCanvas-canSelect { position: absolute; + top: 0; + left:0; width: 8192px; height: 8192px; cursor:"crosshair"; diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index 698a9c617..594803aab 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -7,6 +7,9 @@ body { overflow: hidden; font-family: $sans-serif; margin: 0; + position:absolute; + top: 0; + left:0; } #dash-title { @@ -158,11 +161,15 @@ button:hover { width:100%; height:100%; position:absolute; + top: 0; + left:0; } #mainContent-div { width:100%; height:100%; position:absolute; + top: 0; + left:0; } #add-options-content { display: table; diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 2706c3272..583d50c5b 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -3,7 +3,7 @@ } .collectiondockingview-container { - position: relative; + position: absolute; top: 0; left: 0; overflow: hidden; diff --git a/src/client/views/collections/CollectionPDFView.scss b/src/client/views/collections/CollectionPDFView.scss index 0144625c1..0eca3f1cd 100644 --- a/src/client/views/collections/CollectionPDFView.scss +++ b/src/client/views/collections/CollectionPDFView.scss @@ -9,6 +9,8 @@ width: 100%; height: 100%; position: absolute; + top: 0; + left:0; } .collectionPdfView-backward { diff --git a/src/client/views/collections/CollectionVideoView.scss b/src/client/views/collections/CollectionVideoView.scss index cbb981b13..ed56ad268 100644 --- a/src/client/views/collections/CollectionVideoView.scss +++ b/src/client/views/collections/CollectionVideoView.scss @@ -3,6 +3,8 @@ width: 100%; height: 100%; position: absolute; + top: 0; + left:0; } .collectionVideoView-time{ diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 2b0689800..daeca69e2 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -17,6 +17,8 @@ import { NumberField } from "../../../fields/NumberField"; import request = require("request"); import { ServerUtils } from "../../../server/ServerUtil"; import { Server } from "../../Server"; +import { CollectionDockingView } from "./CollectionDockingView"; +import { runReactions } from "mobx/lib/internal"; export interface CollectionViewProps { fieldKey: Key; @@ -92,6 +94,24 @@ export class CollectionViewBase extends React.Component e.stopPropagation(); return added; } + if (de.data instanceof DragManager.LinkDragData) { + let sourceDoc: Document = de.data.linkSourceDocumentView.props.Document; + if (sourceDoc) runInAction(() => { + let srcTarg = sourceDoc.GetT(KeyStore.Prototype, Document) + if (srcTarg && srcTarg != FieldWaiting) { + let linkDocs = srcTarg.GetList(KeyStore.LinkedToDocs, [] as Document[]); + linkDocs.map(linkDoc => { + let targDoc = linkDoc.GetT(KeyStore.LinkedToDocs, Document); + if (targDoc && targDoc != FieldWaiting) { + let dropdoc = targDoc.MakeDelegate(); + de.data.droppedDocuments.push(dropdoc); + this.props.addDocument(dropdoc, false); + } + }) + } + }) + return true; + } return false; } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index e84f0c5ad..3dfd74ec8 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 { if (super.drop(e, de)) { - if (de.data instanceof DragManager.DocumentDragData) { - let screenX = de.x - (de.data.xOffset as number || 0); - let screenY = de.y - (de.data.yOffset as number || 0); + let droppedDocs = de.data.droppedDocuments as Document[]; + let xoff = de.data.xOffset as number || 0; + let yoff = de.data.yOffset as number || 0; + if (droppedDocs && droppedDocs.length) { + let screenX = de.x - xoff; + let screenY = de.y - yoff; const [x, y] = this.getTransform().transformPoint(screenX, screenY); - let dragDoc = de.data.draggedDocuments[0]; + let dragDoc = de.data.droppedDocuments[0]; let dragX = dragDoc.GetNumber(KeyStore.X, 0); let dragY = dragDoc.GetNumber(KeyStore.Y, 0); - de.data.draggedDocuments.map(d => { + droppedDocs.map(d => { let docX = d.GetNumber(KeyStore.X, 0); let docY = d.GetNumber(KeyStore.Y, 0); d.SetNumber(KeyStore.X, x + (docX - dragX)); diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.scss b/src/client/views/collections/collectionFreeForm/MarqueeView.scss index 1ee3b244b..0b406e722 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.scss +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.scss @@ -1,6 +1,8 @@ .marqueeView { position: absolute; + top:0; + left:0; width:100%; height:100%; } diff --git a/src/client/views/collections/collectionFreeForm/PreviewCursor.scss b/src/client/views/collections/collectionFreeForm/PreviewCursor.scss index 21210be2b..7a67c29bf 100644 --- a/src/client/views/collections/collectionFreeForm/PreviewCursor.scss +++ b/src/client/views/collections/collectionFreeForm/PreviewCursor.scss @@ -3,9 +3,13 @@ color: black; position: absolute; transform-origin: left top; + top: 0; + left:0; pointer-events: none; } .previewCursorView { + top: 0; + left:0; position: absolute; width:100%; height:100%; diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index d52b662bd..1a0f0cbbd 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -66,8 +66,12 @@ export class CollectionFreeFormDocumentView extends React.Component } + 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() { return ( diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 127a6b535..5126e69f9 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -2,6 +2,8 @@ .documentView-node { position: absolute; + top: 0; + left:0; background: $light-color; //overflow: hidden; &.minimized { diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index ad947afd5..830dfe6c6 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -1,12 +1,16 @@ .react-pdf__Page { transform-origin: left top; position: absolute; + top: 0; + left:0; } .react-pdf__Document { position: absolute; } .pdfBox-buttonTray { position:absolute; + top: 0; + left:0; z-index: 25; } .pdfBox-contentContainer { diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index a535b2638..c73bc0c47 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -2,6 +2,8 @@ .webBox-cont { padding: 0vw; position: absolute; + top: 0; + left:0; width: 100%; height: 100%; overflow: scroll; diff --git a/src/fields/Document.ts b/src/fields/Document.ts index 8e71019a4..92d03d765 100644 --- a/src/fields/Document.ts +++ b/src/fields/Document.ts @@ -9,415 +9,420 @@ import { Server } from "../client/Server"; import { Types } from "../server/Message"; import { UndoManager } from "../client/util/UndoManager"; import { HtmlField } from "./HtmlField"; +import { BooleanField } from "./BooleanField"; export class Document extends Field { - //TODO tfs: We should probably store FieldWaiting in fields when we request it from the server so that we don't set up multiple server gets for the same document and field - public fields: ObservableMap< - string, - { key: Key; field: Field } - > = new ObservableMap(); - public _proxies: ObservableMap = new ObservableMap(); - - constructor(id?: string, save: boolean = true) { - super(id); - - if (save) { - Server.UpdateField(this); + //TODO tfs: We should probably store FieldWaiting in fields when we request it from the server so that we don't set up multiple server gets for the same document and field + public fields: ObservableMap< + string, + { key: Key; field: Field } + > = new ObservableMap(); + public _proxies: ObservableMap = new ObservableMap(); + + constructor(id?: string, save: boolean = true) { + super(id); + + if (save) { + Server.UpdateField(this); + } } - } - UpdateFromServer(data: [string, string][]) { - for (const key in data) { - const element = data[key]; - this._proxies.set(element[0], element[1]); - } - } - - public Width = () => { - return this.GetNumber(KeyStore.Width, 0); - }; - public Height = () => { - return this.GetNumber( - KeyStore.Height, - this.GetNumber(KeyStore.NativeWidth, 0) - ? (this.GetNumber(KeyStore.NativeHeight, 0) / - this.GetNumber(KeyStore.NativeWidth, 0)) * - this.GetNumber(KeyStore.Width, 0) - : 0 - ); - }; - public Scale = () => { - return this.GetNumber(KeyStore.Scale, 1); - }; - - @computed - public get Title(): string { - let title = this.Get(KeyStore.Title, true); - if (title) - if (title != FieldWaiting && title instanceof TextField) - return title.Data; - else return "-waiting-"; - let parTitle = this.GetT(KeyStore.Title, TextField); - if (parTitle) - if (parTitle != FieldWaiting) return parTitle.Data + ".alias"; - else return "-waiting-.alias"; - return "-untitled-"; - } - - @computed - public get Fields() { - return this.fields; - } - - /** - * Get the field in the document associated with the given key. If the - * associated field has not yet been filled in from the server, a request - * to the server will automatically be sent, the value will be filled in - * when the request is completed, and {@link Field.ts#FieldWaiting} will be returned. - * @param key - The key of the value to get - * @param ignoreProto - If true, ignore any prototype this document - * might have and only search for the value on this immediate document. - * If false (default), search up the prototype chain, starting at this document, - * for a document that has a field associated with the given key, and return the first - * one found. - * - * @returns If the document does not have a field associated with the given key, returns `undefined`. - * If the document does have an associated field, but the field has not been fetched from the server, returns {@link Field.ts#FieldWaiting}. - * If the document does have an associated field, and the field has not been fetched from the server, returns the associated field. - */ - Get(key: Key, ignoreProto: boolean = false): FieldValue { - let field: FieldValue; - if (ignoreProto) { - if (this.fields.has(key.Id)) { - field = this.fields.get(key.Id)!.field; - } else if (this._proxies.has(key.Id)) { - Server.GetDocumentField(this, key); - /* - The field might have been instantly filled from the cache - Maybe we want to just switch back to returning the value - from Server.GetDocumentField if it's in the cache - */ - if (this.fields.has(key.Id)) { - field = this.fields.get(key.Id)!.field; - } else { - field = FieldWaiting; + UpdateFromServer(data: [string, string][]) { + for (const key in data) { + const element = data[key]; + this._proxies.set(element[0], element[1]); } - } - } else { - let doc: FieldValue = this; - while (doc && doc != FieldWaiting && field != FieldWaiting) { - let curField = doc.fields.get(key.Id); - let curProxy = doc._proxies.get(key.Id); - if (!curField || (curProxy && curField.field.Id !== curProxy)) { - if (curProxy) { - Server.GetDocumentField(doc, key); - /* + } + + public Width = () => { + return this.GetNumber(KeyStore.Width, 0); + }; + public Height = () => { + return this.GetNumber( + KeyStore.Height, + this.GetNumber(KeyStore.NativeWidth, 0) + ? (this.GetNumber(KeyStore.NativeHeight, 0) / + this.GetNumber(KeyStore.NativeWidth, 0)) * + this.GetNumber(KeyStore.Width, 0) + : 0 + ); + }; + public Scale = () => { + return this.GetNumber(KeyStore.Scale, 1); + }; + + @computed + public get Title(): string { + let title = this.Get(KeyStore.Title, true); + if (title) + if (title != FieldWaiting && title instanceof TextField) + return title.Data; + else return "-waiting-"; + let parTitle = this.GetT(KeyStore.Title, TextField); + if (parTitle) + if (parTitle != FieldWaiting) return parTitle.Data + ".alias"; + else return "-waiting-.alias"; + return "-untitled-"; + } + + @computed + public get Fields() { + return this.fields; + } + + /** + * Get the field in the document associated with the given key. If the + * associated field has not yet been filled in from the server, a request + * to the server will automatically be sent, the value will be filled in + * when the request is completed, and {@link Field.ts#FieldWaiting} will be returned. + * @param key - The key of the value to get + * @param ignoreProto - If true, ignore any prototype this document + * might have and only search for the value on this immediate document. + * If false (default), search up the prototype chain, starting at this document, + * for a document that has a field associated with the given key, and return the first + * one found. + * + * @returns If the document does not have a field associated with the given key, returns `undefined`. + * If the document does have an associated field, but the field has not been fetched from the server, returns {@link Field.ts#FieldWaiting}. + * If the document does have an associated field, and the field has not been fetched from the server, returns the associated field. + */ + Get(key: Key, ignoreProto: boolean = false): FieldValue { + let field: FieldValue; + if (ignoreProto) { + if (this.fields.has(key.Id)) { + field = this.fields.get(key.Id)!.field; + } else if (this._proxies.has(key.Id)) { + Server.GetDocumentField(this, key); + /* The field might have been instantly filled from the cache Maybe we want to just switch back to returning the value from Server.GetDocumentField if it's in the cache */ - if (this.fields.has(key.Id)) { - field = this.fields.get(key.Id)!.field; - } else { - field = FieldWaiting; + if (this.fields.has(key.Id)) { + field = this.fields.get(key.Id)!.field; + } else { + field = FieldWaiting; + } } - break; - } - if ( - doc.fields.has(KeyStore.Prototype.Id) || - doc._proxies.has(KeyStore.Prototype.Id) - ) { - doc = doc.GetPrototype(); - } else { - break; - } } else { - field = curField.field; - break; + let doc: FieldValue = this; + while (doc && doc != FieldWaiting && field != FieldWaiting) { + let curField = doc.fields.get(key.Id); + let curProxy = doc._proxies.get(key.Id); + if (!curField || (curProxy && curField.field.Id !== curProxy)) { + if (curProxy) { + Server.GetDocumentField(doc, key); + /* + The field might have been instantly filled from the cache + Maybe we want to just switch back to returning the value + from Server.GetDocumentField if it's in the cache + */ + if (this.fields.has(key.Id)) { + field = this.fields.get(key.Id)!.field; + } else { + field = FieldWaiting; + } + break; + } + if ( + doc.fields.has(KeyStore.Prototype.Id) || + doc._proxies.has(KeyStore.Prototype.Id) + ) { + doc = doc.GetPrototype(); + } else { + break; + } + } else { + field = curField.field; + break; + } + } + if (doc == FieldWaiting) field = FieldWaiting; } - } - if (doc == FieldWaiting) field = FieldWaiting; + + return field; } - return field; - } - - /** - * Tries to get the field associated with the given key, and if there is an - * associated field, calls the given callback with that field. - * @param key - The key of the value to get - * @param callback - A function that will be called with the associated field, if it exists, - * once it is fetched from the server (this may be immediately if the field has already been fetched). - * Note: The callback will not be called if there is no associated field. - * @returns `true` if the field exists on the document and `callback` will be called, and `false` otherwise - */ - GetAsync(key: Key, callback: (field: Opt) => void): void { - //TODO: This currently doesn't deal with prototypes - let field = this.fields.get(key.Id); - if (field && field.field) { - callback(field.field); - } else if (this._proxies.has(key.Id)) { - Server.GetDocumentField(this, key, callback); - } else if (this._proxies.has(KeyStore.Prototype.Id)) { - this.GetTAsync(KeyStore.Prototype, Document, proto => { - if (proto) { - proto.GetAsync(key, callback); + /** + * Tries to get the field associated with the given key, and if there is an + * associated field, calls the given callback with that field. + * @param key - The key of the value to get + * @param callback - A function that will be called with the associated field, if it exists, + * once it is fetched from the server (this may be immediately if the field has already been fetched). + * Note: The callback will not be called if there is no associated field. + * @returns `true` if the field exists on the document and `callback` will be called, and `false` otherwise + */ + GetAsync(key: Key, callback: (field: Opt) => void): void { + //TODO: This currently doesn't deal with prototypes + let field = this.fields.get(key.Id); + if (field && field.field) { + callback(field.field); + } else if (this._proxies.has(key.Id)) { + Server.GetDocumentField(this, key, callback); + } else if (this._proxies.has(KeyStore.Prototype.Id)) { + this.GetTAsync(KeyStore.Prototype, Document, proto => { + if (proto) { + proto.GetAsync(key, callback); + } else { + callback(undefined); + } + }); } else { - callback(undefined); + callback(undefined); } - }); - } else { - callback(undefined); } - } - - GetTAsync(key: Key, ctor: { new (): T }): Promise>; - GetTAsync( - key: Key, - ctor: { new (): T }, - callback: (field: Opt) => void - ): void; - GetTAsync( - key: Key, - ctor: { new (): T }, - callback?: (field: Opt) => void - ): Promise> | void { - let fn = (cb: (field: Opt) => void) => { - return this.GetAsync(key, field => { - cb(Cast(field, ctor)); - }); - }; - if (callback) { - fn(callback); - } else { - return new Promise(res => fn(res)); + + GetTAsync(key: Key, ctor: { new(): T }): Promise>; + GetTAsync( + key: Key, + ctor: { new(): T }, + callback: (field: Opt) => void + ): void; + GetTAsync( + key: Key, + ctor: { new(): T }, + callback?: (field: Opt) => void + ): Promise> | void { + let fn = (cb: (field: Opt) => void) => { + return this.GetAsync(key, field => { + cb(Cast(field, ctor)); + }); + }; + if (callback) { + fn(callback); + } else { + return new Promise(res => fn(res)); + } } - } - - /** - * Same as {@link Document#GetAsync}, except a field of the given type - * will be created if there is no field associated with the given key, - * or the field associated with the given key is not of the given type. - * @param ctor - Constructor of the field type to get. E.g., TextField, ImageField, etc. - */ - GetOrCreateAsync( - key: Key, - ctor: { new (): T }, - callback: (field: T) => void - ): void { - //This currently doesn't deal with prototypes - if (this._proxies.has(key.Id)) { - Server.GetDocumentField(this, key, field => { - if (field && field instanceof ctor) { - callback(field); + + /** + * Same as {@link Document#GetAsync}, except a field of the given type + * will be created if there is no field associated with the given key, + * or the field associated with the given key is not of the given type. + * @param ctor - Constructor of the field type to get. E.g., TextField, ImageField, etc. + */ + GetOrCreateAsync( + key: Key, + ctor: { new(): T }, + callback: (field: T) => void + ): void { + //This currently doesn't deal with prototypes + if (this._proxies.has(key.Id)) { + Server.GetDocumentField(this, key, field => { + if (field && field instanceof ctor) { + callback(field); + } else { + let newField = new ctor(); + this.Set(key, newField); + callback(newField); + } + }); } else { - let newField = new ctor(); - this.Set(key, newField); - callback(newField); + let newField = new ctor(); + this.Set(key, newField); + callback(newField); } - }); - } else { - let newField = new ctor(); - this.Set(key, newField); - callback(newField); } - } - - /** - * Same as {@link Document#Get}, except that it will additionally - * check if the field is of the given type. - * @param ctor - Constructor of the field type to get. E.g., `TextField`, `ImageField`, etc. - * @returns Same as {@link Document#Get}, except will return `undefined` - * if there is an associated field but it is of the wrong type. - */ - GetT( - key: Key, - ctor: { new (...args: any[]): T }, - ignoreProto: boolean = false - ): FieldValue { - var getfield = this.Get(key, ignoreProto); - if (getfield != FieldWaiting) { - return Cast(getfield, ctor); + + /** + * Same as {@link Document#Get}, except that it will additionally + * check if the field is of the given type. + * @param ctor - Constructor of the field type to get. E.g., `TextField`, `ImageField`, etc. + * @returns Same as {@link Document#Get}, except will return `undefined` + * if there is an associated field but it is of the wrong type. + */ + GetT( + key: Key, + ctor: { new(...args: any[]): T }, + ignoreProto: boolean = false + ): FieldValue { + var getfield = this.Get(key, ignoreProto); + if (getfield != FieldWaiting) { + return Cast(getfield, ctor); + } + return FieldWaiting; } - return FieldWaiting; - } - - GetOrCreate( - key: Key, - ctor: { new (): T }, - ignoreProto: boolean = false - ): T { - const field = this.GetT(key, ctor, ignoreProto); - if (field && field != FieldWaiting) { - return field; + + GetOrCreate( + key: Key, + ctor: { new(): T }, + ignoreProto: boolean = false + ): T { + const field = this.GetT(key, ctor, ignoreProto); + if (field && field != FieldWaiting) { + return field; + } + const newField = new ctor(); + this.Set(key, newField); + return newField; } - const newField = new ctor(); - this.Set(key, newField); - return newField; - } - - GetData( - key: Key, - ctor: { new (): U }, - defaultVal: T - ): T { - let val = this.Get(key); - let vval = val && val instanceof ctor ? val.Data : defaultVal; - return vval; - } - - GetHtml(key: Key, defaultVal: string): string { - return this.GetData(key, HtmlField, defaultVal); - } - - GetNumber(key: Key, defaultVal: number): number { - return this.GetData(key, NumberField, defaultVal); - } - - GetText(key: Key, defaultVal: string): string { - return this.GetData(key, TextField, defaultVal); - } - - GetList(key: Key, defaultVal: T[]): T[] { - return this.GetData>(key, ListField, defaultVal); - } - - @action - Set(key: Key, field: Field | undefined, setOnPrototype = false): void { - let old = this.fields.get(key.Id); - let oldField = old ? old.field : undefined; - if (setOnPrototype) { - this.SetOnPrototype(key, field); - } else { - if (field) { - this.fields.set(key.Id, { key, field }); - this._proxies.set(key.Id, field.Id); - // Server.AddDocumentField(this, key, field); - } else { - this.fields.delete(key.Id); - this._proxies.delete(key.Id); - // Server.DeleteDocumentField(this, key); - } - Server.UpdateField(this); + + GetData( + key: Key, + ctor: { new(): U }, + defaultVal: T + ): T { + let val = this.Get(key); + let vval = val && val instanceof ctor ? val.Data : defaultVal; + return vval; } - if (oldField || field) { - UndoManager.AddEvent({ - undo: () => this.Set(key, oldField, setOnPrototype), - redo: () => this.Set(key, field, setOnPrototype) - }); + + GetHtml(key: Key, defaultVal: string): string { + return this.GetData(key, HtmlField, defaultVal); } - } - - @action - SetOnPrototype(key: Key, field: Field | undefined): void { - this.GetTAsync(KeyStore.Prototype, Document, (f: Opt) => { - f && f.Set(key, field); - }); - } - - @action - SetDataOnPrototype( - key: Key, - value: T, - ctor: { new (): U }, - replaceWrongType = true - ) { - this.GetTAsync(KeyStore.Prototype, Document, (f: Opt) => { - f && f.SetData(key, value, ctor); - }); - } - - @action - SetData( - key: Key, - value: T, - ctor: { new (data: T): U }, - replaceWrongType = true - ) { - let field = this.Get(key, true); - if (field instanceof ctor) { - field.Data = value; - } else if (!field || replaceWrongType) { - let newField = new ctor(value); - // newField.Data = value; - this.Set(key, newField); + + GetBoolean(key: Key, defaultVal: boolean): boolean { + return this.GetData(key, BooleanField, defaultVal); } - } - - @action - SetText(key: Key, value: string, replaceWrongType = true) { - this.SetData(key, value, TextField, replaceWrongType); - } - - @action - SetNumber(key: Key, value: number, replaceWrongType = true) { - this.SetData(key, value, NumberField, replaceWrongType); - } - - GetPrototype(): FieldValue { - return this.GetT(KeyStore.Prototype, Document, true); - } - - GetAllPrototypes(): Document[] { - let protos: Document[] = []; - let doc: FieldValue = this; - while (doc && doc != FieldWaiting) { - protos.push(doc); - doc = doc.GetPrototype(); + + GetNumber(key: Key, defaultVal: number): number { + return this.GetData(key, NumberField, defaultVal); + } + + GetText(key: Key, defaultVal: string): string { + return this.GetData(key, TextField, defaultVal); + } + + GetList(key: Key, defaultVal: T[]): T[] { + return this.GetData>(key, ListField, defaultVal); + } + + @action + Set(key: Key, field: Field | undefined, setOnPrototype = false): void { + let old = this.fields.get(key.Id); + let oldField = old ? old.field : undefined; + if (setOnPrototype) { + this.SetOnPrototype(key, field); + } else { + if (field) { + this.fields.set(key.Id, { key, field }); + this._proxies.set(key.Id, field.Id); + // Server.AddDocumentField(this, key, field); + } else { + this.fields.delete(key.Id); + this._proxies.delete(key.Id); + // Server.DeleteDocumentField(this, key); + } + Server.UpdateField(this); + } + if (oldField || field) { + UndoManager.AddEvent({ + undo: () => this.Set(key, oldField, setOnPrototype), + redo: () => this.Set(key, field, setOnPrototype) + }); + } + } + + @action + SetOnPrototype(key: Key, field: Field | undefined): void { + this.GetTAsync(KeyStore.Prototype, Document, (f: Opt) => { + f && f.Set(key, field); + }); + } + + @action + SetDataOnPrototype( + key: Key, + value: T, + ctor: { new(): U }, + replaceWrongType = true + ) { + this.GetTAsync(KeyStore.Prototype, Document, (f: Opt) => { + f && f.SetData(key, value, ctor); + }); + } + + @action + SetData( + key: Key, + value: T, + ctor: { new(data: T): U }, + replaceWrongType = true + ) { + let field = this.Get(key, true); + if (field instanceof ctor) { + field.Data = value; + } else if (!field || replaceWrongType) { + let newField = new ctor(value); + // newField.Data = value; + this.Set(key, newField); + } + } + + @action + SetText(key: Key, value: string, replaceWrongType = true) { + this.SetData(key, value, TextField, replaceWrongType); + } + + @action + SetNumber(key: Key, value: number, replaceWrongType = true) { + this.SetData(key, value, NumberField, replaceWrongType); + } + + GetPrototype(): FieldValue { + return this.GetT(KeyStore.Prototype, Document, true); + } + + GetAllPrototypes(): Document[] { + let protos: Document[] = []; + let doc: FieldValue = this; + while (doc && doc != FieldWaiting) { + protos.push(doc); + doc = doc.GetPrototype(); + } + return protos; + } + + CreateAlias(id?: string): Document { + let alias = new Document(id); + this.GetTAsync(KeyStore.Prototype, Document, (f: Opt) => { + f && alias.Set(KeyStore.Prototype, f); + }); + + return alias; + } + + MakeDelegate(id?: string): Document { + let delegate = new Document(id); + + delegate.Set(KeyStore.Prototype, this); + + return delegate; + } + + ToScriptString(): string { + return ""; + } + + TrySetValue(value: any): boolean { + throw new Error("Method not implemented."); + } + GetValue() { + return this.Title; + var title = + (this._proxies.has(KeyStore.Title.Id) ? "???" : this.Title) + + "(" + + this.Id + + ")"; + return title; + //throw new Error("Method not implemented."); + } + Copy(): Field { + throw new Error("Method not implemented."); + } + + ToJson(): { type: Types; data: [string, string][]; _id: string } { + let fields: [string, string][] = []; + this._proxies.forEach((field, key) => { + if (field) { + fields.push([key, field as string]); + } + }); + + return { + type: Types.Document, + data: fields, + _id: this.Id + }; } - return protos; - } - - CreateAlias(id?: string): Document { - let alias = new Document(id); - this.GetTAsync(KeyStore.Prototype, Document, (f: Opt) => { - f && alias.Set(KeyStore.Prototype, f); - }); - - return alias; - } - - MakeDelegate(id?: string): Document { - let delegate = new Document(id); - - delegate.Set(KeyStore.Prototype, this); - - return delegate; - } - - ToScriptString(): string { - return ""; - } - - TrySetValue(value: any): boolean { - throw new Error("Method not implemented."); - } - GetValue() { - return this.Title; - var title = - (this._proxies.has(KeyStore.Title.Id) ? "???" : this.Title) + - "(" + - this.Id + - ")"; - return title; - //throw new Error("Method not implemented."); - } - Copy(): Field { - throw new Error("Method not implemented."); - } - - ToJson(): { type: Types; data: [string, string][]; _id: string } { - let fields: [string, string][] = []; - this._proxies.forEach((field, key) => { - if (field) { - fields.push([key, field as string]); - } - }); - - return { - type: Types.Document, - data: fields, - _id: this.Id - }; - } } -- cgit v1.2.3-70-g09d2 From 93bed89512baa506c1b5ed2223ffc83fa6b5390e Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Thu, 4 Apr 2019 18:26:33 -0400 Subject: Changed linter stuff --- src/client/Server.ts | 12 ++--- src/client/util/DocumentManager.ts | 4 +- src/client/util/Transform.ts | 30 ++++-------- src/client/util/TypedEvent.ts | 3 +- src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/InkingStroke.tsx | 5 +- src/client/views/Main.tsx | 9 ++-- .../views/collections/CollectionViewBase.tsx | 13 +++--- .../collectionFreeForm/CollectionFreeFormView.tsx | 10 ++-- .../views/nodes/CollectionFreeFormDocumentView.tsx | 8 ++-- src/client/views/nodes/DocumentView.tsx | 6 ++- src/client/views/nodes/FieldView.tsx | 5 +- src/debug/Viewer.tsx | 3 +- src/fields/Document.ts | 2 +- src/mobile/ImageUpload.tsx | 54 +++++++++++----------- src/server/index.ts | 8 ++-- 16 files changed, 82 insertions(+), 92 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/Server.ts b/src/client/Server.ts index e3f4448cb..45c7144ca 100644 --- a/src/client/Server.ts +++ b/src/client/Server.ts @@ -39,8 +39,8 @@ export class Server { } else if (cached !== FieldWaiting) { setTimeout(() => cb(cached as Field), 0); } else { - reaction(() => - this.ClientFieldsCached.get(fieldid), (field, reaction) => { + reaction(() => this.ClientFieldsCached.get(fieldid), + (field, reaction) => { if (field !== FieldWaiting) { reaction.dispose() cb(field) @@ -91,8 +91,8 @@ export class Server { } } } - reaction(() => - waitingFieldIds.map(id => this.ClientFieldsCached.get(id)), (cachedFields, reaction) => { + reaction(() => waitingFieldIds.map(id => this.ClientFieldsCached.get(id)), + (cachedFields, reaction) => { if (!cachedFields.some(field => !field)) { reaction.dispose(); for (let field of cachedFields) { @@ -151,7 +151,7 @@ export class Server { @action private static cacheField(clientField: Field) { var cached = this.ClientFieldsCached.get(clientField.Id); - if (!cached || cached === FieldWaiting) { + if (!cached) { this.ClientFieldsCached.set(clientField.Id, clientField); } else { // probably should overwrite the values within any field that was already here... @@ -163,7 +163,7 @@ export class Server { static updateField(field: { _id: string, data: any, type: Types }) { if (Server.ClientFieldsCached.has(field._id)) { var f = Server.ClientFieldsCached.get(field._id); - if (f && f !== FieldWaiting) { + if (f) { // console.log("Applying : " + field._id); f.UpdateFromServer(field.data); f.init(() => { }); diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 7cb368f47..fb489edb6 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -42,7 +42,7 @@ export class DocumentManager { let doc = view.props.Document; // if (view.props.ContainingCollectionView instanceof CollectionFreeFormView) { - if (Object.is(doc, toFind)) { + if (doc === toFind) { toReturn = view; return; } @@ -63,7 +63,7 @@ export class DocumentManager { let doc = view.props.Document; // if (view.props.ContainingCollectionView instanceof CollectionFreeFormView) { - if (Object.is(doc, toFind)) { + if (doc === toFind) { toReturn.push(view); } else { let docSrc = doc.GetT(KeyStore.Prototype, Document); diff --git a/src/client/util/Transform.ts b/src/client/util/Transform.ts index 8608264a1..54effd512 100644 --- a/src/client/util/Transform.ts +++ b/src/client/util/Transform.ts @@ -62,26 +62,19 @@ export class Transform { return this; } - translated = (x: number, y: number): Transform => - this.copy().translate(x, y) + translated = (x: number, y: number): Transform => this.copy().translate(x, y) - preTranslated = (x: number, y: number): Transform => - this.copy().preTranslate(x, y) + preTranslated = (x: number, y: number): Transform => this.copy().preTranslate(x, y) - scaled = (scale: number): Transform => - this.copy().scale(scale) + scaled = (scale: number): Transform => this.copy().scale(scale) - scaledAbout = (scale: number, x: number, y: number): Transform => - this.copy().scaleAbout(scale, x, y) + scaledAbout = (scale: number, x: number, y: number): Transform => this.copy().scaleAbout(scale, x, y) - preScaled = (scale: number): Transform => - this.copy().preScale(scale) + preScaled = (scale: number): Transform => this.copy().preScale(scale) - transformed = (transform: Transform): Transform => - this.copy().transform(transform) + transformed = (transform: Transform): Transform => this.copy().transform(transform) - preTransformed = (transform: Transform): Transform => - this.copy().preTransform(transform) + preTransformed = (transform: Transform): Transform => this.copy().preTransform(transform) transformPoint = (x: number, y: number): [number, number] => { x *= this._scale; @@ -91,8 +84,7 @@ export class Transform { return [x, y]; } - transformDirection = (x: number, y: number): [number, number] => - [x * this._scale, y * this._scale] + transformDirection = (x: number, y: number): [number, number] => [x * this._scale, y * this._scale] transformBounds(x: number, y: number, width: number, height: number): { x: number, y: number, width: number, height: number } { [x, y] = this.transformPoint(x, y); @@ -100,10 +92,8 @@ export class Transform { return { x, y, width, height }; } - inverse = () => - new Transform(-this._translateX / this._scale, -this._translateY / this._scale, 1 / this._scale) + inverse = () => new Transform(-this._translateX / this._scale, -this._translateY / this._scale, 1 / this._scale) - copy = () => - new Transform(this._translateX, this._translateY, this._scale) + copy = () => new Transform(this._translateX, this._translateY, this._scale) } \ No newline at end of file diff --git a/src/client/util/TypedEvent.ts b/src/client/util/TypedEvent.ts index c590d3734..1b251da25 100644 --- a/src/client/util/TypedEvent.ts +++ b/src/client/util/TypedEvent.ts @@ -36,6 +36,5 @@ export class TypedEvent { this.listenersOncer = []; } - pipe = (te: TypedEvent): Disposable => - this.on((e) => te.emit(e)) + pipe = (te: TypedEvent): Disposable => this.on((e) => te.emit(e)) } \ No newline at end of file diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index b0aa190e5..a6117dfa0 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -75,7 +75,7 @@ export class DocumentDecorations extends React.Component { this._dragging = true; document.removeEventListener("pointermove", this.onBackgroundMove); document.removeEventListener("pointerup", this.onBackgroundUp); - DragManager.StartDocumentDrag(SelectionManager.SelectedDocuments().map(docView => (docView as any)._mainCont.current), dragData, { + DragManager.StartDocumentDrag(SelectionManager.SelectedDocuments().map(docView => docView.ContentRef.current!), dragData, { handlers: { dragComplete: action(() => this._dragging = false), }, diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index dbb79c0c6..12b15a3f0 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -29,8 +29,9 @@ export class InkingStroke extends React.Component { } } - parseData = (line: Array<{ x: number, y: number }>): string => - !line.length ? "" : "M " + line.map(p => (p.x + this.props.offsetX) + " " + (p.y + this.props.offsetY)).join(" L ") + parseData = (line: Array<{ x: number, y: number }>): string => { + return !line.length ? "" : "M " + line.map(p => (p.x + this.props.offsetX) + " " + (p.y + this.props.offsetY)).join(" L ") + } createStyle() { switch (this._strokeTool) { diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 446c3d55f..33759d38a 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -371,7 +371,8 @@ export class Main extends React.Component { } } -Documents.initProtos().then(() => - CurrentUserUtils.loadCurrentUser()).then(() => { - ReactDOM.render(
, document.getElementById('root')); - }); +(async () => { + await Documents.initProtos() + await CurrentUserUtils.loadCurrentUser() + ReactDOM.render(
, document.getElementById('root')); +})() diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 51280275c..2b858789f 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -134,7 +134,7 @@ export class CollectionViewBase extends React.Component e.stopPropagation() e.preventDefault() - if (html && html.indexOf(" return; } + // tslint:disable-next-line:prefer-for-of for (let i = 0; i < e.dataTransfer.items.length; i++) { const upload = window.location.origin + RouteStore.upload; let item = e.dataTransfer.items[i]; - if (item.kind === "string" && item.type.indexOf("uri") != -1) { + if (item.kind === "string" && item.type.indexOf("uri") !== -1) { e.dataTransfer.items[i].getAsString(action((s: string) => { request.head(ServerUtils.prepend(RouteStore.corsProxy + "/" + s), (err, res, body) => { let type = res.headers["content-type"]; @@ -160,7 +161,7 @@ export class CollectionViewBase extends React.Component })) } let type = item.type - if (item.kind == "file") { + if (item.kind === "file") { let file = item.getAsFile(); let formData = new FormData() @@ -171,15 +172,15 @@ export class CollectionViewBase extends React.Component fetch(upload, { method: 'POST', body: formData - }).then((res: Response) => - res.json()).then(json => { + }).then(async (res: Response) => { + const json = await res.json(); json.map((file: any) => { let path = window.location.origin + file runInAction(() => { let doc = this.getDocumentFromType(type, path, { ...options, nativeWidth: 300, width: 300 }) let docs = this.props.Document.GetT(KeyStore.Data, ListField); - if (docs != FieldWaiting) { + if (docs !== FieldWaiting) { if (!docs) { docs = new ListField(); this.props.Document.Set(KeyStore.Data, docs) diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 8c5d3f536..f03205739 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -54,7 +54,7 @@ export class CollectionFreeFormView extends CollectionViewBase { var curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1); return this.props.Document.GetList(this.props.fieldKey, [] as Document[]).reduce((active, doc) => { var page = doc.GetNumber(KeyStore.Page, -1); - if (page == curPage || page == -1) { + if (page === curPage || page === -1) { active.push(doc); } return active; @@ -115,7 +115,7 @@ export class CollectionFreeFormView extends CollectionViewBase { @action onPointerDown = (e: React.PointerEvent): void => { - if (((e.button === 2 && (!this.isAnnotationOverlay || this.zoomScaling != 1)) || e.button == 0) && this.props.active()) { + if (((e.button === 2 && (!this.isAnnotationOverlay || this.zoomScaling !== 1)) || e.button === 0) && this.props.active()) { document.removeEventListener("pointermove", this.onPointerMove); document.addEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); @@ -137,7 +137,7 @@ export class CollectionFreeFormView extends CollectionViewBase { @action onPointerMove = (e: PointerEvent): void => { if (!e.cancelBubble && this.props.active()) { - if ((!this.isAnnotationOverlay || this.zoomScaling != 1) && !e.shiftKey) { + if ((!this.isAnnotationOverlay || this.zoomScaling !== 1) && !e.shiftKey) { let x = this.props.Document.GetNumber(KeyStore.PanX, 0); let y = this.props.Document.GetNumber(KeyStore.PanY, 0); let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); @@ -247,7 +247,7 @@ export class CollectionFreeFormView extends CollectionViewBase { removeDocument: this.props.removeDocument, ScreenToLocalTransform: this.getTransform, isTopMost: false, - selectOnLoad: document.Id == this._selectOnLoaded, + selectOnLoad: document.Id === this._selectOnLoaded, PanelWidth: document.Width, PanelHeight: document.Height, ContentScaling: this.noScaling, @@ -263,7 +263,7 @@ export class CollectionFreeFormView extends CollectionViewBase { var curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1); return this.props.Document.GetList(this.props.fieldKey, [] as Document[]).filter(doc => doc).reduce((prev, doc) => { var page = doc.GetNumber(KeyStore.Page, -1); - if (page == curPage || page == -1) + if (page === curPage || page === -1) prev.push(); return prev; }, [] as JSX.Element[]) diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index e6475ee2a..ce453b4af 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -52,12 +52,12 @@ export class CollectionFreeFormDocumentView extends React.Component - this.nativeWidth > 0 ? this.width / this.nativeWidth : 1 + 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()) + this.props.ScreenToLocalTransform() + .translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)) + .scale(1 / this.contentScaling()) @computed get docView() { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 34eb8919f..3b146654c 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -85,6 +85,9 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs { @observer export class DocumentView extends React.Component { private _mainCont = React.createRef(); + public get ContentRef() { + return this._mainCont; + } private _downX: number = 0; private _downY: number = 0; @computed get active(): boolean { return SelectionManager.IsSelected(this) || this.props.parentActive(); } @@ -287,8 +290,7 @@ export class DocumentView extends React.Component { } - isSelected = () => - SelectionManager.IsSelected(this) + isSelected = () => SelectionManager.IsSelected(this) select = (ctrlPressed: boolean) => { SelectionManager.SelectDoc(this, ctrlPressed) diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index d6035a076..d9422ae9b 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -96,8 +96,7 @@ export class FieldView extends React.Component { } else if (field instanceof ListField) { return (
- {(field as ListField).Data.map(f => - f instanceof Document ? f.Title : f.GetValue().toString()).join(", ")} + {(field as ListField).Data.map(f => f instanceof Document ? f.Title : f.GetValue().toString()).join(", ")}
) } // bcz: this belongs here, but it doesn't render well so taking it out for now @@ -107,7 +106,7 @@ export class FieldView extends React.Component { else if (field instanceof NumberField) { return

{field.Data}

} - else if (field != FieldWaiting) { + else if (field !== FieldWaiting) { return

{JSON.stringify(field.GetValue())}

} else diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx index 9f52d0ea6..f13cccd24 100644 --- a/src/debug/Viewer.tsx +++ b/src/debug/Viewer.tsx @@ -177,8 +177,7 @@ class Viewer extends React.Component { onChange={this.inputOnChange} onKeyDown={this.onKeyPress} />
- {this.ids.map(id => - )} + {this.ids.map(id => )}
) diff --git a/src/fields/Document.ts b/src/fields/Document.ts index 45e4f93f6..6d13c96b8 100644 --- a/src/fields/Document.ts +++ b/src/fields/Document.ts @@ -90,7 +90,7 @@ export class Document extends Field { } } else { let doc: FieldValue = this; - while (doc && doc !== FieldWaiting && field !== FieldWaiting) { + while (doc && field !== FieldWaiting) { let curField = doc.fields.get(key.Id); let curProxy = doc._proxies.get(key.Id); if (!curField || (curProxy && curField.field.Id !== curProxy)) { diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index c4d346876..c3684a0eb 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -9,6 +9,7 @@ import { RouteStore } from '../server/RouteStore'; import { ServerUtils } from '../server/ServerUtil'; import "./ImageUpload.scss"; import React = require('react'); +import { Opt } from '../fields/Field'; @@ -20,47 +21,44 @@ import React = require('react'); // } // } -const onFileLoad = (file: any) => { +const onFileLoad = async (file: any) => { let imgPrev = document.getElementById("img_preview") if (imgPrev) { let files: File[] = file.target.files; - if (files.length != 0) { + if (files.length !== 0) { console.log(files[0]); let formData = new FormData(); formData.append("file", files[0]); const upload = window.location.origin + "/upload" - fetch(upload, { + const res = await fetch(upload, { method: 'POST', body: formData - }).then((res: Response) => - res.json()).then(json => { - json.map((file: any) => { - let path = window.location.origin + file - var doc: Document = Documents.ImageDocument(path, { nativeWidth: 200, width: 200 }) + }); + const json = await res.json(); + json.map(async (file: any) => { + let path = window.location.origin + file + var doc: Document = Documents.ImageDocument(path, { nativeWidth: 200, width: 200 }) - rp.get(ServerUtils.prepend(RouteStore.getUserDocumentId)).then(res => { - if (res) { - return Server.GetField(res); - } - throw new Error("No user id returned"); - }).then(field => { - if (field instanceof Document) { - return field.GetTAsync(KeyStore.OptionalRightCollection, Document) - } - }).then(pending => { - if (pending) { - pending.GetOrCreateAsync(KeyStore.Data, ListField, list => { - list.Data.push(doc); - }) - } - }); + const res = await rp.get(ServerUtils.prepend(RouteStore.getUserDocumentId)); + if (!res) { + throw new Error("No user id returned"); + } + const field = await Server.GetField(res); + let pending: Opt; + if (field instanceof Document) { + pending = await field.GetTAsync(KeyStore.OptionalRightCollection, Document) + } + if (pending) { + pending.GetOrCreateAsync(KeyStore.Data, ListField, list => { + list.Data.push(doc); + }) + } + }); - // console.log(window.location.origin + file[0]) + // console.log(window.location.origin + file[0]) - //imgPrev.setAttribute("src", window.location.origin + files[0].name) - }) - }) + //imgPrev.setAttribute("src", window.location.origin + files[0].name) } } } diff --git a/src/server/index.ts b/src/server/index.ts index 0c61f6885..ce8bbefe8 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -263,10 +263,10 @@ function deleteFields() { return Database.Instance.deleteAll(); } -function deleteAll() { - return Database.Instance.deleteAll().then(() => - Database.Instance.deleteAll('sessions')).then(() => - Database.Instance.deleteAll('users')); +async function deleteAll() { + await Database.Instance.deleteAll(); + await Database.Instance.deleteAll('sessions'); + await Database.Instance.deleteAll('users'); } function barReceived(guid: String) { -- cgit v1.2.3-70-g09d2 From 5e086920bf97297a02bcd38faea56454c2220279 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Mon, 8 Apr 2019 22:45:22 -0400 Subject: Enabled semi-colon and braces linter rule --- src/Utils.ts | 12 +-- src/client/Server.ts | 35 ++++---- src/client/SocketStub.ts | 24 +++--- src/client/documents/Documents.ts | 38 +++++---- src/client/northstar/core/BaseObject.ts | 4 +- .../northstar/core/attribute/AttributeModel.ts | 6 +- .../core/attribute/AttributeTransformationModel.ts | 17 ++-- .../core/attribute/CalculatedAttributeModel.ts | 2 +- .../northstar/core/brusher/IBaseBrushable.ts | 4 +- src/client/northstar/core/brusher/IBaseBrusher.ts | 2 +- src/client/northstar/core/filter/FilterModel.ts | 2 +- .../northstar/core/filter/IBaseFilterConsumer.ts | 4 +- .../northstar/core/filter/IBaseFilterProvider.ts | 2 +- .../northstar/core/filter/ValueComparision.ts | 16 ++-- src/client/northstar/dash-fields/HistogramField.ts | 2 +- .../dash-nodes/HistogramBinPrimitiveCollection.ts | 12 +-- src/client/northstar/dash-nodes/HistogramBox.tsx | 24 +++--- .../dash-nodes/HistogramBoxPrimitives.tsx | 40 +++++---- .../dash-nodes/HistogramLabelPrimitives.tsx | 15 ++-- src/client/northstar/manager/Gateway.ts | 2 +- src/client/northstar/model/ModelExtensions.ts | 18 ++-- src/client/northstar/model/ModelHelpers.ts | 8 +- .../model/binRanges/AlphabeticVisualBinRange.ts | 4 +- .../model/binRanges/DateTimeVisualBinRange.ts | 4 +- .../model/binRanges/NominalVisualBinRange.ts | 4 +- .../model/binRanges/QuantitativeVisualBinRange.ts | 2 +- .../northstar/model/binRanges/VisualBinRange.ts | 2 +- .../model/binRanges/VisualBinRangeHelper.ts | 14 +-- src/client/northstar/operations/BaseOperation.ts | 9 +- .../northstar/operations/HistogramOperation.ts | 2 +- src/client/northstar/utils/ArrayUtil.ts | 2 +- src/client/northstar/utils/Extensions.ts | 6 +- src/client/northstar/utils/GeometryUtil.ts | 34 ++++---- src/client/northstar/utils/MathUtil.ts | 38 +++++---- src/client/northstar/utils/SizeConverter.ts | 16 ++-- src/client/northstar/utils/StyleContants.ts | 2 +- src/client/northstar/utils/Utils.ts | 8 +- src/client/util/DocumentManager.ts | 12 +-- src/client/util/DragManager.ts | 5 +- src/client/util/RichTextSchema.tsx | 42 ++++----- src/client/util/Scripting.ts | 10 +-- src/client/util/ScrollBox.tsx | 4 +- src/client/util/SelectionManager.ts | 4 +- src/client/util/TooltipTextMenu.tsx | 38 ++++----- src/client/util/Transform.ts | 20 ++--- src/client/util/TypedEvent.ts | 2 +- src/client/util/UndoManager.ts | 24 +++--- src/client/views/ContextMenu.tsx | 14 +-- src/client/views/ContextMenuItem.tsx | 4 +- src/client/views/DocumentDecorations.tsx | 99 +++++++++++----------- src/client/views/EditableView.tsx | 10 +-- src/client/views/InkingCanvas.tsx | 15 ++-- src/client/views/InkingControl.tsx | 12 +-- src/client/views/InkingStroke.tsx | 6 +- src/client/views/Main.tsx | 55 ++++++------ .../views/collections/CollectionBaseView.tsx | 34 +++++--- .../views/collections/CollectionDockingView.tsx | 37 ++++---- src/client/views/collections/CollectionPDFView.tsx | 6 +- .../views/collections/CollectionSchemaView.tsx | 39 ++++----- src/client/views/collections/CollectionSubView.tsx | 41 ++++----- .../views/collections/CollectionTreeView.tsx | 14 +-- .../views/collections/CollectionVideoView.tsx | 6 +- src/client/views/collections/CollectionView.tsx | 20 ++--- .../CollectionFreeFormLinkView.tsx | 2 +- .../CollectionFreeFormLinksView.tsx | 18 ++-- .../CollectionFreeFormRemoteCursors.tsx | 6 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 33 ++++---- .../collections/collectionFreeForm/MarqueeView.tsx | 15 ++-- .../collectionFreeForm/PreviewCursor.tsx | 5 +- src/client/views/nodes/Annotation.tsx | 22 ++--- src/client/views/nodes/AudioBox.tsx | 12 +-- .../views/nodes/CollectionFreeFormDocumentView.tsx | 12 +-- src/client/views/nodes/DocumentContentsView.tsx | 6 +- src/client/views/nodes/DocumentView.tsx | 35 ++++---- src/client/views/nodes/FieldView.tsx | 29 ++++--- src/client/views/nodes/FormattedTextBox.tsx | 17 ++-- src/client/views/nodes/ImageBox.tsx | 12 +-- src/client/views/nodes/KeyValueBox.tsx | 18 ++-- src/client/views/nodes/KeyValuePair.tsx | 14 +-- src/client/views/nodes/LinkBox.tsx | 17 ++-- src/client/views/nodes/LinkEditor.tsx | 6 +- src/client/views/nodes/LinkMenu.tsx | 10 +-- src/client/views/nodes/PDFBox.tsx | 56 ++++++------ src/client/views/nodes/Sticky.tsx | 6 +- src/client/views/nodes/VideoBox.tsx | 10 +-- src/client/views/nodes/WebBox.tsx | 6 +- src/debug/Test.tsx | 8 +- src/debug/Viewer.tsx | 48 +++++------ src/fields/AudioField.ts | 2 +- src/fields/BasicField.ts | 6 +- src/fields/Document.ts | 25 +++--- src/fields/DocumentReference.ts | 2 +- src/fields/Field.ts | 2 +- src/fields/HtmlField.ts | 2 +- src/fields/ImageField.ts | 2 +- src/fields/InkField.ts | 2 +- src/fields/Key.ts | 6 +- src/fields/KeyStore.ts | 3 +- src/fields/ListField.ts | 31 ++++--- src/fields/NumberField.ts | 4 +- src/fields/PDFField.ts | 4 +- src/fields/RichTextField.ts | 2 +- src/fields/TextField.ts | 4 +- src/fields/TupleField.ts | 6 +- src/fields/VideoField.ts | 2 +- src/fields/WebField.ts | 2 +- src/mobile/ImageUpload.tsx | 14 +-- src/server/Client.ts | 4 +- src/server/authentication/config/passport.ts | 6 +- .../authentication/controllers/WorkspacesMenu.tsx | 2 +- .../authentication/controllers/user_controller.ts | 20 ++--- .../authentication/models/current_user_utils.ts | 8 +- src/server/authentication/models/user_model.ts | 2 +- src/server/database.ts | 34 ++++---- src/server/index.ts | 76 ++++++++--------- test/test.ts | 6 +- tslint.json | 16 ++-- 117 files changed, 901 insertions(+), 826 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/Utils.ts b/src/Utils.ts index 8bd7f2f5c..b0e66787e 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -6,16 +6,16 @@ import { Message, Types } from './server/Message'; export class Utils { public static GenerateGuid(): string { - return v4() + return v4(); } public static GenerateDeterministicGuid(seed: string): string { - return v5(seed, v5.URL) + return v5(seed, v5.URL); } public static GetScreenTransform(ele: HTMLElement): { scale: number, translateX: number, translateY: number } { if (!ele) { - return { scale: 1, translateX: 1, translateY: 1 } + return { scale: 1, translateX: 1, translateY: 1 }; } const rect = ele.getBoundingClientRect(); const scale = ele.offsetWidth === 0 && rect.width === 0 ? 1 : rect.width / ele.offsetWidth; @@ -55,8 +55,8 @@ export class Utils { return (args: any) => { this.log(prefix, messageName, args, true); func(args); - } - }; + }; + } public static Emit(socket: Socket | SocketIOClient.Socket, message: Message, args: T) { this.log("Emit", message.Name, args, false); @@ -81,7 +81,7 @@ export class Utils { public static AddServerHandlerCallback(socket: Socket, message: Message, handler: (args: [T, (res: any) => any]) => any) { socket.on(message.Message, (arg: T, fn: (res: any) => any) => { this.log('S receiving', message.Name, arg, true); - handler([arg, this.loggingCallback('S sending', fn, message.Name)]) + handler([arg, this.loggingCallback('S sending', fn, message.Name)]); }); } } diff --git a/src/client/Server.ts b/src/client/Server.ts index 45c7144ca..857101a33 100644 --- a/src/client/Server.ts +++ b/src/client/Server.ts @@ -1,7 +1,7 @@ -import { Key } from "../fields/Key" +import { Key } from "../fields/Key"; import { ObservableMap, action, reaction } from "mobx"; -import { Field, FieldWaiting, FIELD_WAITING, Opt, FieldId } from "../fields/Field" -import { Document } from "../fields/Document" +import { Field, FieldWaiting, FIELD_WAITING, Opt, FieldId } from "../fields/Field"; +import { Document } from "../fields/Document"; import { SocketStub, FieldMap } from "./SocketStub"; import * as OpenSocket from 'socket.io-client'; import { Utils } from "./../Utils"; @@ -10,7 +10,7 @@ import { MessageStore, Types } from "./../server/Message"; export class Server { public static ClientFieldsCached: ObservableMap = new ObservableMap(); static Socket: SocketIOClient.Socket = OpenSocket(`${window.location.protocol}//${window.location.hostname}:4321`); - static GUID: string = Utils.GenerateGuid() + static GUID: string = Utils.GenerateGuid(); // Retrieves the cached value of the field and sends a request to the server for the real value (if it's not cached). @@ -25,15 +25,16 @@ export class Server { this.ClientFieldsCached.set(fieldid, FieldWaiting); SocketStub.SEND_FIELD_REQUEST(fieldid, action((field: Field | undefined) => { let cached = this.ClientFieldsCached.get(fieldid); - if (cached !== FieldWaiting) + if (cached !== FieldWaiting) { cb(cached); + } else { if (field) { this.ClientFieldsCached.set(fieldid, field); } else { - this.ClientFieldsCached.delete(fieldid) + this.ClientFieldsCached.delete(fieldid); } - cb(field) + cb(field); } })); } else if (cached !== FieldWaiting) { @@ -42,12 +43,12 @@ export class Server { reaction(() => this.ClientFieldsCached.get(fieldid), (field, reaction) => { if (field !== FieldWaiting) { - reaction.dispose() - cb(field) + reaction.dispose(); + cb(field); } - }) + }); } - } + }; if (callback) { fn(callback); } else { @@ -79,15 +80,15 @@ export class Server { let field = fields[id]; if (field) { if (!(this.ClientFieldsCached.get(field.Id) instanceof Field)) { - this.ClientFieldsCached.set(field.Id, field) + this.ClientFieldsCached.set(field.Id, field); } else { - throw new Error("we shouldn't be trying to replace things that are already in the cache") + throw new Error("we shouldn't be trying to replace things that are already in the cache"); } } else { if (this.ClientFieldsCached.get(id) === FieldWaiting) { this.ClientFieldsCached.delete(id); } else { - throw new Error("we shouldn't be trying to replace things that are already in the cache") + throw new Error("we shouldn't be trying to replace things that are already in the cache"); } } } @@ -99,9 +100,9 @@ export class Server { let realField = field as Field; existingFields[realField.Id] = realField; } - cb({ ...fields, ...existingFields }) + cb({ ...fields, ...existingFields }); } - }, { fireImmediately: true }) + }, { fireImmediately: true }); })); }; if (callback) { @@ -139,7 +140,7 @@ export class Server { public static UpdateField(field: Field) { if (!this.ClientFieldsCached.has(field.Id)) { - this.ClientFieldsCached.set(field.Id, field) + this.ClientFieldsCached.set(field.Id, field); } SocketStub.SEND_SET_FIELD(field); } diff --git a/src/client/SocketStub.ts b/src/client/SocketStub.ts index c3cd8bee6..257973e3d 100644 --- a/src/client/SocketStub.ts +++ b/src/client/SocketStub.ts @@ -1,7 +1,7 @@ -import { Key } from "../fields/Key" -import { Field, FieldId, Opt } from "../fields/Field" +import { Key } from "../fields/Key"; +import { Field, FieldId, Opt } from "../fields/Field"; import { ObservableMap } from "mobx"; -import { Document } from "../fields/Document" +import { Document } from "../fields/Document"; import { MessageStore, DocumentTransfer } from "../server/Message"; import { Utils } from "../Utils"; import { Server } from "./Server"; @@ -37,7 +37,7 @@ export class SocketStub { // document.fields.forEach((f, key) => (this.FieldStore.get(document.Id) as Document)._proxies.set(key.Id, (f as Field).Id)); console.log("sending " + document.Title); - Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(document.ToJson())) + Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(document.ToJson())); } public static SEND_FIELD_REQUEST(fieldid: FieldId): Promise>; @@ -50,12 +50,12 @@ export class SocketStub { } else { cb(undefined); } - }) - } + }); + }; if (callback) { fn(callback); } else { - return new Promise(fn) + return new Promise(fn); } } @@ -65,7 +65,7 @@ export class SocketStub { for (let field of fields) { fieldMap[field._id] = ServerUtils.FromJson(field); } - callback(fieldMap) + callback(fieldMap); }); } @@ -78,8 +78,9 @@ export class SocketStub { // server updates its document to hold a proxy mapping from key => fieldId var document = this.FieldStore.get(doc.Id) as Document; - if (document) + if (document) { document._proxies.set(key.Id, value.Id); + } // server adds the field to its repository of fields this.FieldStore.set(value.Id, value); @@ -93,8 +94,9 @@ export class SocketStub { // Server removes the field id from the document's list of field proxies var document = this.FieldStore.get(doc.Id) as Document; - if (document) + if (document) { document._proxies.delete(key.Id); + } } public static SEND_SET_FIELD(field: Field) { @@ -103,6 +105,6 @@ export class SocketStub { // ...SOCKET(SET_FIELD, field id, serialized field value) // Server updates the value of the field in its fieldstore - Utils.Emit(Server.Socket, MessageStore.SetField, field.ToJson()) + Utils.Emit(Server.Socket, MessageStore.SetField, field.ToJson()); } } diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 613b94abd..72e6e57ab 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -64,7 +64,7 @@ export namespace Documents { const webProtoId = "webProto"; const collProtoId = "collectionProto"; const kvpProtoId = "kvpProto"; - const videoProtoId = "videoProto" + const videoProtoId = "videoProto"; const audioProtoId = "audioProto"; export function initProtos(): Promise { @@ -102,7 +102,7 @@ export namespace Documents { if (options.height !== undefined) { doc.SetNumber(KeyStore.Height, options.height); } if (options.panx !== undefined) { doc.SetNumber(KeyStore.PanX, options.panx); } if (options.pany !== undefined) { doc.SetNumber(KeyStore.PanY, options.pany); } - return doc + return doc; } function setupPrototypeOptions(protoId: string, title: string, layout: string, options: DocumentOptions): Document { @@ -110,10 +110,12 @@ export namespace Documents { } function SetInstanceOptions(doc: Document, options: DocumentOptions, value: [T, { new(): U }] | Document, id?: string) { var deleg = doc.MakeDelegate(id); - if (value instanceof Document) - deleg.Set(KeyStore.Data, value) - else + if (value instanceof Document) { + deleg.Set(KeyStore.Data, value); + } + else { deleg.SetData(KeyStore.Data, value[0], value[1]); + } return assignOptions(deleg, options); } @@ -134,7 +136,7 @@ export namespace Documents { function CreateTextPrototype(): Document { let textProto = setupPrototypeOptions(textProtoId, "TEXT_PROTO", FormattedTextBox.LayoutString(), { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] }); - return textProto + return textProto; } function CreatePdfPrototype(): Document { let pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", CollectionPDFView.LayoutString("AnnotationsKey"), @@ -168,7 +170,7 @@ export namespace Documents { } function CreateAudioPrototype(): Document { let audioProto = setupPrototypeOptions(audioProtoId, "AUDIO_PROTO", AudioBox.LayoutString(), - { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] }) + { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] }); return audioProto; } @@ -205,22 +207,22 @@ export namespace Documents { return assignToDelegate(SetInstanceOptions(webProto, options, [html, HtmlField]).MakeDelegate(), options); } export function KVPDocument(document: Document, options: DocumentOptions = {}, id?: string) { - return assignToDelegate(SetInstanceOptions(kvpProto, options, document, id), options) + return assignToDelegate(SetInstanceOptions(kvpProto, options, document, id), options); } export function FreeformDocument(documents: Array, options: DocumentOptions, id?: string, makePrototype: boolean = true) { if (!makePrototype) { - return SetInstanceOptions(collProto, { ...options, viewType: CollectionViewType.Freeform }, [documents, ListField], id) + return SetInstanceOptions(collProto, { ...options, viewType: CollectionViewType.Freeform }, [documents, ListField], id); } - return assignToDelegate(SetInstanceOptions(collProto, { ...options, viewType: CollectionViewType.Freeform }, [documents, ListField], id).MakeDelegate(), options) + return assignToDelegate(SetInstanceOptions(collProto, { ...options, viewType: CollectionViewType.Freeform }, [documents, ListField], id).MakeDelegate(), options); } export function SchemaDocument(documents: Array, options: DocumentOptions, id?: string) { - return assignToDelegate(SetInstanceOptions(collProto, { ...options, viewType: CollectionViewType.Schema }, [documents, ListField], id), options) + return assignToDelegate(SetInstanceOptions(collProto, { ...options, viewType: CollectionViewType.Schema }, [documents, ListField], id), options); } export function TreeDocument(documents: Array, options: DocumentOptions, id?: string) { - return assignToDelegate(SetInstanceOptions(collProto, { ...options, viewType: CollectionViewType.Tree }, [documents, ListField], id), options) + return assignToDelegate(SetInstanceOptions(collProto, { ...options, viewType: CollectionViewType.Tree }, [documents, ListField], id), options); } export function DockDocument(config: string, options: DocumentOptions, id?: string) { - return assignToDelegate(SetInstanceOptions(collProto, { ...options, viewType: CollectionViewType.Docking }, [config, TextField], id), options) + return assignToDelegate(SetInstanceOptions(collProto, { ...options, viewType: CollectionViewType.Docking }, [config, TextField], id), options); } export function CaptionDocument(doc: Document) { @@ -240,13 +242,13 @@ export namespace Documents {
` + FormattedTextBox.LayoutString("CaptionKey") + `
-
` }; +
`; } export function FixedCaption(fieldName: string = "Caption") { return `
` + FormattedTextBox.LayoutString(fieldName + "Key") + `
-
` }; +
`; } function OuterCaption() { return (` @@ -258,7 +260,7 @@ export namespace Documents {
- `) + `); } function InnerCaption() { return (` @@ -270,7 +272,7 @@ export namespace Documents { - `) + `); } /* @@ -293,6 +295,6 @@ export namespace Documents { - `) + `); } } \ No newline at end of file diff --git a/src/client/northstar/core/BaseObject.ts b/src/client/northstar/core/BaseObject.ts index f1761e643..ed3818071 100644 --- a/src/client/northstar/core/BaseObject.ts +++ b/src/client/northstar/core/BaseObject.ts @@ -1,5 +1,5 @@ -import { IEquatable } from '../utils/IEquatable' -import { IDisposable } from '../utils/IDisposable' +import { IEquatable } from '../utils/IEquatable'; +import { IDisposable } from '../utils/IDisposable'; export class BaseObject implements IEquatable, IDisposable { diff --git a/src/client/northstar/core/attribute/AttributeModel.ts b/src/client/northstar/core/attribute/AttributeModel.ts index 230bfecc8..c89b1617c 100644 --- a/src/client/northstar/core/attribute/AttributeModel.ts +++ b/src/client/northstar/core/attribute/AttributeModel.ts @@ -1,5 +1,5 @@ -import { Attribute, DataType, VisualizationHint } from '../../model/idea/idea' -import { BaseObject } from '../BaseObject' +import { Attribute, DataType, VisualizationHint } from '../../model/idea/idea'; +import { BaseObject } from '../BaseObject'; import { observable } from "mobx"; export abstract class AttributeModel extends BaseObject { @@ -93,7 +93,7 @@ export class BackendAttributeModel extends AttributeModel { } public get DisplayName(): string { - return this._displayName.ReplaceAll("_", " ");; + return this._displayName.ReplaceAll("_", " "); } public get CodeName(): string { diff --git a/src/client/northstar/core/attribute/AttributeTransformationModel.ts b/src/client/northstar/core/attribute/AttributeTransformationModel.ts index f50b78d51..66485183b 100644 --- a/src/client/northstar/core/attribute/AttributeTransformationModel.ts +++ b/src/client/northstar/core/attribute/AttributeTransformationModel.ts @@ -1,4 +1,4 @@ -; + import { computed, observable } from "mobx"; import { AggregateFunction } from "../../model/idea/idea"; import { AttributeModel } from "./AttributeModel"; @@ -20,16 +20,21 @@ export class AttributeTransformationModel implements IEquatable { if (this.AggregateFunction === AggregateFunction.Count) { return "count"; } - if (this.AggregateFunction === AggregateFunction.Avg) + if (this.AggregateFunction === AggregateFunction.Avg) { displayName = "avg(" + displayName + ")"; - else if (this.AggregateFunction === AggregateFunction.Max) + } + else if (this.AggregateFunction === AggregateFunction.Max) { displayName = "max(" + displayName + ")"; - else if (this.AggregateFunction === AggregateFunction.Min) + } + else if (this.AggregateFunction === AggregateFunction.Min) { displayName = "min(" + displayName + ")"; - else if (this.AggregateFunction === AggregateFunction.Sum) + } + else if (this.AggregateFunction === AggregateFunction.Sum) { displayName = "sum(" + displayName + ")"; - else if (this.AggregateFunction === AggregateFunction.SumE) + } + else if (this.AggregateFunction === AggregateFunction.SumE) { displayName = "sumE(" + displayName + ")"; + } return displayName; } diff --git a/src/client/northstar/core/attribute/CalculatedAttributeModel.ts b/src/client/northstar/core/attribute/CalculatedAttributeModel.ts index 0b8e0d12c..a197c1305 100644 --- a/src/client/northstar/core/attribute/CalculatedAttributeModel.ts +++ b/src/client/northstar/core/attribute/CalculatedAttributeModel.ts @@ -1,5 +1,5 @@ import { BackendAttributeModel, AttributeModel, CodeAttributeModel } from "./AttributeModel"; -import { DataType, VisualizationHint } from '../../model/idea/idea' +import { DataType, VisualizationHint } from '../../model/idea/idea'; export class CalculatedAttributeManager { public static AllCalculatedAttributes: Array = new Array(); diff --git a/src/client/northstar/core/brusher/IBaseBrushable.ts b/src/client/northstar/core/brusher/IBaseBrushable.ts index 99a36636f..c46db4d22 100644 --- a/src/client/northstar/core/brusher/IBaseBrushable.ts +++ b/src/client/northstar/core/brusher/IBaseBrushable.ts @@ -1,6 +1,6 @@ -import { PIXIPoint } from '../../utils/MathUtil' +import { PIXIPoint } from '../../utils/MathUtil'; import { IEquatable } from '../../utils/IEquatable'; -import { Document } from '../../../../fields/Document' +import { Document } from '../../../../fields/Document'; export interface IBaseBrushable extends IEquatable { BrusherModels: Array; diff --git a/src/client/northstar/core/brusher/IBaseBrusher.ts b/src/client/northstar/core/brusher/IBaseBrusher.ts index d7ae65464..d2de6ed62 100644 --- a/src/client/northstar/core/brusher/IBaseBrusher.ts +++ b/src/client/northstar/core/brusher/IBaseBrusher.ts @@ -1,4 +1,4 @@ -import { PIXIPoint } from '../../utils/MathUtil' +import { PIXIPoint } from '../../utils/MathUtil'; import { IEquatable } from '../../utils/IEquatable'; diff --git a/src/client/northstar/core/filter/FilterModel.ts b/src/client/northstar/core/filter/FilterModel.ts index 20fca77f5..e2ba3f652 100644 --- a/src/client/northstar/core/filter/FilterModel.ts +++ b/src/client/northstar/core/filter/FilterModel.ts @@ -15,7 +15,7 @@ export class FilterModel { public Equals(other: FilterModel): boolean { if (!Utils.EqualityHelper(this, other)) return false; - if (!this.isSame(this.ValueComparisons, (other as FilterModel).ValueComparisons)) return false; + if (!this.isSame(this.ValueComparisons, (other).ValueComparisons)) return false; return true; } diff --git a/src/client/northstar/core/filter/IBaseFilterConsumer.ts b/src/client/northstar/core/filter/IBaseFilterConsumer.ts index 93f66a154..59d7adf4c 100644 --- a/src/client/northstar/core/filter/IBaseFilterConsumer.ts +++ b/src/client/northstar/core/filter/IBaseFilterConsumer.ts @@ -1,5 +1,5 @@ -import { FilterOperand } from '../filter/FilterOperand' -import { IEquatable } from '../../utils/IEquatable' +import { FilterOperand } from '../filter/FilterOperand'; +import { IEquatable } from '../../utils/IEquatable'; import { Document } from "../../../../fields/Document"; export interface IBaseFilterConsumer extends IEquatable { diff --git a/src/client/northstar/core/filter/IBaseFilterProvider.ts b/src/client/northstar/core/filter/IBaseFilterProvider.ts index d082bfe12..fc3301b11 100644 --- a/src/client/northstar/core/filter/IBaseFilterProvider.ts +++ b/src/client/northstar/core/filter/IBaseFilterProvider.ts @@ -1,4 +1,4 @@ -import { FilterModel } from '../filter/FilterModel' +import { FilterModel } from '../filter/FilterModel'; export interface IBaseFilterProvider { FilterModels: Array; diff --git a/src/client/northstar/core/filter/ValueComparision.ts b/src/client/northstar/core/filter/ValueComparision.ts index 1a3e461f5..80b1242a9 100644 --- a/src/client/northstar/core/filter/ValueComparision.ts +++ b/src/client/northstar/core/filter/ValueComparision.ts @@ -1,5 +1,5 @@ -import { Predicate } from '../../model/idea/idea' -import { Utils } from '../../utils/Utils' +import { Predicate } from '../../model/idea/idea'; +import { Utils } from '../../utils/Utils'; import { AttributeModel } from '../attribute/AttributeModel'; export class ValueComparison { @@ -15,15 +15,19 @@ export class ValueComparison { } public Equals(other: Object): boolean { - if (!Utils.EqualityHelper(this, other)) + if (!Utils.EqualityHelper(this, other)) { return false; - if (this.Predicate !== (other as ValueComparison).Predicate) + } + if (this.Predicate !== (other as ValueComparison).Predicate) { return false; + } let isComplex = (typeof this.Value === "object"); - if (!isComplex && this.Value !== (other as ValueComparison).Value) + if (!isComplex && this.Value !== (other as ValueComparison).Value) { return false; - if (isComplex && !this.Value.Equals((other as ValueComparison).Value)) + } + if (isComplex && !this.Value.Equals((other as ValueComparison).Value)) { return false; + } return true; } diff --git a/src/client/northstar/dash-fields/HistogramField.ts b/src/client/northstar/dash-fields/HistogramField.ts index fa2a9c008..6abde4677 100644 --- a/src/client/northstar/dash-fields/HistogramField.ts +++ b/src/client/northstar/dash-fields/HistogramField.ts @@ -41,7 +41,7 @@ export class HistogramField extends BasicField { data: this.toString(), _id: this.Id - } + }; } @action diff --git a/src/client/northstar/dash-nodes/HistogramBinPrimitiveCollection.ts b/src/client/northstar/dash-nodes/HistogramBinPrimitiveCollection.ts index cdae90c8b..6291ec1fc 100644 --- a/src/client/northstar/dash-nodes/HistogramBinPrimitiveCollection.ts +++ b/src/client/northstar/dash-nodes/HistogramBinPrimitiveCollection.ts @@ -1,4 +1,4 @@ -import React = require("react") +import React = require("react"); import { AttributeTransformationModel } from "../../northstar/core/attribute/AttributeTransformationModel"; import { ChartType } from '../../northstar/model/binRanges/VisualBinRange'; import { AggregateFunction, Bin, Brush, DoubleValueAggregateResult, HistogramResult, MarginAggregateParameters, MarginAggregateResult } from "../../northstar/model/idea/idea"; @@ -29,7 +29,7 @@ export class HistogramBinPrimitiveCollection { private _histoBox: HistogramBox; private get histoOp() { return this._histoBox.HistoOp; } private get histoResult() { return this.histoOp.Result as HistogramResult; } - private get sizeConverter() { return this._histoBox.SizeConverter!; } + private get sizeConverter() { return this._histoBox.SizeConverter; } public BinPrimitives: Array = new Array(); public HitGeom: PIXIRectangle = PIXIRectangle.EMPTY; @@ -99,13 +99,14 @@ export class HistogramBinPrimitiveCollection { private createHeatmapBinPrimitives(bin: Bin, brush: Brush, brushFactorSum: number): number { let unNormalizedValue = this.getBinValue(2, bin, brush.brushIndex!); - if (unNormalizedValue === undefined) + if (unNormalizedValue === undefined) { return brushFactorSum; + } var normalizedValue = (unNormalizedValue - this._histoBox.ValueRange[0]) / (Math.abs((this._histoBox.ValueRange[1] - this._histoBox.ValueRange[0])) < HistogramBinPrimitiveCollection.TOLERANCE ? unNormalizedValue : this._histoBox.ValueRange[1] - this._histoBox.ValueRange[0]); - let allUnNormalizedValue = this.getBinValue(2, bin, ModelHelpers.AllBrushIndex(this.histoResult)) + let allUnNormalizedValue = this.getBinValue(2, bin, ModelHelpers.AllBrushIndex(this.histoResult)); // bcz: are these calls needed? let [xFrom, xTo] = this.sizeConverter.DataToScreenXAxisRange(this._histoBox.VisualBinRanges, 0, bin); @@ -145,8 +146,9 @@ export class HistogramBinPrimitiveCollection { let [xFrom, xTo] = this.sizeConverter.DataToScreenPointRange(0, bin, ModelHelpers.CreateAggregateKey(this.histoOp.Schema!.distinctAttributeParameters, this.histoOp.X, this.histoResult, brush.brushIndex!)); let [yFrom, yTo] = this.sizeConverter.DataToScreenPointRange(1, bin, ModelHelpers.CreateAggregateKey(this.histoOp.Schema!.distinctAttributeParameters, this.histoOp.Y, this.histoResult, brush.brushIndex!)); - if (xFrom !== undefined && yFrom !== undefined && xTo !== undefined && yTo !== undefined) + if (xFrom !== undefined && yFrom !== undefined && xTo !== undefined && yTo !== undefined) { this.createBinPrimitive(-1, brush, PIXIRectangle.EMPTY, 0, xFrom, xTo, yFrom, yTo, this.baseColorFromBrush(brush), 1, unNormalizedValue); + } } return 0; } diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx index ec9413649..7df59ef07 100644 --- a/src/client/northstar/dash-nodes/HistogramBox.tsx +++ b/src/client/northstar/dash-nodes/HistogramBox.tsx @@ -1,4 +1,4 @@ -import React = require("react") +import React = require("react"); import { action, computed, observable, reaction, runInAction, trace } from "mobx"; import { observer } from "mobx-react"; import Measure from "react-measure"; @@ -25,7 +25,7 @@ import { StyleConstants } from "../utils/StyleContants"; @observer export class HistogramBox extends React.Component { - public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(HistogramBox, fieldStr) } + public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(HistogramBox, fieldStr); } private _dropXRef = React.createRef(); private _dropYRef = React.createRef(); private _dropXDisposer?: DragManager.DragDropDisposer; @@ -92,15 +92,15 @@ export class HistogramBox extends React.Component { } reaction(() => CurrentUserUtils.NorthstarDBCatalog, (catalog?: Catalog) => this.activateHistogramOperation(catalog), { fireImmediately: true }); reaction(() => [this.VisualBinRanges && this.VisualBinRanges.slice()], () => this.SizeConverter.SetVisualBinRanges(this.VisualBinRanges)); - reaction(() => [this.PanelHeight, this.PanelWidth], () => this.SizeConverter.SetIsSmall(this.PanelWidth < 40 && this.PanelHeight < 40)) + reaction(() => [this.PanelHeight, this.PanelWidth], () => this.SizeConverter.SetIsSmall(this.PanelWidth < 40 && this.PanelHeight < 40)); reaction(() => this.HistogramResult ? this.HistogramResult.binRanges : undefined, (binRanges: BinRange[] | undefined) => { if (binRanges) { this.VisualBinRanges.splice(0, this.VisualBinRanges.length, ...binRanges.map((br, ind) => - VisualBinRangeHelper.GetVisualBinRange(this.HistoOp.Schema!.distinctAttributeParameters, br, this.HistogramResult!, ind ? this.HistoOp.Y : this.HistoOp.X, this.ChartType))); + VisualBinRangeHelper.GetVisualBinRange(this.HistoOp.Schema!.distinctAttributeParameters, br, this.HistogramResult, ind ? this.HistoOp.Y : this.HistoOp.X, this.ChartType))); - let valueAggregateKey = ModelHelpers.CreateAggregateKey(this.HistoOp.Schema!.distinctAttributeParameters, this.HistoOp.V, this.HistogramResult!, ModelHelpers.AllBrushIndex(this.HistogramResult!)); - this.ValueRange = Object.values(this.HistogramResult!.bins!).reduce((prev, cur) => { + let valueAggregateKey = ModelHelpers.CreateAggregateKey(this.HistoOp.Schema!.distinctAttributeParameters, this.HistoOp.V, this.HistogramResult, ModelHelpers.AllBrushIndex(this.HistogramResult)); + this.ValueRange = Object.values(this.HistogramResult.bins!).reduce((prev, cur) => { let value = ModelHelpers.GetAggregateResult(cur, valueAggregateKey) as DoubleValueAggregateResult; return value && value.hasResult ? [Math.min(prev[0], value.result!), Math.max(prev[1], value.result!)] : prev; }, [Number.MAX_VALUE, Number.MIN_VALUE]); @@ -109,10 +109,12 @@ export class HistogramBox extends React.Component { } componentWillUnmount() { - if (this._dropXDisposer) + if (this._dropXDisposer) { this._dropXDisposer(); - if (this._dropYDisposer) + } + if (this._dropYDisposer) { this._dropYDisposer(); + } } activateHistogramOperation(catalog?: Catalog) { @@ -128,7 +130,7 @@ export class HistogramBox extends React.Component { this.HistoOp.BrushLinks.splice(0, this.HistoOp.BrushLinks.length, ...brushingDocs.map((brush, i) => { brush.SetNumber(KeyStore.BackgroundColor, StyleConstants.BRUSH_COLORS[i % StyleConstants.BRUSH_COLORS.length]); let brushed = brush.GetList(KeyStore.BrushingDocs, [] as Document[]); - return { l: brush, b: brushed[0].Id === proto.Id ? brushed[1] : brushed[0] } + return { l: brush, b: brushed[0].Id === proto.Id ? brushed[1] : brushed[0] }; })); }, { fireImmediately: true }); reaction(() => this.createOperationParamsCache, () => this.HistoOp.Update(), { fireImmediately: true }); @@ -146,7 +148,7 @@ export class HistogramBox extends React.Component { let roff = this.SizeConverter.RightOffset; let boff = this.SizeConverter.BottomOffset; return ( - runInAction(() => { this.PanelWidth = r.entry.width; this.PanelHeight = r.entry.height })}> + runInAction(() => { this.PanelWidth = r.entry.width; this.PanelHeight = r.entry.height; })}> {({ measureRef }) =>
@@ -168,7 +170,7 @@ export class HistogramBox extends React.Component {
} - ) + ); } } diff --git a/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx b/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx index a78703247..4c5bdb14b 100644 --- a/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx +++ b/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx @@ -1,4 +1,4 @@ -import React = require("react") +import React = require("react"); import { computed, observable, reaction, runInAction, trace, action } from "mobx"; import { observer } from "mobx-react"; import { Utils as DashUtils } from '../../../Utils'; @@ -28,17 +28,18 @@ export class HistogramBoxPrimitives extends React.Component this.drawRect(bp.Rect, bp.BarAxis, undefined, "border")); } @computed get barPrimitives() { let histoResult = this.props.HistoBox.HistogramResult; - if (!histoResult || !histoResult.bins || !this.props.HistoBox.VisualBinRanges.length) + if (!histoResult || !histoResult.bins || !this.props.HistoBox.VisualBinRanges.length) { return (null); + } let allBrushIndex = ModelHelpers.AllBrushIndex(histoResult); return Object.keys(histoResult.bins).reduce((prims: JSX.Element[], key: string) => { - let drawPrims = new HistogramBinPrimitiveCollection(histoResult!.bins![key], this.props.HistoBox); + let drawPrims = new HistogramBinPrimitiveCollection(histoResult.bins![key], this.props.HistoBox); let toggle = this.getSelectionToggle(drawPrims.BinPrimitives, allBrushIndex, - ModelHelpers.GetBinFilterModel(histoResult!.bins![key], allBrushIndex, histoResult!, this.histoOp.X, this.histoOp.Y)); + ModelHelpers.GetBinFilterModel(histoResult.bins![key], allBrushIndex, histoResult, this.histoOp.X, this.histoOp.Y)); drawPrims.BinPrimitives.filter(bp => bp.DataValue && bp.BrushIndex !== allBrushIndex).map(bp => prims.push(...[{ r: bp.Rect, c: bp.Color }, { r: bp.MarginRect, c: StyleConstants.MARGIN_BARS_COLOR }].map(pair => this.drawRect(pair.r, bp.BarAxis, pair.c, "bar", toggle)))); return prims; - }, [] as JSX.Element[]) + }, [] as JSX.Element[]); } componentDidMount() { @@ -47,8 +48,9 @@ export class HistogramBoxPrimitives extends React.Component bp.BrushIndex === allBrushIndex); - if (!rawAllBrushPrim) - return () => { } + if (!rawAllBrushPrim) { + return () => { }; + } let allBrushPrim = rawAllBrushPrim; return () => runInAction(() => { if (ArrayUtil.Contains(this.histoOp.FilterModels, filterModel)) { @@ -59,23 +61,25 @@ export class HistogramBoxPrimitives extends React.Component {labels.reduce((prims, binLabel, i) => { let r = this.props.HistoBox.SizeConverter.DataToScreenRange(binLabel.minValue!, binLabel.maxValue!, axis); prims.push(this.drawLine(r.xFrom, r.yFrom, axis === 0 ? 0 : r.xTo - r.xFrom, axis === 0 ? r.yTo - r.yFrom : 0)); - if (i === labels.length - 1) + if (i === labels.length - 1) { prims.push(this.drawLine(axis === 0 ? r.xTo : r.xFrom, axis === 0 ? r.yFrom : r.yTo, axis === 0 ? 0 : r.xTo - r.xFrom, axis === 0 ? r.yTo - r.yFrom : 0)); + } return prims; }, [] as JSX.Element[])} - + ; } drawLine(xFrom: number, yFrom: number, width: number, height: number) { @@ -89,9 +93,9 @@ export class HistogramBoxPrimitives extends React.Component + let trans1Xpercent = `${xFrom / this.renderDimension * 100}%`; + let trans1Ypercent = `${yFrom / this.renderDimension * 100}%`; + return ; } drawRect(r: PIXIRectangle, barAxis: number, color: number | undefined, classExt: string, tapHandler: () => void = () => { }) { if (r.height < 0) { @@ -102,11 +106,11 @@ export class HistogramBoxPrimitives extends React.Component { if (e.button === 0) tapHandler() }} + return ( { if (e.button === 0) tapHandler(); }} x={transXpercent} width={`${widthXpercent}`} y={transYpercent} height={`${heightYpercent}`} fill={color ? `${LABColor.RGBtoHexString(color)}` : "transparent"} />); } render() { @@ -118,6 +122,6 @@ export class HistogramBoxPrimitives extends React.Component -
+ ; } } \ No newline at end of file diff --git a/src/client/northstar/dash-nodes/HistogramLabelPrimitives.tsx b/src/client/northstar/dash-nodes/HistogramLabelPrimitives.tsx index dd62e9146..5785fe838 100644 --- a/src/client/northstar/dash-nodes/HistogramLabelPrimitives.tsx +++ b/src/client/northstar/dash-nodes/HistogramLabelPrimitives.tsx @@ -1,4 +1,4 @@ -import React = require("react") +import React = require("react"); import { action, computed, reaction } from "mobx"; import { observer } from "mobx-react"; import { Utils as DashUtils } from '../../../Utils'; @@ -13,7 +13,7 @@ import { HistogramPrimitivesProps } from "./HistogramBoxPrimitives"; export class HistogramLabelPrimitives extends React.Component { componentDidMount() { reaction(() => [this.props.HistoBox.PanelWidth, this.props.HistoBox.SizeConverter.LeftOffset, this.props.HistoBox.VisualBinRanges.length], - (fields) => HistogramLabelPrimitives.computeLabelAngle(fields[0] as number, fields[1] as number, this.props.HistoBox), { fireImmediately: true }); + (fields) => HistogramLabelPrimitives.computeLabelAngle(fields[0], fields[1], this.props.HistoBox), { fireImmediately: true }); } @action @@ -32,8 +32,9 @@ export class HistogramLabelPrimitives extends React.ComponentFontStyles.AxisLabel.fontSize + 5))); sc.MaxLabelSizes[axis].coords[axis] + 5); @@ -52,8 +53,8 @@ export class HistogramLabelPrimitives extends React.Component @@ -61,7 +62,7 @@ export class HistogramLabelPrimitives extends React.Component - ) + ); } return prims; }, [] as JSX.Element[]); @@ -73,7 +74,7 @@ export class HistogramLabelPrimitives extends React.Component {xaxislines} {yaxislines} - + ; } } \ No newline at end of file diff --git a/src/client/northstar/manager/Gateway.ts b/src/client/northstar/manager/Gateway.ts index ba6fe2ad5..1c8d3fd73 100644 --- a/src/client/northstar/manager/Gateway.ts +++ b/src/client/northstar/manager/Gateway.ts @@ -1,4 +1,4 @@ -import { Catalog, OperationReference, Result, CompileResults } from "../model/idea/idea" +import { Catalog, OperationReference, Result, CompileResults } from "../model/idea/idea"; import { computed, observable, action } from "mobx"; export class Gateway { diff --git a/src/client/northstar/model/ModelExtensions.ts b/src/client/northstar/model/ModelExtensions.ts index e4bf77ed8..29f80d2d1 100644 --- a/src/client/northstar/model/ModelExtensions.ts +++ b/src/client/northstar/model/ModelExtensions.ts @@ -1,7 +1,7 @@ -import { AttributeParameters, Brush, MarginAggregateParameters, SingleDimensionAggregateParameters, Solution } from '../model/idea/idea' -import { Utils } from '../utils/Utils' +import { AttributeParameters, Brush, MarginAggregateParameters, SingleDimensionAggregateParameters, Solution } from '../model/idea/idea'; +import { Utils } from '../utils/Utils'; -import { FilterModel } from '../core/filter/FilterModel' +import { FilterModel } from '../core/filter/FilterModel'; (SingleDimensionAggregateParameters as any).prototype.Equals = function (other: Object) { if (!Utils.EqualityHelper(this, other)) return false; @@ -9,13 +9,13 @@ import { FilterModel } from '../core/filter/FilterModel' (other as SingleDimensionAggregateParameters).attributeParameters!)) return false; if (!((this as SingleDimensionAggregateParameters).attributeParameters! as any).Equals((other as SingleDimensionAggregateParameters).attributeParameters)) return false; return true; -} +}; { (AttributeParameters as any).prototype.Equals = function (other: AttributeParameters) { - return (this).constructor.name === (other).constructor.name && + return (this).constructor.name === (other).constructor.name && this.rawName === other.rawName; - } + }; } { @@ -23,7 +23,7 @@ import { FilterModel } from '../core/filter/FilterModel' if (!Utils.EqualityHelper(this, other)) return false; if ((this as Solution).solutionId !== (other as Solution).solutionId) return false; return true; - } + }; } { @@ -35,7 +35,7 @@ import { FilterModel } from '../core/filter/FilterModel' if ((this as MarginAggregateParameters).aggregateFunction !== (other as MarginAggregateParameters).aggregateFunction) return false; return true; - } + }; } { @@ -44,5 +44,5 @@ import { FilterModel } from '../core/filter/FilterModel' if ((this as Brush).brushEnum !== (other as Brush).brushEnum) return false; if ((this as Brush).brushIndex !== (other as Brush).brushIndex) return false; return true; - } + }; } \ No newline at end of file diff --git a/src/client/northstar/model/ModelHelpers.ts b/src/client/northstar/model/ModelHelpers.ts index 1a58e6180..ac807b41f 100644 --- a/src/client/northstar/model/ModelHelpers.ts +++ b/src/client/northstar/model/ModelHelpers.ts @@ -64,7 +64,7 @@ export class ModelHelpers { if (aggParams) { aggregateParameters.push(aggParams); - var margin = new MarginAggregateParameters() + var margin = new MarginAggregateParameters(); margin.aggregateFunction = agg.AggregateFunction; margin.attributeParameters = ModelHelpers.GetAttributeParameters(agg.AttributeModel); margin.distinctAttributeParameters = distinctAttributeParameters; @@ -106,7 +106,7 @@ export class ModelHelpers { { rawName: am.CodeName, visualizationHints: am.VisualizationHints, - id: (am as BackendAttributeModel).Id + id: (am).Id }); } else if (am instanceof CodeAttributeModel) { @@ -114,11 +114,11 @@ export class ModelHelpers { { rawName: am.CodeName, visualizationHints: am.VisualizationHints, - code: (am as CodeAttributeModel).Code + code: (am).Code }); } else { - throw new Exception() + throw new Exception(); } } diff --git a/src/client/northstar/model/binRanges/AlphabeticVisualBinRange.ts b/src/client/northstar/model/binRanges/AlphabeticVisualBinRange.ts index 995bf4e0b..120b034f2 100644 --- a/src/client/northstar/model/binRanges/AlphabeticVisualBinRange.ts +++ b/src/client/northstar/model/binRanges/AlphabeticVisualBinRange.ts @@ -1,5 +1,5 @@ -import { AlphabeticBinRange, BinLabel } from '../../model/idea/idea' -import { VisualBinRange } from './VisualBinRange' +import { AlphabeticBinRange, BinLabel } from '../../model/idea/idea'; +import { VisualBinRange } from './VisualBinRange'; export class AlphabeticVisualBinRange extends VisualBinRange { public DataBinRange: AlphabeticBinRange; diff --git a/src/client/northstar/model/binRanges/DateTimeVisualBinRange.ts b/src/client/northstar/model/binRanges/DateTimeVisualBinRange.ts index f5872aa4c..776e643cd 100644 --- a/src/client/northstar/model/binRanges/DateTimeVisualBinRange.ts +++ b/src/client/northstar/model/binRanges/DateTimeVisualBinRange.ts @@ -1,5 +1,5 @@ -import { DateTimeBinRange, DateTimeStep, DateTimeStepGranularity } from '../idea/idea' -import { VisualBinRange } from './VisualBinRange' +import { DateTimeBinRange, DateTimeStep, DateTimeStepGranularity } from '../idea/idea'; +import { VisualBinRange } from './VisualBinRange'; export class DateTimeVisualBinRange extends VisualBinRange { public DataBinRange: DateTimeBinRange; diff --git a/src/client/northstar/model/binRanges/NominalVisualBinRange.ts b/src/client/northstar/model/binRanges/NominalVisualBinRange.ts index 407ff3ea6..42509d797 100644 --- a/src/client/northstar/model/binRanges/NominalVisualBinRange.ts +++ b/src/client/northstar/model/binRanges/NominalVisualBinRange.ts @@ -1,5 +1,5 @@ -import { NominalBinRange, BinLabel } from '../../model/idea/idea' -import { VisualBinRange } from './VisualBinRange' +import { NominalBinRange, BinLabel } from '../../model/idea/idea'; +import { VisualBinRange } from './VisualBinRange'; export class NominalVisualBinRange extends VisualBinRange { public DataBinRange: NominalBinRange; diff --git a/src/client/northstar/model/binRanges/QuantitativeVisualBinRange.ts b/src/client/northstar/model/binRanges/QuantitativeVisualBinRange.ts index 80886416b..c579c8e5f 100644 --- a/src/client/northstar/model/binRanges/QuantitativeVisualBinRange.ts +++ b/src/client/northstar/model/binRanges/QuantitativeVisualBinRange.ts @@ -1,4 +1,4 @@ -import { QuantitativeBinRange } from '../idea/idea' +import { QuantitativeBinRange } from '../idea/idea'; import { VisualBinRange } from './VisualBinRange'; import { format } from "d3-format"; diff --git a/src/client/northstar/model/binRanges/VisualBinRange.ts b/src/client/northstar/model/binRanges/VisualBinRange.ts index a0766e494..449a22e91 100644 --- a/src/client/northstar/model/binRanges/VisualBinRange.ts +++ b/src/client/northstar/model/binRanges/VisualBinRange.ts @@ -1,4 +1,4 @@ -import { BinLabel } from '../../model/idea/idea' +import { BinLabel } from '../../model/idea/idea'; export abstract class VisualBinRange { diff --git a/src/client/northstar/model/binRanges/VisualBinRangeHelper.ts b/src/client/northstar/model/binRanges/VisualBinRangeHelper.ts index 63ee61909..9671e55f8 100644 --- a/src/client/northstar/model/binRanges/VisualBinRangeHelper.ts +++ b/src/client/northstar/model/binRanges/VisualBinRangeHelper.ts @@ -16,18 +16,18 @@ export class VisualBinRangeHelper { public static GetNonAggregateVisualBinRange(dataBinRange: BinRange): VisualBinRange { if (dataBinRange instanceof NominalBinRange) { - return new NominalVisualBinRange(dataBinRange as NominalBinRange); + return new NominalVisualBinRange(dataBinRange); } else if (dataBinRange instanceof QuantitativeBinRange) { - return new QuantitativeVisualBinRange(dataBinRange as QuantitativeBinRange); + return new QuantitativeVisualBinRange(dataBinRange); } else if (dataBinRange instanceof AlphabeticBinRange) { - return new AlphabeticVisualBinRange(dataBinRange as AlphabeticBinRange); + return new AlphabeticVisualBinRange(dataBinRange); } else if (dataBinRange instanceof DateTimeBinRange) { - return new DateTimeVisualBinRange(dataBinRange as DateTimeBinRange); + return new DateTimeVisualBinRange(dataBinRange); } - throw new Exception() + throw new Exception(); } public static GetVisualBinRange(distinctAttributeParameters: AttributeParameters | undefined, dataBinRange: BinRange, histoResult: HistogramResult, attr: AttributeTransformationModel, chartType: ChartType): VisualBinRange { @@ -51,13 +51,13 @@ export class VisualBinRangeHelper { } } } - }; + } let visualBinRange = QuantitativeVisualBinRange.Initialize(minValue, maxValue, 10, false); if (chartType === ChartType.HorizontalBar || chartType === ChartType.VerticalBar) { visualBinRange = QuantitativeVisualBinRange.Initialize(Math.min(0, minValue), - Math.max(0, (visualBinRange as QuantitativeVisualBinRange).DataBinRange.maxValue!), + Math.max(0, (visualBinRange).DataBinRange.maxValue!), SETTINGS_X_BINS, false); } else if (chartType === ChartType.SinglePoint) { diff --git a/src/client/northstar/operations/BaseOperation.ts b/src/client/northstar/operations/BaseOperation.ts index a14337763..c6d5f0a15 100644 --- a/src/client/northstar/operations/BaseOperation.ts +++ b/src/client/northstar/operations/BaseOperation.ts @@ -1,4 +1,4 @@ -import { FilterModel } from '../core/filter/FilterModel' +import { FilterModel } from '../core/filter/FilterModel'; import { ErrorResult, Exception, OperationParameters, OperationReference, Result, ResultParameters } from '../model/idea/idea'; import { action, computed, observable } from "mobx"; import { Gateway } from '../manager/Gateway'; @@ -62,8 +62,9 @@ export abstract class BaseOperation { } let operationParameters = this.CreateOperationParameters(); - if (this.Result) - this.Result.progress = 0; // bcz: used to set Result to undefined, but that causes the display to blink + if (this.Result) { + this.Result.progress = 0; + } // bcz: used to set Result to undefined, but that causes the display to blink this.Error = ""; let salt = Math.random().toString(); this.RequestSalt = salt; @@ -97,7 +98,7 @@ export abstract class BaseOperation { pollPromise.Start(async () => { let result = await Gateway.Instance.GetResult(resultParameters.toJSON()); if (result instanceof ErrorResult) { - throw new Error((result as ErrorResult).message); + throw new Error((result).message); } if (this.RequestSalt === pollPromise.RequestSalt) { if (result && (!this.Result || this.Result.progress !== result.progress)) { diff --git a/src/client/northstar/operations/HistogramOperation.ts b/src/client/northstar/operations/HistogramOperation.ts index a3ddc1c98..760106023 100644 --- a/src/client/northstar/operations/HistogramOperation.ts +++ b/src/client/northstar/operations/HistogramOperation.ts @@ -62,7 +62,7 @@ export class HistogramOperation extends BaseOperation implements IBaseFilterCons @computed public get FilterString(): string { let filterModels: FilterModel[] = []; - return FilterModel.GetFilterModelsRecursive(this, new Set(), filterModels, true) + return FilterModel.GetFilterModelsRecursive(this, new Set(), filterModels, true); } @computed diff --git a/src/client/northstar/utils/ArrayUtil.ts b/src/client/northstar/utils/ArrayUtil.ts index a52ca6d96..12b8d8e77 100644 --- a/src/client/northstar/utils/ArrayUtil.ts +++ b/src/client/northstar/utils/ArrayUtil.ts @@ -50,7 +50,7 @@ export class ArrayUtil { if (filtered.length > 0) { return filtered[0]; } - throw new Exception() + throw new Exception(); } public static FirstOrDefault(arr: T[], predicate: (x: any) => boolean): T | undefined { diff --git a/src/client/northstar/utils/Extensions.ts b/src/client/northstar/utils/Extensions.ts index 7c2b7fc9d..df14d4da0 100644 --- a/src/client/northstar/utils/Extensions.ts +++ b/src/client/northstar/utils/Extensions.ts @@ -6,7 +6,7 @@ interface String { String.prototype.ReplaceAll = function (toReplace: string, replacement: string): string { var target = this; return target.split(toReplace).join(replacement); -} +}; String.prototype.Truncate = function (length: number, replacement: string): String { var target = this; @@ -14,7 +14,7 @@ String.prototype.Truncate = function (length: number, replacement: string): Stri target = target.slice(0, Math.max(0, length - replacement.length)) + replacement; } return target; -} +}; interface Math { log10(val: number): number; @@ -22,7 +22,7 @@ interface Math { Math.log10 = function (val: number): number { return Math.log(val) / Math.LN10; -} +}; declare interface ObjectConstructor { assign(...objects: Object[]): Object; diff --git a/src/client/northstar/utils/GeometryUtil.ts b/src/client/northstar/utils/GeometryUtil.ts index 6d8acea20..d5220c479 100644 --- a/src/client/northstar/utils/GeometryUtil.ts +++ b/src/client/northstar/utils/GeometryUtil.ts @@ -8,15 +8,19 @@ export class GeometryUtil { let minY: number = Number.MAX_VALUE; let maxX: number = Number.MIN_VALUE; let maxY: number = Number.MIN_VALUE; - for (var i = 0; i < points.length; i++) { - if (points[i].x < minX) - minX = points[i].x; - if (points[i].y < minY) - minY = points[i].y; - if (points[i].x > maxX) - maxX = points[i].x; - if (points[i].y > maxY) - maxY = points[i].y; + for (const point of points) { + if (point.x < minX) { + minX = point.x; + } + if (point.y < minY) { + minY = point.y; + } + if (point.x > maxX) { + maxX = point.x; + } + if (point.y > maxY) { + maxY = point.y; + } } return new PIXIRectangle(minX * scale - padding, minY * scale - padding, (maxX - minX) * scale + padding * 2, (maxY - minY) * scale + padding * 2); } @@ -35,7 +39,7 @@ export class GeometryUtil { nx = (cos * (x - cx)) + (sin * (y - cy)) + cx, ny = (cos * (y - cy)) - (sin * (x - cx)) + cy; return new PIXIPoint(nx, ny); - } + }; return points.map(p => rotate(center.x, center.y, p.x, p.y, angle)); } @@ -54,9 +58,9 @@ export class GeometryUtil { return []; } - for (let v = 0; v < points.length; v++) { - x = points[v].x; - y = points[v].y; + for (const point of points) { + x = point.x; + y = point.y; sum_x += x; sum_y += y; sum_xx += x * x; @@ -68,8 +72,8 @@ export class GeometryUtil { let b = (sum_y / count) - (m * sum_x) / count; let result: PIXIPoint[] = new Array(); - for (let v = 0; v < points.length; v++) { - x = points[v].x; + for (const point of points) { + x = point.x; y = x * m + b; result.push(new PIXIPoint(x, y)); } diff --git a/src/client/northstar/utils/MathUtil.ts b/src/client/northstar/utils/MathUtil.ts index 7aa255096..4b44f40c3 100644 --- a/src/client/northstar/utils/MathUtil.ts +++ b/src/client/northstar/utils/MathUtil.ts @@ -16,11 +16,11 @@ export class PIXIRectangle { public x: number; public y: number; public width: number; - public height: number - public get left() { return this.x } + public height: number; + public get left() { return this.x; } public get right() { return this.x + this.width; } - public get top() { return this.y } - public get bottom() { return this.top + this.height } + public get top() { return this.y; } + public get bottom() { return this.top + this.height; } public static get EMPTY() { return new PIXIRectangle(0, 0, -1, -1); } constructor(x: number, y: number, width: number, height: number) { this.x = x; @@ -127,14 +127,18 @@ export class MathUtil { } public static PointInPIXIRectangle(p: PIXIPoint, rect: PIXIRectangle): boolean { - if (p.x < rect.left - this.EPSILON) + if (p.x < rect.left - this.EPSILON) { return false; - if (p.x > rect.right + this.EPSILON) + } + if (p.x > rect.right + this.EPSILON) { return false; - if (p.y < rect.top - this.EPSILON) + } + if (p.y < rect.top - this.EPSILON) { return false; - if (p.y > rect.bottom + this.EPSILON) + } + if (p.y > rect.bottom + this.EPSILON) { return false; + } return true; } @@ -145,23 +149,27 @@ export class MathUtil { var r3 = new PIXIPoint(rect.right, rect.bottom); var r4 = new PIXIPoint(rect.left, rect.bottom); var ret = new Array(); - var dist = this.Dist(lineFrom, lineTo) + var dist = this.Dist(lineFrom, lineTo); var inter = this.LineSegmentIntersection(lineFrom, lineTo, r1, r2); if (inter && this.PointInPIXIRectangle(inter, rect) && - this.Dist(inter, lineFrom) < dist && this.Dist(inter, lineTo) < dist) + this.Dist(inter, lineFrom) < dist && this.Dist(inter, lineTo) < dist) { ret.push(inter); + } inter = this.LineSegmentIntersection(lineFrom, lineTo, r2, r3); if (inter && this.PointInPIXIRectangle(inter, rect) && - this.Dist(inter, lineFrom) < dist && this.Dist(inter, lineTo) < dist) + this.Dist(inter, lineFrom) < dist && this.Dist(inter, lineTo) < dist) { ret.push(inter); + } inter = this.LineSegmentIntersection(lineFrom, lineTo, r3, r4); if (inter && this.PointInPIXIRectangle(inter, rect) && - this.Dist(inter, lineFrom) < dist && this.Dist(inter, lineTo) < dist) + this.Dist(inter, lineFrom) < dist && this.Dist(inter, lineTo) < dist) { ret.push(inter); + } inter = this.LineSegmentIntersection(lineFrom, lineTo, r4, r1); if (inter && this.PointInPIXIRectangle(inter, rect) && - this.Dist(inter, lineFrom) < dist && this.Dist(inter, lineTo) < dist) + this.Dist(inter, lineFrom) < dist && this.Dist(inter, lineTo) < dist) { ret.push(inter); + } return ret; } @@ -178,7 +186,7 @@ export class MathUtil { } public static Dot(p1: PIXIPoint, p2: PIXIPoint): number { - return p1.x * p2.x + p1.y * p2.y + return p1.x * p2.x + p1.y * p2.y; } public static Normalize(p1: PIXIPoint) { @@ -193,7 +201,7 @@ export class MathUtil { public static DistSquared(p1: PIXIPoint, p2: PIXIPoint): number { const a = p1.x - p2.x; const b = p1.y - p2.y; - return (a * a + b * b) + return (a * a + b * b); } public static RectIntersectsRect(r1: PIXIRectangle, r2: PIXIRectangle): boolean { diff --git a/src/client/northstar/utils/SizeConverter.ts b/src/client/northstar/utils/SizeConverter.ts index b5c4a16ab..a52890ed9 100644 --- a/src/client/northstar/utils/SizeConverter.ts +++ b/src/client/northstar/utils/SizeConverter.ts @@ -32,8 +32,8 @@ export class SizeConverter { this.Initialized++; var xLabels = visualBinRanges[0].GetLabels(); var yLabels = visualBinRanges[1].GetLabels(); - var xLabelStrings = xLabels.map(l => l.label!).sort(function (a, b) { return b.length - a.length }); - var yLabelStrings = yLabels.map(l => l.label!).sort(function (a, b) { return b.length - a.length }); + var xLabelStrings = xLabels.map(l => l.label!).sort(function (a, b) { return b.length - a.length; }); + var yLabelStrings = yLabels.map(l => l.label!).sort(function (a, b) { return b.length - a.length; }); var metricsX = { width: 75 }; // RenderUtils.MeasureText(FontStyles.Default.fontFamily.toString(), 12, // FontStyles.AxisLabel.fontSize as number, //xLabelStrings[0]!.slice(0, 20)) // StyleConstants.MAX_CHAR_FOR_HISTOGRAM_LABELS)); @@ -62,19 +62,20 @@ export class SizeConverter { public DataToScreenPointRange(axis: number, bin: Bin, aggregateKey: AggregateKey) { var value = ModelHelpers.GetAggregateResult(bin, aggregateKey) as DoubleValueAggregateResult; - if (value && value.hasResult) + if (value && value.hasResult) { return [this.DataToScreenCoord(value.result!, axis) - 5, this.DataToScreenCoord(value.result!, axis) + 5]; + } return [undefined, undefined]; } public DataToScreenXAxisRange(visualBinRanges: VisualBinRange[], index: number, bin: Bin) { var value = visualBinRanges[0].GetValueFromIndex(bin.binIndex!.indices![index]); - return [this.DataToScreenX(value), this.DataToScreenX(visualBinRanges[index].AddStep(value))] + return [this.DataToScreenX(value), this.DataToScreenX(visualBinRanges[index].AddStep(value))]; } public DataToScreenYAxisRange(visualBinRanges: VisualBinRange[], index: number, bin: Bin) { var value = visualBinRanges[1].GetValueFromIndex(bin.binIndex!.indices![index]); - return [this.DataToScreenY(value), this.DataToScreenY(visualBinRanges[index].AddStep(value))] + return [this.DataToScreenY(value), this.DataToScreenY(visualBinRanges[index].AddStep(value))]; } public DataToScreenX(x: number): number { @@ -85,8 +86,9 @@ export class SizeConverter { return flip ? (this.RenderDimension) - retY : retY; } public DataToScreenCoord(v: number, axis: number) { - if (axis === 0) + if (axis === 0) { return this.DataToScreenX(v); + } return this.DataToScreenY(v); } public DataToScreenRange(minVal: number, maxVal: number, axis: number) { @@ -94,6 +96,6 @@ export class SizeConverter { let xTo = this.DataToScreenX(axis === 0 ? maxVal : this.DataMaxs[0]); let yFrom = this.DataToScreenY(axis === 1 ? minVal : this.DataMins[1]); let yTo = this.DataToScreenY(axis === 1 ? maxVal : this.DataMaxs[1]); - return { xFrom, yFrom, xTo, yTo } + return { xFrom, yFrom, xTo, yTo }; } } \ No newline at end of file diff --git a/src/client/northstar/utils/StyleContants.ts b/src/client/northstar/utils/StyleContants.ts index ac8617e3b..e9b6e0297 100644 --- a/src/client/northstar/utils/StyleContants.ts +++ b/src/client/northstar/utils/StyleContants.ts @@ -11,7 +11,7 @@ export class StyleConstants { static OPERATOR_MENU_LARGE: number = 35; static OPERATOR_MENU_SMALL: number = 25; - static BRUSH_PALETTE: number[] = [0x42b43c, 0xfa217f, 0x6a9c75, 0xfb5de7, 0x25b8ea, 0x9b5bc4, 0xda9f63, 0xe23209, 0xfb899b, 0x94a6fd] + static BRUSH_PALETTE: number[] = [0x42b43c, 0xfa217f, 0x6a9c75, 0xfb5de7, 0x25b8ea, 0x9b5bc4, 0xda9f63, 0xe23209, 0xfb899b, 0x94a6fd]; static GAP: number = 3; static BACKGROUND_COLOR: number = 0xF3F3F3; diff --git a/src/client/northstar/utils/Utils.ts b/src/client/northstar/utils/Utils.ts index c96b4cbd9..d071dec62 100644 --- a/src/client/northstar/utils/Utils.ts +++ b/src/client/northstar/utils/Utils.ts @@ -1,7 +1,7 @@ -import { IBaseBrushable } from '../core/brusher/IBaseBrushable' -import { IBaseFilterConsumer } from '../core/filter/IBaseFilterConsumer' -import { IBaseFilterProvider } from '../core/filter/IBaseFilterProvider' -import { AggregateFunction } from '../model/idea/idea' +import { IBaseBrushable } from '../core/brusher/IBaseBrushable'; +import { IBaseFilterConsumer } from '../core/filter/IBaseFilterConsumer'; +import { IBaseFilterProvider } from '../core/filter/IBaseFilterProvider'; +import { AggregateFunction } from '../model/idea/idea'; export class Utils { diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index fb489edb6..f38b8ca75 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -1,7 +1,7 @@ -import React = require('react') +import React = require('react'); import { observer } from 'mobx-react'; import { observable, action, computed } from 'mobx'; -import { Document } from "../../fields/Document" +import { Document } from "../../fields/Document"; import { DocumentView } from '../views/nodes/DocumentView'; import { KeyStore } from '../../fields/KeyStore'; import { FieldWaiting } from '../../fields/Field'; @@ -50,7 +50,7 @@ export class DocumentManager { if (docSrc && docSrc !== FieldWaiting && Object.is(docSrc, toFind)) { toReturn = view; } - }) + }); return (toReturn); } @@ -71,7 +71,7 @@ export class DocumentManager { toReturn.push(view); } } - }) + }); return (toReturn); } @@ -86,8 +86,8 @@ export class DocumentManager { let linkToDoc = link.GetT(KeyStore.LinkedToDocs, Document); if (linkToDoc && linkToDoc !== FieldWaiting) { DocumentManager.Instance.getDocumentViews(linkToDoc).map(docView1 => { - pairs.push({ a: dv, b: docView1, l: link }) - }) + pairs.push({ a: dv, b: docView1, l: link }); + }); } } return pairs; diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index f95b2c29d..4849ae9f7 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -103,7 +103,7 @@ export namespace DragManager { element.addEventListener("dashOnDrop", handler); return () => { element.removeEventListener("dashOnDrop", handler); - delete element.dataset.canDrop + delete element.dataset.canDrop; }; } @@ -216,8 +216,9 @@ export namespace DragManager { const moveHandler = (e: PointerEvent) => { e.stopPropagation(); e.preventDefault(); - if (dragData instanceof DocumentDragData) + if (dragData instanceof DocumentDragData) { dragData.aliasOnDrop = e.ctrlKey || e.altKey; + } if (e.shiftKey) { abortDrag(); CollectionDockingView.Instance.StartOtherDrag(docs, { diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 2a3c1da6e..92944bec0 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -1,13 +1,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Schema, NodeSpec, MarkSpec, DOMOutputSpecArray, NodeType } from "prosemirror-model" -import { joinUp, lift, setBlockType, toggleMark, wrapIn } from 'prosemirror-commands' -import { redo, undo } from 'prosemirror-history' -import { orderedList, bulletList, listItem, } from 'prosemirror-schema-list' +import { Schema, NodeSpec, MarkSpec, DOMOutputSpecArray, NodeType } from "prosemirror-model"; +import { joinUp, lift, setBlockType, toggleMark, wrapIn } from 'prosemirror-commands'; +import { redo, undo } from 'prosemirror-history'; +import { orderedList, bulletList, listItem, } from 'prosemirror-schema-list'; import { EditorState, Transaction, NodeSelection, } from "prosemirror-state"; import { EditorView, } from "prosemirror-view"; const pDOM: DOMOutputSpecArray = ["p", 0], blockquoteDOM: DOMOutputSpecArray = ["blockquote", 0], hrDOM: DOMOutputSpecArray = ["hr"], - preDOM: DOMOutputSpecArray = ["pre", ["code", 0]], brDOM: DOMOutputSpecArray = ["br"], ulDOM: DOMOutputSpecArray = ["ul", 0] + preDOM: DOMOutputSpecArray = ["pre", ["code", 0]], brDOM: DOMOutputSpecArray = ["br"], ulDOM: DOMOutputSpecArray = ["ul", 0]; // :: Object @@ -24,7 +24,7 @@ export const nodes: { [index: string]: NodeSpec } = { content: "inline*", group: "block", parseDOM: [{ tag: "p" }], - toDOM() { return pDOM } + toDOM() { return pDOM; } }, // :: NodeSpec A blockquote (`
`) wrapping one or more blocks. @@ -33,14 +33,14 @@ export const nodes: { [index: string]: NodeSpec } = { group: "block", defining: true, parseDOM: [{ tag: "blockquote" }], - toDOM() { return blockquoteDOM } + toDOM() { return blockquoteDOM; } }, // :: NodeSpec A horizontal rule (`
`). horizontal_rule: { group: "block", parseDOM: [{ tag: "hr" }], - toDOM() { return hrDOM } + toDOM() { return hrDOM; } }, // :: NodeSpec A heading textblock, with a `level` attribute that @@ -57,7 +57,7 @@ export const nodes: { [index: string]: NodeSpec } = { { tag: "h4", attrs: { level: 4 } }, { tag: "h5", attrs: { level: 5 } }, { tag: "h6", attrs: { level: 6 } }], - toDOM(node: any) { return ["h" + node.attrs.level, 0] } + toDOM(node: any) { return ["h" + node.attrs.level, 0]; } }, // :: NodeSpec A code listing. Disallows marks or non-text inline @@ -70,7 +70,7 @@ export const nodes: { [index: string]: NodeSpec } = { code: true, defining: true, parseDOM: [{ tag: "pre", preserveWhitespace: "full" }], - toDOM() { return preDOM } + toDOM() { return preDOM; } }, // :: NodeSpec The text node. @@ -96,10 +96,10 @@ export const nodes: { [index: string]: NodeSpec } = { src: dom.getAttribute("src"), title: dom.getAttribute("title"), alt: dom.getAttribute("alt") - } + }; } }], - toDOM(node: any) { return ["img", node.attrs] } + toDOM(node: any) { return ["img", node.attrs]; } }, // :: NodeSpec A hard line break, represented in the DOM as `
`. @@ -108,7 +108,7 @@ export const nodes: { [index: string]: NodeSpec } = { group: "inline", selectable: false, parseDOM: [{ tag: "br" }], - toDOM() { return brDOM } + toDOM() { return brDOM; } }, ordered_list: { @@ -136,7 +136,7 @@ export const nodes: { [index: string]: NodeSpec } = { ...listItem, content: 'paragraph block*' } -} +}; const emDOM: DOMOutputSpecArray = ["em", 0]; const strongDOM: DOMOutputSpecArray = ["strong", 0]; @@ -156,17 +156,17 @@ export const marks: { [index: string]: MarkSpec } = { inclusive: false, parseDOM: [{ tag: "a[href]", getAttrs(dom: any) { - return { href: dom.getAttribute("href"), title: dom.getAttribute("title") } + return { href: dom.getAttribute("href"), title: dom.getAttribute("title") }; } }], - toDOM(node: any) { return ["a", node.attrs, 0] } + toDOM(node: any) { return ["a", node.attrs, 0]; } }, // :: MarkSpec An emphasis mark. Rendered as an `` element. // Has parse rules that also match `` and `font-style: italic`. em: { parseDOM: [{ tag: "i" }, { tag: "em" }, { style: "font-style=italic" }], - toDOM() { return emDOM } + toDOM() { return emDOM; } }, // :: MarkSpec A strong mark. Rendered as ``, parse rules @@ -175,7 +175,7 @@ export const marks: { [index: string]: MarkSpec } = { parseDOM: [{ tag: "strong" }, { tag: "b" }, { style: "font-weight" }], - toDOM() { return strongDOM } + toDOM() { return strongDOM; } }, underline: { @@ -221,9 +221,9 @@ export const marks: { [index: string]: MarkSpec } = { // :: MarkSpec Code font mark. Represented as a `` element. code: { parseDOM: [{ tag: "code" }], - toDOM() { return codeDOM } + toDOM() { return codeDOM; } } -} +}; // :: Schema // This schema rougly corresponds to the document schema used by @@ -233,4 +233,4 @@ export const marks: { [index: string]: MarkSpec } = { // // To reuse elements from this schema, extend or read from its // `spec.nodes` and `spec.marks` [properties](#model.Schema.spec). -export const schema = new Schema({ nodes, marks }) \ No newline at end of file +export const schema = new Schema({ nodes, marks }); \ No newline at end of file diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts index bf9b8266f..468484928 100644 --- a/src/client/util/Scripting.ts +++ b/src/client/util/Scripting.ts @@ -14,7 +14,7 @@ import { ListField } from "../../fields/ListField"; // import * as typescriptes5 from '!!raw-loader!../../../node_modules/typescript/lib/lib.es5.d.ts' // @ts-ignore -import * as typescriptlib from '!!raw-loader!./type_decls.d' +import * as typescriptlib from '!!raw-loader!./type_decls.d'; import { Documents } from "../documents/Documents"; import { Key } from "../../fields/Key"; @@ -50,7 +50,7 @@ function Run(script: string | undefined, customParams: string[], diagnostics: an let fieldTypes = [Document, NumberField, TextField, ImageField, RichTextField, ListField, Key]; let paramNames = ["KeyStore", "Documents", ...fieldTypes.map(fn => fn.name)]; - let params: any[] = [KeyStore, Documents, ...fieldTypes] + let params: any[] = [KeyStore, Documents, ...fieldTypes]; let compiledFunction = new Function(...paramNames, `return ${script}`); let run = (args: { [name: string]: any } = {}): ScriptResult => { let argsArray: any[] = []; @@ -67,7 +67,7 @@ function Run(script: string | undefined, customParams: string[], diagnostics: an } catch (error) { return { success: false, error }; } - } + }; return { compiled: true, run }; } @@ -90,14 +90,14 @@ class ScriptingCompilerHost { } // getDefaultLibFileName(options: ts.CompilerOptions): string { getDefaultLibFileName(options: any): string { - return 'node_modules/typescript/lib/lib.d.ts' // No idea what this means... + return 'node_modules/typescript/lib/lib.d.ts'; // No idea what this means... } writeFile(fileName: string, content: string) { const file = this.files.find(file => file.fileName === fileName); if (file) { file.content = content; } else { - this.files.push({ fileName, content }) + this.files.push({ fileName, content }); } } getCurrentDirectory(): string { diff --git a/src/client/util/ScrollBox.tsx b/src/client/util/ScrollBox.tsx index b6b088170..a209874a3 100644 --- a/src/client/util/ScrollBox.tsx +++ b/src/client/util/ScrollBox.tsx @@ -1,4 +1,4 @@ -import React = require("react") +import React = require("react"); export class ScrollBox extends React.Component { onWheel = (e: React.WheelEvent) => { @@ -16,6 +16,6 @@ export class ScrollBox extends React.Component { }} onWheel={this.onWheel}> {this.props.children} - ) + ); } } \ No newline at end of file diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 1bb15c86a..5ddaafc72 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -23,7 +23,7 @@ export namespace SelectionManager { @action DeselectAll(): void { - manager.SelectedDocuments.map(dv => dv.props.onActiveChanged(false)) + manager.SelectedDocuments.map(dv => dv.props.onActiveChanged(false)); manager.SelectedDocuments = []; } } @@ -46,7 +46,7 @@ export namespace SelectionManager { } } - manager.DeselectAll() + manager.DeselectAll(); if (found) manager.SelectDoc(found, false); Main.Instance.SetTextDoc(undefined, undefined); } diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 913472aa0..bd5753093 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -5,12 +5,12 @@ import { keymap } from "prosemirror-keymap"; import { EditorState, Transaction, NodeSelection } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; import { schema } from "./RichTextSchema"; -import { Schema, NodeType } from "prosemirror-model" -import React = require("react") +import { Schema, NodeType } from "prosemirror-model"; +import React = require("react"); import "./TooltipTextMenu.scss"; const { toggleMark, setBlockType, wrapIn } = require("prosemirror-commands"); -import { library } from '@fortawesome/fontawesome-svg-core' -import { wrapInList, bulletList } from 'prosemirror-schema-list' +import { library } from '@fortawesome/fontawesome-svg-core'; +import { wrapInList, bulletList } from 'prosemirror-schema-list'; import { faListUl } from '@fortawesome/free-solid-svg-icons'; @@ -39,7 +39,7 @@ export class TooltipTextMenu { { command: toggleMark(schema.marks.subscript), dom: this.icon("s", "subscript") }, //this doesn't work currently - look into notion of active block { command: wrapInList(schema.nodes.bullet_list), dom: this.icon(":", "bullets") }, - ] + ]; items.forEach(({ dom }) => this.tooltip.appendChild(dom)); //pointer down handler to activate button effects @@ -52,8 +52,8 @@ export class TooltipTextMenu { //uncomment this if we want the bullet button to disappear if current selection is bulleted // dom.style.display = active ? "" : "none" } - }) - }) + }); + }); this.update(view, undefined); } @@ -99,32 +99,32 @@ export class TooltipTextMenu { return { command: setBlockType(schema.nodes.heading, { level }), dom: this.icon("H" + level, "heading") - } + }; } //updates the tooltip menu when the selection changes update(view: EditorView, lastState: EditorState | undefined) { - let state = view.state + let state = view.state; // Don't do anything if the document/selection didn't change if (lastState && lastState.doc.eq(state.doc) && - lastState.selection.eq(state.selection)) return + lastState.selection.eq(state.selection)) return; // Hide the tooltip if the selection is empty if (state.selection.empty) { - this.tooltip.style.display = "none" - return + this.tooltip.style.display = "none"; + return; } // Otherwise, reposition it and update its content - this.tooltip.style.display = "" - let { from, to } = state.selection - let start = view.coordsAtPos(from), end = view.coordsAtPos(to) + this.tooltip.style.display = ""; + let { from, to } = state.selection; + let start = view.coordsAtPos(from), end = view.coordsAtPos(to); // The box in which the tooltip is positioned, to use as base - let box = this.tooltip.offsetParent!.getBoundingClientRect() + let box = this.tooltip.offsetParent!.getBoundingClientRect(); // Find a center-ish x position from the selection endpoints (when // crossing lines, end may be more to the left) - let left = Math.max((start.left + end.left) / 2, start.left + 3) - this.tooltip.style.left = (left - box.left) + "px" + let left = Math.max((start.left + end.left) / 2, start.left + 3); + this.tooltip.style.left = (left - box.left) + "px"; let width = Math.abs(start.left - end.left) / 2; let mid = Math.min(start.left, end.left) + width; @@ -133,5 +133,5 @@ export class TooltipTextMenu { this.tooltip.style.bottom = (box.bottom - start.top) + "px"; } - destroy() { this.tooltip.remove() } + destroy() { this.tooltip.remove(); } } \ No newline at end of file diff --git a/src/client/util/Transform.ts b/src/client/util/Transform.ts index ed4282874..e9170ec36 100644 --- a/src/client/util/Transform.ts +++ b/src/client/util/Transform.ts @@ -62,19 +62,19 @@ export class Transform { return this; } - translated = (x: number, y: number): Transform => this.copy().translate(x, y) + translated = (x: number, y: number): Transform => this.copy().translate(x, y); - preTranslated = (x: number, y: number): Transform => this.copy().preTranslate(x, y) + preTranslated = (x: number, y: number): Transform => this.copy().preTranslate(x, y); - scaled = (scale: number): Transform => this.copy().scale(scale) + scaled = (scale: number): Transform => this.copy().scale(scale); - scaledAbout = (scale: number, x: number, y: number): Transform => this.copy().scaleAbout(scale, x, y) + scaledAbout = (scale: number, x: number, y: number): Transform => this.copy().scaleAbout(scale, x, y); - preScaled = (scale: number): Transform => this.copy().preScale(scale) + preScaled = (scale: number): Transform => this.copy().preScale(scale); - transformed = (transform: Transform): Transform => this.copy().transform(transform) + transformed = (transform: Transform): Transform => this.copy().transform(transform); - preTransformed = (transform: Transform): Transform => this.copy().preTransform(transform) + preTransformed = (transform: Transform): Transform => this.copy().preTransform(transform); transformPoint = (x: number, y: number): [number, number] => { x *= this._scale; @@ -84,7 +84,7 @@ export class Transform { return [x, y]; } - transformDirection = (x: number, y: number): [number, number] => [x * this._scale, y * this._scale] + transformDirection = (x: number, y: number): [number, number] => [x * this._scale, y * this._scale]; transformBounds(x: number, y: number, width: number, height: number): { x: number, y: number, width: number, height: number } { [x, y] = this.transformPoint(x, y); @@ -92,8 +92,8 @@ export class Transform { return { x, y, width, height }; } - inverse = () => new Transform(-this._translateX / this._scale, -this._translateY / this._scale, 1 / this._scale) + inverse = () => new Transform(-this._translateX / this._scale, -this._translateY / this._scale, 1 / this._scale); - copy = () => new Transform(this._translateX, this._translateY, this._scale) + copy = () => new Transform(this._translateX, this._translateY, this._scale); } \ No newline at end of file diff --git a/src/client/util/TypedEvent.ts b/src/client/util/TypedEvent.ts index 1b251da25..532ba78eb 100644 --- a/src/client/util/TypedEvent.ts +++ b/src/client/util/TypedEvent.ts @@ -36,5 +36,5 @@ export class TypedEvent { this.listenersOncer = []; } - pipe = (te: TypedEvent): Disposable => this.on((e) => te.emit(e)) + pipe = (te: TypedEvent): Disposable => this.on((e) => te.emit(e)); } \ No newline at end of file diff --git a/src/client/util/UndoManager.ts b/src/client/util/UndoManager.ts index b4ea4acae..27aed4bac 100644 --- a/src/client/util/UndoManager.ts +++ b/src/client/util/UndoManager.ts @@ -1,5 +1,5 @@ import { observable, action } from "mobx"; -import 'source-map-support/register' +import 'source-map-support/register'; import { Without } from "../../Utils"; import { string } from "prop-types"; @@ -31,9 +31,9 @@ function propertyDecorator(target: any, key: string | symbol) { batch.end(); } } - }) + }); } - }) + }); } export function undoBatch(target: any, key: string | symbol, descriptor?: TypedPropertyDescriptor): any; @@ -43,11 +43,11 @@ export function undoBatch(target: any, key?: string | symbol, descriptor?: Typed return function () { let batch = UndoManager.StartBatch(""); try { - return target.apply(undefined, arguments) + return target.apply(undefined, arguments); } finally { batch.end(); } - } + }; } if (!descriptor) { propertyDecorator(target, key); @@ -58,11 +58,11 @@ export function undoBatch(target: any, key?: string | symbol, descriptor?: Typed descriptor.value = function (...args: any[]) { let batch = UndoManager.StartBatch(getBatchName(target, key)); try { - return oldFunction.apply(this, args) + return oldFunction.apply(this, args); } finally { batch.end(); } - } + }; return descriptor; } @@ -117,8 +117,8 @@ export namespace UndoManager { EndBatch(cancel); } - end = () => { this.dispose(false); } - cancel = () => { this.dispose(true); } + end = () => { this.dispose(false); }; + cancel = () => { this.dispose(true); }; } export function StartBatch(batchName: string): Batch { @@ -138,7 +138,7 @@ export namespace UndoManager { redoStack.length = 0; currentBatch = undefined; } - }) + }); export function RunInBatch(fn: () => void, batchName: string) { let batch = StartBatch(batchName); @@ -166,7 +166,7 @@ export namespace UndoManager { undoing = false; redoStack.push(commands); - }) + }); export const Redo = action(() => { if (redoStack.length === 0) { @@ -185,6 +185,6 @@ export namespace UndoManager { undoing = false; undoStack.push(commands); - }) + }); } \ No newline at end of file diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index cfa8ea7b7..615a928ad 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -2,11 +2,11 @@ import React = require("react"); import { ContextMenuItem, ContextMenuProps } from "./ContextMenuItem"; import { observable, action } from "mobx"; import { observer } from "mobx-react"; -import "./ContextMenu.scss" +import "./ContextMenu.scss"; @observer export class ContextMenu extends React.Component { - static Instance: ContextMenu + static Instance: ContextMenu; @observable private _items: Array = [{ description: "test", event: (e: React.MouseEvent) => e.preventDefault() }]; @observable private _pageX: number = 0; @@ -22,15 +22,15 @@ export class ContextMenu extends React.Component { constructor(props: Readonly<{}>) { super(props); - this.ref = React.createRef() + this.ref = React.createRef(); ContextMenu.Instance = this; } @action clearItems() { - this._items = [] - this._display = "none" + this._items = []; + this._display = "none"; } @action @@ -56,7 +56,7 @@ export class ContextMenu extends React.Component { this._searchString = ""; - this._display = "flex" + this._display = "flex"; } intersects = (x: number, y: number): boolean => { @@ -86,7 +86,7 @@ export class ContextMenu extends React.Component { {this._items.filter(prop => prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1). map(prop => )} - ) + ); } @action diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx index 4801c1555..70813f0dd 100644 --- a/src/client/views/ContextMenuItem.tsx +++ b/src/client/views/ContextMenuItem.tsx @@ -11,7 +11,7 @@ export interface SubmenuProps { } export interface ContextMenuItemProps { - type: ContextMenuProps | SubmenuProps + type: ContextMenuProps | SubmenuProps; } export class ContextMenuItem extends React.Component { @@ -20,6 +20,6 @@ export class ContextMenuItem extends React.Component {
{this.props.description}
- ) + ); } } \ No newline at end of file diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 285d145a2..b29fb6a2b 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -21,8 +21,8 @@ export const Flyout = higflyout.default; @observer export class DocumentDecorations extends React.Component<{}, { value: string }> { - static Instance: DocumentDecorations - private _resizer = "" + static Instance: DocumentDecorations; + private _resizer = ""; private _isPointerDown = false; private keyinput: React.RefObject; private _documents: DocumentView[] = SelectionManager.SelectedDocuments(); @@ -40,8 +40,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> constructor(props: Readonly<{}>) { - super(props) - DocumentDecorations.Instance = this + super(props); + DocumentDecorations.Instance = this; this.handleChange = this.handleChange.bind(this); this.keyinput = React.createRef(); } @@ -49,7 +49,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> @action handleChange = (event: any) => { this._title = event.target.value; - }; + } @action enterPressed = (e: any) => { @@ -59,14 +59,14 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> var text = e.target.value; if (text[0] === '#') { let command = text.slice(1, text.length); - this._fieldKey = new Key(command) + this._fieldKey = new Key(command); // if (command === "Title" || command === "title") { // this._fieldKey = KeyStore.Title; // } // else if (command === "Width" || command === "width") { // this._fieldKey = KeyStore.Width; // } - this._title = "changed" + this._title = "changed"; // TODO: Change field with switch statement } else { @@ -89,7 +89,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> return { x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y), r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b) - } + }; }, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE }); } @@ -104,7 +104,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> document.addEventListener("pointermove", this.onBackgroundMove); document.removeEventListener("pointerup", this.onBackgroundUp); document.addEventListener("pointerup", this.onBackgroundUp); - this._lastDrag = [e.clientX, e.clientY] + this._lastDrag = [e.clientX, e.clientY]; e.stopPropagation(); e.preventDefault(); } @@ -127,7 +127,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> dragComplete: action(() => this._dragging = false), }, hideSource: true - }) + }); e.stopPropagation(); } @@ -199,53 +199,53 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> onLinkerButtonDown = (e: React.PointerEvent): void => { e.stopPropagation(); - document.removeEventListener("pointermove", this.onLinkerButtonMoved) + document.removeEventListener("pointermove", this.onLinkerButtonMoved); document.addEventListener("pointermove", this.onLinkerButtonMoved); - document.removeEventListener("pointerup", this.onLinkerButtonUp) + document.removeEventListener("pointerup", this.onLinkerButtonUp); document.addEventListener("pointerup", this.onLinkerButtonUp); } onLinkerButtonUp = (e: PointerEvent): void => { - document.removeEventListener("pointermove", this.onLinkerButtonMoved) - document.removeEventListener("pointerup", this.onLinkerButtonUp) + document.removeEventListener("pointermove", this.onLinkerButtonMoved); + document.removeEventListener("pointerup", this.onLinkerButtonUp); e.stopPropagation(); } onLinkerButtonMoved = (e: PointerEvent): void => { if (this._linkerButton.current !== null) { - document.removeEventListener("pointermove", this.onLinkerButtonMoved) - document.removeEventListener("pointerup", this.onLinkerButtonUp) + document.removeEventListener("pointermove", this.onLinkerButtonMoved); + document.removeEventListener("pointerup", this.onLinkerButtonUp); let dragData = new DragManager.LinkDragData(SelectionManager.SelectedDocuments()[0]); DragManager.StartLinkDrag(this._linkerButton.current, dragData, e.pageX, e.pageY, { handlers: { dragComplete: action(() => { }), }, hideSource: false - }) + }); } e.stopPropagation(); } onLinkButtonDown = (e: React.PointerEvent): void => { e.stopPropagation(); - document.removeEventListener("pointermove", this.onLinkButtonMoved) + document.removeEventListener("pointermove", this.onLinkButtonMoved); document.addEventListener("pointermove", this.onLinkButtonMoved); - document.removeEventListener("pointerup", this.onLinkButtonUp) + document.removeEventListener("pointerup", this.onLinkButtonUp); document.addEventListener("pointerup", this.onLinkButtonUp); } onLinkButtonUp = (e: PointerEvent): void => { - document.removeEventListener("pointermove", this.onLinkButtonMoved) - document.removeEventListener("pointerup", this.onLinkButtonUp) + document.removeEventListener("pointermove", this.onLinkButtonMoved); + document.removeEventListener("pointerup", this.onLinkButtonUp); e.stopPropagation(); } onLinkButtonMoved = async (e: PointerEvent) => { if (this._linkButton.current !== null) { - document.removeEventListener("pointermove", this.onLinkButtonMoved) + document.removeEventListener("pointermove", this.onLinkButtonMoved); document.removeEventListener("pointerup", this.onLinkButtonUp); let sourceDoc = SelectionManager.SelectedDocuments()[0].props.Document; - let srcTarg = sourceDoc.GetT(KeyStore.Prototype, Document) + let srcTarg = sourceDoc.GetT(KeyStore.Prototype, Document); let draggedDocs = (srcTarg && srcTarg !== FieldWaiting) ? srcTarg.GetList(KeyStore.LinkedToDocs, [] as Document[]).map(linkDoc => (linkDoc.GetT(KeyStore.LinkedToDocs, Document)) as Document) : []; @@ -265,7 +265,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> dragComplete: action(() => { }), }, hideSource: false - }) + }); } } e.stopPropagation(); @@ -285,38 +285,38 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> case "": break; case "documentDecorations-topLeftResizer": - dX = -1 - dY = -1 - dW = -(e.movementX) - dH = -(e.movementY) + dX = -1; + dY = -1; + dW = -(e.movementX); + dH = -(e.movementY); break; case "documentDecorations-topRightResizer": - dW = e.movementX - dY = -1 - dH = -(e.movementY) + dW = e.movementX; + dY = -1; + dH = -(e.movementY); break; case "documentDecorations-topResizer": - dY = -1 - dH = -(e.movementY) + dY = -1; + dH = -(e.movementY); break; case "documentDecorations-bottomLeftResizer": - dX = -1 - dW = -(e.movementX) - dH = e.movementY + dX = -1; + dW = -(e.movementX); + dH = e.movementY; break; case "documentDecorations-bottomRightResizer": - dW = e.movementX - dH = e.movementY + dW = e.movementX; + dH = e.movementY; break; case "documentDecorations-bottomResizer": - dH = e.movementY + dH = e.movementY; break; case "documentDecorations-leftResizer": - dX = -1 - dW = -(e.movementX) + dX = -1; + dW = -(e.movementX); break; case "documentDecorations-rightResizer": - dW = e.movementX + dW = e.movementX; break; } @@ -338,14 +338,15 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> var nativeWidth = doc.GetNumber(KeyStore.NativeWidth, 0); var nativeHeight = doc.GetNumber(KeyStore.NativeHeight, 0); if (nativeWidth > 0 && nativeHeight > 0) { - if (Math.abs(dW) > Math.abs(dH)) + if (Math.abs(dW) > Math.abs(dH)) { actualdH = nativeHeight / nativeWidth * actualdW; + } else actualdW = nativeWidth / nativeHeight * actualdH; } doc.SetNumber(KeyStore.Width, actualdW); doc.SetNumber(KeyStore.Height, actualdH); } - }) + }); } onPointerUp = (e: PointerEvent): void => { @@ -362,10 +363,10 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (this._title === "changed" && this._documents.length > 0) { let field = this._documents[0].props.Document.Get(this._fieldKey); if (field instanceof TextField) { - return (field as TextField).GetValue(); + return (field).GetValue(); } else if (field instanceof NumberField) { - return (field as NumberField).GetValue().toString(); + return (field).GetValue().toString(); } } return this._title; @@ -388,7 +389,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> return (null); } if (isNaN(bounds.r) || isNaN(bounds.b) || isNaN(bounds.x) || isNaN(bounds.y)) { - console.log("DocumentDecorations: Bounds Error") + console.log("DocumentDecorations: Bounds Error"); return (null); } @@ -414,7 +415,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> top: bounds.y - this._resizeBorderWidth / 2, pointerEvents: this._dragging ? "none" : "all", zIndex: SelectionManager.SelectedDocuments().length > 1 ? 1000 : 0, - }} onPointerDown={this.onBackgroundDown} onContextMenu={(e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation() }} > + }} onPointerDown={this.onBackgroundDown} onContextMenu={(e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); }} >
∞
- ) + ); } } \ No newline at end of file diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 982aacdea..2f17c6c51 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -1,7 +1,7 @@ -import React = require('react') +import React = require('react'); import { observer } from 'mobx-react'; import { observable, action, trace } from 'mobx'; -import "./EditableView.scss" +import "./EditableView.scss"; export interface EditableProps { /** @@ -22,7 +22,7 @@ export interface EditableProps { * The contents to render when not editing */ contents: any; - height: number + height: number; display?: string; } @@ -55,14 +55,14 @@ export class EditableView extends React.Component { render() { if (this.editing) { return this.editing = false)} - style={{ display: this.props.display }}> + style={{ display: this.props.display }}>; } else { return (
this.editing = true)} > {this.props.contents}
- ) + ); } } } \ No newline at end of file diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index 4ecc44119..47ee8eb85 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -82,7 +82,7 @@ export class InkingCanvas extends React.Component { }); this.inkData = data; } - }; + } @action onPointerUp = (e: PointerEvent): void => { @@ -109,7 +109,7 @@ export class InkingCanvas extends React.Component { @action onPointerMove = (e: PointerEvent): void => { - e.stopPropagation() + e.stopPropagation(); e.preventDefault(); if (InkingControl.Instance.selectedTool !== InkTool.Eraser) { let data = this.inkData; // add points to new line as it is being drawn @@ -120,7 +120,7 @@ export class InkingCanvas extends React.Component { } this.inkData = data; } - }; + } relativeCoordinatesForEvent = (ex: number, ey: number): { x: number, y: number } => { let [x, y] = this.props.getScreenTransform().transformPoint(ex, ey); @@ -137,14 +137,15 @@ export class InkingCanvas extends React.Component { @computed get drawnPaths() { - let curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1) + let curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1); let paths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => { - if (strokeData.page === -1 || strokeData.page === curPage) + if (strokeData.page === -1 || strokeData.page === curPage) { paths.push() + tool={strokeData.tool} deleteCallback={this.removeLine} />); + } return paths; }, [] as JSX.Element[]); return [ { {this.props.children()} {this.drawnPaths} - ) + ); } } \ No newline at end of file diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index 64ee66ec7..9a68f0671 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -1,10 +1,10 @@ import { observable, action, computed } from "mobx"; -import { CirclePicker, ColorResult } from 'react-color' +import { CirclePicker, ColorResult } from 'react-color'; import React = require("react"); import { InkTool } from "../../fields/InkField"; import { observer } from "mobx-react"; -import "./InkingControl.scss" +import "./InkingControl.scss"; import { library } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPen, faHighlighter, faEraser, faBan } from '@fortawesome/free-solid-svg-icons'; @@ -25,7 +25,7 @@ export class InkingControl extends React.Component { constructor(props: Readonly<{}>) { super(props); - InkingControl.Instance = this + InkingControl.Instance = this; } @action @@ -66,9 +66,9 @@ export class InkingControl extends React.Component { selected = (tool: InkTool) => { if (this._selectedTool === tool) { - return { color: "#61aaa3" } + return { color: "#61aaa3" }; } - return {} + return {}; } @action @@ -111,6 +111,6 @@ export class InkingControl extends React.Component { onChange={(e: React.ChangeEvent) => this.switchWidth(e.target.value)} /> - ) + ); } } \ No newline at end of file diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 12b15a3f0..0f05da22c 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -30,7 +30,7 @@ export class InkingStroke extends React.Component { } parseData = (line: Array<{ x: number, y: number }>): string => { - return !line.length ? "" : "M " + line.map(p => (p.x + this.props.offsetX) + " " + (p.y + this.props.offsetY)).join(" L ") + return !line.length ? "" : "M " + line.map(p => (p.x + this.props.offsetX) + " " + (p.y + this.props.offsetY)).join(" L "); } createStyle() { @@ -41,7 +41,7 @@ export class InkingStroke extends React.Component { fill: "none", stroke: this._strokeColor, strokeWidth: this._strokeWidth + "px", - } + }; } } @@ -53,6 +53,6 @@ export class InkingStroke extends React.Component { return ( - ) + ); } } \ No newline at end of file diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 6376fd694..fd2e23c91 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -16,7 +16,7 @@ import { WorkspacesMenu } from '../../server/authentication/controllers/Workspac import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils'; import { MessageStore } from '../../server/Message'; import { Utils, returnTrue, emptyFunction } from '../../Utils'; -import * as rp from 'request-promise' +import * as rp from 'request-promise'; import { RouteStore } from '../../server/RouteStore'; import { ServerUtils } from '../../server/ServerUtil'; import { Documents } from '../documents/Documents'; @@ -74,7 +74,7 @@ export class Main extends React.Component { if (pathname.length > 1 && pathname[pathname.length - 2] === 'doc') { CurrentUserUtils.MainDocId = pathname[pathname.length - 1]; } - }; + } CurrentUserUtils.loadCurrentUser(); @@ -119,8 +119,8 @@ export class Main extends React.Component { initEventListeners = () => { // window.addEventListener("pointermove", (e) => this.reportLocation(e)) - window.addEventListener("drop", (e) => e.preventDefault(), false) // drop event handler - window.addEventListener("dragover", (e) => e.preventDefault(), false) // drag event handler + window.addEventListener("drop", (e) => e.preventDefault(), false); // drop event handler + window.addEventListener("dragover", (e) => e.preventDefault(), false); // drag event handler // click interactions for the context menu document.addEventListener("pointerdown", action(function (e: PointerEvent) { if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) { @@ -139,15 +139,15 @@ export class Main extends React.Component { } else { this.createNewWorkspace(); } - }) + }); } else { Server.GetField(CurrentUserUtils.MainDocId).then(field => { if (field instanceof Document) { - this.openWorkspace(field) + this.openWorkspace(field); } else { this.createNewWorkspace(CurrentUserUtils.MainDocId); } - }) + }); } } @@ -163,7 +163,7 @@ export class Main extends React.Component { // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) setTimeout(() => { this.openWorkspace(mainDoc); - let pendingDocument = Documents.SchemaDocument([], { title: "New Mobile Uploads" }) + let pendingDocument = Documents.SchemaDocument([], { title: "New Mobile Uploads" }); mainDoc.Set(KeyStore.OptionalRightCollection, pendingDocument); }, 0); } @@ -182,7 +182,7 @@ export class Main extends React.Component { if (f && f.Data.length > 0) { CollectionDockingView.Instance.AddRightSplit(col); } - }) + }); } }, 100); }); @@ -191,7 +191,7 @@ export class Main extends React.Component { @observable workspacesShown: boolean = false; - areWorkspacesShown = () => this.workspacesShown + areWorkspacesShown = () => this.workspacesShown; @action toggleWorkspaces = () => { this.workspacesShown = !this.workspacesShown; @@ -199,7 +199,7 @@ export class Main extends React.Component { pwidthFunc = () => this.pwidth; pheightFunc = () => this.pheight; - focusDocument = (doc: Document) => { } + focusDocument = (doc: Document) => { }; noScaling = () => 1; @observable _textDoc?: Document = undefined; @@ -208,8 +208,9 @@ export class Main extends React.Component { SetTextDoc(textDoc?: Document, div?: HTMLDivElement) { this._textDoc = undefined; this._textDoc = textDoc; - if (div) + if (div) { this._textRect = div.getBoundingClientRect(); + } } @computed @@ -221,7 +222,7 @@ export class Main extends React.Component { let h: number = this._textRect.height; return
{ }} /> - + ; } else return (null); } @@ -241,19 +242,19 @@ export class Main extends React.Component { focus={this.focusDocument} parentActive={returnTrue} onActiveChanged={emptyFunction} - ContainingCollectionView={undefined} /> + ContainingCollectionView={undefined} />; } /* for the expandable add nodes menu. Not included with the miscbuttons because once it expands it expands the whole div with it, making canvas interactions limited. */ @computed get nodesMenu() { let imgurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"; - let pdfurl = "http://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf" + let pdfurl = "http://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf"; let weburl = "https://cs.brown.edu/courses/cs166/"; let audiourl = "http://techslides.com/demos/samples/sample.mp3"; let videourl = "http://techslides.com/demos/sample-videos/small.mp4"; - let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" })) + let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" })); let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" })); 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 })); @@ -261,7 +262,7 @@ export class Main extends React.Component { let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 200, height: 200, title: "a schema collection" })); 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" })) + let addAudioNode = action(() => Documents.AudioDocument(audiourl, { width: 200, height: 200, title: "audio node" })); let btns: [React.RefObject, IconName, string, () => Document][] = [ [React.createRef(), "font", "Add Textbox", addTextNode], @@ -273,7 +274,7 @@ export class Main extends React.Component { [React.createRef(), "object-group", "Add Collection", addColNode], [React.createRef(), "tree", "Add Tree", addTreeNode], [React.createRef(), "table", "Add Schema", addSchemaNode], - ] + ]; return < div id="add-nodes-menu" > @@ -289,7 +290,7 @@ export class Main extends React.Component {
)} - + ; } /* @TODO this should really be moved into a moveable toolbar component, but for now let's put it here to meet the deadline */ @@ -298,7 +299,7 @@ export class Main extends React.Component { let workspacesRef = React.createRef(); let logoutRef = React.createRef(); - let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {})) + let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {})); return [ ,
@@ -310,7 +311,7 @@ export class Main extends React.Component {
,
- ] + ]; } render() { @@ -318,7 +319,7 @@ export class Main extends React.Component { let workspaces = this.userDocument.GetT>(KeyStore.Workspaces, ListField); if (workspaces && workspaces !== FieldWaiting) { workspaceMenu = + isShown={this.areWorkspacesShown} toggle={this.toggleWorkspaces} />; } return ( <> @@ -359,7 +360,7 @@ export class Main extends React.Component { schemaDocuments.push(field); } else { var atmod = new ColumnAttributeModel(attr); - let histoOp = new HistogramOperation(schema!.displayName!, + let histoOp = new HistogramOperation(schema.displayName!, new AttributeTransformationModel(atmod, AggregateFunction.None), new AttributeTransformationModel(atmod, AggregateFunction.Count), new AttributeTransformationModel(atmod, AggregateFunction.Count)); @@ -368,7 +369,7 @@ export class Main extends React.Component { })); }); return schemaDoc; - }) + }); } } async initializeNorthstar(): Promise { @@ -386,7 +387,7 @@ export class Main extends React.Component { } (async () => { - await Documents.initProtos() - await CurrentUserUtils.loadCurrentUser() + await Documents.initProtos(); + await CurrentUserUtils.loadCurrentUser(); ReactDOM.render(
, document.getElementById('root')); -})() +})(); diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index 7a5ab6e3c..32462a4c1 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -66,17 +66,20 @@ export class CollectionBaseView extends React.Component { createsCycle(documentToAdd: Document, containerDocument: Document): boolean { let data = documentToAdd.GetList(KeyStore.Data, []); for (const doc of data) { - if (this.createsCycle(doc, containerDocument)) + if (this.createsCycle(doc, containerDocument)) { return true; + } } let annots = documentToAdd.GetList(KeyStore.Annotations, []); for (const annot of annots) { - if (this.createsCycle(annot, containerDocument)) + if (this.createsCycle(annot, containerDocument)) { return true; + } } for (let containerProto: FieldValue = containerDocument; containerProto && containerProto !== FieldWaiting; containerProto = containerProto.GetPrototype()) { - if (containerProto.Id === documentToAdd.Id) + if (containerProto.Id === documentToAdd.Id) { return true; + } } return false; } @@ -91,20 +94,23 @@ export class CollectionBaseView extends React.Component { } if (props.Document.Get(props.fieldKey) instanceof Field) { //TODO This won't create the field if it doesn't already exist - const value = props.Document.GetData(props.fieldKey, ListField, new Array()) + const value = props.Document.GetData(props.fieldKey, ListField, new Array()); if (!this.createsCycle(doc, props.Document)) { - if (!value.some(v => v.Id === doc.Id) || allowDuplicates) + if (!value.some(v => v.Id === doc.Id) || allowDuplicates) { value.push(doc); + } } - else + else { return false; + } } else { let proto = props.Document.GetPrototype(); if (!proto || proto === FieldWaiting || !this.createsCycle(proto, doc)) { props.Document.SetOnPrototype(props.fieldKey, new ListField([doc])); } - else + else { return false; + } } return true; } @@ -113,7 +119,7 @@ export class CollectionBaseView extends React.Component { removeDocument(doc: Document): boolean { const props = this.props; //TODO This won't create the field if it doesn't already exist - const value = props.Document.GetData(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) { @@ -125,16 +131,16 @@ export class CollectionBaseView extends React.Component { if (annotationOn === props.Document) { doc.Set(KeyStore.AnnotationOn, undefined, true); } - }) + }); if (index !== -1) { - value.splice(index, 1) + value.splice(index, 1); // SelectionManager.DeselectAll() - ContextMenu.Instance.clearItems() + ContextMenu.Instance.clearItems(); return true; } - return false + return false; } @action.bound @@ -155,12 +161,12 @@ export class CollectionBaseView extends React.Component { moveDocument: this.moveDocument, active: this.active, onActiveChanged: this.onActiveChanged, - } + }; return (
{this.props.children(this.collectionViewType, props)}
- ) + ); } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index c3757a377..ea6d3a247 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -32,7 +32,7 @@ export class CollectionDockingView extends React.Component) => { - if (f instanceof Document) - DragManager.StartDocumentDrag([tab], new DragManager.DocumentDragData([f as Document]), e.pageX, e.pageY, + if (f instanceof Document) { + DragManager.StartDocumentDrag([tab], new DragManager.DocumentDragData([f]), e.pageX, e.pageY, { handlers: { dragComplete: action(() => { }), }, hideSource: false - }) + }); + } })); } if (className === "lm_drag_handle" || className === "lm_close" || className === "lm_maximise" || className === "lm_minimise" || className === "lm_close_tab") { @@ -220,7 +222,7 @@ export class CollectionDockingView extends React.Component { var json = JSON.stringify(this._goldenLayout.toConfig()); - this.props.Document.SetText(KeyStore.Data, json) + this.props.Document.SetText(KeyStore.Data, json); } itemDropped = () => { @@ -236,7 +238,7 @@ export class CollectionDockingView extends React.Component { Server.GetField(this.props.documentId, action((f: Opt) => this._document = f as Document)); } - private _nativeWidth = () => this._document!.GetNumber(KeyStore.NativeWidth, this._panelWidth) - private _nativeHeight = () => this._document!.GetNumber(KeyStore.NativeHeight, this._panelHeight) - private _contentScaling = () => this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth) + private _nativeWidth = () => this._document!.GetNumber(KeyStore.NativeWidth, this._panelWidth); + private _nativeHeight = () => this._document!.GetNumber(KeyStore.NativeHeight, this._panelHeight); + private _contentScaling = () => this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth); ScreenToLocalTransform = () => { let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!); - return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this._contentScaling()) + return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this._contentScaling()); } render() { - if (!this._document) + if (!this._document) { return (null); + } var content =
{ onActiveChanged={emptyFunction} focus={(doc: Document) => { }} ContainingCollectionView={undefined} /> -
+ ; return { this._panelWidth = r.entry.width; this._panelHeight = r.entry.height; })}> {({ measureRef }) =>
{content}
} - + ; } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index 32f50afc0..97bac745c 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -2,7 +2,7 @@ import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { KeyStore } from "../../../fields/KeyStore"; import { ContextMenu } from "../ContextMenu"; -import "./CollectionPDFView.scss" +import "./CollectionPDFView.scss"; import React = require("react"); import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; @@ -44,7 +44,7 @@ export class CollectionPDFView extends React.Component { {this.props.isSelected() ? this.uIButtons : (null)} - ) + ); } render() { @@ -52,6 +52,6 @@ export class CollectionPDFView extends React.Component { {this.subView} - ) + ); } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 9b780f29b..52933818f 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -1,4 +1,4 @@ -import React = require("react") +import React = require("react"); import { library } from '@fortawesome/fontawesome-svg-core'; import { faCog, faPlus } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -41,7 +41,7 @@ class KeyToggle extends React.Component<{ keyId: string, checked: boolean, toggl if (field instanceof Key) { this.key = field; } - })) + })); } render() { @@ -49,7 +49,7 @@ class KeyToggle extends React.Component<{ keyId: string, checked: boolean, toggl return (
this.key && this.props.toggle(this.key)} /> {this.key.Name} -
) + ); } return (null); } @@ -85,10 +85,10 @@ export class CollectionSchemaView extends CollectionSubView { focus: emptyFunction, active: returnFalse, onActiveChanged: emptyFunction, - } + }; let contents = ( - ) + ); let reference = React.createRef(); let onItemDown = setupDrag(reference, () => props.Document, this.props.moveDocument); let applyToDoc = (doc: Document, run: (args?: { [name: string]: any }) => any) => { @@ -106,7 +106,7 @@ export class CollectionSchemaView extends CollectionSubView { } } return false; - } + }; return (
applyToDoc(doc, run)); } - }) + }); }}>
- ) + ); } private getTrProps: ComponentPropsGetterR = (state, rowInfo) => { @@ -156,7 +156,7 @@ export class CollectionSchemaView extends CollectionSubView { that._selectedIndex = rowInfo.index; if (handleOriginal) { - handleOriginal() + handleOriginal(); } }), style: { @@ -182,7 +182,7 @@ export class CollectionSchemaView extends CollectionSubView { this.columns.splice(index, 1); } - }) + }); } //toggles preview side-panel of schema @@ -197,7 +197,7 @@ export class CollectionSchemaView extends CollectionSubView { @computed get findAllDocumentKeys(): { [id: string]: boolean } { const docs = this.props.Document.GetList(this.props.fieldKey, []); - let keys: { [id: string]: boolean } = {} + let keys: { [id: string]: boolean } = {}; if (this._optionsActivated > -1) { // bcz: ugh. this is untracked since otherwise a large collection of documents will blast the server for all their fields. // then as each document's fields come back, we update the documents _proxies. Each time we do this, the whole schema will be @@ -206,7 +206,7 @@ export class CollectionSchemaView extends CollectionSubView { // is displayed (unlikely) it won't show up until something else changes. untracked(() => docs.map(doc => doc.GetAllPrototypes().map(proto => proto._proxies.forEach((val: any, key: string) => keys[key] = false)))); } - this.columns.forEach(key => keys[key.Id] = true) + this.columns.forEach(key => keys[key.Id] = true); return keys; } @@ -248,10 +248,10 @@ export class CollectionSchemaView extends CollectionSubView { getContentScaling = (): number => this._contentScaling; getPanelWidth = (): number => this._panelWidth; getPanelHeight = (): number => this._panelHeight; - getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._contentScaling) - getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX - this._tableWidth, - COLLECTION_BORDER_WIDTH).scale(1 / this._contentScaling) + getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._contentScaling); + getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX - this._tableWidth, - COLLECTION_BORDER_WIDTH).scale(1 / this._contentScaling); - focusDocument = (doc: Document) => { } + focusDocument = (doc: Document) => { }; onPointerDown = (e: React.PointerEvent): void => { if (this.props.isSelected()) { @@ -273,8 +273,9 @@ export class CollectionSchemaView extends CollectionSubView { this.newKeyName = e.currentTarget.value; } onWheel = (e: React.WheelEvent): void => { - if (this.props.active()) + if (this.props.active()) { e.stopPropagation(); + } } @observable _optionsActivated: number = 0; @@ -322,9 +323,9 @@ export class CollectionSchemaView extends CollectionSubView { } - ) + ); let dividerDragger = this.splitPercentage === 0 ? (null) : -
+
; //options button and menu let optionsMenu = !this.props.active() ? (null) : (
- ) + ); } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 59b89e119..bd385c27e 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -14,7 +14,7 @@ import { NumberField } from "../../../fields/NumberField"; import { ServerUtils } from "../../../server/ServerUtil"; import { Server } from "../../Server"; import { FieldViewProps } from "../nodes/FieldView"; -import * as rp from 'request-promise' +import * as rp from 'request-promise'; export interface CollectionViewProps extends FieldViewProps { addDocument: (document: Document, allowDuplicates?: boolean) => boolean; @@ -58,8 +58,8 @@ export class CollectionSubView extends React.Component { let entry = new TupleField<[string, string], [number, number]>([textInfo, position]); cursors.push(entry); } - })) - }) + })); + }); } } @@ -77,17 +77,17 @@ export class CollectionSubView extends React.Component { added = de.data.droppedDocuments.reduce((added: boolean, d) => added || this.props.addDocument(d), false); } else if (de.data.moveDocument) { const move = de.data.moveDocument; - added = de.data.droppedDocuments.reduce((added: boolean, d) => added || move(d, this.props.Document, this.props.addDocument), false) + added = de.data.droppedDocuments.reduce((added: boolean, d) => added || move(d, this.props.Document, this.props.addDocument), false); } else { - added = de.data.droppedDocuments.reduce((added: boolean, d) => added || this.props.addDocument(d), false) + added = de.data.droppedDocuments.reduce((added: boolean, d) => added || this.props.addDocument(d), false); } e.stopPropagation(); return added; } if (de.data instanceof DragManager.LinkDragData) { let sourceDoc: Document = de.data.linkSourceDocumentView.props.Document; - if (sourceDoc) runInAction(() => { - let srcTarg = sourceDoc.GetT(KeyStore.Prototype, Document) + if (sourceDoc) { runInAction(() => { + let srcTarg = sourceDoc.GetT(KeyStore.Prototype, Document); if (srcTarg && srcTarg !== FieldWaiting) { let linkDocs = srcTarg.GetList(KeyStore.LinkedToDocs, [] as Document[]); linkDocs.map(linkDoc => { @@ -97,9 +97,10 @@ export class CollectionSubView extends React.Component { de.data.droppedDocuments.push(dropdoc); this.props.addDocument(dropdoc, false); } - }) + }); } - }) + }); + } return true; } return false; @@ -133,7 +134,7 @@ export class CollectionSubView extends React.Component { alias.SetNumber(KeyStore.Height, options.height || options.width || 300); this.props.addDocument(alias, false); } - }) + }); return undefined; } ctor = Documents.WebDocument; @@ -151,8 +152,8 @@ export class CollectionSubView extends React.Component { if (text && text.startsWith(" { let prom = new Promise(res => e.dataTransfer.items[i].getAsString(res)).then(action((s: string) => { str = s; - return rp.head(ServerUtils.prepend(RouteStore.corsProxy + "/" + s)) + return rp.head(ServerUtils.prepend(RouteStore.corsProxy + "/" + s)); })).then(res => { let type = res.headers["content-type"]; if (type) { - let doc = this.getDocumentFromType(type, str, { ...options, width: 300, nativeWidth: 300 }) + let doc = this.getDocumentFromType(type, str, { ...options, width: 300, nativeWidth: 300 }); if (doc) { this.props.addDocument(doc, false); } @@ -186,13 +187,13 @@ export class CollectionSubView extends React.Component { promises.push(prom); // this.props.addDocument(Documents.WebDocument(s, { ...options, width: 300, height: 300 }), false) } - let type = item.type + let type = item.type; if (item.kind === "file") { let file = item.getAsFile(); - let formData = new FormData() + let formData = new FormData(); if (file) { - formData.append('file', file) + formData.append('file', file); } let prom = fetch(upload, { @@ -201,15 +202,15 @@ export class CollectionSubView extends React.Component { }).then(async (res: Response) => { const json = await res.json(); json.map((file: any) => { - let path = window.location.origin + file + let path = window.location.origin + file; runInAction(() => { - let doc = this.getDocumentFromType(type, path, { ...options, nativeWidth: 300, width: 300 }) + let doc = this.getDocumentFromType(type, path, { ...options, nativeWidth: 300, width: 300 }); let docs = this.props.Document.GetT(KeyStore.Data, ListField); if (docs !== FieldWaiting) { if (!docs) { docs = new ListField(); - this.props.Document.Set(KeyStore.Data, docs) + this.props.Document.Set(KeyStore.Data, docs); } if (doc) { docs.Data.push(doc); diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 2bdf0baa6..659cff9fe 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -12,7 +12,7 @@ import { EditableView } from "../EditableView"; import "./CollectionTreeView.scss"; import { CollectionView } from "./CollectionView"; import { CollectionSubView } from "./CollectionSubView"; -import React = require("react") +import React = require("react"); import { COLLECTION_BORDER_WIDTH } from './CollectionBaseView'; import { props } from 'bluebird'; @@ -58,7 +58,7 @@ class TreeView extends React.Component { return true; } //TODO This should check if it was removed - this.remove(document) + this.remove(document); return addDoc(document); } @@ -69,7 +69,7 @@ class TreeView extends React.Component { case BulletType.Collapsed: bullet = "caret-right"; break; case BulletType.Collapsible: bullet = "caret-down"; break; } - return
{bullet ? : ""}
+ return
{bullet ? : ""}
; } /** @@ -93,7 +93,7 @@ class TreeView extends React.Component {
{editableView(this.props.document.Title)}
-
) +
); } render() { @@ -105,7 +105,7 @@ class TreeView extends React.Component { bulletType = BulletType.Collapsible; childElements =
    {children.Data.map(value => )} -
+ ; } else bulletType = BulletType.Collapsed; } @@ -115,7 +115,7 @@ class TreeView extends React.Component { {this.renderTitle()} {childElements ? childElements : (null)} - + ; } } @@ -136,7 +136,7 @@ export class CollectionTreeView extends CollectionSubView { let childrenElement = !children || children === FieldWaiting ? (null) : (children.Data.map(value => ) - ) + ); return (
e.stopPropagation()} onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}> diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index 1acc76c85..b02983a2e 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -4,7 +4,7 @@ import { KeyStore } from "../../../fields/KeyStore"; import { ContextMenu } from "../ContextMenu"; import { CollectionViewType, CollectionBaseView, CollectionRenderProps } from "./CollectionBaseView"; import React = require("react"); -import "./CollectionVideoView.scss" +import "./CollectionVideoView.scss"; import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; @@ -111,7 +111,7 @@ export class CollectionVideoView extends React.Component { {this.props.isSelected() ? this.uIButtons : (null)} - ) + ); } render() { @@ -119,6 +119,6 @@ export class CollectionVideoView extends React.Component { return ( {this.subView} - ) + ); } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index b31dcc888..8abd0a02d 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import * as React from 'react'; import { FieldViewProps, FieldView } from '../nodes/FieldView'; import { CollectionBaseView, CollectionViewType, CollectionRenderProps } from './CollectionBaseView'; import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; @@ -13,26 +13,26 @@ import { undoBatch } from '../../util/UndoManager'; @observer export class CollectionView extends React.Component { - public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(CollectionView, fieldStr) } + public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(CollectionView, fieldStr); } private SubView = (type: CollectionViewType, renderProps: CollectionRenderProps) => { let props = { ...this.props, ...renderProps }; switch (type) { - case CollectionViewType.Schema: return () - case CollectionViewType.Docking: return () - case CollectionViewType.Tree: return () + case CollectionViewType.Schema: return (); + case CollectionViewType.Docking: return (); + case CollectionViewType.Tree: return (); case CollectionViewType.Freeform: default: - return () + return (); } return (null); } onContextMenu = (e: React.MouseEvent): void => { if (!e.isPropagationStopped() && this.props.Document.Id !== CurrentUserUtils.MainDocId) { // 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: "Freeform", event: undoBatch(() => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform)) }) - ContextMenu.Instance.addItem({ description: "Schema", event: undoBatch(() => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema)) }) - ContextMenu.Instance.addItem({ description: "Treeview", event: undoBatch(() => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree)) }) + ContextMenu.Instance.addItem({ description: "Freeform", event: undoBatch(() => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform)) }); + ContextMenu.Instance.addItem({ description: "Schema", event: undoBatch(() => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema)) }); + ContextMenu.Instance.addItem({ description: "Treeview", event: undoBatch(() => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree)) }); } } @@ -41,6 +41,6 @@ export class CollectionView extends React.Component { {this.SubView} - ) + ); } } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index 3dfd74ec8..081b3eb6c 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -32,6 +32,6 @@ export class CollectionFreeFormLinkView extends React.Component - ) + ); } } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx index c288e7abf..cf058090d 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx @@ -17,7 +17,7 @@ export class CollectionFreeFormLinksView extends React.Component DocumentManager.Instance.getAllDocumentViews(this.HackToAvoidReactionFiringUnnecessarily!). map(dv => dv.props.Document.GetNumber(KeyStore.X, 0)), @@ -31,13 +31,14 @@ export class CollectionFreeFormLinksView extends React.Component) => field.Data.findIndex(brush => { let bdocs = brush ? brush.GetList(KeyStore.BrushingDocs, [] as Document[]) : []; - return (bdocs.length && ((bdocs[0] === dstTarg && bdocs[1] === srcTarg)) ? true : false) + return (bdocs.length && ((bdocs[0] === dstTarg && bdocs[1] === srcTarg)) ? true : false); }); let brushAction = (field: ListField) => { let found = findBrush(field); @@ -64,13 +65,13 @@ export class CollectionFreeFormLinksView extends React.Component sv.props.ContainingCollectionView && sv.props.ContainingCollectionView.props.Document === this.props.Document); } @@ -86,15 +87,16 @@ export class CollectionFreeFormLinksView extends React.Component { let match = (possiblePair.a === drawnPair.a && possiblePair.b === drawnPair.b); if (match) { - if (!drawnPair.l.reduce((found, link) => found || link.Id === connection.l.Id, false)) + if (!drawnPair.l.reduce((found, link) => found || link.Id === connection.l.Id, false)) { drawnPair.l.push(connection.l); + } } return match || found; }, false)) { drawnPairs.push({ a: possiblePair.a, b: possiblePair.b, l: [connection.l] }); } - }) - return drawnPairs + }); + return drawnPairs; }, [] as { a: Document, b: Document, l: Document[] }[]); return connections.map(c => ); } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx index 17656e4ae..fc832264d 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx @@ -57,7 +57,7 @@ export class CollectionFreeFormRemoteCursors extends React.Component { if (el) this.crosshairs = el }} + ref={(el) => { if (el) this.crosshairs = el; }} width={20} height={20} style={{ @@ -93,7 +93,7 @@ export class CollectionFreeFormRemoteCursors extends React.Component ); } - }) + }); } render() { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 1c3899b24..e694bc7a7 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -49,7 +49,7 @@ export class CollectionFreeFormView extends CollectionSubView { if (dv) { SelectionManager.SelectDoc(dv, true); } - }) + }); } public getActiveDocuments = () => { @@ -70,8 +70,8 @@ export class CollectionFreeFormView extends CollectionSubView { private outerElement?: HTMLDivElement; - @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 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); } @@ -109,7 +109,7 @@ export class CollectionFreeFormView extends CollectionSubView { d.SetNumber(KeyStore.Height, 300); } this.bringToFront(d); - }) + }); } } return true; @@ -133,8 +133,9 @@ export class CollectionFreeFormView extends CollectionSubView { document.addEventListener("pointerup", this.onPointerUp); this._lastX = this.DownX = e.pageX; this._lastY = this.DownY = e.pageY; - if (this.props.isSelected()) + if (this.props.isSelected()) { e.stopPropagation(); + } } } @@ -182,12 +183,13 @@ export class CollectionFreeFormView extends CollectionSubView { let transform = this.getTransform(); let deltaScale = (1 - (e.deltaY / coefficient)); - if (deltaScale * this.zoomScaling < 1 && this.isAnnotationOverlay) + 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) + let localTransform = this.getLocalTransform(); + localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y); // console.log(localTransform) this.props.Document.SetNumber(KeyStore.Scale, localTransform.Scale); @@ -209,7 +211,7 @@ export class CollectionFreeFormView extends CollectionSubView { onDrop = (e: React.DragEvent): void => { var pt = this.getTransform().transformPoint(e.pageX, e.pageY); super.onDrop(e, { x: pt[0], y: pt[1] }); - }; + } onDragOver = (): void => { } @@ -228,7 +230,7 @@ export class CollectionFreeFormView extends CollectionSubView { } return doc1.GetNumber(KeyStore.ZIndex, 0) - doc2.GetNumber(KeyStore.ZIndex, 0); }).map((doc, index) => { - doc.SetNumber(KeyStore.ZIndex, index + 1) + doc.SetNumber(KeyStore.ZIndex, index + 1); }); } @@ -268,7 +270,7 @@ export class CollectionFreeFormView extends CollectionSubView { focus: this.focusDocument, parentActive: this.props.active, onActiveChanged: this.props.active, - } + }; } @computed @@ -276,10 +278,11 @@ export class CollectionFreeFormView extends CollectionSubView { var curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1); return this.props.Document.GetList(this.props.fieldKey, [] as Document[]).filter(doc => doc).reduce((prev, doc) => { var page = doc.GetNumber(KeyStore.Page, -1); - if (page === curPage || page === -1) + if (page === curPage || page === -1) { prev.push(); + } return prev; - }, [] as JSX.Element[]) + }, [] as JSX.Element[]); } @computed @@ -295,8 +298,8 @@ export class CollectionFreeFormView extends CollectionSubView { layoutKey={KeyStore.OverlayLayout} isTopMost={this.props.isTopMost} isSelected={() => false} select={() => { }} />); } - getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).translate(-this.centeringShiftX, -this.centeringShiftY).transform(this.getLocalTransform()) - getContainerTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH) + getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).translate(-this.centeringShiftX, -this.centeringShiftY).transform(this.getLocalTransform()); + getContainerTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH); getLocalTransform = (): Transform => Transform.Identity().scale(1 / this.scale).translate(this.panX, this.panY); noScaling = () => 1; childViews = () => this.views; diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 704db1d4a..1e6faafb3 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -37,7 +37,7 @@ export class MarqueeView extends React.Component @action cleanupInteractions = (all: boolean = false) => { if (all) { - document.removeEventListener("pointermove", this.onPointerMove, true) + document.removeEventListener("pointermove", this.onPointerMove, true); document.removeEventListener("pointerup", this.onPointerUp, true); } else { this._used = true; @@ -52,7 +52,7 @@ export class MarqueeView extends React.Component this._downX = this._lastX = e.pageX; this._downY = this._lastY = e.pageY; this._used = false; - document.addEventListener("pointermove", this.onPointerMove, true) + document.addEventListener("pointermove", this.onPointerMove, true); document.addEventListener("pointerup", this.onPointerUp, true); document.addEventListener("keydown", this.marqueeCommand, true); } @@ -94,7 +94,7 @@ export class MarqueeView extends React.Component let top = this._downY < this._lastY ? this._downY : this._lastY; let topLeft = this.props.getTransform().transformPoint(left, top); let size = this.props.getTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY); - return { left: topLeft[0], top: topLeft[1], width: Math.abs(size[0]), height: Math.abs(size[1]) } + return { left: topLeft[0], top: topLeft[1], width: Math.abs(size[0]), height: Math.abs(size[1]) }; } @action @@ -180,9 +180,10 @@ export class MarqueeView extends React.Component var y = doc.GetNumber(KeyStore.Y, 0); var w = doc.GetNumber(KeyStore.Width, 0); var h = doc.GetNumber(KeyStore.Height, 0); - if (this.intersectRect({ left: x, top: y, width: w, height: h }, selRect)) - selection.push(doc) - }) + if (this.intersectRect({ left: x, top: y, width: w, height: h }, selRect)) { + selection.push(doc); + } + }); return selection; } @@ -190,7 +191,7 @@ export class MarqueeView extends React.Component get marqueeDiv() { let p = this.props.getContainerTransform().transformPoint(this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY); let v = this.props.getContainerTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY); - return
+ return
; } render() { diff --git a/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx b/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx index 599461f85..8eabb020a 100644 --- a/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx +++ b/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx @@ -90,7 +90,7 @@ export class PreviewCursor extends React.Component { {this.props.children}
- ) + ); } } @@ -109,8 +109,9 @@ export class PreviewCursorPrompt extends React.Component { render() { let p = this.props.getPoint(); - if (this.props.getVisible() && this._promptRef.current) + if (this.props.getVisible() && this._promptRef.current) { this._promptRef.current.focus(); + } return
I diff --git a/src/client/views/nodes/Annotation.tsx b/src/client/views/nodes/Annotation.tsx index e4f17940c..3e4ed6bf1 100644 --- a/src/client/views/nodes/Annotation.tsx +++ b/src/client/views/nodes/Annotation.tsx @@ -1,8 +1,8 @@ import "./ImageBox.scss"; -import React = require("react") -import { observer } from "mobx-react" +import React = require("react"); +import { observer } from "mobx-react"; import { observable, action } from 'mobx'; -import 'react-pdf/dist/Page/AnnotationLayer.css' +import 'react-pdf/dist/Page/AnnotationLayer.css'; interface IProps { Span: HTMLSpanElement; @@ -29,13 +29,13 @@ export class Annotation extends React.Component { */ onColorChange = (e: React.PointerEvent) => { if (e.currentTarget.innerHTML === "r") { - this.props.Span.style.backgroundColor = "rgba(255,0,0, 0.3)" + this.props.Span.style.backgroundColor = "rgba(255,0,0, 0.3)"; } else if (e.currentTarget.innerHTML === "b") { - this.props.Span.style.backgroundColor = "rgba(0,255, 255, 0.3)" + this.props.Span.style.backgroundColor = "rgba(0,255, 255, 0.3)"; } else if (e.currentTarget.innerHTML === "y") { - this.props.Span.style.backgroundColor = "rgba(255,255,0, 0.3)" + this.props.Span.style.backgroundColor = "rgba(255,255,0, 0.3)"; } else if (e.currentTarget.innerHTML === "g") { - this.props.Span.style.backgroundColor = "rgba(76, 175, 80, 0.3)" + this.props.Span.style.backgroundColor = "rgba(76, 175, 80, 0.3)"; } } @@ -54,11 +54,11 @@ export class Annotation extends React.Component { this.props.Highlights.splice(index, 1); } } - }) + }); //removing from CurrAnno and Annotation array this.props.Annotations.splice(index, 1); - this.props.CurrAnno.pop() + this.props.CurrAnno.pop(); //removing span from div if (this.props.Span.parentElement) { @@ -70,11 +70,11 @@ export class Annotation extends React.Component { if (item === e) { item.remove(); } - }) + }); e.remove(); } } - }) + }); } diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 1bd934c25..1493ff25b 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -1,18 +1,18 @@ -import React = require("react") +import React = require("react"); import { FieldViewProps, FieldView } from './FieldView'; import { FieldWaiting } from '../../../fields/Field'; -import { observer } from "mobx-react" +import { observer } from "mobx-react"; import { ContextMenu } from "../../views/ContextMenu"; import { observable, action } from 'mobx'; import { KeyStore } from '../../../fields/KeyStore'; import { AudioField } from "../../../fields/AudioField"; -import "./AudioBox.scss" +import "./AudioBox.scss"; import { NumberField } from "../../../fields/NumberField"; @observer export class AudioBox extends React.Component { - public static LayoutString() { return FieldView.LayoutString(AudioBox) } + public static LayoutString() { return FieldView.LayoutString(AudioBox); } constructor(props: FieldViewProps) { super(props); @@ -28,7 +28,7 @@ export class AudioBox extends React.Component { render() { - let field = this.props.Document.Get(this.props.fieldKey) + let field = this.props.Document.Get(this.props.fieldKey); let path = field === FieldWaiting ? "http://techslides.com/demos/samples/sample.mp3" : field instanceof AudioField ? field.Data.href : "http://techslides.com/demos/samples/sample.mp3"; @@ -39,6 +39,6 @@ export class AudioBox extends React.Component { Not supported.
- ) + ); } } \ No newline at end of file diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index dcf82ccd4..77f41105f 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -35,24 +35,24 @@ export class CollectionFreeFormDocumentView extends React.Component this.nativeWidth > 0 ? this.width / this.nativeWidth : 1 + contentScaling = () => this.nativeWidth > 0 ? this.width / this.nativeWidth : 1; getTransform = (): Transform => this.props.ScreenToLocalTransform() @@ -66,7 +66,7 @@ export class CollectionFreeFormDocumentView extends React.Component + />; } panelWidth = () => this.props.Document.GetBoolean(KeyStore.Minimized, false) ? 10 : this.props.PanelWidth(); panelHeight = () => this.props.Document.GetBoolean(KeyStore.Minimized, false) ? 10 : this.props.PanelHeight(); diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 34cc326aa..5836da396 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -26,7 +26,7 @@ import { FieldViewProps } from "./FieldView"; import { Without } from "../../../Utils"; const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? -type BindingProps = Without +type BindingProps = Without; export interface JsxBindings { props: BindingProps; [keyName: string]: BindingProps | Field; @@ -92,7 +92,7 @@ export class DocumentContentsView extends React.Component { console.log(test) }} - /> + onError={(test: any) => { console.log(test); }} + />; } } \ No newline at end of file diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index ab9cd2d53..9670ca6b2 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -100,8 +100,9 @@ export class DocumentView extends React.Component { if (e.shiftKey && e.buttons === 2) { if (this.props.isTopMost) { this.startDragging(e.pageX, e.pageY, e.altKey || e.ctrlKey); - } else + } else { CollectionDockingView.Instance.StartOtherDrag([this.props.Document], e); + } e.stopPropagation(); } else { if (this.active && !e.isDefaultPrevented()) { @@ -112,7 +113,7 @@ export class DocumentView extends React.Component { document.addEventListener("pointerup", this.onPointerUp); } } - }; + } private dropDisposer?: DragManager.DragDropDisposer; @@ -179,7 +180,7 @@ export class DocumentView extends React.Component { } e.stopPropagation(); e.preventDefault(); - }; + } onPointerUp = (e: PointerEvent): void => { document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); @@ -190,22 +191,22 @@ export class DocumentView extends React.Component { ) { SelectionManager.SelectDoc(this, e.ctrlKey); } - }; + } stopPropogation = (e: React.SyntheticEvent) => { e.stopPropagation(); - }; + } deleteClicked = (): void => { if (this.props.removeDocument) { this.props.removeDocument(this.props.Document); } - }; + } fieldsClicked = (e: React.MouseEvent): void => { if (this.props.addDocument) { this.props.addDocument(Documents.KVPDocument(this.props.Document, { width: 300, height: 300 }), false); } - }; + } fullScreenClicked = (e: React.MouseEvent): void => { CollectionDockingView.Instance.OpenFullScreen(this.props.Document); ContextMenu.Instance.clearItems(); @@ -214,7 +215,7 @@ export class DocumentView extends React.Component { event: this.closeFullScreenClicked }); ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15); - }; + } closeFullScreenClicked = (e: React.MouseEvent): void => { CollectionDockingView.Instance.CloseFullScreen(); @@ -224,7 +225,7 @@ export class DocumentView extends React.Component { event: this.fullScreenClicked }); ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15); - }; + } @action public minimize = (): void => { @@ -234,7 +235,7 @@ export class DocumentView extends React.Component { BooleanField ); SelectionManager.DeselectAll(); - }; + } @action drop = (e: Event, de: DragManager.DropEvent) => { @@ -276,7 +277,7 @@ export class DocumentView extends React.Component { ); e.stopPropagation(); } - }; + } onDrop = (e: React.DragEvent) => { if (e.isDefaultPrevented()) { @@ -290,7 +291,7 @@ export class DocumentView extends React.Component { e.stopPropagation(); e.preventDefault(); } - }; + } @action onContextMenu = (e: React.MouseEvent): void => { @@ -352,14 +353,14 @@ export class DocumentView extends React.Component { }); 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 = () => { @@ -368,13 +369,13 @@ export class DocumentView extends React.Component { false as boolean, BooleanField ); - }; + } - isSelected = () => SelectionManager.IsSelected(this) + isSelected = () => SelectionManager.IsSelected(this); select = (ctrlPressed: boolean) => { SelectionManager.SelectDoc(this, ctrlPressed); - }; + } render() { if (!this.props.Document) { diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index d9422ae9b..07c5b332c 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -1,4 +1,4 @@ -import React = require("react") +import React = require("react"); import { observer } from "mobx-react"; import { computed } from "mobx"; import { Field, FieldWaiting, FieldValue } from "../../../fields/Field"; @@ -7,7 +7,7 @@ import { TextField } from "../../../fields/TextField"; import { NumberField } from "../../../fields/NumberField"; import { RichTextField } from "../../../fields/RichTextField"; import { ImageField } from "../../../fields/ImageField"; -import { VideoField } from "../../../fields/VideoField" +import { VideoField } from "../../../fields/VideoField"; import { Key } from "../../../fields/Key"; import { FormattedTextBox } from "./FormattedTextBox"; import { ImageBox } from "./ImageBox"; @@ -57,22 +57,22 @@ export class FieldView extends React.Component { render() { const field = this.field; if (!field) { - return

{''}

+ return

{''}

; } if (field instanceof TextField) { - return

{field.Data}

+ return

{field.Data}

; } else if (field instanceof RichTextField) { - return + return ; } else if (field instanceof ImageField) { - return + return ; } else if (field instanceof VideoField) { - return + return ; } else if (field instanceof AudioField) { - return + return ; } else if (field instanceof Document) { return ( @@ -92,25 +92,26 @@ export class FieldView extends React.Component { ContainingCollectionView={undefined} parentActive={this.props.active} onActiveChanged={this.props.onActiveChanged} /> - ) + ); } else if (field instanceof ListField) { return (
{(field as ListField).Data.map(f => f instanceof Document ? f.Title : f.GetValue().toString()).join(", ")} -
) +
); } // bcz: this belongs here, but it doesn't render well so taking it out for now // else if (field instanceof HtmlField) { // return // } else if (field instanceof NumberField) { - return

{field.Data}

+ return

{field.Data}

; } else if (field !== FieldWaiting) { - return

{JSON.stringify(field.GetValue())}

+ return

{JSON.stringify(field.GetValue())}

; } - else - return

{"Waiting for server..."}

+ else { + return

{"Waiting for server..."}

; + } } } \ No newline at end of file diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 7a94be12b..beca6cdc6 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -61,7 +61,7 @@ export class FormattedTextBox extends React.Component { ); // doc.SetData(fieldKey, JSON.stringify(state.toJSON()), RichTextField); } - }; + } get FieldDoc() { return this.props.fieldKey === KeyStore.Archives ? Main.Instance._textDoc! : this.props.Document; } get FieldKey() { return this.props.fieldKey === KeyStore.Archives ? KeyStore.Data : this.props.fieldKey; } @@ -81,12 +81,13 @@ export class FormattedTextBox extends React.Component { if (this.props.fieldKey === KeyStore.Archives) { this._inputReactionDisposer = reaction(() => Main.Instance._textDoc && Main.Instance._textDoc.Id, () => { - if (this._editorView) - this._editorView!.destroy(); + if (this._editorView) { + this._editorView.destroy(); + } this.setupEditor(config); } - ) + ); } this._reactionDisposer = reaction( @@ -153,7 +154,7 @@ export class FormattedTextBox extends React.Component { if (e.buttons === 1 && this.props.isSelected() && !e.altKey) { e.stopPropagation(); } - }; + } onPointerUp = (e: React.PointerEvent): void => { if (e.buttons === 1 && this.props.isSelected() && !e.altKey) { e.stopPropagation(); @@ -162,7 +163,7 @@ export class FormattedTextBox extends React.Component { e.preventDefault(); Main.Instance.SetTextDoc(this.props.Document, this._ref.current!); } - }; + } onFocused = (e: React.FocusEvent): void => { if (this.props.fieldKey !== KeyStore.Archives) { @@ -191,11 +192,11 @@ export class FormattedTextBox extends React.Component { // ] // }) // e.stopPropagation() - }; + } onPointerWheel = (e: React.WheelEvent): void => { e.stopPropagation(); - }; + } tooltipMenuPlugin() { return new Plugin({ diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index c5f29f7b0..6b0a3a799 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -9,13 +9,13 @@ import { KeyStore } from '../../../fields/KeyStore'; import { ContextMenu } from "../../views/ContextMenu"; import { FieldView, FieldViewProps } from './FieldView'; import "./ImageBox.scss"; -import React = require("react") +import React = require("react"); import { Utils } from '../../../Utils'; @observer export class ImageBox extends React.Component { - public static LayoutString() { return FieldView.LayoutString(ImageBox) } + public static LayoutString() { return FieldView.LayoutString(ImageBox); } private _ref: React.RefObject; private _imgRef: React.RefObject; private _downX: number = 0; @@ -39,7 +39,7 @@ export class ImageBox extends React.Component { onLoad = (target: any) => { var h = this._imgRef.current!.naturalHeight; var w = this._imgRef.current!.naturalWidth; - this.props.Document.SetNumber(KeyStore.NativeHeight, this.props.Document.GetNumber(KeyStore.NativeWidth, 0) * h / w) + this.props.Document.SetNumber(KeyStore.NativeHeight, this.props.Document.GetNumber(KeyStore.NativeWidth, 0) * h / w); } componentDidMount() { @@ -86,7 +86,7 @@ export class ImageBox extends React.Component { onMoveNextRequest={action(() => this._photoIndex = (this._photoIndex + 1) % images.length )} - />) + />); } } @@ -96,7 +96,7 @@ export class ImageBox extends React.Component { let url = field.Data.href; ContextMenu.Instance.addItem({ description: "Copy path", event: () => { - Utils.CopyText(url) + Utils.CopyText(url); } }); } @@ -111,6 +111,6 @@ export class ImageBox extends React.Component {
Image not found {this.lightbox(path)} -
) +
); } } \ No newline at end of file diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index 8a7f32e6d..bcac113f0 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -7,7 +7,7 @@ import { KeyStore } from '../../../fields/KeyStore'; import { FieldView, FieldViewProps } from './FieldView'; import "./KeyValueBox.scss"; import { KeyValuePair } from "./KeyValuePair"; -import React = require("react") +import React = require("react"); import { CompileScript, ToField } from "../../util/Scripting"; import { Key } from '../../../fields/Key'; import { observable, action } from "mobx"; @@ -15,7 +15,7 @@ import { observable, action } from "mobx"; @observer export class KeyValueBox extends React.Component { - public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr) } + public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr); } @observable private _keyInput: string = ""; @observable private _valueInput: string = ""; @@ -36,7 +36,7 @@ export class KeyValueBox extends React.Component { if (this._keyInput && this._valueInput) { let doc = this.props.Document.GetT(KeyStore.Data, Document); if (!doc || doc === FieldWaiting) { - return + return; } let realDoc = doc; @@ -55,8 +55,8 @@ export class KeyValueBox extends React.Component { realDoc.Set(new Key(this._keyInput), dataField); } } - this._keyInput = "" - this._valueInput = "" + this._keyInput = ""; + this._valueInput = ""; } } } @@ -73,7 +73,7 @@ export class KeyValueBox extends React.Component { createTable = () => { let doc = this.props.Document.GetT(KeyStore.Data, Document); if (!doc || doc === FieldWaiting) { - return Loading... + return Loading...; } let realDoc = doc; @@ -84,13 +84,13 @@ export class KeyValueBox extends React.Component { if (!(key in ids)) { ids[key] = key; } - }) + }); } let rows: JSX.Element[] = []; let i = 0; for (let key in ids) { - rows.push() + rows.push(); } return rows; } @@ -125,6 +125,6 @@ export class KeyValueBox extends React.Component { {this.newKeyValue()} - ) + ); } } \ No newline at end of file diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index c6a0a7296..a1050dc6e 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -1,14 +1,14 @@ import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app import "./KeyValueBox.scss"; import "./KeyValuePair.scss"; -import React = require("react") +import React = require("react"); import { FieldViewProps, FieldView } from './FieldView'; import { Opt, Field } from '../../../fields/Field'; -import { observer } from "mobx-react" +import { observer } from "mobx-react"; import { observable, action } from 'mobx'; import { Document } from '../../../fields/Document'; import { Key } from '../../../fields/Key'; -import { Server } from "../../Server" +import { Server } from "../../Server"; import { EditableView } from "../EditableView"; import { CompileScript, ToField } from "../../util/Scripting"; import { Transform } from '../../util/Transform'; @@ -25,7 +25,7 @@ export interface KeyValuePairProps { export class KeyValuePair extends React.Component { @observable - private key: Opt + private key: Opt; constructor(props: KeyValuePairProps) { super(props); @@ -41,7 +41,7 @@ export class KeyValuePair extends React.Component { render() { if (!this.key) { - return error + return error; } let props: FieldViewProps = { @@ -55,7 +55,7 @@ export class KeyValuePair extends React.Component { onActiveChanged: emptyFunction, ScreenToLocalTransform: Transform.Identity, focus: emptyFunction, - } + }; let contents = ( ); @@ -101,6 +101,6 @@ export class KeyValuePair extends React.Component { return false; }}> - ) + ); } } \ No newline at end of file diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx index 4791d6029..b016a3d48 100644 --- a/src/client/views/nodes/LinkBox.tsx +++ b/src/client/views/nodes/LinkBox.tsx @@ -2,8 +2,8 @@ import { observable, computed, action } from "mobx"; import React = require("react"); import { SelectionManager } from "../../util/SelectionManager"; import { observer } from "mobx-react"; -import './LinkBox.scss' -import { KeyStore } from '../../../fields/KeyStore' +import './LinkBox.scss'; +import { KeyStore } from '../../../fields/KeyStore'; import { props } from "bluebird"; import { DocumentView } from "./DocumentView"; import { Document } from "../../../fields/Document"; @@ -30,7 +30,7 @@ interface Props { linkName: String; pairedDoc: Document; type: String; - showEditor: () => void + showEditor: () => void; } @observer @@ -49,15 +49,16 @@ export class LinkBox extends React.Component { } else if (contextDoc instanceof Document) { this.props.pairedDoc.GetTAsync(KeyStore.Page, NumberField).then((pfield: any) => { contextDoc.GetTAsync(KeyStore.CurPage, NumberField).then((cfield: any) => { - if (pfield !== cfield) + if (pfield !== cfield) { contextDoc.SetNumber(KeyStore.CurPage, pfield.Data); + } let contextView = DocumentManager.Instance.getDocumentView(contextDoc); if (contextView) { contextView.props.focus(contextDoc); } else { CollectionDockingView.Instance.AddRightSplit(contextDoc); } - }) + }); }); } }); @@ -80,7 +81,7 @@ export class LinkBox extends React.Component { if (field) { field.Data.splice(field.Data.indexOf(this.props.linkDoc)); } - }) + }); } }); this.props.linkDoc.GetTAsync(KeyStore.LinkedToDocs, Document, field => { @@ -89,7 +90,7 @@ export class LinkBox extends React.Component { if (field) { field.Data.splice(field.Data.indexOf(this.props.linkDoc)); } - }) + }); } }); } @@ -117,6 +118,6 @@ export class LinkBox extends React.Component { - ) + ); } } \ No newline at end of file diff --git a/src/client/views/nodes/LinkEditor.tsx b/src/client/views/nodes/LinkEditor.tsx index 3f7b4bf2d..bde50fed8 100644 --- a/src/client/views/nodes/LinkEditor.tsx +++ b/src/client/views/nodes/LinkEditor.tsx @@ -2,8 +2,8 @@ import { observable, computed, action } from "mobx"; import React = require("react"); import { SelectionManager } from "../../util/SelectionManager"; import { observer } from "mobx-react"; -import './LinkEditor.scss' -import { KeyStore } from '../../../fields/KeyStore' +import './LinkEditor.scss'; +import { KeyStore } from '../../../fields/KeyStore'; import { props } from "bluebird"; import { DocumentView } from "./DocumentView"; import { Document } from "../../../fields/Document"; @@ -43,7 +43,7 @@ export class LinkEditor extends React.Component {
SAVE
- ) + ); } @action diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx index 6c2d24630..ac09da305 100644 --- a/src/client/views/nodes/LinkMenu.tsx +++ b/src/client/views/nodes/LinkMenu.tsx @@ -13,7 +13,7 @@ import React = require("react"); interface Props { docView: DocumentView; - changeFlyout: () => void + changeFlyout: () => void; } @observer @@ -25,9 +25,9 @@ export class LinkMenu extends React.Component { return links.map(link => { let doc = link.GetT(key, Document); if (doc && doc !== FieldWaiting) { - return this._editingLink = link)} type={type} /> + return this._editingLink = link)} type={type} />; } - }) + }); } render() { @@ -43,11 +43,11 @@ export class LinkMenu extends React.Component { {this.renderLinkItems(linkFrom, KeyStore.LinkedFromDocs, "Source: ")} - ) + ); } else { return ( this._editingLink = undefined)}> - ) + ); } } diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 774d9be3e..81ceb37f6 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -17,7 +17,7 @@ import { FieldView, FieldViewProps } from './FieldView'; import "./ImageBox.scss"; import "./PDFBox.scss"; import { Sticky } from './Sticky'; //you should look at sticky and annotation, because they are used here -import React = require("react") +import React = require("react"); import { SelectionManager } from "../../util/SelectionManager"; /** ALSO LOOK AT: Annotation.tsx, Sticky.tsx @@ -55,7 +55,7 @@ import { SelectionManager } from "../../util/SelectionManager"; export class PDFBox extends React.Component { public static LayoutString() { return FieldView.LayoutString(PDFBox); } - private _mainDiv = React.createRef() + private _mainDiv = React.createRef(); private _pdf = React.createRef(); @observable private _renderAsSvg = true; @@ -72,7 +72,7 @@ export class PDFBox extends React.Component { private _currTool: any; //keeps track of current tool button reference private _drawToolOn: boolean = false; //boolean that keeps track of the drawing tool - private _drawTool = React.createRef()//drawing tool button reference + private _drawTool = React.createRef();//drawing tool button reference private _colorTool = React.createRef(); //color button reference private _currColor: string = "black"; //current color that user selected (for ink/pen) @@ -85,7 +85,7 @@ export class PDFBox extends React.Component { @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 _currAnno: any = []; @observable private _interactive: boolean = false; @observable private _loaded: boolean = false; @@ -168,24 +168,24 @@ export class PDFBox extends React.Component { let obj: Object = { parentDivs: [], spans: [] }; //@ts-ignore if (range.commonAncestorContainer.className === 'react-pdf__Page__textContent') { //multiline highlighting case - obj = this.highlightNodes(range.commonAncestorContainer.childNodes) + obj = this.highlightNodes(range.commonAncestorContainer.childNodes); } else { //single line highlighting case - let parentDiv = range.commonAncestorContainer.parentElement + let parentDiv = range.commonAncestorContainer.parentElement; if (parentDiv) { if (parentDiv.className === 'react-pdf__Page__textContent') { //when highlight is overwritten - obj = this.highlightNodes(parentDiv.childNodes) + obj = this.highlightNodes(parentDiv.childNodes); } else { parentDiv.childNodes.forEach((child) => { if (child.nodeName === 'SPAN') { //@ts-ignore - obj.parentDivs.push(parentDiv) + obj.parentDivs.push(parentDiv); //@ts-ignore - child.id = "highlighted" + child.id = "highlighted"; //@ts-ignore - obj.spans.push(child) + obj.spans.push(child); child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler } - }) + }); } } } @@ -196,21 +196,21 @@ export class PDFBox extends React.Component { } highlightNodes = (nodes: NodeListOf) => { - let temp = { parentDivs: [], spans: [] } + let temp = { parentDivs: [], spans: [] }; nodes.forEach((div) => { div.childNodes.forEach((child) => { if (child.nodeName === 'SPAN') { //@ts-ignore - temp.parentDivs.push(div) + temp.parentDivs.push(div); //@ts-ignore - child.id = "highlighted" + child.id = "highlighted"; //@ts-ignore - temp.spans.push(child) + temp.spans.push(child); child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler } - }) + }); - }) + }); return temp; } @@ -228,8 +228,8 @@ export class PDFBox extends React.Component { index = this._pageInfo.divs.indexOf(obj); } } - }) - }) + }); + }); if (this._pageInfo.anno.length >= index + 1) { if (this._currAnno.length === 0) { @@ -239,13 +239,13 @@ export class PDFBox extends React.Component { if (this._currAnno.length === 0) { //if there are no current annotation let div = span.offsetParent; //@ts-ignore - let divX = div.style.left + let divX = div.style.left; //@ts-ignore - let divY = div.style.top + let divY = div.style.top; //slicing "px" from the end divX = divX.slice(0, divX.length - 2); //gets X of the DIV element (parent of Span) divY = divY.slice(0, divY.length - 2); //gets Y of the DIV element (parent of Span) - let annotation = + let annotation = ; this._pageInfo.anno.push(annotation); this._currAnno.push(annotation); } @@ -263,7 +263,7 @@ export class PDFBox extends React.Component { this.makeEditableAndHighlight(color); } } catch (ex) { - this.makeEditableAndHighlight(color) + this.makeEditableAndHighlight(color); } } } @@ -305,7 +305,7 @@ export class PDFBox extends React.Component { } if (this._mainDiv.current) { - let sticky = + let sticky = ; this._pageInfo.area.push(sticky); } this._toolOn = false; @@ -404,19 +404,19 @@ export class PDFBox extends React.Component { if (e instanceof HTMLCanvasElement) { this._pdfCanvas = e; - this._pdfContext = e.getContext("2d") + this._pdfContext = e.getContext("2d"); } - }) + }); } - }) + }); } // bcz: the number of pages should really be set when the document is imported. this.props.Document.SetNumber(KeyStore.NumPages, page._transport.numPages); if (this._perPageInfo.length === 0) { //Makes sure it only runs once - this._perPageInfo = [...Array(page._transport.numPages)] + this._perPageInfo = [...Array(page._transport.numPages)]; } this._loaded = true; } diff --git a/src/client/views/nodes/Sticky.tsx b/src/client/views/nodes/Sticky.tsx index 4a4d69e90..11719831b 100644 --- a/src/client/views/nodes/Sticky.tsx +++ b/src/client/views/nodes/Sticky.tsx @@ -39,7 +39,7 @@ export class Sticky extends React.Component { document.addEventListener("pointermove", this.drawMove); document.addEventListener("pointerup", this.drawUp); } - }; + } //when user drags drawMove = (e: PointerEvent): void => { @@ -49,7 +49,7 @@ export class Sticky extends React.Component { //connects the point this.ctx.lineTo(x, y); this.ctx.stroke(); - }; + } /** * when user lifts the mouse, the drawing ends @@ -58,7 +58,7 @@ export class Sticky extends React.Component { this.ctx.closePath(); console.log(this.ctx); document.removeEventListener("pointermove", this.drawMove); - }; + } render() { return ( diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index a08b320e8..314af64c9 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -1,4 +1,4 @@ -import React = require("react") +import React = require("react"); import { observer } from "mobx-react"; import { FieldWaiting, Opt } from '../../../fields/Field'; import { VideoField } from '../../../fields/VideoField'; @@ -13,8 +13,8 @@ import { number } from "prop-types"; export class VideoBox extends React.Component { private _reactionDisposer: Opt; - private _videoRef = React.createRef() - public static LayoutString() { return FieldView.LayoutString(VideoBox) } + private _videoRef = React.createRef(); + public static LayoutString() { return FieldView.LayoutString(VideoBox); } constructor(props: FieldViewProps) { super(props); @@ -58,7 +58,7 @@ export class VideoBox extends React.Component { render() { let field = this.props.Document.GetT(this.props.fieldKey, VideoField); if (!field || field === FieldWaiting) { - return
Loading
+ return
Loading
; } let path = field.Data.href; trace(); @@ -73,6 +73,6 @@ export class VideoBox extends React.Component { } - ) + ); } } \ No newline at end of file diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index c1d389001..90ce72c41 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -1,9 +1,9 @@ import "./WebBox.scss"; -import React = require("react") +import React = require("react"); import { WebField } from '../../../fields/WebField'; import { FieldViewProps, FieldView } from './FieldView'; import { FieldWaiting } from '../../../fields/Field'; -import { observer } from "mobx-react" +import { observer } from "mobx-react"; import { computed } from 'mobx'; import { KeyStore } from '../../../fields/KeyStore'; @@ -33,6 +33,6 @@ export class WebBox extends React.Component { return (
{content} -
) + ); } } \ No newline at end of file diff --git a/src/debug/Test.tsx b/src/debug/Test.tsx index c8de33f41..11f2b0c4e 100644 --- a/src/debug/Test.tsx +++ b/src/debug/Test.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import JsxParser from 'react-jsx-parser' +import JsxParser from 'react-jsx-parser'; class Hello extends React.Component<{ firstName: string, lastName: string }> { render() { - return
Hello {this.props.firstName} {this.props.lastName}
+ return
Hello {this.props.firstName} {this.props.lastName}
; } } @@ -16,8 +16,8 @@ class Test extends React.Component { firstName: "First", lastName: "Last" } - } - return + }; + return ; } } diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx index f13cccd24..857da1ebb 100644 --- a/src/debug/Viewer.tsx +++ b/src/debug/Viewer.tsx @@ -40,22 +40,22 @@ class ListViewer extends React.Component<{ field: ListField }>{
{this.props.field.Data.map(field => )}
- ) + ); } else { - content = <>[...] ({this.props.field.Id}) + content = <>[...] ({this.props.field.Id}); } return (
{content}
- ) + ); } } @observer class DocumentViewer extends React.Component<{ field: Document }> { - private keyMap: ObservableMap = new ObservableMap + private keyMap: ObservableMap = new ObservableMap; private disposer?: Lambda; @@ -67,12 +67,12 @@ class DocumentViewer extends React.Component<{ field: Document }> { if (field && field instanceof Key) { this.keyMap.set(id, field); } - }) + }); } }); - } - this.disposer = this.props.field._proxies.observe(f) - f() + }; + this.disposer = this.props.field._proxies.observe(f); + f(); } componentWillUnmount() { @@ -89,8 +89,8 @@ class DocumentViewer extends React.Component<{ field: Document }> { ({key ? key.Name : kv[0]}): - ) - }) + ); + }); return (
Document ({this.props.field.Id}) @@ -98,7 +98,7 @@ class DocumentViewer extends React.Component<{ field: Document }> { {fields}
- ) + ); } } @@ -111,15 +111,15 @@ class DebugViewer extends React.Component<{ fieldId: string }> { private error?: string; constructor(props: { fieldId: string }) { - super(props) - this.update() + super(props); + this.update(); } update() { Server.GetField(this.props.fieldId, action((field: Opt) => { this.field = field; if (!field) { - this.error = `Field with id ${this.props.fieldId} not found` + this.error = `Field with id ${this.props.fieldId} not found`; } })); @@ -130,20 +130,20 @@ class DebugViewer extends React.Component<{ fieldId: string }> { if (this.field) { // content = this.field.ToJson(); if (this.field instanceof ListField) { - content = () + content = (); } else if (this.field instanceof Document) { - content = () + content = (); } else if (this.field instanceof BasicField) { - content = () + content = (); } else if (this.field instanceof Key) { - content = () + content = (); } else { - content = (Unrecognized field type) + content = (Unrecognized field type); } } else if (this.error) { - content = Field {this.props.fieldId} not found + content = Field {this.props.fieldId} not found ; } else { - content = Field loading: {this.props.fieldId} + content = Field loading: {this.props.fieldId}; } return content; } @@ -165,8 +165,8 @@ class Viewer extends React.Component { @action onKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter") { - this.ids.push(this.idToAdd) - this.idToAdd = "" + this.ids.push(this.idToAdd); + this.idToAdd = ""; } } @@ -180,7 +180,7 @@ class Viewer extends React.Component { {this.ids.map(id => )} - ) + ); } } diff --git a/src/fields/AudioField.ts b/src/fields/AudioField.ts index 252a5b74e..996d2556d 100644 --- a/src/fields/AudioField.ts +++ b/src/fields/AudioField.ts @@ -25,7 +25,7 @@ export class AudioField extends BasicField { type: Types.Audio, data: this.Data.href, _id: this.Id - } + }; } } \ No newline at end of file diff --git a/src/fields/BasicField.ts b/src/fields/BasicField.ts index 3083a1937..17b1fc4e8 100644 --- a/src/fields/BasicField.ts +++ b/src/fields/BasicField.ts @@ -1,4 +1,4 @@ -import { Field, FieldId } from "./Field" +import { Field, FieldId } from "./Field"; import { observable, computed, action } from "mobx"; import { Server } from "../client/Server"; import { UndoManager } from "../client/util/UndoManager"; @@ -9,7 +9,7 @@ export abstract class BasicField extends Field { this.data = data; if (save) { - Server.UpdateField(this) + Server.UpdateField(this); } } @@ -36,7 +36,7 @@ export abstract class BasicField extends Field { UndoManager.AddEvent({ undo: () => this.Data = oldValue, redo: () => this.Data = value - }) + }); Server.UpdateField(this); } diff --git a/src/fields/Document.ts b/src/fields/Document.ts index 4fa478f32..4584660fb 100644 --- a/src/fields/Document.ts +++ b/src/fields/Document.ts @@ -37,21 +37,24 @@ export class Document extends Field { } } - public Width = () => this.GetNumber(KeyStore.Width, 0) + public Width = () => this.GetNumber(KeyStore.Width, 0); public Height = () => this.GetNumber(KeyStore.Height, this.GetNumber(KeyStore.NativeWidth, 0) ? (this.GetNumber(KeyStore.NativeHeight, 0) / this.GetNumber(KeyStore.NativeWidth, 0)) * this.GetNumber(KeyStore.Width, 0) : 0); - public Scale = () => this.GetNumber(KeyStore.Scale, 1) + public Scale = () => this.GetNumber(KeyStore.Scale, 1); @computed public get Title(): string { let title = this.Get(KeyStore.Title, true); - if (title) - if (title !== FieldWaiting && title instanceof TextField) + if (title) { + if (title !== FieldWaiting && title instanceof TextField) { return title.Data; + } else return "-waiting-"; + } let parTitle = this.GetT(KeyStore.Title, TextField); - if (parTitle) + if (parTitle) { if (parTitle !== FieldWaiting) return parTitle.Data + ".alias"; else return "-waiting-.alias"; + } return "-untitled-"; } @@ -398,11 +401,13 @@ export class Document extends Field { } } else - if (field instanceof Document) // ... TODO bcz: should we copy documents or reference them - copy.Set(key!, field) - else if (field) - copy.Set(key!, field.Copy()) - }) + if (field instanceof Document) { // ... TODO bcz: should we copy documents or reference them + copy.Set(key!, field); + } + else if (field) { + copy.Set(key!, field.Copy()); + } + }); } }); return copy; diff --git a/src/fields/DocumentReference.ts b/src/fields/DocumentReference.ts index 9d3c209b4..6c0c1ef82 100644 --- a/src/fields/DocumentReference.ts +++ b/src/fields/DocumentReference.ts @@ -52,6 +52,6 @@ export class DocumentReference extends Field { type: Types.DocumentReference, data: this.document.Id, _id: this.Id - } + }; } } \ No newline at end of file diff --git a/src/fields/Field.ts b/src/fields/Field.ts index 0d0e56f77..d9db23b9e 100644 --- a/src/fields/Field.ts +++ b/src/fields/Field.ts @@ -65,5 +65,5 @@ export abstract class Field { abstract Copy(): Field; - abstract ToJson(): { _id: string, type: Types, data: any } + abstract ToJson(): { _id: string, type: Types, data: any }; } \ No newline at end of file diff --git a/src/fields/HtmlField.ts b/src/fields/HtmlField.ts index 7cbdf7e58..65665cf7a 100644 --- a/src/fields/HtmlField.ts +++ b/src/fields/HtmlField.ts @@ -20,6 +20,6 @@ export class HtmlField extends BasicField { type: Types.Html, data: this.Data, _id: this.Id, - } + }; } } \ No newline at end of file diff --git a/src/fields/ImageField.ts b/src/fields/ImageField.ts index ef616b2ad..dd843026f 100644 --- a/src/fields/ImageField.ts +++ b/src/fields/ImageField.ts @@ -24,6 +24,6 @@ export class ImageField extends BasicField { type: Types.Image, data: this.Data.href, _id: this.Id - } + }; } } \ No newline at end of file diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts index 2a4ed18e7..ab706ee30 100644 --- a/src/fields/InkField.ts +++ b/src/fields/InkField.ts @@ -36,7 +36,7 @@ export class InkField extends BasicField { type: Types.Ink, data: this.Data, _id: this.Id, - } + }; } UpdateFromServer(data: any) { diff --git a/src/fields/Key.ts b/src/fields/Key.ts index 00d78d516..c7f806b88 100644 --- a/src/fields/Key.ts +++ b/src/fields/Key.ts @@ -1,4 +1,4 @@ -import { Field, FieldId } from "./Field" +import { Field, FieldId } from "./Field"; import { Utils } from "../Utils"; import { observable } from "mobx"; import { Types } from "../server/Message"; @@ -16,7 +16,7 @@ export class Key extends Field { this.name = name; if (save) { - Server.UpdateField(this) + Server.UpdateField(this); } } @@ -45,6 +45,6 @@ export class Key extends Field { type: Types.Key, data: this.name, _id: this.Id - } + }; } } \ No newline at end of file diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts index e24e9c8ec..425408273 100644 --- a/src/fields/KeyStore.ts +++ b/src/fields/KeyStore.ts @@ -56,8 +56,9 @@ export namespace KeyStore { ]; export function KeyLookup(keyid: string) { for (const key of KeyList) { - if (key.Id === keyid) + if (key.Id === keyid) { return key; + } } return undefined; } diff --git a/src/fields/ListField.ts b/src/fields/ListField.ts index 815a3df73..b6eab5f86 100644 --- a/src/fields/ListField.ts +++ b/src/fields/ListField.ts @@ -7,7 +7,7 @@ import { Field, FieldId } from "./Field"; import { FieldMap } from "../client/SocketStub"; export class ListField extends BasicField { - private _proxies: string[] = [] + private _proxies: string[] = []; constructor(data: T[] = [], id?: FieldId, save: boolean = true) { super(data, save, id); this.updateProxies(); @@ -22,23 +22,24 @@ export class ListField extends BasicField { private observeDisposer: Lambda | undefined; private observeList(): void { if (this.observeDisposer) { - this.observeDisposer() + this.observeDisposer(); } this.observeDisposer = observe(this.Data as IObservableArray, (change: IArrayChange | IArraySplice) => { - this.updateProxies() + this.updateProxies(); if (change.type === "splice") { UndoManager.AddEvent({ undo: () => this.Data.splice(change.index, change.addedCount, ...change.removed), redo: () => this.Data.splice(change.index, change.removedCount, ...change.added) - }) + }); } else { UndoManager.AddEvent({ undo: () => this.Data[change.index] = change.oldValue, redo: () => this.Data[change.index] = change.newValue - }) + }); } - if (!this._processingServerUpdate) + if (!this._processingServerUpdate) { Server.UpdateField(this); + } }); } @@ -78,19 +79,23 @@ export class ListField extends BasicField { var proxies = this._proxies.map(p => p); var added = this.data.length < this._proxies.length; var deleted = this.data.length > this._proxies.length; - for (let i = 0; i < dataids.length && added; i++) + for (let i = 0; i < dataids.length && added; i++) { added = proxies.indexOf(dataids[i]) !== -1; - for (let i = 0; i < this._proxies.length && deleted; i++) + } + for (let i = 0; i < this._proxies.length && deleted; i++) { deleted = dataids.indexOf(proxies[i]) !== -1; + } this._processingServerUpdate = true; for (let i = 0; i < proxies.length && added; i++) { - if (dataids.indexOf(proxies[i]) === -1) + if (dataids.indexOf(proxies[i]) === -1) { this.Data.splice(i, 0, fields[proxies[i]] as T); + } } for (let i = dataids.length - 1; i >= 0 && deleted; i--) { - if (proxies.indexOf(dataids[i]) === -1) + if (proxies.indexOf(dataids[i]) === -1) { this.Data.splice(i, 1); + } } if (!added && !deleted) {// otherwise, just rebuild the whole list this.setData(proxies.map(id => fields[id] as T)); @@ -98,7 +103,7 @@ export class ListField extends BasicField { this._processingServerUpdate = false; } callback(this); - })) + })); } ToScriptString(): string { @@ -114,12 +119,12 @@ export class ListField extends BasicField { type: Types.List, data: this._proxies || [], _id: this.Id - } + }; } static FromJson(id: string, ids: string[]): ListField { let list = new ListField([], id, false); list._proxies = ids; - return list + return list; } } \ No newline at end of file diff --git a/src/fields/NumberField.ts b/src/fields/NumberField.ts index e0c8648de..45b920e31 100644 --- a/src/fields/NumberField.ts +++ b/src/fields/NumberField.ts @@ -1,4 +1,4 @@ -import { BasicField } from "./BasicField" +import { BasicField } from "./BasicField"; import { Types } from "../server/Message"; import { FieldId } from "./Field"; @@ -20,6 +20,6 @@ export class NumberField extends BasicField { _id: this.Id, type: Types.Number, data: this.Data - } + }; } } \ No newline at end of file diff --git a/src/fields/PDFField.ts b/src/fields/PDFField.ts index 436c1cf2b..65e179894 100644 --- a/src/fields/PDFField.ts +++ b/src/fields/PDFField.ts @@ -1,6 +1,6 @@ import { BasicField } from "./BasicField"; import { Field, FieldId } from "./Field"; -import { observable } from "mobx" +import { observable } from "mobx"; import { Types } from "../server/Message"; @@ -27,7 +27,7 @@ export class PDFField extends BasicField { type: Types.PDF, data: this.Data.href, _id: this.Id - } + }; } @observable diff --git a/src/fields/RichTextField.ts b/src/fields/RichTextField.ts index 5efb43314..6f7b3074a 100644 --- a/src/fields/RichTextField.ts +++ b/src/fields/RichTextField.ts @@ -20,7 +20,7 @@ export class RichTextField extends BasicField { type: Types.RichText, data: this.Data, _id: this.Id - } + }; } } \ No newline at end of file diff --git a/src/fields/TextField.ts b/src/fields/TextField.ts index 71d8ea310..69d26f42f 100644 --- a/src/fields/TextField.ts +++ b/src/fields/TextField.ts @@ -1,4 +1,4 @@ -import { BasicField } from "./BasicField" +import { BasicField } from "./BasicField"; import { FieldId } from "./Field"; import { Types } from "../server/Message"; @@ -20,6 +20,6 @@ export class TextField extends BasicField { type: Types.Text, data: this.Data, _id: this.Id - } + }; } } \ No newline at end of file diff --git a/src/fields/TupleField.ts b/src/fields/TupleField.ts index e2162c751..ad0f6f350 100644 --- a/src/fields/TupleField.ts +++ b/src/fields/TupleField.ts @@ -21,7 +21,7 @@ export class TupleField extends BasicField<[T, U]> { UndoManager.AddEvent({ undo: () => this.Data[change.index] = change.oldValue, redo: () => this.Data[change.index] = change.newValue - }) + }); Server.UpdateField(this); } else { throw new Error("Why are you messing with the length of a tuple, huh?"); @@ -31,7 +31,7 @@ export class TupleField extends BasicField<[T, U]> { protected setData(value: [T, U]) { if (this.observeDisposer) { - this.observeDisposer() + this.observeDisposer(); } this.data = observable(value) as (T | U)[] as [T, U]; this.observeTuple(); @@ -54,6 +54,6 @@ export class TupleField extends BasicField<[T, U]> { type: Types.Tuple, data: this.Data, _id: this.Id - } + }; } } \ No newline at end of file diff --git a/src/fields/VideoField.ts b/src/fields/VideoField.ts index 992cc1641..d7cd7e968 100644 --- a/src/fields/VideoField.ts +++ b/src/fields/VideoField.ts @@ -24,7 +24,7 @@ export class VideoField extends BasicField { type: Types.Video, data: this.Data.href, _id: this.Id - } + }; } } \ No newline at end of file diff --git a/src/fields/WebField.ts b/src/fields/WebField.ts index 0cbcc6d33..6023e9e6b 100644 --- a/src/fields/WebField.ts +++ b/src/fields/WebField.ts @@ -24,7 +24,7 @@ export class WebField extends BasicField { type: Types.Web, data: this.Data.href, _id: this.Id - } + }; } } \ No newline at end of file diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index c3684a0eb..ec89a1194 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -22,7 +22,7 @@ import { Opt } from '../fields/Field'; // } const onFileLoad = async (file: any) => { - let imgPrev = document.getElementById("img_preview") + let imgPrev = document.getElementById("img_preview"); if (imgPrev) { let files: File[] = file.target.files; if (files.length !== 0) { @@ -30,15 +30,15 @@ const onFileLoad = async (file: any) => { let formData = new FormData(); formData.append("file", files[0]); - const upload = window.location.origin + "/upload" + const upload = window.location.origin + "/upload"; const res = await fetch(upload, { method: 'POST', body: formData }); const json = await res.json(); json.map(async (file: any) => { - let path = window.location.origin + file - var doc: Document = Documents.ImageDocument(path, { nativeWidth: 200, width: 200 }) + let path = window.location.origin + file; + var doc: Document = Documents.ImageDocument(path, { nativeWidth: 200, width: 200 }); const res = await rp.get(ServerUtils.prepend(RouteStore.getUserDocumentId)); if (!res) { @@ -47,12 +47,12 @@ const onFileLoad = async (file: any) => { const field = await Server.GetField(res); let pending: Opt; if (field instanceof Document) { - pending = await field.GetTAsync(KeyStore.OptionalRightCollection, Document) + pending = await field.GetTAsync(KeyStore.OptionalRightCollection, Document); } if (pending) { pending.GetOrCreateAsync(KeyStore.Data, ListField, list => { list.Data.push(doc); - }) + }); } }); @@ -61,7 +61,7 @@ const onFileLoad = async (file: any) => { //imgPrev.setAttribute("src", window.location.origin + files[0].name) } } -} +}; ReactDOM.render((
diff --git a/src/server/Client.ts b/src/server/Client.ts index 6b8841658..02402a5a0 100644 --- a/src/server/Client.ts +++ b/src/server/Client.ts @@ -2,14 +2,14 @@ import { computed } from "mobx"; export class Client { constructor(guid: string) { - this.guid = guid + this.guid = guid; } private guid: string; @computed public get GUID(): string { - return this.guid + return this.guid; } } \ No newline at end of file diff --git a/src/server/authentication/config/passport.ts b/src/server/authentication/config/passport.ts index b6fe15655..d42741410 100644 --- a/src/server/authentication/config/passport.ts +++ b/src/server/authentication/config/passport.ts @@ -1,4 +1,4 @@ -import * as passport from 'passport' +import * as passport from 'passport'; import * as passportLocal from 'passport-local'; import * as mongodb from 'mongodb'; import * as _ from "lodash"; @@ -22,7 +22,7 @@ passport.deserializeUser((id, done) => { passport.use(new LocalStrategy({ usernameField: 'email', passReqToCallback: true }, (req, email, password, done) => { User.findOne({ email: email.toLowerCase() }, (error: any, user: any) => { if (error) return done(error); - if (!user) return done(undefined, false, { message: "Invalid email or password" }) // invalid email + if (!user) return done(undefined, false, { message: "Invalid email or password" }); // invalid email user.comparePassword(password, (error: Error, isMatch: boolean) => { if (error) return done(error); if (!isMatch) return done(undefined, false, { message: "Invalid email or password" }); // invalid password @@ -37,7 +37,7 @@ export let isAuthenticated = (req: Request, res: Response, next: NextFunction) = return next(); } return res.redirect(RouteStore.login); -} +}; export let isAuthorized = (req: Request, res: Response, next: NextFunction) => { const provider = req.path.split("/").slice(-1)[0]; diff --git a/src/server/authentication/controllers/WorkspacesMenu.tsx b/src/server/authentication/controllers/WorkspacesMenu.tsx index 835432c8e..b08c1aebe 100644 --- a/src/server/authentication/controllers/WorkspacesMenu.tsx +++ b/src/server/authentication/controllers/WorkspacesMenu.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { observable, action, configure, reaction, computed, ObservableMap, runInAction } from 'mobx'; import { observer } from "mobx-react"; -import './WorkspacesMenu.css' +import './WorkspacesMenu.css'; import { Document } from '../../../fields/Document'; import { EditableView } from '../../../client/views/EditableView'; import { KeyStore } from '../../../fields/KeyStore'; diff --git a/src/server/authentication/controllers/user_controller.ts b/src/server/authentication/controllers/user_controller.ts index 2bbb334b5..1dacdf3fa 100644 --- a/src/server/authentication/controllers/user_controller.ts +++ b/src/server/authentication/controllers/user_controller.ts @@ -109,12 +109,12 @@ export let postLogin = (req: Request, res: Response, next: NextFunction) => { } passport.authenticate("local", (err: Error, user: DashUserModel, info: IVerifyOptions) => { - if (err) { next(err); return } + if (err) { next(err); return; } if (!user) { return res.redirect(RouteStore.signup); } req.logIn(user, (err) => { - if (err) { next(err); return } + if (err) { next(err); return; } res.redirect(RouteStore.home); }); })(req, res, next); @@ -132,14 +132,14 @@ export let getLogout = (req: Request, res: Response) => { sess.destroy((err) => { if (err) { console.log(err); } }); } res.redirect(RouteStore.login); -} +}; export let getForgot = function (req: Request, res: Response) { res.render("forgot.pug", { title: "Recover Password", user: req.user, }); -} +}; export let postForgot = function (req: Request, res: Response, next: NextFunction) { const email = req.body.email; @@ -152,14 +152,14 @@ export let postForgot = function (req: Request, res: Response, next: NextFunctio return; } done(null, buffer.toString('hex')); - }) + }); }, function (token: string, done: any) { User.findOne({ email }, function (err, user: DashUserModel) { if (!user) { // NO ACCOUNT WITH SUBMITTED EMAIL res.redirect(RouteStore.forgot); - return + return; } user.passwordResetToken = token; user.passwordResetExpires = new Date(Date.now() + 3600000); // 1 HOUR @@ -193,8 +193,8 @@ export let postForgot = function (req: Request, res: Response, next: NextFunctio ], function (err) { if (err) return next(err); res.redirect(RouteStore.forgot); - }) -} + }); +}; export let getReset = function (req: Request, res: Response) { User.findOne({ passwordResetToken: req.params.token, passwordResetExpires: { $gt: Date.now() } }, function (err, user: DashUserModel) { @@ -206,7 +206,7 @@ export let getReset = function (req: Request, res: Response) { user: req.user, }); }); -} +}; export let postReset = function (req: Request, res: Response) { async.waterfall([ @@ -263,4 +263,4 @@ export let postReset = function (req: Request, res: Response) { ], function (err) { res.redirect(RouteStore.login); }); -} \ No newline at end of file +}; \ No newline at end of file diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts index 0ac85b446..13eddafbf 100644 --- a/src/server/authentication/models/current_user_utils.ts +++ b/src/server/authentication/models/current_user_utils.ts @@ -70,7 +70,7 @@ export class CurrentUserUtils { let doc = new Document(id); doc.Set(KeyStore.Workspaces, new ListField()); - doc.Set(KeyStore.OptionalRightCollection, Documents.SchemaDocument([], { title: "Pending documents" })) + doc.Set(KeyStore.OptionalRightCollection, Documents.SchemaDocument([], { title: "Pending documents" })); return doc; } @@ -81,7 +81,7 @@ export class CurrentUserUtils { CurrentUserUtils.curr_id = obj.id as string; CurrentUserUtils.curr_email = obj.email as string; } else { - throw new Error("There should be a user! Why does Dash think there isn't one?") + throw new Error("There should be a user! Why does Dash think there isn't one?"); } }); let userDocPromise = rp.get(ServerUtils.prepend(RouteStore.getUserDocumentId)).then(id => { @@ -92,9 +92,9 @@ export class CurrentUserUtils { } else { this.user_document = this.createUserDocument(id); } - }) + }); } else { - throw new Error("There should be a user id! Why does Dash think there isn't one?") + throw new Error("There should be a user id! Why does Dash think there isn't one?"); } }); return Promise.all([userPromise, userDocPromise]); diff --git a/src/server/authentication/models/user_model.ts b/src/server/authentication/models/user_model.ts index 81580aad5..1c6926517 100644 --- a/src/server/authentication/models/user_model.ts +++ b/src/server/authentication/models/user_model.ts @@ -2,7 +2,7 @@ import * as bcrypt from "bcrypt-nodejs"; //@ts-ignore import * as mongoose from "mongoose"; -var url = 'mongodb://localhost:27017/Dash' +var url = 'mongodb://localhost:27017/Dash'; mongoose.connect(url, { useNewUrlParser: true }); diff --git a/src/server/database.ts b/src/server/database.ts index 415acc09a..0bc806253 100644 --- a/src/server/database.ts +++ b/src/server/database.ts @@ -1,15 +1,15 @@ import * as mongodb from 'mongodb'; export class Database { - public static Instance = new Database() + public static Instance = new Database(); private MongoClient = mongodb.MongoClient; private url = 'mongodb://localhost:27017/Dash'; private db?: mongodb.Db; constructor() { this.MongoClient.connect(this.url, (err, client) => { - this.db = client.db() - }) + this.db = client.db(); + }); } private currentWrites: { [_id: string]: Promise } = {}; @@ -30,19 +30,19 @@ export class Database { // console.log(JSON.stringify(res.result)); // } if (this.currentWrites[id] === promise) { - delete this.currentWrites[id] + delete this.currentWrites[id]; } if (resolve) { resolve(); } callback(); }); - } + }; if (prom) { const newProm: Promise = prom.then(() => run(newProm)); this.currentWrites[id] = newProm; } else { - const newProm: Promise = new Promise(res => run(newProm, res)) + const newProm: Promise = new Promise(res => run(newProm, res)); this.currentWrites[id] = newProm; } } @@ -61,7 +61,7 @@ export class Database { let collection = this.db.collection(collectionName); collection.deleteMany({}, res); } - }) + }); } public insert(kvpairs: any) { @@ -70,7 +70,7 @@ export class Database { collection.insertOne(kvpairs, (err: any, res: any) => { if (err) { // console.log(err) - return + return; } }); } @@ -81,30 +81,30 @@ export class Database { if (this.db) { let collection = this.db.collection('documents'); collection.findOne({ _id: id }, (err: any, res: any) => { - result = res + result = res; if (!result) { - fn(undefined) + fn(undefined); } - fn(result) - }) - }; + fn(result); + }); + } } public getDocuments(ids: string[], fn: (res: any) => void) { if (this.db) { let collection = this.db.collection('documents'); - let cursor = collection.find({ _id: { "$in": ids } }) + let cursor = collection.find({ _id: { "$in": ids } }); cursor.toArray((err, docs) => { if (err) { console.log(err.message); console.log(err.errmsg); } fn(docs); - }) - }; + }); + } } public print() { - console.log("db says hi!") + console.log("db says hi!"); } } diff --git a/src/server/index.ts b/src/server/index.ts index f60e6e293..b9c7448b4 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -1,10 +1,10 @@ -import * as express from 'express' -const app = express() -import * as webpack from 'webpack' +import * as express from 'express'; +const app = express(); +import * as webpack from 'webpack'; import * as wdm from 'webpack-dev-middleware'; import * as whm from 'webpack-hot-middleware'; -import * as path from 'path' -import * as formidable from 'formidable' +import * as path from 'path'; +import * as formidable from 'formidable'; import * as passport from 'passport'; import { MessageStore, Transferable } from "./Message"; import { Client } from './Client'; @@ -13,7 +13,7 @@ import { Utils } from '../Utils'; import { ObservableMap } from 'mobx'; import { FieldId, Field } from '../fields/Field'; import { Database } from './database'; -import * as io from 'socket.io' +import * as io from 'socket.io'; import { getLogin, postLogin, getSignup, postSignup, getLogout, postReset, getForgot, postForgot, getReset } from './authentication/controllers/user_controller'; const config = require('../../webpack.config'); const compiler = webpack(config); @@ -31,19 +31,19 @@ const MongoStore = require('connect-mongo')(session); const mongoose = require('mongoose'); import { DashUserModel } from './authentication/models/user_model'; import * as fs from 'fs'; -import * as request from 'request' +import * as request from 'request'; import { RouteStore } from './RouteStore'; -import { exec } from 'child_process' +import { exec } from 'child_process'; const download = (url: string, dest: fs.PathLike) => { request.get(url).pipe(fs.createWriteStream(dest)); -} +}; const mongoUrl = 'mongodb://localhost:27017/Dash'; -mongoose.connect(mongoUrl) +mongoose.connect(mongoUrl); mongoose.connection.on('connected', function () { console.log("connected"); -}) +}); // SESSION MANAGEMENT AND AUTHENTICATION MIDDLEWARE // ORDER OF IMPORTS MATTERS @@ -73,7 +73,7 @@ app.use((req, res, next) => { app.get("/hello", (req, res) => { res.send("

Hello

"); -}) +}); enum Method { GET, @@ -98,7 +98,7 @@ function addSecureRoute(method: Method, const dashUser: DashUserModel = req.user; if (!dashUser) return onRejection(res); handler(dashUser, res, req); - } + }; subscribers.forEach(route => { switch (method) { case Method.GET: @@ -116,7 +116,7 @@ function addSecureRoute(method: Method, let FieldStore: ObservableMap = new ObservableMap(); app.use(express.static(__dirname + RouteStore.public)); -app.use(RouteStore.images, express.static(__dirname + RouteStore.public)) +app.use(RouteStore.images, express.static(__dirname + RouteStore.public)); app.get("/pull", (req, res) => { exec('"C:\\Program Files\\Git\\git-bash.exe" -c "git pull"', (err, stdout, stderr) => { @@ -125,7 +125,7 @@ app.get("/pull", (req, res) => { return; } res.redirect("/"); - }) + }); }); // GETTERS @@ -178,13 +178,13 @@ addSecureRoute( addSecureRoute( Method.POST, (user, res, req) => { - let form = new formidable.IncomingForm() - form.uploadDir = __dirname + "/public/files/" - form.keepExtensions = true + let form = new formidable.IncomingForm(); + form.uploadDir = __dirname + "/public/files/"; + form.keepExtensions = true; // let path = req.body.path; - console.log("upload") + console.log("upload"); form.parse(req, (err, fields, files) => { - console.log("parsing") + console.log("parsing"); let names: any[] = []; for (const name in files) { let file = files[name]; @@ -211,8 +211,8 @@ app.post(RouteStore.login, postLogin); app.get(RouteStore.logout, getLogout); // FORGOT PASSWORD EMAIL HANDLING -app.get(RouteStore.forgot, getForgot) -app.post(RouteStore.forgot, postForgot) +app.get(RouteStore.forgot, getForgot); +app.post(RouteStore.forgot, postForgot); // RESET PASSWORD EMAIL HANDLING app.get(RouteStore.reset, getReset); @@ -232,32 +232,32 @@ app.get(RouteStore.deleteAll, (req, res) => { app.use(wdm(compiler, { publicPath: config.output.publicPath -})) +})); -app.use(whm(compiler)) +app.use(whm(compiler)); // start the Express server app.listen(port, () => { console.log(`server started at http://localhost:${port}`); -}) +}); const server = io(); interface Map { [key: string]: Client; } -let clients: Map = {} +let clients: Map = {}; server.on("connection", function (socket: Socket) { - console.log("a user has connected") + console.log("a user has connected"); - Utils.Emit(socket, MessageStore.Foo, "handshooken") + Utils.Emit(socket, MessageStore.Foo, "handshooken"); - Utils.AddServerHandler(socket, MessageStore.Bar, barReceived) - Utils.AddServerHandler(socket, MessageStore.SetField, (args) => setField(socket, args)) - Utils.AddServerHandlerCallback(socket, MessageStore.GetField, getField) - Utils.AddServerHandlerCallback(socket, MessageStore.GetFields, getFields) - Utils.AddServerHandler(socket, MessageStore.DeleteAll, deleteFields) -}) + Utils.AddServerHandler(socket, MessageStore.Bar, barReceived); + Utils.AddServerHandler(socket, MessageStore.SetField, (args) => setField(socket, args)); + Utils.AddServerHandlerCallback(socket, MessageStore.GetField, getField); + Utils.AddServerHandlerCallback(socket, MessageStore.GetFields, getFields); + Utils.AddServerHandler(socket, MessageStore.DeleteAll, deleteFields); +}); function deleteFields() { return Database.Instance.deleteAll(); @@ -276,12 +276,12 @@ function barReceived(guid: String) { function getField([id, callback]: [string, (result: any) => void]) { Database.Instance.getDocument(id, (result: any) => { if (result) { - callback(result) + callback(result); } else { - callback(undefined) + callback(undefined); } - }) + }); } function getFields([ids, callback]: [string[], (result: any) => void]) { @@ -291,7 +291,7 @@ function getFields([ids, callback]: [string[], (result: any) => void]) { function setField(socket: Socket, newValue: Transferable) { Database.Instance.update(newValue._id, newValue, () => { socket.broadcast.emit(MessageStore.SetField.Message, newValue); - }) + }); } server.listen(serverPort); diff --git a/test/test.ts b/test/test.ts index db24cae5f..16cace026 100644 --- a/test/test.ts +++ b/test/test.ts @@ -1,6 +1,6 @@ import { NumberField } from "../src/fields/NumberField"; import { expect } from 'chai'; -import 'mocha' +import 'mocha'; import { Key } from "../src/fields/Key"; import { Document } from "../src/fields/Document"; import { autorun, reaction } from "mobx"; @@ -17,7 +17,7 @@ describe('Number Controller', () => { it('Should update', () => { const numController = new NumberField(15); let ran = false; - reaction(() => numController.Data, (data) => { ran = true; }) + reaction(() => numController.Data, (data) => { ran = true; }); expect(ran).to.equal(false); numController.Data = 5; expect(ran).to.equal(true); @@ -42,7 +42,7 @@ describe("Document", () => { let key = new Key("Test"); let key2 = new Key("Test2"); let ran = false; - reaction(() => doc.Get(key), (field) => { ran = true }); + reaction(() => doc.Get(key), (field) => { ran = true; }); expect(ran).to.equal(false); doc.Set(key2, new NumberField(4)); diff --git a/tslint.json b/tslint.json index 54876916e..aa4dee4e5 100644 --- a/tslint.json +++ b/tslint.json @@ -27,14 +27,14 @@ "arrow-return-shorthand": true, // "object-literal-shorthand": true, // "object-literal-sort-keys": true, - // "semicolon": [ - // true, - // "always" - // ], - // "curly": [ - // true, - // "ignore-same-line" - // ], + "semicolon": [ + true, + "always" + ], + "curly": [ + true, + "ignore-same-line" + ], // "quotemark": [ // true, // "double", -- cgit v1.2.3-70-g09d2 From 7e05ea0058766a3afa2ec82f6312f2df87178883 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 14 Apr 2019 12:23:10 -0400 Subject: starting to add LOD --- src/client/views/Main.tsx | 1 + .../views/collections/CollectionBaseView.tsx | 6 +- .../views/collections/CollectionDockingView.tsx | 1 + .../views/collections/CollectionSchemaView.tsx | 1 + .../collectionFreeForm/CollectionFreeFormView.tsx | 72 +++++++++++++--------- .../views/nodes/CollectionFreeFormDocumentView.tsx | 13 ++-- src/client/views/nodes/DocumentView.tsx | 1 + src/client/views/nodes/FieldView.tsx | 1 + src/fields/KeyStore.ts | 1 + 9 files changed, 57 insertions(+), 40 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index ed61aa5a7..babd3be2a 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -295,6 +295,7 @@ export class Main extends React.Component { { } return false; } + @computed get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey.Id === KeyStore.Annotations.Id; } // bcz: ? Why do we need to compare Id's? @action.bound addDocument(doc: Document, allowDuplicates: boolean = false): boolean { let props = this.props; var curPage = props.Document.GetNumber(KeyStore.CurPage, -1); doc.SetOnPrototype(KeyStore.Page, new NumberField(curPage)); + if (this.isAnnotationOverlay) { + doc.SetOnPrototype(KeyStore.Zoom, new NumberField(this.props.Document.GetNumber(KeyStore.Scale, 1))); + } if (curPage >= 0) { doc.SetOnPrototype(KeyStore.AnnotationOn, props.Document); } diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index eb1cd1c09..6d772b90e 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -343,6 +343,7 @@ export class DockedFrameRenderer extends React.Component { - this.props.addDocument(this.bringToFront(newBox), false) + public 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[]) => { SelectionManager.DeselectAll; @@ -131,25 +135,27 @@ export class CollectionFreeFormView extends CollectionSubView { let x = this.props.Document.GetNumber(KeyStore.PanX, 0); let y = this.props.Document.GetNumber(KeyStore.PanY, 0); let docs = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); - let minx = docs.length ? docs[0].GetNumber(KeyStore.X, 0) : 0; - let maxx = docs.length ? docs[0].GetNumber(KeyStore.Width, 0) + 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 ranges = docs.filter(doc => doc).reduce((range, doc) => { - let x = doc.GetNumber(KeyStore.X, 0); - let xe = x + doc.GetNumber(KeyStore.Width, 0); - let y = doc.GetNumber(KeyStore.Y, 0); - let ye = y + doc.GetNumber(KeyStore.Height, 0); - 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 [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); - 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; + 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 miny = docs.length ? docs[0].GetNumber(KeyStore.Y, 0) : 0; + let maxy = docs.length ? docs[0].GetNumber(KeyStore.Height, 0) + 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); + let y = doc.GetNumber(KeyStore.Y, 0); + let ye = y + doc.GetNumber(KeyStore.Height, 0); + 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; + 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._lastX = e.pageX; this._lastY = e.pageY; @@ -161,9 +167,9 @@ export class CollectionFreeFormView extends CollectionSubView { @action onPointerWheel = (e: React.WheelEvent): void => { - if (!this.props.active()) { - return; - } + // if (!this.props.active()) { + // return; + // } e.stopPropagation(); let coefficient = 1000; @@ -255,9 +261,10 @@ export class CollectionFreeFormView extends CollectionSubView { this.props.focus(this.props.Document); } - getDocumentViewProps(document: Document): DocumentViewProps { + getDocumentViewProps(document: Document, opacity: number): DocumentViewProps { return { Document: document, + opacity: opacity, addDocument: this.props.addDocument, removeDocument: this.props.removeDocument, moveDocument: this.props.moveDocument, @@ -277,25 +284,30 @@ export class CollectionFreeFormView extends CollectionSubView { @computed get views() { var curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1); - return this.props.Document.GetList(this.props.fieldKey, [] as Document[]).filter(doc => doc).reduce((prev, doc) => { + let docviews = this.props.Document.GetList(this.props.fieldKey, [] as Document[]).filter(doc => doc).reduce((prev, doc) => { var page = doc.GetNumber(KeyStore.Page, -1); - if (page === curPage || page === -1) { - prev.push(); + var zoom = doc.GetNumber(KeyStore.Zoom, 1); + var dv = DocumentManager.Instance.getDocumentView(doc); + let opacity = this.isAnnotationOverlay && (!dv || !SelectionManager.IsSelected(dv)) ? 1 - Math.abs(zoom - this.scale) : 1; + if ((page === curPage || page === -1)) { + prev.push(); } return prev; }, [] as JSX.Element[]); + untracked(() => this._selectOnLoaded = ""); + return docviews; } @computed get backgroundView() { return !this.backgroundLayout ? (null) : - (); } @computed get overlayView() { return !this.overlayLayout ? (null) : - (); } diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 77f41105f..0aa152209 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -6,7 +6,6 @@ import { Transform } from "../../util/Transform"; import { DocumentView, DocumentViewProps } from "./DocumentView"; import "./DocumentView.scss"; import React = require("react"); -import { thisExpression } from "babel-types"; @observer @@ -16,18 +15,13 @@ export class CollectionFreeFormDocumentView extends React.Component 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.contentScaling()).scale(1 / this.zoom) @computed get docView() { @@ -74,6 +68,7 @@ export class CollectionFreeFormDocumentView extends React.Component; Document: Document; + opacity: number; addDocument?: (doc: Document, allowDuplicates?: boolean) => boolean; removeDocument?: (doc: Document) => boolean; moveDocument?: (doc: Document, targetCollection: Document, addDocument: (document: Document) => boolean) => boolean; diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 0037d7b28..e0c5e19fb 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -79,6 +79,7 @@ export class FieldView extends React.Component { 1} PanelWidth={() => 100} diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts index da2d7268f..19431bbe3 100644 --- a/src/fields/KeyStore.ts +++ b/src/fields/KeyStore.ts @@ -15,6 +15,7 @@ export namespace KeyStore { export const Width = new Key("Width"); export const Height = new Key("Height"); export const ZIndex = new Key("ZIndex"); + export const Zoom = new Key("Zoom"); export const Data = new Key("Data"); export const Annotations = new Key("Annotations"); export const ViewType = new Key("ViewType"); -- cgit v1.2.3-70-g09d2 From 6c0b421db6aa3204bbc6e42139d240f503000b5d Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 15 Apr 2019 11:59:50 -0400 Subject: fixed zoom fading somewhat. --- src/Utils.ts | 15 ++++++++++ src/client/northstar/dash-fields/HistogramField.ts | 12 ++------ src/client/views/Main.tsx | 3 +- src/client/views/MainOverlayTextBox.tsx | 3 +- .../views/collections/CollectionDockingView.tsx | 3 +- .../views/collections/CollectionSchemaView.tsx | 3 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 19 ++++++------- .../views/nodes/CollectionFreeFormDocumentView.tsx | 18 ++++++++---- src/client/views/nodes/DocumentContentsView.tsx | 33 ++-------------------- src/client/views/nodes/DocumentView.tsx | 1 - src/client/views/nodes/FieldView.tsx | 3 +- src/client/views/nodes/FormattedTextBox.tsx | 4 ++- 12 files changed, 51 insertions(+), 66 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/Utils.ts b/src/Utils.ts index e07d4e82d..dec6245ef 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -87,10 +87,25 @@ export class Utils { } } +export function OmitKeys(obj: any, keys: any, addKeyFunc?: (dup: any) => void) { + var dup: any = {}; + for (var key in obj) { + if (keys.indexOf(key) === -1) { + dup[key] = obj[key]; + } + } + addKeyFunc && addKeyFunc(dup); + return dup; +} + export function returnTrue() { return true; } export function returnFalse() { return false; } +export function returnOne() { return 1; } + +export function returnZero() { return 0; } + export function emptyFunction() { } export function emptyDocFunction(doc: Document) { } diff --git a/src/client/northstar/dash-fields/HistogramField.ts b/src/client/northstar/dash-fields/HistogramField.ts index 82de51d56..c699691a4 100644 --- a/src/client/northstar/dash-fields/HistogramField.ts +++ b/src/client/northstar/dash-fields/HistogramField.ts @@ -6,6 +6,7 @@ import { BasicField } from "../../../fields/BasicField"; import { Field, FieldId } from "../../../fields/Field"; import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils"; import { Types } from "../../../server/Message"; +import { OmitKeys } from "../../../Utils"; export class HistogramField extends BasicField { @@ -13,17 +14,8 @@ export class HistogramField extends BasicField { super(data ? data : HistogramOperation.Empty, save, id); } - omitKeys(obj: any, keys: any) { - var dup: any = {}; - for (var key in obj) { - if (keys.indexOf(key) === -1) { - dup[key] = obj[key]; - } - } - return dup; - } toString(): string { - return JSON.stringify(this.omitKeys(this.Data, ['Links', 'BrushLinks', 'Result', 'BrushColors', 'FilterModels', 'FilterOperand'])); + return JSON.stringify(OmitKeys(this.Data, ['Links', 'BrushLinks', 'Result', 'BrushColors', 'FilterModels', 'FilterOperand'])); } Copy(): Field { diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index d26586216..98ef329c7 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -17,7 +17,7 @@ import { CurrentUserUtils } from '../../server/authentication/models/current_use import { MessageStore } from '../../server/Message'; import { RouteStore } from '../../server/RouteStore'; import { ServerUtils } from '../../server/ServerUtil'; -import { emptyDocFunction, emptyFunction, returnTrue, Utils } from '../../Utils'; +import { emptyDocFunction, emptyFunction, returnTrue, Utils, returnOne } from '../../Utils'; import { Documents } from '../documents/Documents'; import { ColumnAttributeModel } from '../northstar/core/attribute/AttributeModel'; import { AttributeTransformationModel } from '../northstar/core/attribute/AttributeTransformationModel'; @@ -178,7 +178,6 @@ export class Main extends React.Component { @action textScroll = (e: React.UIEvent) => { if (this._textProxyDiv.current && this._textTargetDiv) { - this._textTargetDiv.scrollTop = this.TextScroll = this._textProxyDiv.current.children[0].scrollTop; + this.TextScroll = (e as any)._targetInst.stateNode.scrollTop;// this._textProxyDiv.current.children[0].scrollTop; + this._textTargetDiv.scrollTop = this.TextScroll; } } diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 4f7d4fc0d..2b96e7678 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -8,7 +8,7 @@ import { Document } from "../../../fields/Document"; import { KeyStore } from "../../../fields/KeyStore"; import Measure from "react-measure"; import { FieldId, Opt, Field, FieldWaiting } from "../../../fields/Field"; -import { Utils, returnTrue, emptyFunction, emptyDocFunction } from "../../../Utils"; +import { Utils, returnTrue, emptyFunction, emptyDocFunction, returnOne } from "../../../Utils"; import { Server } from "../../Server"; import { undoBatch } from "../../util/UndoManager"; import { DocumentView } from "../nodes/DocumentView"; @@ -343,7 +343,6 @@ export class DockedFrameRenderer extends React.Component { ); + let zoomFade = !this.isAnnotationOverlay || (dv && SelectionManager.IsSelected(dv)) ? 1 : + Math.max(0, 2 - (zoom < this.scale ? this.scale / zoom : zoom / this.scale)); + if (page === curPage || page === -1) { + prev.push(); } return prev; }, [] as JSX.Element[]); @@ -305,13 +304,13 @@ export class CollectionFreeFormView extends CollectionSubView { @computed get backgroundView() { return !this.backgroundLayout ? (null) : - (); } @computed get overlayView() { return !this.overlayLayout ? (null) : - (); } diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 0aa152209..b00cefbf6 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -1,4 +1,4 @@ -import { computed } from "mobx"; +import { computed, trace } from "mobx"; import { observer } from "mobx-react"; import { KeyStore } from "../../../fields/KeyStore"; import { NumberField } from "../../../fields/NumberField"; @@ -6,13 +6,17 @@ import { Transform } from "../../util/Transform"; import { DocumentView, DocumentViewProps } from "./DocumentView"; import "./DocumentView.scss"; import React = require("react"); +import { OmitKeys } from "../../../Utils"; +export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { + zoomFade: number; +} @observer -export class CollectionFreeFormDocumentView extends React.Component { +export class CollectionFreeFormDocumentView extends React.Component { private _mainCont = React.createRef(); - constructor(props: DocumentViewProps) { + constructor(props: CollectionFreeFormDocumentViewProps) { super(props); } @@ -55,20 +59,24 @@ export class CollectionFreeFormDocumentView extends React.Component; } + @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() { return (
; @@ -44,35 +44,8 @@ export class DocumentContentsView extends React.Component obj.active = this.props.parentActive) }; + for (const key of this.layoutKeys) { bindings[key.Name + "Key"] = key; // this maps string values of the form Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 935540af1..bcd746024 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -28,7 +28,6 @@ import React = require("react"); export interface DocumentViewProps { ContainingCollectionView: Opt; Document: Document; - opacity: number; addDocument?: (doc: Document, allowDuplicates?: boolean) => boolean; removeDocument?: (doc: Document) => boolean; moveDocument?: (doc: Document, targetCollection: Document, addDocument: (document: Document) => boolean) => boolean; diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 562de4827..ebd25f937 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -19,7 +19,7 @@ import { ListField } from "../../../fields/ListField"; import { DocumentContentsView } from "./DocumentContentsView"; import { Transform } from "../../util/Transform"; import { KeyStore } from "../../../fields/KeyStore"; -import { returnFalse, emptyDocFunction } from "../../../Utils"; +import { returnFalse, emptyDocFunction, emptyFunction, returnOne } from "../../../Utils"; import { CollectionView } from "../collections/CollectionView"; import { CollectionPDFView } from "../collections/CollectionPDFView"; import { CollectionVideoView } from "../collections/CollectionVideoView"; @@ -83,7 +83,6 @@ export class FieldView extends React.Component { 1} PanelWidth={() => 100} diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 87c1bcb1e..ad1ed5df0 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -1,4 +1,4 @@ -import { action, IReactionDisposer, reaction } from "mobx"; +import { action, IReactionDisposer, reaction, trace, computed } from "mobx"; import { baseKeymap } from "prosemirror-commands"; import { history, redo, undo } from "prosemirror-history"; import { keymap } from "prosemirror-keymap"; @@ -17,6 +17,7 @@ import React = require("react"); import { TextField } from "../../../fields/TextField"; import { KeyStore } from "../../../fields/KeyStore"; import { MainOverlayTextBox } from "../MainOverlayTextBox"; +import { observer } from "mobx-react"; const { buildMenuItems } = require("prosemirror-example-setup"); const { menuBar } = require("prosemirror-menu"); @@ -41,6 +42,7 @@ export interface FormattedTextBoxOverlay { isOverlay?: boolean; } +@observer export class FormattedTextBox extends React.Component<(FieldViewProps & FormattedTextBoxOverlay)> { public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(FormattedTextBox, fieldStr); -- cgit v1.2.3-70-g09d2 From 13ced657b7a3292e57150bf5e44412d7068b7e3d Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 16 Apr 2019 00:37:07 -0400 Subject: code clean up and fix to performance issues. --- src/client/views/DocumentDecorations.tsx | 7 +- src/client/views/Main.tsx | 2 +- src/client/views/collections/CollectionView.tsx | 1 + .../CollectionFreeFormLinkView.tsx | 8 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 242 ++++++++++----------- .../collections/collectionFreeForm/MarqueeView.tsx | 6 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 33 +-- src/client/views/nodes/DocumentView.scss | 6 +- src/client/views/nodes/DocumentView.tsx | 241 ++++++-------------- src/client/views/nodes/ImageBox.tsx | 2 +- 10 files changed, 212 insertions(+), 336 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index b97a47a3c..06de3d733 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -124,7 +124,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 +176,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 +300,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/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 { 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(); 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 @@ -61,22 +64,15 @@ 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? + get borderWidth() { return this.isAnnotationOverlay ? 0 : COLLECTION_BORDER_WIDTH; } + 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 + panX = () => this.props.Document.GetNumber(KeyStore.PanX, 0); + panY = () => this.props.Document.GetNumber(KeyStore.PanY, 0); + zoomScaling = () => this.props.Document.GetNumber(KeyStore.Scale, 1); + centeringShiftX = () => !this.nativeWidth ? this._pwidth / 2 : 0; // shift so pan position is at center of window for non-overlay collections + centeringShiftY = () => !this.nativeHeight ? this._pheight / 2 : 0;// shift so pan position is at center of window for non-overlay collections @undoBatch @action @@ -89,6 +85,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 +112,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 +138,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,8 +149,8 @@ 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; @@ -180,31 +177,23 @@ 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); @@ -215,9 +204,9 @@ export class CollectionFreeFormView extends CollectionSubView { @action private 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 +222,18 @@ export class CollectionFreeFormView extends CollectionSubView { @action bringToFront(doc: Document) { - const { fieldKey: fieldKey, Document: Document } = this.props; - - const value: Document[] = Document.GetList(fieldKey, []).slice(); - value.sort((doc1, doc2) => { - if (doc1 === doc) { - return 1; - } - if (doc2 === doc) { - return -1; - } + this.props.Document.GetList(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); } @@ -290,92 +258,112 @@ 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(); + prev.push(); } 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) : - (); - } - @computed - get overlayView() { - return !this.overlayLayout ? (null) : - (); + @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()); + 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; + getLocalTransform = (): Transform => Transform.Identity().scale(1 / this.zoomScaling()).translate(this.panX(), this.panY()); + noScaling = returnOne; 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 otherwise, reactions won't fire - const backgroundView = this.backgroundView; // needs to be a variable outside of the otherwise, reactions won't fire - const overlayView = this.overlayView;// needs to be a variable outside of the otherwise, reactions won't fire - + trace(); + const containerName = `collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`; return ( - runInAction(() => { this._pwidth = r.entry.width; this._pheight = r.entry.height; })}> + {({ measureRef }) => ( -
-
super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY))} - onDrop={this.onDrop.bind(this)} onDragOver={this.onDragOver} onWheel={this.onPointerWheel} ref={this.createDropTarget}> +
+
-
- {backgroundView} - + + + {this.childViews} - -
- {overlayView} + + +
)} ); } +} + + +@observer +class CollectionFreeFormOverlayView extends React.Component { + @computed get overlayView() { + let overlayLayout = this.props.Document.GetText(KeyStore.OverlayLayout, ""); + return !overlayLayout ? (null) : + (); + } + render() { + return this.overlayView; + } +} + +@observer +class CollectionFreeFormBackgroundView extends React.Component { + @computed get backgroundView() { + let backgroundLayout = this.props.Document.GetText(KeyStore.BackgroundLayout, ""); + return !backgroundLayout ? (null) : + (); + } + render() { + return this.backgroundView; + } +} + +interface CollectionFreeFormViewPannableContentsProps { + centeringShiftX: () => number; + centeringShiftY: () => number; + panX: () => number; + panY: () => number; + zoomScaling: () => number; +} + +@observer +class CollectionFreeFormViewPannableContents extends React.Component{ + 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 otherwise, reactions won't fire + return
+ {this.props.children} +
; + } } \ 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 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 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 { private _mainCont = React.createRef(); - 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 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 ; } - @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 (
{ - private _mainCont = React.createRef(); - public get ContentRef() { - return this._mainCont; - } private _downX: number = 0; private _downY: number = 0; + private _mainCont = React.createRef(); + 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, "

Error loading layout data

"); } @computed get layoutKeys(): Key[] { return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array()); } @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array()); } - 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; @@ -118,11 +116,9 @@ export class DocumentView extends React.Component { } } - 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 +126,26 @@ export class DocumentView extends React.Component { } 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 +164,7 @@ export class DocumentView extends React.Component { 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 +178,17 @@ export class DocumentView extends React.Component { 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 +199,20 @@ export class DocumentView extends React.Component { 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 +228,9 @@ export class DocumentView extends React.Component { 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 +261,8 @@ export class DocumentView extends React.Component { } onDrop = (e: React.DragEvent) => { - if (e.isDefaultPrevented()) { - return; - } let text = e.dataTransfer.getData("text/plain"); - if (text && text.startsWith(" { @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 (); - } + @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 (); } 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 ( -
- ); - } else { - var backgroundcolor = this.props.Document.GetText( - KeyStore.BackgroundColor, - "" - ); - return ( -
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} -
- ); + return
; } + return ( +
+ {this.contents} +
+ ); } } 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 { } e.stopPropagation(); } - })) + })); // de.data.removeDocument() bcz: need to implement } } -- cgit v1.2.3-70-g09d2 From caecf2452c4af5caf8b298719d53274b6709c194 Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 16 Apr 2019 15:00:14 -0400 Subject: removed traces()played with image box stacking. --- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 -- .../views/nodes/CollectionFreeFormDocumentView.tsx | 1 - src/client/views/nodes/ImageBox.scss | 12 +++++++- src/client/views/nodes/ImageBox.tsx | 34 +++++++++++++++++++--- 4 files changed, 41 insertions(+), 8 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 50f0a6164..3ae64d2c6 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -254,7 +254,6 @@ export class CollectionFreeFormView extends CollectionSubView { @computed get views() { - 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); @@ -280,7 +279,6 @@ export class CollectionFreeFormView extends CollectionSubView { } render() { - trace(); const containerName = `collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`; return ( diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 68e5a70fb..8cf7a0dd2 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -65,7 +65,6 @@ export class CollectionFreeFormDocumentView extends React.Component { @@ -43,7 +46,7 @@ export class ImageBox extends React.Component { onLoad = (target: any) => { var h = this._imgRef.current!.naturalHeight; var w = this._imgRef.current!.naturalWidth; - this.props.Document.SetNumber(KeyStore.NativeHeight, this.props.Document.GetNumber(KeyStore.NativeWidth, 0) * h / w); + if (this._photoIndex == 0) this.props.Document.SetNumber(KeyStore.NativeHeight, this.props.Document.GetNumber(KeyStore.NativeWidth, 0) * h / w); } componentDidMount() { @@ -61,6 +64,12 @@ export class ImageBox extends React.Component { componentWillUnmount() { } + onDrop = (e: React.DragEvent) => { + e.stopPropagation(); + e.preventDefault(); + console.log("IMPLEMENT ME PLEASE") + } + @undoBatch drop = (e: Event, de: DragManager.DropEvent) => { @@ -139,6 +148,22 @@ export class ImageBox extends React.Component { } } + @action + onDotDown(index: number) { + this._photoIndex = index; + } + + dots(paths: string[]) { + let nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 1); + let dist = Math.min(nativeWidth / paths.length, 40); + let left = (nativeWidth - paths.length * dist) / 2; + return paths.map((p, i) => +
+
{ e.stopPropagation(); this.onDotDown(i); }} /> +
+ ) + } + render() { let field = this.props.Document.Get(this.props.fieldKey); let paths: string[] = ["http://www.cs.brown.edu/~bcz/face.gif"]; @@ -147,8 +172,9 @@ export class ImageBox extends React.Component { else if (field instanceof ListField) paths = field.Data.filter(val => val as ImageField).map(p => (p as ImageField).Data.href); let nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 1); return ( -
- Image not found +
+ Image not found + {this.dots(paths)} {this.lightbox(paths)}
); } -- cgit v1.2.3-70-g09d2 From 0bd545674070fe90836912c7171642cf09e82696 Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 18 Apr 2019 11:21:58 -0400 Subject: reenabled zoon fading. added Esc. --- src/client/util/DragManager.ts | 6 ++++-- src/client/util/SelectionManager.ts | 1 + src/client/views/Main.tsx | 17 ++++++++++++----- src/client/views/collections/CollectionBaseView.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 11 +++++------ .../views/nodes/CollectionFreeFormDocumentView.tsx | 20 ++++++++++---------- src/client/views/nodes/FormattedTextBox.tsx | 4 ++++ 7 files changed, 37 insertions(+), 24 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 4bd654e15..64ea4342e 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -269,20 +269,22 @@ export namespace DragManager { ); }; - const abortDrag = () => { + AbortDrag = () => { document.removeEventListener("pointermove", moveHandler, true); document.removeEventListener("pointerup", upHandler); dragElements.map(dragElement => dragDiv.removeChild(dragElement)); eles.map(ele => (ele.hidden = false)); }; const upHandler = (e: PointerEvent) => { - abortDrag(); + AbortDrag(); FinishDrag(eles, e, dragData, options, finishDrag); }; document.addEventListener("pointermove", moveHandler, true); document.addEventListener("pointerup", upHandler); } + export let AbortDrag: () => void = emptyFunction; + function FinishDrag(dragEles: HTMLElement[], e: PointerEvent, dragData: { [index: string]: any }, options?: DragOptions, finishDrag?: (dragData: { [index: string]: any }) => void) { let removed = dragEles.map(dragEle => { let parent = dragEle.parentElement; diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index b15a93d9f..20319dff9 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -3,6 +3,7 @@ import { DocumentView } from "../views/nodes/DocumentView"; import { Document } from "../../fields/Document"; import { Main } from "../views/Main"; import { MainOverlayTextBox } from "../views/MainOverlayTextBox"; +import { DragManager } from "./DragManager"; export namespace SelectionManager { class Manager { diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 5cae4fdaf..503a11b35 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -27,7 +27,7 @@ import '../northstar/model/ModelExtensions'; import { HistogramOperation } from '../northstar/operations/HistogramOperation'; import '../northstar/utils/Extensions'; import { Server } from '../Server'; -import { SetupDrag } from '../util/DragManager'; +import { SetupDrag, DragManager } from '../util/DragManager'; import { Transform } from '../util/Transform'; import { UndoManager } from '../util/UndoManager'; import { CollectionDockingView } from './collections/CollectionDockingView'; @@ -38,6 +38,7 @@ import "./Main.scss"; import { MainOverlayTextBox } from './MainOverlayTextBox'; import { DocumentView } from './nodes/DocumentView'; import { PreviewCursor } from './PreviewCursor'; +import { SelectionManager } from '../util/SelectionManager'; @observer @@ -84,11 +85,11 @@ export class Main extends React.Component { this.initEventListeners(); this.initAuthenticationRouters(); - try { - this.initializeNorthstar(); - } catch (e) { + // try { + // this.initializeNorthstar(); + // } catch (e) { - } + // } } componentDidMount() { window.onpopstate = this.onHistory; } @@ -111,6 +112,12 @@ export class Main extends React.Component { // window.addEventListener("pointermove", (e) => this.reportLocation(e)) window.addEventListener("drop", (e) => e.preventDefault(), false); // drop event handler window.addEventListener("dragover", (e) => e.preventDefault(), false); // drag event handler + window.addEventListener("keydown", (e) => { + if (e.key == "Escape") { + DragManager.AbortDrag(); + SelectionManager.DeselectAll() + } + }, false); // drag event handler // click interactions for the context menu document.addEventListener("pointerdown", action(function (e: PointerEvent) { if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) { diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index a8b061b04..4755b2d57 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -90,7 +90,7 @@ export class CollectionBaseView extends React.Component { let props = this.props; var curPage = props.Document.GetNumber(KeyStore.CurPage, -1); doc.SetOnPrototype(KeyStore.Page, new NumberField(curPage)); - if (this.isAnnotationOverlay) { + if (true || this.isAnnotationOverlay) { doc.SetNumber(KeyStore.Zoom, this.props.Document.GetNumber(KeyStore.Scale, 1)); } if (curPage >= 0) { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 228fc937e..159db6279 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1,6 +1,5 @@ import { action, computed, observable, trace } from "mobx"; import { observer } from "mobx-react"; -import Measure from "react-measure"; import { Document } from "../../../../fields/Document"; import { KeyStore } from "../../../../fields/KeyStore"; import { emptyFunction, returnFalse, returnOne } from "../../../../Utils"; @@ -49,9 +48,7 @@ export class CollectionFreeFormView extends CollectionSubView { this.addDocument(newBox, false); } private addDocument = (newBox: Document, allowDuplicates: boolean) => { - if (this.isAnnotationOverlay) { - newBox.SetNumber(KeyStore.Zoom, this.props.Document.GetNumber(KeyStore.Scale, 1)); - } + newBox.SetNumber(KeyStore.Zoom, this.props.Document.GetNumber(KeyStore.Scale, 1)); return this.props.addDocument(this.bringToFront(newBox), false); } private selectDocuments = (docs: Document[]) => { @@ -187,14 +184,16 @@ export class CollectionFreeFormView extends CollectionSubView { // if (modes[e.deltaMode] === 'pixels') coefficient = 50; // else if (modes[e.deltaMode] === 'lines') coefficient = 1000; // This should correspond to line-height?? let deltaScale = (1 - (e.deltaY / coefficient)); + if (deltaScale < 0) deltaScale = -deltaScale; if (deltaScale * this.zoomScaling() < 1 && this.isAnnotationOverlay) { deltaScale = 1 / this.zoomScaling(); } 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); + let safeScale = Math.abs(localTransform.Scale); + this.props.Document.SetNumber(KeyStore.Scale, Math.abs(safeScale)); + this.setPan(-localTransform.TranslateX / safeScale, -localTransform.TranslateY / safeScale); e.stopPropagation(); } } diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 8cf7a0dd2..97d53a47e 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -66,22 +66,22 @@ export class CollectionFreeFormDocumentView extends React.Component 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; + //var zoom = doc.GetNumber(KeyStore.Zoom, 1); + let transform = this.getTransform().scale(this.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 (
Date: Thu, 18 Apr 2019 13:51:25 -0400 Subject: fixed workspace switching exception. started to refresh minimize functionality. --- src/client/util/DragManager.ts | 2 +- .../views/collections/CollectionDockingView.tsx | 11 +++++---- .../views/collections/CollectionTreeView.tsx | 9 +++----- .../collectionFreeForm/CollectionFreeFormView.tsx | 23 +++++++++++-------- .../collections/collectionFreeForm/MarqueeView.tsx | 10 +++++---- src/client/views/globalCssVariables.scss | 2 ++ src/client/views/globalCssVariables.scss.d.ts | 1 + .../views/nodes/CollectionFreeFormDocumentView.tsx | 16 +++++++++---- src/client/views/nodes/DocumentView.scss | 13 +++++------ src/client/views/nodes/DocumentView.tsx | 26 +++++++++++++++++----- src/fields/KeyStore.ts | 4 +++- 11 files changed, 76 insertions(+), 41 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 64ea4342e..426c9fc3d 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -250,7 +250,7 @@ export namespace DragManager { dragData.aliasOnDrop = e.ctrlKey || e.altKey; } if (e.shiftKey) { - abortDrag(); + AbortDrag(); CollectionDockingView.Instance.StartOtherDrag(docs, { pageX: e.pageX, pageY: e.pageY, diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 39e27b601..e4c647635 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -19,7 +19,7 @@ import { ServerUtils } from "../../../server/ServerUtil"; import { DragManager, DragLinksAsDocuments } from "../../util/DragManager"; import { TextField } from "../../../fields/TextField"; import { ListField } from "../../../fields/ListField"; -import { thisExpression } from "babel-types"; +import { Transform } from '../../util/Transform' @observer export class CollectionDockingView extends React.Component { @@ -336,9 +336,12 @@ export class DockedFrameRenderer extends React.Component { } ScreenToLocalTransform = () => { - let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!.children[0].firstChild as HTMLElement); - scale = Utils.GetScreenTransform(this._mainCont.current!).scale; - return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this.contentScaling()); + if (this._mainCont.current && this._mainCont.current.children) { + let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!.children[0].firstChild as HTMLElement); + scale = Utils.GetScreenTransform(this._mainCont.current!).scale; + return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this.contentScaling()); + } + return Transform.Identity(); } get previewPanelCenteringOffset() { return (this._panelWidth - this.nativeWidth() * this.contentScaling()) / 2; } diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 51a02fc25..e0387f4b4 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -1,20 +1,17 @@ import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; import { faCaretDown, faCaretRight, faTrashAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, observable, trace } from "mobx"; +import { action, observable } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { FieldWaiting } from "../../../fields/Field"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; -import { SetupDrag, DragManager } from "../../util/DragManager"; +import { DragManager, SetupDrag } from "../../util/DragManager"; import { EditableView } from "../EditableView"; -import "./CollectionTreeView.scss"; -import { CollectionView } from "./CollectionView"; -import * as globalCssVariables from "../../views/globalCssVariables.scss"; import { CollectionSubView } from "./CollectionSubView"; +import "./CollectionTreeView.scss"; import React = require("react"); -import { props } from 'bluebird'; export interface TreeViewProps { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 159db6279..af6819cd4 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -71,20 +71,25 @@ export class CollectionFreeFormView extends CollectionSubView { @action drop = (e: Event, de: DragManager.DropEvent) => { if (super.drop(e, de) && de.data instanceof DragManager.DocumentDragData) { + console.log("DROP Aat " + de.x + " off " + de.data.xOffset); const [x, y] = this.getTransform().transformPoint(de.x - de.data.xOffset, de.y - de.data.yOffset); if (de.data.droppedDocuments.length) { - let dropX = de.data.droppedDocuments[0].GetNumber(KeyStore.X, 0); - let dropY = de.data.droppedDocuments[0].GetNumber(KeyStore.Y, 0); + let dragDoc = de.data.droppedDocuments[0]; + let dropX = dragDoc.GetNumber(KeyStore.X, 0); + let dropY = dragDoc.GetNumber(KeyStore.Y, 0); de.data.droppedDocuments.map(d => { + let minimized = d.GetBoolean(KeyStore.Minimized, false); d.SetNumber(KeyStore.X, x + (d.GetNumber(KeyStore.X, 0) - dropX)); d.SetNumber(KeyStore.Y, y + (d.GetNumber(KeyStore.Y, 0) - dropY)); - if (!d.GetNumber(KeyStore.Width, 0)) { - d.SetNumber(KeyStore.Width, 300); - } - if (!d.GetNumber(KeyStore.Height, 0)) { - let nw = d.GetNumber(KeyStore.NativeWidth, 0); - let nh = d.GetNumber(KeyStore.NativeHeight, 0); - d.SetNumber(KeyStore.Height, nw && nh ? nh / nw * d.Width() : 300); + if (!minimized) { + if (!d.GetNumber(KeyStore.Width, 0)) { + d.SetNumber(KeyStore.Width, 300); + } + if (!d.GetNumber(KeyStore.Height, 0)) { + let nw = d.GetNumber(KeyStore.NativeWidth, 0); + let nh = d.GetNumber(KeyStore.NativeHeight, 0); + d.SetNumber(KeyStore.Height, nw && nh ? nh / nw * d.Width() : 300); + } } this.bringToFront(d); }); diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 65f461b27..8b94374fa 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -11,6 +11,7 @@ import { undoBatch } from "../../../util/UndoManager"; import { InkingCanvas } from "../../InkingCanvas"; import { PreviewCursor } from "../../PreviewCursor"; import { CollectionFreeFormView } from "./CollectionFreeFormView"; +import { MINIMIZED_ICON_SIZE } from '../../../views/globalCssVariables.scss' import "./MarqueeView.scss"; import React = require("react"); @@ -207,11 +208,12 @@ export class MarqueeView extends React.Component let selRect = this.Bounds; let selection: Document[] = []; this.props.activeDocuments().map(doc => { + let minimized = doc.GetBoolean(KeyStore.Minimized, false); var z = doc.GetNumber(KeyStore.Zoom, 1); - var x = doc.GetNumber(KeyStore.X, 0); - var y = doc.GetNumber(KeyStore.Y, 0); - var w = doc.Width() / z; - var h = doc.Height() / z; + var x = doc.GetNumber(KeyStore.X, 0) + (minimized ? doc.GetNumber(KeyStore.MinimizedX, 0) : 0); + var y = doc.GetNumber(KeyStore.Y, 0) + (minimized ? doc.GetNumber(KeyStore.MinimizedY, 0) : 0); + var w = minimized ? MINIMIZED_ICON_SIZE : doc.Width() / z; + var h = minimized ? MINIMIZED_ICON_SIZE : doc.Height() / z; if (this.intersectRect({ left: x, top: y, width: w, height: h }, selRect)) { selection.push(doc); } diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/globalCssVariables.scss index 5c8e9c8fc..f154f8158 100644 --- a/src/client/views/globalCssVariables.scss +++ b/src/client/views/globalCssVariables.scss @@ -23,7 +23,9 @@ $mainTextInput-zindex: 999; // then text input overlay so that it's context menu $docDecorations-zindex: 998; // then doc decorations appear over everything else $remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right? $COLLECTION_BORDER_WIDTH: 1; +$MINIMIZED_ICON_SIZE:25; :export { contextMenuZindex: $contextMenu-zindex; COLLECTION_BORDER_WIDTH: $COLLECTION_BORDER_WIDTH; + MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE; } \ No newline at end of file diff --git a/src/client/views/globalCssVariables.scss.d.ts b/src/client/views/globalCssVariables.scss.d.ts index ed8573f41..cc77d987a 100644 --- a/src/client/views/globalCssVariables.scss.d.ts +++ b/src/client/views/globalCssVariables.scss.d.ts @@ -2,6 +2,7 @@ interface IGlobalScss { contextMenuZindex: string; // context menu shows up over everything COLLECTION_BORDER_WIDTH: string; + MINIMIZED_ICON_SIZE: string; } declare const globalCssVariables: IGlobalScss; diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 97d53a47e..a3689414d 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -17,7 +17,7 @@ export class CollectionFreeFormDocumentView extends React.Component this.props.ScreenToLocalTransform() - .translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)) + .translate(-this.X, -this.Y) .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(); + panelWidth = () => this.isMinimized ? 10 : this.props.PanelWidth(); + panelHeight = () => this.isMinimized ? 10 : this.props.PanelHeight(); @computed get docView() { @@ -64,6 +70,8 @@ export class CollectionFreeFormDocumentView extends React.Component; } + get isMinimized() { return this.props.Document.GetBoolean(KeyStore.Minimized, false); } + render() { let zoomFade = 1; //var zoom = doc.GetNumber(KeyStore.Zoom, 1); diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 690ee50e8..85c305b5a 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -13,7 +13,6 @@ } .top { - background: #232323; height: 20px; cursor: pointer; } @@ -32,13 +31,13 @@ .documentView-node-topmost { background: white; } - .minimized-box { - height: 10px; - width: 10px; - border-radius: 2px; - background: $dark-color; - transform-origin: left top; + position: absolute; + left:0; + top:0; + width:$MINIMIZED_ICON_SIZE; + height:$MINIMIZED_ICON_SIZE; + transform-origin: left top; } .minimized-box:hover { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index d74f9fc57..af52e44e1 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,12 +1,13 @@ +import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; +import { faCaretUp, faObjectGroup, faStickyNote, faFilePdf, faFilm, faImage } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, runInAction } from "mobx"; import { observer } from "mobx-react"; -import { BooleanField } from "../../../fields/BooleanField"; import { Document } from "../../../fields/Document"; -import { Field, FieldWaiting, Opt } from "../../../fields/Field"; +import { Field, Opt } from "../../../fields/Field"; import { Key } from "../../../fields/Key"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; -import { TextField } from "../../../fields/TextField"; import { ServerUtils } from "../../../server/ServerUtil"; import { emptyFunction, Utils } from "../../../Utils"; import { Documents } from "../../documents/Documents"; @@ -19,12 +20,19 @@ import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionPDFView } from "../collections/CollectionPDFView"; import { CollectionVideoView } from "../collections/CollectionVideoView"; import { CollectionView } from "../collections/CollectionView"; +import { MINIMIZED_ICON_SIZE } from "../../views/globalCssVariables.scss"; import { ContextMenu } from "../ContextMenu"; import { DocumentContentsView } from "./DocumentContentsView"; import "./DocumentView.scss"; import React = require("react"); +library.add(faCaretUp); +library.add(faObjectGroup); +library.add(faStickyNote); +library.add(faFilePdf); +library.add(faFilm); + export interface DocumentViewProps { ContainingCollectionView: Opt; Document: Document; @@ -216,6 +224,8 @@ export class DocumentView extends React.Component { @action public minimize = (): void => { this.props.Document.SetBoolean(KeyStore.Minimized, true); + this.props.Document.SetNumber(KeyStore.MinimizedX, 0); + this.props.Document.SetNumber(KeyStore.MinimizedY, 0); SelectionManager.DeselectAll(); } @@ -314,8 +324,14 @@ export class DocumentView extends React.Component { var nativeWidth = this.nativeWidth > 0 ? this.nativeWidth.toString() + "px" : "100%"; if (this.isMinimized()) { - return
; + let button = this.layout.indexOf("PDFBox") !== -1 ? faFilePdf : + this.layout.indexOf("ImageBox") !== -1 ? faImage : + this.layout.indexOf("Formatted") !== -1 ? faStickyNote : + this.layout.indexOf("Collection") !== -1 ? faObjectGroup : + faCaretUp; + return
+ +
} return (
Date: Fri, 19 Apr 2019 16:34:32 -0400 Subject: played with iconifying things in a different way. fixed some things with schemas. --- src/Utils.ts | 2 +- src/client/documents/Documents.ts | 16 ++++ src/client/northstar/dash-nodes/HistogramBox.scss | 6 +- src/client/northstar/dash-nodes/HistogramBox.tsx | 2 +- src/client/views/DocumentDecorations.tsx | 42 ++++++---- src/client/views/Main.tsx | 8 +- .../views/collections/CollectionSchemaView.scss | 9 ++- .../views/collections/CollectionSchemaView.tsx | 5 +- .../CollectionFreeFormLinkView.tsx | 8 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 13 ++-- .../collections/collectionFreeForm/MarqueeView.tsx | 9 +-- src/client/views/globalCssVariables.scss | 2 + src/client/views/globalCssVariables.scss.d.ts | 1 + .../views/nodes/CollectionFreeFormDocumentView.tsx | 26 +++---- src/client/views/nodes/DocumentContentsView.tsx | 3 +- src/client/views/nodes/DocumentView.scss | 16 +--- src/client/views/nodes/DocumentView.tsx | 71 ++++++++--------- src/client/views/nodes/FieldView.tsx | 5 ++ src/client/views/nodes/IconBox.scss | 12 +++ src/client/views/nodes/IconBox.tsx | 90 ++++++++++++++++++++++ src/fields/IconFIeld.ts | 25 ++++++ src/fields/KeyStore.ts | 10 +-- src/server/Message.ts | 2 +- src/server/ServerUtil.ts | 2 + 24 files changed, 264 insertions(+), 121 deletions(-) create mode 100644 src/client/views/nodes/IconBox.scss create mode 100644 src/client/views/nodes/IconBox.tsx create mode 100644 src/fields/IconFIeld.ts (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/Utils.ts b/src/Utils.ts index dec6245ef..98f75d3b9 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -1,7 +1,7 @@ import v4 = require('uuid/v4'); import v5 = require("uuid/v5"); import { Socket } from 'socket.io'; -import { Message, Types, Transferable } from './server/Message'; +import { Message } from './server/Message'; import { Document } from './fields/Document'; export class Utils { diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 4febfa7eb..b0bb74d89 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -32,6 +32,9 @@ import { action } from "mobx"; import { ColumnAttributeModel } from "../northstar/core/attribute/AttributeModel"; import { AttributeTransformationModel } from "../northstar/core/attribute/AttributeTransformationModel"; import { AggregateFunction } from "../northstar/model/idea/idea"; +import { MINIMIZED_ICON_SIZE } from "../views/globalCssVariables.scss"; +import { IconBox } from "../views/nodes/IconBox"; +import { IconField } from "../../fields/IconFIeld"; export interface DocumentOptions { x?: number; @@ -63,6 +66,7 @@ export namespace Documents { let videoProto: Document; let audioProto: Document; let pdfProto: Document; + let iconProto: Document; const textProtoId = "textProto"; const histoProtoId = "histoProto"; const pdfProtoId = "pdfProto"; @@ -72,6 +76,7 @@ export namespace Documents { const kvpProtoId = "kvpProto"; const videoProtoId = "videoProto"; const audioProtoId = "audioProto"; + const iconProtoId = "iconProto"; export function initProtos(): Promise { return Server.GetFields([textProtoId, histoProtoId, collProtoId, pdfProtoId, imageProtoId, videoProtoId, audioProtoId, webProtoId, kvpProtoId]).then(fields => { @@ -84,6 +89,7 @@ export namespace Documents { videoProto = fields[videoProtoId] as Document || CreateVideoPrototype(); audioProto = fields[audioProtoId] as Document || CreateAudioPrototype(); pdfProto = fields[pdfProtoId] as Document || CreatePdfPrototype(); + iconProto = fields[iconProtoId] as Document || CreateIconPrototype(); }); } function assignOptions(doc: Document, options: DocumentOptions): Document { @@ -92,6 +98,8 @@ export namespace Documents { if (options.title !== undefined) { doc.SetText(KeyStore.Title, options.title); } if (options.page !== undefined) { doc.SetNumber(KeyStore.Page, options.page); } if (options.scale !== undefined) { doc.SetNumber(KeyStore.Scale, options.scale); } + if (options.width !== undefined) { doc.SetNumber(KeyStore.Width, options.width); } + if (options.height !== undefined) { doc.SetNumber(KeyStore.Height, options.height); } if (options.viewType !== undefined) { doc.SetNumber(KeyStore.ViewType, options.viewType); } if (options.backgroundColor !== undefined) { doc.SetText(KeyStore.BackgroundColor, options.backgroundColor); } if (options.ink !== undefined) { doc.Set(KeyStore.Ink, new InkField(options.ink)); } @@ -139,6 +147,11 @@ export namespace Documents { histoProto.SetText(KeyStore.BackgroundLayout, HistogramBox.LayoutString()); return histoProto; } + function CreateIconPrototype(): Document { + let iconProto = setupPrototypeOptions(iconProtoId, "ICON_PROTO", IconBox.LayoutString(), + { x: 0, y: 0, width: Number(MINIMIZED_ICON_SIZE), height: Number(MINIMIZED_ICON_SIZE), layoutKeys: [KeyStore.Data] }); + return iconProto; + } function CreateTextPrototype(): Document { let textProto = setupPrototypeOptions(textProtoId, "TEXT_PROTO", FormattedTextBox.LayoutString(), { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] }); @@ -203,6 +216,9 @@ export namespace Documents { export function TextDocument(options: DocumentOptions = {}) { return assignToDelegate(SetInstanceOptions(textProto, options, ["", TextField]).MakeDelegate(), options); } + export function IconDocument(icon: string, options: DocumentOptions = {}) { + return assignToDelegate(SetInstanceOptions(iconProto, { width: Number(MINIMIZED_ICON_SIZE), height: Number(MINIMIZED_ICON_SIZE), layoutKeys: [KeyStore.Data], layout: IconBox.LayoutString(), ...options }, [icon, IconField]), options); + } export function PdfDocument(url: string, options: DocumentOptions = {}) { return assignToDelegate(SetInstanceOptions(pdfProto, options, [new URL(url), PDFField]).MakeDelegate(), options); } diff --git a/src/client/northstar/dash-nodes/HistogramBox.scss b/src/client/northstar/dash-nodes/HistogramBox.scss index e899cf15e..06d781263 100644 --- a/src/client/northstar/dash-nodes/HistogramBox.scss +++ b/src/client/northstar/dash-nodes/HistogramBox.scss @@ -1,12 +1,12 @@ .histogrambox-container { padding: 0vw; position: absolute; - top: 0; - left:0; + top: -50%; + left:-50%; text-align: center; width: 100%; height: 100%; - background: black; + background: black; } .histogrambox-xaxislabel { position:absolute; diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx index 0e84ace50..e2ecc8c83 100644 --- a/src/client/northstar/dash-nodes/HistogramBox.tsx +++ b/src/client/northstar/dash-nodes/HistogramBox.tsx @@ -146,7 +146,7 @@ export class HistogramBox extends React.Component { return ( runInAction(() => { this.PanelWidth = r.entry.width; this.PanelHeight = r.entry.height; })}> {({ measureRef }) => -
+
{labelY} diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index cfb9befd5..da2c7a3be 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -5,17 +5,18 @@ import { KeyStore } from "../../fields/KeyStore"; import { ListField } from "../../fields/ListField"; import { NumberField } from "../../fields/NumberField"; import { TextField } from "../../fields/TextField"; +import { Document } from "../../fields/Document"; import { emptyFunction } from "../../Utils"; import { DragLinksAsDocuments, DragManager } from "../util/DragManager"; import { SelectionManager } from "../util/SelectionManager"; import { undoBatch } from "../util/UndoManager"; import './DocumentDecorations.scss'; import { MainOverlayTextBox } from "./MainOverlayTextBox"; -import { MINIMIZED_ICON_SIZE } from "../views/globalCssVariables.scss"; import { DocumentView } from "./nodes/DocumentView"; import { LinkMenu } from "./nodes/LinkMenu"; import React = require("react"); import { CompileScript } from "../util/Scripting"; +import { IconBox } from "./nodes/IconBox"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -191,6 +192,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> document.addEventListener("pointerup", this.onMinimizeUp); } } + + @observable _minimizedX = 0; + @observable _minimizedY = 0; @action onMinimizeMove = (e: PointerEvent): void => { e.stopPropagation(); @@ -201,12 +205,20 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> let xf = SelectionManager.SelectedDocuments()[0].props.ScreenToLocalTransform().inverse().transformPoint(0, 0); let dx = e.pageX - xf[0]; let dy = e.pageY - xf[1]; - if (Math.abs(dx) < 20 && Math.abs(dy) < 20) - dx = dy = 0; + this._minimizedX = e.clientX; + this._minimizedY = e.clientY; + if (Math.abs(dx) < 20 && Math.abs(dy) < 20) { + this._minimizedX = xf[0]; + this._minimizedY = xf[1]; + } SelectionManager.SelectedDocuments().map(dv => { - let where = (dv.props.ScreenToLocalTransform()).scale(dv.props.ContentScaling()).transformDirection(dx, dy); - dv.props.Document.SetNumber(KeyStore.MinimizedX, where[0]); - dv.props.Document.SetNumber(KeyStore.MinimizedY, where[1]); + let minDoc = dv.props.Document.Get(KeyStore.MinimizedDoc); + if (minDoc instanceof Document) { + let where = (dv.props.ScreenToLocalTransform()).scale(dv.props.ContentScaling()).transformPoint(this._minimizedX, this._minimizedY); + let minDocument = minDoc as Document; + minDocument.SetNumber(KeyStore.X, where[0] + dv.props.Document.GetNumber(KeyStore.X, 0)); + minDocument.SetNumber(KeyStore.Y, where[1] + dv.props.Document.GetNumber(KeyStore.Y, 0)); + } }); } } @@ -219,6 +231,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (Math.abs(dx) < 4 && Math.abs(dy) < 4 && !this._iconifying) { SelectionManager.SelectedDocuments().map(dv => dv.minimize()); SelectionManager.DeselectAll(); + } else { + this._minimizedX = this._minimizedY = 0; } document.removeEventListener("pointermove", this.onMinimizeMove); document.removeEventListener("pointerup", this.onMinimizeUp); @@ -404,24 +418,18 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (bounds.x === Number.MAX_VALUE || !seldoc) { return (null); } - let minvec = [seldoc.props.Document.GetNumber(KeyStore.MinimizedX, 0), seldoc.props.Document.GetNumber(KeyStore.MinimizedY, 0)]; - minvec = seldoc.props.ScreenToLocalTransform().scale(seldoc.props.ContentScaling()).inverse().transformDirection(minvec[0], minvec[1]); - let selpos = minvec[0] !== 0 || minvec[1] !== 0 ? - [minvec[0] - 12 + (!this._iconifying ? 8 : 0), minvec[1] - 12 + (!this._iconifying ? 28 : 0)] : + let selpos = this._minimizedX !== 0 || this._minimizedY !== 0 ? + [this._minimizedX - 12 + (!this._iconifying ? 8 : 0), this._minimizedY - 12 + (!this._iconifying ? 28 : 0)] : [0, this._iconifying ? -18 : 0]; let minimizeIcon = (
- {SelectionManager.SelectedDocuments().length == 1 ? SelectionManager.SelectedDocuments()[0].minimizedIcon : "..."} + {SelectionManager.SelectedDocuments().length == 1 ? IconBox.DocumentIcon(SelectionManager.SelectedDocuments()[0].props.Document.GetText(KeyStore.Layout, "...")) : "..."}
); if (this._iconifying) { - let xfpt = seldoc.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - return (
- {minimizeIcon} -
); + return (
{minimizeIcon}
); } - // console.log(this._documents.length) - // let test = this._documents[0].props.Document.Title; + if (this.Hidden) { return (null); } diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 503a11b35..09ef30f6b 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -85,11 +85,11 @@ export class Main extends React.Component { this.initEventListeners(); this.initAuthenticationRouters(); - // try { - // this.initializeNorthstar(); - // } catch (e) { + try { + this.initializeNorthstar(); + } catch (e) { - // } + } } componentDidMount() { window.onpopstate = this.onHistory; } diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 6eabbe17c..cfdb3ab22 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -1,6 +1,7 @@ @import "../globalCssVariables"; + .collectionSchemaView-container { border-width: $COLLECTION_BORDER_WIDTH; border-color : $intermediate-color; @@ -10,6 +11,10 @@ position: absolute; width: 100%; height: 100%; + + .collectionSchemaView-cellContents { + height: $MAX_ROW_HEIGHT; + } .collectionSchemaView-previewRegion { position: relative; @@ -104,7 +109,7 @@ } .rt-tr-group { direction: ltr; - max-height: 44px; + max-height: $MAX_ROW_HEIGHT; } .rt-td { border-width: 1px; @@ -136,7 +141,7 @@ } .ReactTable .rt-th, .ReactTable .rt-td { - max-height: 44; + max-height: $MAX_ROW_HEIGHT; padding: 3px 7px; font-size: 13px; text-align: center; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index b61eb342d..90077b053 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -5,6 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable, untracked } from "mobx"; import { observer } from "mobx-react"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; +import { MAX_ROW_HEIGHT } from '../../views/globalCssVariables.scss' import "react-table/react-table.css"; import { Document } from "../../../fields/Document"; import { Field, Opt } from "../../../fields/Field"; @@ -99,11 +100,11 @@ export class CollectionSchemaView extends CollectionSubView { return false; }; return ( -
+
{ let field = props.Document.Get(props.fieldKey); if (field && field instanceof Field) { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index 8868f7df0..20c5a84bf 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 { if (super.drop(e, de) && de.data instanceof DragManager.DocumentDragData) { - console.log("DROP Aat " + de.x + " off " + de.data.xOffset); const [x, y] = this.getTransform().transformPoint(de.x - de.data.xOffset, de.y - de.data.yOffset); if (de.data.droppedDocuments.length) { let dragDoc = de.data.droppedDocuments[0]; let dropX = dragDoc.GetNumber(KeyStore.X, 0); let dropY = dragDoc.GetNumber(KeyStore.Y, 0); de.data.droppedDocuments.map(d => { - let minimized = d.GetBoolean(KeyStore.Minimized, false); - d.SetNumber(KeyStore.X, x + (d.GetNumber(KeyStore.X, 0) - (minimized ? d.GetNumber(KeyStore.MinimizedX, 0) : 0)) - dropX); - d.SetNumber(KeyStore.Y, y + (d.GetNumber(KeyStore.Y, 0) - (minimized ? d.GetNumber(KeyStore.MinimizedY, 0) : 0)) - dropY); - if (!minimized) { + d.SetNumber(KeyStore.X, x + (d.GetNumber(KeyStore.X, 0)) - dropX); + d.SetNumber(KeyStore.Y, y + (d.GetNumber(KeyStore.Y, 0)) - dropY); + if (!d.GetBoolean(KeyStore.IsMinimized, false)) { if (!d.GetNumber(KeyStore.Width, 0)) { d.SetNumber(KeyStore.Width, 300); } @@ -264,7 +263,9 @@ export class CollectionFreeFormView extends CollectionSubView { let docviews = this.props.Document.GetList(this.props.fieldKey, [] as Document[]).filter(doc => doc).reduce((prev, doc) => { var page = doc.GetNumber(KeyStore.Page, -1); if (page === curPage || page === -1) { - prev.push(); + let minim = doc.GetT(KeyStore.IsMinimized, BooleanField); + if (minim === undefined || (minim && !minim.Data)) + prev.push(); } return prev; }, [] as JSX.Element[]); diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 8b94374fa..bf918beba 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -208,12 +208,11 @@ export class MarqueeView extends React.Component let selRect = this.Bounds; let selection: Document[] = []; this.props.activeDocuments().map(doc => { - let minimized = doc.GetBoolean(KeyStore.Minimized, false); var z = doc.GetNumber(KeyStore.Zoom, 1); - var x = doc.GetNumber(KeyStore.X, 0) + (minimized ? doc.GetNumber(KeyStore.MinimizedX, 0) : 0); - var y = doc.GetNumber(KeyStore.Y, 0) + (minimized ? doc.GetNumber(KeyStore.MinimizedY, 0) : 0); - var w = minimized ? MINIMIZED_ICON_SIZE : doc.Width() / z; - var h = minimized ? MINIMIZED_ICON_SIZE : doc.Height() / z; + var x = doc.GetNumber(KeyStore.X, 0); + var y = doc.GetNumber(KeyStore.Y, 0); + 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/globalCssVariables.scss b/src/client/views/globalCssVariables.scss index f154f8158..4f68b71b0 100644 --- a/src/client/views/globalCssVariables.scss +++ b/src/client/views/globalCssVariables.scss @@ -24,8 +24,10 @@ $docDecorations-zindex: 998; // then doc decorations appear over everything else $remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right? $COLLECTION_BORDER_WIDTH: 1; $MINIMIZED_ICON_SIZE:25; +$MAX_ROW_HEIGHT: 44px; :export { contextMenuZindex: $contextMenu-zindex; COLLECTION_BORDER_WIDTH: $COLLECTION_BORDER_WIDTH; MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE; + MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT; } \ No newline at end of file diff --git a/src/client/views/globalCssVariables.scss.d.ts b/src/client/views/globalCssVariables.scss.d.ts index cc77d987a..9788d31f7 100644 --- a/src/client/views/globalCssVariables.scss.d.ts +++ b/src/client/views/globalCssVariables.scss.d.ts @@ -3,6 +3,7 @@ interface IGlobalScss { contextMenuZindex: string; // context menu shows up over everything COLLECTION_BORDER_WIDTH: string; MINIMIZED_ICON_SIZE: string; + MAX_ROW_HEIGHT: string; } declare const globalCssVariables: IGlobalScss; diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index a3689414d..1d42b3899 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -46,10 +46,10 @@ export class CollectionFreeFormDocumentView extends React.Component this.props.ScreenToLocalTransform() @@ -57,8 +57,8 @@ export class CollectionFreeFormDocumentView extends React.Component this.nativeWidth > 0 ? this.width / this.nativeWidth : 1; - panelWidth = () => this.isMinimized ? 10 : this.props.PanelWidth(); - panelHeight = () => this.isMinimized ? 10 : this.props.PanelHeight(); + panelWidth = () => this.props.PanelWidth(); + panelHeight = () => this.props.PanelHeight(); @computed get docView() { @@ -70,19 +70,17 @@ export class CollectionFreeFormDocumentView extends React.Component; } - get isMinimized() { return this.props.Document.GetBoolean(KeyStore.Minimized, false); } - render() { let zoomFade = 1; //var zoom = doc.GetNumber(KeyStore.Zoom, 1); - let transform = this.getTransform().scale(this.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; + // let transform = this.getTransform().scale(this.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 (
Error loading layout keys

; } return ; @@ -189,10 +179,10 @@ export class DocumentView extends React.Component { 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) { - SelectionManager.SelectDoc(this, e.ctrlKey); - } + if (!SelectionManager.IsSelected(this) && e.button !== 2) + if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) { + SelectionManager.SelectDoc(this, e.ctrlKey); + } } stopPropagation = (e: React.SyntheticEvent) => { e.stopPropagation(); @@ -221,13 +211,33 @@ export class DocumentView extends React.Component { ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15); } + @action createIcon = (layoutString: string): void => { + let iconDoc = Documents.IconDocument(layoutString); + iconDoc.SetBoolean(KeyStore.IsMinimized, false); + iconDoc.SetNumber(KeyStore.NativeWidth, 0); + iconDoc.SetNumber(KeyStore.NativeHeight, 0); + iconDoc.Set(KeyStore.Prototype, this.props.Document); + iconDoc.Set(KeyStore.MaximizedDoc, this.props.Document); + this.props.Document.Set(KeyStore.MinimizedDoc, iconDoc); + this.props.addDocument && this.props.addDocument(iconDoc, false); + } + @action - public minimize = (where: number[]): void => { - this.props.Document.SetBoolean(KeyStore.Minimized, true); - if (where[0] !== 0 || where[1] !== 0) - this.props.Document.SetNumber(KeyStore.MinimizedX, where[0]); - if (where[1] !== 0 || where[0] !== 0) - this.props.Document.SetNumber(KeyStore.MinimizedY, where[1]); + public minimize = (): void => { + this.props.Document.SetBoolean(KeyStore.IsMinimized, true); + this.props.Document.GetAsync(KeyStore.MinimizedDoc, mindoc => { + if (mindoc === undefined) { + this.props.Document.GetAsync(KeyStore.BackgroundLayout, field => { + if (field instanceof TextField) this.createIcon(field.Data); + else this.props.Document.GetAsync(KeyStore.Layout, field => { + if (field instanceof TextField) this.createIcon(field.Data); + }); + }); + } + else if (mindoc instanceof Document) { + this.props.addDocument && this.props.addDocument(mindoc, false); + } + }); } @undoBatch @@ -295,7 +305,6 @@ export class DocumentView extends React.Component { } e.preventDefault(); - !this.isMinimized() && ContextMenu.Instance.addItem({ description: "Minimize", event: () => this.minimize([0, 0]) }); 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) }); @@ -309,9 +318,6 @@ export class DocumentView extends React.Component { SelectionManager.SelectDoc(this, false); } - @action - expand = (e: React.MouseEvent) => { this.props.Document.SetBoolean(KeyStore.Minimized, false); SelectionManager.SelectDoc(this, e.ctrlKey); } - isMinimized = () => this.props.Document.GetBoolean(KeyStore.Minimized, false); isSelected = () => SelectionManager.IsSelected(this); select = (ctrlPressed: boolean) => SelectionManager.SelectDoc(this, ctrlPressed); @@ -319,27 +325,12 @@ export class DocumentView extends React.Component { @computed get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); } @computed get contents() { return (); } - @computed get minimizedIcon() { - let button = this.layout.indexOf("PDFBox") !== -1 ? faFilePdf : - this.layout.indexOf("ImageBox") !== -1 ? faImage : - this.layout.indexOf("Formatted") !== -1 ? faStickyNote : - this.layout.indexOf("Video") !== -1 ? faFilm : - this.layout.indexOf("Collection") !== -1 ? faObjectGroup : - faCaretUp; - return - } render() { var scaling = this.props.ContentScaling(); var nativeHeight = this.nativeHeight > 0 ? this.nativeHeight.toString() + "px" : "100%"; var nativeWidth = this.nativeWidth > 0 ? this.nativeWidth.toString() + "px" : "100%"; - if (this.isMinimized()) { - return ( -
- {this.minimizedIcon} -
); - } return (
{ else if (field instanceof ImageField) { return ; } + else if (field instanceof IconField) { + return ; + } else if (field instanceof VideoField) { return ; } diff --git a/src/client/views/nodes/IconBox.scss b/src/client/views/nodes/IconBox.scss new file mode 100644 index 000000000..ce0ee2e09 --- /dev/null +++ b/src/client/views/nodes/IconBox.scss @@ -0,0 +1,12 @@ + +@import "../globalCssVariables"; +.iconBox-container { + position: absolute; + left:0; + top:0; + svg { + width: 100% !important; + height: 100%; + background: white; + } +} \ No newline at end of file diff --git a/src/client/views/nodes/IconBox.tsx b/src/client/views/nodes/IconBox.tsx new file mode 100644 index 000000000..5ada2186d --- /dev/null +++ b/src/client/views/nodes/IconBox.tsx @@ -0,0 +1,90 @@ +import React = require("react"); +import { library } from '@fortawesome/fontawesome-svg-core'; +import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { action, computed } from "mobx"; +import { observer } from "mobx-react"; +import { Document } from '../../../fields/Document'; +import { IconField } from "../../../fields/IconFIeld"; +import { KeyStore } from "../../../fields/KeyStore"; +import { SelectionManager } from "../../util/SelectionManager"; +import { FieldView, FieldViewProps } from './FieldView'; +import "./IconBox.scss"; + + +library.add(faCaretUp); +library.add(faObjectGroup); +library.add(faStickyNote); +library.add(faFilePdf); +library.add(faFilm); + +@observer +export class IconBox extends React.Component { + public static LayoutString() { return FieldView.LayoutString(IconBox); } + + @computed get maximized() { return this.props.Document.GetT(KeyStore.MaximizedDoc, Document); } + @computed get layout(): string { return this.props.Document.GetData(this.props.fieldKey, IconField, "

Error loading layout data

" as string); } + @computed get minimizedIcon() { return IconBox.DocumentIcon(this.layout); } + + public static DocumentIcon(layout: string) { + let button = layout.indexOf("PDFBox") !== -1 ? faFilePdf : + layout.indexOf("ImageBox") !== -1 ? faImage : + layout.indexOf("Formatted") !== -1 ? faStickyNote : + layout.indexOf("Video") !== -1 ? faFilm : + layout.indexOf("Collection") !== -1 ? faObjectGroup : + faCaretUp; + return + } + + animateTransition(icon: number[], targ: number[], width: number, height: number, stime: number, target: Document, maximizing: boolean) { + setTimeout(() => { + let now = Date.now(); + let progress = Math.min(1, (now - stime) / 200); + let pval = maximizing ? + [icon[0] + (targ[0] - icon[0]) * progress, icon[1] + (targ[1] - icon[1]) * progress] : + [targ[0] + (icon[0] - targ[0]) * progress, targ[1] + (icon[1] - targ[1]) * progress]; + target.SetNumber(KeyStore.Width, maximizing ? 25 + (width - 25) * progress : width + (25 - width) * progress); + target.SetNumber(KeyStore.Height, maximizing ? 25 + (height - 25) * progress : height + (25 - height) * progress); + target.SetNumber(KeyStore.X, pval[0]); + target.SetNumber(KeyStore.Y, pval[1]); + if (now < stime + 200) { + this.animateTransition(icon, targ, width, height, stime, target, maximizing); + } + else { + if (!maximizing) { + target.SetBoolean(KeyStore.IsMinimized, true); + target.SetNumber(KeyStore.X, targ[0]); + target.SetNumber(KeyStore.Y, targ[1]); + target.SetNumber(KeyStore.Width, width); + target.SetNumber(KeyStore.Height, height); + } + this._completed = true; + } + }, + 2); + } + + _completed = true; + + @action + public toggleMinimize = (): void => { + SelectionManager.DeselectAll(); + if (this.maximized instanceof Document && this._completed) { + this._completed = false; + let minimized = this.maximized.GetBoolean(KeyStore.IsMinimized, false); + this.maximized.SetBoolean(KeyStore.IsMinimized, false); + this.animateTransition( + [this.props.Document.GetNumber(KeyStore.X, 0), this.props.Document.GetNumber(KeyStore.Y, 0)], + [this.maximized.GetNumber(KeyStore.X, 0), this.maximized.GetNumber(KeyStore.Y, 0)], + this.maximized.GetNumber(KeyStore.Width, 0), this.maximized.GetNumber(KeyStore.Width, 0), + Date.now(), this.maximized, minimized); + } + } + + render() { + return ( +
+ {this.minimizedIcon} +
); + } +} \ No newline at end of file diff --git a/src/fields/IconFIeld.ts b/src/fields/IconFIeld.ts new file mode 100644 index 000000000..a6694cc49 --- /dev/null +++ b/src/fields/IconFIeld.ts @@ -0,0 +1,25 @@ +import { BasicField } from "./BasicField"; +import { FieldId } from "./Field"; +import { Types } from "../server/Message"; + +export class IconField extends BasicField { + constructor(data: string = "", id?: FieldId, save: boolean = true) { + super(data, save, id); + } + + ToScriptString(): string { + return `new IconField("${this.Data}")`; + } + + Copy() { + return new IconField(this.Data); + } + + ToJson() { + return { + type: Types.Icon, + data: this.Data, + id: this.Id + }; + } +} \ No newline at end of file diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts index ff2f31003..a347f8bcf 100644 --- a/src/fields/KeyStore.ts +++ b/src/fields/KeyStore.ts @@ -4,8 +4,6 @@ export namespace KeyStore { export const Prototype = new Key("Prototype"); export const X = new Key("X"); export const Y = new Key("Y"); - export const MinimizedX = new Key("MinimizedX"); - export const MinimizedY = new Key("MinimizedY"); export const Page = new Key("Page"); export const Title = new Key("Title"); export const Author = new Key("Author"); @@ -47,14 +45,16 @@ export namespace KeyStore { export const OptionalRightCollection = new Key("OptionalRightCollection"); export const Archives = new Key("Archives"); export const Workspaces = new Key("Workspaces"); - export const Minimized = new Key("Minimized"); + export const IsMinimized = new Key("IsMinimized"); + export const MinimizedDoc = new Key("MinimizedDoc"); + export const MaximizedDoc = new Key("MaximizedDoc"); export const CopyDraggedItems = new Key("CopyDraggedItems"); - export const KeyList: Key[] = [Prototype, X, Y, MinimizedX, MinimizedY, Page, Title, Author, PanX, PanY, Scale, NativeWidth, NativeHeight, + export const KeyList: Key[] = [Prototype, X, Y, Page, Title, Author, PanX, PanY, Scale, NativeWidth, NativeHeight, Width, Height, ZIndex, Zoom, Data, Annotations, ViewType, Layout, BackgroundColor, BackgroundLayout, OverlayLayout, LayoutKeys, LayoutFields, ColumnsKey, SchemaSplitPercentage, Caption, ActiveWorkspace, DocumentText, BrushingDocs, LinkedToDocs, LinkedFromDocs, LinkDescription, LinkTags, Thumbnail, ThumbnailPage, CurPage, AnnotationOn, NumPages, Ink, Cursors, OptionalRightCollection, - Archives, Workspaces, Minimized, CopyDraggedItems + Archives, Workspaces, IsMinimized, MinimizedDoc, MaximizedDoc, CopyDraggedItems ]; export function KeyLookup(keyid: string) { for (const key of KeyList) { diff --git a/src/server/Message.ts b/src/server/Message.ts index bbe4ffcad..15916ef12 100644 --- a/src/server/Message.ts +++ b/src/server/Message.ts @@ -14,7 +14,7 @@ export class Message { } export enum Types { - Number, List, Key, Image, Web, Document, Text, RichText, DocumentReference, + Number, List, Key, Image, Web, Document, Text, Icon, RichText, DocumentReference, Html, Video, Audio, Ink, PDF, Tuple, HistogramOp, Boolean, Script, } diff --git a/src/server/ServerUtil.ts b/src/server/ServerUtil.ts index 818230c1a..79ca5e55d 100644 --- a/src/server/ServerUtil.ts +++ b/src/server/ServerUtil.ts @@ -18,6 +18,7 @@ import { NumberField } from "./../fields/NumberField"; import { RichTextField } from "./../fields/RichTextField"; import { TextField } from "./../fields/TextField"; import { Transferable, Types } from "./Message"; +import { IconField } from "../fields/IconFIeld"; export class ServerUtils { public static prepend(extension: string): string { @@ -37,6 +38,7 @@ export class ServerUtils { case Types.Boolean: return new BooleanField(json.data, json.id, false); case Types.Number: return new NumberField(json.data, json.id, false); case Types.Text: return new TextField(json.data, json.id, false); + case Types.Icon: return new IconField(json.data, json.id, false); case Types.Html: return new HtmlField(json.data, json.id, false); case Types.Web: return new WebField(new URL(json.data), json.id, false); case Types.RichText: return new RichTextField(json.data, json.id, false); -- cgit v1.2.3-70-g09d2 From c6bcea414a7ab89a5aab11fc6b44886066f38f0d Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sat, 20 Apr 2019 00:03:47 -0400 Subject: fixed some layout bugs --- src/client/views/DocumentDecorations.tsx | 54 +++++++++++----------- .../views/collections/CollectionBaseView.tsx | 7 +-- .../views/nodes/CollectionFreeFormDocumentView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 54 +++++++++------------- 4 files changed, 53 insertions(+), 64 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 1f5078c85..e68c4fe0f 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -198,28 +198,15 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> @action onMinimizeMove = (e: PointerEvent): void => { e.stopPropagation(); - let dx = e.pageX - this._downX; - let dy = e.pageY - this._downY; - if (Math.abs(dx) > 4 || Math.abs(dy) > 4) { + let moved = Math.abs(e.pageX - this._downX) > 4 || Math.abs(e.pageY - this._downY) > 4; + if (moved) { this._iconifying = true; - let xf = SelectionManager.SelectedDocuments()[0].props.ScreenToLocalTransform().scale(SelectionManager.SelectedDocuments()[0].props.ContentScaling()).inverse().transformPoint(0, 0); - let dx = e.pageX - xf[0]; - let dy = e.pageY - xf[1]; - this._minimizedX = e.clientX; - this._minimizedY = e.clientY; - if (Math.abs(dx) < 20 && Math.abs(dy) < 20) { - this._minimizedX = xf[0]; - this._minimizedY = xf[1]; - } - SelectionManager.SelectedDocuments().map(dv => { - let minDoc = dv.props.Document.Get(KeyStore.MinimizedDoc); - if (minDoc instanceof Document) { - let where = (dv.props.ScreenToLocalTransform()).scale(dv.props.ContentScaling()).transformPoint(this._minimizedX, this._minimizedY); - let minDocument = minDoc as Document; - minDocument.SetNumber(KeyStore.X, where[0] + dv.props.Document.GetNumber(KeyStore.X, 0)); - minDocument.SetNumber(KeyStore.Y, where[1] + dv.props.Document.GetNumber(KeyStore.Y, 0)); - } - }); + let selDoc = SelectionManager.SelectedDocuments()[0]; + let xf = selDoc.props.ScreenToLocalTransform().scale(selDoc.props.ContentScaling()).inverse().transformPoint(0, 0); + let snapped = Math.abs(e.pageX - xf[0]) < 20 && Math.abs(e.pageY - xf[1]) < 20; + this._minimizedX = snapped ? xf[0] + 12 : e.clientX; + this._minimizedY = snapped ? xf[1] + 12 : e.clientY; + this.moveMinDocs(); } } @action @@ -228,16 +215,27 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (e.button === 0) { let dx = e.clientX - this._downX; let dy = e.clientY - this._downY; - if (Math.abs(dx) < 4 && Math.abs(dy) < 4 && !this._iconifying) { - SelectionManager.SelectedDocuments().map(dv => dv.minimize()); - SelectionManager.DeselectAll(); - } else { - this._minimizedX = this._minimizedY = 0; - } + let tapped = Math.abs(dx) < 4 && Math.abs(dy) < 4 && !this._iconifying; document.removeEventListener("pointermove", this.onMinimizeMove); document.removeEventListener("pointerup", this.onMinimizeUp); + Promise.all(SelectionManager.SelectedDocuments().map(async selDoc => await selDoc.minimize())).then(() => { + !tapped && this.moveMinDocs(); + this._minimizedX = this._minimizedY = 0; + }); + this._iconifying = false; } - this._iconifying = false; + } + moveMinDocs() { + SelectionManager.SelectedDocuments().map(selDoc => { + let minDoc = selDoc.props.Document.Get(KeyStore.MinimizedDoc); + if (minDoc instanceof Document) { + let zoom = selDoc.props.Document.GetNumber(KeyStore.Zoom, 1); + let where = (selDoc.props.ScreenToLocalTransform()).scale(selDoc.props.ContentScaling()).scale(1 / zoom). + transformPoint(this._minimizedX - 12, this._minimizedY - 12); + minDoc.SetNumber(KeyStore.X, where[0] + selDoc.props.Document.GetNumber(KeyStore.X, 0)); + minDoc.SetNumber(KeyStore.Y, where[1] + selDoc.props.Document.GetNumber(KeyStore.Y, 0)); + } + }); } onPointerDown = (e: React.PointerEvent): void => { diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index 4755b2d57..0c1cd7b8f 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -90,9 +90,6 @@ export class CollectionBaseView extends React.Component { let props = this.props; var curPage = props.Document.GetNumber(KeyStore.CurPage, -1); doc.SetOnPrototype(KeyStore.Page, new NumberField(curPage)); - if (true || this.isAnnotationOverlay) { - doc.SetNumber(KeyStore.Zoom, this.props.Document.GetNumber(KeyStore.Scale, 1)); - } if (curPage >= 0) { doc.SetOnPrototype(KeyStore.AnnotationOn, props.Document); } @@ -103,6 +100,7 @@ export class CollectionBaseView extends React.Component { if (!value.some(v => v.Id === doc.Id) || allowDuplicates) { value.push(doc); } + return true; } else { return false; @@ -136,6 +134,9 @@ export class CollectionBaseView extends React.Component { return false; } } + if (true || this.isAnnotationOverlay) { + doc.SetNumber(KeyStore.Zoom, this.props.Document.GetNumber(KeyStore.Scale, 1)); + } return true; } diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 1d42b3899..01a9f26bf 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -56,7 +56,7 @@ export class CollectionFreeFormDocumentView extends React.Component this.nativeWidth > 0 ? this.width / this.nativeWidth : 1; + contentScaling = () => (this.nativeWidth > 0 ? this.width / this.nativeWidth : 1); panelWidth = () => this.props.PanelWidth(); panelHeight = () => this.props.PanelHeight(); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index d571e7c3c..44c71c24a 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -179,19 +179,16 @@ export class DocumentView extends React.Component { document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); e.stopPropagation(); - if (!SelectionManager.IsSelected(this) && e.button !== 2) - if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) { - if (this.props.Document.Get(KeyStore.MaximizedDoc) instanceof Document) { - this.props.Document.GetAsync(KeyStore.MaximizedDoc, maxdoc => { - if (maxdoc instanceof Document) { - this.props.addDocument && this.props.addDocument(maxdoc, false); - this.toggleMinimize(maxdoc, this.props.Document); - } - }); - } else { + if (!SelectionManager.IsSelected(this) && e.button !== 2 && + Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) { + this.props.Document.GetTAsync(KeyStore.MaximizedDoc, Document).then(maxdoc => { + if (maxdoc instanceof Document) { + this.props.addDocument && this.props.addDocument(maxdoc, false); + this.toggleMinimize(maxdoc, this.props.Document); + } else SelectionManager.SelectDoc(this, e.ctrlKey); - } - } + }); + } } stopPropagation = (e: React.SyntheticEvent) => { e.stopPropagation(); @@ -278,26 +275,19 @@ export class DocumentView extends React.Component { } @action - public minimize = (): void => { - this.props.Document.GetAsync(KeyStore.MinimizedDoc, mindoc => { - if (mindoc === undefined) { - this.props.Document.GetAsync(KeyStore.BackgroundLayout, field => { - if (field instanceof TextField) { - this.toggleMinimize(this.props.Document, this.createIcon(field.Data)); - } - else this.props.Document.GetAsync(KeyStore.Layout, field => { - if (field instanceof TextField) { - this.createIcon(field.Data); - this.toggleMinimize(this.props.Document, this.createIcon(field.Data)); - } - }); - }); - } - else if (mindoc instanceof Document) { - this.props.addDocument && this.props.addDocument(mindoc, false); - this.toggleMinimize(this.props.Document, mindoc); - } - }); + public minimize = async (): Promise => { + let mindoc = await this.props.Document.GetTAsync(KeyStore.MinimizedDoc, Document).then(async mindoc => + mindoc ? mindoc : + await this.props.Document.GetTAsync(KeyStore.BackgroundLayout, TextField).then(async field => + (field instanceof TextField) ? this.createIcon(field.Data) : + await this.props.Document.GetTAsync(KeyStore.Layout, TextField).then(field => + (field instanceof TextField) ? this.createIcon(field.Data) : undefined))); + + if (mindoc instanceof Document) { + this.props.addDocument && this.props.addDocument(mindoc, false); + this.toggleMinimize(this.props.Document, mindoc); + } + return mindoc; } @undoBatch -- cgit v1.2.3-70-g09d2 From b63bcb791013766d5d16e4f38964499268f904c4 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 21 Apr 2019 00:03:52 -0400 Subject: fixed a bunch of issues related to moving documents with different zoom bases. --- src/client/documents/Documents.ts | 2 + src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/MainOverlayTextBox.tsx | 4 +- .../views/collections/CollectionBaseView.tsx | 78 ++++++++++------------ src/client/views/collections/CollectionSubView.tsx | 38 +++-------- .../collectionFreeForm/CollectionFreeFormView.tsx | 7 +- .../collections/collectionFreeForm/MarqueeView.tsx | 10 +-- .../views/nodes/CollectionFreeFormDocumentView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 19 +++--- src/fields/KeyStore.ts | 4 +- 10 files changed, 72 insertions(+), 94 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index b0bb74d89..0e6661819 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -54,6 +54,7 @@ export interface DocumentOptions { viewType?: number; backgroundColor?: string; copyDraggedItems?: boolean; + documentText?: string; } export namespace Documents { @@ -97,6 +98,7 @@ export namespace Documents { if (options.nativeHeight !== undefined) { doc.SetNumber(KeyStore.NativeHeight, options.nativeHeight); } if (options.title !== undefined) { doc.SetText(KeyStore.Title, options.title); } if (options.page !== undefined) { doc.SetNumber(KeyStore.Page, options.page); } + if (options.documentText !== undefined) { doc.SetText(KeyStore.DocumentText, options.documentText); } if (options.scale !== undefined) { doc.SetNumber(KeyStore.Scale, options.scale); } if (options.width !== undefined) { doc.SetNumber(KeyStore.Width, options.width); } if (options.height !== undefined) { doc.SetNumber(KeyStore.Height, options.height); } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 32cf985ce..2af6cb353 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -246,7 +246,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> selViews.map(selDoc => { let minDoc = selDoc.props.Document.Get(KeyStore.MinimizedDoc); if (minDoc instanceof Document) { - let zoom = selDoc.props.Document.GetNumber(KeyStore.Zoom, 1); + let zoom = selDoc.props.Document.GetNumber(KeyStore.ZoomBasis, 1); let where = (selDoc.props.ScreenToLocalTransform()).scale(selDoc.props.ContentScaling()).scale(1 / zoom). transformPoint(this._minimizedX - 12, this._minimizedY - 12); minDoc.SetNumber(KeyStore.X, where[0] + selDoc.props.Document.GetNumber(KeyStore.X, 0)); diff --git a/src/client/views/MainOverlayTextBox.tsx b/src/client/views/MainOverlayTextBox.tsx index af74efc9d..2b72b09c6 100644 --- a/src/client/views/MainOverlayTextBox.tsx +++ b/src/client/views/MainOverlayTextBox.tsx @@ -71,9 +71,7 @@ export class MainOverlayTextBox extends React.Component document.removeEventListener("pointermove", this.textBoxMove); document.removeEventListener('pointerup', this.textBoxUp); let dragData = new DragManager.DocumentDragData([this.TextDoc!]); - const [left, top] = this._textXf - .inverse() - .transformPoint(0, 0); + const [left, top] = this._textXf.inverse().transformPoint(0, 0); dragData.xOffset = e.clientX - left; dragData.yOffset = e.clientY - top; DragManager.StartDocumentDrag([this._textTargetDiv!], dragData, e.clientX, e.clientY, { diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index 0c1cd7b8f..eec01bb3f 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -8,6 +8,7 @@ import { ListField } from '../../../fields/ListField'; import { NumberField } from '../../../fields/NumberField'; import { ContextMenu } from '../ContextMenu'; import { FieldViewProps } from '../nodes/FieldView'; +import { TextField } from '../../../fields/TextField'; export enum CollectionViewType { Invalid, @@ -87,57 +88,50 @@ export class CollectionBaseView extends React.Component { @action.bound addDocument(doc: Document, allowDuplicates: boolean = false): boolean { - let props = this.props; - var curPage = props.Document.GetNumber(KeyStore.CurPage, -1); + var curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1); doc.SetOnPrototype(KeyStore.Page, new NumberField(curPage)); if (curPage >= 0) { - doc.SetOnPrototype(KeyStore.AnnotationOn, props.Document); + doc.SetOnPrototype(KeyStore.AnnotationOn, this.props.Document); } - if (props.Document.Get(props.fieldKey) instanceof Field) { - //TODO This won't create the field if it doesn't already exist - const value = props.Document.GetData(props.fieldKey, ListField, new Array()); - if (!this.createsCycle(doc, props.Document)) { + if (this.props.Document.Get(this.props.fieldKey) instanceof Field) { + const value = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); + if (!this.createsCycle(doc, this.props.Document)) { if (!value.some(v => v.Id === doc.Id) || allowDuplicates) { value.push(doc); + doc.SetNumber(KeyStore.ZoomBasis, this.props.Document.GetNumber(KeyStore.Scale, 1)); } return true; } - else { - return false; - } - } else { - let proto = props.Document.GetPrototype(); - if (!proto || proto === FieldWaiting || !this.createsCycle(proto, doc)) { - const field = new ListField([doc]); - // const script = CompileScript(` - // if(added) { - // console.log("added " + field.Title + " " + doc.Title); - // } else { - // console.log("removed " + field.Title + " " + doc.Title); - // } - // `, { - // addReturn: false, - // params: { - // field: Document.name, - // added: "boolean" - // }, - // capturedVariables: { - // doc: this.props.Document - // } - // }); - // if (script.compiled) { - // field.addScript(new ScriptField(script)); - // } - props.Document.SetOnPrototype(props.fieldKey, field); - } - else { - return false; - } - } - if (true || this.isAnnotationOverlay) { - doc.SetNumber(KeyStore.Zoom, this.props.Document.GetNumber(KeyStore.Scale, 1)); } - return true; + // bcz: What is this code trying to do? + // else { + // let proto = props.Document.GetPrototype(); + // if (!proto || proto === FieldWaiting || !this.createsCycle(proto, doc)) { + // const field = new ListField([doc]); + // // const script = CompileScript(` + // // if(added) { + // // console.log("added " + field.Title + " " + doc.Title); + // // } else { + // // console.log("removed " + field.Title + " " + doc.Title); + // // } + // // `, { + // // addReturn: false, + // // params: { + // // field: Document.name, + // // added: "boolean" + // // }, + // // capturedVariables: { + // // doc: this.props.Document + // // } + // // }); + // // if (script.compiled) { + // // field.addScript(new ScriptField(script)); + // // } + // props.Document.SetOnPrototype(props.fieldKey, field); + // return true; + // } + // } + return false; } @action.bound diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 5c3b2e586..ead559bd9 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -159,10 +159,7 @@ export class CollectionSubView extends React.Component { e.preventDefault(); if (html && html.indexOf(" { let type = item.type; if (item.kind === "file") { let file = item.getAsFile(); - let formData = new FormData(); - - if (file) { - formData.append('file', file); - } let dropFileName = file ? file.name : "-empty-"; + let formData = new FormData(); + if (file) formData.append('file', file); - let prom = fetch(upload, { + promises.push(fetch(upload, { method: 'POST', body: formData - }).then(async (res: Response) => { - (await res.json()).map(action((file: any) => { - let path = window.location.origin + file; - let docPromise = this.getDocumentFromType(type, path, { ...options, nativeWidth: 600, width: 300, title: dropFileName }); - - docPromise.then(action((doc?: Document) => { - let docs = this.props.Document.GetT(KeyStore.Data, ListField); - if (docs !== FieldWaiting) { - if (!docs) { - docs = new ListField(); - this.props.Document.Set(KeyStore.Data, docs); - } - if (doc) { - docs.Data.push(doc); - } - } - })); - })); - }); - promises.push(prom); + }).then(async (res: Response) => + (await res.json()).map(action((file: any) => + this.getDocumentFromType(type, window.location.origin + file, { ...options, nativeWidth: 600, width: 300, title: dropFileName }). + then(doc => doc && this.props.addDocument(doc, false)))))); } } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 9730fc27b..83b7f9be4 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -49,7 +49,6 @@ export class CollectionFreeFormView extends CollectionSubView { this.addDocument(newBox, false); } private addDocument = (newBox: Document, allowDuplicates: boolean) => { - newBox.SetNumber(KeyStore.Zoom, this.props.Document.GetNumber(KeyStore.Scale, 1)); return this.props.addDocument(this.bringToFront(newBox), false); } private selectDocuments = (docs: Document[]) => { @@ -72,9 +71,13 @@ export class CollectionFreeFormView extends CollectionSubView { @action drop = (e: Event, de: DragManager.DropEvent) => { if (super.drop(e, de) && de.data instanceof DragManager.DocumentDragData) { - const [x, y] = this.getTransform().transformPoint(de.x - de.data.xOffset, de.y - de.data.yOffset); if (de.data.droppedDocuments.length) { let dragDoc = de.data.droppedDocuments[0]; + let zoom = dragDoc.GetNumber(KeyStore.ZoomBasis, 1); + let [xp, yp] = this.getTransform().transformPoint(de.x, de.y); + let x = xp - de.data.xOffset / zoom; + let y = yp - de.data.yOffset / zoom; + let dropX = dragDoc.GetNumber(KeyStore.X, 0); let dropY = dragDoc.GetNumber(KeyStore.Y, 0); de.data.droppedDocuments.map(d => { diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index bf918beba..318adbe85 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -152,20 +152,20 @@ export class MarqueeView extends React.Component }); let ink = this.props.container.props.Document.GetT(KeyStore.Ink, InkField); let inkData = ink && ink !== FieldWaiting ? ink.Data : undefined; - //setTimeout(() => { + let zoomBasis = this.props.container.props.Document.GetNumber(KeyStore.Scale, 1); let newCollection = Documents.FreeformDocument(selected, { x: bounds.left, y: bounds.top, panx: 0, pany: 0, - width: bounds.width, - height: bounds.height, + scale: zoomBasis, + width: bounds.width * zoomBasis, + height: bounds.height * zoomBasis, ink: inkData ? this.marqueeInkSelect(inkData) : undefined, title: "a nested collection" }); this.props.addDocument(newCollection, false); this.marqueeInkDelete(inkData); - // }, 100); this.cleanupInteractions(); SelectionManager.DeselectAll(); } @@ -208,7 +208,7 @@ export class MarqueeView extends React.Component let selRect = this.Bounds; let selection: Document[] = []; this.props.activeDocuments().map(doc => { - var z = doc.GetNumber(KeyStore.Zoom, 1); + var z = doc.GetNumber(KeyStore.ZoomBasis, 1); var x = doc.GetNumber(KeyStore.X, 0); var y = doc.GetNumber(KeyStore.Y, 0); var w = doc.Width() / z; diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 01a9f26bf..12e5bdf1f 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -20,7 +20,7 @@ export class CollectionFreeFormDocumentView extends React.Component { } e.stopPropagation(); } else { - if (this.active) { + let maxdoc = this.props.Document.GetT(KeyStore.MaximizedDoc, Document); + if (this.active || + maxdoc instanceof Document // bcz: need a better way of allowing a document to handle pointer events when its not active (ie. be a top-level widget) + ) { e.stopPropagation(); document.removeEventListener("pointermove", this.onPointerMove); document.addEventListener("pointermove", this.onPointerMove); @@ -149,11 +152,12 @@ export class DocumentView extends React.Component { 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().scale(this.props.ContentScaling()).inverse().transformPoint(0, 0); let dragData = new DragManager.DocumentDragData([this.props.Document]); + const [xoff, yoff] = this.props.ScreenToLocalTransform().scale(this.props.ContentScaling()).transformDirection(x - left, y - top); dragData.aliasOnDrop = dropAliasOfDraggedDoc; - dragData.xOffset = x - left; - dragData.yOffset = y - top; + dragData.xOffset = xoff; + dragData.yOffset = yoff; dragData.moveDocument = this.props.moveDocument; DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, { handlers: { @@ -185,7 +189,7 @@ export class DocumentView extends React.Component { if (!SelectionManager.IsSelected(this) && e.button !== 2 && Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) { this.props.Document.GetTAsync(KeyStore.MaximizedDoc, Document).then(maxdoc => { - if (maxdoc instanceof Document) { + if (maxdoc instanceof Document) { // bcz: need a better way to associate behaviors with click events on widget-documents this.props.addDocument && this.props.addDocument(maxdoc, false); this.toggleIcon(); } else @@ -202,9 +206,8 @@ export class DocumentView extends React.Component { } fieldsClicked = (e: React.MouseEvent): void => { - if (this.props.addDocument) { - this.props.addDocument(Documents.KVPDocument(this.props.Document, { width: 300, height: 300 }), false); - } + let kvp = Documents.KVPDocument(this.props.Document, { width: 300, height: 300 }); + CollectionDockingView.Instance.AddRightSplit(kvp); } fullScreenClicked = (e: React.MouseEvent): void => { CollectionDockingView.Instance.OpenFullScreen((this.props.Document.GetPrototype() as Document).MakeDelegate()); diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts index a347f8bcf..0a96beb50 100644 --- a/src/fields/KeyStore.ts +++ b/src/fields/KeyStore.ts @@ -15,7 +15,7 @@ export namespace KeyStore { export const Width = new Key("Width"); export const Height = new Key("Height"); export const ZIndex = new Key("ZIndex"); - export const Zoom = new Key("Zoom"); + export const ZoomBasis = new Key("ZoomBasis"); export const Data = new Key("Data"); export const Annotations = new Key("Annotations"); export const ViewType = new Key("ViewType"); @@ -51,7 +51,7 @@ export namespace KeyStore { export const CopyDraggedItems = new Key("CopyDraggedItems"); export const KeyList: Key[] = [Prototype, X, Y, Page, Title, Author, PanX, PanY, Scale, NativeWidth, NativeHeight, - Width, Height, ZIndex, Zoom, Data, Annotations, ViewType, Layout, BackgroundColor, BackgroundLayout, OverlayLayout, LayoutKeys, + Width, Height, ZIndex, ZoomBasis, Data, Annotations, ViewType, Layout, BackgroundColor, BackgroundLayout, OverlayLayout, LayoutKeys, LayoutFields, ColumnsKey, SchemaSplitPercentage, Caption, ActiveWorkspace, DocumentText, BrushingDocs, LinkedToDocs, LinkedFromDocs, LinkDescription, LinkTags, Thumbnail, ThumbnailPage, CurPage, AnnotationOn, NumPages, Ink, Cursors, OptionalRightCollection, Archives, Workspaces, IsMinimized, MinimizedDoc, MaximizedDoc, CopyDraggedItems -- cgit v1.2.3-70-g09d2 From 3556aae6d063d8b654509330e70bc67606f16613 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sun, 21 Apr 2019 00:39:09 -0400 Subject: More changes --- .../views/collections/CollectionDockingView.tsx | 38 +++++++++---------- .../views/nodes/CollectionFreeFormDocumentView.tsx | 43 +++++++++++++--------- src/new_fields/Doc.ts | 9 ++--- src/new_fields/Proxy.ts | 2 +- src/new_fields/Types.ts | 22 ++++++++--- 5 files changed, 65 insertions(+), 49 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index b6c87231f..7b204cbdc 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -250,28 +250,26 @@ export class CollectionDockingView extends React.Component { if (tab.hasOwnProperty("contentItem") && tab.contentItem.config.type !== "stack") { - Server.GetField(tab.contentItem.config.props.documentId, action((f: Opt) => { - if (f !== undefined && f instanceof Document) { - f.GetTAsync(KeyStore.Title, TextField, (tfield) => { - if (tfield !== undefined) { - tab.titleElement[0].textContent = f.Title; - } - }); - f.GetTAsync(KeyStore.LinkedFromDocs, ListField).then(lf => - f.GetTAsync(KeyStore.LinkedToDocs, ListField).then(lt => { - let count = (lf ? lf.Data.length : 0) + (lt ? lt.Data.length : 0); - let counter: any = this.htmlToElement(`
${count}
`); - tab.element.append(counter); - counter.DashDocId = tab.contentItem.config.props.documentId; - tab.reactionDisposer = reaction((): [List | null | undefined, List | null | undefined] => [Cast(f.linkedFromDocs, List), Cast(f.linkedToDocs, List)], - ([linkedFrom, linkedTo]) => { - let count = (linkedFrom ? linkedFrom.length : 0) + (linkedTo ? linkedTo.length : 0); - counter.innerHTML = count; - }); - })); + DocServer.GetRefField(tab.contentItem.config.props.documentId).then(async f => { + if (f instanceof Doc) { + const tfield = await Cast(f.title, "string"); + if (tfield !== undefined) { + tab.titleElement[0].textContent = f.Title; + } + const lf = await Cast(f.linkedFromDocs, List); + const lt = await Cast(f.linkedToDocs, List); + let count = (lf ? lf.length : 0) + (lt ? lt.length : 0); + let counter: any = this.htmlToElement(`
${count}
`); + tab.element.append(counter); + counter.DashDocId = tab.contentItem.config.props.documentId; + tab.reactionDisposer = reaction((): [List | null | undefined, List | null | undefined] => [lf, lt], + ([linkedFrom, linkedTo]) => { + let count = (linkedFrom ? linkedFrom.length : 0) + (linkedTo ? linkedTo.length : 0); + counter.innerHTML = count; + }); tab.titleElement[0].DashDocId = tab.contentItem.config.props.documentId; } - })); + }); } tab.closeElement.off('click') //unbind the current click handler .click(function () { diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 1d42b3899..27fd25b5c 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -1,18 +1,27 @@ import { computed, trace } from "mobx"; import { observer } from "mobx-react"; -import { KeyStore } from "../../../fields/KeyStore"; -import { NumberField } from "../../../fields/NumberField"; import { Transform } from "../../util/Transform"; -import { DocumentView, DocumentViewProps } from "./DocumentView"; +import { DocumentView, DocumentViewProps, positionSchema } from "./DocumentView"; import "./DocumentView.scss"; import React = require("react"); import { OmitKeys } from "../../../Utils"; +import { DocComponent } from "../DocComponent"; +import { createSchema, makeInterface } from "../../../new_fields/Schema"; +import { FieldValue } from "../../../new_fields/Types"; export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { } +const schema = createSchema({ + zoom: "number", + zIndex: "number" +}); + +type FreeformDocument = makeInterface<[typeof schema, typeof positionSchema]>; +const FreeformDocument = makeInterface([schema, positionSchema]); + @observer -export class CollectionFreeFormDocumentView extends React.Component { +export class CollectionFreeFormDocumentView extends DocComponent(FreeformDocument) { private _mainCont = React.createRef(); @computed @@ -20,36 +29,36 @@ export class CollectionFreeFormDocumentView extends React.Component this.props.ScreenToLocalTransform() diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts index 8cbd8cf38..10e8fe7ec 100644 --- a/src/new_fields/Doc.ts +++ b/src/new_fields/Doc.ts @@ -32,9 +32,8 @@ export class ObjectField { export type Field = number | string | boolean | ObjectField | RefField; export type Opt = T | undefined; -export type FieldWaiting = null; -export const FieldWaiting: FieldWaiting = null; -export type FieldValue = Opt | FieldWaiting; +export type FieldWaiting = Promise; +export type FieldValue = Opt | FieldWaiting; export const Self = Symbol("Self"); @@ -58,7 +57,7 @@ export class Doc extends RefField { @serializable(alias("fields", map(autoObject()))) @observable - private __fields: { [key: string]: Field | null | undefined } = {}; + private __fields: { [key: string]: Field | FieldWaiting | undefined } = {}; private [Update] = (diff: any) => { DocServer.UpdateField(this[Id], diff); @@ -78,7 +77,7 @@ export namespace Doc { return Cast(field, ctor); }); } - export function Get(doc: Doc, key: string, ignoreProto: boolean = false): Field | null | undefined { + export function Get(doc: Doc, key: string, ignoreProto: boolean = false): FieldValue { const self = doc[Self]; return getField(self, key, ignoreProto); } diff --git a/src/new_fields/Proxy.ts b/src/new_fields/Proxy.ts index 6a78388c1..2aa78731e 100644 --- a/src/new_fields/Proxy.ts +++ b/src/new_fields/Proxy.ts @@ -50,6 +50,6 @@ export class ProxyField extends ObjectField { })); } callback && this.promise.then(callback); - return null; + return this.promise; } } diff --git a/src/new_fields/Types.ts b/src/new_fields/Types.ts index 0fbd8984c..0392dc2fb 100644 --- a/src/new_fields/Types.ts +++ b/src/new_fields/Types.ts @@ -1,4 +1,4 @@ -import { Field, Opt } from "./Doc"; +import { Field, Opt, FieldWaiting, FieldValue } from "./Doc"; import { List } from "./List"; export type ToType = @@ -6,7 +6,7 @@ export type ToType = T extends "number" ? number : T extends "boolean" ? boolean : T extends ListSpec ? List : - T extends { new(...args: any[]): infer R } ? R : never; + T extends { new(...args: any[]): infer R } ? (R | Promise) : never; export type ToConstructor = T extends string ? "string" : @@ -35,10 +35,13 @@ export interface Interface { export type FieldCtor = T extends List ? ListSpec : ToConstructor; -export function Cast>(field: Field | null | undefined, ctor: T): ToType | null | undefined; -export function Cast>(field: Field | null | undefined, ctor: T, defaultVal: ToType): ToType; -export function Cast>(field: Field | null | undefined, ctor: T, defaultVal?: ToType): ToType | null | undefined { - if (field !== undefined && field !== null) { +export function Cast>(field: Field | FieldWaiting | undefined, ctor: T): FieldValue>; +export function Cast>(field: Field | FieldWaiting | undefined, ctor: T, defaultVal: ToType): ToType; +export function Cast>(field: Field | FieldWaiting | undefined, ctor: T, defaultVal?: ToType): FieldValue> | undefined { + if (field instanceof Promise) { + return defaultVal === undefined ? field.then(f => Cast(f, ctor) as any) : defaultVal; + } + if (field !== undefined && !(field instanceof Promise)) { if (typeof ctor === "string") { if (typeof field === ctor) { return field as ToType; @@ -59,3 +62,10 @@ export function FieldValue(field: Opt | Promise>): Op export function FieldValue(field: Opt | Promise>, defaultValue?: T): Opt { return field instanceof Promise ? defaultValue : field; } + +export interface PromiseLike { + then(callback: (field: Opt | PromiseLike) => void): void; +} +export function PromiseValue(field: FieldValue): PromiseLike> { + return field instanceof Promise ? field : { then(cb: ((field: Opt) => void)) { return cb(field); } }; +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 393d351420b3a0d28f4cd1ea8b674fa5d04bfcde Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sun, 21 Apr 2019 23:40:48 -0400 Subject: More fixes --- .../views/collections/CollectionDockingView.tsx | 6 ++-- .../views/nodes/CollectionFreeFormDocumentView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/FieldView.tsx | 8 ++--- src/client/views/nodes/ImageBox.tsx | 15 +++++----- src/client/views/nodes/VideoBox.tsx | 35 ++++++++++++---------- src/client/views/nodes/WebBox.tsx | 4 +-- src/debug/Test.tsx | 12 ++++---- src/new_fields/Doc.ts | 4 +-- src/new_fields/Schema.ts | 22 +++----------- src/new_fields/Types.ts | 11 +++---- src/new_fields/URLField.ts | 9 ++++-- 12 files changed, 62 insertions(+), 68 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 7b204cbdc..86ee7cea9 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -16,7 +16,7 @@ import { ServerUtils } from "../../../server/ServerUtil"; import { DragManager, DragLinksAsDocuments } from "../../util/DragManager"; import { Transform } from '../../util/Transform'; import { Doc, Id, Opt, Field, FieldId } from "../../../new_fields/Doc"; -import { Cast, FieldValue } from "../../../new_fields/Types"; +import { Cast } from "../../../new_fields/Types"; import { List } from "../../../new_fields/List"; import { DocServer } from "../../DocServer"; @@ -336,8 +336,8 @@ export class DockedFrameRenderer extends React.Component { ScreenToLocalTransform = () => { if (this._mainCont.current && this._mainCont.current.children) { - let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!.children[0].firstChild as HTMLElement); - scale = Utils.GetScreenTransform(this._mainCont.current!).scale; + let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current.children[0].firstChild as HTMLElement); + scale = Utils.GetScreenTransform(this._mainCont.current).scale; return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this.contentScaling()); } return Transform.Identity(); diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 27fd25b5c..c6eea5623 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -18,7 +18,7 @@ const schema = createSchema({ }); type FreeformDocument = makeInterface<[typeof schema, typeof positionSchema]>; -const FreeformDocument = makeInterface([schema, positionSchema]); +const FreeformDocument = makeInterface(schema, positionSchema); @observer export class CollectionFreeFormDocumentView extends DocComponent(FreeformDocument) { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index f1a12e6db..c0afc192e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -56,7 +56,7 @@ export const positionSchema = createSchema({ }); type Document = makeInterface<[typeof schema]>; -const Document = makeInterface([schema]); +const Document = makeInterface(schema); @observer export class DocumentView extends DocComponent(Document) { diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 845213366..b11a87d75 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -3,19 +3,19 @@ import { observer } from "mobx-react"; import { computed } from "mobx"; import { FormattedTextBox } from "./FormattedTextBox"; import { ImageBox } from "./ImageBox"; -import { WebBox } from "./WebBox"; import { VideoBox } from "./VideoBox"; import { AudioBox } from "./AudioBox"; import { DocumentContentsView } from "./DocumentContentsView"; import { Transform } from "../../util/Transform"; -import { returnFalse, emptyFunction, returnOne } from "../../../Utils"; +import { returnFalse, emptyFunction } from "../../../Utils"; import { CollectionView } from "../collections/CollectionView"; import { CollectionPDFView } from "../collections/CollectionPDFView"; import { CollectionVideoView } from "../collections/CollectionVideoView"; import { IconField } from "../../../fields/IconFIeld"; import { IconBox } from "./IconBox"; -import { Opt, Doc, Field, FieldValue, FieldWaiting } from "../../../new_fields/Doc"; +import { Opt, Doc, FieldResult } from "../../../new_fields/Doc"; import { List } from "../../../new_fields/List"; +import { ImageField, VideoField, AudioField } from "../../../new_fields/URLField"; // @@ -47,7 +47,7 @@ export class FieldView extends React.Component { } @computed - get field(): FieldValue { + get field(): FieldResult { const { Document, fieldKey } = this.props; return Document[fieldKey]; } diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 3b72e9f39..c11aee56e 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -14,16 +14,15 @@ import { createSchema, makeInterface } from '../../../new_fields/Schema'; import { DocComponent } from '../DocComponent'; import { positionSchema } from './DocumentView'; import { FieldValue, Cast } from '../../../new_fields/Types'; -import { URLField } from '../../../new_fields/URLField'; -import { Doc, FieldWaiting } from '../../../new_fields/Doc'; +import { ImageField } from '../../../new_fields/URLField'; import { List } from '../../../new_fields/List'; -const schema = createSchema({ +export const pageSchema = createSchema({ curPage: "number" }); -type ImageDocument = makeInterface<[typeof schema, typeof positionSchema]>; -const ImageDocument = makeInterface([schema, positionSchema]); +type ImageDocument = makeInterface<[typeof pageSchema, typeof positionSchema]>; +const ImageDocument = makeInterface(pageSchema, positionSchema); @observer export class ImageBox extends DocComponent(ImageDocument) { @@ -135,7 +134,7 @@ export class ImageBox extends DocComponent(ImageD } specificContextMenu = (e: React.MouseEvent): void => { - let field = Cast(this.Document[this.props.fieldKey], URLField); + let field = Cast(this.Document[this.props.fieldKey], ImageField); if (field && field !== FieldWaiting) { let url = field.url.href; ContextMenu.Instance.addItem({ @@ -167,8 +166,8 @@ export class ImageBox extends DocComponent(ImageD let field = this.Document[this.props.fieldKey]; let paths: string[] = ["http://www.cs.brown.edu/~bcz/face.gif"]; if (field === FieldWaiting) paths = ["https://image.flaticon.com/icons/svg/66/66163.svg"]; - else if (field instanceof URLField) paths = [field.url.href]; - else if (field instanceof List) paths = field.filter(val => val instanceof URLField).map(p => (p as URLField).url.href); + else if (field instanceof ImageField) paths = [field.url.href]; + else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p => (p as ImageField).url.href); let nativeWidth = FieldValue(this.Document.nativeWidth, 1); return (
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 9d7c2bc56..7b922b620 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -1,18 +1,22 @@ import React = require("react"); import { observer } from "mobx-react"; -import { FieldWaiting, Opt } from '../../../fields/Field'; -import { VideoField } from '../../../fields/VideoField'; import { FieldView, FieldViewProps } from './FieldView'; import "./VideoBox.scss"; import Measure from "react-measure"; -import { action, trace, observable, IReactionDisposer, computed, reaction } from "mobx"; -import { KeyStore } from "../../../fields/KeyStore"; -import { number } from "prop-types"; +import { action, computed } from "mobx"; +import { DocComponent } from "../DocComponent"; +import { positionSchema } from "./DocumentView"; +import { makeInterface } from "../../../new_fields/Schema"; +import { pageSchema } from "./ImageBox"; +import { Cast, FieldValue } from "../../../new_fields/Types"; +import { VideoField } from "../../../new_fields/URLField"; + +type VideoDocument = makeInterface<[typeof positionSchema, typeof pageSchema]>; +const VideoDocument = makeInterface(positionSchema, pageSchema); @observer -export class VideoBox extends React.Component { +export class VideoBox extends DocComponent(VideoDocument) { - private _reactionDisposer: Opt; private _videoRef = React.createRef(); public static LayoutString() { return FieldView.LayoutString(VideoBox); } @@ -20,7 +24,7 @@ export class VideoBox extends React.Component { super(props); } - @computed private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, -1); } + @computed private get curPage() { return FieldValue(this.Document.curPage, -1); } _loaded: boolean = false; @@ -31,12 +35,12 @@ export class VideoBox extends React.Component { // bcz: the nativeHeight should really be set when the document is imported. // also, the native dimensions could be different for different pages of the PDF // so this design is flawed. - var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); - var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); + var nativeWidth = FieldValue(this.Document.nativeWidth, 0); + var nativeHeight = FieldValue(this.Document.nativeHeight, 0); var newNativeHeight = nativeWidth * r.entry.height / r.entry.width; if (!nativeHeight && newNativeHeight !== nativeHeight && !isNaN(newNativeHeight)) { - this.props.Document.SetNumber(KeyStore.Height, newNativeHeight / nativeWidth * this.props.Document.GetNumber(KeyStore.Width, 0)); - this.props.Document.SetNumber(KeyStore.NativeHeight, newNativeHeight); + this.Document.height = newNativeHeight / nativeWidth * FieldValue(this.Document.width, 0); + this.Document.nativeHeight = newNativeHeight; } } else { this._loaded = true; @@ -56,12 +60,11 @@ export class VideoBox extends React.Component { } render() { - let field = this.props.Document.GetT(this.props.fieldKey, VideoField); - if (!field || field === FieldWaiting) { + let field = FieldValue(Cast(this.Document[this.props.fieldKey], VideoField)); + if (!field) { return
Loading
; } - let path = field.Data.href; - trace(); + let path = field.url.href; return ( {({ measureRef }) => diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index e3b6e1c05..63778fa50 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -4,7 +4,7 @@ import { FieldViewProps, FieldView } from './FieldView'; import { observer } from "mobx-react"; import { computed } from 'mobx'; import { HtmlField } from "../../../new_fields/HtmlField"; -import { URLField } from "../../../new_fields/URLField"; +import { WebField } from "../../../new_fields/URLField"; @observer export class WebBox extends React.Component { @@ -37,7 +37,7 @@ export class WebBox extends React.Component { let view; if (field instanceof HtmlField) { view = - } else if (field instanceof URLField) { + } else if (field instanceof WebField) { view =