From c469ece08b8df888395b6c1ab8205d3a027853fa Mon Sep 17 00:00:00 2001 From: yipstanley Date: Thu, 7 Mar 2019 22:18:47 -0500 Subject: changing branches --- src/client/views/collections/CollectionView.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 90080ab43..18e290477 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -11,6 +11,7 @@ import { CollectionFreeFormView } from "./CollectionFreeFormView"; import { CollectionDockingView } from "./CollectionDockingView"; import { CollectionSchemaView } from "./CollectionSchemaView"; import { CollectionViewProps } from "./CollectionViewBase"; +import { Field } from "../../../fields/Field"; @@ -40,8 +41,12 @@ export class CollectionView extends React.Component { @action addDocument = (doc: Document): void => { //TODO This won't create the field if it doesn't already exist - const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array()) - value.push(doc); + let value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array()) + value.push(doc) + // this.props.Document.GetAsync(this.props.fieldKey, (f: Field) => { + // (f as ListField).Data.push(doc); + // this.props.Document.SetOnPrototype(KeyStore.Data, (f as ListField)) + // }) } @action -- cgit v1.2.3-70-g09d2 From d7a3ba60aa2e9363eb1f9ad8ac2245395e2c6b70 Mon Sep 17 00:00:00 2001 From: Jude Date: Sat, 9 Mar 2019 11:41:50 -0500 Subject: minor improvements --- src/client/views/_global_variables.scss | 3 + .../views/collections/CollectionFreeFormView.scss | 97 ++++++++++++---------- src/client/views/collections/CollectionView.tsx | 2 +- src/client/views/nodes/FormattedTextBox.scss | 2 +- 4 files changed, 58 insertions(+), 46 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/_global_variables.scss b/src/client/views/_global_variables.scss index 5fbf798cb..c91000bf0 100644 --- a/src/client/views/_global_variables.scss +++ b/src/client/views/_global_variables.scss @@ -11,3 +11,6 @@ $dark-color: #121721; // fonts $sans-serif: "Roboto Slab", sans-serif; $serif: "Crimson Text", serif; + +// misc values +$border-radius: 0.3em; diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index b059163ed..4d0619c54 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -1,68 +1,77 @@ +@import "../global_variables"; + .collectionfreeformview-container { + .collectionfreeformview > .jsx-parser { + position: absolute; + height: 100%; + width: 100%; + } - .collectionfreeformview > .jsx-parser{ - position:absolute; - height: 100%; - width: 100%; - } - - border-style: solid; - box-sizing: border-box; - position: relative; + border-style: solid; + box-sizing: border-box; + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + .collectionfreeformview { + position: absolute; top: 0; left: 0; width: 100%; height: 100%; - overflow: hidden; - .collectionfreeformview { - position: absolute; - top: 0; - left: 0; - width:100%; - height: 100%; - } + } } .collectionfreeformview-overlay { + .collectionfreeformview > .jsx-parser { + position: absolute; + height: 100%; + } + .formattedTextBox-cont { + background: $light-color-secondary; + } - .collectionfreeformview > .jsx-parser{ - position:absolute; - height: 100%; - } - .formattedTextBox-cont { - background:yellow; - } - - border-style: solid; - box-sizing: border-box; + border-style: solid; + border-radius: $border-radius; + box-sizing: border-box; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + .collectionfreeformview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; - overflow: hidden; - .collectionfreeformview { - position: absolute; - top: 0; - left: 0; - width:100%; - height: 100%; - } + } } +// selection border...? .border { - border-style: solid; - box-sizing: border-box; - width: 100%; - height: 100%; + border-style: solid; + box-sizing: border-box; + width: 98%; + height: 98%; + border-radius: $border-radius; } //this is an animation for the blinking cursor! @keyframes blink { - 0% {opacity: 0} - 49%{opacity: 0} - 50% {opacity: 1} + 0% { + opacity: 0; + } + 49% { + opacity: 0; + } + 50% { + opacity: 1; + } } #prevCursor { - animation: blink 1s infinite; -} \ No newline at end of file + animation: blink 1s infinite; +} diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 49df04163..159d7f3e0 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -22,7 +22,7 @@ export enum CollectionViewType { Tree } -export const COLLECTION_BORDER_WIDTH = 2; +export const COLLECTION_BORDER_WIDTH = 1; @observer export class CollectionView extends React.Component { diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss index 42e5320d3..1b10cfff7 100644 --- a/src/client/views/nodes/FormattedTextBox.scss +++ b/src/client/views/nodes/FormattedTextBox.scss @@ -14,7 +14,7 @@ background: $light-color-secondary; padding: 0.7em; border-width: 1px; - border-radius: 0.3em; + border-radius: $border-radius; border-color: $intermediate-color; box-sizing: border-box; border-style: solid; -- cgit v1.2.3-70-g09d2 From 31bb06320481ce6fc1dd0de11610d0efcc008866 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 11 Mar 2019 20:20:14 -0400 Subject: removed Docking option --- src/client/views/collections/CollectionView.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 548a51bf1..17a0fbd23 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -99,7 +99,6 @@ export class CollectionView extends React.Component { ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) }) ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) }) ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) }) - ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) }) } } -- cgit v1.2.3-70-g09d2 From 41f458fb4f383bfbf8d5b651189c2f4731262ff8 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 13 Mar 2019 20:33:51 -0400 Subject: added annotations for videos. added custom play controls for videos. --- src/client/documents/Documents.ts | 5 +- src/client/views/InkingCanvas.tsx | 6 +- .../views/collections/CollectionFreeFormView.tsx | 8 +-- src/client/views/collections/CollectionPDFView.tsx | 13 ++-- .../views/collections/CollectionVideoView.scss | 35 +++++++++ .../views/collections/CollectionVideoView.tsx | 83 +++++++++++++++++++--- src/client/views/collections/CollectionView.tsx | 2 +- src/client/views/nodes/PDFBox.tsx | 2 +- src/client/views/nodes/VideoBox.tsx | 2 +- src/fields/KeyStore.ts | 1 - 10 files changed, 126 insertions(+), 31 deletions(-) create mode 100644 src/client/views/collections/CollectionVideoView.scss (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index f35d553b1..15e16a491 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -23,6 +23,7 @@ import { PDFField } from "../../fields/PDFField"; import { PDFBox } from "../views/nodes/PDFBox"; import { CollectionPDFView } from "../views/collections/CollectionPDFView"; import { RichTextField } from "../../fields/RichTextField"; +import { CollectionVideoView } from "../views/collections/CollectionVideoView"; export interface DocumentOptions { x?: number; @@ -138,9 +139,9 @@ export namespace Documents { } function GetVideoPrototype(): Document { if (!videoProto) { - videoProto = setupPrototypeOptions(videoProtoId, "VIDEO_PROTO", CollectionView.LayoutString("AnnotationsKey"), + videoProto = setupPrototypeOptions(videoProtoId, "VIDEO_PROTO", CollectionVideoView.LayoutString("AnnotationsKey"), { x: 0, y: 0, nativeWidth: 600, width: 300, layoutKeys: [KeyStore.Data, KeyStore.Annotations] }); - videoProto.SetNumber(KeyStore.CurFrame, 1); + videoProto.SetNumber(KeyStore.CurPage, 0); videoProto.SetText(KeyStore.BackgroundLayout, VideoBox.LayoutString()); } return videoProto; diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index 0d87c1239..064d1cba2 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -74,7 +74,7 @@ export class InkingCanvas extends React.Component { color: InkingControl.Instance.selectedColor, width: InkingControl.Instance.selectedWidth, tool: InkingControl.Instance.selectedTool, - page: this.props.Document.GetNumber(KeyStore.CurPage, 0) + page: this.props.Document.GetNumber(KeyStore.CurPage, -1) }); this.inkData = data; this._isDrawing = true; @@ -145,11 +145,11 @@ export class InkingCanvas extends React.Component { // parse data from server let paths: Array = [] - let curPage = this.props.Document.GetNumber(KeyStore.CurPage, 0) + let curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1) Array.from(lines).map(item => { let id = item[0]; let strokeData = item[1]; - if (strokeData.page == 0 || strokeData.page == curPage) + if (strokeData.page == -1 || strokeData.page == curPage) paths.push( { - var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1); + var curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1); const lvalue = this.props.Document.GetT>(this.props.fieldKey, ListField); let active: Document[] = []; if (lvalue && lvalue != FieldWaiting) { lvalue.Data.map(doc => { - var page = doc.GetNumber(KeyStore.Page, 0); - if (page == curPage || page == 0) { + var page = doc.GetNumber(KeyStore.Page, -1); + if (page == curPage || page == -1) { active.push(doc); } }) @@ -257,7 +257,7 @@ export class CollectionFreeFormView extends CollectionViewBase { @computed get views() { - var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1); + var curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1); const lvalue = this.props.Document.GetT>(this.props.fieldKey, ListField); if (lvalue && lvalue != FieldWaiting) { return lvalue.Data.map(doc => { diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index f22c07060..91ffc9500 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -18,13 +18,12 @@ export class CollectionPDFView extends React.Component { isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`; } - public SelectedDocs: FieldId[] = [] - @action onPageBack = () => this.curPage > 1 ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage - 1) : 0; - @action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : 0; + private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, -1); } + private get numPages() { return this.props.Document.GetNumber(KeyStore.NumPages, 0); } + @action onPageBack = () => this.curPage > 1 ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage - 1) : -1; + @action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : -1; - @computed private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, 0); } - @computed private get numPages() { return this.props.Document.GetNumber(KeyStore.NumPages, 0); } - @computed private get uIButtons() { + private get uIButtons() { return (
@@ -33,7 +32,7 @@ export class CollectionPDFView extends React.Component { } // "inherited" CollectionView API starts here... - + public SelectedDocs: FieldId[] = [] public active: () => boolean = () => CollectionView.Active(this); addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); } diff --git a/src/client/views/collections/CollectionVideoView.scss b/src/client/views/collections/CollectionVideoView.scss new file mode 100644 index 000000000..6c2f5a62a --- /dev/null +++ b/src/client/views/collections/CollectionVideoView.scss @@ -0,0 +1,35 @@ +.collectionVideoView-controls{ + width: 100%; + height: 100%; + position: absolute; +} +.collectionVideoView-time{ + color : white; + top :25px; + left : 25px; + position: absolute; + background-color: rgba(50, 50, 50, 0.2); +} +.collectionVideoView-play { + width: 25px; + height: 20px; + bottom: 25px; + left : 25px; + position: absolute; + color : white; + background-color: rgba(50, 50, 50, 0.2); + border-radius: 4px; + text-align: center; +} +.collectionVideoView-full { + width: 25px; + height: 20px; + bottom: 25px; + right : 25px; + position: absolute; + color : white; + background-color: rgba(50, 50, 50, 0.2); + border-radius: 4px; + text-align: center; + +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index a6471f53c..058325b21 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -1,4 +1,4 @@ -import { action, computed } from "mobx"; +import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { KeyStore } from "../../../fields/KeyStore"; @@ -7,6 +7,8 @@ import { CollectionView, CollectionViewType } from "./CollectionView"; import { CollectionViewProps } from "./CollectionViewBase"; import React = require("react"); import { FieldId } from "../../../fields/Field"; +import { ReplaceAroundStep } from "prosemirror-transform"; +import "./CollectionVideoView.scss" @observer @@ -18,14 +20,10 @@ export class CollectionVideoView extends React.Component { isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`; } - public SelectedDocs: FieldId[] = [] - @action onPageBack = () => this.curPage > 1 ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage - 1) : 0; - @action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : 0; - - @computed private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, 0); } - @computed private get numPages() { return this.props.Document.GetNumber(KeyStore.NumPages, 0); } + private _mainCont = React.createRef(); // "inherited" CollectionView API starts here... + public SelectedDocs: FieldId[] = [] public active: () => boolean = () => CollectionView.Active(this); addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); } @@ -40,11 +38,74 @@ export class CollectionVideoView extends React.Component { get collectionViewType(): CollectionViewType { return CollectionViewType.Freeform; } get subView(): any { return CollectionView.SubView(this); } + componentDidMount() { + this.repete(); + } + + player = (): HTMLVideoElement => { + return this._mainCont.current!.getElementsByTagName("video")[0]; + } + + @action + repete = () => { + if (this.player()) { + this.ctime = this.player().currentTime; + this.props.Document.SetNumber(KeyStore.CurPage, Math.round(this.ctime)); + } + setTimeout(() => this.repete(), 100) + } + + + @observable + ctime: number = 0 + @observable + playing: boolean = false; + + @action + onPlayDown = () => { + if (this.player()) { + if (this.player().paused) { + this.player().play(); + this.playing = true; + } else { + this.player().pause(); + this.playing = false; + } + } + } + @action + onFullDown = (e: React.PointerEvent) => { + if (this.player()) { + this.player().requestFullscreen(); + e.stopPropagation(); + e.preventDefault(); + } + } + + @action + onResetDown = () => { + if (this.player()) { + this.player().pause(); + this.player().currentTime = 0; + } + + } + render() { - return (
- {/* */} + return (
+
+ {this.subView} +
+ {"" + Math.round(this.ctime)} + {" " + Math.round((this.ctime - Math.trunc(this.ctime)) * 100)} +
+
+ {this.playing ? "\"" : ">"} +
+
+ F +
+
) } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 17a0fbd23..bbb4a5d83 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -50,7 +50,7 @@ export class CollectionView extends React.Component { @action public static AddDocument(props: CollectionViewProps, doc: Document) { - doc.SetNumber(KeyStore.Page, props.Document.GetNumber(KeyStore.CurPage, 0)); + doc.SetNumber(KeyStore.Page, props.Document.GetNumber(KeyStore.CurPage, -1)); 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()) diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 544af41a2..b0b5a63a4 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -86,7 +86,7 @@ export class PDFBox extends React.Component { @observable private _interactive: boolean = false; @observable private _loaded: boolean = false; - @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, 0); } + @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, -1); } componentDidMount() { this._reactionDisposer = reaction( diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 9c60d4348..053d9dd56 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -51,7 +51,7 @@ export class VideoBox extends React.Component {
{({ measureRef }) => -
) diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index 6616f68d8..ad6bbd476 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -11,6 +11,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPen, faHighlighter, faEraser, faBan } from '@fortawesome/free-solid-svg-icons'; import { SelectionManager } from "../util/SelectionManager"; import { KeyStore } from "../../fields/KeyStore"; +import { TextField } from "../../fields/TextField"; library.add(faPen, faHighlighter, faEraser, faBan); @@ -39,7 +40,7 @@ export class InkingControl extends React.Component { if (SelectionManager.SelectedDocuments().length == 1) { var sdoc = SelectionManager.SelectedDocuments()[0]; if (sdoc.props.ContainingCollectionView && sdoc.props.ContainingCollectionView) { - sdoc.props.Document.SetText(KeyStore.BackgroundColor, color.hex); + sdoc.props.Document.SetOnPrototype(KeyStore.BackgroundColor, new TextField(color.hex)); } } } diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 728076ef8..85ea2d121 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -28,7 +28,7 @@ export class CollectionFreeFormView extends CollectionViewBase { // mark this collection so that when the text box is created we can send it the SelectOnLoad prop to focus itself this._selectOnLoaded = newBox.Id; //set text to be the typed key and get focus on text box - this.props.addDocument(newBox); + this.props.addDocument(newBox, false); //remove cursor from screen this.PreviewCursorVisible = false; } @@ -79,7 +79,7 @@ export class CollectionFreeFormView extends CollectionViewBase { let screenX = de.x - (de.data["xOffset"] as number || 0); let screenY = de.y - (de.data["yOffset"] as number || 0); const [x, y] = this.getTransform().transformPoint(screenX, screenY); - let doc: Document = de.data["document"]; + let doc: Document = de.data["droppedDocument"]; if (doc) { doc.SetNumber(KeyStore.X, x); doc.SetNumber(KeyStore.Y, y); diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index 124d82c8b..e64b4c945 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -38,7 +38,7 @@ export class CollectionPDFView extends React.Component { public SelectedDocs: FieldId[] = [] public active: () => boolean = () => CollectionView.Active(this); - addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); } + addDocument = (doc: Document, allowDuplicates: boolean): void => { CollectionView.AddDocument(this.props, doc, allowDuplicates); } removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); } specificContextMenu = (e: React.MouseEvent): void => { diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index f88a62a0f..ced08a14e 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -14,7 +14,7 @@ import { EditableView } from "../EditableView"; import { DocumentView } from "../nodes/DocumentView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; -import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; +import { COLLECTION_BORDER_WIDTH, CollectionView } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import { setupDrag } from "../../util/DragManager"; @@ -47,7 +47,7 @@ export class CollectionSchemaView extends CollectionViewBase { ) let reference = React.createRef(); - let onItemDown = setupDrag(reference, () => props.doc); + let onItemDown = setupDrag(reference, () => props.doc, (containingCollection: CollectionView) => this.props.removeDocument(props.doc)); return (
{ public SelectedDocs: FieldId[] = [] public active: () => boolean = () => CollectionView.Active(this); - addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); } + addDocument = (doc: Document, allowDuplicates: boolean): void => { CollectionView.AddDocument(this.props, doc, allowDuplicates); } removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); } specificContextMenu = (e: React.MouseEvent): void => { diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 40acf466e..303099c16 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -36,7 +36,7 @@ export class CollectionView extends React.Component { @observable public SelectedDocs: FieldId[] = []; public active: () => boolean = () => CollectionView.Active(this); - addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); } + addDocument = (doc: Document, allowDuplicates: boolean): void => { CollectionView.AddDocument(this.props, doc, allowDuplicates); } removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); } get subView() { return CollectionView.SubView(this); } @@ -48,12 +48,13 @@ export class CollectionView extends React.Component { } @action - public static AddDocument(props: CollectionViewProps, doc: Document) { + public static AddDocument(props: CollectionViewProps, doc: Document, allowDuplicates: boolean) { doc.SetNumber(KeyStore.Page, props.Document.GetNumber(KeyStore.CurPage, -1)); 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()) - value.push(doc); + if (!value.some(v => v.Id == doc.Id) || allowDuplicates) + value.push(doc); } else { props.Document.SetOnPrototype(props.fieldKey, new ListField([doc])); } diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 3d1a76a07..0358b5907 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -27,7 +27,7 @@ export interface CollectionViewProps { } export interface SubCollectionViewProps extends CollectionViewProps { active: () => boolean; - addDocument: (doc: Document) => void; + addDocument: (doc: Document, allowDuplicates: boolean) => void; removeDocument: (doc: Document) => boolean; CollectionView: CollectionView; } @@ -46,28 +46,16 @@ export class CollectionViewBase extends React.Component @undoBatch @action protected drop(e: Event, de: DragManager.DropEvent) { - let docToAlias = de.data["documentToAlias"]; - let docView = de.data["documentView"]; - let doc = docToAlias ? docToAlias.CreateAlias() : de.data["document"]; - if (docToAlias) { - [KeyStore.Width, KeyStore.Height].map(key => - docToAlias.GetTAsync(key, NumberField, (f: Opt) => { - if (f) { - doc.SetNumber(key, f.Data) - } - }) - ); - de.data["document"] = doc; - this.props.addDocument(doc); - } else if (docView) { - if (doc && docView.props.RemoveDocument && docView.props.ContainingCollectionView !== this.props.CollectionView) { - docView.props.RemoveDocument(doc); - this.props.removeDocument(doc); // bcz: not good -- want to check if it's there and then add if it isn't - this.props.addDocument(doc); + let dropped = de.data["droppedDocument"]; + if (dropped) { + if (de.data["aliasOnDrop"]) { + let dragged = de.data["draggedDocument"]; + [KeyStore.Width, KeyStore.Height, KeyStore.CurPage].map(key => + dragged.GetTAsync(key, NumberField, (f: Opt) => f ? dropped.SetNumber(key, f.Data) : null)); + } else if (de.data["removeDocument"]) { + de.data["removeDocument"](this.props.CollectionView); } - } else if (doc) { - this.props.removeDocument(doc); // bcz: not good -- want to check if it's there and then add if it isn't - this.props.addDocument(doc); + this.props.addDocument(dropped, false); } e.stopPropagation(); } @@ -89,7 +77,7 @@ export class CollectionViewBase extends React.Component console.log("not good"); let htmlDoc = Documents.HtmlDocument(html, { ...options, width: 300, height: 300 }); htmlDoc.SetText(KeyStore.DocumentText, text); - this.props.addDocument(htmlDoc); + this.props.addDocument(htmlDoc, false); return; } @@ -99,7 +87,7 @@ export class CollectionViewBase extends React.Component const upload = window.location.origin + "/upload"; let item = e.dataTransfer.items[i]; if (item.kind === "string" && item.type.indexOf("uri") != -1) { - e.dataTransfer.items[i].getAsString(action((s: string) => this.props.addDocument(Documents.WebDocument(s, options)))) + e.dataTransfer.items[i].getAsString(action((s: string) => this.props.addDocument(Documents.WebDocument(s, options), false))) } let type = item.type console.log(type) diff --git a/src/client/views/collections/MarqueeView.tsx b/src/client/views/collections/MarqueeView.tsx index f5c83a934..8c2f3443c 100644 --- a/src/client/views/collections/MarqueeView.tsx +++ b/src/client/views/collections/MarqueeView.tsx @@ -17,7 +17,7 @@ interface MarqueeViewProps { getMarqueeTransform: () => Transform; getTransform: () => Transform; container: CollectionFreeFormView; - addDocument: (doc: Document) => void; + addDocument: (doc: Document, allowDuplicates: false) => void; activeDocuments: () => Document[]; selectDocuments: (docs: Document[]) => void; removeDocument: (doc: Document) => boolean; @@ -111,7 +111,18 @@ export class MarqueeView extends React.Component let liftedInk = this.marqueeInkSelect(true); this.props.container.props.Document.SetData(KeyStore.Ink, this.marqueeInkSelect(false), InkField); //setTimeout(() => { - this.props.addDocument(Documents.FreeformDocument(selected, { x: bounds.left, y: bounds.top, panx: 0, pany: 0, width: bounds.width, backgroundColor: "Transparent", height: bounds.height, ink: liftedInk, title: "a nested collection" })); + let newCollection = Documents.FreeformDocument(selected, { + x: bounds.left, + y: bounds.top, + panx: 0, + pany: 0, + width: bounds.width, + height: bounds.height, + backgroundColor: "Transparent", + ink: liftedInk, + title: "a nested collection" + }); + this.props.addDocument(newCollection, false); // }, 100); this.cleanupInteractions(); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index fbd58ef7e..e98815fa6 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -23,7 +23,7 @@ import React = require("react"); export interface DocumentViewProps { ContainingCollectionView: Opt; Document: Document; - AddDocument?: (doc: Document) => void; + AddDocument?: (doc: Document, allowDuplicates: boolean) => void; RemoveDocument?: (doc: Document) => boolean; ScreenToLocalTransform: () => Transform; isTopMost: boolean; @@ -164,12 +164,15 @@ export class DocumentView extends React.Component { if (this._mainCont.current) { const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); let dragData: { [id: string]: any } = {}; - dragData["documentView"] = this; - if (dropAliasOfDraggedDoc) - dragData["documentToAlias"] = this.props.Document; - dragData["document"] = this.props.Document; + dragData["aliasOnDrop"] = dropAliasOfDraggedDoc; + dragData["draggedDocument"] = this.props.Document; dragData["xOffset"] = x - left; dragData["yOffset"] = y - top; + dragData["removeDocument"] = (dropCollectionView: CollectionView) => { + if (this.props.RemoveDocument && this.props.ContainingCollectionView !== dropCollectionView) { + this.props.RemoveDocument(this.props.Document); + } + } DragManager.StartDrag(this._mainCont.current, dragData, { handlers: { dragComplete: action(() => { }), @@ -213,7 +216,7 @@ 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 })); + this.props.AddDocument(Documents.KVPDocument(this.props.Document, { width: 300, height: 300 }), false); } } fullScreenClicked = (e: React.MouseEvent): void => { @@ -232,7 +235,6 @@ export class DocumentView extends React.Component { @action drop = (e: Event, de: DragManager.DropEvent) => { - console.log("drop"); const sourceDocView: DocumentView = de.data["linkSourceDoc"]; if (!sourceDocView) { return; -- cgit v1.2.3-70-g09d2 From 26b200a640290877b4766ce1e3361ccd3d0ea766 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 18 Mar 2019 22:24:26 -0400 Subject: fixed duplicated menu items. --- src/client/views/Main.tsx | 4 +++- src/client/views/collections/CollectionView.tsx | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 26a07fdfe..d103bf34a 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -52,11 +52,13 @@ export class Main extends React.Component { @observable public pwidth: number = 0; @observable public pheight: number = 0; - private mainDocId: string | undefined; + public mainDocId: string | undefined; private currentUser?: DashUserModel; + public static Instance: Main; constructor(props: Readonly<{}>) { super(props); + Main.Instance = this; // causes errors to be generated when modifying an observable outside of an action configure({ enforceActions: "observed" }); if (window.location.pathname !== RouteStore.home) { diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 303099c16..d4afc69cf 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -13,6 +13,7 @@ import { CollectionSchemaView } from "./CollectionSchemaView"; import { CollectionViewProps } from "./CollectionViewBase"; import { CollectionTreeView } from "./CollectionTreeView"; import { Field, FieldId } from "../../../fields/Field"; +import { Main } from "../Main"; export enum CollectionViewType { Invalid, @@ -95,7 +96,7 @@ export class CollectionView extends React.Component { } specificContextMenu = (e: React.MouseEvent): void => { - if (!e.isPropagationStopped() && this.props.Document.Id != "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 + if (!e.isPropagationStopped() && this.props.Document.Id != Main.Instance.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: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) }) ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) }) ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) }) -- cgit v1.2.3-70-g09d2 From d882d4013dc2df03a55c3f4afc954b7d9a38b4e4 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 20 Mar 2019 22:08:32 -0400 Subject: tree view cleanup --- src/client/Server.ts | 2 +- src/client/views/EditableView.tsx | 4 +- src/client/views/InkingCanvas.tsx | 2 +- .../views/collections/CollectionFreeFormView.tsx | 4 +- .../views/collections/CollectionTreeView.scss | 5 +- .../views/collections/CollectionTreeView.tsx | 143 ++++++++------------- src/client/views/collections/CollectionView.tsx | 4 +- src/client/views/nodes/DocumentView.tsx | 4 +- 8 files changed, 66 insertions(+), 102 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/Server.ts b/src/client/Server.ts index bbdc27397..7d882c76d 100644 --- a/src/client/Server.ts +++ b/src/client/Server.ts @@ -39,7 +39,7 @@ export class Server { reaction(() => { return this.ClientFieldsCached.get(fieldid); }, (field, reaction) => { - if (field !== "") { + if (field !== FieldWaiting) { reaction.dispose() callback(field) } diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 98a6ed1ba..579d6e6ad 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -1,6 +1,6 @@ import React = require('react') import { observer } from 'mobx-react'; -import { observable, action } from 'mobx'; +import { observable, action, trace } from 'mobx'; import "./EditableView.scss" export interface EditableProps { @@ -52,7 +52,7 @@ export class EditableView extends React.Component { } else { return (
this.editing = true)}> + onClick={action(() => this.editing = true)} > {this.props.contents}
) diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index 8d0121035..36a8834a0 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -137,7 +137,7 @@ export class InkingCanvas extends React.Component { // get data from server // let inkField = this.props.Document.GetT(KeyStore.Ink, InkField); - // if (!inkField || inkField == "") { + // if (!inkField || inkField == FieldWaiting) { // return (
// diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 8bf4a7539..da9f7b392 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -219,13 +219,13 @@ export class CollectionFreeFormView extends CollectionViewBase { @computed get backgroundLayout(): string | undefined { let field = this.props.Document.GetT(KeyStore.BackgroundLayout, TextField); - if (field && field !== "") { + if (field && field !== FieldWaiting) { return field.Data; } } @computed get overlayLayout(): string | undefined { let field = this.props.Document.GetT(KeyStore.OverlayLayout, TextField); - if (field && field !== "") { + if (field && field !== FieldWaiting) { return field.Data; } } diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index fa0f1c761..5a14aa54d 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -1,6 +1,8 @@ @import "../global_variables"; #body { padding: 20px; + padding-left: 10px; + padding-right: 0px; background: $light-color-secondary; font-size: 13px; overflow: scroll; @@ -49,6 +51,7 @@ li { .docContainer:hover { .delete-button { display: inline; + width: auto; } } @@ -57,5 +60,5 @@ li { float: right; margin-left: 15px; margin-top: 3px; - display: none; + display: inline; } \ No newline at end of file diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 19dd44c97..6edd90215 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -1,20 +1,19 @@ +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 } from "mobx"; import { observer } from "mobx-react"; -import { CollectionViewBase } from "./CollectionViewBase"; import { Document } from "../../../fields/Document"; +import { FieldWaiting } from "../../../fields/Field"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; -import React = require("react") -import { TextField } from "../../../fields/TextField"; -import { observable, action } from "mobx"; -import "./CollectionTreeView.scss"; -import { EditableView } from "../EditableView"; import { setupDrag } from "../../util/DragManager"; -import { FieldWaiting } from "../../../fields/Field"; -import { COLLECTION_BORDER_WIDTH, CollectionView } from "./CollectionView"; +import { EditableView } from "../EditableView"; +import "./CollectionTreeView.scss"; +import { CollectionView, COLLECTION_BORDER_WIDTH } from "./CollectionView"; +import { CollectionViewBase } from "./CollectionViewBase"; +import React = require("react") -import { library } from '@fortawesome/fontawesome-svg-core'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faTrashAlt, faCaretRight, faCaretDown } from '@fortawesome/free-solid-svg-icons'; export interface TreeViewProps { document: Document; @@ -37,13 +36,9 @@ library.add(faCaretRight); */ class TreeView extends React.Component { - @observable - collapsed: boolean = false; - - delete = () => { - this.props.deleteDoc(this.props.document); - } + @observable _collapsed: boolean = true; + delete = () => this.props.deleteDoc(this.props.document); @action remove = (document: Document) => { @@ -54,16 +49,13 @@ class TreeView extends React.Component { } renderBullet(type: BulletType) { - let onClicked = action(() => this.collapsed = !this.collapsed); - + let onClicked = action(() => this._collapsed = !this._collapsed); + let bullet: IconProp | undefined = undefined; switch (type) { - case BulletType.Collapsed: - return
- case BulletType.Collapsible: - return
- case BulletType.List: - return
+ case BulletType.Collapsed: bullet = "caret-right"; break; + case BulletType.Collapsible: bullet = "caret-down"; break; } + return
{bullet ? : ""}
} /** @@ -72,74 +64,48 @@ class TreeView extends React.Component { renderTitle() { let reference = React.createRef(); let onItemDown = setupDrag(reference, () => this.props.document, (containingCollection: CollectionView) => this.props.deleteDoc(this.props.document)); - let title = this.props.document.GetT(KeyStore.Title, TextField); - let editableView = (titleString: string) => ( { - let title = this.props.document.GetT(KeyStore.Title, TextField); - if (title && title !== "") - return title.Data; - return ""; - }} SetValue={(value: string) => { - this.props.document.SetData(KeyStore.Title, value, TextField); - return true; - }} />); + let editableView = (titleString: string) => + ( this.props.document.Title} + SetValue={(value: string) => { + this.props.document.SetText(KeyStore.Title, value); + return true; + }} + />); return (
- {(!title || title === "") ? (null) : editableView(title.Data)} + {editableView(this.props.document.Title)}
) } render() { - var children = this.props.document.GetT>(KeyStore.Data, ListField); - - let reference = React.createRef(); - let onItemDown = setupDrag(reference, () => this.props.document); - let titleElement = this.renderTitle(); + let bulletType = BulletType.List; + let childElements: JSX.Element | undefined = undefined; - // check if this document is a collection - if (children && children !== FieldWaiting) { - let subView; - - // if uncollapsed, then add the children elements - if (!this.collapsed) { - // render all children elements - let childrenElement = (children.Data.map(value => - ) - ) - subView = -
  • - {this.renderBullet(BulletType.Collapsible)} - {titleElement} -
      - {childrenElement} -
    -
    • - } else { - subView =
  • - {this.renderBullet(BulletType.Collapsed)} - {titleElement} -
    • + var children = this.props.document.GetT>(KeyStore.Data, ListField); + if (children && children !== FieldWaiting) { // add children for a collection + if (!this._collapsed) { + bulletType = BulletType.Collapsible; + childElements =
      + {children.Data.map(value => )} +
    } - - return
    - {subView} -
    - } - - // otherwise this is a normal leaf node - else { - return
  • - {this.renderBullet(BulletType.List)} - {titleElement} -
    • ; + else bulletType = BulletType.Collapsed; } + return
    +
  • + {this.renderBullet(bulletType)} + {this.renderTitle()} + {childElements ? childElements : (null)} +
    • +
    } } - @observer export class CollectionTreeView extends CollectionViewBase { @@ -152,12 +118,6 @@ export class CollectionTreeView extends CollectionViewBase { } render() { - let titleStr = ""; - let title = this.props.Document.GetT(KeyStore.Title, TextField); - if (title && title !== FieldWaiting) { - titleStr = title.Data; - } - var children = this.props.Document.GetT>(KeyStore.Data, ListField); let childrenElement = !children || children === FieldWaiting ? (null) : (children.Data.map(value => @@ -167,12 +127,13 @@ export class CollectionTreeView extends CollectionViewBase { return (
    this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}>
    - { - return this.props.Document.Title; - }} SetValue={(value: string) => { - this.props.Document.SetData(KeyStore.Title, value, TextField); + height={72} + GetValue={() => this.props.Document.Title} + SetValue={(value: string) => { + this.props.Document.SetText(KeyStore.Title, value); return true; }} />
    diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index d4afc69cf..7e1d31018 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -12,7 +12,7 @@ import { CollectionDockingView } from "./CollectionDockingView"; import { CollectionSchemaView } from "./CollectionSchemaView"; import { CollectionViewProps } from "./CollectionViewBase"; import { CollectionTreeView } from "./CollectionTreeView"; -import { Field, FieldId } from "../../../fields/Field"; +import { Field, FieldId, FieldWaiting } from "../../../fields/Field"; import { Main } from "../Main"; export enum CollectionViewType { @@ -86,7 +86,7 @@ export class CollectionView extends React.Component { get collectionViewType(): CollectionViewType { let Document = this.props.Document; let viewField = Document.GetT(KeyStore.ViewType, NumberField); - if (viewField === "") { + if (viewField === FieldWaiting) { return CollectionViewType.Invalid; } else if (viewField) { return viewField.Data; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 9e34b2b60..fec451b09 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,7 +1,7 @@ import { action, computed, IReactionDisposer, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; -import { Field, Opt } from "../../../fields/Field"; +import { Field, Opt, FieldWaiting } from "../../../fields/Field"; import { Key } from "../../../fields/Key"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; @@ -315,7 +315,7 @@ export class DocumentView extends React.Component { return (null); } let lkeys = this.props.Document.GetT(KeyStore.LayoutKeys, ListField); - if (!lkeys || lkeys === "") { + if (!lkeys || lkeys === FieldWaiting) { return

    Error loading layout keys

    ; } var scaling = this.props.ContentScaling(); -- cgit v1.2.3-70-g09d2 From bc59ea805f32568f0835bd55d39575236c24a066 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 21 Mar 2019 22:22:25 -0400 Subject: added very basic cycle detection when adding to collections --- src/client/util/DragManager.ts | 4 +--- .../views/collections/CollectionDockingView.tsx | 2 +- .../views/collections/CollectionFreeFormView.tsx | 21 ++++++++++++--------- src/client/views/collections/CollectionPDFView.tsx | 2 +- .../views/collections/CollectionVideoView.tsx | 2 +- src/client/views/collections/CollectionView.tsx | 22 ++++++++++++++++++---- .../views/collections/CollectionViewBase.tsx | 12 ++++++++---- src/client/views/collections/MarqueeView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 2 +- 9 files changed, 44 insertions(+), 25 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 753115f76..661fa4dc8 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -197,9 +197,7 @@ export namespace DragManager { document.removeEventListener("pointermove", moveHandler, true); document.removeEventListener("pointerup", upHandler); dragDiv.removeChild(dragElement); - if (hideSource && !wasHidden) { - ele.hidden = false; - } + ele.hidden = false; } const upHandler = (e: PointerEvent) => { abortDrag(); diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 950df7261..39b284d8e 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -202,7 +202,7 @@ export class CollectionDockingView extends React.Component { }), }, - hideSource: true + hideSource: false })) ); } diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index da9f7b392..8b9d178c9 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -75,16 +75,19 @@ export class CollectionFreeFormView extends CollectionViewBase { @undoBatch @action - drop = (e: Event, de: DragManager.DropEvent) => { - 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); - const [x, y] = this.getTransform().transformPoint(screenX, screenY); - de.data.droppedDocument.SetNumber(KeyStore.X, x); - de.data.droppedDocument.SetNumber(KeyStore.Y, y); - this.bringToFront(de.data.droppedDocument); + drop = (e: Event, de: DragManager.DropEvent): boolean => { + 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); + const [x, y] = this.getTransform().transformPoint(screenX, screenY); + de.data.droppedDocument.SetNumber(KeyStore.X, x); + de.data.droppedDocument.SetNumber(KeyStore.Y, y); + this.bringToFront(de.data.droppedDocument); + } + return true; } + return false; } diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index e64b4c945..4d2daf149 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -38,7 +38,7 @@ export class CollectionPDFView extends React.Component { public SelectedDocs: FieldId[] = [] public active: () => boolean = () => CollectionView.Active(this); - addDocument = (doc: Document, allowDuplicates: boolean): void => { CollectionView.AddDocument(this.props, doc, allowDuplicates); } + addDocument = (doc: Document, allowDuplicates: boolean): boolean => { return CollectionView.AddDocument(this.props, doc, allowDuplicates); } removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); } specificContextMenu = (e: React.MouseEvent): void => { diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index 05f759967..a3921696f 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -44,7 +44,7 @@ export class CollectionVideoView extends React.Component { public SelectedDocs: FieldId[] = [] public active: () => boolean = () => CollectionView.Active(this); - addDocument = (doc: Document, allowDuplicates: boolean): void => { CollectionView.AddDocument(this.props, doc, allowDuplicates); } + addDocument = (doc: Document, allowDuplicates: boolean): boolean => { return CollectionView.AddDocument(this.props, doc, allowDuplicates); } removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); } specificContextMenu = (e: React.MouseEvent): void => { diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 7e1d31018..2e93e6bb8 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -37,7 +37,7 @@ export class CollectionView extends React.Component { @observable public SelectedDocs: FieldId[] = []; public active: () => boolean = () => CollectionView.Active(this); - addDocument = (doc: Document, allowDuplicates: boolean): void => { CollectionView.AddDocument(this.props, doc, allowDuplicates); } + addDocument = (doc: Document, allowDuplicates: boolean): boolean => { return CollectionView.AddDocument(this.props, doc, allowDuplicates); } removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); } get subView() { return CollectionView.SubView(this); } @@ -48,17 +48,31 @@ export class CollectionView extends React.Component { return isSelected || childSelected || topMost; } + static createsCycle(doc: Document, props: CollectionViewProps): boolean { + let ldata = doc.GetList(KeyStore.Data, []); + for (let i = 0; i < ldata.length; i++) { + if (CollectionView.createsCycle(ldata[i], props)) + return true; + } + return doc.Id == props.Document.Id; + } + @action - public static AddDocument(props: CollectionViewProps, doc: Document, allowDuplicates: boolean) { + public static AddDocument(props: CollectionViewProps, doc: Document, allowDuplicates: boolean): boolean { doc.SetNumber(KeyStore.Page, props.Document.GetNumber(KeyStore.CurPage, -1)); 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 (!value.some(v => v.Id == doc.Id) || allowDuplicates) - value.push(doc); + if (!CollectionView.createsCycle(doc, props)) { + if (!value.some(v => v.Id == doc.Id) || allowDuplicates) + value.push(doc); + } + else + return false; } else { props.Document.SetOnPrototype(props.fieldKey, new ListField([doc])); } + return true; } @action diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index f33007196..535a8a8d2 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -17,6 +17,7 @@ import { NumberField } from "../../../fields/NumberField"; import { DocumentManager } from "../../util/DocumentManager"; import request = require("request"); import { ServerUtils } from "../../../server/ServerUtil"; +import { addHiddenFinalProp } from "mobx/lib/internal"; export interface CollectionViewProps { fieldKey: Key; @@ -33,7 +34,7 @@ export interface CollectionViewProps { export interface SubCollectionViewProps extends CollectionViewProps { active: () => boolean; - addDocument: (doc: Document, allowDuplicates: boolean) => void; + addDocument: (doc: Document, allowDuplicates: boolean) => boolean; removeDocument: (doc: Document) => boolean; CollectionView: CollectionView; } @@ -83,17 +84,20 @@ export class CollectionViewBase extends React.Component @undoBatch @action - protected drop(e: Event, de: DragManager.DropEvent) { + protected drop(e: Event, de: DragManager.DropEvent): boolean { if (de.data instanceof DragManager.DocumentDragData) { if (de.data.aliasOnDrop) { [KeyStore.Width, KeyStore.Height, KeyStore.CurPage].map(key => de.data.draggedDocument.GetTAsync(key, NumberField, (f: Opt) => f ? de.data.droppedDocument.SetNumber(key, f.Data) : null)); - } else if (de.data.removeDocument) { + } + let added = this.props.addDocument(de.data.droppedDocument, false); + if (added && de.data.removeDocument && !de.data.aliasOnDrop) { de.data.removeDocument(this.props.CollectionView); } - this.props.addDocument(de.data.droppedDocument, false); e.stopPropagation(); + return added; } + return false; } protected getDocumentFromType(type: string, path: string, options: DocumentOptions): Opt { diff --git a/src/client/views/collections/MarqueeView.tsx b/src/client/views/collections/MarqueeView.tsx index 8c2f3443c..b48ad9c64 100644 --- a/src/client/views/collections/MarqueeView.tsx +++ b/src/client/views/collections/MarqueeView.tsx @@ -17,7 +17,7 @@ interface MarqueeViewProps { getMarqueeTransform: () => Transform; getTransform: () => Transform; container: CollectionFreeFormView; - addDocument: (doc: Document, allowDuplicates: false) => void; + addDocument: (doc: Document, allowDuplicates: false) => boolean; activeDocuments: () => Document[]; selectDocuments: (docs: Document[]) => void; removeDocument: (doc: Document) => boolean; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index fec451b09..383341e02 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -23,7 +23,7 @@ import React = require("react"); export interface DocumentViewProps { ContainingCollectionView: Opt; Document: Document; - AddDocument?: (doc: Document, allowDuplicates: boolean) => void; + AddDocument?: (doc: Document, allowDuplicates: boolean) => boolean; RemoveDocument?: (doc: Document) => boolean; ScreenToLocalTransform: () => Transform; isTopMost: boolean; -- cgit v1.2.3-70-g09d2 From eb27dd447502ee1f55296b9e496aee998b0259f2 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 21 Mar 2019 23:10:42 -0400 Subject: avoided another cycle --- src/client/views/collections/CollectionView.tsx | 29 +++++++++++++++++++------ 1 file changed, 22 insertions(+), 7 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 2e93e6bb8..be757e22e 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -14,6 +14,7 @@ import { CollectionViewProps } from "./CollectionViewBase"; import { CollectionTreeView } from "./CollectionTreeView"; import { Field, FieldId, FieldWaiting } from "../../../fields/Field"; import { Main } from "../Main"; +import { dropPoint } from "prosemirror-transform"; export enum CollectionViewType { Invalid, @@ -48,13 +49,22 @@ export class CollectionView extends React.Component { return isSelected || childSelected || topMost; } - static createsCycle(doc: Document, props: CollectionViewProps): boolean { - let ldata = doc.GetList(KeyStore.Data, []); - for (let i = 0; i < ldata.length; i++) { - if (CollectionView.createsCycle(ldata[i], props)) + static createsCycle(documentToAdd: Document, containerDocument: Document): boolean { + let data = documentToAdd.GetList(KeyStore.Data, []); + for (let i = 0; i < data.length; i++) { + if (CollectionView.createsCycle(data[i], containerDocument)) return true; } - return doc.Id == props.Document.Id; + let annots = documentToAdd.GetList(KeyStore.Annotations, []); + for (let i = 0; i < annots.length; i++) { + if (CollectionView.createsCycle(annots[i], containerDocument)) + return true; + } + for (let containerProto: any = containerDocument; containerProto && containerProto != FieldWaiting; containerProto = containerProto.GetPrototype()) { + if (containerProto.Id == documentToAdd.Id) + return true; + } + return false; } @action @@ -63,14 +73,19 @@ export class CollectionView 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()) - if (!CollectionView.createsCycle(doc, props)) { + if (!CollectionView.createsCycle(doc, props.Document)) { if (!value.some(v => v.Id == doc.Id) || allowDuplicates) value.push(doc); } else return false; } else { - props.Document.SetOnPrototype(props.fieldKey, new ListField([doc])); + let proto = props.Document.GetPrototype(); + if (!proto || proto == FieldWaiting || !CollectionView.createsCycle(proto, doc)) { + props.Document.SetOnPrototype(props.fieldKey, new ListField([doc])); + } + else + return false; } return true; } -- cgit v1.2.3-70-g09d2 From 3eefc8c7e901242ac6b7614bf1163858568d53b0 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Fri, 22 Mar 2019 05:19:37 -0400 Subject: Moved main doc id --- src/client/views/Main.tsx | 14 ++++++-------- src/client/views/collections/CollectionView.tsx | 4 ++-- src/server/authentication/models/current_user_utils.ts | 16 +++++++++++++--- 3 files changed, 21 insertions(+), 13 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index fdbad6ce1..cb49bc4e6 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -73,8 +73,6 @@ export class Main extends React.Component { return CurrentUserUtils.UserDocument; } - public mainDocId: string | undefined; - private currentUser?: DashUserModel; public static Instance: Main; constructor(props: Readonly<{}>) { @@ -85,7 +83,7 @@ export class Main extends React.Component { if (window.location.pathname !== RouteStore.home) { let pathname = window.location.pathname.split("/"); if (pathname.length > 1 && pathname[pathname.length - 2] == 'doc') { - this.mainDocId = pathname[pathname.length - 1]; + CurrentUserUtils.MainDocId = pathname[pathname.length - 1]; } }; @@ -117,8 +115,8 @@ export class Main extends React.Component { onHistory = () => { if (window.location.pathname !== RouteStore.home) { let pathname = window.location.pathname.split("/"); - this.mainDocId = pathname[pathname.length - 1]; - Server.GetField(this.mainDocId, action((field: Opt) => { + CurrentUserUtils.MainDocId = pathname[pathname.length - 1]; + Server.GetField(CurrentUserUtils.MainDocId, action((field: Opt) => { if (field instanceof Document) { this.openWorkspace(field, true); } @@ -148,7 +146,7 @@ export class Main extends React.Component { initAuthenticationRouters = () => { // Load the user's active workspace, or create a new one if initial session after signup - if (!this.mainDocId) { + if (!CurrentUserUtils.MainDocId) { this.userDocument.GetTAsync(KeyStore.ActiveWorkspace, Document).then(doc => { if (doc) { this.openWorkspace(doc); @@ -157,11 +155,11 @@ export class Main extends React.Component { } }) } else { - Server.GetField(this.mainDocId).then(field => { + Server.GetField(CurrentUserUtils.MainDocId).then(field => { if (field instanceof Document) { this.openWorkspace(field) } else { - this.createNewWorkspace(this.mainDocId); + this.createNewWorkspace(CurrentUserUtils.MainDocId); } }) } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 7e1d31018..c72633175 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -13,7 +13,7 @@ import { CollectionSchemaView } from "./CollectionSchemaView"; import { CollectionViewProps } from "./CollectionViewBase"; import { CollectionTreeView } from "./CollectionTreeView"; import { Field, FieldId, FieldWaiting } from "../../../fields/Field"; -import { Main } from "../Main"; +import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils"; export enum CollectionViewType { Invalid, @@ -96,7 +96,7 @@ export class CollectionView extends React.Component { } specificContextMenu = (e: React.MouseEvent): void => { - if (!e.isPropagationStopped() && this.props.Document.Id != Main.Instance.mainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 + 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: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) }) ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) }) ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) }) diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts index 17a6d493b..3291c671c 100644 --- a/src/server/authentication/models/current_user_utils.ts +++ b/src/server/authentication/models/current_user_utils.ts @@ -12,17 +12,27 @@ export class CurrentUserUtils { private static curr_email: string; private static curr_id: string; private static user_document: Document; + //TODO tfs: this should be temporary... + private static mainDocId: string | undefined; public static get email(): string { - return CurrentUserUtils.curr_email; + return this.curr_email; } public static get id(): string { - return CurrentUserUtils.curr_id; + return this.curr_id; } public static get UserDocument(): Document { - return CurrentUserUtils.user_document; + return this.user_document; + } + + public static get MainDocId(): string | undefined { + return this.mainDocId; + } + + public static set MainDocId(id: string | undefined) { + this.mainDocId = id; } private static createUserDocument(id: string): Document { -- cgit v1.2.3-70-g09d2 From 2264fb874a09ee01540141986325c76650f32c21 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 25 Mar 2019 23:20:22 -0400 Subject: added 1-level navigation to region annotations --- .../views/collections/CollectionDockingView.tsx | 2 +- .../views/collections/CollectionVideoView.tsx | 108 ++++++++++++--------- src/client/views/collections/CollectionView.tsx | 6 +- src/client/views/nodes/LinkBox.tsx | 21 +++- src/client/views/nodes/PDFBox.tsx | 21 ++-- src/client/views/nodes/VideoBox.tsx | 29 ++++-- src/fields/KeyStore.ts | 2 + 7 files changed, 120 insertions(+), 69 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 39b284d8e..d4f510f5d 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -191,7 +191,7 @@ export class CollectionDockingView extends React.Component { var className = (e.target as any).className; - if ((className == "lm_title" || className == "lm_tab lm_active") && e.ctrlKey) { + if ((className == "lm_title" || className == "lm_tab lm_active") && (e.ctrlKey || e.altKey)) { e.stopPropagation(); e.preventDefault(); let docid = (e.target as any).DashDocId; diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index a3921696f..470a853e3 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -1,4 +1,4 @@ -import { action, computed, observable } from "mobx"; +import { action, computed, observable, trace } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { KeyStore } from "../../../fields/KeyStore"; @@ -12,24 +12,26 @@ import "./CollectionVideoView.scss" @observer export class CollectionVideoView extends React.Component { + private _intervalTimer: any = undefined; + private _player: HTMLVideoElement | undefined = undefined; + + @observable _currentTimecode: number = 0; + @observable _isPlaying: boolean = false; public static LayoutString(fieldKey: string = "DataKey") { return `<${CollectionVideoView.name} Document={Document} ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings} isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`; } - - private _mainCont = React.createRef(); - private get uIButtons() { let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().transformDirection(1, 1)[0]); return ([
    - {"" + Math.round(this.ctime)} - {" " + Math.round((this.ctime - Math.trunc(this.ctime)) * 100)} + {"" + Math.round(this._currentTimecode)} + {" " + Math.round((this._currentTimecode - Math.trunc(this._currentTimecode)) * 100)}
    ,
    - {this.playing ? "\"" : ">"} + {this._isPlaying ? "\"" : ">"}
    ,
    F @@ -37,64 +39,54 @@ export class CollectionVideoView extends React.Component { ]); } - - // "inherited" CollectionView API starts here... - - @observable - public SelectedDocs: FieldId[] = [] - public active: () => boolean = () => CollectionView.Active(this); - - addDocument = (doc: Document, allowDuplicates: boolean): boolean => { return CollectionView.AddDocument(this.props, doc, allowDuplicates); } - removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); } - - specificContextMenu = (e: React.MouseEvent): void => { - if (!e.isPropagationStopped() && this.props.Document.Id != "mainDoc") { // 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: "VideoOptions", event: () => { } }); + @action + mainCont = (ele: HTMLDivElement | null) => { + if (ele) { + this._player = ele!.getElementsByTagName("video")[0]; + if (this.props.Document.GetNumber(KeyStore.CurPage, -1) >= 0) { + this._currentTimecode = this.props.Document.GetNumber(KeyStore.CurPage, -1); + } } } - get collectionViewType(): CollectionViewType { return CollectionViewType.Freeform; } - get subView(): any { return CollectionView.SubView(this); } - componentDidMount() { - this.updateTimecode(); + this._intervalTimer = setInterval(this.updateTimecode, 1000); } - get player(): HTMLVideoElement | undefined { - return this._mainCont.current ? this._mainCont.current.getElementsByTagName("video")[0] : undefined; + componentWillUnmount() { + clearInterval(this._intervalTimer); } @action updateTimecode = () => { - if (this.player) { - this.ctime = this.player.currentTime; - this.props.Document.SetNumber(KeyStore.CurPage, Math.round(this.ctime)); + if (this._player) { + if ((this._player as any).AHackBecauseSomethingResetsTheVideoToZero != -1) { + this._player.currentTime = (this._player as any).AHackBecauseSomethingResetsTheVideoToZero; + (this._player as any).AHackBecauseSomethingResetsTheVideoToZero = -1; + } else { + this._currentTimecode = this._player.currentTime; + this.props.Document.SetNumber(KeyStore.CurPage, Math.round(this._currentTimecode)); + } } - setTimeout(() => this.updateTimecode(), 100) } - - @observable - ctime: number = 0 - @observable - playing: boolean = false; - @action onPlayDown = () => { - if (this.player) { - if (this.player.paused) { - this.player.play(); - this.playing = true; + if (this._player) { + if (this._player.paused) { + this._player.play(); + this._isPlaying = true; } else { - this.player.pause(); - this.playing = false; + this._player.pause(); + this._isPlaying = false; } } } + @action onFullDown = (e: React.PointerEvent) => { - if (this.player) { - this.player.requestFullscreen(); + if (this._player) { + this._player.requestFullscreen(); e.stopPropagation(); e.preventDefault(); } @@ -102,15 +94,35 @@ export class CollectionVideoView extends React.Component { @action onResetDown = () => { - if (this.player) { - this.player.pause(); - this.player.currentTime = 0; + if (this._player) { + this._player.pause(); + this._player.currentTime = 0; } } + // "inherited" CollectionView API starts here... + + @observable + public SelectedDocs: FieldId[] = [] + public active: () => boolean = () => CollectionView.Active(this); + + addDocument = (doc: Document, allowDuplicates: boolean): boolean => { return CollectionView.AddDocument(this.props, doc, allowDuplicates); } + removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); } + + specificContextMenu = (e: React.MouseEvent): void => { + if (!e.isPropagationStopped() && this.props.Document.Id != "mainDoc") { // 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: "VideoOptions", event: () => { } }); + } + } + + get collectionViewType(): CollectionViewType { return CollectionViewType.Freeform; } + get subView(): any { return CollectionView.SubView(this); } + + render() { - return (
    + trace(); + return (
    {this.subView} {this.props.isSelected() ? this.uIButtons : (null)}
    ) diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index a740865ad..2fa2c9086 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -68,7 +68,11 @@ export class CollectionView extends React.Component { @action public static AddDocument(props: CollectionViewProps, doc: Document, allowDuplicates: boolean): boolean { - doc.SetNumber(KeyStore.Page, props.Document.GetNumber(KeyStore.CurPage, -1)); + var curPage = props.Document.GetNumber(KeyStore.CurPage, -1); + doc.SetNumber(KeyStore.Page, curPage); + if (curPage > 0) { + doc.Set(KeyStore.AnnotationOn, 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()) diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx index dd2f71b59..638d3b5a7 100644 --- a/src/client/views/nodes/LinkBox.tsx +++ b/src/client/views/nodes/LinkBox.tsx @@ -17,6 +17,8 @@ import { faEye } from '@fortawesome/free-solid-svg-icons'; import { faEdit } from '@fortawesome/free-solid-svg-icons'; import { faTimes } from '@fortawesome/free-solid-svg-icons'; import { undoBatch } from "../../util/UndoManager"; +import { FieldWaiting } from "../../../fields/Field"; +import { NumberField } from "../../../fields/NumberField"; library.add(faEye); @@ -41,7 +43,24 @@ export class LinkBox extends React.Component { if (docView) { docView.props.focus(this.props.pairedDoc); } else { - CollectionDockingView.Instance.AddRightSplit(this.props.pairedDoc) + this.props.pairedDoc.GetAsync(KeyStore.AnnotationOn, (contextDoc: any) => { + if (!contextDoc) { + CollectionDockingView.Instance.AddRightSplit(this.props.pairedDoc); + } 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) + contextDoc.SetNumber(KeyStore.CurPage, pfield.Data); + let contextView = DocumentManager.Instance.getDocumentView(contextDoc); + if (contextView) { + contextView.props.focus(contextDoc); + } else { + CollectionDockingView.Instance.AddRightSplit(contextDoc); + } + }) + }); + } + }); } } diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 3a0ef2d32..e273b0b4f 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -1,5 +1,5 @@ import * as htmlToImage from "html-to-image"; -import { action, computed, observable, reaction, IReactionDisposer, trace } from 'mobx'; +import { action, computed, observable, reaction, IReactionDisposer, trace, keys } from 'mobx'; import { observer } from "mobx-react"; import 'react-image-lightbox/style.css'; import Measure from "react-measure"; @@ -18,6 +18,7 @@ import "./PDFBox.scss"; import { Sticky } from './Sticky'; //you should look at sticky and annotation, because they are used here import React = require("react") import { RouteStore } from "../../../server/RouteStore"; +import { NumberField } from "../../../fields/NumberField"; /** ALSO LOOK AT: Annotation.tsx, Sticky.tsx * This method renders PDF and puts all kinds of functionalities such as annotation, highlighting, @@ -60,7 +61,6 @@ export class PDFBox extends React.Component { //very useful for keeping track of X and y position throughout the PDF Canvas private initX: number = 0; private initY: number = 0; - private initPage: boolean = false; //checks if tool is on private _toolOn: boolean = false; //checks if tool is on @@ -88,17 +88,15 @@ export class PDFBox extends React.Component { @observable private _loaded: boolean = false; @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() { this._reactionDisposer = reaction( - () => this.curPage, + () => [this.curPage, this.thumbnailPage], () => { - if (this.curPage && this.initPage) { + if (this.curPage > 0 && this.thumbnailPage > 0 && this.curPage != this.thumbnailPage) { this.saveThumbnail(); this._interactive = true; - } else { - if (this.curPage > 0) - this.initPage = true; } }, { fireImmediately: true }); @@ -384,6 +382,7 @@ export class PDFBox extends React.Component { { width: me.props.doc.GetNumber(KeyStore.NativeWidth, 0), height: me.props.doc.GetNumber(KeyStore.NativeHeight, 0), quality: 0.5 }) .then(function (dataUrl: string) { me.props.doc.SetData(KeyStore.Thumbnail, new URL(dataUrl), ImageField); + me.props.doc.SetNumber(KeyStore.ThumbnailPage, me.props.doc.GetNumber(KeyStore.CurPage, -1)); }) .catch(function (error: any) { console.error('oops, something went wrong!', error); @@ -473,10 +472,10 @@ export class PDFBox extends React.Component { @computed get imageProxyRenderer() { - let field = this.props.doc.Get(KeyStore.Thumbnail); - if (field) { - let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" : - field instanceof ImageField ? field.Data.href : "http://cs.brown.edu/people/bcz/prairie.jpg"; + let thumbField = this.props.doc.Get(KeyStore.Thumbnail); + if (thumbField) { + 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 ; } return (null); diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 09ae95183..7c0db83a8 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -1,23 +1,27 @@ import React = require("react") import { observer } from "mobx-react"; -import { FieldWaiting } from '../../../fields/Field'; +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 } from "mobx"; +import { action, trace, observable, IReactionDisposer, computed, reaction } from "mobx"; import { KeyStore } from "../../../fields/KeyStore"; import { number } from "prop-types"; @observer export class VideoBox extends React.Component { + private _reactionDisposer: Opt; + private _videoRef = React.createRef() public static LayoutString() { return FieldView.LayoutString(VideoBox) } constructor(props: FieldViewProps) { super(props); } + @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, -1); } + _loaded: boolean = false; @@ -39,7 +43,17 @@ export class VideoBox extends React.Component { } } + get player(): HTMLVideoElement | undefined { + return this._videoRef.current ? this._videoRef.current.getElementsByTagName("video")[0] : undefined; + } + @action + setVideoRef = (vref: HTMLVideoElement | null) => { + if (this.curPage >= 0 && vref) { + vref!.currentTime = this.curPage; + (vref! as any).AHackBecauseSomethingResetsTheVideoToZero = this.curPage; + } + } render() { let field = this.props.doc.GetT(this.props.fieldKey, VideoField); @@ -47,15 +61,16 @@ export class VideoBox extends React.Component { return
    Loading
    } let path = field.Data.href; - - //setTimeout(action(() => this._loaded = true), 500); + trace(); return ( {({ measureRef }) => - ) diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts index 611e2951b..f9684b212 100644 --- a/src/fields/KeyStore.ts +++ b/src/fields/KeyStore.ts @@ -36,7 +36,9 @@ export namespace KeyStore { export const LinkDescription = new Key("LinkDescription"); export const LinkTags = new Key("LinkTag"); export const Thumbnail = new Key("Thumbnail"); + export const ThumbnailPage = new Key("ThumbnailPage"); export const CurPage = new Key("CurPage"); + export const AnnotationOn = new Key("AnnotationOn"); export const NumPages = new Key("NumPages"); export const Ink = new Key("Ink"); export const Cursors = new Key("Cursors"); -- cgit v1.2.3-70-g09d2 From fddd13da196a26affe61b30d93a3fe1b24f391a6 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 28 Mar 2019 12:59:35 -0400 Subject: works better with prototypes and links --- src/client/util/DocumentManager.ts | 5 ++ .../views/collections/CollectionFreeFormView.tsx | 53 +++++++++++++++++----- src/client/views/collections/CollectionView.tsx | 4 +- src/client/views/nodes/LinkBox.tsx | 2 +- 4 files changed, 50 insertions(+), 14 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 5bc16343e..28624dba8 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -26,6 +26,11 @@ export class DocumentManager { // this.DocumentViews = new Array(); } + public getAllDocumentViews(collection: Document) { + return this.DocumentViews.filter(dv => + dv.props.ContainingCollectionView && dv.props.ContainingCollectionView.props.Document == collection); + } + public getDocumentView(toFind: Document): DocumentView | null { let toReturn: DocumentView | null; diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index cba1110a1..0843d3670 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -1,7 +1,7 @@ import { action, computed, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; -import { FieldWaiting, Field } from "../../../fields/Field"; +import { FieldWaiting, Field, Opt } from "../../../fields/Field"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; import { TextField } from "../../../fields/TextField"; @@ -21,6 +21,8 @@ import React = require("react"); import v5 = require("uuid/v5"); import { DocumentManager } from "../../util/DocumentManager"; import { Utils } from "../../../Utils"; +import { Server } from "../../Server"; +import { AverageAggregateParameters } from "../../northstar/model/idea/idea"; @observer export class CollectionFreeFormView extends CollectionViewBase { @@ -424,42 +426,71 @@ export class LinksView extends React.Component { super(props); } - @observable _pairs: { a: Document, b: Document }[] = []; + @observable _triples: { a: Document, b: Document, l: Document }[] = []; findPairs() { return DocumentManager.Instance.DocumentViews.filter(dv => dv.props.ContainingCollectionView && dv.props.ContainingCollectionView.props.Document === this.props.Document).reduce((pairs, dv) => { + + return DocumentManager.Instance.DocumentViews.reduce((pairs, dv) => { + let srcViews = [dv]; + let srcAnnot = dv.props.Document.GetT(KeyStore.AnnotationOn, Document); + if (srcAnnot && srcAnnot != FieldWaiting && srcAnnot instanceof Document) { + srcViews = DocumentManager.Instance.getDocumentViews(srcAnnot.GetPrototype() as Document) + } + srcViews = srcViews.filter(sv => + sv.props.ContainingCollectionView && sv.props.ContainingCollectionView.props.Document == self + ); 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.props.Document, b: docView1.props.Document }) - ) + DocumentManager.Instance.getDocumentViews(linkToDoc).map(docView1 => { + + let targetViews = [docView1]; + let docAnnot = docView1.props.Document.GetT(KeyStore.AnnotationOn, Document); + if (docAnnot && docAnnot != FieldWaiting && docAnnot instanceof Document) { + targetViews = DocumentManager.Instance.getDocumentViews(docAnnot.GetPrototype() as Document) + } + targetViews.filter(tv => + tv.props.ContainingCollectionView && tv.props.ContainingCollectionView.props.Document == self + ).map(tv => srcViews.map(sv => + pairs.push({ a: sv.props.Document, b: tv.props.Document, l: link }))) + }) } } return pairs; - }, [] as { a: Document, b: Document }[])); + }, [] as { a: Document, b: Document, l: Document }[])); } return pairs; - }, [] as { a: Document, b: Document }[]); + }, [] as { a: Document, b: Document, l: Document }[]); } componentDidMount() { - reaction(() => this.findPairs(), (pairs) => runInAction(() => this._pairs = pairs)); + reaction(() => this.findPairs(), (pairs) => runInAction(() => this._triples = pairs)); + } + + onPointerDown(e: React.PointerEvent) { + let line = (e.nativeEvent as any).path[0]; + line.style.stroke = "red"; + Server.GetField(line.id, action((f: Opt) => { + if (f instanceof Document) { + console.log(f.Title); + } + })); } render() { - if (!this._pairs.length) + if (!this._triples.length) return (null); return - {this._pairs.map(pair => { + {this._triples.map(pair => { let x1 = pair.a.GetNumber(KeyStore.X, 0) + pair.a.GetNumber(KeyStore.Width, 0) / 2; let y1 = pair.a.GetNumber(KeyStore.Y, 0) + pair.a.GetNumber(KeyStore.Height, 0) / 2; let x2 = pair.b.GetNumber(KeyStore.X, 0) + pair.b.GetNumber(KeyStore.Width, 0) / 2; let y2 = pair.b.GetNumber(KeyStore.Y, 0) + pair.b.GetNumber(KeyStore.Height, 0) / 2; return ( - ) diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 2fa2c9086..789f07e8c 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -69,9 +69,9 @@ export class CollectionView extends React.Component { @action public static AddDocument(props: CollectionViewProps, doc: Document, allowDuplicates: boolean): boolean { var curPage = props.Document.GetNumber(KeyStore.CurPage, -1); - doc.SetNumber(KeyStore.Page, curPage); + doc.SetOnPrototype(KeyStore.Page, new NumberField(curPage)); if (curPage > 0) { - doc.Set(KeyStore.AnnotationOn, props.Document); + doc.SetOnPrototype(KeyStore.AnnotationOn, props.Document); } if (props.Document.Get(props.fieldKey) instanceof Field) { //TODO This won't create the field if it doesn't already exist diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx index 457fecee3..e81f8fec7 100644 --- a/src/client/views/nodes/LinkBox.tsx +++ b/src/client/views/nodes/LinkBox.tsx @@ -45,7 +45,7 @@ export class LinkBox extends React.Component { } else { this.props.pairedDoc.GetAsync(KeyStore.AnnotationOn, (contextDoc: any) => { if (!contextDoc) { - CollectionDockingView.Instance.AddRightSplit(this.props.pairedDoc); + CollectionDockingView.Instance.AddRightSplit(this.props.pairedDoc.MakeDelegate()); } else if (contextDoc instanceof Document) { this.props.pairedDoc.GetTAsync(KeyStore.Page, NumberField).then((pfield: any) => { contextDoc.GetTAsync(KeyStore.CurPage, NumberField).then((cfield: any) => { -- cgit v1.2.3-70-g09d2 From bdea88507ce2ba4da32b7f89c995021d0a058413 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 28 Mar 2019 15:24:57 -0400 Subject: fixed some things with linking. still some real inefficiencies. --- src/client/documents/Documents.ts | 1 + .../views/collections/CollectionFreeFormView.scss | 10 +-- .../views/collections/CollectionFreeFormView.tsx | 87 ++++++++++++++-------- src/client/views/collections/CollectionView.tsx | 2 +- 4 files changed, 59 insertions(+), 41 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 1d23b8c2c..837dfe815 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -119,6 +119,7 @@ export namespace Documents { imageProto = setupPrototypeOptions(imageProtoId, "IMAGE_PROTO", CollectionView.LayoutString("AnnotationsKey"), { x: 0, y: 0, nativeWidth: 300, width: 300, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }); imageProto.SetText(KeyStore.BackgroundLayout, ImageBox.LayoutString()); + imageProto.SetNumber(KeyStore.CurPage, 0); } return imageProto; } diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index 2dd345b6f..7012ce6b9 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -3,19 +3,15 @@ .collectionfreeformview-linkLine { stroke: black; stroke-width: 3; - transform: translate(10000px,10000px) -} -.collectionfreeformview-svgContainer{ - transform: translate(-10000px,-10000px); - position: absolute; - width: 20000px; - height: 20000px; + transform: translate(10000px,10000px); + pointer-events: all; } .collectionfreeformview-svgCanvas{ transform: translate(-10000px,-10000px); position: absolute; width: 20000px; height: 20000px; + pointer-events: none; } .collectionfreeformview-container { .collectionfreeformview > .jsx-parser { diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 5ce42acc9..91faf0907 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -1,4 +1,4 @@ -import { action, computed, observable, reaction, runInAction } from "mobx"; +import { action, computed, observable, reaction, runInAction, trace, untracked } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { FieldWaiting, Field, Opt } from "../../../fields/Field"; @@ -424,6 +424,7 @@ export class LinksView extends React.Component { constructor(props: CollectionViewProps) { super(props); + console.log("Create links View"); } @observable _triples: { a: Document, b: Document, l: Document }[] = []; @@ -432,42 +433,47 @@ export class LinksView extends React.Component { let self = this.props.Document; return DocumentManager.Instance.DocumentViews.reduce((pairs, dv) => { - let srcViews = [dv]; - let srcAnnot = dv.props.Document.GetT(KeyStore.AnnotationOn, Document); - if (srcAnnot && srcAnnot != FieldWaiting && srcAnnot instanceof Document) { - srcViews = DocumentManager.Instance.getDocumentViews(srcAnnot.GetPrototype() as Document) - } - srcViews = srcViews.filter(sv => - sv.props.ContainingCollectionView && sv.props.ContainingCollectionView.props.Document == self - ); - 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 => { - - let targetViews = [docView1]; - let docAnnot = docView1.props.Document.GetT(KeyStore.AnnotationOn, Document); - if (docAnnot && docAnnot != FieldWaiting && docAnnot instanceof Document) { - targetViews = DocumentManager.Instance.getDocumentViews(docAnnot.GetPrototype() as Document) - } - targetViews.filter(tv => - tv.props.ContainingCollectionView && tv.props.ContainingCollectionView.props.Document == self - ).map(tv => srcViews.map(sv => - pairs.push({ a: sv.props.Document, b: tv.props.Document, l: link }))) - }) + untracked(() => { + let srcViews = [dv]; + let srcAnnot = dv.props.Document.GetT(KeyStore.AnnotationOn, Document); + if (srcAnnot && srcAnnot != FieldWaiting && srcAnnot instanceof Document) { + srcViews = DocumentManager.Instance.getDocumentViews(srcAnnot.GetPrototype() as Document) + } + srcViews = srcViews.filter(sv => + sv.props.ContainingCollectionView && sv.props.ContainingCollectionView.props.Document == self + ); + 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 => { + let targetViews = [docView1]; + let docAnnot = docView1.props.Document.GetT(KeyStore.AnnotationOn, Document); + if (docAnnot && docAnnot != FieldWaiting && docAnnot instanceof Document) { + targetViews = DocumentManager.Instance.getDocumentViews(docAnnot.GetPrototype() as Document) + } + targetViews.filter(tv => + tv.props.ContainingCollectionView && tv.props.ContainingCollectionView.props.Document == self + ).map(tv => srcViews.map(sv => + pairs.push({ a: sv.props.Document, b: tv.props.Document, l: link }))) + }) + } } - } - return pairs; - }, [] as { a: Document, b: Document, l: Document }[])); - } + return pairs; + }, [] as { a: Document, b: Document, l: Document }[])); + } + }) return pairs; }, [] as { a: Document, b: Document, l: Document }[]); } componentDidMount() { - reaction(() => this.findPairs(), (pairs) => runInAction(() => this._triples = pairs)); + reaction(() => DocumentManager.Instance.DocumentViews.map(dv => [ + dv.props.Document.Get(KeyStore.AnnotationOn, false), + dv.props.Document.Get(KeyStore.LinkedFromDocs, false), + dv.props.Document.Get(KeyStore.LinkedToDocs, false) + ]), () => runInAction(() => this._triples = this.findPairs())); } onPointerDown(e: React.PointerEvent) { @@ -483,14 +489,29 @@ export class LinksView extends React.Component { render() { if (!this._triples.length) return (null); + let y: { a: Document, b: Document, l: Document, n: number }[] = [] + this._triples.map(t => { + if (!y.reduce((found, yi) => { + if (yi.a == t.a && yi.b == t.b) { + if (yi.l != t.l) + yi.n++; + return true; + } + return found; + }, false)) { + y.push({ a: t.a, b: t.b, l: t.l, n: 1 }); + } + }) + console.log("RENDERING " + y.length) return - {this._triples.map(pair => { + {y.map(pair => { let x1 = pair.a.GetNumber(KeyStore.X, 0) + pair.a.GetNumber(KeyStore.Width, 0) / 2; let y1 = pair.a.GetNumber(KeyStore.Y, 0) + pair.a.GetNumber(KeyStore.Height, 0) / 2; let x2 = pair.b.GetNumber(KeyStore.X, 0) + pair.b.GetNumber(KeyStore.Width, 0) / 2; let y2 = pair.b.GetNumber(KeyStore.Y, 0) + pair.b.GetNumber(KeyStore.Height, 0) / 2; return ( ) diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 789f07e8c..c804085df 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -70,7 +70,7 @@ export class CollectionView extends React.Component { public static AddDocument(props: CollectionViewProps, doc: Document, allowDuplicates: boolean): boolean { var curPage = props.Document.GetNumber(KeyStore.CurPage, -1); doc.SetOnPrototype(KeyStore.Page, new NumberField(curPage)); - if (curPage > 0) { + if (curPage >= 0) { doc.SetOnPrototype(KeyStore.AnnotationOn, props.Document); } if (props.Document.Get(props.fieldKey) instanceof Field) { -- cgit v1.2.3-70-g09d2 From c3eea60fa586e8ff9cf59497c041044fd0143bb1 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 28 Mar 2019 21:03:17 -0400 Subject: organized collectionfreeformview. fixed issues with showing links --- src/client/util/DocumentManager.ts | 24 +- .../views/collections/CollectionFreeFormView.scss | 116 ----- .../views/collections/CollectionFreeFormView.tsx | 525 --------------------- src/client/views/collections/CollectionView.tsx | 7 +- src/client/views/collections/MarqueeView.scss | 8 - src/client/views/collections/MarqueeView.tsx | 175 ------- src/client/views/collections/PreviewCursor.scss | 18 - src/client/views/collections/PreviewCursor.tsx | 76 --- .../CollectionFreeFormLinkView.scss | 6 + .../CollectionFreeFormLinkView.tsx | 37 ++ .../CollectionFreeFormLinksView.scss | 7 + .../CollectionFreeFormLinksView.tsx | 56 +++ .../collectionFreeForm/CollectionFreeFormView.scss | 95 ++++ .../collectionFreeForm/CollectionFreeFormView.tsx | 416 ++++++++++++++++ .../collectionFreeForm/MarqueeView.scss | 8 + .../collections/collectionFreeForm/MarqueeView.tsx | 175 +++++++ .../collectionFreeForm/PreviewCursor.scss | 18 + .../collectionFreeForm/PreviewCursor.tsx | 76 +++ src/client/views/nodes/DocumentContentsView.tsx | 2 +- 19 files changed, 924 insertions(+), 921 deletions(-) delete mode 100644 src/client/views/collections/CollectionFreeFormView.scss delete mode 100644 src/client/views/collections/CollectionFreeFormView.tsx delete mode 100644 src/client/views/collections/MarqueeView.scss delete mode 100644 src/client/views/collections/MarqueeView.tsx delete mode 100644 src/client/views/collections/PreviewCursor.scss delete mode 100644 src/client/views/collections/PreviewCursor.tsx create mode 100644 src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss create mode 100644 src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx create mode 100644 src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss create mode 100644 src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx create mode 100644 src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss create mode 100644 src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx create mode 100644 src/client/views/collections/collectionFreeForm/MarqueeView.scss create mode 100644 src/client/views/collections/collectionFreeForm/MarqueeView.tsx create mode 100644 src/client/views/collections/collectionFreeForm/PreviewCursor.scss create mode 100644 src/client/views/collections/collectionFreeForm/PreviewCursor.tsx (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 28624dba8..bf59fbb43 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -1,10 +1,11 @@ import React = require('react') import { observer } from 'mobx-react'; -import { observable, action } from 'mobx'; +import { observable, action, computed } from 'mobx'; import { Document } from "../../fields/Document" import { DocumentView } from '../views/nodes/DocumentView'; import { KeyStore } from '../../fields/KeyStore'; import { FieldWaiting } from '../../fields/Field'; +import { ListField } from '../../fields/ListField'; export class DocumentManager { @@ -74,4 +75,25 @@ export class DocumentManager { return (toReturn); } + + @computed + 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) { + 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, l: link }) + }) + } + } + return pairs; + }, [] as { a: DocumentView, b: DocumentView, l: Document }[])); + } + return pairs; + }, [] as { a: DocumentView, b: DocumentView, l: Document }[]); + } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss deleted file mode 100644 index 7012ce6b9..000000000 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ /dev/null @@ -1,116 +0,0 @@ -@import "../global_variables"; - -.collectionfreeformview-linkLine { - stroke: black; - stroke-width: 3; - transform: translate(10000px,10000px); - pointer-events: all; -} -.collectionfreeformview-svgCanvas{ - transform: translate(-10000px,-10000px); - position: absolute; - width: 20000px; - height: 20000px; - pointer-events: none; -} -.collectionfreeformview-container { - .collectionfreeformview > .jsx-parser { - position: absolute; - height: 100%; - 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), - // linear-gradient(to bottom, $light-color-secondary 1px, transparent 1px); - // background-size: 30px 30px; - // } - - box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw; - border: 0px solid $light-color-secondary; - border-radius: $border-radius; - box-sizing: border-box; - position: relative; - overflow: hidden; - top: 0; - left: 0; - width: 100%; - height: 100%; - .collectionfreeformview { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - .inking-canvas { - transform-origin: 50000px 50000px; - } - } -} -.collectionfreeformview-overlay { - .collectionfreeformview > .jsx-parser { - position: absolute; - height: 100%; - } - .formattedTextBox-cont { - background: $light-color-secondary; - } - - .inking-canvas { - transform-origin: 50000px 50000px; - } - - opacity: 0.99; - border: 0px solid transparent; - border-radius: $border-radius; - box-sizing: border-box; - position:relative; - overflow: hidden; - top: 0; - left: 0; - width: 100%; - height: 100%; - .collectionfreeformview { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - .inking-canvas { - transform-origin: 50000px 50000px; - } - .formattedTextBox-cont { - background:yellow; - } - } -} - -// selection border...? -.border { - border-style: solid; - box-sizing: border-box; - width: 98%; - height: 98%; - border-radius: $border-radius; -} - -//this is an animation for the blinking cursor! -@keyframes blink { - 0% { - opacity: 0; - } - 49% { - opacity: 0; - } - 50% { - opacity: 1; - } -} - -#prevCursor { - animation: blink 1s infinite; -} diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx deleted file mode 100644 index 44f4eadaa..000000000 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ /dev/null @@ -1,525 +0,0 @@ -import { action, computed, observable, reaction, runInAction, trace, untracked, IReactionDisposer } from "mobx"; -import { observer } from "mobx-react"; -import { Document } from "../../../fields/Document"; -import { FieldWaiting, Field, Opt } from "../../../fields/Field"; -import { KeyStore } from "../../../fields/KeyStore"; -import { ListField } from "../../../fields/ListField"; -import { TextField } from "../../../fields/TextField"; -import { DragManager } from "../../util/DragManager"; -import { Transform } from "../../util/Transform"; -import { undoBatch } from "../../util/UndoManager"; -import { InkingCanvas } from "../InkingCanvas"; -import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; -import { DocumentContentsView } from "../nodes/DocumentContentsView"; -import { DocumentViewProps, DocumentView } from "../nodes/DocumentView"; -import "./CollectionFreeFormView.scss"; -import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; -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"; -import { Server } from "../../Server"; -import { AverageAggregateParameters } from "../../northstar/model/idea/idea"; - -@observer -export class CollectionFreeFormView extends CollectionViewBase { - public _canvasRef = React.createRef(); - private _selectOnLoaded: string = ""; // id of document that should be selected once it's loaded (used for click-to-type) - - 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 - this._selectOnLoaded = newBox.Id; - //set text to be the typed key and get focus on text box - this.props.addDocument(newBox, false); - //remove cursor from screen - this.PreviewCursorVisible = false; - } - - public selectDocuments = (docs: Document[]) => { - this.props.CollectionView.SelectedDocs.length = 0; - docs.map(d => this.props.CollectionView.SelectedDocs.push(d.Id)); - } - - public getActiveDocuments = () => { - var curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1); - const lvalue = this.props.Document.GetT>(this.props.fieldKey, ListField); - let active: Document[] = []; - if (lvalue && lvalue != FieldWaiting) { - lvalue.Data.map(doc => { - var page = doc.GetNumber(KeyStore.Page, -1); - if (page == curPage || page == -1) { - active.push(doc); - } - }) - } - - return active; - } - - //determines whether the blinking cursor for indicating whether a text will be made on key down is visible - @observable public PreviewCursorVisible: boolean = false; - @observable public MarqueeVisible = false; - @observable public DownX: number = 0; - @observable public DownY: number = 0; - @observable private _lastX: number = 0; - @observable private _lastY: 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.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.props.panelWidth() / 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.props.panelHeight() / 2 : 0; }// shift so pan position is at center of window for non-overlay collections - - @undoBatch - @action - 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); - const [x, y] = this.getTransform().transformPoint(screenX, screenY); - de.data.droppedDocument.SetNumber(KeyStore.X, x); - de.data.droppedDocument.SetNumber(KeyStore.Y, y); - if (!de.data.droppedDocument.GetNumber(KeyStore.Width, 0)) { - de.data.droppedDocument.SetNumber(KeyStore.Width, 300); - de.data.droppedDocument.SetNumber(KeyStore.Height, 300); - } - this.bringToFront(de.data.droppedDocument); - } - return true; - } - return false; - } - - - @action - cleanupInteractions = () => { - document.removeEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - this.MarqueeVisible = false; - } - - @action - onPointerDown = (e: React.PointerEvent): void => { - this.PreviewCursorVisible = false; - if ((e.button === 2 && this.props.active() && (!this.isAnnotationOverlay || this.zoomScaling != 1)) || e.button == 0) { - 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; - } - } - - @action - onPointerUp = (e: PointerEvent): void => { - e.stopPropagation(); - - if (Math.abs(this.DownX - e.clientX) < 4 && Math.abs(this.DownY - e.clientY) < 4) { - //show preview text cursor on tap - this.PreviewCursorVisible = true; - //select is not already selected - if (!this.props.isSelected()) { - this.props.select(false); - } - } - this.cleanupInteractions(); - } - - @action - onPointerMove = (e: PointerEvent): void => { - if (!e.cancelBubble && this.props.active()) { - if (e.buttons == 1 && !e.altKey && !e.metaKey) { - this.MarqueeVisible = true; - } - if (this.MarqueeVisible) { - e.stopPropagation(); - e.preventDefault(); - } - else 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); - this.SetPan(x - dx, y - dy); - this._lastX = e.pageX; - this._lastY = e.pageY; - e.stopPropagation(); - e.preventDefault(); - } - } - } - - @action - onPointerWheel = (e: React.WheelEvent): void => { - this.props.select(false); - e.stopPropagation(); - e.preventDefault(); - let 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); - 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; - let [x, y] = transform.transformPoint(e.clientX, e.clientY); - - let localTransform = this.getLocalTransform() - localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y) - // console.log(localTransform) - - this.props.Document.SetNumber(KeyStore.Scale, localTransform.Scale); - this.SetPan(-localTransform.TranslateX / localTransform.Scale, -localTransform.TranslateY / localTransform.Scale); - } - } - - @action - private SetPan(panX: number, panY: number) { - 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)); - this.props.Document.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX); - this.props.Document.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY); - } - - @action - 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 => { - } - - @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; - } - return doc1.GetNumber(KeyStore.ZIndex, 0) - doc2.GetNumber(KeyStore.ZIndex, 0); - }).map((doc, index) => { - doc.SetNumber(KeyStore.ZIndex, index + 1) - }); - } - - @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.props.focus(this.props.Document); - } - - getDocumentViewProps(document: Document): DocumentViewProps { - return { - Document: document, - AddDocument: this.props.addDocument, - RemoveDocument: this.props.removeDocument, - ScreenToLocalTransform: this.getTransform, - isTopMost: false, - SelectOnLoad: document.Id == this._selectOnLoaded, - PanelWidth: document.Width, - PanelHeight: document.Height, - ContentScaling: this.noScaling, - ContainingCollectionView: this.props.CollectionView, - focus: this.focusDocument - } - } - - @computed - get views() { - var curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1); - const lvalue = this.props.Document.GetT>(this.props.fieldKey, ListField); - if (lvalue && lvalue != FieldWaiting) { - return lvalue.Data.map(doc => { - if (!doc) return null; - var page = doc.GetNumber(KeyStore.Page, 0); - return (page != curPage && page != 0) ? (null) : - (); - }) - } - return null; - } - - @computed - get backgroundView() { - return !this.backgroundLayout ? (null) : - ( false} select={() => { }} />); - } - @computed - get overlayView() { - return !this.overlayLayout ? (null) : - ( false} select={() => { }} />); - } - - getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).translate(-this.centeringShiftX, -this.centeringShiftY).transform(this.getLocalTransform()) - getMarqueeTransform = (): 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; - - //when focus is lost, this will remove the preview cursor - @action - onBlur = (): void => { - this.PreviewCursorVisible = false; - } - - private crosshairs?: HTMLCanvasElement; - drawCrosshairs = (backgroundColor: string) => { - if (this.crosshairs) { - let c = this.crosshairs; - let ctx = c.getContext('2d'); - if (ctx) { - ctx.fillStyle = backgroundColor; - ctx.fillRect(0, 0, 20, 20); - - ctx.fillStyle = "black"; - ctx.lineWidth = 0.5; - - ctx.beginPath(); - - ctx.moveTo(10, 0); - ctx.lineTo(10, 8); - - ctx.moveTo(10, 20); - ctx.lineTo(10, 12); - - ctx.moveTo(0, 10); - ctx.lineTo(8, 10); - - ctx.moveTo(20, 10); - ctx.lineTo(12, 10); - - ctx.stroke(); - - // ctx.font = "10px Arial"; - // ctx.fillText(CurrentUserUtils.email[0].toUpperCase(), 10, 10); - } - } - } - - render() { - let [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 panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0) + this.centeringShiftX; - // const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0) + this.centeringShiftY; - // console.log("center:", this.getLocalTransform().transformPoint(this.centeringShiftX, this.centeringShiftY)); - - return ( -
    super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY))} - onWheel={this.onPointerWheel} - onDrop={this.onDrop.bind(this)} - onDragOver={this.onDragOver} - onBlur={this.onBlur} - style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}// , zIndex: !this.props.isTopMost ? -1 : undefined }} - tabIndex={0} - ref={this.createDropTarget}> -
    - {this.backgroundView} - - - {this.views} - - {super.getCursors().map(entry => { - if (entry.Data.length > 0) { - let id = entry.Data[0][0]; - let email = entry.Data[0][1]; - let point = entry.Data[1]; - this.drawCrosshairs("#" + v5(id, v5.URL).substring(0, 6).toUpperCase() + "22") - return ( -
    - { if (el) this.crosshairs = el }} - width={20} - height={20} - style={{ - position: 'absolute', - width: "20px", - height: "20px", - opacity: 0.5, - borderRadius: "50%", - border: "2px solid black" - }} - /> -

    {email[0].toUpperCase()}

    -
    - ); - } - })} -
    - - {this.overlayView} - -
    - ); - } -} - -@observer -export class LinksView extends React.Component { - @observable _connections: { a: Document, b: Document, l: Document }[] = []; - - private _reactionDisposer: Opt; - - componentDidMount() { - this._reactionDisposer = reaction(() => DocumentManager.Instance.DocumentViews.map(dv => [ - dv.props.Document.Get(KeyStore.AnnotationOn, false), - dv.props.Document.Get(KeyStore.LinkedFromDocs, false), - dv.props.Document.Get(KeyStore.LinkedToDocs, false) - ]), () => runInAction(() => this._connections = this.findPairs()), { fireImmediately: true }); - } - componentWillUnmount() { - if (this._reactionDisposer) { - this._reactionDisposer(); - } - this._reactionDisposer = undefined; - } - - filtered(views: DocumentView[]) { - return views.filter(sv => - sv.props.ContainingCollectionView && sv.props.ContainingCollectionView.props.Document == this.props.Document - ); - } - - findPairs() { - return DocumentManager.Instance.DocumentViews.reduce((pairs, dv) => { - untracked(() => { - let srcViews = [dv]; - let srcAnnot = dv.props.Document.GetT(KeyStore.AnnotationOn, Document); - if (srcAnnot && srcAnnot != FieldWaiting && srcAnnot instanceof Document) { - srcViews = DocumentManager.Instance.getDocumentViews(srcAnnot.GetPrototype() as Document) - } - 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 => { - let targetViews = [docView1]; - let docAnnot = docView1.props.Document.GetT(KeyStore.AnnotationOn, Document); - if (docAnnot && docAnnot != FieldWaiting && docAnnot instanceof Document) { - targetViews = DocumentManager.Instance.getDocumentViews(docAnnot.GetPrototype() as Document) - } - this.filtered(targetViews).map(tv => this.filtered(srcViews).map(sv => - pairs.push({ a: sv.props.Document, b: tv.props.Document, l: link }))) - }) - } - } - return pairs; - }, [] as { a: Document, b: Document, l: Document }[])); - } - }) - return pairs; - }, [] as { a: Document, b: Document, l: Document }[]); - } - - onPointerDown(e: React.PointerEvent) { - let line = (e.nativeEvent as any).path[0]; - line.style.stroke = "red"; - Server.GetField(line.id, action((f: Opt) => { - if (f instanceof Document) { - console.log(f.Title); - } - })); - } - - @computed - get uniqueConnections() { - return this._connections.reduce((y, t) => { - if (!y.reduce((found, yi) => { - if (yi.a == t.a && yi.b == t.b) { - if (yi.l != t.l) - yi.n++; - return true; - } - return found; - }, false)) { - y.push({ a: t.a, b: t.b, l: t.l, n: 1 }); - } - return y - }, [] as { a: Document, b: Document, l: Document, n: number }[]); - } - - render() { - if (!this._connections.length) - return (null); - return - {this.uniqueConnections.map(c => { - let x1 = c.a.GetNumber(KeyStore.X, 0) + c.a.GetNumber(KeyStore.Width, 0) / 2; - let y1 = c.a.GetNumber(KeyStore.Y, 0) + c.a.GetNumber(KeyStore.Height, 0) / 2; - let x2 = c.b.GetNumber(KeyStore.X, 0) + c.b.GetNumber(KeyStore.Width, 0) / 2; - let y2 = c.b.GetNumber(KeyStore.Y, 0) + c.b.GetNumber(KeyStore.Height, 0) / 2; - return ( - - ) - })} - - } -} \ No newline at end of file diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index c804085df..a1498e0ae 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -7,7 +7,7 @@ import { ContextMenu } from "../ContextMenu"; import React = require("react"); import { KeyStore } from "../../../fields/KeyStore"; import { NumberField } from "../../../fields/NumberField"; -import { CollectionFreeFormView } from "./CollectionFreeFormView"; +import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView"; import { CollectionDockingView } from "./CollectionDockingView"; import { CollectionSchemaView } from "./CollectionSchemaView"; import { CollectionViewProps } from "./CollectionViewBase"; @@ -104,6 +104,11 @@ export class CollectionView extends React.Component { break; } } + doc.GetTAsync(KeyStore.AnnotationOn, Document).then((annotationOn) => { + if (annotationOn == props.Document) { + doc.Set(KeyStore.AnnotationOn, undefined, true); + } + }) if (index !== -1) { value.splice(index, 1) diff --git a/src/client/views/collections/MarqueeView.scss b/src/client/views/collections/MarqueeView.scss deleted file mode 100644 index 6d9a79344..000000000 --- a/src/client/views/collections/MarqueeView.scss +++ /dev/null @@ -1,8 +0,0 @@ - -.marqueeView { - border-style: dashed; - box-sizing: border-box; - position: absolute; - border-width: 1px; - border-color: black; -} \ No newline at end of file diff --git a/src/client/views/collections/MarqueeView.tsx b/src/client/views/collections/MarqueeView.tsx deleted file mode 100644 index b48ad9c64..000000000 --- a/src/client/views/collections/MarqueeView.tsx +++ /dev/null @@ -1,175 +0,0 @@ -import { action, IReactionDisposer, observable, reaction } from "mobx"; -import { observer } from "mobx-react"; -import { Document } from "../../../fields/Document"; -import { FieldWaiting, Opt } from "../../../fields/Field"; -import { KeyStore } from "../../../fields/KeyStore"; -import { Documents } from "../../documents/Documents"; -import { SelectionManager } from "../../util/SelectionManager"; -import { Transform } from "../../util/Transform"; -import { CollectionFreeFormView } from "./CollectionFreeFormView"; -import "./MarqueeView.scss"; -import React = require("react"); -import { InkField, StrokeData } from "../../../fields/InkField"; -import { Utils } from "../../../Utils"; -import { InkingCanvas } from "../InkingCanvas"; - -interface MarqueeViewProps { - getMarqueeTransform: () => Transform; - getTransform: () => Transform; - container: CollectionFreeFormView; - addDocument: (doc: Document, allowDuplicates: false) => boolean; - activeDocuments: () => Document[]; - selectDocuments: (docs: Document[]) => void; - removeDocument: (doc: Document) => boolean; -} - -@observer -export class MarqueeView extends React.Component -{ - private _reactionDisposer: Opt; - - @observable _lastX: number = 0; - @observable _lastY: number = 0; - @observable _downX: number = 0; - @observable _downY: number = 0; - - componentDidMount() { - this._reactionDisposer = reaction( - () => this.props.container.MarqueeVisible, - (visible: boolean) => this.onPointerDown(visible, this.props.container.DownX, this.props.container.DownY)) - } - componentWillUnmount() { - if (this._reactionDisposer) { - this._reactionDisposer(); - } - this.cleanupInteractions(); - } - - @action - cleanupInteractions = () => { - document.removeEventListener("pointermove", this.onPointerMove, true) - document.removeEventListener("pointerup", this.onPointerUp, true); - document.removeEventListener("keydown", this.marqueeCommand, true); - } - - @action - onPointerDown = (visible: boolean, downX: number, downY: number): void => { - if (visible) { - this._downX = this._lastX = downX; - this._downY = this._lastY = downY; - document.addEventListener("pointermove", this.onPointerMove, true) - document.addEventListener("pointerup", this.onPointerUp, true); - document.addEventListener("keydown", this.marqueeCommand, true); - } - } - - @action - onPointerMove = (e: PointerEvent): void => { - this._lastX = e.pageX; - this._lastY = e.pageY; - } - - @action - onPointerUp = (e: PointerEvent): void => { - this.cleanupInteractions(); - if (!e.shiftKey) { - SelectionManager.DeselectAll(); - } - this.props.selectDocuments(this.marqueeSelect()); - } - - intersectRect(r1: { left: number, top: number, width: number, height: number }, - r2: { left: number, top: number, width: number, height: number }) { - return !(r2.left > r1.left + r1.width || r2.left + r2.width < r1.left || r2.top > r1.top + r1.height || r2.top + r2.height < r1.top); - } - - get Bounds() { - let left = this._downX < this._lastX ? this._downX : this._lastX; - 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]) } - } - - @action - marqueeCommand = (e: KeyboardEvent) => { - if (e.key == "Backspace" || e.key == "Delete") { - this.marqueeSelect().map(d => this.props.removeDocument(d)); - this.props.container.props.Document.SetData(KeyStore.Ink, this.marqueeInkSelect(false), InkField); - this.cleanupInteractions(); - } - if (e.key == "c") { - let bounds = this.Bounds; - let selected = this.marqueeSelect().map(d => { - this.props.removeDocument(d); - 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, 0); - d.SetText(KeyStore.Title, "" + d.GetNumber(KeyStore.Width, 0) + " " + d.GetNumber(KeyStore.Height, 0)); - return d; - }); - let liftedInk = this.marqueeInkSelect(true); - this.props.container.props.Document.SetData(KeyStore.Ink, this.marqueeInkSelect(false), InkField); - //setTimeout(() => { - let newCollection = Documents.FreeformDocument(selected, { - x: bounds.left, - y: bounds.top, - panx: 0, - pany: 0, - width: bounds.width, - height: bounds.height, - backgroundColor: "Transparent", - ink: liftedInk, - title: "a nested collection" - }); - this.props.addDocument(newCollection, false); - // }, 100); - this.cleanupInteractions(); - } - } - marqueeInkSelect(select: boolean) { - let selRect = this.Bounds; - let centerShiftX = 0 - (selRect.left + selRect.width / 2); // moves each point by the offset that shifts the selection's center to the origin. - let centerShiftY = 0 - (selRect.top + selRect.height / 2); - let ink = this.props.container.props.Document.GetT(KeyStore.Ink, InkField); - if (ink && ink != FieldWaiting && ink.Data) { - let idata = new Map(); - ink.Data.forEach((value: StrokeData, key: string, map: any) => { - let inside = InkingCanvas.IntersectStrokeRect(value, selRect); - if (inside && select) { - idata.set(key, - { - pathData: value.pathData.map(val => { return { x: val.x + centerShiftX, y: val.y + centerShiftY } }), - color: value.color, - width: value.width, - tool: value.tool, - page: -1 - }); - } else if (!inside && !select) { - idata.set(key, value); - } - }) - return idata; - } - } - - marqueeSelect() { - let selRect = this.Bounds; - let selection: Document[] = []; - this.props.activeDocuments().map(doc => { - var x = doc.GetNumber(KeyStore.X, 0); - 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) - }) - return selection; - } - - render() { - let p = this.props.getMarqueeTransform().transformPoint(this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY); - let v = this.props.getMarqueeTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY); - return (!this.props.container.MarqueeVisible ? (null) :
    ); - } -} \ No newline at end of file diff --git a/src/client/views/collections/PreviewCursor.scss b/src/client/views/collections/PreviewCursor.scss deleted file mode 100644 index a797411f6..000000000 --- a/src/client/views/collections/PreviewCursor.scss +++ /dev/null @@ -1,18 +0,0 @@ - -.previewCursor { - color: black; - position: absolute; - transform-origin: left top; - pointer-events: none; -} - -//this is an animation for the blinking cursor! -@keyframes blink { - 0% {opacity: 0} - 49%{opacity: 0} - 50% {opacity: 1} -} - -#previewCursor { - animation: blink 1s infinite; -} \ No newline at end of file diff --git a/src/client/views/collections/PreviewCursor.tsx b/src/client/views/collections/PreviewCursor.tsx deleted file mode 100644 index 8ae59a83a..000000000 --- a/src/client/views/collections/PreviewCursor.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { action, IReactionDisposer, observable, reaction } from "mobx"; -import { observer } from "mobx-react"; -import { Document } from "../../../fields/Document"; -import { Opt } from "../../../fields/Field"; -import { Documents } from "../../documents/Documents"; -import { Transform } from "../../util/Transform"; -import { CollectionFreeFormView } from "./CollectionFreeFormView"; -import "./PreviewCursor.scss"; -import React = require("react"); - - -export interface PreviewCursorProps { - getTransform: () => Transform; - container: CollectionFreeFormView; - addLiveTextDocument: (doc: Document) => void; -} - -@observer -export class PreviewCursor extends React.Component { - private _reactionDisposer: Opt; - - @observable _lastX: number = 0; - @observable _lastY: number = 0; - - componentDidMount() { - this._reactionDisposer = reaction( - () => this.props.container.PreviewCursorVisible, - (visible: boolean) => this.onCursorPlaced(visible, this.props.container.DownX, this.props.container.DownY)) - } - componentWillUnmount() { - if (this._reactionDisposer) { - this._reactionDisposer(); - } - this.cleanupInteractions(); - } - - - @action - cleanupInteractions = () => { - document.removeEventListener("keypress", this.onKeyPress, false); - } - - @action - onCursorPlaced = (visible: boolean, downX: number, downY: number): void => { - if (visible) { - document.addEventListener("keypress", this.onKeyPress, false); - this._lastX = downX; - this._lastY = downY; - } else - this.cleanupInteractions(); - } - - @action - onKeyPress = (e: KeyboardEvent) => { - // Mixing events between React and Native is finicky. In FormattedTextBox, we set the - // DASHFormattedTextBoxHandled flag when a text box consumes a key press so that we can ignore - // the keyPress here. - //if not these keys, make a textbox if preview cursor is active! - if (!e.ctrlKey && !e.altKey && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) { - //make textbox and add it to this collection - let [x, y] = this.props.getTransform().transformPoint(this._lastX, this._lastY); - let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "typed text" }); - this.props.addLiveTextDocument(newBox); - e.stopPropagation(); - } - } - - render() { - //get local position and place cursor there! - let [x, y] = this.props.getTransform().transformPoint(this._lastX, this._lastY); - return ( - !this.props.container.PreviewCursorVisible ? (null) : -
    I
    ) - - } -} \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss new file mode 100644 index 000000000..3b2f79be1 --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss @@ -0,0 +1,6 @@ +.collectionfreeformlinkview-linkLine { + stroke: black; + stroke-width: 3; + transform: translate(10000px,10000px); + pointer-events: all; +} \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx new file mode 100644 index 000000000..e84f0c5ad --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -0,0 +1,37 @@ +import { observer } from "mobx-react"; +import { Document } from "../../../../fields/Document"; +import { KeyStore } from "../../../../fields/KeyStore"; +import { Utils } from "../../../../Utils"; +import "./CollectionFreeFormLinkView.scss"; +import React = require("react"); +import v5 = require("uuid/v5"); + +export interface CollectionFreeFormLinkViewProps { + A: Document; + B: Document; + LinkDocs: Document[]; +} + +@observer +export class CollectionFreeFormLinkView extends React.Component { + + onPointerDown = (e: React.PointerEvent) => { + this.props.LinkDocs.map(l => + console.log("Link:" + l.Title)); + } + render() { + let l = this.props.LinkDocs; + let a = this.props.A; + let b = this.props.B; + let x1 = a.GetNumber(KeyStore.X, 0) + a.GetNumber(KeyStore.Width, 0) / 2; + let y1 = a.GetNumber(KeyStore.Y, 0) + a.GetNumber(KeyStore.Height, 0) / 2; + let x2 = b.GetNumber(KeyStore.X, 0) + b.GetNumber(KeyStore.Width, 0) / 2; + let y2 = b.GetNumber(KeyStore.Y, 0) + b.GetNumber(KeyStore.Height, 0) / 2; + return ( + + ) + } +} \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss new file mode 100644 index 000000000..9af0df7f5 --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss @@ -0,0 +1,7 @@ +.collectionfreeformlinksview-svgCanvas{ + transform: translate(-10000px,-10000px); + position: absolute; + width: 20000px; + height: 20000px; + 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 new file mode 100644 index 000000000..4f28f43eb --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx @@ -0,0 +1,56 @@ +import { computed } from "mobx"; +import { observer } from "mobx-react"; +import { Document } from "../../../../fields/Document"; +import { FieldWaiting } from "../../../../fields/Field"; +import { KeyStore } from "../../../../fields/KeyStore"; +import { Utils } from "../../../../Utils"; +import { DocumentManager } from "../../../util/DocumentManager"; +import { DocumentView } from "../../nodes/DocumentView"; +import { CollectionViewProps } from "../CollectionViewBase"; +import "./CollectionFreeFormLinksView.scss"; +import React = require("react"); +import v5 = require("uuid/v5"); +import { CollectionFreeFormLinkView } from "./CollectionFreeFormLinkView"; + +@observer +export class CollectionFreeFormLinksView extends React.Component { + + documentAnchors(view: DocumentView) { + let equalViews = [view]; + let containerDoc = view.props.Document.GetT(KeyStore.AnnotationOn, Document); + if (containerDoc && containerDoc != FieldWaiting && containerDoc instanceof Document) { + equalViews = DocumentManager.Instance.getDocumentViews(containerDoc.GetPrototype() as Document) + } + return equalViews.filter(sv => sv.props.ContainingCollectionView && sv.props.ContainingCollectionView.props.Document == this.props.Document); + } + + @computed + get uniqueConnections() { + return DocumentManager.Instance.LinkedDocumentViews.reduce((drawnPairs, connection) => { + let srcViews = this.documentAnchors(connection.a); + let targetViews = this.documentAnchors(connection.b); + let possiblePairs: { a: Document, b: Document, }[] = []; + srcViews.map(sv => 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); + if (match) { + 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[] }); + } + }) + return drawnPairs + }, [] as { a: Document, b: Document, l: Document[] }[]); + } + + render() { + return ( + + {this.uniqueConnections.map(c => )} + ); + } +} \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss new file mode 100644 index 000000000..9c5e98005 --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -0,0 +1,95 @@ +@import "../../global_variables"; + +.collectionfreeformview-container { + .collectionfreeformview > .jsx-parser { + position: absolute; + height: 100%; + 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), + // linear-gradient(to bottom, $light-color-secondary 1px, transparent 1px); + // background-size: 30px 30px; + // } + + box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw; + border: 0px solid $light-color-secondary; + border-radius: $border-radius; + box-sizing: border-box; + position: relative; + overflow: hidden; + top: 0; + left: 0; + width: 100%; + height: 100%; + .collectionfreeformview { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + .inking-canvas { + transform-origin: 50000px 50000px; + } + } +} +.collectionfreeformview-overlay { + .collectionfreeformview > .jsx-parser { + position: absolute; + height: 100%; + } + .formattedTextBox-cont { + background: $light-color-secondary; + } + + .inking-canvas { + transform-origin: 50000px 50000px; + } + + opacity: 0.99; + border: 0px solid transparent; + border-radius: $border-radius; + box-sizing: border-box; + position:relative; + overflow: hidden; + top: 0; + left: 0; + width: 100%; + height: 100%; + .collectionfreeformview { + .formattedTextBox-cont { + background:yellow; + } + } +} + +// selection border...? +.border { + border-style: solid; + box-sizing: border-box; + width: 98%; + height: 98%; + border-radius: $border-radius; +} + +//this is an animation for the blinking cursor! +@keyframes blink { + 0% { + opacity: 0; + } + 49% { + opacity: 0; + } + 50% { + opacity: 1; + } +} + +#prevCursor { + animation: blink 1s infinite; +} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx new file mode 100644 index 000000000..1f90b0d46 --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -0,0 +1,416 @@ +import { action, computed, 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 { TextField } from "../../../../fields/TextField"; +import { DragManager } from "../../../util/DragManager"; +import { Transform } from "../../../util/Transform"; +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 { COLLECTION_BORDER_WIDTH } from "../CollectionView"; +import { CollectionViewBase } from "../CollectionViewBase"; +import { MarqueeView } from "./MarqueeView"; +import { PreviewCursor } from "./PreviewCursor"; +import { CollectionFreeFormLinksView } from "./CollectionFreeFormLinksView"; +import "./CollectionFreeFormView.scss"; +import React = require("react"); +import v5 = require("uuid/v5"); + +@observer +export class CollectionFreeFormView extends CollectionViewBase { + public _canvasRef = React.createRef(); + private _selectOnLoaded: string = ""; // id of document that should be selected once it's loaded (used for click-to-type) + + 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 + this._selectOnLoaded = newBox.Id; + //set text to be the typed key and get focus on text box + this.props.addDocument(newBox, false); + //remove cursor from screen + this.PreviewCursorVisible = false; + } + + public selectDocuments = (docs: Document[]) => { + this.props.CollectionView.SelectedDocs.length = 0; + docs.map(d => this.props.CollectionView.SelectedDocs.push(d.Id)); + } + + public getActiveDocuments = () => { + var curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1); + const lvalue = this.props.Document.GetT>(this.props.fieldKey, ListField); + let active: Document[] = []; + if (lvalue && lvalue != FieldWaiting) { + lvalue.Data.map(doc => { + var page = doc.GetNumber(KeyStore.Page, -1); + if (page == curPage || page == -1) { + active.push(doc); + } + }) + } + + return active; + } + + //determines whether the blinking cursor for indicating whether a text will be made on key down is visible + @observable public PreviewCursorVisible: boolean = false; + @observable public MarqueeVisible = false; + @observable public DownX: number = 0; + @observable public DownY: number = 0; + @observable private _lastX: number = 0; + @observable private _lastY: 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.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.props.panelWidth() / 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.props.panelHeight() / 2 : 0; }// shift so pan position is at center of window for non-overlay collections + + @undoBatch + @action + 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); + const [x, y] = this.getTransform().transformPoint(screenX, screenY); + de.data.droppedDocument.SetNumber(KeyStore.X, x); + de.data.droppedDocument.SetNumber(KeyStore.Y, y); + if (!de.data.droppedDocument.GetNumber(KeyStore.Width, 0)) { + de.data.droppedDocument.SetNumber(KeyStore.Width, 300); + de.data.droppedDocument.SetNumber(KeyStore.Height, 300); + } + this.bringToFront(de.data.droppedDocument); + } + return true; + } + return false; + } + + + @action + cleanupInteractions = () => { + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + this.MarqueeVisible = false; + } + + @action + onPointerDown = (e: React.PointerEvent): void => { + this.PreviewCursorVisible = false; + if ((e.button === 2 && this.props.active() && (!this.isAnnotationOverlay || this.zoomScaling != 1)) || e.button == 0) { + 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; + } + } + + @action + onPointerUp = (e: PointerEvent): void => { + e.stopPropagation(); + + if (Math.abs(this.DownX - e.clientX) < 4 && Math.abs(this.DownY - e.clientY) < 4) { + //show preview text cursor on tap + this.PreviewCursorVisible = true; + //select is not already selected + if (!this.props.isSelected()) { + this.props.select(false); + } + } + this.cleanupInteractions(); + } + + @action + onPointerMove = (e: PointerEvent): void => { + if (!e.cancelBubble && this.props.active()) { + if (e.buttons == 1 && !e.altKey && !e.metaKey) { + this.MarqueeVisible = true; + } + if (this.MarqueeVisible) { + e.stopPropagation(); + e.preventDefault(); + } + else 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); + this.SetPan(x - dx, y - dy); + this._lastX = e.pageX; + this._lastY = e.pageY; + e.stopPropagation(); + e.preventDefault(); + } + } + } + + @action + onPointerWheel = (e: React.WheelEvent): void => { + this.props.select(false); + e.stopPropagation(); + e.preventDefault(); + let 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); + 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; + let [x, y] = transform.transformPoint(e.clientX, e.clientY); + + let localTransform = this.getLocalTransform() + localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y) + // console.log(localTransform) + + this.props.Document.SetNumber(KeyStore.Scale, localTransform.Scale); + this.SetPan(-localTransform.TranslateX / localTransform.Scale, -localTransform.TranslateY / localTransform.Scale); + } + } + + @action + private SetPan(panX: number, panY: number) { + 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)); + this.props.Document.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX); + this.props.Document.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY); + } + + @action + 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 => { + } + + @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; + } + return doc1.GetNumber(KeyStore.ZIndex, 0) - doc2.GetNumber(KeyStore.ZIndex, 0); + }).map((doc, index) => { + doc.SetNumber(KeyStore.ZIndex, index + 1) + }); + } + + @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.props.focus(this.props.Document); + } + + getDocumentViewProps(document: Document): DocumentViewProps { + return { + Document: document, + AddDocument: this.props.addDocument, + RemoveDocument: this.props.removeDocument, + ScreenToLocalTransform: this.getTransform, + isTopMost: false, + SelectOnLoad: document.Id == this._selectOnLoaded, + PanelWidth: document.Width, + PanelHeight: document.Height, + ContentScaling: this.noScaling, + ContainingCollectionView: this.props.CollectionView, + focus: this.focusDocument + } + } + + @computed + get views() { + var curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1); + const lvalue = this.props.Document.GetT>(this.props.fieldKey, ListField); + if (lvalue && lvalue != FieldWaiting) { + return lvalue.Data.map(doc => { + if (!doc) return null; + var page = doc.GetNumber(KeyStore.Page, 0); + return (page != curPage && page != 0) ? (null) : + (); + }) + } + return null; + } + + @computed + get backgroundView() { + return !this.backgroundLayout ? (null) : + ( false} select={() => { }} />); + } + @computed + get overlayView() { + return !this.overlayLayout ? (null) : + ( false} select={() => { }} />); + } + + getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).translate(-this.centeringShiftX, -this.centeringShiftY).transform(this.getLocalTransform()) + getMarqueeTransform = (): 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; + + //when focus is lost, this will remove the preview cursor + @action + onBlur = (): void => { + this.PreviewCursorVisible = false; + } + + private crosshairs?: HTMLCanvasElement; + drawCrosshairs = (backgroundColor: string) => { + if (this.crosshairs) { + let c = this.crosshairs; + let ctx = c.getContext('2d'); + if (ctx) { + ctx.fillStyle = backgroundColor; + ctx.fillRect(0, 0, 20, 20); + + ctx.fillStyle = "black"; + ctx.lineWidth = 0.5; + + ctx.beginPath(); + + ctx.moveTo(10, 0); + ctx.lineTo(10, 8); + + ctx.moveTo(10, 20); + ctx.lineTo(10, 12); + + ctx.moveTo(0, 10); + ctx.lineTo(8, 10); + + ctx.moveTo(20, 10); + ctx.lineTo(12, 10); + + ctx.stroke(); + + // ctx.font = "10px Arial"; + // ctx.fillText(CurrentUserUtils.email[0].toUpperCase(), 10, 10); + } + } + } + + render() { + let [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 panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0) + this.centeringShiftX; + // const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0) + this.centeringShiftY; + // console.log("center:", this.getLocalTransform().transformPoint(this.centeringShiftX, this.centeringShiftY)); + + return ( +
    super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY))} + onWheel={this.onPointerWheel} + onDrop={this.onDrop.bind(this)} + onDragOver={this.onDragOver} + onBlur={this.onBlur} + style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}// , zIndex: !this.props.isTopMost ? -1 : undefined }} + tabIndex={0} + ref={this.createDropTarget}> +
    + {this.backgroundView} + + + {this.views} + + {super.getCursors().map(entry => { + if (entry.Data.length > 0) { + let id = entry.Data[0][0]; + let email = entry.Data[0][1]; + let point = entry.Data[1]; + this.drawCrosshairs("#" + v5(id, v5.URL).substring(0, 6).toUpperCase() + "22") + return ( +
    + { if (el) this.crosshairs = el }} + width={20} + height={20} + style={{ + position: 'absolute', + width: "20px", + height: "20px", + opacity: 0.5, + borderRadius: "50%", + border: "2px solid black" + }} + /> +

    {email[0].toUpperCase()}

    +
    + ); + } + })} +
    + + {this.overlayView} + +
    + ); + } +} \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.scss b/src/client/views/collections/collectionFreeForm/MarqueeView.scss new file mode 100644 index 000000000..6d9a79344 --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.scss @@ -0,0 +1,8 @@ + +.marqueeView { + border-style: dashed; + box-sizing: border-box; + position: absolute; + border-width: 1px; + border-color: black; +} \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx new file mode 100644 index 000000000..2692690dd --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -0,0 +1,175 @@ +import { action, IReactionDisposer, observable, reaction } from "mobx"; +import { observer } from "mobx-react"; +import { Document } from "../../../../fields/Document"; +import { FieldWaiting, Opt } from "../../../../fields/Field"; +import { KeyStore } from "../../../../fields/KeyStore"; +import { Documents } from "../../../documents/Documents"; +import { SelectionManager } from "../../../util/SelectionManager"; +import { Transform } from "../../../util/Transform"; +import { CollectionFreeFormView } from "./CollectionFreeFormView"; +import "./MarqueeView.scss"; +import React = require("react"); +import { InkField, StrokeData } from "../../../../fields/InkField"; +import { Utils } from "../../../../Utils"; +import { InkingCanvas } from "../../InkingCanvas"; + +interface MarqueeViewProps { + getMarqueeTransform: () => Transform; + getTransform: () => Transform; + container: CollectionFreeFormView; + addDocument: (doc: Document, allowDuplicates: false) => boolean; + activeDocuments: () => Document[]; + selectDocuments: (docs: Document[]) => void; + removeDocument: (doc: Document) => boolean; +} + +@observer +export class MarqueeView extends React.Component +{ + private _reactionDisposer: Opt; + + @observable _lastX: number = 0; + @observable _lastY: number = 0; + @observable _downX: number = 0; + @observable _downY: number = 0; + + componentDidMount() { + this._reactionDisposer = reaction( + () => this.props.container.MarqueeVisible, + (visible: boolean) => this.onPointerDown(visible, this.props.container.DownX, this.props.container.DownY)) + } + componentWillUnmount() { + if (this._reactionDisposer) { + this._reactionDisposer(); + } + this.cleanupInteractions(); + } + + @action + cleanupInteractions = () => { + document.removeEventListener("pointermove", this.onPointerMove, true) + document.removeEventListener("pointerup", this.onPointerUp, true); + document.removeEventListener("keydown", this.marqueeCommand, true); + } + + @action + onPointerDown = (visible: boolean, downX: number, downY: number): void => { + if (visible) { + this._downX = this._lastX = downX; + this._downY = this._lastY = downY; + document.addEventListener("pointermove", this.onPointerMove, true) + document.addEventListener("pointerup", this.onPointerUp, true); + document.addEventListener("keydown", this.marqueeCommand, true); + } + } + + @action + onPointerMove = (e: PointerEvent): void => { + this._lastX = e.pageX; + this._lastY = e.pageY; + } + + @action + onPointerUp = (e: PointerEvent): void => { + this.cleanupInteractions(); + if (!e.shiftKey) { + SelectionManager.DeselectAll(); + } + this.props.selectDocuments(this.marqueeSelect()); + } + + intersectRect(r1: { left: number, top: number, width: number, height: number }, + r2: { left: number, top: number, width: number, height: number }) { + return !(r2.left > r1.left + r1.width || r2.left + r2.width < r1.left || r2.top > r1.top + r1.height || r2.top + r2.height < r1.top); + } + + get Bounds() { + let left = this._downX < this._lastX ? this._downX : this._lastX; + 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]) } + } + + @action + marqueeCommand = (e: KeyboardEvent) => { + if (e.key == "Backspace" || e.key == "Delete") { + this.marqueeSelect().map(d => this.props.removeDocument(d)); + this.props.container.props.Document.SetData(KeyStore.Ink, this.marqueeInkSelect(false), InkField); + this.cleanupInteractions(); + } + if (e.key == "c") { + let bounds = this.Bounds; + let selected = this.marqueeSelect().map(d => { + this.props.removeDocument(d); + 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, 0); + d.SetText(KeyStore.Title, "" + d.GetNumber(KeyStore.Width, 0) + " " + d.GetNumber(KeyStore.Height, 0)); + return d; + }); + let liftedInk = this.marqueeInkSelect(true); + this.props.container.props.Document.SetData(KeyStore.Ink, this.marqueeInkSelect(false), InkField); + //setTimeout(() => { + let newCollection = Documents.FreeformDocument(selected, { + x: bounds.left, + y: bounds.top, + panx: 0, + pany: 0, + width: bounds.width, + height: bounds.height, + backgroundColor: "Transparent", + ink: liftedInk, + title: "a nested collection" + }); + this.props.addDocument(newCollection, false); + // }, 100); + this.cleanupInteractions(); + } + } + marqueeInkSelect(select: boolean) { + let selRect = this.Bounds; + let centerShiftX = 0 - (selRect.left + selRect.width / 2); // moves each point by the offset that shifts the selection's center to the origin. + let centerShiftY = 0 - (selRect.top + selRect.height / 2); + let ink = this.props.container.props.Document.GetT(KeyStore.Ink, InkField); + if (ink && ink != FieldWaiting && ink.Data) { + let idata = new Map(); + ink.Data.forEach((value: StrokeData, key: string, map: any) => { + let inside = InkingCanvas.IntersectStrokeRect(value, selRect); + if (inside && select) { + idata.set(key, + { + pathData: value.pathData.map(val => { return { x: val.x + centerShiftX, y: val.y + centerShiftY } }), + color: value.color, + width: value.width, + tool: value.tool, + page: -1 + }); + } else if (!inside && !select) { + idata.set(key, value); + } + }) + return idata; + } + } + + marqueeSelect() { + let selRect = this.Bounds; + let selection: Document[] = []; + this.props.activeDocuments().map(doc => { + var x = doc.GetNumber(KeyStore.X, 0); + 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) + }) + return selection; + } + + render() { + let p = this.props.getMarqueeTransform().transformPoint(this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY); + let v = this.props.getMarqueeTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY); + return (!this.props.container.MarqueeVisible ? (null) :
    ); + } +} \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PreviewCursor.scss b/src/client/views/collections/collectionFreeForm/PreviewCursor.scss new file mode 100644 index 000000000..a797411f6 --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/PreviewCursor.scss @@ -0,0 +1,18 @@ + +.previewCursor { + color: black; + position: absolute; + transform-origin: left top; + pointer-events: none; +} + +//this is an animation for the blinking cursor! +@keyframes blink { + 0% {opacity: 0} + 49%{opacity: 0} + 50% {opacity: 1} +} + +#previewCursor { + animation: blink 1s infinite; +} \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx b/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx new file mode 100644 index 000000000..95364f04b --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx @@ -0,0 +1,76 @@ +import { action, IReactionDisposer, observable, reaction } from "mobx"; +import { observer } from "mobx-react"; +import { Document } from "../../../../fields/Document"; +import { Opt } from "../../../../fields/Field"; +import { Documents } from "../../../documents/Documents"; +import { Transform } from "../../../util/Transform"; +import { CollectionFreeFormView } from "./CollectionFreeFormView"; +import "./PreviewCursor.scss"; +import React = require("react"); + + +export interface PreviewCursorProps { + getTransform: () => Transform; + container: CollectionFreeFormView; + addLiveTextDocument: (doc: Document) => void; +} + +@observer +export class PreviewCursor extends React.Component { + private _reactionDisposer: Opt; + + @observable _lastX: number = 0; + @observable _lastY: number = 0; + + componentDidMount() { + this._reactionDisposer = reaction( + () => this.props.container.PreviewCursorVisible, + (visible: boolean) => this.onCursorPlaced(visible, this.props.container.DownX, this.props.container.DownY)) + } + componentWillUnmount() { + if (this._reactionDisposer) { + this._reactionDisposer(); + } + this.cleanupInteractions(); + } + + + @action + cleanupInteractions = () => { + document.removeEventListener("keypress", this.onKeyPress, false); + } + + @action + onCursorPlaced = (visible: boolean, downX: number, downY: number): void => { + if (visible) { + document.addEventListener("keypress", this.onKeyPress, false); + this._lastX = downX; + this._lastY = downY; + } else + this.cleanupInteractions(); + } + + @action + onKeyPress = (e: KeyboardEvent) => { + // Mixing events between React and Native is finicky. In FormattedTextBox, we set the + // DASHFormattedTextBoxHandled flag when a text box consumes a key press so that we can ignore + // the keyPress here. + //if not these keys, make a textbox if preview cursor is active! + if (!e.ctrlKey && !e.altKey && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) { + //make textbox and add it to this collection + let [x, y] = this.props.getTransform().transformPoint(this._lastX, this._lastY); + let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "typed text" }); + this.props.addLiveTextDocument(newBox); + e.stopPropagation(); + } + } + + render() { + //get local position and place cursor there! + let [x, y] = this.props.getTransform().transformPoint(this._lastX, this._lastY); + return ( + !this.props.container.PreviewCursorVisible ? (null) : +
    I
    ) + + } +} \ No newline at end of file diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index f48be2047..b54744337 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -5,7 +5,7 @@ import { Key } from "../../../fields/Key"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; import { CollectionDockingView } from "../collections/CollectionDockingView"; -import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"; +import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView"; import { CollectionPDFView } from "../collections/CollectionPDFView"; import { CollectionSchemaView } from "../collections/CollectionSchemaView"; import { CollectionVideoView } from "../collections/CollectionVideoView"; -- cgit v1.2.3-70-g09d2 From 8448679e0a260ec881c54a10578bc464cd38f04e Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 1 Apr 2019 17:05:42 -0400 Subject: added dragging multiple items. --- src/client/northstar/dash-nodes/HistogramBox.tsx | 4 +- src/client/util/DragManager.ts | 168 +++++++++++---------- src/client/views/DocumentDecorations.scss | 6 + src/client/views/DocumentDecorations.tsx | 109 +++++++++---- src/client/views/Main.tsx | 7 +- .../views/collections/CollectionDockingView.tsx | 11 +- src/client/views/collections/CollectionView.tsx | 2 +- .../views/collections/CollectionViewBase.tsx | 4 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 21 ++- src/client/views/nodes/DocumentView.tsx | 15 +- 10 files changed, 213 insertions(+), 134 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx index a968def96..49ebe5ebc 100644 --- a/src/client/northstar/dash-nodes/HistogramBox.tsx +++ b/src/client/northstar/dash-nodes/HistogramBox.tsx @@ -54,7 +54,7 @@ export class HistogramBox extends React.Component { @action dropX = (e: Event, de: DragManager.DropEvent) => { if (de.data instanceof DragManager.DocumentDragData) { - let h = de.data.draggedDocument.GetT(KeyStore.Data, HistogramField); + let h = de.data.draggedDocuments[0].GetT(KeyStore.Data, HistogramField); if (h && h != FieldWaiting) { this.HistoOp.X = h.Data.X; } @@ -65,7 +65,7 @@ export class HistogramBox extends React.Component { @action dropY = (e: Event, de: DragManager.DropEvent) => { if (de.data instanceof DragManager.DocumentDragData) { - let h = de.data.draggedDocument.GetT(KeyStore.Data, HistogramField); + let h = de.data.draggedDocuments[0].GetT(KeyStore.Data, HistogramField); if (h && h != FieldWaiting) { this.HistoOp.Y = h.Data.X; } diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 70b1c9829..9ffe964ef 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -14,9 +14,9 @@ export function setupDrag(_reference: React.RefObject, docFunc: document.removeEventListener("pointermove", onRowMove); document.removeEventListener('pointerup', onRowUp); - var dragData = new DragManager.DocumentDragData(docFunc()); + var dragData = new DragManager.DocumentDragData([docFunc()]); dragData.removeDocument = removeFunc; - DragManager.StartDocumentDrag(_reference.current!, dragData); + DragManager.StartDocumentDrag([_reference.current!], dragData); }); let onRowUp = action((e: PointerEvent): void => { document.removeEventListener("pointermove", onRowMove); @@ -27,7 +27,7 @@ export function setupDrag(_reference: React.RefObject, docFunc: if (e.button == 0) { e.stopPropagation(); if (e.shiftKey) { - CollectionDockingView.Instance.StartOtherDrag(docFunc(), e); + CollectionDockingView.Instance.StartOtherDrag([docFunc()], e); } else { document.addEventListener("pointermove", onRowMove); document.addEventListener('pointerup', onRowUp); @@ -101,20 +101,21 @@ export namespace DragManager { } export class DocumentDragData { - constructor(dragDoc: Document) { - this.draggedDocument = dragDoc; - this.droppedDocument = dragDoc; + constructor(dragDoc: Document[]) { + this.draggedDocuments = dragDoc; + this.droppedDocuments = dragDoc; } - draggedDocument: Document; - droppedDocument: Document; + draggedDocuments: Document[]; + droppedDocuments: Document[]; xOffset?: number; yOffset?: number; aliasOnDrop?: boolean; removeDocument?: (collectionDrop: CollectionView) => void; [id: string]: any; } - export function StartDocumentDrag(ele: HTMLElement, dragData: DocumentDragData, options?: DragOptions) { - StartDrag(ele, dragData, options, (dropData: { [id: string]: any }) => dropData.droppedDocument = dragData.aliasOnDrop ? dragData.draggedDocument.CreateAlias() : dragData.draggedDocument); + + 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 { @@ -125,49 +126,58 @@ export namespace DragManager { [id: string]: any; } export function StartLinkDrag(ele: HTMLElement, dragData: LinkDragData, options?: DragOptions) { - StartDrag(ele, dragData, options); + StartDrag([ele], dragData, options); } - function StartDrag(ele: HTMLElement, dragData: { [id: string]: any }, options?: DragOptions, finishDrag?: (dropData: { [id: string]: any }) => void) { + 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); } - 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; - // const offsetX = e.x - rect.left, offsetY = e.y - rect.top; - - 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`; - - // 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 - const doc: Document = dragData["draggedDocument"]; - if (doc) { - var pdfBox = dragElement.getElementsByClassName("pdfBox-cont")[0] as HTMLElement; - let thumbnail = doc.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]) + + 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`; + + // 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); + dragDiv.appendChild(dragElement); + return dragElement; + }); let hideSource = false; if (options) { @@ -177,62 +187,64 @@ export namespace DragManager { hideSource = options.hideSource(); } } - const wasHidden = ele.hidden; - if (hideSource) { - ele.hidden = true; - } + eles.map(ele => ele.hidden = hideSource); + const moveHandler = (e: PointerEvent) => { e.stopPropagation(); e.preventDefault(); - x += e.movementX; - y += e.movementY; if (dragData instanceof DocumentDragData) dragData.aliasOnDrop = e.ctrlKey || e.altKey; if (e.shiftKey) { abortDrag(); - CollectionDockingView.Instance.StartOtherDrag(doc, { pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: 0 }); + CollectionDockingView.Instance.StartOtherDrag(docs, { pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: 0 }); } - dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`; + 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); - dragDiv.removeChild(dragElement); - ele.hidden = false; + dragElements.map(dragElement => dragDiv.removeChild(dragElement)); + eles.map(ele => ele.hidden = false); } const upHandler = (e: PointerEvent) => { abortDrag(); - FinishDrag(ele, e, dragData, options, finishDrag); + FinishDrag(eles, e, dragData, options, finishDrag); }; document.addEventListener("pointermove", moveHandler, true); document.addEventListener("pointerup", upHandler); } - function FinishDrag(dragEle: HTMLElement, e: PointerEvent, dragData: { [index: string]: any }, options?: DragOptions, finishDrag?: (dragData: { [index: string]: any }) => void) { - let parent = dragEle.parentElement; - if (parent) - parent.removeChild(dragEle); + 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); - if (parent) - parent.appendChild(dragEle); - if (!target) { - return; - } - if (finishDrag) - finishDrag(dragData); - - target.dispatchEvent(new CustomEvent("dashOnDrop", { - bubbles: true, - detail: { - x: e.x, - y: e.y, - data: dragData + 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 + } + })); + + if (options) { + options.handlers.dragComplete({}); } - })); - - if (options) { - options.handlers.dragComplete({}); } DocumentDecorations.Instance.Hidden = false; } diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 11595aa01..7a43f3087 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -32,6 +32,12 @@ } } +.documentDecorations-background { + background:lightblue; + position: absolute; + opacity: 0.1; +} + // position: absolute; // display: grid; // z-index: 1000; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 47098c3b5..faba3b6ea 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,14 +1,14 @@ -import { observable, computed, action } from "mobx"; -import React = require("react"); -import { SelectionManager } from "../util/SelectionManager"; +import { action, computed, observable, trace } from "mobx"; import { observer } from "mobx-react"; -import './DocumentDecorations.scss' -import { KeyStore } from '../../fields/KeyStore' +import { KeyStore } from '../../fields/KeyStore'; +import { ListField } from "../../fields/ListField"; import { NumberField } from "../../fields/NumberField"; -import { props } from "bluebird"; import { DragManager } from "../util/DragManager"; +import { SelectionManager } from "../util/SelectionManager"; +import { CollectionView } from "./collections/CollectionView"; +import './DocumentDecorations.scss'; import { LinkMenu } from "./nodes/LinkMenu"; -import { ListField } from "../../fields/ListField"; +import React = require("react"); const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -22,6 +22,7 @@ export class DocumentDecorations extends React.Component { private _resizeBorderWidth = 16; private _linkButton = React.createRef(); @observable private _hidden = false; + @observable private _dragging = false; constructor(props: Readonly<{}>) { super(props) @@ -50,6 +51,50 @@ export class DocumentDecorations extends React.Component { public get Hidden() { return this._hidden; } public set Hidden(value: boolean) { this._hidden = value; } + _lastDrag: number[] = [0, 0]; + onBackgroundDown = (e: React.PointerEvent): void => { + document.removeEventListener("pointermove", this.onBackgroundMove); + document.addEventListener("pointermove", this.onBackgroundMove); + document.removeEventListener("pointerup", this.onBackgroundUp); + document.addEventListener("pointerup", this.onBackgroundUp); + this._lastDrag = [e.clientX, e.clientY] + e.stopPropagation(); + e.preventDefault(); + } + + @action + onBackgroundMove = (e: PointerEvent): void => { + let dragDocView = SelectionManager.SelectedDocuments()[0]; + const [left, top] = dragDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + let dragData = new DragManager.DocumentDragData(SelectionManager.SelectedDocuments().map(dv => dv.props.Document)); + dragData.aliasOnDrop = false; + dragData.xOffset = e.x - left; + dragData.yOffset = e.y - top; + dragData.removeDocument = (dropCollectionView: CollectionView) => + dragData.draggedDocuments.map(d => { + if (dragDocView.props.RemoveDocument && dragDocView.props.ContainingCollectionView !== dropCollectionView) { + dragDocView.props.RemoveDocument(d); + } + }); + 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, { + handlers: { + dragComplete: action(() => this._dragging = false), + }, + hideSource: true + }) + e.stopPropagation(); + } + + onBackgroundUp = (e: PointerEvent): void => { + document.removeEventListener("pointermove", this.onBackgroundMove); + document.removeEventListener("pointerup", this.onBackgroundUp); + e.stopPropagation(); + e.preventDefault(); + } + onPointerDown = (e: React.PointerEvent): void => { e.stopPropagation(); if (e.button === 0) { @@ -191,7 +236,6 @@ export class DocumentDecorations extends React.Component { // buttonOnPointerUp = (e: React.PointerEvent): void => { // e.stopPropagation(); // } - render() { var bounds = this.Bounds; if (this.Hidden) { @@ -218,25 +262,36 @@ export class DocumentDecorations extends React.Component { ); } return ( -
    -
    e.preventDefault()}>
    -
    e.preventDefault()}>
    -
    e.preventDefault()}>
    -
    e.preventDefault()}>
    -
    -
    e.preventDefault()}>
    -
    e.preventDefault()}>
    -
    e.preventDefault()}>
    -
    e.preventDefault()}>
    - -
    {linkButton}
    - -
    +
    +
    1 ? 1000 : 0, + }} onPointerDown={this.onBackgroundDown} onContextMenu={(e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation() }} > +
    +
    +
    e.preventDefault()}>
    +
    e.preventDefault()}>
    +
    e.preventDefault()}>
    +
    e.preventDefault()}>
    +
    +
    e.preventDefault()}>
    +
    e.preventDefault()}>
    +
    e.preventDefault()}>
    +
    e.preventDefault()}>
    + +
    {linkButton}
    + +
    +
    ) } } \ No newline at end of file diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 75855c3d1..6f66f8f38 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -218,7 +218,8 @@ export class Main extends React.Component { focusDocument = (doc: Document) => { } noScaling = () => 1; - get content() { + @computed + get mainContent() { return !this.mainContainer ? (null) : + runInAction(() => { this.pwidth = r.entry.width; this.pheight = r.entry.height; })}> {({ measureRef }) =>
    - {this.content} + {this.mainContent}
    }     - {this.nodesMenu} {this.miscButtons} diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index f123149dd..c6cbc05e7 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -47,9 +47,10 @@ export class CollectionDockingView extends React.Component { }, button: 0 }) + public StartOtherDrag(dragDocs: Document[], e: any) { + dragDocs.map(dragDoc => + this.AddRightSplit(dragDoc, true).contentItems[0].tab._dragListener. + onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: 0 })); } @action @@ -199,7 +200,7 @@ export class CollectionDockingView extends React.Component) => { if (f instanceof Document) - DragManager.StartDocumentDrag(tab, new DragManager.DocumentDragData(f as Document), + DragManager.StartDocumentDrag([tab], new DragManager.DocumentDragData([f as Document]), { handlers: { dragComplete: action(() => { }), @@ -265,6 +266,7 @@ export class CollectionDockingView extends React.Component { } render() { + trace(); if (!this._document) return (null); var content = diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index a1498e0ae..014aa1d8f 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -113,7 +113,7 @@ export class CollectionView extends React.Component { if (index !== -1) { value.splice(index, 1) - SelectionManager.DeselectAll() + //SelectionManager.DeselectAll() ContextMenu.Instance.clearItems() return true; } diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 987f3cb6c..316d20c9d 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -82,9 +82,9 @@ export class CollectionViewBase extends React.Component if (de.data instanceof DragManager.DocumentDragData) { if (de.data.aliasOnDrop) { [KeyStore.Width, KeyStore.Height, KeyStore.CurPage].map(key => - de.data.draggedDocument.GetTAsync(key, NumberField, (f: Opt) => f ? de.data.droppedDocument.SetNumber(key, f.Data) : null)); + de.data.draggedDocuments.GetTAsync(key, NumberField, (f: Opt) => f ? de.data.droppedDocument.SetNumber(key, f.Data) : null)); } - let added = this.props.addDocument(de.data.droppedDocument, false); + let added = de.data.droppedDocuments.reduce((added, d) => this.props.addDocument(d, false), true); if (added && de.data.removeDocument && !de.data.aliasOnDrop) { de.data.removeDocument(this.props.CollectionView); } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 60fb95ff5..c5178f69d 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -77,13 +77,20 @@ export class CollectionFreeFormView extends CollectionViewBase { let screenX = de.x - (de.data.xOffset as number || 0); let screenY = de.y - (de.data.yOffset as number || 0); const [x, y] = this.getTransform().transformPoint(screenX, screenY); - de.data.droppedDocument.SetNumber(KeyStore.X, x); - de.data.droppedDocument.SetNumber(KeyStore.Y, y); - if (!de.data.droppedDocument.GetNumber(KeyStore.Width, 0)) { - de.data.droppedDocument.SetNumber(KeyStore.Width, 300); - de.data.droppedDocument.SetNumber(KeyStore.Height, 300); - } - this.bringToFront(de.data.droppedDocument); + let dragDoc = de.data.draggedDocuments[0]; + let dragX = dragDoc.GetNumber(KeyStore.X, 0); + let dragY = dragDoc.GetNumber(KeyStore.Y, 0); + de.data.draggedDocuments.map(d => { + let docX = d.GetNumber(KeyStore.X, 0); + let docY = d.GetNumber(KeyStore.Y, 0); + d.SetNumber(KeyStore.X, x + (docX - dragX)); + d.SetNumber(KeyStore.Y, y + (docY - dragY)); + if (!d.GetNumber(KeyStore.Width, 0)) { + d.SetNumber(KeyStore.Width, 300); + d.SetNumber(KeyStore.Height, 300); + } + this.bringToFront(d); + }) } return true; } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 71613ca4f..1195128dc 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -106,7 +106,7 @@ export class DocumentView extends React.Component { if (this.props.isTopMost) { this.startDragging(e.pageX, e.pageY, e.altKey || e.ctrlKey); } - else CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e); + else CollectionDockingView.Instance.StartOtherDrag([this.props.Document], e); e.stopPropagation(); } else { if (this.active && !e.isDefaultPrevented()) { @@ -125,9 +125,7 @@ export class DocumentView extends React.Component { if (this._mainCont.current) { this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, { handlers: { drop: this.drop.bind(this) } }); } - runInAction(() => { - DocumentManager.Instance.DocumentViews.push(this); - }) + runInAction(() => DocumentManager.Instance.DocumentViews.push(this)) this._reactionDisposer = reaction( () => this.props.ContainingCollectionView && this.props.ContainingCollectionView.SelectedDocs.slice(), () => { @@ -149,10 +147,7 @@ export class DocumentView extends React.Component { if (this.dropDisposer) { this.dropDisposer(); } - runInAction(() => { - DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1); - - }) + runInAction(() => DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1)) if (this._reactionDisposer) { this._reactionDisposer(); } @@ -161,7 +156,7 @@ 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); - let dragData = new DragManager.DocumentDragData(this.props.Document); + let dragData = new DragManager.DocumentDragData([this.props.Document]); dragData.aliasOnDrop = dropAliasOfDraggedDoc; dragData.xOffset = x - left; dragData.yOffset = y - top; @@ -170,7 +165,7 @@ export class DocumentView extends React.Component { this.props.RemoveDocument(this.props.Document); } } - DragManager.StartDocumentDrag(this._mainCont.current, dragData, { + DragManager.StartDocumentDrag([this._mainCont.current], dragData, { handlers: { dragComplete: action(() => { }), }, -- cgit v1.2.3-70-g09d2 From 1cdb04707301bc51b3ed6dd1c15c79a7b989b7f7 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Mon, 1 Apr 2019 19:54:05 -0400 Subject: Started refactoring props and collections --- src/client/views/Main.tsx | 2 +- .../views/collections/CollectionDockingView.tsx | 2 +- src/client/views/collections/CollectionPDFView.tsx | 17 ++++++------ .../views/collections/CollectionSchemaView.tsx | 13 +++++----- .../views/collections/CollectionVideoView.tsx | 7 ++--- src/client/views/collections/CollectionView.tsx | 15 ++++++----- .../views/collections/CollectionViewBase.tsx | 9 ++----- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/AudioBox.tsx | 2 +- src/client/views/nodes/DocumentContentsView.tsx | 23 ++++++++++++++--- src/client/views/nodes/DocumentView.tsx | 11 +------- src/client/views/nodes/FieldView.tsx | 11 ++++---- src/client/views/nodes/FormattedTextBox.tsx | 10 ++++---- src/client/views/nodes/ImageBox.tsx | 8 +++--- src/client/views/nodes/KeyValueBox.tsx | 4 +-- src/client/views/nodes/KeyValuePair.tsx | 13 +++++----- src/client/views/nodes/PDFBox.tsx | 30 +++++++++++----------- src/client/views/nodes/VideoBox.tsx | 12 ++++----- src/client/views/nodes/WebBox.tsx | 4 +-- 19 files changed, 98 insertions(+), 97 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 75855c3d1..82fd1e7c9 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -228,7 +228,7 @@ export class Main extends React.Component { PanelWidth={this.pwidthFunc} PanelHeight={this.pheightFunc} isTopMost={true} - SelectOnLoad={false} + selectOnLoad={false} focus={this.focusDocument} ContainingCollectionView={undefined} /> } diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index f123149dd..c67354139 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -317,7 +317,7 @@ export class DockedFrameRenderer extends React.Component { PanelHeight={this._nativeHeight} ScreenToLocalTransform={this.ScreenToLocalTransform} isTopMost={true} - SelectOnLoad={false} + selectOnLoad={false} focus={(doc: Document) => { }} ContainingCollectionView={undefined} />
    diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index 4d2daf149..6bb3bacc7 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -8,6 +8,7 @@ import { CollectionViewProps } from "./CollectionViewBase"; import "./CollectionPDFView.scss" import React = require("react"); import { FieldId } from "../../../fields/Field"; +import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView"; @observer @@ -30,7 +31,8 @@ export class CollectionPDFView extends React.Component {
    -
    ); +
    + ); } // "inherited" CollectionView API starts here... @@ -47,13 +49,12 @@ export class CollectionPDFView extends React.Component { } } - get collectionViewType(): CollectionViewType { return CollectionViewType.Freeform; } - get subView(): any { return CollectionView.SubView(this); } - render() { - return (
    - {this.subView} - {this.props.isSelected() ? this.uIButtons : (null)} -
    ) + return ( +
    + + {this.props.isSelected() ? this.uIButtons : (null)} +
    + ) } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 0ff6c3b40..0c7e28691 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -73,19 +73,18 @@ export class CollectionSchemaView extends CollectionViewBase { renderCell = (rowProps: CellInfo) => { let props: FieldViewProps = { - doc: rowProps.value[0], + Document: rowProps.value[0], fieldKey: rowProps.value[1], isSelected: () => false, select: () => { }, isTopMost: false, - bindings: {}, selectOnLoad: false, } let contents = ( ) let reference = React.createRef(); - let onItemDown = setupDrag(reference, () => props.doc, (containingCollection: CollectionView) => this.props.removeDocument(props.doc)); + let onItemDown = setupDrag(reference, () => props.Document, (containingCollection: CollectionView) => this.props.removeDocument(props.Document)); let applyToDoc = (doc: Document, value: string) => { let script = CompileScript(value, { this: doc }, true); if (!script.compiled) { @@ -105,20 +104,20 @@ export class CollectionSchemaView extends CollectionViewBase { return false; } return ( -
    +
    { - let field = props.doc.Get(props.fieldKey); + let field = props.Document.Get(props.fieldKey); if (field && field instanceof Field) { return field.ToScriptString(); } return field || ""; }} SetValue={(value: string) => { - return applyToDoc(props.doc, value); + return applyToDoc(props.Document, value); }} OnFillDown={(value: string) => { this.props.Document.GetTAsync>(this.props.fieldKey, ListField).then((val) => { @@ -298,7 +297,7 @@ export class CollectionSchemaView extends CollectionViewBase { {doc instanceof Document ? { } } - get collectionViewType(): CollectionViewType { return CollectionViewType.Freeform; } - get subView(): any { return CollectionView.SubView(this); } - - render() { trace(); return (
    - {this.subView} + {this.props.isSelected() ? this.uIButtons : (null)}
    ) } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index a1498e0ae..e6351618c 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -10,7 +10,7 @@ import { NumberField } from "../../../fields/NumberField"; import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView"; import { CollectionDockingView } from "./CollectionDockingView"; import { CollectionSchemaView } from "./CollectionSchemaView"; -import { CollectionViewProps } from "./CollectionViewBase"; +import { CollectionViewProps, SubCollectionViewProps } from "./CollectionViewBase"; import { CollectionTreeView } from "./CollectionTreeView"; import { Field, FieldId, FieldWaiting } from "../../../fields/Field"; import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils"; @@ -39,7 +39,6 @@ export class CollectionView extends React.Component { public active: () => boolean = () => CollectionView.Active(this); addDocument = (doc: Document, allowDuplicates: boolean): boolean => { return CollectionView.AddDocument(this.props, doc, allowDuplicates); } removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); } - get subView() { return CollectionView.SubView(this); } public static Active(self: CollectionView): boolean { var isSelected = self.props.isSelected(); @@ -140,9 +139,13 @@ export class CollectionView extends React.Component { } } - public static SubView(self: CollectionView) { - let subProps = { ...self.props, addDocument: self.addDocument, removeDocument: self.removeDocument, active: self.active, CollectionView: self } - switch (self.collectionViewType) { + public static SubViewProps(self: CollectionView): SubCollectionViewProps { + return { ...self.props, addDocument: self.addDocument, removeDocument: self.removeDocument, active: self.active, CollectionView: self } + } + + private get SubView() { + let subProps = CollectionView.SubViewProps(this); + switch (this.collectionViewType) { case CollectionViewType.Freeform: return () case CollectionViewType.Schema: return () case CollectionViewType.Docking: return () @@ -153,7 +156,7 @@ export class CollectionView extends React.Component { render() { return (
    - {this.subView} + {this.SubView}
    ) } } diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 987f3cb6c..c5a6c53b3 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -17,15 +17,10 @@ import { NumberField } from "../../../fields/NumberField"; import request = require("request"); import { ServerUtils } from "../../../server/ServerUtil"; import { Server } from "../../Server"; +import { FieldViewProps } from "../nodes/FieldView"; -export interface CollectionViewProps { - fieldKey: Key; - Document: Document; +export interface CollectionViewProps extends FieldViewProps { ScreenToLocalTransform: () => Transform; - isSelected: () => boolean; - isTopMost: boolean; - select: (ctrlPressed: boolean) => void; - bindings: any; panelWidth: () => number; panelHeight: () => number; focus: (doc: Document) => void; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 60fb95ff5..51ab85b71 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -231,7 +231,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, diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 6daf15f5f..0ce991485 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -28,7 +28,7 @@ export class AudioBox extends React.Component { render() { - let field = this.props.doc.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"; diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 77551649c..a5e4b1a17 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -1,6 +1,6 @@ import { computed } from "mobx"; import { observer } from "mobx-react"; -import { FieldWaiting } from "../../../fields/Field"; +import { FieldWaiting, Field } from "../../../fields/Field"; import { Key } from "../../../fields/Key"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; @@ -11,7 +11,7 @@ import { CollectionSchemaView } from "../collections/CollectionSchemaView"; import { CollectionVideoView } from "../collections/CollectionVideoView"; import { CollectionView } from "../collections/CollectionView"; import { AudioBox } from "./AudioBox"; -import { DocumentViewProps, JsxBindings } from "./DocumentView"; +import { DocumentViewProps } from "./DocumentView"; import "./DocumentView.scss"; import { FormattedTextBox } from "./FormattedTextBox"; import { ImageBox } from "./ImageBox"; @@ -21,8 +21,16 @@ import { VideoBox } from "./VideoBox"; import { WebBox } from "./WebBox"; import { HistogramBox } from "../../northstar/dash-nodes/HistogramBox"; import React = require("react"); +import { Document } from "../../../fields/Document"; +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 +export interface JsxBindings { + props: BindingProps; + [keyName: string]: BindingProps | Field; +} @observer export class DocumentContentsView extends React.ComponentKey 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 71613ca4f..6530dafc6 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -32,7 +32,7 @@ export interface DocumentViewProps { PanelWidth: () => number; PanelHeight: () => number; focus: (doc: Document) => void; - SelectOnLoad: boolean; + selectOnLoad: boolean; } export interface JsxArgs extends DocumentViewProps { Keys: { [name: string]: Key } @@ -76,15 +76,6 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs { return args; } -export interface JsxBindings { - Document: Document; - isSelected: () => boolean; - select: (isCtrlPressed: boolean) => void; - isTopMost: boolean; - SelectOnLoad: boolean; - [prop: string]: any; -} - @observer diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 4e83ec7b9..43688989b 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -28,23 +28,22 @@ import { KeyStore } from "../../../fields/KeyStore"; // export interface FieldViewProps { fieldKey: Key; - doc: Document; + Document: Document; isSelected: () => boolean; - select: () => void; + select: (isCtrlPressed: boolean) => void; isTopMost: boolean; selectOnLoad: boolean; - bindings: any; } @observer export class FieldView extends React.Component { public static LayoutString(fieldType: { name: string }, fieldStr: string = "DataKey") { - return `<${fieldType.name} doc={Document} DocumentViewForField={DocumentView} bindings={bindings} fieldKey={${fieldStr}} isSelected={isSelected} select={select} selectOnLoad={SelectOnLoad} isTopMost={isTopMost} />`; + return `<${fieldType.name} {...props} fieldKey={${fieldStr}} />`; } @computed get field(): FieldValue { - const { doc, fieldKey } = this.props; + const { Document: doc, fieldKey } = this.props; return doc.Get(fieldKey); } render() { @@ -76,7 +75,7 @@ export class FieldView extends React.Component { PanelWidth={() => 100} PanelHeight={() => 100} isTopMost={true} - SelectOnLoad={false} + selectOnLoad={false} focus={() => { }} isSelected={() => false} select={() => false} diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 512ad7d70..99ba9addc 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -55,7 +55,7 @@ export class FormattedTextBox extends React.Component { if (this._editorView) { const state = this._editorView.state.apply(tx); this._editorView.updateState(state); - const { doc, fieldKey } = this.props; + const { Document: doc, fieldKey } = this.props; doc.SetDataOnPrototype(fieldKey, JSON.stringify(state.toJSON()), RichTextField); // doc.SetData(fieldKey, JSON.stringify(state.toJSON()), RichTextField); } @@ -74,7 +74,7 @@ export class FormattedTextBox extends React.Component { ] }; - let field = this.props.doc.GetT(this.props.fieldKey, RichTextField); + let field = this.props.Document.GetT(this.props.fieldKey, RichTextField); if (field && field != FieldWaiting && field.Data) { state = EditorState.fromJSON(config, JSON.parse(field.Data)); } else { @@ -88,7 +88,7 @@ export class FormattedTextBox extends React.Component { } this._reactionDisposer = reaction(() => { - const field = this.props.doc.GetT(this.props.fieldKey, RichTextField); + const field = this.props.Document.GetT(this.props.fieldKey, RichTextField); return field && field != FieldWaiting ? field.Data : undefined; }, (field) => { if (field && this._editorView) { @@ -96,7 +96,7 @@ export class FormattedTextBox extends React.Component { } }) if (this.props.selectOnLoad) { - this.props.select(); + this.props.select(false); this._editorView!.focus(); } } @@ -116,7 +116,7 @@ export class FormattedTextBox extends React.Component { @action onChange(e: React.ChangeEvent) { - const { fieldKey, doc } = this.props; + const { fieldKey, Document: doc } = this.props; doc.SetOnPrototype(fieldKey, new RichTextField(e.target.value)) // doc.SetData(fieldKey, e.target.value, RichTextField); } diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 60d1f7214..9b9dfe645 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -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.doc.SetNumber(KeyStore.NativeHeight, this.props.doc.GetNumber(KeyStore.NativeWidth, 0) * h / w) + this.props.Document.SetNumber(KeyStore.NativeHeight, this.props.Document.GetNumber(KeyStore.NativeWidth, 0) * h / w) } componentDidMount() { @@ -91,7 +91,7 @@ export class ImageBox extends React.Component { } specificContextMenu = (e: React.MouseEvent): void => { - let field = this.props.doc.GetT(this.props.fieldKey, ImageField); + let field = this.props.Document.GetT(this.props.fieldKey, ImageField); if (field && field !== FieldWaiting) { let url = field.Data.href; ContextMenu.Instance.addItem({ @@ -103,10 +103,10 @@ export class ImageBox extends React.Component { } render() { - let field = this.props.doc.Get(this.props.fieldKey); + let field = this.props.Document.Get(this.props.fieldKey); 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.doc.GetNumber(KeyStore.NativeWidth, 1); + let nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 1); return (
    Image not found diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index 283c1f732..a3478143d 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -34,7 +34,7 @@ export class KeyValueBox extends React.Component { onEnterKey = (e: React.KeyboardEvent): void => { if (e.key == 'Enter') { if (this._keyInput && this._valueInput) { - let doc = this.props.doc.GetT(KeyStore.Data, Document); + let doc = this.props.Document.GetT(KeyStore.Data, Document); if (!doc || doc == FieldWaiting) { return } @@ -69,7 +69,7 @@ export class KeyValueBox extends React.Component { } createTable = () => { - let doc = this.props.doc.GetT(KeyStore.Data, Document); + let doc = this.props.Document.GetT(KeyStore.Data, Document); if (!doc || doc == FieldWaiting) { return Loading... } diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index 7ed5ee272..2fc11328f 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -43,12 +43,11 @@ export class KeyValuePair extends React.Component { } let props: FieldViewProps = { - doc: this.props.doc, + Document: this.props.doc, fieldKey: this.key, isSelected: () => false, select: () => { }, isTopMost: false, - bindings: {}, selectOnLoad: false, } let contents = ( @@ -61,15 +60,15 @@ export class KeyValuePair extends React.Component {
    {this.key.Name}
    { - let field = props.doc.Get(props.fieldKey); + let field = props.Document.Get(props.fieldKey); if (field && field instanceof Field) { return field.ToScriptString(); } @@ -82,12 +81,12 @@ export class KeyValuePair extends React.Component { } let field = script(); if (field instanceof Field) { - props.doc.Set(props.fieldKey, field); + props.Document.Set(props.fieldKey, field); return true; } else { let dataField = ToField(field); if (dataField) { - props.doc.Set(props.fieldKey, dataField); + props.Document.Set(props.fieldKey, dataField); return true; } } diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 28a1f9757..3b5e3a570 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -87,8 +87,8 @@ export class PDFBox 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 thumbnailPage() { return this.props.doc.GetNumber(KeyStore.ThumbnailPage, -1); } + @computed private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, 1); } + @computed private get thumbnailPage() { return this.props.Document.GetNumber(KeyStore.ThumbnailPage, -1); } componentDidMount() { this._reactionDisposer = reaction( @@ -379,10 +379,10 @@ export class PDFBox extends React.Component { setTimeout(() => { var me = this; htmlToImage.toPng(this._mainDiv.current!, - { width: me.props.doc.GetNumber(KeyStore.NativeWidth, 0), height: me.props.doc.GetNumber(KeyStore.NativeHeight, 0), quality: 0.5 }) + { width: me.props.Document.GetNumber(KeyStore.NativeWidth, 0), height: me.props.Document.GetNumber(KeyStore.NativeHeight, 0), quality: 0.5 }) .then(function (dataUrl: string) { - me.props.doc.SetData(KeyStore.Thumbnail, new URL(dataUrl), ImageField); - me.props.doc.SetNumber(KeyStore.ThumbnailPage, me.props.doc.GetNumber(KeyStore.CurPage, -1)); + me.props.Document.SetData(KeyStore.Thumbnail, new URL(dataUrl), ImageField); + me.props.Document.SetNumber(KeyStore.ThumbnailPage, me.props.Document.GetNumber(KeyStore.CurPage, -1)); }) .catch(function (error: any) { console.error('oops, something went wrong!', error); @@ -409,7 +409,7 @@ export class PDFBox extends React.Component { } // bcz: the number of pages should really be set when the document is imported. - this.props.doc.SetNumber(KeyStore.NumPages, page._transport.numPages); + 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)] } @@ -421,13 +421,13 @@ export class PDFBox 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.doc.GetNumber(KeyStore.NativeWidth, 0); - if (!this.props.doc.GetNumber(KeyStore.NativeHeight, 0)) { + var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); + if (!this.props.Document.GetNumber(KeyStore.NativeHeight, 0)) { var nativeHeight = nativeWidth * r.entry.height / r.entry.width; - this.props.doc.SetNumber(KeyStore.Height, nativeHeight / nativeWidth * this.props.doc.GetNumber(KeyStore.Width, 0)); - this.props.doc.SetNumber(KeyStore.NativeHeight, nativeHeight); + this.props.Document.SetNumber(KeyStore.Height, nativeHeight / nativeWidth * this.props.Document.GetNumber(KeyStore.Width, 0)); + this.props.Document.SetNumber(KeyStore.NativeHeight, nativeHeight); } - if (!this.props.doc.GetT(KeyStore.Thumbnail, ImageField)) { + if (!this.props.Document.GetT(KeyStore.Thumbnail, ImageField)) { this.saveThumbnail(); } } @@ -436,8 +436,8 @@ export class PDFBox extends React.Component { get pdfContent() { let page = this.curPage; const renderHeight = 2400; - let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField); - let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight; + let pdfUrl = this.props.Document.GetT(this.props.fieldKey, PDFField); + let xf = this.props.Document.GetNumber(KeyStore.NativeHeight, 0) / renderHeight; return
    @@ -454,7 +454,7 @@ export class PDFBox extends React.Component { @computed get pdfRenderer() { let proxy = this._loaded ? (null) : this.imageProxyRenderer; - let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField); + let pdfUrl = this.props.Document.GetT(this.props.fieldKey, PDFField); if ((!this._interactive && proxy) || !pdfUrl || pdfUrl == FieldWaiting) { return proxy; } @@ -468,7 +468,7 @@ export class PDFBox extends React.Component { @computed get imageProxyRenderer() { - let thumbField = this.props.doc.Get(KeyStore.Thumbnail); + 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" : thumbField instanceof ImageField ? thumbField.Data.href : "http://cs.brown.edu/people/bcz/prairie.jpg"; diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 7c0db83a8..72495a964 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -20,7 +20,7 @@ export class VideoBox extends React.Component { super(props); } - @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, -1); } + @computed private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, -1); } _loaded: boolean = false; @@ -31,12 +31,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.doc.GetNumber(KeyStore.NativeWidth, 0); - var nativeHeight = this.props.doc.GetNumber(KeyStore.NativeHeight, 0); + var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); + var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); var newNativeHeight = nativeWidth * r.entry.height / r.entry.width; if (!nativeHeight && newNativeHeight != nativeHeight && !isNaN(newNativeHeight)) { - this.props.doc.SetNumber(KeyStore.Height, newNativeHeight / nativeWidth * this.props.doc.GetNumber(KeyStore.Width, 0)); - this.props.doc.SetNumber(KeyStore.NativeHeight, newNativeHeight); + this.props.Document.SetNumber(KeyStore.Height, newNativeHeight / nativeWidth * this.props.Document.GetNumber(KeyStore.Width, 0)); + this.props.Document.SetNumber(KeyStore.NativeHeight, newNativeHeight); } } else { this._loaded = true; @@ -56,7 +56,7 @@ export class VideoBox extends React.Component { } render() { - let field = this.props.doc.GetT(this.props.fieldKey, VideoField); + let field = this.props.Document.GetT(this.props.fieldKey, VideoField); if (!field || field === FieldWaiting) { return
    Loading
    } diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 2ca8d49ce..92e2fabd4 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -16,10 +16,10 @@ export class WebBox extends React.Component { super(props); } - @computed get html(): string { return this.props.doc.GetHtml(KeyStore.Data, ""); } + @computed get html(): string { return this.props.Document.GetHtml(KeyStore.Data, ""); } render() { - let field = this.props.doc.Get(this.props.fieldKey); + let field = this.props.Document.Get(this.props.fieldKey); let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" : field instanceof WebField ? field.Data.href : "https://crossorigin.me/" + "https://cs.brown.edu"; -- cgit v1.2.3-70-g09d2 From adecb4a47cac3c2f92d11d8f500d4decf70a06d1 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Tue, 2 Apr 2019 13:00:00 -0400 Subject: More work on collection refactor --- .../views/collections/CollectionBaseView.tsx | 139 ++++++++++++++++ src/client/views/collections/CollectionView.tsx | 178 ++++----------------- .../views/collections/CollectionViewBase.tsx | 15 +- src/client/views/nodes/FieldView.tsx | 5 + 4 files changed, 174 insertions(+), 163 deletions(-) create mode 100644 src/client/views/collections/CollectionBaseView.tsx (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx new file mode 100644 index 000000000..c8c840085 --- /dev/null +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -0,0 +1,139 @@ +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 { ContextMenu } from '../ContextMenu'; +import { SelectionManager } from '../../util/SelectionManager'; +import { Document } from '../../../fields/Document'; +import { ListField } from '../../../fields/ListField'; +import { action } from 'mobx'; +import { Transform } from '../../util/Transform'; + +export enum CollectionViewType { + Invalid, + Freeform, + Schema, + Docking, + Tree, +} + +export interface CollectionRenderProps { + addDocument: (document: Document, allowDuplicates: boolean) => void; + removeDocument: (document: Document) => boolean; + active: () => boolean; +} + +export interface CollectionViewProps extends FieldViewProps { + onContextMenu?: (e: React.MouseEvent) => void; + children: (type: CollectionViewType, props: CollectionRenderProps) => JSX.Element | null; +} + +export class CollectionBaseView extends React.Component { + get collectionViewType(): CollectionViewType { + let Document = this.props.Document; + let viewField = Document.GetT(KeyStore.ViewType, NumberField); + if (viewField === FieldWaiting) { + return CollectionViewType.Invalid; + } else if (viewField) { + return viewField.Data; + } else { + return CollectionViewType.Freeform; + } + } + + active = (): boolean => { + var isSelected = this.props.isSelected(); + var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == self); + var topMost = this.props.isTopMost; + return isSelected || childSelected || topMost; + } + + createsCycle(documentToAdd: Document, containerDocument: Document): boolean { + let data = documentToAdd.GetList(KeyStore.Data, []); + for (let i = 0; i < data.length; i++) { + if (this.createsCycle(data[i], containerDocument)) + return true; + } + let annots = documentToAdd.GetList(KeyStore.Annotations, []); + for (let i = 0; i < annots.length; i++) { + if (this.createsCycle(annots[i], containerDocument)) + return true; + } + for (let containerProto: any = containerDocument; containerProto && containerProto != FieldWaiting; containerProto = containerProto.GetPrototype()) { + if (containerProto.Id == documentToAdd.Id) + return true; + } + return false; + } + + @action.bound + addDocument(doc: Document, allowDuplicates: boolean): boolean { + let props = this.props; + var curPage = props.Document.GetNumber(KeyStore.CurPage, -1); + doc.SetOnPrototype(KeyStore.Page, new NumberField(curPage)); + if (curPage >= 0) { + doc.SetOnPrototype(KeyStore.AnnotationOn, 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 (!value.some(v => v.Id == doc.Id) || allowDuplicates) + value.push(doc); + } + 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 + return false; + } + return true; + } + + @action.bound + 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()) + let index = -1; + for (let i = 0; i < value.length; i++) { + if (value[i].Id == doc.Id) { + index = i; + break; + } + } + doc.GetTAsync(KeyStore.AnnotationOn, Document).then((annotationOn) => { + if (annotationOn == props.Document) { + doc.Set(KeyStore.AnnotationOn, undefined, true); + } + }) + + if (index !== -1) { + value.splice(index, 1) + + SelectionManager.DeselectAll() + ContextMenu.Instance.clearItems() + return true; + } + return false + } + + render() { + const props: CollectionRenderProps = { + addDocument: this.addDocument, + removeDocument: this.removeDocument, + active: this.active + } + return ( +
    + {this.props.children(this.collectionViewType, props)} +
    + ) + } + +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index e6351618c..51cc99595 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -1,137 +1,28 @@ -import { action, computed, observable } from "mobx"; -import { observer } from "mobx-react"; -import { Document } from "../../../fields/Document"; -import { ListField } from "../../../fields/ListField"; -import { SelectionManager } from "../../util/SelectionManager"; -import { ContextMenu } from "../ContextMenu"; -import React = require("react"); -import { KeyStore } from "../../../fields/KeyStore"; -import { NumberField } from "../../../fields/NumberField"; -import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView"; -import { CollectionDockingView } from "./CollectionDockingView"; -import { CollectionSchemaView } from "./CollectionSchemaView"; -import { CollectionViewProps, SubCollectionViewProps } from "./CollectionViewBase"; -import { CollectionTreeView } from "./CollectionTreeView"; -import { Field, FieldId, FieldWaiting } from "../../../fields/Field"; -import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils"; - -export enum CollectionViewType { - Invalid, - Freeform, - Schema, - Docking, - Tree -} - -export const COLLECTION_BORDER_WIDTH = 1; - -@observer -export class CollectionView extends React.Component { - - public static LayoutString(fieldKey: string = "DataKey") { - return `<${CollectionView.name} Document={Document} - ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings} - isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`; - } - - @observable - public SelectedDocs: FieldId[] = []; - public active: () => boolean = () => CollectionView.Active(this); - addDocument = (doc: Document, allowDuplicates: boolean): boolean => { return CollectionView.AddDocument(this.props, doc, allowDuplicates); } - removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); } - - public static Active(self: CollectionView): boolean { - var isSelected = self.props.isSelected(); - var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == self); - var topMost = self.props.isTopMost; - return isSelected || childSelected || topMost; - } - - static createsCycle(documentToAdd: Document, containerDocument: Document): boolean { - let data = documentToAdd.GetList(KeyStore.Data, []); - for (let i = 0; i < data.length; i++) { - if (CollectionView.createsCycle(data[i], containerDocument)) - return true; - } - let annots = documentToAdd.GetList(KeyStore.Annotations, []); - for (let i = 0; i < annots.length; i++) { - if (CollectionView.createsCycle(annots[i], containerDocument)) - return true; - } - for (let containerProto: any = containerDocument; containerProto && containerProto != FieldWaiting; containerProto = containerProto.GetPrototype()) { - if (containerProto.Id == documentToAdd.Id) - return true; - } - return false; - } - - @action - public static AddDocument(props: CollectionViewProps, doc: Document, allowDuplicates: boolean): boolean { - var curPage = props.Document.GetNumber(KeyStore.CurPage, -1); - doc.SetOnPrototype(KeyStore.Page, new NumberField(curPage)); - if (curPage >= 0) { - doc.SetOnPrototype(KeyStore.AnnotationOn, 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 (!CollectionView.createsCycle(doc, props.Document)) { - if (!value.some(v => v.Id == doc.Id) || allowDuplicates) - value.push(doc); - } - else - return false; - } else { - let proto = props.Document.GetPrototype(); - if (!proto || proto == FieldWaiting || !CollectionView.createsCycle(proto, doc)) { - props.Document.SetOnPrototype(props.fieldKey, new ListField([doc])); - } - else - return false; - } - return true; - } - - @action - public static RemoveDocument(props: CollectionViewProps, doc: Document): boolean { - //TODO This won't create the field if it doesn't already exist - 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) { - index = i; - break; - } - } - doc.GetTAsync(KeyStore.AnnotationOn, Document).then((annotationOn) => { - if (annotationOn == props.Document) { - doc.Set(KeyStore.AnnotationOn, undefined, true); - } - }) - - if (index !== -1) { - value.splice(index, 1) - - SelectionManager.DeselectAll() - ContextMenu.Instance.clearItems() - return true; - } - return false - } - - get collectionViewType(): CollectionViewType { - let Document = this.props.Document; - let viewField = Document.GetT(KeyStore.ViewType, NumberField); - if (viewField === FieldWaiting) { - return CollectionViewType.Invalid; - } else if (viewField) { - return viewField.Data; - } else { - return CollectionViewType.Freeform; +import * as React from 'react' +import { FieldViewProps, FieldView } from '../nodes/FieldView'; +import { CollectionBaseView, CollectionViewType, CollectionRenderProps } from './CollectionBaseView'; +import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; +import { CollectionSchemaView } from './CollectionSchemaView'; +import { CollectionDockingView } from './CollectionDockingView'; +import { CollectionTreeView } from './CollectionTreeView'; +import { ContextMenu } from '../ContextMenu'; +import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils'; +import { KeyStore } from '../../../fields/KeyStore'; +export class CollectionView extends React.Component { + public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(CollectionView, fieldStr) } + + private SubView = (type: CollectionViewType, renderProps: CollectionRenderProps) => { + let props = { ...renderProps, ...this.props }; + switch (type) { + case CollectionViewType.Freeform: return () + case CollectionViewType.Schema: return () + case CollectionViewType.Docking: return () + case CollectionViewType.Tree: return () } + return (null); } - specificContextMenu = (e: React.MouseEvent): void => { + 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: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) }) ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) }) @@ -139,24 +30,11 @@ export class CollectionView extends React.Component { } } - public static SubViewProps(self: CollectionView): SubCollectionViewProps { - return { ...self.props, addDocument: self.addDocument, removeDocument: self.removeDocument, active: self.active, CollectionView: self } - } - - private get SubView() { - let subProps = CollectionView.SubViewProps(this); - switch (this.collectionViewType) { - case CollectionViewType.Freeform: return () - case CollectionViewType.Schema: return () - case CollectionViewType.Docking: return () - case CollectionViewType.Tree: return () - } - return (null); - } - render() { - return (
    - {this.SubView} -
    ) + return ( + + {this.SubView} + > + ) } -} +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index c5a6c53b3..ca4f3b12f 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -20,17 +20,9 @@ import { Server } from "../../Server"; import { FieldViewProps } from "../nodes/FieldView"; export interface CollectionViewProps extends FieldViewProps { - ScreenToLocalTransform: () => Transform; - panelWidth: () => number; - panelHeight: () => number; - focus: (doc: Document) => void; } export interface SubCollectionViewProps extends CollectionViewProps { - active: () => boolean; - addDocument: (doc: Document, allowDuplicates: boolean) => boolean; - removeDocument: (doc: Document) => boolean; - CollectionView: CollectionView; } export type CursorEntry = TupleField<[string, string], [number, number]>; @@ -127,8 +119,6 @@ export class CollectionViewBase extends React.Component @action protected onDrop(e: React.DragEvent, options: DocumentOptions): void { - let that = this; - let html = e.dataTransfer.getData("text/html"); let text = e.dataTransfer.getData("text/plain"); @@ -151,7 +141,6 @@ export class CollectionViewBase extends React.Component let item = e.dataTransfer.items[i]; if (item.kind === "string" && item.type.indexOf("uri") != -1) { e.dataTransfer.items[i].getAsString(action((s: string) => { - let document: Document; request.head(ServerUtils.prepend(RouteStore.corsProxy + "/" + s), (err, res, body) => { let type = res.headers["content-type"]; if (type) { @@ -184,11 +173,11 @@ export class CollectionViewBase extends React.Component runInAction(() => { let doc = this.getDocumentFromType(type, path, { ...options, nativeWidth: 300, width: 300 }) - let docs = that.props.Document.GetT(KeyStore.Data, ListField); + let docs = this.props.Document.GetT(KeyStore.Data, ListField); if (docs != FieldWaiting) { if (!docs) { docs = new ListField(); - that.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/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 43688989b..2a7d3175f 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -33,6 +33,11 @@ export interface FieldViewProps { select: (isCtrlPressed: boolean) => void; isTopMost: boolean; selectOnLoad: boolean; + addDocument: (document: Document, allowDuplicates: boolean) => boolean; + removeDocument: (document: Document) => boolean; + ScreenToLocalTransform: () => Transform; + active: () => boolean; + focus: (doc: Document) => void; } @observer -- cgit v1.2.3-70-g09d2 From 5889bf159ee0a0f6567683b2bb8c2475feccf9ec Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Wed, 3 Apr 2019 01:38:29 -0400 Subject: Almost compiles --- src/Utils.ts | 10 ++++++ src/client/Server.ts | 2 +- src/client/documents/Documents.ts | 3 +- src/client/northstar/dash-nodes/HistogramBox.tsx | 14 ++++---- src/client/util/DragManager.ts | 2 +- src/client/util/Transform.ts | 2 +- src/client/util/type_decls.d | 2 +- src/client/views/Main.tsx | 10 +++--- .../views/collections/CollectionBaseView.tsx | 28 +++++++++++++--- .../views/collections/CollectionDockingView.tsx | 9 ++--- src/client/views/collections/CollectionPDFView.tsx | 36 ++++++++++---------- .../views/collections/CollectionSchemaView.tsx | 12 +++++-- .../views/collections/CollectionTreeView.tsx | 3 +- .../views/collections/CollectionVideoView.tsx | 39 +++++++++++----------- src/client/views/collections/CollectionView.tsx | 4 +-- .../views/collections/CollectionViewBase.tsx | 7 ++-- .../CollectionFreeFormRemoteCursors.tsx | 17 ++-------- .../collectionFreeForm/CollectionFreeFormView.tsx | 30 +++++++++++------ src/client/views/nodes/DocumentContentsView.tsx | 18 +++++++++- src/client/views/nodes/DocumentView.tsx | 37 +++++++++----------- src/client/views/nodes/FieldView.tsx | 17 ++++++---- src/client/views/nodes/KeyValuePair.tsx | 4 +++ src/fields/Field.ts | 4 +-- 23 files changed, 181 insertions(+), 129 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/Utils.ts b/src/Utils.ts index a5d9bd0ca..3eb192eb8 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -86,4 +86,14 @@ export class Utils { } } +export function returnTrue() { + return true; +} + +export function returnFalse() { + return false; +} + +export function emptyFunction() { } + export type Without = Pick>; \ No newline at end of file diff --git a/src/client/Server.ts b/src/client/Server.ts index 37e3c2c0d..c301b04d3 100644 --- a/src/client/Server.ts +++ b/src/client/Server.ts @@ -42,7 +42,7 @@ export class Server { reaction(() => { return this.ClientFieldsCached.get(fieldid); }, (field, reaction) => { - if (field !== "") { + if (field !== FieldWaiting) { reaction.dispose() cb(field) } diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 0bf275df8..15f980895 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -17,7 +17,8 @@ import { HistogramOperation } from "../northstar/operations/HistogramOperation"; import { Server } from "../Server"; import { CollectionPDFView } from "../views/collections/CollectionPDFView"; import { CollectionVideoView } from "../views/collections/CollectionVideoView"; -import { CollectionView, CollectionViewType } from "../views/collections/CollectionView"; +import { CollectionView } from "../views/collections/CollectionView"; +import { CollectionViewType } from "../views/collections/CollectionBaseView"; import { AudioBox } from "../views/nodes/AudioBox"; import { FormattedTextBox } from "../views/nodes/FormattedTextBox"; import { ImageBox } from "../views/nodes/ImageBox"; diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx index a968def96..4457c9502 100644 --- a/src/client/northstar/dash-nodes/HistogramBox.tsx +++ b/src/client/northstar/dash-nodes/HistogramBox.tsx @@ -117,14 +117,14 @@ export class HistogramBox extends React.Component { activateHistogramOperation(catalog?: Catalog) { if (catalog) { - this.props.doc.GetTAsync(this.props.fieldKey, HistogramField).then((histoOp: Opt) => runInAction(() => { + this.props.Document.GetTAsync(this.props.fieldKey, HistogramField).then((histoOp: Opt) => runInAction(() => { this.HistoOp = histoOp ? histoOp.Data : HistogramOperation.Empty; if (this.HistoOp != HistogramOperation.Empty) { - reaction(() => this.props.doc.GetList(KeyStore.LinkedFromDocs, []), (docs: Document[]) => this.HistoOp.Links.splice(0, this.HistoOp.Links.length, ...docs), { fireImmediately: true }); - reaction(() => this.props.doc.GetList(KeyStore.BrushingDocs, []).length, + reaction(() => this.props.Document.GetList(KeyStore.LinkedFromDocs, []), (docs: Document[]) => this.HistoOp.Links.splice(0, this.HistoOp.Links.length, ...docs), { fireImmediately: true }); + reaction(() => this.props.Document.GetList(KeyStore.BrushingDocs, []).length, () => { - let brushingDocs = this.props.doc.GetList(KeyStore.BrushingDocs, [] as Document[]); - let proto = this.props.doc.GetPrototype() as Document; + let brushingDocs = this.props.Document.GetList(KeyStore.BrushingDocs, [] as Document[]); + let proto = this.props.Document.GetPrototype() as Document; 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[]); @@ -139,8 +139,8 @@ export class HistogramBox extends React.Component { render() { let labelY = this.HistoOp && this.HistoOp.Y ? this.HistoOp.Y.PresentedName : "<...>"; let labelX = this.HistoOp && this.HistoOp.X ? this.HistoOp.X.PresentedName : "<...>"; - var h = this.props.isTopMost ? this.PanelHeight : this.props.doc.GetNumber(KeyStore.Height, 0); - var w = this.props.isTopMost ? this.PanelWidth : this.props.doc.GetNumber(KeyStore.Width, 0); + var h = this.props.isTopMost ? this.PanelHeight : this.props.Document.GetNumber(KeyStore.Height, 0); + var w = this.props.isTopMost ? this.PanelWidth : this.props.Document.GetNumber(KeyStore.Width, 0); let loff = this.SizeConverter.LeftOffset; let toff = this.SizeConverter.TopOffset; let roff = this.SizeConverter.RightOffset; diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 70b1c9829..53bbae18d 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -110,7 +110,7 @@ export namespace DragManager { xOffset?: number; yOffset?: number; aliasOnDrop?: boolean; - removeDocument?: (collectionDrop: CollectionView) => void; + moveDocument?: (targetCollection: Document, addDocument: (document: Document) => void) => void; [id: string]: any; } export function StartDocumentDrag(ele: HTMLElement, dragData: DocumentDragData, options?: DragOptions) { diff --git a/src/client/util/Transform.ts b/src/client/util/Transform.ts index 3e1039166..889134e3e 100644 --- a/src/client/util/Transform.ts +++ b/src/client/util/Transform.ts @@ -3,7 +3,7 @@ export class Transform { private _translateY: number = 0; private _scale: number = 1; - static get Identity(): Transform { + static Identity(): Transform { return new Transform(0, 0, 1); } diff --git a/src/client/util/type_decls.d b/src/client/util/type_decls.d index 4f69053b1..47c3481b2 100644 --- a/src/client/util/type_decls.d +++ b/src/client/util/type_decls.d @@ -181,7 +181,7 @@ declare class Key extends Field { Copy(): Field; ToScriptString(): string; } -declare type FIELD_WAITING = ""; +declare type FIELD_WAITING = null; declare type Opt = T | undefined; declare type FieldValue = Opt | FIELD_WAITING; // @ts-ignore diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 82fd1e7c9..bcbe6b987 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -6,7 +6,7 @@ import { Document } from '../../fields/Document'; import { KeyStore } from '../../fields/KeyStore'; import "./Main.scss"; import { MessageStore } from '../../server/Message'; -import { Utils } from '../../Utils'; +import { Utils, returnTrue } from '../../Utils'; import * as request from 'request' import * as rp from 'request-promise' import { Documents } from '../documents/Documents'; @@ -212,7 +212,6 @@ export class Main extends React.Component { this.workspacesShown = !this.workspacesShown; } - screenToLocalTransform = () => Transform.Identity pwidthFunc = () => this.pwidth; pheightFunc = () => this.pheight; focusDocument = (doc: Document) => { } @@ -221,15 +220,16 @@ export class Main extends React.Component { get content() { return !this.mainContainer ? (null) : } diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index c8c840085..c9f640c4a 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -19,16 +19,21 @@ export enum CollectionViewType { } export interface CollectionRenderProps { - addDocument: (document: Document, allowDuplicates: boolean) => void; + addDocument: (document: Document, allowDuplicates?: boolean) => boolean; removeDocument: (document: Document) => boolean; + moveDocument: (document: Document, targetCollection: Document, addDocument: (document: Document) => void) => boolean; active: () => boolean; } export interface CollectionViewProps extends FieldViewProps { onContextMenu?: (e: React.MouseEvent) => void; - children: (type: CollectionViewType, props: CollectionRenderProps) => JSX.Element | null; + children: (type: CollectionViewType, props: CollectionRenderProps) => JSX.Element | JSX.Element[] | null; + className?: string; + contentRef?: React.Ref; } +export const COLLECTION_BORDER_WIDTH = 1; + export class CollectionBaseView extends React.Component { get collectionViewType(): CollectionViewType { let Document = this.props.Document; @@ -44,7 +49,7 @@ export class CollectionBaseView extends React.Component { active = (): boolean => { var isSelected = this.props.isSelected(); - var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == self); + var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this); var topMost = this.props.isTopMost; return isSelected || childSelected || topMost; } @@ -68,7 +73,7 @@ export class CollectionBaseView extends React.Component { } @action.bound - addDocument(doc: Document, allowDuplicates: boolean): boolean { + 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)); @@ -123,14 +128,27 @@ export class CollectionBaseView extends React.Component { return false } + @action.bound + moveDocument(doc: Document, targetCollection: Document, addDocument: (doc: Document) => void): boolean { + if (this.props.Document === targetCollection) { + return false; + } + if (this.removeDocument(doc)) { + addDocument(doc); + return true; + } + return false; + } + render() { const props: CollectionRenderProps = { addDocument: this.addDocument, removeDocument: this.removeDocument, + moveDocument: this.moveDocument, active: this.active } return ( -
    +
    {this.props.children(this.collectionViewType, props)}
    ) diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index c67354139..bb34340fb 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -8,12 +8,12 @@ import { Document } from "../../../fields/Document"; import { KeyStore } from "../../../fields/KeyStore"; import Measure from "react-measure"; import { FieldId, Opt, Field } from "../../../fields/Field"; -import { Utils } from "../../../Utils"; +import { Utils, returnTrue } from "../../../Utils"; import { Server } from "../../Server"; import { undoBatch } from "../../util/UndoManager"; import { DocumentView } from "../nodes/DocumentView"; import "./CollectionDockingView.scss"; -import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; +import { COLLECTION_BORDER_WIDTH } from "./CollectionBaseView"; import React = require("react"); import { SubCollectionViewProps } from "./CollectionViewBase"; import { ServerUtils } from "../../../server/ServerUtil"; @@ -310,14 +310,15 @@ export class DockedFrameRenderer extends React.Component { var content =
    { }} ContainingCollectionView={undefined} />
    diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index 6bb3bacc7..14ed70b8c 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -1,23 +1,20 @@ import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; -import { Document } from "../../../fields/Document"; import { KeyStore } from "../../../fields/KeyStore"; import { ContextMenu } from "../ContextMenu"; -import { CollectionView, CollectionViewType } from "./CollectionView"; import { CollectionViewProps } from "./CollectionViewBase"; import "./CollectionPDFView.scss" import React = require("react"); -import { FieldId } from "../../../fields/Field"; import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView"; +import { FieldView } from "../nodes/FieldView"; +import { CollectionRenderProps, CollectionBaseView, CollectionViewType } from "./CollectionBaseView"; @observer export class CollectionPDFView extends React.Component { public static LayoutString(fieldKey: string = "DataKey") { - return `<${CollectionPDFView.name} Document={Document} - ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings} - isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`; + return FieldView.LayoutString(CollectionPDFView, fieldKey); } private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, -1); } @@ -35,26 +32,27 @@ export class CollectionPDFView extends React.Component { ); } - // "inherited" CollectionView API starts here... - @observable - public SelectedDocs: FieldId[] = [] - public active: () => boolean = () => CollectionView.Active(this); - - addDocument = (doc: Document, allowDuplicates: boolean): boolean => { return CollectionView.AddDocument(this.props, doc, allowDuplicates); } - removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); } - - specificContextMenu = (e: React.MouseEvent): void => { + onContextMenu = (e: React.MouseEvent): void => { if (!e.isPropagationStopped() && this.props.Document.Id != "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 ContextMenu.Instance.addItem({ description: "PDFOptions", event: () => { } }); } } - render() { + private subView = (_type: CollectionViewType, renderProps: CollectionRenderProps) => { + let props = { ...renderProps, ...this.props }; return ( -
    - + <> + {this.props.isSelected() ? this.uIButtons : (null)} -
    + + ) + } + + render() { + return ( + + {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 0c7e28691..0eacd38b0 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -22,9 +22,11 @@ import { EditableView } from "../EditableView"; import { DocumentView } from "../nodes/DocumentView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; -import { CollectionView, COLLECTION_BORDER_WIDTH } from "./CollectionView"; +import { CollectionView } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import { TextField } from "../../../fields/TextField"; +import { COLLECTION_BORDER_WIDTH } from "./CollectionBaseView"; +import { emptyFunction, returnFalse } from "../../../Utils"; // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 @@ -79,6 +81,9 @@ export class CollectionSchemaView extends CollectionViewBase { select: () => { }, isTopMost: false, selectOnLoad: false, + ScreenToLocalTransform: Transform.Identity, + focus: emptyFunction, + active: returnFalse } let contents = ( @@ -295,15 +300,16 @@ export class CollectionSchemaView extends CollectionViewBase { {({ measureRef }) =>
    {doc instanceof Document ? : null} diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 70790af18..6f9ba40d2 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -10,9 +10,10 @@ import { ListField } from "../../../fields/ListField"; import { setupDrag } from "../../util/DragManager"; import { EditableView } from "../EditableView"; import "./CollectionTreeView.scss"; -import { CollectionView, COLLECTION_BORDER_WIDTH } from "./CollectionView"; +import { CollectionView } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import React = require("react") +import { COLLECTION_BORDER_WIDTH } from './CollectionBaseView'; export interface TreeViewProps { diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index 1f0143d87..7cb461b4d 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -3,12 +3,14 @@ import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { KeyStore } from "../../../fields/KeyStore"; import { ContextMenu } from "../ContextMenu"; -import { CollectionView, CollectionViewType } from "./CollectionView"; +import { CollectionView } from "./CollectionView"; +import { CollectionViewType, CollectionBaseView, CollectionRenderProps } from "./CollectionBaseView"; import { CollectionViewProps } from "./CollectionViewBase"; import React = require("react"); import { FieldId } from "../../../fields/Field"; import "./CollectionVideoView.scss" -import { CollectionFreeFormView } from "./CollectionFreeFormView"; +import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView"; +import { FieldView } from "../nodes/FieldView"; @observer @@ -20,9 +22,7 @@ export class CollectionVideoView extends React.Component { @observable _isPlaying: boolean = false; public static LayoutString(fieldKey: string = "DataKey") { - return `<${CollectionVideoView.name} Document={Document} - ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings} - isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`; + return FieldView.LayoutString(CollectionVideoView, fieldKey); } private get uIButtons() { let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().transformDirection(1, 1)[0]); @@ -102,26 +102,27 @@ export class CollectionVideoView extends React.Component { } - // "inherited" CollectionView API starts here... - - @observable - public SelectedDocs: FieldId[] = [] - public active: () => boolean = () => CollectionView.Active(this); - - addDocument = (doc: Document, allowDuplicates: boolean): boolean => { return CollectionView.AddDocument(this.props, doc, allowDuplicates); } - removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); } - - specificContextMenu = (e: React.MouseEvent): void => { + onContextMenu = (e: React.MouseEvent): void => { if (!e.isPropagationStopped() && this.props.Document.Id != "mainDoc") { // 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: "VideoOptions", event: () => { } }); } } + private subView = (_type: CollectionViewType, renderProps: CollectionRenderProps) => { + let props = { ...renderProps, ...this.props }; + return ( + <> + + {this.props.isSelected() ? this.uIButtons : (null)} + + ) + } + render() { trace(); - return (
    - - {this.props.isSelected() ? this.uIButtons : (null)} -
    ) + 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 51cc99595..d440dcff9 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -12,7 +12,7 @@ export class CollectionView extends React.Component { public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(CollectionView, fieldStr) } private SubView = (type: CollectionViewType, renderProps: CollectionRenderProps) => { - let props = { ...renderProps, ...this.props }; + let props = { ...this.props, ...renderProps }; switch (type) { case CollectionViewType.Freeform: return () case CollectionViewType.Schema: return () @@ -34,7 +34,7 @@ export class CollectionView extends React.Component { return ( {this.SubView} - > + ) } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index ca4f3b12f..4a0b2312e 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -20,6 +20,9 @@ import { Server } from "../../Server"; import { FieldViewProps } from "../nodes/FieldView"; export interface CollectionViewProps extends FieldViewProps { + addDocument: (document: Document, allowDuplicates?: boolean) => boolean; + removeDocument: (document: Document) => boolean; + moveDocument: (document: Document, targetCollection: Document, addDocument: (document: Document) => void) => boolean; } export interface SubCollectionViewProps extends CollectionViewProps { @@ -72,8 +75,8 @@ export class CollectionViewBase extends React.Component de.data.draggedDocument.GetTAsync(key, NumberField, (f: Opt) => f ? de.data.droppedDocument.SetNumber(key, f.Data) : null)); } let added = this.props.addDocument(de.data.droppedDocument, false); - if (added && de.data.removeDocument && !de.data.aliasOnDrop) { - de.data.removeDocument(this.props.CollectionView); + if (added && de.data.moveDocument && !de.data.aliasOnDrop) { + de.data.moveDocument(this.props.Document, this.props.addDocument); } e.stopPropagation(); return added; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx index 19382e66f..f664f4e65 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx @@ -1,21 +1,8 @@ -import { action, computed, observable } from "mobx"; +import { computed } from "mobx"; import { observer } from "mobx-react"; -import { Document } from "../../../../fields/Document"; -import { FieldWaiting } from "../../../../fields/Field"; import { KeyStore } from "../../../../fields/KeyStore"; -import { TextField } from "../../../../fields/TextField"; -import { DragManager } from "../../../util/DragManager"; -import { Transform } from "../../../util/Transform"; -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 { COLLECTION_BORDER_WIDTH } from "../CollectionView"; -import { CollectionViewBase, CollectionViewProps, CursorEntry } from "../CollectionViewBase"; -import { CollectionFreeFormLinksView } from "./CollectionFreeFormLinksView"; +import { CollectionViewProps, CursorEntry } from "../CollectionViewBase"; import "./CollectionFreeFormView.scss"; -import { MarqueeView } from "./MarqueeView"; import React = require("react"); import v5 = require("uuid/v5"); import { CurrentUserUtils } from "../../../../server/authentication/models/current_user_utils"; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 51ab85b71..144d121db 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -11,7 +11,7 @@ import { InkingCanvas } from "../../InkingCanvas"; import { CollectionFreeFormDocumentView } from "../../nodes/CollectionFreeFormDocumentView"; import { DocumentContentsView } from "../../nodes/DocumentContentsView"; import { DocumentViewProps } from "../../nodes/DocumentView"; -import { COLLECTION_BORDER_WIDTH } from "../CollectionView"; +import { COLLECTION_BORDER_WIDTH } from "../CollectionBaseView"; import { CollectionViewBase } from "../CollectionViewBase"; import { CollectionFreeFormLinksView } from "./CollectionFreeFormLinksView"; import "./CollectionFreeFormView.scss"; @@ -20,6 +20,8 @@ import React = require("react"); import v5 = require("uuid/v5"); import { CollectionFreeFormRemoteCursors } from "./CollectionFreeFormRemoteCursors"; import { PreviewCursor } from "./PreviewCursor"; +import { DocumentManager } from "../../../util/DocumentManager"; +import { SelectionManager } from "../../../util/SelectionManager"; @observer export class CollectionFreeFormView extends CollectionViewBase { @@ -39,8 +41,13 @@ export class CollectionFreeFormView extends CollectionViewBase { } public selectDocuments = (docs: Document[]) => { - this.props.CollectionView.SelectedDocs.length = 0; - docs.map(d => this.props.CollectionView.SelectedDocs.push(d.Id)); + SelectionManager.DeselectAll; + docs.map(doc => { + const dv = DocumentManager.Instance.getDocumentView(doc); + if (dv) { + SelectionManager.SelectDoc(dv, true); + } + }) } public getActiveDocuments = () => { @@ -59,6 +66,8 @@ export class CollectionFreeFormView extends CollectionViewBase { @observable private _lastX: number = 0; @observable private _lastY: number = 0; + 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 scale(): number { return this.props.Document.GetNumber(KeyStore.Scale, 1); } @@ -66,8 +75,8 @@ export class CollectionFreeFormView extends CollectionViewBase { @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.props.panelWidth() / 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.props.panelHeight() / 2 : 0; }// shift so pan position is at center of window for non-overlay collections + @computed get centeringShiftX() { return !this.props.Document.GetNumber(KeyStore.NativeWidth, 0) && this.outerElement ? this.outerElement.clientWidth / 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.outerElement ? this.outerElement.clientHeight / 2 : 0; }// shift so pan position is at center of window for non-overlay collections @undoBatch @action @@ -227,16 +236,17 @@ export class CollectionFreeFormView extends CollectionViewBase { getDocumentViewProps(document: Document): DocumentViewProps { return { Document: document, - AddDocument: this.props.addDocument, - RemoveDocument: this.props.removeDocument, + addDocument: this.props.addDocument, + removeDocument: this.props.removeDocument, ScreenToLocalTransform: this.getTransform, isTopMost: false, selectOnLoad: document.Id == this._selectOnLoaded, PanelWidth: document.Width, PanelHeight: document.Height, ContentScaling: this.noScaling, - ContainingCollectionView: this.props.CollectionView, - focus: this.focusDocument + ContainingCollectionView: undefined, + focus: this.focusDocument, + parentActive: this.props.active, } } @@ -266,7 +276,7 @@ export class CollectionFreeFormView extends CollectionViewBase { 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); + getLocalTransform = (): Transform => Transform.Identity().scale(1 / this.scale).translate(this.panX, this.panY); noScaling = () => 1; childViews = () => this.views; diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index a5e4b1a17..2574b374a 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -44,7 +44,18 @@ export class DocumentContentsView extends React.Component; Document: Document; - AddDocument?: (doc: Document, allowDuplicates: boolean) => boolean; - RemoveDocument?: (doc: Document) => boolean; + addDocument?: (doc: Document, allowDuplicates?: boolean) => boolean; + removeDocument?: (doc: Document) => boolean; + moveDocument?: (doc: Document, targetCollection: Document, addDocument: (document: Document) => void) => boolean; ScreenToLocalTransform: () => Transform; isTopMost: boolean; ContentScaling: () => number; @@ -33,6 +35,7 @@ export interface DocumentViewProps { PanelHeight: () => number; focus: (doc: Document) => void; selectOnLoad: boolean; + parentActive: () => boolean; } export interface JsxArgs extends DocumentViewProps { Keys: { [name: string]: Key } @@ -83,9 +86,8 @@ export class DocumentView extends React.Component { private _mainCont = React.createRef(); private _downX: number = 0; private _downY: number = 0; - private _reactionDisposer: Opt; - @computed get active(): boolean { return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || this.props.ContainingCollectionView.active(); } - @computed get topMost(): boolean { return !this.props.ContainingCollectionView || this.props.ContainingCollectionView.collectionViewType == CollectionViewType.Docking; } + @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()); } @@ -119,12 +121,6 @@ export class DocumentView extends React.Component { runInAction(() => { DocumentManager.Instance.DocumentViews.push(this); }) - this._reactionDisposer = reaction( - () => this.props.ContainingCollectionView && this.props.ContainingCollectionView.SelectedDocs.slice(), - () => { - if (this.props.ContainingCollectionView && this.props.ContainingCollectionView.SelectedDocs.indexOf(this.props.Document.Id) != -1) - SelectionManager.SelectDoc(this, true); - }); } componentDidUpdate() { @@ -144,9 +140,6 @@ export class DocumentView extends React.Component { DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1); }) - if (this._reactionDisposer) { - this._reactionDisposer(); - } } startDragging(x: number, y: number, dropAliasOfDraggedDoc: boolean) { @@ -156,9 +149,9 @@ export class DocumentView extends React.Component { dragData.aliasOnDrop = dropAliasOfDraggedDoc; dragData.xOffset = x - left; dragData.yOffset = y - top; - dragData.removeDocument = (dropCollectionView: CollectionView) => { - if (this.props.RemoveDocument && this.props.ContainingCollectionView !== dropCollectionView) { - this.props.RemoveDocument(this.props.Document); + dragData.moveDocument = (targetCollection: Document, addDocument: (document: Document) => void) => { + if (this.props.moveDocument) { + this.props.moveDocument(this.props.Document, targetCollection, addDocument) } } DragManager.StartDocumentDrag(this._mainCont.current, dragData, { @@ -197,14 +190,14 @@ export class DocumentView extends React.Component { } deleteClicked = (): void => { - if (this.props.RemoveDocument) { - this.props.RemoveDocument(this.props.Document); + 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); + if (this.props.addDocument) { + this.props.addDocument(Documents.KVPDocument(this.props.Document, { width: 300, height: 300 }), false); } } fullScreenClicked = (e: React.MouseEvent): void => { diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 2a7d3175f..57af55f9f 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -19,6 +19,7 @@ import { ListField } from "../../../fields/ListField"; import { DocumentContentsView } from "./DocumentContentsView"; import { Transform } from "../../util/Transform"; import { KeyStore } from "../../../fields/KeyStore"; +import { returnFalse } from "../../../Utils"; // @@ -33,8 +34,9 @@ export interface FieldViewProps { select: (isCtrlPressed: boolean) => void; isTopMost: boolean; selectOnLoad: boolean; - addDocument: (document: Document, allowDuplicates: boolean) => boolean; - removeDocument: (document: Document) => boolean; + addDocument?: (document: Document, allowDuplicates?: boolean) => boolean; + removeDocument?: (document: Document) => boolean; + moveDocument?: (document: Document, targetCollection: Document, addDocument: (document: Document) => void) => boolean; ScreenToLocalTransform: () => Transform; active: () => boolean; focus: (doc: Document) => void; @@ -73,19 +75,20 @@ export class FieldView extends React.Component { } else if (field instanceof Document) { return ( Transform.Identity} + addDocument={undefined} + removeDocument={undefined} + ScreenToLocalTransform={Transform.Identity} ContentScaling={() => 1} PanelWidth={() => 100} PanelHeight={() => 100} - isTopMost={true} + isTopMost={true} //TODO Why is this top most? selectOnLoad={false} focus={() => { }} isSelected={() => false} select={() => false} layoutKey={KeyStore.Layout} - ContainingCollectionView={undefined} />) + ContainingCollectionView={undefined} + parentActive={this.props.active} />) } else if (field instanceof ListField) { return (
    diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index 2fc11328f..e178cbc8d 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -11,6 +11,7 @@ import { Key } from '../../../fields/Key'; import { Server } from "../../Server" import { EditableView } from "../EditableView"; import { CompileScript, ToField } from "../../util/Scripting"; +import { Transform } from '../../util/Transform'; // Represents one row in a key value plane @@ -49,6 +50,9 @@ export class KeyValuePair extends React.Component { select: () => { }, isTopMost: false, selectOnLoad: false, + active: () => false, + ScreenToLocalTransform: Transform.Identity, + focus: () => { }, } let contents = ( diff --git a/src/fields/Field.ts b/src/fields/Field.ts index d48509a47..0d0e56f77 100644 --- a/src/fields/Field.ts +++ b/src/fields/Field.ts @@ -12,8 +12,8 @@ export function Cast(field: FieldValue, ctor: { new(): T return undefined; } -export const FieldWaiting: FIELD_WAITING = ""; -export type FIELD_WAITING = ""; +export const FieldWaiting: FIELD_WAITING = null; +export type FIELD_WAITING = null; export type FieldId = string; export type Opt = T | undefined; export type FieldValue = Opt | FIELD_WAITING; -- cgit v1.2.3-70-g09d2 From 318dacd846ab06358e26ca49e711e06434287d16 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Thu, 4 Apr 2019 19:37:10 -0400 Subject: Most stuff seems to be working --- src/client/util/DragManager.ts | 9 +++++---- src/client/views/collections/CollectionBaseView.tsx | 16 +++++++++------- src/client/views/collections/CollectionSchemaView.tsx | 18 +++++++++--------- src/client/views/collections/CollectionTreeView.tsx | 19 +++++++++++++++---- src/client/views/collections/CollectionView.tsx | 7 ++++++- src/client/views/collections/CollectionViewBase.tsx | 2 ++ .../collectionFreeForm/CollectionFreeFormView.tsx | 1 + src/client/views/nodes/DocumentView.tsx | 2 +- 8 files changed, 48 insertions(+), 26 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index ff778302b..d8e70a8b4 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -6,9 +6,9 @@ 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"; +import { returnFalse } from "../../Utils"; -export function setupDrag(_reference: React.RefObject, docFunc: () => Document, removeFunc: (containingCollection: CollectionView) => void = () => { }) { +export function setupDrag(_reference: React.RefObject, docFunc: () => Document, moveFunc?: DragManager.MoveFunction) { let onRowMove = action((e: PointerEvent): void => { e.stopPropagation(); e.preventDefault(); @@ -16,7 +16,7 @@ export function setupDrag(_reference: React.RefObject, docFunc: document.removeEventListener("pointermove", onRowMove); document.removeEventListener('pointerup', onRowUp); var dragData = new DragManager.DocumentDragData([docFunc()]); - dragData.removeDocument = removeFunc; + dragData.moveDocument = moveFunc; DragManager.StartDocumentDrag([_reference.current!], dragData); }); let onRowUp = action((e: PointerEvent): void => { @@ -101,6 +101,7 @@ export namespace DragManager { }; } + export type MoveFunction = (document: Document, targetCollection: Document, addDocument: (document: Document) => boolean) => boolean; export class DocumentDragData { constructor(dragDoc: Document[]) { this.draggedDocuments = dragDoc; @@ -111,7 +112,7 @@ export namespace DragManager { xOffset?: number; yOffset?: number; aliasOnDrop?: boolean; - moveDocument?: (document: Document, targetCollection: Document, addDocument: (document: Document) => boolean) => boolean; + moveDocument?: MoveFunction; [id: string]: any; } diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index 9b68ee06c..ee752a2ca 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -9,6 +9,7 @@ import { Document } from '../../../fields/Document'; import { ListField } from '../../../fields/ListField'; import { action } from 'mobx'; import { Transform } from '../../util/Transform'; +import { observer } from 'mobx-react'; export enum CollectionViewType { Invalid, @@ -35,6 +36,7 @@ export interface CollectionViewProps extends FieldViewProps { export const COLLECTION_BORDER_WIDTH = 1; +@observer export class CollectionBaseView extends React.Component { get collectionViewType(): CollectionViewType { let Document = this.props.Document; @@ -72,8 +74,8 @@ export class CollectionBaseView extends React.Component { if (this.createsCycle(annots[i], containerDocument)) return true; } - for (let containerProto: FieldValue = containerDocument; containerProto && containerProto != FieldWaiting; containerProto = containerProto.GetPrototype()) { - if (containerProto.Id == documentToAdd.Id) + for (let containerProto: FieldValue = containerDocument; containerProto && containerProto !== FieldWaiting; containerProto = containerProto.GetPrototype()) { + if (containerProto.Id === documentToAdd.Id) return true; } return false; @@ -91,14 +93,14 @@ export class CollectionBaseView extends React.Component { //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 (!value.some(v => v.Id == doc.Id) || allowDuplicates) + if (!value.some(v => v.Id === doc.Id) || allowDuplicates) value.push(doc); } else return false; } else { let proto = props.Document.GetPrototype(); - if (!proto || proto == FieldWaiting || !this.createsCycle(proto, doc)) { + if (!proto || proto === FieldWaiting || !this.createsCycle(proto, doc)) { props.Document.SetOnPrototype(props.fieldKey, new ListField([doc])); } else @@ -114,13 +116,13 @@ export class CollectionBaseView extends React.Component { 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) { + if (value[i].Id === doc.Id) { index = i; break; } } doc.GetTAsync(KeyStore.AnnotationOn, Document).then((annotationOn) => { - if (annotationOn == props.Document) { + if (annotationOn === props.Document) { doc.Set(KeyStore.AnnotationOn, undefined, true); } }) @@ -138,7 +140,7 @@ export class CollectionBaseView extends React.Component { @action.bound moveDocument(doc: Document, targetCollection: Document, addDocument: (doc: Document) => boolean): boolean { if (this.props.Document === targetCollection) { - return false; + return true; } if (this.removeDocument(doc)) { return addDocument(doc); diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index ced46cc25..9dade94f1 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -90,7 +90,7 @@ export class CollectionSchemaView extends CollectionViewBase { ) let reference = React.createRef(); - let onItemDown = setupDrag(reference, () => props.Document, (containingCollection: CollectionView) => this.props.removeDocument(props.Document)); + let onItemDown = setupDrag(reference, () => props.Document, this.props.moveDocument); let applyToDoc = (doc: Document, value: string) => { let script = CompileScript(value, { this: doc }, true); if (!script.compiled) { @@ -150,7 +150,7 @@ export class CollectionSchemaView extends CollectionViewBase { } }), style: { - background: rowInfo.index == this._selectedIndex ? "lightGray" : "white", + background: rowInfo.index === this._selectedIndex ? "lightGray" : "white", //color: rowInfo.index == this._selectedIndex ? "white" : "black" } }; @@ -179,8 +179,8 @@ export class CollectionSchemaView extends CollectionViewBase { @action toggleExpander = (event: React.ChangeEvent) => { this._startSplitPercent = this.splitPercentage; - if (this._startSplitPercent == this.splitPercentage) { - this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage == 0 ? 33 : 0); + if (this._startSplitPercent === this.splitPercentage) { + this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage === 0 ? 33 : 0); } } @@ -209,8 +209,8 @@ export class CollectionSchemaView extends CollectionViewBase { onDividerUp = (e: PointerEvent): void => { document.removeEventListener("pointermove", this.onDividerMove); document.removeEventListener('pointerup', this.onDividerUp); - if (this._startSplitPercent == this.splitPercentage) { - this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage == 0 ? 33 : 0); + if (this._startSplitPercent === this.splitPercentage) { + this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage === 0 ? 33 : 0); } } onDividerDown = (e: React.PointerEvent) => { @@ -290,7 +290,7 @@ export class CollectionSchemaView extends CollectionViewBase { let doc: any = selected ? selected.Get(new Key(this.previewScript)) : undefined; // let doc = CompileScript(this.previewScript, { this: selected }, true)(); - let content = this._selectedIndex == -1 || !selected ? (null) : ( + let content = this._selectedIndex === -1 || !selected ? (null) : ( {({ measureRef }) =>
    @@ -313,7 +313,7 @@ export class CollectionSchemaView extends CollectionViewBase { } ) - let dividerDragger = this.splitPercentage == 0 ? (null) : + let dividerDragger = this.splitPercentage === 0 ? (null) :
    //options button and menu @@ -323,7 +323,7 @@ export class CollectionSchemaView extends CollectionViewBase {
    Options
    Preview Window
    -
    Show Preview
    +
    Show Preview
    Displayed Columns
      {Array.from(Object.keys(allKeys)).map(item => diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 6f9ba40d2..32d74164d 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -7,7 +7,7 @@ import { Document } from "../../../fields/Document"; import { FieldWaiting } from "../../../fields/Field"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; -import { setupDrag } from "../../util/DragManager"; +import { setupDrag, DragManager } from "../../util/DragManager"; import { EditableView } from "../EditableView"; import "./CollectionTreeView.scss"; import { CollectionView } from "./CollectionView"; @@ -19,6 +19,7 @@ import { COLLECTION_BORDER_WIDTH } from './CollectionBaseView'; export interface TreeViewProps { document: Document; deleteDoc: (doc: Document) => void; + moveDocument: DragManager.MoveFunction; } export enum BulletType { @@ -49,6 +50,16 @@ class TreeView extends React.Component { } } + @action + move: DragManager.MoveFunction = (document, target, addDoc) => { + if (this.props.document === target) { + return true; + } + //TODO This should check if it was removed + this.remove(document) + return addDoc(document); + } + renderBullet(type: BulletType) { let onClicked = action(() => this._collapsed = !this._collapsed); let bullet: IconProp | undefined = undefined; @@ -64,7 +75,7 @@ class TreeView extends React.Component { */ renderTitle() { let reference = React.createRef(); - let onItemDown = setupDrag(reference, () => this.props.document, (containingCollection: CollectionView) => this.props.deleteDoc(this.props.document)); + let onItemDown = setupDrag(reference, () => this.props.document, this.props.moveDocument); let editableView = (titleString: string) => ( { if (!this._collapsed) { bulletType = BulletType.Collapsible; childElements =
        - {children.Data.map(value => )} + {children.Data.map(value => )}
      } else bulletType = BulletType.Collapsed; @@ -122,7 +133,7 @@ export class CollectionTreeView extends CollectionViewBase { var children = this.props.Document.GetT>(KeyStore.Data, ListField); let childrenElement = !children || children === FieldWaiting ? (null) : (children.Data.map(value => - ) + ) ) return ( diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index d440dcff9..5b4caf58d 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -8,16 +8,21 @@ import { CollectionTreeView } from './CollectionTreeView'; import { ContextMenu } from '../ContextMenu'; import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils'; import { KeyStore } from '../../../fields/KeyStore'; +import { observer } from 'mobx-react'; + +@observer export class CollectionView extends React.Component { 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.Freeform: return () case CollectionViewType.Schema: return () case CollectionViewType.Docking: return () case CollectionViewType.Tree: return () + case CollectionViewType.Freeform: + default: + return () } return (null); } diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 2b858789f..147e5fd6b 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -80,6 +80,8 @@ export class CollectionViewBase extends React.Component } else if (de.data.moveDocument) { const move = de.data.moveDocument; added = de.data.droppedDocuments.reduce((added, d) => added || move(d, this.props.Document, this.props.addDocument), false) + } else { + added = de.data.droppedDocuments.reduce((added, d) => added || this.props.addDocument(d), false) } e.stopPropagation(); return added; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index f03205739..4aad06607 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -245,6 +245,7 @@ export class CollectionFreeFormView extends CollectionViewBase { Document: document, addDocument: this.props.addDocument, removeDocument: this.props.removeDocument, + moveDocument: this.props.moveDocument, ScreenToLocalTransform: this.getTransform, isTopMost: false, selectOnLoad: document.Id === this._selectOnLoaded, diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 3b146654c..2a9b3b9ac 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -27,7 +27,7 @@ export interface DocumentViewProps { Document: Document; addDocument?: (doc: Document, allowDuplicates?: boolean) => boolean; removeDocument?: (doc: Document) => boolean; - moveDocument?: (doc: Document, targetCollection: Document, addDocument: (document: Document) => void) => boolean; + moveDocument?: (doc: Document, targetCollection: Document, addDocument: (document: Document) => boolean) => boolean; ScreenToLocalTransform: () => Transform; isTopMost: boolean; ContentScaling: () => number; -- cgit v1.2.3-70-g09d2 From 0403ee1f31d3f127a44aaabdfd21785d7efa6430 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Fri, 5 Apr 2019 01:17:41 -0400 Subject: Fixed remaining linter warnings --- src/client/northstar/core/BaseObject.ts | 2 +- .../northstar/core/attribute/AttributeModel.ts | 4 +- .../core/attribute/AttributeTransformationModel.ts | 2 +- .../core/attribute/CalculatedAttributeModel.ts | 4 +- src/client/northstar/core/filter/FilterModel.ts | 6 +- .../northstar/core/filter/ValueComparision.ts | 8 +- src/client/northstar/dash-fields/HistogramField.ts | 8 +- .../dash-nodes/HistogramBinPrimitiveCollection.ts | 46 ++++----- src/client/northstar/dash-nodes/HistogramBox.tsx | 12 +-- .../dash-nodes/HistogramBoxPrimitives.tsx | 18 ++-- .../dash-nodes/HistogramLabelPrimitives.tsx | 10 +- src/client/northstar/manager/Gateway.ts | 8 +- src/client/northstar/model/ModelExtensions.ts | 14 +-- src/client/northstar/model/ModelHelpers.ts | 10 +- .../model/binRanges/DateTimeVisualBinRange.ts | 24 ++--- .../northstar/model/binRanges/VisualBinRange.ts | 4 - .../model/binRanges/VisualBinRangeHelper.ts | 7 +- .../northstar/model/idea/MetricTypeMapping.ts | 28 +++--- src/client/northstar/operations/BaseOperation.ts | 8 +- .../northstar/operations/HistogramOperation.ts | 2 +- src/client/northstar/utils/ArrayUtil.ts | 14 +-- src/client/northstar/utils/GeometryUtil.ts | 2 +- src/client/northstar/utils/MathUtil.ts | 12 +-- src/client/northstar/utils/SizeConverter.ts | 4 +- src/client/northstar/utils/Utils.ts | 12 +-- src/client/views/DocumentDecorations.tsx | 4 +- src/client/views/Main.tsx | 4 +- .../views/collections/CollectionBaseView.tsx | 8 +- .../views/collections/CollectionDockingView.tsx | 30 +++--- src/client/views/collections/CollectionPDFView.tsx | 2 +- .../views/collections/CollectionSchemaView.tsx | 2 +- .../views/collections/CollectionVideoView.tsx | 4 +- src/client/views/collections/CollectionView.tsx | 2 +- .../views/collections/CollectionViewBase.tsx | 4 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 4 +- .../collections/collectionFreeForm/MarqueeView.tsx | 12 +-- .../collectionFreeForm/PreviewCursor.tsx | 2 +- src/client/views/nodes/Annotation.tsx | 108 ++++++++++----------- src/client/views/nodes/AudioBox.tsx | 2 +- src/client/views/nodes/DocumentContentsView.tsx | 2 +- src/client/views/nodes/KeyValueBox.tsx | 6 +- src/client/views/nodes/LinkBox.tsx | 2 +- src/client/views/nodes/LinkMenu.tsx | 2 +- src/client/views/nodes/VideoBox.tsx | 2 +- src/client/views/nodes/WebBox.tsx | 2 +- src/fields/AudioField.ts | 2 +- src/fields/BasicField.ts | 2 +- src/fields/ImageField.ts | 2 +- src/fields/ListField.ts | 10 +- src/fields/PDFField.ts | 2 +- src/fields/VideoField.ts | 2 +- src/server/index.ts | 2 +- 52 files changed, 245 insertions(+), 250 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/northstar/core/BaseObject.ts b/src/client/northstar/core/BaseObject.ts index e9e766e31..f1761e643 100644 --- a/src/client/northstar/core/BaseObject.ts +++ b/src/client/northstar/core/BaseObject.ts @@ -4,7 +4,7 @@ import { IDisposable } from '../utils/IDisposable' export class BaseObject implements IEquatable, IDisposable { public Equals(other: Object): boolean { - return this == other; + return this === other; } public Dispose(): void { diff --git a/src/client/northstar/core/attribute/AttributeModel.ts b/src/client/northstar/core/attribute/AttributeModel.ts index 124a5b45a..230bfecc8 100644 --- a/src/client/northstar/core/attribute/AttributeModel.ts +++ b/src/client/northstar/core/attribute/AttributeModel.ts @@ -34,7 +34,7 @@ export class ColumnAttributeModel extends AttributeModel { } public Equals(other: ColumnAttributeModel): boolean { - return this.Attribute.rawName == other.Attribute.rawName; + return this.Attribute.rawName === other.Attribute.rawName; } } @@ -105,7 +105,7 @@ export class BackendAttributeModel extends AttributeModel { } public Equals(other: BackendAttributeModel): boolean { - return this.Id == other.Id; + return this.Id === other.Id; } } \ No newline at end of file diff --git a/src/client/northstar/core/attribute/AttributeTransformationModel.ts b/src/client/northstar/core/attribute/AttributeTransformationModel.ts index cc5aa7154..f50b78d51 100644 --- a/src/client/northstar/core/attribute/AttributeTransformationModel.ts +++ b/src/client/northstar/core/attribute/AttributeTransformationModel.ts @@ -41,7 +41,7 @@ export class AttributeTransformationModel implements IEquatable { } public Equals(other: AttributeTransformationModel): boolean { - return this.AggregateFunction == other.AggregateFunction && + return this.AggregateFunction === other.AggregateFunction && this.AttributeModel.Equals(other.AttributeModel); } } \ No newline at end of file diff --git a/src/client/northstar/core/attribute/CalculatedAttributeModel.ts b/src/client/northstar/core/attribute/CalculatedAttributeModel.ts index ab96c794d..0b8e0d12c 100644 --- a/src/client/northstar/core/attribute/CalculatedAttributeModel.ts +++ b/src/client/northstar/core/attribute/CalculatedAttributeModel.ts @@ -11,7 +11,7 @@ export class CalculatedAttributeManager { public static CreateBackendAttributeModel(id: string, dataType: DataType, displayName: string, codeName: string, visualizationHints: VisualizationHint[]): BackendAttributeModel { var filtered = this.AllCalculatedAttributes.filter(am => { if (am instanceof BackendAttributeModel && - am.Id == id) { + am.Id === id) { return true; } return false; @@ -27,7 +27,7 @@ export class CalculatedAttributeManager { public static CreateCodeAttributeModel(code: string, codeName: string, visualizationHints: VisualizationHint[]): CodeAttributeModel { var filtered = this.AllCalculatedAttributes.filter(am => { if (am instanceof CodeAttributeModel && - am.CodeName == codeName) { + am.CodeName === codeName) { return true; } return false; diff --git a/src/client/northstar/core/filter/FilterModel.ts b/src/client/northstar/core/filter/FilterModel.ts index aee99d2b6..20fca77f5 100644 --- a/src/client/northstar/core/filter/FilterModel.ts +++ b/src/client/northstar/core/filter/FilterModel.ts @@ -46,16 +46,16 @@ export class FilterModel { let filtered = baseOperation.FilterModels.filter(fm => fm && fm.ValueComparisons.length > 0); if (!isFirst && filtered.length > 0) { filterModels.push(...filtered); - ret = "(" + baseOperation.FilterModels.filter(fm => fm != null).map(fm => fm.ToPythonString()).join(" || ") + ")"; + ret = "(" + baseOperation.FilterModels.filter(fm => fm !== null).map(fm => fm.ToPythonString()).join(" || ") + ")"; } if (Utils.isBaseFilterConsumer(baseOperation) && baseOperation.Links) { let children = new Array(); let linkedGraphNodes = baseOperation.Links; linkedGraphNodes.map(linkVm => { let filterDoc = linkVm.Get(KeyStore.LinkedFromDocs); - if (filterDoc && filterDoc != FieldWaiting && filterDoc instanceof Document) { + if (filterDoc && filterDoc !== FieldWaiting && filterDoc instanceof Document) { let filterHistogram = filterDoc.GetT(KeyStore.Data, HistogramField); - if (filterHistogram && filterHistogram != FieldWaiting) { + if (filterHistogram && filterHistogram !== FieldWaiting) { if (!visitedFilterProviders.has(filterHistogram.Data)) { let child = FilterModel.GetFilterModelsRecursive(filterHistogram.Data, visitedFilterProviders, filterModels, false); if (child !== "") { diff --git a/src/client/northstar/core/filter/ValueComparision.ts b/src/client/northstar/core/filter/ValueComparision.ts index 1e729d06e..1a3e461f5 100644 --- a/src/client/northstar/core/filter/ValueComparision.ts +++ b/src/client/northstar/core/filter/ValueComparision.ts @@ -20,7 +20,7 @@ export class ValueComparison { 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)) return false; @@ -58,13 +58,13 @@ export class ValueComparison { var rawName = this.attributeModel.CodeName; switch (this.Predicate) { case Predicate.STARTS_WITH: - ret += rawName + " != null && " + rawName + ".StartsWith(" + val + ") "; + ret += rawName + " !== null && " + rawName + ".StartsWith(" + val + ") "; return ret; case Predicate.ENDS_WITH: - ret += rawName + " != null && " + rawName + ".EndsWith(" + val + ") "; + ret += rawName + " !== null && " + rawName + ".EndsWith(" + val + ") "; return ret; case Predicate.CONTAINS: - ret += rawName + " != null && " + rawName + ".Contains(" + val + ") "; + ret += rawName + " !== null && " + rawName + ".Contains(" + val + ") "; return ret; default: ret += rawName + " " + op + " " + val + " "; diff --git a/src/client/northstar/dash-fields/HistogramField.ts b/src/client/northstar/dash-fields/HistogramField.ts index 90be70b80..f939ccd83 100644 --- a/src/client/northstar/dash-fields/HistogramField.ts +++ b/src/client/northstar/dash-fields/HistogramField.ts @@ -16,7 +16,7 @@ export class HistogramField extends BasicField { omitKeys(obj: any, keys: any) { var dup: any = {}; for (var key in obj) { - if (keys.indexOf(key) == -1) { + if (keys.indexOf(key) === -1) { dup[key] = obj[key]; } } @@ -54,13 +54,13 @@ export class HistogramField extends BasicField { let schema = CurrentUserUtils.GetNorthstarSchema(jp.SchemaName); if (schema) { CurrentUserUtils.GetAllNorthstarColumnAttributes(schema).map(attr => { - if (attr.displayName == jp.X.AttributeModel.Attribute.DisplayName) { + if (attr.displayName === jp.X.AttributeModel.Attribute.DisplayName) { X = new AttributeTransformationModel(new ColumnAttributeModel(attr), jp.X.AggregateFunction); } - if (attr.displayName == jp.Y.AttributeModel.Attribute.DisplayName) { + if (attr.displayName === jp.Y.AttributeModel.Attribute.DisplayName) { Y = new AttributeTransformationModel(new ColumnAttributeModel(attr), jp.Y.AggregateFunction); } - if (attr.displayName == jp.V.AttributeModel.Attribute.DisplayName) { + if (attr.displayName === jp.V.AttributeModel.Attribute.DisplayName) { V = new AttributeTransformationModel(new ColumnAttributeModel(attr), jp.V.AggregateFunction); } }); diff --git a/src/client/northstar/dash-nodes/HistogramBinPrimitiveCollection.ts b/src/client/northstar/dash-nodes/HistogramBinPrimitiveCollection.ts index 43e768c62..cdae90c8b 100644 --- a/src/client/northstar/dash-nodes/HistogramBinPrimitiveCollection.ts +++ b/src/client/northstar/dash-nodes/HistogramBinPrimitiveCollection.ts @@ -48,28 +48,28 @@ export class HistogramBinPrimitiveCollection { // adjust brush rects (stacking or not) var allBrushIndex = ModelHelpers.AllBrushIndex(this.histoResult); - var filteredBinPrims = this.BinPrimitives.filter(b => b.BrushIndex != allBrushIndex && b.DataValue != 0.0); + var filteredBinPrims = this.BinPrimitives.filter(b => b.BrushIndex !== allBrushIndex && b.DataValue !== 0.0); filteredBinPrims.reduce((sum, fbp) => { - if (histoBox.ChartType == ChartType.VerticalBar) { - if (this.histoOp.Y.AggregateFunction == AggregateFunction.Count) { + if (histoBox.ChartType === ChartType.VerticalBar) { + if (this.histoOp.Y.AggregateFunction === AggregateFunction.Count) { fbp.Rect = new PIXIRectangle(fbp.Rect.x, fbp.Rect.y - sum, fbp.Rect.width, fbp.Rect.height); fbp.MarginRect = new PIXIRectangle(fbp.MarginRect.x, fbp.MarginRect.y - sum, fbp.MarginRect.width, fbp.MarginRect.height); return sum + fbp.Rect.height; } - if (this.histoOp.Y.AggregateFunction == AggregateFunction.Avg) { + if (this.histoOp.Y.AggregateFunction === AggregateFunction.Avg) { var w = fbp.Rect.width / 2.0; fbp.Rect = new PIXIRectangle(fbp.Rect.x + sum, fbp.Rect.y, fbp.Rect.width / filteredBinPrims.length, fbp.Rect.height); fbp.MarginRect = new PIXIRectangle(fbp.MarginRect.x - w + sum + (fbp.Rect.width / 2.0), fbp.MarginRect.y, fbp.MarginRect.width, fbp.MarginRect.height); return sum + fbp.Rect.width; } } - else if (histoBox.ChartType == ChartType.HorizontalBar) { - if (this.histoOp.X.AggregateFunction == AggregateFunction.Count) { + else if (histoBox.ChartType === ChartType.HorizontalBar) { + if (this.histoOp.X.AggregateFunction === AggregateFunction.Count) { fbp.Rect = new PIXIRectangle(fbp.Rect.x + sum, fbp.Rect.y, fbp.Rect.width, fbp.Rect.height); fbp.MarginRect = new PIXIRectangle(fbp.MarginRect.x + sum, fbp.MarginRect.y, fbp.MarginRect.width, fbp.MarginRect.height); return sum + fbp.Rect.width; } - if (this.histoOp.X.AggregateFunction == AggregateFunction.Avg) { + if (this.histoOp.X.AggregateFunction === AggregateFunction.Avg) { var h = fbp.Rect.height / 2.0; fbp.Rect = new PIXIRectangle(fbp.Rect.x, fbp.Rect.y + sum, fbp.Rect.width, fbp.Rect.height / filteredBinPrims.length); fbp.MarginRect = new PIXIRectangle(fbp.MarginRect.x, fbp.MarginRect.y - h + sum + (fbp.Rect.height / 2.0), fbp.MarginRect.width, fbp.MarginRect.height); @@ -79,19 +79,19 @@ export class HistogramBinPrimitiveCollection { return 0; }, 0); this.BinPrimitives = this.BinPrimitives.reverse(); - var f = this.BinPrimitives.filter(b => b.BrushIndex == allBrushIndex); + var f = this.BinPrimitives.filter(b => b.BrushIndex === allBrushIndex); this.HitGeom = f.length > 0 ? f[0].Rect : PIXIRectangle.EMPTY; } private setupBrushing(bin: Bin, normalization: number) { var overlapBrushIndex = ModelHelpers.OverlapBrushIndex(this.histoResult); var orderedBrushes = [this.histoResult.brushes![0], this.histoResult.brushes![overlapBrushIndex]]; - this.histoResult.brushes!.map(brush => brush.brushIndex != 0 && brush.brushIndex != overlapBrushIndex && orderedBrushes.push(brush)); + this.histoResult.brushes!.map(brush => brush.brushIndex !== 0 && brush.brushIndex !== overlapBrushIndex && orderedBrushes.push(brush)); return { orderedBrushes, maxAxis: orderedBrushes.reduce((prev, Brush) => { let aggResult = this.getBinValue(normalization, bin, Brush.brushIndex!); - return aggResult != undefined && aggResult > prev ? aggResult : prev; + return aggResult !== undefined && aggResult > prev ? aggResult : prev; }, Number.MIN_VALUE) }; } @@ -99,7 +99,7 @@ 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 ? @@ -112,7 +112,7 @@ export class HistogramBinPrimitiveCollection { let [yFrom, yTo] = this.sizeConverter.DataToScreenYAxisRange(this._histoBox.VisualBinRanges, 1, bin); var returnBrushFactorSum = brushFactorSum; - if (allUnNormalizedValue != undefined) { + if (allUnNormalizedValue !== undefined) { var brushFactor = (unNormalizedValue / allUnNormalizedValue); returnBrushFactorSum += brushFactor; returnBrushFactorSum = Math.min(returnBrushFactorSum, 1.0); @@ -141,11 +141,11 @@ export class HistogramBinPrimitiveCollection { private createSinglePointChartBinPrimitives(bin: Bin, brush: Brush): number { let unNormalizedValue = this.getBinValue(2, bin, brush.brushIndex!); - if (unNormalizedValue != undefined) { + if (unNormalizedValue !== undefined) { 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; @@ -153,7 +153,7 @@ export class HistogramBinPrimitiveCollection { private createVerticalBarChartBinPrimitives(bin: Bin, brush: Brush, binBrushMaxAxis: number, normalization: number): number { let dataValue = this.getBinValue(1, bin, brush.brushIndex!); - if (dataValue != undefined) { + if (dataValue !== undefined) { let [yFrom, yValue, yTo] = this.sizeConverter.DataToScreenNormalizedRange(dataValue, normalization, 1, binBrushMaxAxis); let [xFrom, xTo] = this.sizeConverter.DataToScreenXAxisRange(this._histoBox.VisualBinRanges, 0, bin); @@ -163,14 +163,14 @@ export class HistogramBinPrimitiveCollection { this.sizeConverter.DataToScreenY(yValue - yMarginAbsolute) - this.sizeConverter.DataToScreenY(yValue + yMarginAbsolute)); this.createBinPrimitive(1, brush, marginRect, 0, xFrom, xTo, yFrom, yTo, - this.baseColorFromBrush(brush), normalization != 0 ? 1 : 0.6 * binBrushMaxAxis / this.sizeConverter.DataRanges[1] + 0.4, dataValue); + this.baseColorFromBrush(brush), normalization !== 0 ? 1 : 0.6 * binBrushMaxAxis / this.sizeConverter.DataRanges[1] + 0.4, dataValue); } return 0; } private createHorizontalBarChartBinPrimitives(bin: Bin, brush: Brush, binBrushMaxAxis: number, normalization: number): number { let dataValue = this.getBinValue(0, bin, brush.brushIndex!); - if (dataValue != undefined) { + if (dataValue !== undefined) { let [xFrom, xValue, xTo] = this.sizeConverter.DataToScreenNormalizedRange(dataValue, normalization, 0, binBrushMaxAxis); let [yFrom, yTo] = this.sizeConverter.DataToScreenYAxisRange(this._histoBox.VisualBinRanges, 1, bin); @@ -181,15 +181,15 @@ export class HistogramBinPrimitiveCollection { 2.0); this.createBinPrimitive(0, brush, marginRect, 0, xFrom, xTo, yFrom, yTo, - this.baseColorFromBrush(brush), normalization != 1 ? 1 : 0.6 * binBrushMaxAxis / this.sizeConverter.DataRanges[0] + 0.4, dataValue); + this.baseColorFromBrush(brush), normalization !== 1 ? 1 : 0.6 * binBrushMaxAxis / this.sizeConverter.DataRanges[0] + 0.4, dataValue); } return 0; } public getBinValue(axis: number, bin: Bin, brushIndex: number) { - var aggregateKey = ModelHelpers.CreateAggregateKey(this.histoOp.Schema!.distinctAttributeParameters, axis == 0 ? this.histoOp.X : axis == 1 ? this.histoOp.Y : this.histoOp.V, this.histoResult, brushIndex); + var aggregateKey = ModelHelpers.CreateAggregateKey(this.histoOp.Schema!.distinctAttributeParameters, axis === 0 ? this.histoOp.X : axis === 1 ? this.histoOp.Y : this.histoOp.V, this.histoResult, brushIndex); let dataValue = ModelHelpers.GetAggregateResult(bin, aggregateKey) as DoubleValueAggregateResult; - return dataValue != null && dataValue.hasResult ? dataValue.result : undefined; + return dataValue !== null && dataValue.hasResult ? dataValue.result : undefined; } private getMargin(bin: Bin, brush: Brush, axis: AttributeTransformationModel) { @@ -218,13 +218,13 @@ export class HistogramBinPrimitiveCollection { private baseColorFromBrush(brush: Brush): number { let bc = StyleConstants.BRUSH_COLORS; - if (brush.brushIndex == ModelHelpers.RestBrushIndex(this.histoResult)) { + if (brush.brushIndex === ModelHelpers.RestBrushIndex(this.histoResult)) { return StyleConstants.HIGHLIGHT_COLOR; } - else if (brush.brushIndex == ModelHelpers.OverlapBrushIndex(this.histoResult)) { + else if (brush.brushIndex === ModelHelpers.OverlapBrushIndex(this.histoResult)) { return StyleConstants.OVERLAP_COLOR; } - else if (brush.brushIndex == ModelHelpers.AllBrushIndex(this.histoResult)) { + else if (brush.brushIndex === ModelHelpers.AllBrushIndex(this.histoResult)) { return 0x00ff00; } else if (bc.length > 0) { diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx index 5938bf9b1..c9658d741 100644 --- a/src/client/northstar/dash-nodes/HistogramBox.tsx +++ b/src/client/northstar/dash-nodes/HistogramBox.tsx @@ -55,7 +55,7 @@ export class HistogramBox extends React.Component { dropX = (e: Event, de: DragManager.DropEvent) => { if (de.data instanceof DragManager.DocumentDragData) { let h = de.data.draggedDocuments[0].GetT(KeyStore.Data, HistogramField); - if (h && h != FieldWaiting) { + if (h && h !== FieldWaiting) { this.HistoOp.X = h.Data.X; } e.stopPropagation(); @@ -66,7 +66,7 @@ export class HistogramBox extends React.Component { dropY = (e: Event, de: DragManager.DropEvent) => { if (de.data instanceof DragManager.DocumentDragData) { let h = de.data.draggedDocuments[0].GetT(KeyStore.Data, HistogramField); - if (h && h != FieldWaiting) { + if (h && h !== FieldWaiting) { this.HistoOp.Y = h.Data.X; } e.stopPropagation(); @@ -76,11 +76,11 @@ export class HistogramBox extends React.Component { @action xLabelPointerDown = (e: React.PointerEvent) => { - this.HistoOp.X = new AttributeTransformationModel(this.HistoOp.X.AttributeModel, this.HistoOp.X.AggregateFunction == AggregateFunction.None ? AggregateFunction.Count : AggregateFunction.None); + this.HistoOp.X = new AttributeTransformationModel(this.HistoOp.X.AttributeModel, this.HistoOp.X.AggregateFunction === AggregateFunction.None ? AggregateFunction.Count : AggregateFunction.None); } @action yLabelPointerDown = (e: React.PointerEvent) => { - this.HistoOp.Y = new AttributeTransformationModel(this.HistoOp.Y.AttributeModel, this.HistoOp.Y.AggregateFunction == AggregateFunction.None ? AggregateFunction.Count : AggregateFunction.None); + this.HistoOp.Y = new AttributeTransformationModel(this.HistoOp.Y.AttributeModel, this.HistoOp.Y.AggregateFunction === AggregateFunction.None ? AggregateFunction.Count : AggregateFunction.None); } componentDidMount() { @@ -119,7 +119,7 @@ export class HistogramBox extends React.Component { if (catalog) { this.props.Document.GetTAsync(this.props.fieldKey, HistogramField).then((histoOp: Opt) => runInAction(() => { this.HistoOp = histoOp ? histoOp.Data : HistogramOperation.Empty; - if (this.HistoOp != HistogramOperation.Empty) { + if (this.HistoOp !== HistogramOperation.Empty) { reaction(() => this.props.Document.GetList(KeyStore.LinkedFromDocs, []), (docs: Document[]) => this.HistoOp.Links.splice(0, this.HistoOp.Links.length, ...docs), { fireImmediately: true }); reaction(() => this.props.Document.GetList(KeyStore.BrushingDocs, []).length, () => { @@ -128,7 +128,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 }); diff --git a/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx b/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx index e9adb3ce5..66d31846c 100644 --- a/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx +++ b/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx @@ -44,7 +44,7 @@ export class HistogramBoxPrimitives extends React.Component bp.BrushIndex == allBrushIndex); + let allBrushPrim = ArrayUtil.FirstOrDefault(binPrimitives, bp => bp.BrushIndex === allBrushIndex); return !allBrushPrim ? () => { } : () => runInAction(() => { if (ArrayUtil.Contains(this.histoOp.FilterModels, filterModel)) { this._selectedPrims.splice(this._selectedPrims.indexOf(allBrushPrim!), 1); @@ -63,9 +63,9 @@ export class HistogramBoxPrimitives extends React.Component { 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) - 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)); + 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) + 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[]); } @@ -86,8 +86,8 @@ export class HistogramBoxPrimitives extends React.Component); return this.drawEntity(xFrom, yFrom, line); } @@ -102,10 +102,10 @@ export class HistogramBoxPrimitives extends React.Component { if (e.button == 0) tapHandler() }} + let rect = (
      { if (e.button === 0) tapHandler() }} style={{ - borderBottomStyle: barAxis == 1 ? "none" : "solid", - borderLeftStyle: barAxis == 0 ? "none" : "solid", + borderBottomStyle: barAxis === 1 ? "none" : "solid", + borderLeftStyle: barAxis === 0 ? "none" : "solid", width: `${widthPercent}%`, height: `${heightPercent}%`, background: color ? `${LABColor.RGBtoHexString(color)}` : "" diff --git a/src/client/northstar/dash-nodes/HistogramLabelPrimitives.tsx b/src/client/northstar/dash-nodes/HistogramLabelPrimitives.tsx index 93b237deb..dd62e9146 100644 --- a/src/client/northstar/dash-nodes/HistogramLabelPrimitives.tsx +++ b/src/client/northstar/dash-nodes/HistogramLabelPrimitives.tsx @@ -34,7 +34,7 @@ export class HistogramLabelPrimitives extends React.ComponentFontStyles.AxisLabel.fontSize + 5))); sc.MaxLabelSizes[axis].coords[axis] + 5); @@ -47,17 +47,17 @@ export class HistogramLabelPrimitives extends React.Component -
      +
      {label}
      diff --git a/src/client/northstar/manager/Gateway.ts b/src/client/northstar/manager/Gateway.ts index 3e72a50ae..ba6fe2ad5 100644 --- a/src/client/northstar/manager/Gateway.ts +++ b/src/client/northstar/manager/Gateway.ts @@ -49,7 +49,7 @@ export class Gateway { public async Compile(data: any): Promise { const json = await this.MakePostJsonRequest("compile", data); - if (json != null) { + if (json !== null) { const cr = CompileResults.fromJS(json); return cr; } @@ -108,7 +108,7 @@ export class Gateway { public async StartOperation(data: any): Promise { const json = await this.MakePostJsonRequest("operation", data); - if (json != null) { + if (json !== null) { const or = OperationReference.fromJS(json); return or; } @@ -116,7 +116,7 @@ export class Gateway { public async GetResult(data: any): Promise { const json = await this.MakePostJsonRequest("result", data); - if (json != null) { + if (json !== null) { const res = Result.fromJS(json); return res; } @@ -163,7 +163,7 @@ export class Gateway { public static ConstructUrl(appendix: string): string { let base = Settings.Instance.ServerUrl; - if (base.slice(-1) == "/") { + if (base.slice(-1) === "/") { base = base.slice(0, -1); } let url = base + "/" + Settings.Instance.ServerApiPath + "/" + appendix; diff --git a/src/client/northstar/model/ModelExtensions.ts b/src/client/northstar/model/ModelExtensions.ts index 9fcba7f1c..e4bf77ed8 100644 --- a/src/client/northstar/model/ModelExtensions.ts +++ b/src/client/northstar/model/ModelExtensions.ts @@ -3,23 +3,23 @@ import { Utils } from '../utils/Utils' import { FilterModel } from '../core/filter/FilterModel' -(SingleDimensionAggregateParameters as any).prototype["Equals"] = function (other: Object) { +(SingleDimensionAggregateParameters as any).prototype.Equals = function (other: Object) { if (!Utils.EqualityHelper(this, other)) return false; if (!Utils.EqualityHelper((this as SingleDimensionAggregateParameters).attributeParameters!, (other as SingleDimensionAggregateParameters).attributeParameters!)) return false; - if (!((this as SingleDimensionAggregateParameters).attributeParameters! as any)["Equals"]((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) { + (AttributeParameters as any).prototype.Equals = function (other: AttributeParameters) { return (this).constructor.name === (other).constructor.name && this.rawName === other.rawName; } } { - (Solution as any).prototype["Equals"] = function (other: Object) { + (Solution as any).prototype.Equals = function (other: Object) { if (!Utils.EqualityHelper(this, other)) return false; if ((this as Solution).solutionId !== (other as Solution).solutionId) return false; return true; @@ -27,11 +27,11 @@ import { FilterModel } from '../core/filter/FilterModel' } { - (MarginAggregateParameters as any).prototype["Equals"] = function (other: Object) { + (MarginAggregateParameters as any).prototype.Equals = function (other: Object) { if (!Utils.EqualityHelper(this, other)) return false; if (!Utils.EqualityHelper((this as SingleDimensionAggregateParameters).attributeParameters!, (other as SingleDimensionAggregateParameters).attributeParameters!)) return false; - if (!((this as SingleDimensionAggregateParameters).attributeParameters! as any)["Equals"]((other as SingleDimensionAggregateParameters).attributeParameters!)) return false; + if (!((this as SingleDimensionAggregateParameters).attributeParameters! as any).Equals((other as SingleDimensionAggregateParameters).attributeParameters!)) return false; if ((this as MarginAggregateParameters).aggregateFunction !== (other as MarginAggregateParameters).aggregateFunction) return false; return true; @@ -39,7 +39,7 @@ import { FilterModel } from '../core/filter/FilterModel' } { - (Brush as any).prototype["Equals"] = function (other: Object) { + (Brush as any).prototype.Equals = function (other: Object) { if (!Utils.EqualityHelper(this, other)) return false; if ((this as Brush).brushEnum !== (other as Brush).brushEnum) return false; if ((this as Brush).brushIndex !== (other as Brush).brushIndex) return false; diff --git a/src/client/northstar/model/ModelHelpers.ts b/src/client/northstar/model/ModelHelpers.ts index d0711fb69..1a58e6180 100644 --- a/src/client/northstar/model/ModelHelpers.ts +++ b/src/client/northstar/model/ModelHelpers.ts @@ -16,7 +16,7 @@ export class ModelHelpers { public static CreateAggregateKey(distinctAttributeParameters: AttributeParameters | undefined, atm: AttributeTransformationModel, histogramResult: HistogramResult, brushIndex: number, aggParameters?: SingleDimensionAggregateParameters): AggregateKey { { - if (aggParameters == undefined) { + if (aggParameters === undefined) { aggParameters = ModelHelpers.GetAggregateParameter(distinctAttributeParameters, atm); } else { @@ -146,7 +146,7 @@ export class ModelHelpers { } public static GetAggregateResult(bin: Bin, aggregateKey: AggregateKey) { - if (aggregateKey.aggregateParameterIndex == -1 || aggregateKey.brushIndex == -1) { + if (aggregateKey.aggregateParameterIndex === -1 || aggregateKey.brushIndex === -1) { return null; } return bin.aggregateResults![aggregateKey.aggregateParameterIndex! * bin.ySize! + aggregateKey.brushIndex!]; @@ -157,9 +157,9 @@ export class ModelHelpers { var ret = new Array(); ret.push(AggregateFunction.None); ret.push(AggregateFunction.Count); - if (atm.AttributeModel.DataType == DataType.Float || - atm.AttributeModel.DataType == DataType.Double || - atm.AttributeModel.DataType == DataType.Int) { + if (atm.AttributeModel.DataType === DataType.Float || + atm.AttributeModel.DataType === DataType.Double || + atm.AttributeModel.DataType === DataType.Int) { ret.push(AggregateFunction.Avg); ret.push(AggregateFunction.Sum); } diff --git a/src/client/northstar/model/binRanges/DateTimeVisualBinRange.ts b/src/client/northstar/model/binRanges/DateTimeVisualBinRange.ts index 9313fb1a7..f5872aa4c 100644 --- a/src/client/northstar/model/binRanges/DateTimeVisualBinRange.ts +++ b/src/client/northstar/model/binRanges/DateTimeVisualBinRange.ts @@ -39,24 +39,24 @@ export class DateTimeVisualBinRange extends VisualBinRange { public GetLabel(value: number): string { var dt = DateTimeVisualBinRange.TicksToDate(value); - if (this.DataBinRange.step!.dateTimeStepGranularity == DateTimeStepGranularity.Second || - this.DataBinRange.step!.dateTimeStepGranularity == DateTimeStepGranularity.Minute) { + if (this.DataBinRange.step!.dateTimeStepGranularity === DateTimeStepGranularity.Second || + this.DataBinRange.step!.dateTimeStepGranularity === DateTimeStepGranularity.Minute) { return ("" + this.pad(dt.getMinutes(), 2) + ":" + this.pad(dt.getSeconds(), 2)); //return dt.ToString("mm:ss"); } - else if (this.DataBinRange.step!.dateTimeStepGranularity == DateTimeStepGranularity.Hour) { + else if (this.DataBinRange.step!.dateTimeStepGranularity === DateTimeStepGranularity.Hour) { return (this.pad(dt.getHours(), 2) + ":" + this.pad(dt.getMinutes(), 2)); //return dt.ToString("HH:mm"); } - else if (this.DataBinRange.step!.dateTimeStepGranularity == DateTimeStepGranularity.Day) { + else if (this.DataBinRange.step!.dateTimeStepGranularity === DateTimeStepGranularity.Day) { return ((dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear()); //return dt.ToString("MM/dd/yyyy"); } - else if (this.DataBinRange.step!.dateTimeStepGranularity == DateTimeStepGranularity.Month) { + else if (this.DataBinRange.step!.dateTimeStepGranularity === DateTimeStepGranularity.Month) { //return dt.ToString("MM/yyyy"); return ((dt.getMonth() + 1) + "/" + dt.getFullYear()); } - else if (this.DataBinRange.step!.dateTimeStepGranularity == DateTimeStepGranularity.Year) { + else if (this.DataBinRange.step!.dateTimeStepGranularity === DateTimeStepGranularity.Year) { return "" + dt.getFullYear(); } return "n/a"; @@ -82,22 +82,22 @@ export class DateTimeVisualBinRange extends VisualBinRange { public static AddToDateTimeTicks(ticks: number, dateTimeStep: DateTimeStep): number { var copiedDate = DateTimeVisualBinRange.TicksToDate(ticks); var returnDate: Date = new Date(Date.now()); - if (dateTimeStep.dateTimeStepGranularity == DateTimeStepGranularity.Second) { + if (dateTimeStep.dateTimeStepGranularity === DateTimeStepGranularity.Second) { returnDate = new Date(copiedDate.setSeconds(copiedDate.getSeconds() + dateTimeStep.dateTimeStepValue!)); } - else if (dateTimeStep.dateTimeStepGranularity == DateTimeStepGranularity.Minute) { + else if (dateTimeStep.dateTimeStepGranularity === DateTimeStepGranularity.Minute) { returnDate = new Date(copiedDate.setMinutes(copiedDate.getMinutes() + dateTimeStep.dateTimeStepValue!)); } - else if (dateTimeStep.dateTimeStepGranularity == DateTimeStepGranularity.Hour) { + else if (dateTimeStep.dateTimeStepGranularity === DateTimeStepGranularity.Hour) { returnDate = new Date(copiedDate.setHours(copiedDate.getHours() + dateTimeStep.dateTimeStepValue!)); } - else if (dateTimeStep.dateTimeStepGranularity == DateTimeStepGranularity.Day) { + else if (dateTimeStep.dateTimeStepGranularity === DateTimeStepGranularity.Day) { returnDate = new Date(copiedDate.setDate(copiedDate.getDate() + dateTimeStep.dateTimeStepValue!)); } - else if (dateTimeStep.dateTimeStepGranularity == DateTimeStepGranularity.Month) { + else if (dateTimeStep.dateTimeStepGranularity === DateTimeStepGranularity.Month) { returnDate = new Date(copiedDate.setMonth(copiedDate.getMonth() + dateTimeStep.dateTimeStepValue!)); } - else if (dateTimeStep.dateTimeStepGranularity == DateTimeStepGranularity.Year) { + else if (dateTimeStep.dateTimeStepGranularity === DateTimeStepGranularity.Year) { returnDate = new Date(copiedDate.setFullYear(copiedDate.getFullYear() + dateTimeStep.dateTimeStepValue!)); } return DateTimeVisualBinRange.DateToTicks(returnDate); diff --git a/src/client/northstar/model/binRanges/VisualBinRange.ts b/src/client/northstar/model/binRanges/VisualBinRange.ts index f53008f9a..a0766e494 100644 --- a/src/client/northstar/model/binRanges/VisualBinRange.ts +++ b/src/client/northstar/model/binRanges/VisualBinRange.ts @@ -2,10 +2,6 @@ import { BinLabel } from '../../model/idea/idea' export abstract class VisualBinRange { - constructor() { - - } - public abstract AddStep(value: number): number; public abstract GetValueFromIndex(index: number): number; diff --git a/src/client/northstar/model/binRanges/VisualBinRangeHelper.ts b/src/client/northstar/model/binRanges/VisualBinRangeHelper.ts index 53d585bb4..63ee61909 100644 --- a/src/client/northstar/model/binRanges/VisualBinRangeHelper.ts +++ b/src/client/northstar/model/binRanges/VisualBinRangeHelper.ts @@ -39,8 +39,7 @@ export class VisualBinRangeHelper { var aggregateKey = ModelHelpers.CreateAggregateKey(distinctAttributeParameters, attr, histoResult, ModelHelpers.AllBrushIndex(histoResult)); var minValue = Number.MAX_VALUE; var maxValue = Number.MIN_VALUE; - for (var b = 0; b < histoResult.brushes!.length; b++) { - var brush = histoResult.brushes![b]; + for (const brush of histoResult.brushes!) { aggregateKey.brushIndex = brush.brushIndex; for (var key in histoResult.bins) { if (histoResult.bins.hasOwnProperty(key)) { @@ -56,12 +55,12 @@ export class VisualBinRangeHelper { let visualBinRange = QuantitativeVisualBinRange.Initialize(minValue, maxValue, 10, false); - if (chartType == ChartType.HorizontalBar || chartType == ChartType.VerticalBar) { + if (chartType === ChartType.HorizontalBar || chartType === ChartType.VerticalBar) { visualBinRange = QuantitativeVisualBinRange.Initialize(Math.min(0, minValue), Math.max(0, (visualBinRange as QuantitativeVisualBinRange).DataBinRange.maxValue!), SETTINGS_X_BINS, false); } - else if (chartType == ChartType.SinglePoint) { + else if (chartType === ChartType.SinglePoint) { visualBinRange = QuantitativeVisualBinRange.Initialize(Math.min(0, minValue), Math.max(0, maxValue), SETTINGS_X_BINS, false); } diff --git a/src/client/northstar/model/idea/MetricTypeMapping.ts b/src/client/northstar/model/idea/MetricTypeMapping.ts index 11e0c871a..e9759cf16 100644 --- a/src/client/northstar/model/idea/MetricTypeMapping.ts +++ b/src/client/northstar/model/idea/MetricTypeMapping.ts @@ -5,20 +5,20 @@ import { Dictionary } from 'typescript-collections'; export class MetricTypeMapping { public static GetMetricInterpretation(metricType: MetricType): MetricInterpretation { - if (metricType == MetricType.Accuracy || - metricType == MetricType.F1 || - metricType == MetricType.F1Macro || - metricType == MetricType.F1Micro || - metricType == MetricType.JaccardSimilarityScore || - metricType == MetricType.ObjectDetectionAveragePrecision || - metricType == MetricType.Precision || - metricType == MetricType.PrecisionAtTopK || - metricType == MetricType.NormalizedMutualInformation || - metricType == MetricType.Recall || - metricType == MetricType.RocAucMacro || - metricType == MetricType.RocAuc || - metricType == MetricType.RocAucMicro || - metricType == MetricType.RSquared) { + if (metricType === MetricType.Accuracy || + metricType === MetricType.F1 || + metricType === MetricType.F1Macro || + metricType === MetricType.F1Micro || + metricType === MetricType.JaccardSimilarityScore || + metricType === MetricType.ObjectDetectionAveragePrecision || + metricType === MetricType.Precision || + metricType === MetricType.PrecisionAtTopK || + metricType === MetricType.NormalizedMutualInformation || + metricType === MetricType.Recall || + metricType === MetricType.RocAucMacro || + metricType === MetricType.RocAuc || + metricType === MetricType.RocAucMicro || + metricType === MetricType.RSquared) { return MetricInterpretation.HigherIsBetter; } return MetricInterpretation.LowerIsBetter; diff --git a/src/client/northstar/operations/BaseOperation.ts b/src/client/northstar/operations/BaseOperation.ts index f545b2c58..a14337763 100644 --- a/src/client/northstar/operations/BaseOperation.ts +++ b/src/client/northstar/operations/BaseOperation.ts @@ -29,11 +29,11 @@ export abstract class BaseOperation { // let filterModels: FilterModel[] = []; // return FilterModel.GetFilterModelsRecursive(this, new Set>(), filterModels, true) // if (this.OverridingFilters.length > 0) { - // return "(" + this.OverridingFilters.filter(fm => fm != null).map(fm => fm.ToPythonString()).join(" || ") + ")"; + // return "(" + this.OverridingFilters.filter(fm => fm !== null).map(fm => fm.ToPythonString()).join(" || ") + ")"; // } // let rdg = MainManager.Instance.MainViewModel.FilterReverseDependencyGraph; // let sliceModel = this.TypedViewModel.IncomingSliceModel; - // if (sliceModel != null && sliceModel.Source != null && instanceOfIBaseFilterProvider(sliceModel.Source) && rdg.has(sliceModel.Source)) { + // if (sliceModel !== null && sliceModel.Source !== null && instanceOfIBaseFilterProvider(sliceModel.Source) && rdg.has(sliceModel.Source)) { // let filterModels = sliceModel.Source.FilterModels.map(f => f); // return FilterModel.GetFilterModelsRecursive(rdg.get(sliceModel.Source), new Set>(), filterModels, false); // } @@ -99,8 +99,8 @@ export abstract class BaseOperation { if (result instanceof ErrorResult) { throw new Error((result as ErrorResult).message); } - if (this.RequestSalt == pollPromise.RequestSalt) { - if (result && (!this.Result || this.Result.progress != result.progress)) { + if (this.RequestSalt === pollPromise.RequestSalt) { + if (result && (!this.Result || this.Result.progress !== result.progress)) { /*if (operationViewModel.Result !== null && operationViewModel.Result !== undefined) { let t1 = performance.now(); console.log((t1 - start) + " milliseconds."); diff --git a/src/client/northstar/operations/HistogramOperation.ts b/src/client/northstar/operations/HistogramOperation.ts index e63de1632..7f48d1629 100644 --- a/src/client/northstar/operations/HistogramOperation.ts +++ b/src/client/northstar/operations/HistogramOperation.ts @@ -67,7 +67,7 @@ export class HistogramOperation extends BaseOperation implements IBaseFilterCons let brushes: string[] = []; this.BrushLinks.map(brushLink => { let brushHistogram = brushLink.b.GetT(KeyStore.Data, HistogramField); - if (brushHistogram && brushHistogram != FieldWaiting) { + if (brushHistogram && brushHistogram !== FieldWaiting) { let filterModels: FilterModel[] = []; brushes.push(FilterModel.GetFilterModelsRecursive(brushHistogram.Data, new Set(), filterModels, false)); } diff --git a/src/client/northstar/utils/ArrayUtil.ts b/src/client/northstar/utils/ArrayUtil.ts index f35c98317..a52ca6d96 100644 --- a/src/client/northstar/utils/ArrayUtil.ts +++ b/src/client/northstar/utils/ArrayUtil.ts @@ -7,14 +7,14 @@ export class ArrayUtil { return false; } let isComplex = typeof arr1[0] === "object"; - for (let i = 0; i < arr1.length; i++) { - if (isComplex && "Equals" in arr1[i]) { - if (arr1[i].Equals(arr2)) { + for (const ele of arr1) { + if (isComplex && "Equals" in ele) { + if (ele.Equals(arr2)) { return true; } } else { - if (arr1[i] === arr2) { + if (ele === arr2) { return true; } } @@ -63,9 +63,9 @@ export class ArrayUtil { public static Distinct(arr: any[]): any[] { let ret = []; - for (let i = 0; i < arr.length; i++) { - if (!ArrayUtil.Contains(ret, arr[i])) { - ret.push(arr[i]); + for (const ele of arr) { + if (!ArrayUtil.Contains(ret, ele)) { + ret.push(ele); } } return ret; diff --git a/src/client/northstar/utils/GeometryUtil.ts b/src/client/northstar/utils/GeometryUtil.ts index d5f3ba631..6d8acea20 100644 --- a/src/client/northstar/utils/GeometryUtil.ts +++ b/src/client/northstar/utils/GeometryUtil.ts @@ -85,7 +85,7 @@ export class GeometryUtil { // var xi = vs[i].x, yi = vs[i].y; // var xj = vs[j].x, yj = vs[j].y; - // var intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + // var intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); // if (intersect) // inside = !inside; // } diff --git a/src/client/northstar/utils/MathUtil.ts b/src/client/northstar/utils/MathUtil.ts index bb7e73871..7aa255096 100644 --- a/src/client/northstar/utils/MathUtil.ts +++ b/src/client/northstar/utils/MathUtil.ts @@ -93,7 +93,7 @@ export class MathUtil { public static DistToLineSegment(v: PIXIPoint, w: PIXIPoint, p: PIXIPoint) { // Return minimum distance between line segment vw and point p var l2 = MathUtil.DistSquared(v, w); // i.e. |w-v|^2 - avoid a sqrt - if (l2 == 0.0) return MathUtil.Dist(p, v); // v == w case + if (l2 === 0.0) return MathUtil.Dist(p, v); // v === w case // Consider the line extending the segment, parameterized as v + t (w - v). // We find projection of point p onto the line. // It falls where t = [(p-v) . (w-v)] / |w-v|^2 @@ -117,7 +117,7 @@ export class MathUtil { var b2 = ps2.x - pe2.x; var delta = a1 * b2 - a2 * b1; - if (delta == 0) { + if (delta === 0) { return undefined; } var c2 = a2 * ps2.x + b2 * ps2.y; @@ -147,19 +147,19 @@ export class MathUtil { var ret = new Array(); var dist = this.Dist(lineFrom, lineTo) var inter = this.LineSegmentIntersection(lineFrom, lineTo, r1, r2); - if (inter != null && this.PointInPIXIRectangle(inter, rect) && + if (inter && this.PointInPIXIRectangle(inter, rect) && this.Dist(inter, lineFrom) < dist && this.Dist(inter, lineTo) < dist) ret.push(inter); inter = this.LineSegmentIntersection(lineFrom, lineTo, r2, r3); - if (inter != null && this.PointInPIXIRectangle(inter, rect) && + if (inter && this.PointInPIXIRectangle(inter, rect) && this.Dist(inter, lineFrom) < dist && this.Dist(inter, lineTo) < dist) ret.push(inter); inter = this.LineSegmentIntersection(lineFrom, lineTo, r3, r4); - if (inter != null && this.PointInPIXIRectangle(inter, rect) && + if (inter && this.PointInPIXIRectangle(inter, rect) && this.Dist(inter, lineFrom) < dist && this.Dist(inter, lineTo) < dist) ret.push(inter); inter = this.LineSegmentIntersection(lineFrom, lineTo, r4, r1); - if (inter != null && this.PointInPIXIRectangle(inter, rect) && + if (inter && this.PointInPIXIRectangle(inter, rect) && this.Dist(inter, lineFrom) < dist && this.Dist(inter, lineTo) < dist) ret.push(inter); return ret; diff --git a/src/client/northstar/utils/SizeConverter.ts b/src/client/northstar/utils/SizeConverter.ts index bb91ed4a7..b5c4a16ab 100644 --- a/src/client/northstar/utils/SizeConverter.ts +++ b/src/client/northstar/utils/SizeConverter.ts @@ -54,7 +54,7 @@ export class SizeConverter { } public DataToScreenNormalizedRange(dataValue: number, normalization: number, axis: number, binBrushMaxAxis: number) { - var value = normalization != 1 - axis || binBrushMaxAxis == 0 ? dataValue : (dataValue - 0) / (binBrushMaxAxis - 0) * this.DataRanges[axis]; + var value = normalization !== 1 - axis || binBrushMaxAxis === 0 ? dataValue : (dataValue - 0) / (binBrushMaxAxis - 0) * this.DataRanges[axis]; var from = this.DataToScreenCoord(Math.min(0, value), axis); var to = this.DataToScreenCoord(Math.max(0, value), axis); return [from, value, to]; @@ -85,7 +85,7 @@ 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); } diff --git a/src/client/northstar/utils/Utils.ts b/src/client/northstar/utils/Utils.ts index b35dce820..c96b4cbd9 100644 --- a/src/client/northstar/utils/Utils.ts +++ b/src/client/northstar/utils/Utils.ts @@ -27,17 +27,17 @@ export class Utils { public static isBaseBrushable(obj: Object): obj is IBaseBrushable { let typed = >obj; - return typed != null && typed.BrusherModels !== undefined; + return typed !== null && typed.BrusherModels !== undefined; } public static isBaseFilterProvider(obj: Object): obj is IBaseFilterProvider { let typed = obj; - return typed != null && typed.FilterModels !== undefined; + return typed !== null && typed.FilterModels !== undefined; } public static isBaseFilterConsumer(obj: Object): obj is IBaseFilterConsumer { let typed = obj; - return typed != null && typed.FilterOperand !== undefined; + return typed !== null && typed.FilterOperand !== undefined; } public static EncodeQueryData(data: any): string { @@ -63,9 +63,9 @@ export class Utils { public static GetQueryVariable(variable: string) { let query = window.location.search.substring(1); let vars = query.split("&"); - for (let i = 0; i < vars.length; i++) { - let pair = vars[i].split("="); - if (decodeURIComponent(pair[0]) == variable) { + for (const variable of vars) { + let pair = variable.split("="); + if (decodeURIComponent(pair[0]) === variable) { return decodeURIComponent(pair[1]); } } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 11bf24505..1bb00a3fc 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -60,10 +60,10 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> if (text[0] === '#') { let command = text.slice(1, text.length); this._fieldKey = new Key(command) - // if (command == "Title" || command == "title") { + // if (command === "Title" || command === "title") { // this._fieldKey = KeyStore.Title; // } - // else if (command == "Width" || command == "width") { + // else if (command === "Width" || command === "width") { // this._fieldKey = KeyStore.Width; // } this._title = "changed" diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 33759d38a..74f868c11 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -62,7 +62,7 @@ export class Main extends React.Component { @computed private get mainContainer(): Document | undefined { let doc = this.userDocument.GetT(KeyStore.ActiveWorkspace, Document); - return doc == FieldWaiting ? undefined : doc; + return doc === FieldWaiting ? undefined : doc; } private set mainContainer(doc: Document | undefined) { @@ -84,7 +84,7 @@ export class Main extends React.Component { configure({ enforceActions: "observed" }); if (window.location.pathname !== RouteStore.home) { let pathname = window.location.pathname.split("/"); - if (pathname.length > 1 && pathname[pathname.length - 2] == 'doc') { + if (pathname.length > 1 && pathname[pathname.length - 2] === 'doc') { CurrentUserUtils.MainDocId = pathname[pathname.length - 1]; } }; diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index ee752a2ca..7a5ab6e3c 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -65,13 +65,13 @@ export class CollectionBaseView extends React.Component { createsCycle(documentToAdd: Document, containerDocument: Document): boolean { let data = documentToAdd.GetList(KeyStore.Data, []); - for (let i = 0; i < data.length; i++) { - if (this.createsCycle(data[i], containerDocument)) + for (const doc of data) { + if (this.createsCycle(doc, containerDocument)) return true; } let annots = documentToAdd.GetList(KeyStore.Annotations, []); - for (let i = 0; i < annots.length; i++) { - if (this.createsCycle(annots[i], containerDocument)) + for (const annot of annots) { + if (this.createsCycle(annot, containerDocument)) return true; } for (let containerProto: FieldValue = containerDocument; containerProto && containerProto !== FieldWaiting; containerProto = containerProto.GetPrototype()) { diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 1b0ad0bee..2380709d2 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -101,12 +101,12 @@ export class CollectionDockingView extends React.Component this.props.Document.GetText(KeyStore.Data, ""), () => { - if (!this._goldenLayout || this._ignoreStateChange != JSON.stringify(this._goldenLayout.toConfig())) { + if (!this._goldenLayout || this._ignoreStateChange !== JSON.stringify(this._goldenLayout.toConfig())) { setTimeout(() => this.setupGoldenLayout(), 1); } this._ignoreStateChange = ""; @@ -193,7 +193,7 @@ export class CollectionDockingView extends React.Component { var className = (e.target as any).className; - if ((className == "lm_title" || className == "lm_tab lm_active") && (e.ctrlKey || e.altKey)) { + if ((className === "lm_title" || className === "lm_tab lm_active") && (e.ctrlKey || e.altKey)) { e.stopPropagation(); e.preventDefault(); let docid = (e.target as any).DashDocId; @@ -209,7 +209,7 @@ export class CollectionDockingView extends React.Component { - if (tab.hasOwnProperty("contentItem") && tab.contentItem.config.type != "stack") { - if (tab.titleElement[0].textContent.indexOf("-waiting") != -1) { + if (tab.hasOwnProperty("contentItem") && tab.contentItem.config.type !== "stack") { + if (tab.titleElement[0].textContent.indexOf("-waiting") !== -1) { Server.GetField(tab.contentItem.config.props.documentId, action((f: Opt) => { - if (f != undefined && f instanceof Document) { + if (f !== undefined && f instanceof Document) { f.GetTAsync(KeyStore.Title, TextField, (tfield) => { - if (tfield != undefined) { + if (tfield !== undefined) { tab.titleElement[0].textContent = f.Title; } }) @@ -296,9 +296,9 @@ export class DockedFrameRenderer extends React.Component { Server.GetField(this.props.documentId, action((f: Opt) => this._document = f as Document)); } - private _nativeWidth = () => { return this._document!.GetNumber(KeyStore.NativeWidth, this._panelWidth); } - private _nativeHeight = () => { return this._document!.GetNumber(KeyStore.NativeHeight, this._panelHeight); } - private _contentScaling = () => { return 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!); diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index 14ed70b8c..1f2e71f6e 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -33,7 +33,7 @@ export class CollectionPDFView extends React.Component { } onContextMenu = (e: React.MouseEvent): void => { - if (!e.isPropagationStopped() && this.props.Document.Id != "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 + if (!e.isPropagationStopped() && this.props.Document.Id !== "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 ContextMenu.Instance.addItem({ description: "PDFOptions", event: () => { } }); } } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 9dade94f1..3817d5333 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -151,7 +151,7 @@ export class CollectionSchemaView extends CollectionViewBase { }), style: { background: rowInfo.index === this._selectedIndex ? "lightGray" : "white", - //color: rowInfo.index == this._selectedIndex ? "white" : "black" + //color: rowInfo.index === this._selectedIndex ? "white" : "black" } }; } diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index 3ab6db5ef..afadfeefb 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -61,7 +61,7 @@ export class CollectionVideoView extends React.Component { @action updateTimecode = () => { if (this._player) { - if ((this._player as any).AHackBecauseSomethingResetsTheVideoToZero != -1) { + if ((this._player as any).AHackBecauseSomethingResetsTheVideoToZero !== -1) { this._player.currentTime = (this._player as any).AHackBecauseSomethingResetsTheVideoToZero; (this._player as any).AHackBecauseSomethingResetsTheVideoToZero = -1; } else { @@ -103,7 +103,7 @@ export class CollectionVideoView extends React.Component { } onContextMenu = (e: React.MouseEvent): void => { - if (!e.isPropagationStopped() && this.props.Document.Id != "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 + if (!e.isPropagationStopped() && this.props.Document.Id !== "mainDoc") { // 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: "VideoOptions", event: () => { } }); } } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 5b4caf58d..1b0cfd57b 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -28,7 +28,7 @@ export class CollectionView extends React.Component { } 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 + 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: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) }) ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) }) ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) }) diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index b4784ae9c..3af3c5d63 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -91,11 +91,11 @@ export class CollectionViewBase extends React.Component let sourceDoc: Document = de.data.linkSourceDocumentView.props.Document; if (sourceDoc) runInAction(() => { let srcTarg = sourceDoc.GetT(KeyStore.Prototype, Document) - if (srcTarg && srcTarg != FieldWaiting) { + 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) { + if (targDoc && targDoc !== FieldWaiting) { let dropdoc = targDoc.MakeDelegate(); de.data.droppedDocuments.push(dropdoc); this.props.addDocument(dropdoc, false); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 19227f5e0..52e40d64a 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -176,8 +176,8 @@ export class CollectionFreeFormView extends CollectionViewBase { 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?? + // 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)); diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 7022fd972..704db1d4a 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -48,7 +48,7 @@ export class MarqueeView extends React.Component @action onPointerDown = (e: React.PointerEvent): void => { - if (e.buttons == 1 && !e.altKey && !e.metaKey && this.props.container.props.active()) { + if (e.buttons === 1 && !e.altKey && !e.metaKey && this.props.container.props.active()) { this._downX = this._lastX = e.pageX; this._downY = this._lastY = e.pageY; this._used = false; @@ -63,7 +63,7 @@ export class MarqueeView extends React.Component this._lastX = e.pageX; this._lastY = e.pageY; if (!e.cancelBubble) { - if (!this._used && e.buttons == 1 && !e.altKey && !e.metaKey && + if (!this._used && e.buttons === 1 && !e.altKey && !e.metaKey && (Math.abs(this._lastX - this._downX) > MarqueeView.DRAG_THRESHOLD || Math.abs(this._lastY - this._downY) > MarqueeView.DRAG_THRESHOLD)) { this._visible = true; } @@ -99,15 +99,15 @@ export class MarqueeView extends React.Component @action marqueeCommand = (e: KeyboardEvent) => { - if (e.key == "Backspace" || e.key == "Delete") { + if (e.key === "Backspace" || e.key === "Delete") { this.marqueeSelect().map(d => this.props.removeDocument(d)); let ink = this.props.container.props.Document.GetT(KeyStore.Ink, InkField); - if (ink && ink != FieldWaiting) { + if (ink && ink !== FieldWaiting) { this.marqueeInkDelete(ink.Data); } this.cleanupInteractions(); } - if (e.key == "c") { + if (e.key === "c") { let bounds = this.Bounds; let selected = this.marqueeSelect().map(d => { this.props.removeDocument(d); @@ -118,7 +118,7 @@ export class MarqueeView extends React.Component return d; }); let ink = this.props.container.props.Document.GetT(KeyStore.Ink, InkField); - let inkData = ink && ink != FieldWaiting ? ink.Data : undefined; + let inkData = ink && ink !== FieldWaiting ? ink.Data : undefined; //setTimeout(() => { let newCollection = Documents.FreeformDocument(selected, { x: bounds.left, diff --git a/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx b/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx index 93c98f7b0..599461f85 100644 --- a/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx +++ b/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx @@ -33,7 +33,7 @@ export class PreviewCursor extends React.Component { @action onPointerDown = (e: React.PointerEvent) => { - if (e.button == 0 && this.props.container.props.active()) { + if (e.button === 0 && this.props.container.props.active()) { document.removeEventListener("keypress", this.onKeyPress, false); this._showOnUp = true; this.DownX = e.pageX; diff --git a/src/client/views/nodes/Annotation.tsx b/src/client/views/nodes/Annotation.tsx index a2c7be1a8..e4f17940c 100644 --- a/src/client/views/nodes/Annotation.tsx +++ b/src/client/views/nodes/Annotation.tsx @@ -4,13 +4,13 @@ import { observer } from "mobx-react" import { observable, action } from 'mobx'; import 'react-pdf/dist/Page/AnnotationLayer.css' -interface IProps{ +interface IProps { Span: HTMLSpanElement; - X: number; - Y: number; - Highlights: any[]; - Annotations: any[]; - CurrAnno: any[]; + X: number; + Y: number; + Highlights: any[]; + Annotations: any[]; + CurrAnno: any[]; } @@ -23,95 +23,95 @@ interface IProps{ */ @observer export class Annotation extends React.Component { - + /** * changes color of the span (highlighted section) */ - onColorChange = (e:React.PointerEvent) => { - if (e.currentTarget.innerHTML == "r"){ + onColorChange = (e: React.PointerEvent) => { + if (e.currentTarget.innerHTML === "r") { this.props.Span.style.backgroundColor = "rgba(255,0,0, 0.3)" - } else if (e.currentTarget.innerHTML == "b"){ + } else if (e.currentTarget.innerHTML === "b") { this.props.Span.style.backgroundColor = "rgba(0,255, 255, 0.3)" - } else if (e.currentTarget.innerHTML == "y"){ + } else if (e.currentTarget.innerHTML === "y") { this.props.Span.style.backgroundColor = "rgba(255,255,0, 0.3)" - } else if (e.currentTarget.innerHTML == "g"){ + } else if (e.currentTarget.innerHTML === "g") { this.props.Span.style.backgroundColor = "rgba(76, 175, 80, 0.3)" } - + } /** * removes the highlighted span. Supposed to remove Annotation too, but I don't know how to unmount this */ @action - onRemove = (e:any) => { - let index:number = -1; + onRemove = (e: any) => { + let index: number = -1; //finding the highlight in the highlight array this.props.Highlights.forEach((e) => { - for (let i = 0; i < e.spans.length; i++){ - if (e.spans[i] == this.props.Span){ - index = this.props.Highlights.indexOf(e); - this.props.Highlights.splice(index, 1); + for (const span of e.spans) { + if (span === this.props.Span) { + index = this.props.Highlights.indexOf(e); + this.props.Highlights.splice(index, 1); } } }) //removing from CurrAnno and Annotation array - this.props.Annotations.splice(index, 1); + this.props.Annotations.splice(index, 1); this.props.CurrAnno.pop() - + //removing span from div - if(this.props.Span.parentElement){ - let nodesArray = this.props.Span.parentElement.childNodes; + if (this.props.Span.parentElement) { + let nodesArray = this.props.Span.parentElement.childNodes; nodesArray.forEach((e) => { - if (e == this.props.Span){ - if (this.props.Span.parentElement){ + if (e === this.props.Span) { + if (this.props.Span.parentElement) { this.props.Highlights.forEach((item) => { - if (item == e){ - item.remove(); + if (item === e) { + item.remove(); } }) - e.remove(); + e.remove(); } } - }) + }) } - - + + } render() { return ( -
      -
      +
      +
      -
      - - - - +
      + + + +
      - +
      -
      -
      - + ); } } \ No newline at end of file diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 0ce991485..1bd934c25 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -29,7 +29,7 @@ export class AudioBox extends React.Component { render() { let field = this.props.Document.Get(this.props.fieldKey) - let path = field == FieldWaiting ? "http://techslides.com/demos/samples/sample.mp3" : + let path = field === FieldWaiting ? "http://techslides.com/demos/samples/sample.mp3" : field instanceof AudioField ? field.Data.href : "http://techslides.com/demos/samples/sample.mp3"; return ( diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 1c9155dce..34cc326aa 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -77,7 +77,7 @@ export class DocumentContentsView extends React.Component { @action onEnterKey = (e: React.KeyboardEvent): void => { - if (e.key == 'Enter') { + if (e.key === 'Enter') { if (this._keyInput && this._valueInput) { let doc = this.props.Document.GetT(KeyStore.Data, Document); - if (!doc || doc == FieldWaiting) { + if (!doc || doc === FieldWaiting) { return } let realDoc = doc; @@ -70,7 +70,7 @@ export class KeyValueBox extends React.Component { createTable = () => { let doc = this.props.Document.GetT(KeyStore.Data, Document); - if (!doc || doc == FieldWaiting) { + if (!doc || doc === FieldWaiting) { return Loading... } let realDoc = doc; diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx index e81f8fec7..4791d6029 100644 --- a/src/client/views/nodes/LinkBox.tsx +++ b/src/client/views/nodes/LinkBox.tsx @@ -49,7 +49,7 @@ 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) { diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx index 5eeb40772..6c2d24630 100644 --- a/src/client/views/nodes/LinkMenu.tsx +++ b/src/client/views/nodes/LinkMenu.tsx @@ -24,7 +24,7 @@ export class LinkMenu extends React.Component { renderLinkItems(links: Document[], key: Key, type: string) { return links.map(link => { let doc = link.GetT(key, Document); - if (doc && doc != FieldWaiting) { + if (doc && doc !== FieldWaiting) { return this._editingLink = link)} type={type} /> } }) diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index b4590df34..a08b320e8 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -34,7 +34,7 @@ export class VideoBox extends React.Component { var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); var newNativeHeight = nativeWidth * r.entry.height / r.entry.width; - if (!nativeHeight && newNativeHeight != nativeHeight && !isNaN(newNativeHeight)) { + 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); } diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 92e2fabd4..c1d389001 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -20,7 +20,7 @@ export class WebBox 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 WebField ? field.Data.href : "https://crossorigin.me/" + "https://cs.brown.edu"; let content = this.html ? diff --git a/src/fields/AudioField.ts b/src/fields/AudioField.ts index 8864471ae..252a5b74e 100644 --- a/src/fields/AudioField.ts +++ b/src/fields/AudioField.ts @@ -4,7 +4,7 @@ import { Types } from "../server/Message"; export class AudioField extends BasicField { constructor(data: URL | undefined = undefined, id?: FieldId, save: boolean = true) { - super(data == undefined ? new URL("http://techslides.com/demos/samples/sample.mp3") : data, save, id); + super(data === undefined ? new URL("http://techslides.com/demos/samples/sample.mp3") : data, save, id); } toString(): string { diff --git a/src/fields/BasicField.ts b/src/fields/BasicField.ts index a92c4a236..3083a1937 100644 --- a/src/fields/BasicField.ts +++ b/src/fields/BasicField.ts @@ -46,7 +46,7 @@ export abstract class BasicField extends Field { @action TrySetValue(value: any): boolean { - if (typeof value == typeof this.data) { + if (typeof value === typeof this.data) { this.Data = value; return true; } diff --git a/src/fields/ImageField.ts b/src/fields/ImageField.ts index a9ece7d7b..ef616b2ad 100644 --- a/src/fields/ImageField.ts +++ b/src/fields/ImageField.ts @@ -4,7 +4,7 @@ import { Types } from "../server/Message"; export class ImageField extends BasicField { constructor(data: URL | undefined = undefined, id?: FieldId, save: boolean = true) { - super(data == undefined ? new URL("http://cs.brown.edu/~bcz/bob_fettucine.jpg") : data, save, id); + super(data === undefined ? new URL("http://cs.brown.edu/~bcz/bob_fettucine.jpg") : data, save, id); } toString(): string { diff --git a/src/fields/ListField.ts b/src/fields/ListField.ts index c4008bd12..815a3df73 100644 --- a/src/fields/ListField.ts +++ b/src/fields/ListField.ts @@ -26,7 +26,7 @@ export class ListField extends BasicField { } this.observeDisposer = observe(this.Data as IObservableArray, (change: IArrayChange | IArraySplice) => { this.updateProxies() - if (change.type == "splice") { + 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) @@ -57,8 +57,8 @@ export class ListField extends BasicField { } private arraysEqual(a: any[], b: any[]) { if (a === b) return true; - if (a == null || b == null) return false; - if (a.length != b.length) return false; + if (a === null || b === null) return false; + if (a.length !== b.length) return false; // If you don't care about the order of the elements inside // the array, you should sort both arrays here. @@ -79,9 +79,9 @@ export class ListField extends BasicField { 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++) - added = proxies.indexOf(dataids[i]) != -1; + added = proxies.indexOf(dataids[i]) !== -1; for (let i = 0; i < this._proxies.length && deleted; i++) - deleted = dataids.indexOf(proxies[i]) != -1; + deleted = dataids.indexOf(proxies[i]) !== -1; this._processingServerUpdate = true; for (let i = 0; i < proxies.length && added; i++) { diff --git a/src/fields/PDFField.ts b/src/fields/PDFField.ts index b6625387e..436c1cf2b 100644 --- a/src/fields/PDFField.ts +++ b/src/fields/PDFField.ts @@ -7,7 +7,7 @@ import { Types } from "../server/Message"; export class PDFField extends BasicField { constructor(data: URL | undefined = undefined, id?: FieldId, save: boolean = true) { - super(data == undefined ? new URL("http://cs.brown.edu/~bcz/bob_fettucine.jpg") : data, save, id); + super(data === undefined ? new URL("http://cs.brown.edu/~bcz/bob_fettucine.jpg") : data, save, id); } toString(): string { diff --git a/src/fields/VideoField.ts b/src/fields/VideoField.ts index 626e4ec83..992cc1641 100644 --- a/src/fields/VideoField.ts +++ b/src/fields/VideoField.ts @@ -4,7 +4,7 @@ import { Types } from "../server/Message"; export class VideoField extends BasicField { constructor(data: URL | undefined = undefined, id?: FieldId, save: boolean = true) { - super(data == undefined ? new URL("http://techslides.com/demos/sample-videos/small.mp4") : data, save, id); + super(data === undefined ? new URL("http://techslides.com/demos/sample-videos/small.mp4") : data, save, id); } toString(): string { diff --git a/src/server/index.ts b/src/server/index.ts index ce8bbefe8..f60e6e293 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -143,7 +143,7 @@ addSecureRoute( Method.GET, (user, res, req) => { let detector = new mobileDetect(req.headers['user-agent'] || ""); - if (detector.mobile() != null) { + if (detector.mobile() !== null) { res.sendFile(path.join(__dirname, '../../deploy/mobile/image.html')); } else { res.sendFile(path.join(__dirname, '../../deploy/index.html')); -- cgit v1.2.3-70-g09d2 From 49310acbdfd7ca239c939208b3766c54e980f6f1 Mon Sep 17 00:00:00 2001 From: ab Date: Sat, 6 Apr 2019 18:43:15 -0400 Subject: drop fraught but technically undoable --- src/client/util/TooltipTextMenu.tsx | 2 +- src/client/util/UndoManager.ts | 23 ++++++-- src/client/views/InkingCanvas.tsx | 14 +++-- src/client/views/InkingControl.tsx | 3 +- .../views/collections/CollectionDockingView.tsx | 1 + src/client/views/collections/CollectionView.tsx | 7 +-- .../views/collections/CollectionViewBase.tsx | 60 ++++++++++++--------- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/PDFBox.tsx | 4 +- src/server/database.ts | 6 +-- .../upload_011289d8c22f5422cf6f7e27a8c780ef.jpg | Bin 0 -> 218352 bytes .../upload_01b38428ccc02261e24689b9d887b206.PNG | Bin 0 -> 14176 bytes .../upload_01e81815633ee270c8b4ffca88a7773e.jpg | Bin 0 -> 218352 bytes .../upload_031371580a23b87aaafb587ece875819.png | Bin 0 -> 4183 bytes .../upload_03c44479fe728bbcc2f76dab407544d5.png | Bin 0 -> 10718 bytes .../upload_05ceaf4112a0e3754a53ab59f4b1ff07.png | Bin 0 -> 6199 bytes .../upload_061bdf72416cbef898d4cd1a0152ce1f.jpg | Bin 0 -> 218352 bytes .../upload_07488f31d6eacb28458c11eb982fa654.jpg | Bin 0 -> 218352 bytes .../upload_08afadab5ded674ec3f244b2bd124b8b.PNG | Bin 0 -> 14176 bytes .../upload_09df67e3e4c3bcd2a571d8be5f0acf48.PNG | Bin 0 -> 7337 bytes .../upload_10b64e99df3aac032564573c3699bda4.png | Bin 0 -> 10718 bytes .../upload_11162dd1b00ed2a26923aa9d2fa9889e.png | Bin 0 -> 4183 bytes .../upload_115d44864ee866f2986188501a59342b.png | Bin 0 -> 10718 bytes .../upload_1465783317d01ed75e87e169b56928fd.PNG | Bin 0 -> 14176 bytes .../upload_156cb9406f94654dea0e227e377f0a75.PNG | Bin 0 -> 7337 bytes .../upload_166eb5d1d46cf268a59e01b4b32528cd.PNG | Bin 0 -> 7337 bytes .../upload_17d2b2f3ec801e6fdcc6d29e523e946b.PNG | Bin 0 -> 7337 bytes .../upload_1863f67c2c193452cc5192f0ebac2a7b.png | Bin 0 -> 6199 bytes .../upload_18d64bf4a483e78a36153abcd26af503.png | Bin 0 -> 20776 bytes .../upload_1a7925dd1140a2b5a7cc5c62ad20a8e8.png | Bin 0 -> 20776 bytes .../upload_1c47eb68831fff82bc6982e5df4d02d5.PNG | Bin 0 -> 14176 bytes .../upload_1c8f6233068ed1535384500768557e68.png | Bin 0 -> 20776 bytes .../upload_1ea7ee56753d0327192da9666de9e305.PNG | Bin 0 -> 14160 bytes .../upload_2098441ee0ad89e51e825e2fb5f641d2.png | Bin 0 -> 4183 bytes .../upload_23a30791fc2afceb92310a665d364dbd.jpg | Bin 0 -> 218352 bytes .../upload_2436e82c2c54dd8f33f74e4440d11104.png | Bin 0 -> 10718 bytes .../upload_2443e73bbbd67712bcedc04f0ead5617.PNG | Bin 0 -> 14160 bytes .../upload_2515fc22ce67c256bf3039bc84e54432.jpg | Bin 0 -> 136356 bytes .../upload_280bb85121601366f65632649edd9425.jpg | Bin 0 -> 136356 bytes .../upload_284a94d4ba485d6799ee772521846a59.jpg | Bin 0 -> 218352 bytes .../upload_28550bbb245dfbe9b24b2354ed349f0c.jpg | Bin 0 -> 218352 bytes .../upload_2abbef5268ab7ca77dad96775cb52345.png | Bin 0 -> 6199 bytes .../upload_2b5ec0fba66b5b3b5e47a2c53a1005be.jpg | Bin 0 -> 218352 bytes .../upload_2b6f66b8972b2f4991239720bb1df7d4.png | Bin 0 -> 6199 bytes .../upload_2b75a95a64abfe997aa8e12a69d2bc43.png | Bin 0 -> 498481 bytes .../upload_2c689fe57038ad6a324297e92badd705.png | Bin 0 -> 20776 bytes .../upload_2d86441185e38ed16bbf4234d8857e13.PNG | Bin 0 -> 14176 bytes .../upload_2e68bb961e82faddbaa501c5c4e51795.png | Bin 0 -> 6199 bytes .../upload_303438040b77efc92ad5a6617edf7000.png | Bin 0 -> 4183 bytes .../upload_303b28fc64dd65c58382fe2b0a513190.jpg | Bin 0 -> 136356 bytes .../upload_319f73a65644974e6502a79dfb60b777.jpg | Bin 0 -> 218352 bytes .../upload_33290055bf62326211eb846bc32d7ab9.PNG | Bin 0 -> 14176 bytes .../upload_352949a7d58209759d0ab420726acce3.png | Bin 0 -> 20776 bytes .../upload_365e7ad24d7b896dc24525068e8f0fba.png | Bin 0 -> 4183 bytes .../upload_38001ea16c21a82601586e9d7c823e5f.png | Bin 0 -> 20776 bytes .../upload_3bb64e7eb87805eb7c2c67352ab3e3f6.PNG | Bin 0 -> 14176 bytes .../upload_3cb5a8a9454a1b42a69a3d274c0a00e7.png | Bin 0 -> 6199 bytes .../upload_3db8e110c40cb0770e79a61171eba542.jpg | Bin 0 -> 218352 bytes .../upload_41fc781a82b1f33b631e5aa68c6a1a76.PNG | Bin 0 -> 14160 bytes .../upload_42ecb2422b80f6da3afb62543391f58c.PNG | Bin 0 -> 7337 bytes .../upload_431be602a66059169d1f4c4cd4646476.PNG | Bin 0 -> 14176 bytes .../upload_4543a61bc7c5f79c788b749a9ce7535a.PNG | Bin 0 -> 7337 bytes .../upload_45e88f05b821eca6b85c1fc7b048af63.jpg | Bin 0 -> 136356 bytes .../upload_493879305f109a4412223137f7031944.png | Bin 0 -> 6199 bytes .../upload_49ac63665b883ea4702733fc8d70f6b1.PNG | Bin 0 -> 14176 bytes .../upload_4bc2bdf9a392b8e567b964f59cfd32a8.PNG | Bin 0 -> 7337 bytes .../upload_4e4560c1f0081b87af4c010792d799fc.jpg | Bin 0 -> 136356 bytes .../upload_4e56e150f5c92f8980c4df49603747cc.png | Bin 0 -> 6199 bytes .../upload_4e897855f35d0aa419d27bfaedae4435.png | Bin 0 -> 10718 bytes .../upload_5495509165b60d3c04b8e509a7d187ba.PNG | Bin 0 -> 14176 bytes .../upload_54d3dcb522f9fe3beb060103248a5ee9.png | Bin 0 -> 10718 bytes .../upload_568996cd49829901200e1bec2b49a176.PNG | Bin 0 -> 7337 bytes .../upload_5757898e2b8507438e1bdaf7b7fee4bb.png | Bin 0 -> 10718 bytes .../upload_57c4353c9d3250bac49753be6b8973c6.png | Bin 0 -> 20776 bytes .../upload_57f2901b84275f3e40ca9d41cb7c057d.PNG | Bin 0 -> 14176 bytes .../upload_580d262f8a55c2fe3acbc6f0e690ad56.png | Bin 0 -> 6199 bytes .../upload_58782b7ba1ac3963c4fdd5a987bf0aca.PNG | Bin 0 -> 7337 bytes .../upload_588f580df306a338f7be0483dc30d576.jpg | Bin 0 -> 136356 bytes .../upload_590c965f849c296ae3841689ce80b548.png | Bin 0 -> 20776 bytes .../upload_5915c6516d7a7db8164f7e395b81973e.PNG | Bin 0 -> 7337 bytes .../upload_594db1ea036d584bc71de979ce57832b.PNG | Bin 0 -> 14176 bytes .../upload_5bf829a0b264b321b9b17267ab06a11b.png | Bin 0 -> 20776 bytes .../upload_5cba158af25fb2058c1b2e130cd3fefc.png | Bin 0 -> 6199 bytes .../upload_5d5f91ac61a5e55192c1de4402483126.png | Bin 0 -> 10718 bytes .../upload_5ea64a359728395c1608b8783f6fb192.PNG | Bin 0 -> 7337 bytes .../upload_5f0bace6da44bc7084c6ad01fcfe1012.png | Bin 0 -> 4183 bytes .../upload_5fe9f9fe6eb4a78dcde144c9d4e5d6bb.png | Bin 0 -> 10718 bytes .../upload_604cd121c8ecb30eb4d13cded9ce8746.png | Bin 0 -> 20776 bytes .../upload_60f89c7647c6ed08d977e485fea9e033.jpg | Bin 0 -> 218352 bytes .../upload_62900e4354015fc2bc78f00afbc1bc21.png | Bin 0 -> 10718 bytes .../upload_62f1a7fa74224de7248c62d6d4242fd0.jpg | Bin 0 -> 218352 bytes .../upload_63a7127553e83f381212c80f607c6db5.png | Bin 0 -> 10718 bytes .../upload_63c37ab66ad16d68ef96670b1d04ee1c.png | Bin 0 -> 6199 bytes .../upload_665fb37c1505fdf48a665990caf09d26.png | Bin 0 -> 4183 bytes .../upload_67c7a2ac39caabaac7b90861a1314b8f.png | Bin 0 -> 10718 bytes .../upload_680394edbfb281065997525cc114f996.PNG | Bin 0 -> 7337 bytes .../upload_684090a0c50a035aaa0df23c18043df8.png | Bin 0 -> 10718 bytes .../upload_6bd24b1193058458d6ea268b06963931.PNG | Bin 0 -> 7337 bytes .../upload_6bde8211989cf1b540b3c6dcf16cd51a.PNG | Bin 0 -> 7337 bytes .../upload_6d5051266bd739f260105072299b5c79.png | Bin 0 -> 4183 bytes .../upload_6d9a3ec37d85659265f2b622a6d24dcb.jpg | Bin 0 -> 136356 bytes .../upload_6f222fae83f0185e361bf6a757ba9800.png | Bin 0 -> 10718 bytes .../upload_6f5b0c8a474e44d76cbbea5f629e8fba.png | Bin 0 -> 498481 bytes .../upload_7068f1e2ec782980b4eded2ff974da7f.jpg | Bin 0 -> 136356 bytes .../upload_72c05840ea8bddc44575309923d4c63b.jpg | Bin 0 -> 218352 bytes .../upload_73b42f2f26e037078c1f1c63913fc9aa.jpg | Bin 0 -> 136356 bytes .../upload_7412310b57204cb3c36d5aba670589fc.PNG | Bin 0 -> 14176 bytes .../upload_75d331ba20a80ca0f6fd18bc0b37b8b3.PNG | Bin 0 -> 14176 bytes .../upload_77eab9365e5c11d5e1ac08fca6c862ab.png | Bin 0 -> 4183 bytes .../upload_786b4b94fda60ba60da3dfe2be091b6b.png | Bin 0 -> 6199 bytes .../upload_793745d2b6c8a5c3dbeea343b9332846.PNG | Bin 0 -> 14160 bytes .../upload_7c369564861f079a17bd77081ace597b.PNG | Bin 0 -> 14160 bytes .../upload_7c7f3f317ea27a2ddad9e8a34f636b78.png | Bin 0 -> 20776 bytes .../upload_7f357bbbe7756dabad0b9cb49c9ceb0c.PNG | Bin 0 -> 14176 bytes .../upload_814802d9faf217a7b09c1c95c4ecfd05.png | Bin 0 -> 48172 bytes .../upload_83180cda4fa509f6ff0654376c1da7f2.jpg | Bin 0 -> 218352 bytes .../upload_8321ece56de47e0bf5345fe30d23414e.PNG | Bin 0 -> 7337 bytes .../upload_871f1af44ec7a2140f32433f3015d603.jpg | Bin 0 -> 218352 bytes .../upload_892d1d9d981f679fedaa2c5bf193fd20.jpg | Bin 0 -> 136356 bytes .../upload_89721bf0d244b1fcc52f70a7d9e3593b.jpg | Bin 0 -> 136356 bytes .../upload_89e66f8d531a44a63fa3355602813ae7.png | Bin 0 -> 6199 bytes .../upload_8a6090d2b978221d0810b954f7b14065.PNG | Bin 0 -> 14176 bytes .../upload_8b92f6ffc9a8c8353fd141c6dc71895f.jpg | Bin 0 -> 136356 bytes .../upload_8bfca62429aada8f6b5dae1dcde24cab.png | Bin 0 -> 20776 bytes .../upload_8e9e27d1918f3a0a5f242397079e66fa.png | Bin 0 -> 20776 bytes .../upload_8ef0953ff77d42848b6e7f37e9bd506d.PNG | Bin 0 -> 14176 bytes .../upload_902c6b9c79da47ec00238f4831795077.jpg | Bin 0 -> 218352 bytes .../upload_90d380b38492369c1470868b019f0d0c.jpg | Bin 0 -> 218352 bytes .../upload_95af42b1b5db521aa1539980fe85e71a.jpg | Bin 0 -> 136356 bytes .../upload_97031060c857a0e8f15af3fcc038a2b8.jpg | Bin 0 -> 218352 bytes .../upload_97903efc6c08245acaea37eefacf289f.png | Bin 0 -> 20776 bytes .../upload_9974b3459e182fef33b8e467058b7525.png | Bin 0 -> 4183 bytes .../upload_9a8429dac8feba05bbda2b53b5da4efa.jpg | Bin 0 -> 218352 bytes .../upload_9bbc86def05076b89080adcc37481324.jpg | Bin 0 -> 136356 bytes .../upload_9cd52fc451f3d459021127a7d51d108b.png | Bin 0 -> 20776 bytes .../upload_9de9f004f258cee8c55bf872362d6453.jpg | Bin 0 -> 218352 bytes .../upload_a0286ae2a1eec8c31c8276ec067d91aa.png | Bin 0 -> 20776 bytes .../upload_a04473da584e5a602d0f8984a670a91c.jpg | Bin 0 -> 136356 bytes .../upload_a2cf3f6ab4ab5b249ebf8100e461aa27.png | Bin 0 -> 4183 bytes .../upload_a3095034ec19353c9ee55221088f01d8.PNG | Bin 0 -> 14176 bytes .../upload_a520a6856021104b8130f8d3b42d85c0.png | Bin 0 -> 6199 bytes .../upload_a5c26f52ddcbd705ffbd3dfd7cd2ce40.jpg | Bin 0 -> 136356 bytes .../upload_a60864ff7892974e941e42a2441e530d.png | Bin 0 -> 6199 bytes .../upload_a77f86dbeaa0c3cecc2516f9d9cecf1d.png | Bin 0 -> 4183 bytes .../upload_aa2bbeb0871a2d6b4b54524ac2758270.jpg | Bin 0 -> 218352 bytes .../upload_aa9fec4828bfdfef3ae20d43997fb274.png | Bin 0 -> 10718 bytes .../upload_ab2bba2cee88991561f20d7cd69ec6e1.png | Bin 0 -> 10718 bytes .../upload_ae1c01e481fc6b753c78605bfbe680b9.png | Bin 0 -> 20776 bytes .../upload_b0d25a0dccc640f78dcbc291f930b5d6.png | Bin 0 -> 6199 bytes .../upload_b0e527b27b7cabf651b29c9d834d24f3.PNG | Bin 0 -> 7337 bytes .../upload_b0ea7e49e84cf91075962a75c76d3233.png | Bin 0 -> 6199 bytes .../upload_b1b334829e1d99d7cd32fae5044cc103.PNG | Bin 0 -> 7337 bytes .../upload_b52adf6e1ecdbbe76aa3c038ddc3b02b.PNG | Bin 0 -> 14160 bytes .../upload_b6c992aa6c434520887521e11bb5f492.png | Bin 0 -> 4183 bytes .../upload_ba04eb816ef3bec770aa7eebf3b21cb1.PNG | Bin 0 -> 14176 bytes .../upload_ba58066314a79d1c845241fb4400e44d.png | Bin 0 -> 20776 bytes .../upload_bb6b521b4df6bd783d6a5b83a66caa0a.jpg | Bin 0 -> 136356 bytes .../upload_bcb173a15068ded66b39623ab18bfdb7.jpg | Bin 0 -> 218352 bytes .../upload_be4034faba6a5313dfb8a53e18ffc188.png | Bin 0 -> 10718 bytes .../upload_be5f90995b34cd30d9a269b5a9f10fcc.PNG | Bin 0 -> 7337 bytes .../upload_c1a964ca145f45e7e666cfaf7c8398e3.png | Bin 0 -> 4183 bytes .../upload_c6764790a8182d796acddb76d3df595e.PNG | Bin 0 -> 14176 bytes .../upload_c81bff72d05e0bb7f13376a46506ec2a.jpg | Bin 0 -> 39678 bytes .../upload_c98c0184a19b621b2bc0575b49996a69.png | Bin 0 -> 20776 bytes .../upload_cb4d875a9f73d1f735da5ae82dce6eb1.jpg | Bin 0 -> 136356 bytes .../upload_cd08524995e5f124505fe3d7ab38a41f.png | Bin 0 -> 4183 bytes .../upload_cd73b55488fcc7e5e5e5f2a4c43bc1fd.png | Bin 0 -> 20776 bytes .../upload_ce357d5a6d727ac44110c60dd379428f.png | Bin 0 -> 10718 bytes .../upload_d00c34a1e1c319a9373b5f136c38a866.jpg | Bin 0 -> 136356 bytes .../upload_d242527805ab4c52f2385ae57b85e6fb.png | Bin 0 -> 20776 bytes .../upload_d28007fa68c809cd3c0a78d4a8727275.png | Bin 0 -> 4183 bytes .../upload_d35ea9c62bf8da0352a16193b880469e.jpg | Bin 0 -> 218352 bytes .../upload_d4e0e9d2aee31b5931129dc3bc83e813.png | Bin 0 -> 6199 bytes .../upload_d5801c03d9562a612d1907085ba39373.jpg | Bin 0 -> 218352 bytes .../upload_d6d0e3a302e0edafa70785c39041e522.PNG | Bin 0 -> 14176 bytes .../upload_d6e725cc697751599b177e0cf330b9f2.jpg | Bin 0 -> 218352 bytes .../upload_d794d56fcab3b93b6c79aa201cba34f8.png | Bin 0 -> 48172 bytes .../upload_d8abeaef04a42678432e5e1d3377a2d0.png | Bin 0 -> 20776 bytes .../upload_dac5245c657d29c1c4dfba98472fb50d.pdf | Bin 0 -> 331305 bytes .../upload_db3c5a0b560c9da35607359d86cf2b97.png | Bin 0 -> 4183 bytes .../upload_dc8821dc596b1938c855e0affbe614dd.png | Bin 0 -> 20776 bytes .../upload_df7697c4832990aad0e8d9f0daa1711b.png | Bin 0 -> 10718 bytes .../upload_e009e45db30e47383fad5d71908dc69d.png | Bin 0 -> 20776 bytes .../upload_e15738d092ff38197dc1fb41a4747d16.jpg | Bin 0 -> 218352 bytes .../upload_e51079d9af97a412353d63c60e1ea96d.png | Bin 0 -> 4183 bytes .../upload_e5422cdcfa80628842ff3aacf14ad25e.png | Bin 0 -> 20776 bytes .../upload_e6256196c38216ac539ef7e8ee28ab02.png | Bin 0 -> 6199 bytes .../upload_e9668199bd12c905f27be76b11366d68.png | Bin 0 -> 6199 bytes .../upload_e98ebeeebd5f0ddc98ea9b3a2d9f40d2.png | Bin 0 -> 4183 bytes .../upload_eb2f002129e0cfb5c940f6b4ecc5a8f2.jpg | Bin 0 -> 136356 bytes .../upload_ec02ff06b3154d269086e23ebf6ad942.png | Bin 0 -> 10718 bytes .../upload_ef3873102a70850a4da2040eab002c55.jpg | Bin 0 -> 136356 bytes .../upload_f259c9aa37b0919d6d20ad8d75e8329e.png | Bin 0 -> 10718 bytes .../upload_f48143c75b8c2412785e3ed31ebbb150.PNG | Bin 0 -> 7337 bytes .../upload_f5347da10a373480807fc3469533b9fe.png | Bin 0 -> 4183 bytes .../upload_f6e36f6d3de7a2036eeff617f186b78f.png | Bin 0 -> 4183 bytes .../upload_f6f1ed7a268523278457de08ee61bcfa.PNG | Bin 0 -> 7337 bytes .../upload_f73607b7cf818631165aca9d32ef19c5.jpg | Bin 0 -> 136356 bytes .../upload_f804a6c7ec796718d66108af0b1e6d0e.png | Bin 0 -> 10718 bytes .../upload_f9ed03ab046d7f579d6f531df9c4050a.PNG | Bin 0 -> 14176 bytes .../upload_fac4f686367ad63f2fcc1d8b4f74f123.png | Bin 0 -> 4183 bytes .../upload_faebd8bdc2b00efe50b232c9cf4e63b6.PNG | Bin 0 -> 7337 bytes .../upload_fb3cc3a1d715a6ffa1c72bde91faf3af.png | Bin 0 -> 6199 bytes .../upload_fe2dbe44900645eba61207748f63ade3.jpg | Bin 0 -> 136356 bytes .../upload_ffd58755419ab98f03d56fedd16736e9.jpg | Bin 0 -> 218352 bytes 205 files changed, 79 insertions(+), 43 deletions(-) create mode 100644 src/server/public/files/upload_011289d8c22f5422cf6f7e27a8c780ef.jpg create mode 100644 src/server/public/files/upload_01b38428ccc02261e24689b9d887b206.PNG create mode 100644 src/server/public/files/upload_01e81815633ee270c8b4ffca88a7773e.jpg create mode 100644 src/server/public/files/upload_031371580a23b87aaafb587ece875819.png create mode 100644 src/server/public/files/upload_03c44479fe728bbcc2f76dab407544d5.png create mode 100644 src/server/public/files/upload_05ceaf4112a0e3754a53ab59f4b1ff07.png create mode 100644 src/server/public/files/upload_061bdf72416cbef898d4cd1a0152ce1f.jpg create mode 100644 src/server/public/files/upload_07488f31d6eacb28458c11eb982fa654.jpg create mode 100644 src/server/public/files/upload_08afadab5ded674ec3f244b2bd124b8b.PNG create mode 100644 src/server/public/files/upload_09df67e3e4c3bcd2a571d8be5f0acf48.PNG create mode 100644 src/server/public/files/upload_10b64e99df3aac032564573c3699bda4.png create mode 100644 src/server/public/files/upload_11162dd1b00ed2a26923aa9d2fa9889e.png create mode 100644 src/server/public/files/upload_115d44864ee866f2986188501a59342b.png create mode 100644 src/server/public/files/upload_1465783317d01ed75e87e169b56928fd.PNG create mode 100644 src/server/public/files/upload_156cb9406f94654dea0e227e377f0a75.PNG create mode 100644 src/server/public/files/upload_166eb5d1d46cf268a59e01b4b32528cd.PNG create mode 100644 src/server/public/files/upload_17d2b2f3ec801e6fdcc6d29e523e946b.PNG create mode 100644 src/server/public/files/upload_1863f67c2c193452cc5192f0ebac2a7b.png create mode 100644 src/server/public/files/upload_18d64bf4a483e78a36153abcd26af503.png create mode 100644 src/server/public/files/upload_1a7925dd1140a2b5a7cc5c62ad20a8e8.png create mode 100644 src/server/public/files/upload_1c47eb68831fff82bc6982e5df4d02d5.PNG create mode 100644 src/server/public/files/upload_1c8f6233068ed1535384500768557e68.png create mode 100644 src/server/public/files/upload_1ea7ee56753d0327192da9666de9e305.PNG create mode 100644 src/server/public/files/upload_2098441ee0ad89e51e825e2fb5f641d2.png create mode 100644 src/server/public/files/upload_23a30791fc2afceb92310a665d364dbd.jpg create mode 100644 src/server/public/files/upload_2436e82c2c54dd8f33f74e4440d11104.png create mode 100644 src/server/public/files/upload_2443e73bbbd67712bcedc04f0ead5617.PNG create mode 100644 src/server/public/files/upload_2515fc22ce67c256bf3039bc84e54432.jpg create mode 100644 src/server/public/files/upload_280bb85121601366f65632649edd9425.jpg create mode 100644 src/server/public/files/upload_284a94d4ba485d6799ee772521846a59.jpg create mode 100644 src/server/public/files/upload_28550bbb245dfbe9b24b2354ed349f0c.jpg create mode 100644 src/server/public/files/upload_2abbef5268ab7ca77dad96775cb52345.png create mode 100644 src/server/public/files/upload_2b5ec0fba66b5b3b5e47a2c53a1005be.jpg create mode 100644 src/server/public/files/upload_2b6f66b8972b2f4991239720bb1df7d4.png create mode 100644 src/server/public/files/upload_2b75a95a64abfe997aa8e12a69d2bc43.png create mode 100644 src/server/public/files/upload_2c689fe57038ad6a324297e92badd705.png create mode 100644 src/server/public/files/upload_2d86441185e38ed16bbf4234d8857e13.PNG create mode 100644 src/server/public/files/upload_2e68bb961e82faddbaa501c5c4e51795.png create mode 100644 src/server/public/files/upload_303438040b77efc92ad5a6617edf7000.png create mode 100644 src/server/public/files/upload_303b28fc64dd65c58382fe2b0a513190.jpg create mode 100644 src/server/public/files/upload_319f73a65644974e6502a79dfb60b777.jpg create mode 100644 src/server/public/files/upload_33290055bf62326211eb846bc32d7ab9.PNG create mode 100644 src/server/public/files/upload_352949a7d58209759d0ab420726acce3.png create mode 100644 src/server/public/files/upload_365e7ad24d7b896dc24525068e8f0fba.png create mode 100644 src/server/public/files/upload_38001ea16c21a82601586e9d7c823e5f.png create mode 100644 src/server/public/files/upload_3bb64e7eb87805eb7c2c67352ab3e3f6.PNG create mode 100644 src/server/public/files/upload_3cb5a8a9454a1b42a69a3d274c0a00e7.png create mode 100644 src/server/public/files/upload_3db8e110c40cb0770e79a61171eba542.jpg create mode 100644 src/server/public/files/upload_41fc781a82b1f33b631e5aa68c6a1a76.PNG create mode 100644 src/server/public/files/upload_42ecb2422b80f6da3afb62543391f58c.PNG create mode 100644 src/server/public/files/upload_431be602a66059169d1f4c4cd4646476.PNG create mode 100644 src/server/public/files/upload_4543a61bc7c5f79c788b749a9ce7535a.PNG create mode 100644 src/server/public/files/upload_45e88f05b821eca6b85c1fc7b048af63.jpg create mode 100644 src/server/public/files/upload_493879305f109a4412223137f7031944.png create mode 100644 src/server/public/files/upload_49ac63665b883ea4702733fc8d70f6b1.PNG create mode 100644 src/server/public/files/upload_4bc2bdf9a392b8e567b964f59cfd32a8.PNG create mode 100644 src/server/public/files/upload_4e4560c1f0081b87af4c010792d799fc.jpg create mode 100644 src/server/public/files/upload_4e56e150f5c92f8980c4df49603747cc.png create mode 100644 src/server/public/files/upload_4e897855f35d0aa419d27bfaedae4435.png create mode 100644 src/server/public/files/upload_5495509165b60d3c04b8e509a7d187ba.PNG create mode 100644 src/server/public/files/upload_54d3dcb522f9fe3beb060103248a5ee9.png create mode 100644 src/server/public/files/upload_568996cd49829901200e1bec2b49a176.PNG create mode 100644 src/server/public/files/upload_5757898e2b8507438e1bdaf7b7fee4bb.png create mode 100644 src/server/public/files/upload_57c4353c9d3250bac49753be6b8973c6.png create mode 100644 src/server/public/files/upload_57f2901b84275f3e40ca9d41cb7c057d.PNG create mode 100644 src/server/public/files/upload_580d262f8a55c2fe3acbc6f0e690ad56.png create mode 100644 src/server/public/files/upload_58782b7ba1ac3963c4fdd5a987bf0aca.PNG create mode 100644 src/server/public/files/upload_588f580df306a338f7be0483dc30d576.jpg create mode 100644 src/server/public/files/upload_590c965f849c296ae3841689ce80b548.png create mode 100644 src/server/public/files/upload_5915c6516d7a7db8164f7e395b81973e.PNG create mode 100644 src/server/public/files/upload_594db1ea036d584bc71de979ce57832b.PNG create mode 100644 src/server/public/files/upload_5bf829a0b264b321b9b17267ab06a11b.png create mode 100644 src/server/public/files/upload_5cba158af25fb2058c1b2e130cd3fefc.png create mode 100644 src/server/public/files/upload_5d5f91ac61a5e55192c1de4402483126.png create mode 100644 src/server/public/files/upload_5ea64a359728395c1608b8783f6fb192.PNG create mode 100644 src/server/public/files/upload_5f0bace6da44bc7084c6ad01fcfe1012.png create mode 100644 src/server/public/files/upload_5fe9f9fe6eb4a78dcde144c9d4e5d6bb.png create mode 100644 src/server/public/files/upload_604cd121c8ecb30eb4d13cded9ce8746.png create mode 100644 src/server/public/files/upload_60f89c7647c6ed08d977e485fea9e033.jpg create mode 100644 src/server/public/files/upload_62900e4354015fc2bc78f00afbc1bc21.png create mode 100644 src/server/public/files/upload_62f1a7fa74224de7248c62d6d4242fd0.jpg create mode 100644 src/server/public/files/upload_63a7127553e83f381212c80f607c6db5.png create mode 100644 src/server/public/files/upload_63c37ab66ad16d68ef96670b1d04ee1c.png create mode 100644 src/server/public/files/upload_665fb37c1505fdf48a665990caf09d26.png create mode 100644 src/server/public/files/upload_67c7a2ac39caabaac7b90861a1314b8f.png create mode 100644 src/server/public/files/upload_680394edbfb281065997525cc114f996.PNG create mode 100644 src/server/public/files/upload_684090a0c50a035aaa0df23c18043df8.png create mode 100644 src/server/public/files/upload_6bd24b1193058458d6ea268b06963931.PNG create mode 100644 src/server/public/files/upload_6bde8211989cf1b540b3c6dcf16cd51a.PNG create mode 100644 src/server/public/files/upload_6d5051266bd739f260105072299b5c79.png create mode 100644 src/server/public/files/upload_6d9a3ec37d85659265f2b622a6d24dcb.jpg create mode 100644 src/server/public/files/upload_6f222fae83f0185e361bf6a757ba9800.png create mode 100644 src/server/public/files/upload_6f5b0c8a474e44d76cbbea5f629e8fba.png create mode 100644 src/server/public/files/upload_7068f1e2ec782980b4eded2ff974da7f.jpg create mode 100644 src/server/public/files/upload_72c05840ea8bddc44575309923d4c63b.jpg create mode 100644 src/server/public/files/upload_73b42f2f26e037078c1f1c63913fc9aa.jpg create mode 100644 src/server/public/files/upload_7412310b57204cb3c36d5aba670589fc.PNG create mode 100644 src/server/public/files/upload_75d331ba20a80ca0f6fd18bc0b37b8b3.PNG create mode 100644 src/server/public/files/upload_77eab9365e5c11d5e1ac08fca6c862ab.png create mode 100644 src/server/public/files/upload_786b4b94fda60ba60da3dfe2be091b6b.png create mode 100644 src/server/public/files/upload_793745d2b6c8a5c3dbeea343b9332846.PNG create mode 100644 src/server/public/files/upload_7c369564861f079a17bd77081ace597b.PNG create mode 100644 src/server/public/files/upload_7c7f3f317ea27a2ddad9e8a34f636b78.png create mode 100644 src/server/public/files/upload_7f357bbbe7756dabad0b9cb49c9ceb0c.PNG create mode 100644 src/server/public/files/upload_814802d9faf217a7b09c1c95c4ecfd05.png create mode 100644 src/server/public/files/upload_83180cda4fa509f6ff0654376c1da7f2.jpg create mode 100644 src/server/public/files/upload_8321ece56de47e0bf5345fe30d23414e.PNG create mode 100644 src/server/public/files/upload_871f1af44ec7a2140f32433f3015d603.jpg create mode 100644 src/server/public/files/upload_892d1d9d981f679fedaa2c5bf193fd20.jpg create mode 100644 src/server/public/files/upload_89721bf0d244b1fcc52f70a7d9e3593b.jpg create mode 100644 src/server/public/files/upload_89e66f8d531a44a63fa3355602813ae7.png create mode 100644 src/server/public/files/upload_8a6090d2b978221d0810b954f7b14065.PNG create mode 100644 src/server/public/files/upload_8b92f6ffc9a8c8353fd141c6dc71895f.jpg create mode 100644 src/server/public/files/upload_8bfca62429aada8f6b5dae1dcde24cab.png create mode 100644 src/server/public/files/upload_8e9e27d1918f3a0a5f242397079e66fa.png create mode 100644 src/server/public/files/upload_8ef0953ff77d42848b6e7f37e9bd506d.PNG create mode 100644 src/server/public/files/upload_902c6b9c79da47ec00238f4831795077.jpg create mode 100644 src/server/public/files/upload_90d380b38492369c1470868b019f0d0c.jpg create mode 100644 src/server/public/files/upload_95af42b1b5db521aa1539980fe85e71a.jpg create mode 100644 src/server/public/files/upload_97031060c857a0e8f15af3fcc038a2b8.jpg create mode 100644 src/server/public/files/upload_97903efc6c08245acaea37eefacf289f.png create mode 100644 src/server/public/files/upload_9974b3459e182fef33b8e467058b7525.png create mode 100644 src/server/public/files/upload_9a8429dac8feba05bbda2b53b5da4efa.jpg create mode 100644 src/server/public/files/upload_9bbc86def05076b89080adcc37481324.jpg create mode 100644 src/server/public/files/upload_9cd52fc451f3d459021127a7d51d108b.png create mode 100644 src/server/public/files/upload_9de9f004f258cee8c55bf872362d6453.jpg create mode 100644 src/server/public/files/upload_a0286ae2a1eec8c31c8276ec067d91aa.png create mode 100644 src/server/public/files/upload_a04473da584e5a602d0f8984a670a91c.jpg create mode 100644 src/server/public/files/upload_a2cf3f6ab4ab5b249ebf8100e461aa27.png create mode 100644 src/server/public/files/upload_a3095034ec19353c9ee55221088f01d8.PNG create mode 100644 src/server/public/files/upload_a520a6856021104b8130f8d3b42d85c0.png create mode 100644 src/server/public/files/upload_a5c26f52ddcbd705ffbd3dfd7cd2ce40.jpg create mode 100644 src/server/public/files/upload_a60864ff7892974e941e42a2441e530d.png create mode 100644 src/server/public/files/upload_a77f86dbeaa0c3cecc2516f9d9cecf1d.png create mode 100644 src/server/public/files/upload_aa2bbeb0871a2d6b4b54524ac2758270.jpg create mode 100644 src/server/public/files/upload_aa9fec4828bfdfef3ae20d43997fb274.png create mode 100644 src/server/public/files/upload_ab2bba2cee88991561f20d7cd69ec6e1.png create mode 100644 src/server/public/files/upload_ae1c01e481fc6b753c78605bfbe680b9.png create mode 100644 src/server/public/files/upload_b0d25a0dccc640f78dcbc291f930b5d6.png create mode 100644 src/server/public/files/upload_b0e527b27b7cabf651b29c9d834d24f3.PNG create mode 100644 src/server/public/files/upload_b0ea7e49e84cf91075962a75c76d3233.png create mode 100644 src/server/public/files/upload_b1b334829e1d99d7cd32fae5044cc103.PNG create mode 100644 src/server/public/files/upload_b52adf6e1ecdbbe76aa3c038ddc3b02b.PNG create mode 100644 src/server/public/files/upload_b6c992aa6c434520887521e11bb5f492.png create mode 100644 src/server/public/files/upload_ba04eb816ef3bec770aa7eebf3b21cb1.PNG create mode 100644 src/server/public/files/upload_ba58066314a79d1c845241fb4400e44d.png create mode 100644 src/server/public/files/upload_bb6b521b4df6bd783d6a5b83a66caa0a.jpg create mode 100644 src/server/public/files/upload_bcb173a15068ded66b39623ab18bfdb7.jpg create mode 100644 src/server/public/files/upload_be4034faba6a5313dfb8a53e18ffc188.png create mode 100644 src/server/public/files/upload_be5f90995b34cd30d9a269b5a9f10fcc.PNG create mode 100644 src/server/public/files/upload_c1a964ca145f45e7e666cfaf7c8398e3.png create mode 100644 src/server/public/files/upload_c6764790a8182d796acddb76d3df595e.PNG create mode 100644 src/server/public/files/upload_c81bff72d05e0bb7f13376a46506ec2a.jpg create mode 100644 src/server/public/files/upload_c98c0184a19b621b2bc0575b49996a69.png create mode 100644 src/server/public/files/upload_cb4d875a9f73d1f735da5ae82dce6eb1.jpg create mode 100644 src/server/public/files/upload_cd08524995e5f124505fe3d7ab38a41f.png create mode 100644 src/server/public/files/upload_cd73b55488fcc7e5e5e5f2a4c43bc1fd.png create mode 100644 src/server/public/files/upload_ce357d5a6d727ac44110c60dd379428f.png create mode 100644 src/server/public/files/upload_d00c34a1e1c319a9373b5f136c38a866.jpg create mode 100644 src/server/public/files/upload_d242527805ab4c52f2385ae57b85e6fb.png create mode 100644 src/server/public/files/upload_d28007fa68c809cd3c0a78d4a8727275.png create mode 100644 src/server/public/files/upload_d35ea9c62bf8da0352a16193b880469e.jpg create mode 100644 src/server/public/files/upload_d4e0e9d2aee31b5931129dc3bc83e813.png create mode 100644 src/server/public/files/upload_d5801c03d9562a612d1907085ba39373.jpg create mode 100644 src/server/public/files/upload_d6d0e3a302e0edafa70785c39041e522.PNG create mode 100644 src/server/public/files/upload_d6e725cc697751599b177e0cf330b9f2.jpg create mode 100644 src/server/public/files/upload_d794d56fcab3b93b6c79aa201cba34f8.png create mode 100644 src/server/public/files/upload_d8abeaef04a42678432e5e1d3377a2d0.png create mode 100644 src/server/public/files/upload_dac5245c657d29c1c4dfba98472fb50d.pdf create mode 100644 src/server/public/files/upload_db3c5a0b560c9da35607359d86cf2b97.png create mode 100644 src/server/public/files/upload_dc8821dc596b1938c855e0affbe614dd.png create mode 100644 src/server/public/files/upload_df7697c4832990aad0e8d9f0daa1711b.png create mode 100644 src/server/public/files/upload_e009e45db30e47383fad5d71908dc69d.png create mode 100644 src/server/public/files/upload_e15738d092ff38197dc1fb41a4747d16.jpg create mode 100644 src/server/public/files/upload_e51079d9af97a412353d63c60e1ea96d.png create mode 100644 src/server/public/files/upload_e5422cdcfa80628842ff3aacf14ad25e.png create mode 100644 src/server/public/files/upload_e6256196c38216ac539ef7e8ee28ab02.png create mode 100644 src/server/public/files/upload_e9668199bd12c905f27be76b11366d68.png create mode 100644 src/server/public/files/upload_e98ebeeebd5f0ddc98ea9b3a2d9f40d2.png create mode 100644 src/server/public/files/upload_eb2f002129e0cfb5c940f6b4ecc5a8f2.jpg create mode 100644 src/server/public/files/upload_ec02ff06b3154d269086e23ebf6ad942.png create mode 100644 src/server/public/files/upload_ef3873102a70850a4da2040eab002c55.jpg create mode 100644 src/server/public/files/upload_f259c9aa37b0919d6d20ad8d75e8329e.png create mode 100644 src/server/public/files/upload_f48143c75b8c2412785e3ed31ebbb150.PNG create mode 100644 src/server/public/files/upload_f5347da10a373480807fc3469533b9fe.png create mode 100644 src/server/public/files/upload_f6e36f6d3de7a2036eeff617f186b78f.png create mode 100644 src/server/public/files/upload_f6f1ed7a268523278457de08ee61bcfa.PNG create mode 100644 src/server/public/files/upload_f73607b7cf818631165aca9d32ef19c5.jpg create mode 100644 src/server/public/files/upload_f804a6c7ec796718d66108af0b1e6d0e.png create mode 100644 src/server/public/files/upload_f9ed03ab046d7f579d6f531df9c4050a.PNG create mode 100644 src/server/public/files/upload_fac4f686367ad63f2fcc1d8b4f74f123.png create mode 100644 src/server/public/files/upload_faebd8bdc2b00efe50b232c9cf4e63b6.PNG create mode 100644 src/server/public/files/upload_fb3cc3a1d715a6ffa1c72bde91faf3af.png create mode 100644 src/server/public/files/upload_fe2dbe44900645eba61207748f63ade3.jpg create mode 100644 src/server/public/files/upload_ffd58755419ab98f03d56fedd16736e9.jpg (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 2a613ba8b..3a6eadac0 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -49,7 +49,7 @@ export class TooltipTextMenu { e.preventDefault(); view.focus(); items.forEach(({ command, dom }) => { - if (dom.contains(e.srcElement)) { + if (e.srcElement && dom.contains(e.srcElement as Node)) { let active = command(view.state, view.dispatch, view); //uncomment this if we want the bullet button to disappear if current selection is bulleted // dom.style.display = active ? "" : "none" diff --git a/src/client/util/UndoManager.ts b/src/client/util/UndoManager.ts index 6d1b2f1b8..92a6c14e2 100644 --- a/src/client/util/UndoManager.ts +++ b/src/client/util/UndoManager.ts @@ -34,7 +34,20 @@ function propertyDecorator(target: any, key: string | symbol) { } }) } -export function undoBatch(target: any, key: string | symbol, descriptor?: TypedPropertyDescriptor): any { + +export function undoBatch(target: any, key: string | symbol, descriptor?: TypedPropertyDescriptor): any; +export function undoBatch(fn: (...args: any[]) => any): (...args: any[]) => any; +export function undoBatch(target: any, key?: string | symbol, descriptor?: TypedPropertyDescriptor): any { + if (!key) { + return function () { + let batch = UndoManager.StartBatch(""); + try { + return target.apply(undefined, arguments) + } finally { + batch.end(); + } + } + } if (!descriptor) { propertyDecorator(target, key); return; @@ -84,6 +97,7 @@ export namespace UndoManager { export function GetOpenBatches(): Without[] { return openBatches; } + export class Batch { private disposed: boolean = false; @@ -125,8 +139,11 @@ export namespace UndoManager { export function RunInBatch(fn: () => void, batchName: string) { let batch = StartBatch(batchName); - fn(); - batch.end(); + try { + fn(); + } finally { + batch.end(); + } } export const Undo = action(() => { diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index 123ff679b..f7a3601bc 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -10,6 +10,7 @@ import "./InkingCanvas.scss"; import { InkingControl } from "./InkingControl"; import { InkingStroke } from "./InkingStroke"; import React = require("react"); +import { undoBatch } from "../util/UndoManager"; interface InkCanvasProps { getScreenTransform: () => Transform; @@ -21,10 +22,13 @@ export class InkingCanvas extends React.Component { static InkOffset: number = 50000; private _currentStrokeId: string = ""; public static IntersectStrokeRect(stroke: StrokeData, selRect: { left: number, top: number, width: number, height: number }): boolean { - return stroke.pathData.reduce((inside, val) => inside || - (selRect.left < val.x - InkingCanvas.InkOffset && selRect.left + selRect.width > val.x - InkingCanvas.InkOffset && - selRect.top < val.y - InkingCanvas.InkOffset && selRect.top + selRect.height > val.y - InkingCanvas.InkOffset) - , false); + return stroke.pathData.reduce((inside: boolean, val) => inside || + ( + selRect.left < val.x - InkingCanvas.InkOffset && + selRect.left + selRect.width > val.x - InkingCanvas.InkOffset && + selRect.top < val.y - InkingCanvas.InkOffset && + selRect.top + selRect.height > val.y - InkingCanvas.InkOffset + ), false); } @computed @@ -83,7 +87,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); diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index c1519dff8..dcaf472ca 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -21,7 +21,7 @@ export class InkingControl extends React.Component { @observable private _selectedColor: string = "rgb(244, 67, 54)"; @observable private _selectedWidth: string = "25"; @observable private _open: boolean = false; - @observable private _colorPickerDisplay: boolean = false; + @observable private _colorPickerDisplay = false; constructor(props: Readonly<{}>) { super(props); @@ -76,6 +76,7 @@ export class InkingControl extends React.Component { this._open = !this._open; } + @action toggleColorPicker = () => { this._colorPickerDisplay = !this._colorPickerDisplay; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 39e0dd989..4d9985db3 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -226,6 +226,7 @@ export class CollectionDockingView extends React.Component { this.stateChanged(); } + tabCreated = (tab: any) => { if (tab.hasOwnProperty("contentItem") && tab.contentItem.config.type != "stack") { if (tab.titleElement[0].textContent.indexOf("-waiting") != -1) { diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 014aa1d8f..42ed3c86b 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -14,6 +14,7 @@ import { CollectionViewProps } from "./CollectionViewBase"; import { CollectionTreeView } from "./CollectionTreeView"; import { Field, FieldId, FieldWaiting } from "../../../fields/Field"; import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils"; +import { undoBatch } from "../../util/UndoManager"; export enum CollectionViewType { Invalid, @@ -134,9 +135,9 @@ export class CollectionView extends React.Component { specificContextMenu = (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: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) }) - ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) }) - ContextMenu.Instance.addItem({ description: "Treeview", event: () => 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)) }) } } diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 316d20c9d..2042b2712 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -4,7 +4,7 @@ import { ListField } from "../../../fields/ListField"; import React = require("react"); import { KeyStore } from "../../../fields/KeyStore"; import { FieldWaiting, Opt } from "../../../fields/Field"; -import { undoBatch } from "../../util/UndoManager"; +import { undoBatch, UndoManager } from "../../util/UndoManager"; import { DragManager } from "../../util/DragManager"; import { Documents, DocumentOptions } from "../../documents/Documents"; import { Key } from "../../../fields/Key"; @@ -14,9 +14,10 @@ import { RouteStore } from "../../../server/RouteStore"; import { TupleField } from "../../../fields/TupleField"; import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils"; import { NumberField } from "../../../fields/NumberField"; -import request = require("request"); +import * as rp from "request-promise"; import { ServerUtils } from "../../../server/ServerUtil"; import { Server } from "../../Server"; +import { emptyStatement } from "babel-types"; export interface CollectionViewProps { fieldKey: Key; @@ -130,6 +131,7 @@ export class CollectionViewBase extends React.Component return ctor ? ctor(path, options) : undefined; } + @undoBatch @action protected onDrop(e: React.DragEvent, options: DocumentOptions): void { let that = this; @@ -151,23 +153,28 @@ export class CollectionViewBase extends React.Component return; } + let batch = UndoManager.StartBatch("collection view drop"); + let promises: Promise[] = []; 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) { - e.dataTransfer.items[i].getAsString(action((s: string) => { - let document: Document; - request.head(ServerUtils.prepend(RouteStore.corsProxy + "/" + s), (err, res, body) => { + let str: string; + 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)) + })).then(res => { let type = res.headers["content-type"]; if (type) { - let doc = this.getDocumentFromType(type, s, { ...options, width: 300, nativeWidth: 300 }) + let doc = this.getDocumentFromType(type, str, { ...options, width: 300, nativeWidth: 300 }) if (doc) { this.props.addDocument(doc, false); } } }); - // this.props.addDocument(Documents.WebDocument(s, { ...options, width: 300, height: 300 }), false) - })) + promises.push(prom); + // this.props.addDocument(Documents.WebDocument(s, { ...options, width: 300, height: 300 }), false) } let type = item.type if (item.kind == "file") { @@ -178,31 +185,36 @@ export class CollectionViewBase extends React.Component formData.append('file', file) } - fetch(upload, { + let prom = fetch(upload, { method: 'POST', body: formData }).then((res: Response) => { return res.json() }).then(json => { - json.map((file: any) => { + json.map(action((file: any) => { let path = window.location.origin + file - runInAction(() => { - let doc = this.getDocumentFromType(type, path, { ...options, nativeWidth: 300, width: 300 }) - - let docs = that.props.Document.GetT(KeyStore.Data, ListField); - if (docs != FieldWaiting) { - if (!docs) { - docs = new ListField(); - that.props.Document.Set(KeyStore.Data, docs) - } - if (doc) { - docs.Data.push(doc); - } + let doc = this.getDocumentFromType(type, path, { ...options, nativeWidth: 300, width: 300 }) + + let docs = that.props.Document.GetT(KeyStore.Data, ListField); + if (docs != FieldWaiting) { + if (!docs) { + docs = new ListField(); + that.props.Document.Set(KeyStore.Data, docs) + } + if (doc) { + docs.Data.push(doc); } - }) - }) + } + })) }) + promises.push(prom); } } + + if (promises.length) { + Promise.all(promises).catch(() => { }).then(() => batch.end()); + } else { + batch.end(); + } } } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index c5178f69d..2dcf645d0 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -188,7 +188,7 @@ export class CollectionFreeFormView extends CollectionViewBase { 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 => { } diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 28a1f9757..ba022b007 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -151,7 +151,7 @@ export class PDFBox extends React.Component { */ makeEditableAndHighlight = (colour: string) => { var range, sel = window.getSelection(); - if (sel.rangeCount && sel.getRangeAt) { + if (sel && sel.rangeCount && sel.getRangeAt) { range = sel.getRangeAt(0); } document.designMode = "on"; @@ -159,7 +159,7 @@ export class PDFBox extends React.Component { document.execCommand("HiliteColor", false, colour); } - if (range) { + if (sel && range) { sel.removeAllRanges(); sel.addRange(range); diff --git a/src/server/database.ts b/src/server/database.ts index a42d29aac..374cedcbb 100644 --- a/src/server/database.ts +++ b/src/server/database.ts @@ -26,9 +26,9 @@ export class Database { console.log(err.message); console.log(err.errmsg); } - if (res) { - console.log(JSON.stringify(res.result)); - } + // if (res) { + // console.log(JSON.stringify(res.result)); + // } callback() }); } diff --git a/src/server/public/files/upload_011289d8c22f5422cf6f7e27a8c780ef.jpg b/src/server/public/files/upload_011289d8c22f5422cf6f7e27a8c780ef.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_011289d8c22f5422cf6f7e27a8c780ef.jpg differ diff --git a/src/server/public/files/upload_01b38428ccc02261e24689b9d887b206.PNG b/src/server/public/files/upload_01b38428ccc02261e24689b9d887b206.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_01b38428ccc02261e24689b9d887b206.PNG differ diff --git a/src/server/public/files/upload_01e81815633ee270c8b4ffca88a7773e.jpg b/src/server/public/files/upload_01e81815633ee270c8b4ffca88a7773e.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_01e81815633ee270c8b4ffca88a7773e.jpg differ diff --git a/src/server/public/files/upload_031371580a23b87aaafb587ece875819.png b/src/server/public/files/upload_031371580a23b87aaafb587ece875819.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_031371580a23b87aaafb587ece875819.png differ diff --git a/src/server/public/files/upload_03c44479fe728bbcc2f76dab407544d5.png b/src/server/public/files/upload_03c44479fe728bbcc2f76dab407544d5.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_03c44479fe728bbcc2f76dab407544d5.png differ diff --git a/src/server/public/files/upload_05ceaf4112a0e3754a53ab59f4b1ff07.png b/src/server/public/files/upload_05ceaf4112a0e3754a53ab59f4b1ff07.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_05ceaf4112a0e3754a53ab59f4b1ff07.png differ diff --git a/src/server/public/files/upload_061bdf72416cbef898d4cd1a0152ce1f.jpg b/src/server/public/files/upload_061bdf72416cbef898d4cd1a0152ce1f.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_061bdf72416cbef898d4cd1a0152ce1f.jpg differ diff --git a/src/server/public/files/upload_07488f31d6eacb28458c11eb982fa654.jpg b/src/server/public/files/upload_07488f31d6eacb28458c11eb982fa654.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_07488f31d6eacb28458c11eb982fa654.jpg differ diff --git a/src/server/public/files/upload_08afadab5ded674ec3f244b2bd124b8b.PNG b/src/server/public/files/upload_08afadab5ded674ec3f244b2bd124b8b.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_08afadab5ded674ec3f244b2bd124b8b.PNG differ diff --git a/src/server/public/files/upload_09df67e3e4c3bcd2a571d8be5f0acf48.PNG b/src/server/public/files/upload_09df67e3e4c3bcd2a571d8be5f0acf48.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_09df67e3e4c3bcd2a571d8be5f0acf48.PNG differ diff --git a/src/server/public/files/upload_10b64e99df3aac032564573c3699bda4.png b/src/server/public/files/upload_10b64e99df3aac032564573c3699bda4.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_10b64e99df3aac032564573c3699bda4.png differ diff --git a/src/server/public/files/upload_11162dd1b00ed2a26923aa9d2fa9889e.png b/src/server/public/files/upload_11162dd1b00ed2a26923aa9d2fa9889e.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_11162dd1b00ed2a26923aa9d2fa9889e.png differ diff --git a/src/server/public/files/upload_115d44864ee866f2986188501a59342b.png b/src/server/public/files/upload_115d44864ee866f2986188501a59342b.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_115d44864ee866f2986188501a59342b.png differ diff --git a/src/server/public/files/upload_1465783317d01ed75e87e169b56928fd.PNG b/src/server/public/files/upload_1465783317d01ed75e87e169b56928fd.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_1465783317d01ed75e87e169b56928fd.PNG differ diff --git a/src/server/public/files/upload_156cb9406f94654dea0e227e377f0a75.PNG b/src/server/public/files/upload_156cb9406f94654dea0e227e377f0a75.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_156cb9406f94654dea0e227e377f0a75.PNG differ diff --git a/src/server/public/files/upload_166eb5d1d46cf268a59e01b4b32528cd.PNG b/src/server/public/files/upload_166eb5d1d46cf268a59e01b4b32528cd.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_166eb5d1d46cf268a59e01b4b32528cd.PNG differ diff --git a/src/server/public/files/upload_17d2b2f3ec801e6fdcc6d29e523e946b.PNG b/src/server/public/files/upload_17d2b2f3ec801e6fdcc6d29e523e946b.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_17d2b2f3ec801e6fdcc6d29e523e946b.PNG differ diff --git a/src/server/public/files/upload_1863f67c2c193452cc5192f0ebac2a7b.png b/src/server/public/files/upload_1863f67c2c193452cc5192f0ebac2a7b.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_1863f67c2c193452cc5192f0ebac2a7b.png differ diff --git a/src/server/public/files/upload_18d64bf4a483e78a36153abcd26af503.png b/src/server/public/files/upload_18d64bf4a483e78a36153abcd26af503.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_18d64bf4a483e78a36153abcd26af503.png differ diff --git a/src/server/public/files/upload_1a7925dd1140a2b5a7cc5c62ad20a8e8.png b/src/server/public/files/upload_1a7925dd1140a2b5a7cc5c62ad20a8e8.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_1a7925dd1140a2b5a7cc5c62ad20a8e8.png differ diff --git a/src/server/public/files/upload_1c47eb68831fff82bc6982e5df4d02d5.PNG b/src/server/public/files/upload_1c47eb68831fff82bc6982e5df4d02d5.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_1c47eb68831fff82bc6982e5df4d02d5.PNG differ diff --git a/src/server/public/files/upload_1c8f6233068ed1535384500768557e68.png b/src/server/public/files/upload_1c8f6233068ed1535384500768557e68.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_1c8f6233068ed1535384500768557e68.png differ diff --git a/src/server/public/files/upload_1ea7ee56753d0327192da9666de9e305.PNG b/src/server/public/files/upload_1ea7ee56753d0327192da9666de9e305.PNG new file mode 100644 index 000000000..acd759e09 Binary files /dev/null and b/src/server/public/files/upload_1ea7ee56753d0327192da9666de9e305.PNG differ diff --git a/src/server/public/files/upload_2098441ee0ad89e51e825e2fb5f641d2.png b/src/server/public/files/upload_2098441ee0ad89e51e825e2fb5f641d2.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_2098441ee0ad89e51e825e2fb5f641d2.png differ diff --git a/src/server/public/files/upload_23a30791fc2afceb92310a665d364dbd.jpg b/src/server/public/files/upload_23a30791fc2afceb92310a665d364dbd.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_23a30791fc2afceb92310a665d364dbd.jpg differ diff --git a/src/server/public/files/upload_2436e82c2c54dd8f33f74e4440d11104.png b/src/server/public/files/upload_2436e82c2c54dd8f33f74e4440d11104.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_2436e82c2c54dd8f33f74e4440d11104.png differ diff --git a/src/server/public/files/upload_2443e73bbbd67712bcedc04f0ead5617.PNG b/src/server/public/files/upload_2443e73bbbd67712bcedc04f0ead5617.PNG new file mode 100644 index 000000000..acd759e09 Binary files /dev/null and b/src/server/public/files/upload_2443e73bbbd67712bcedc04f0ead5617.PNG differ diff --git a/src/server/public/files/upload_2515fc22ce67c256bf3039bc84e54432.jpg b/src/server/public/files/upload_2515fc22ce67c256bf3039bc84e54432.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_2515fc22ce67c256bf3039bc84e54432.jpg differ diff --git a/src/server/public/files/upload_280bb85121601366f65632649edd9425.jpg b/src/server/public/files/upload_280bb85121601366f65632649edd9425.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_280bb85121601366f65632649edd9425.jpg differ diff --git a/src/server/public/files/upload_284a94d4ba485d6799ee772521846a59.jpg b/src/server/public/files/upload_284a94d4ba485d6799ee772521846a59.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_284a94d4ba485d6799ee772521846a59.jpg differ diff --git a/src/server/public/files/upload_28550bbb245dfbe9b24b2354ed349f0c.jpg b/src/server/public/files/upload_28550bbb245dfbe9b24b2354ed349f0c.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_28550bbb245dfbe9b24b2354ed349f0c.jpg differ diff --git a/src/server/public/files/upload_2abbef5268ab7ca77dad96775cb52345.png b/src/server/public/files/upload_2abbef5268ab7ca77dad96775cb52345.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_2abbef5268ab7ca77dad96775cb52345.png differ diff --git a/src/server/public/files/upload_2b5ec0fba66b5b3b5e47a2c53a1005be.jpg b/src/server/public/files/upload_2b5ec0fba66b5b3b5e47a2c53a1005be.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_2b5ec0fba66b5b3b5e47a2c53a1005be.jpg differ diff --git a/src/server/public/files/upload_2b6f66b8972b2f4991239720bb1df7d4.png b/src/server/public/files/upload_2b6f66b8972b2f4991239720bb1df7d4.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_2b6f66b8972b2f4991239720bb1df7d4.png differ diff --git a/src/server/public/files/upload_2b75a95a64abfe997aa8e12a69d2bc43.png b/src/server/public/files/upload_2b75a95a64abfe997aa8e12a69d2bc43.png new file mode 100644 index 000000000..5bac81362 Binary files /dev/null and b/src/server/public/files/upload_2b75a95a64abfe997aa8e12a69d2bc43.png differ diff --git a/src/server/public/files/upload_2c689fe57038ad6a324297e92badd705.png b/src/server/public/files/upload_2c689fe57038ad6a324297e92badd705.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_2c689fe57038ad6a324297e92badd705.png differ diff --git a/src/server/public/files/upload_2d86441185e38ed16bbf4234d8857e13.PNG b/src/server/public/files/upload_2d86441185e38ed16bbf4234d8857e13.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_2d86441185e38ed16bbf4234d8857e13.PNG differ diff --git a/src/server/public/files/upload_2e68bb961e82faddbaa501c5c4e51795.png b/src/server/public/files/upload_2e68bb961e82faddbaa501c5c4e51795.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_2e68bb961e82faddbaa501c5c4e51795.png differ diff --git a/src/server/public/files/upload_303438040b77efc92ad5a6617edf7000.png b/src/server/public/files/upload_303438040b77efc92ad5a6617edf7000.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_303438040b77efc92ad5a6617edf7000.png differ diff --git a/src/server/public/files/upload_303b28fc64dd65c58382fe2b0a513190.jpg b/src/server/public/files/upload_303b28fc64dd65c58382fe2b0a513190.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_303b28fc64dd65c58382fe2b0a513190.jpg differ diff --git a/src/server/public/files/upload_319f73a65644974e6502a79dfb60b777.jpg b/src/server/public/files/upload_319f73a65644974e6502a79dfb60b777.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_319f73a65644974e6502a79dfb60b777.jpg differ diff --git a/src/server/public/files/upload_33290055bf62326211eb846bc32d7ab9.PNG b/src/server/public/files/upload_33290055bf62326211eb846bc32d7ab9.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_33290055bf62326211eb846bc32d7ab9.PNG differ diff --git a/src/server/public/files/upload_352949a7d58209759d0ab420726acce3.png b/src/server/public/files/upload_352949a7d58209759d0ab420726acce3.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_352949a7d58209759d0ab420726acce3.png differ diff --git a/src/server/public/files/upload_365e7ad24d7b896dc24525068e8f0fba.png b/src/server/public/files/upload_365e7ad24d7b896dc24525068e8f0fba.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_365e7ad24d7b896dc24525068e8f0fba.png differ diff --git a/src/server/public/files/upload_38001ea16c21a82601586e9d7c823e5f.png b/src/server/public/files/upload_38001ea16c21a82601586e9d7c823e5f.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_38001ea16c21a82601586e9d7c823e5f.png differ diff --git a/src/server/public/files/upload_3bb64e7eb87805eb7c2c67352ab3e3f6.PNG b/src/server/public/files/upload_3bb64e7eb87805eb7c2c67352ab3e3f6.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_3bb64e7eb87805eb7c2c67352ab3e3f6.PNG differ diff --git a/src/server/public/files/upload_3cb5a8a9454a1b42a69a3d274c0a00e7.png b/src/server/public/files/upload_3cb5a8a9454a1b42a69a3d274c0a00e7.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_3cb5a8a9454a1b42a69a3d274c0a00e7.png differ diff --git a/src/server/public/files/upload_3db8e110c40cb0770e79a61171eba542.jpg b/src/server/public/files/upload_3db8e110c40cb0770e79a61171eba542.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_3db8e110c40cb0770e79a61171eba542.jpg differ diff --git a/src/server/public/files/upload_41fc781a82b1f33b631e5aa68c6a1a76.PNG b/src/server/public/files/upload_41fc781a82b1f33b631e5aa68c6a1a76.PNG new file mode 100644 index 000000000..acd759e09 Binary files /dev/null and b/src/server/public/files/upload_41fc781a82b1f33b631e5aa68c6a1a76.PNG differ diff --git a/src/server/public/files/upload_42ecb2422b80f6da3afb62543391f58c.PNG b/src/server/public/files/upload_42ecb2422b80f6da3afb62543391f58c.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_42ecb2422b80f6da3afb62543391f58c.PNG differ diff --git a/src/server/public/files/upload_431be602a66059169d1f4c4cd4646476.PNG b/src/server/public/files/upload_431be602a66059169d1f4c4cd4646476.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_431be602a66059169d1f4c4cd4646476.PNG differ diff --git a/src/server/public/files/upload_4543a61bc7c5f79c788b749a9ce7535a.PNG b/src/server/public/files/upload_4543a61bc7c5f79c788b749a9ce7535a.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_4543a61bc7c5f79c788b749a9ce7535a.PNG differ diff --git a/src/server/public/files/upload_45e88f05b821eca6b85c1fc7b048af63.jpg b/src/server/public/files/upload_45e88f05b821eca6b85c1fc7b048af63.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_45e88f05b821eca6b85c1fc7b048af63.jpg differ diff --git a/src/server/public/files/upload_493879305f109a4412223137f7031944.png b/src/server/public/files/upload_493879305f109a4412223137f7031944.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_493879305f109a4412223137f7031944.png differ diff --git a/src/server/public/files/upload_49ac63665b883ea4702733fc8d70f6b1.PNG b/src/server/public/files/upload_49ac63665b883ea4702733fc8d70f6b1.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_49ac63665b883ea4702733fc8d70f6b1.PNG differ diff --git a/src/server/public/files/upload_4bc2bdf9a392b8e567b964f59cfd32a8.PNG b/src/server/public/files/upload_4bc2bdf9a392b8e567b964f59cfd32a8.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_4bc2bdf9a392b8e567b964f59cfd32a8.PNG differ diff --git a/src/server/public/files/upload_4e4560c1f0081b87af4c010792d799fc.jpg b/src/server/public/files/upload_4e4560c1f0081b87af4c010792d799fc.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_4e4560c1f0081b87af4c010792d799fc.jpg differ diff --git a/src/server/public/files/upload_4e56e150f5c92f8980c4df49603747cc.png b/src/server/public/files/upload_4e56e150f5c92f8980c4df49603747cc.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_4e56e150f5c92f8980c4df49603747cc.png differ diff --git a/src/server/public/files/upload_4e897855f35d0aa419d27bfaedae4435.png b/src/server/public/files/upload_4e897855f35d0aa419d27bfaedae4435.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_4e897855f35d0aa419d27bfaedae4435.png differ diff --git a/src/server/public/files/upload_5495509165b60d3c04b8e509a7d187ba.PNG b/src/server/public/files/upload_5495509165b60d3c04b8e509a7d187ba.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_5495509165b60d3c04b8e509a7d187ba.PNG differ diff --git a/src/server/public/files/upload_54d3dcb522f9fe3beb060103248a5ee9.png b/src/server/public/files/upload_54d3dcb522f9fe3beb060103248a5ee9.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_54d3dcb522f9fe3beb060103248a5ee9.png differ diff --git a/src/server/public/files/upload_568996cd49829901200e1bec2b49a176.PNG b/src/server/public/files/upload_568996cd49829901200e1bec2b49a176.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_568996cd49829901200e1bec2b49a176.PNG differ diff --git a/src/server/public/files/upload_5757898e2b8507438e1bdaf7b7fee4bb.png b/src/server/public/files/upload_5757898e2b8507438e1bdaf7b7fee4bb.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_5757898e2b8507438e1bdaf7b7fee4bb.png differ diff --git a/src/server/public/files/upload_57c4353c9d3250bac49753be6b8973c6.png b/src/server/public/files/upload_57c4353c9d3250bac49753be6b8973c6.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_57c4353c9d3250bac49753be6b8973c6.png differ diff --git a/src/server/public/files/upload_57f2901b84275f3e40ca9d41cb7c057d.PNG b/src/server/public/files/upload_57f2901b84275f3e40ca9d41cb7c057d.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_57f2901b84275f3e40ca9d41cb7c057d.PNG differ diff --git a/src/server/public/files/upload_580d262f8a55c2fe3acbc6f0e690ad56.png b/src/server/public/files/upload_580d262f8a55c2fe3acbc6f0e690ad56.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_580d262f8a55c2fe3acbc6f0e690ad56.png differ diff --git a/src/server/public/files/upload_58782b7ba1ac3963c4fdd5a987bf0aca.PNG b/src/server/public/files/upload_58782b7ba1ac3963c4fdd5a987bf0aca.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_58782b7ba1ac3963c4fdd5a987bf0aca.PNG differ diff --git a/src/server/public/files/upload_588f580df306a338f7be0483dc30d576.jpg b/src/server/public/files/upload_588f580df306a338f7be0483dc30d576.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_588f580df306a338f7be0483dc30d576.jpg differ diff --git a/src/server/public/files/upload_590c965f849c296ae3841689ce80b548.png b/src/server/public/files/upload_590c965f849c296ae3841689ce80b548.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_590c965f849c296ae3841689ce80b548.png differ diff --git a/src/server/public/files/upload_5915c6516d7a7db8164f7e395b81973e.PNG b/src/server/public/files/upload_5915c6516d7a7db8164f7e395b81973e.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_5915c6516d7a7db8164f7e395b81973e.PNG differ diff --git a/src/server/public/files/upload_594db1ea036d584bc71de979ce57832b.PNG b/src/server/public/files/upload_594db1ea036d584bc71de979ce57832b.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_594db1ea036d584bc71de979ce57832b.PNG differ diff --git a/src/server/public/files/upload_5bf829a0b264b321b9b17267ab06a11b.png b/src/server/public/files/upload_5bf829a0b264b321b9b17267ab06a11b.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_5bf829a0b264b321b9b17267ab06a11b.png differ diff --git a/src/server/public/files/upload_5cba158af25fb2058c1b2e130cd3fefc.png b/src/server/public/files/upload_5cba158af25fb2058c1b2e130cd3fefc.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_5cba158af25fb2058c1b2e130cd3fefc.png differ diff --git a/src/server/public/files/upload_5d5f91ac61a5e55192c1de4402483126.png b/src/server/public/files/upload_5d5f91ac61a5e55192c1de4402483126.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_5d5f91ac61a5e55192c1de4402483126.png differ diff --git a/src/server/public/files/upload_5ea64a359728395c1608b8783f6fb192.PNG b/src/server/public/files/upload_5ea64a359728395c1608b8783f6fb192.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_5ea64a359728395c1608b8783f6fb192.PNG differ diff --git a/src/server/public/files/upload_5f0bace6da44bc7084c6ad01fcfe1012.png b/src/server/public/files/upload_5f0bace6da44bc7084c6ad01fcfe1012.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_5f0bace6da44bc7084c6ad01fcfe1012.png differ diff --git a/src/server/public/files/upload_5fe9f9fe6eb4a78dcde144c9d4e5d6bb.png b/src/server/public/files/upload_5fe9f9fe6eb4a78dcde144c9d4e5d6bb.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_5fe9f9fe6eb4a78dcde144c9d4e5d6bb.png differ diff --git a/src/server/public/files/upload_604cd121c8ecb30eb4d13cded9ce8746.png b/src/server/public/files/upload_604cd121c8ecb30eb4d13cded9ce8746.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_604cd121c8ecb30eb4d13cded9ce8746.png differ diff --git a/src/server/public/files/upload_60f89c7647c6ed08d977e485fea9e033.jpg b/src/server/public/files/upload_60f89c7647c6ed08d977e485fea9e033.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_60f89c7647c6ed08d977e485fea9e033.jpg differ diff --git a/src/server/public/files/upload_62900e4354015fc2bc78f00afbc1bc21.png b/src/server/public/files/upload_62900e4354015fc2bc78f00afbc1bc21.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_62900e4354015fc2bc78f00afbc1bc21.png differ diff --git a/src/server/public/files/upload_62f1a7fa74224de7248c62d6d4242fd0.jpg b/src/server/public/files/upload_62f1a7fa74224de7248c62d6d4242fd0.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_62f1a7fa74224de7248c62d6d4242fd0.jpg differ diff --git a/src/server/public/files/upload_63a7127553e83f381212c80f607c6db5.png b/src/server/public/files/upload_63a7127553e83f381212c80f607c6db5.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_63a7127553e83f381212c80f607c6db5.png differ diff --git a/src/server/public/files/upload_63c37ab66ad16d68ef96670b1d04ee1c.png b/src/server/public/files/upload_63c37ab66ad16d68ef96670b1d04ee1c.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_63c37ab66ad16d68ef96670b1d04ee1c.png differ diff --git a/src/server/public/files/upload_665fb37c1505fdf48a665990caf09d26.png b/src/server/public/files/upload_665fb37c1505fdf48a665990caf09d26.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_665fb37c1505fdf48a665990caf09d26.png differ diff --git a/src/server/public/files/upload_67c7a2ac39caabaac7b90861a1314b8f.png b/src/server/public/files/upload_67c7a2ac39caabaac7b90861a1314b8f.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_67c7a2ac39caabaac7b90861a1314b8f.png differ diff --git a/src/server/public/files/upload_680394edbfb281065997525cc114f996.PNG b/src/server/public/files/upload_680394edbfb281065997525cc114f996.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_680394edbfb281065997525cc114f996.PNG differ diff --git a/src/server/public/files/upload_684090a0c50a035aaa0df23c18043df8.png b/src/server/public/files/upload_684090a0c50a035aaa0df23c18043df8.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_684090a0c50a035aaa0df23c18043df8.png differ diff --git a/src/server/public/files/upload_6bd24b1193058458d6ea268b06963931.PNG b/src/server/public/files/upload_6bd24b1193058458d6ea268b06963931.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_6bd24b1193058458d6ea268b06963931.PNG differ diff --git a/src/server/public/files/upload_6bde8211989cf1b540b3c6dcf16cd51a.PNG b/src/server/public/files/upload_6bde8211989cf1b540b3c6dcf16cd51a.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_6bde8211989cf1b540b3c6dcf16cd51a.PNG differ diff --git a/src/server/public/files/upload_6d5051266bd739f260105072299b5c79.png b/src/server/public/files/upload_6d5051266bd739f260105072299b5c79.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_6d5051266bd739f260105072299b5c79.png differ diff --git a/src/server/public/files/upload_6d9a3ec37d85659265f2b622a6d24dcb.jpg b/src/server/public/files/upload_6d9a3ec37d85659265f2b622a6d24dcb.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_6d9a3ec37d85659265f2b622a6d24dcb.jpg differ diff --git a/src/server/public/files/upload_6f222fae83f0185e361bf6a757ba9800.png b/src/server/public/files/upload_6f222fae83f0185e361bf6a757ba9800.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_6f222fae83f0185e361bf6a757ba9800.png differ diff --git a/src/server/public/files/upload_6f5b0c8a474e44d76cbbea5f629e8fba.png b/src/server/public/files/upload_6f5b0c8a474e44d76cbbea5f629e8fba.png new file mode 100644 index 000000000..5bac81362 Binary files /dev/null and b/src/server/public/files/upload_6f5b0c8a474e44d76cbbea5f629e8fba.png differ diff --git a/src/server/public/files/upload_7068f1e2ec782980b4eded2ff974da7f.jpg b/src/server/public/files/upload_7068f1e2ec782980b4eded2ff974da7f.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_7068f1e2ec782980b4eded2ff974da7f.jpg differ diff --git a/src/server/public/files/upload_72c05840ea8bddc44575309923d4c63b.jpg b/src/server/public/files/upload_72c05840ea8bddc44575309923d4c63b.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_72c05840ea8bddc44575309923d4c63b.jpg differ diff --git a/src/server/public/files/upload_73b42f2f26e037078c1f1c63913fc9aa.jpg b/src/server/public/files/upload_73b42f2f26e037078c1f1c63913fc9aa.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_73b42f2f26e037078c1f1c63913fc9aa.jpg differ diff --git a/src/server/public/files/upload_7412310b57204cb3c36d5aba670589fc.PNG b/src/server/public/files/upload_7412310b57204cb3c36d5aba670589fc.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_7412310b57204cb3c36d5aba670589fc.PNG differ diff --git a/src/server/public/files/upload_75d331ba20a80ca0f6fd18bc0b37b8b3.PNG b/src/server/public/files/upload_75d331ba20a80ca0f6fd18bc0b37b8b3.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_75d331ba20a80ca0f6fd18bc0b37b8b3.PNG differ diff --git a/src/server/public/files/upload_77eab9365e5c11d5e1ac08fca6c862ab.png b/src/server/public/files/upload_77eab9365e5c11d5e1ac08fca6c862ab.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_77eab9365e5c11d5e1ac08fca6c862ab.png differ diff --git a/src/server/public/files/upload_786b4b94fda60ba60da3dfe2be091b6b.png b/src/server/public/files/upload_786b4b94fda60ba60da3dfe2be091b6b.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_786b4b94fda60ba60da3dfe2be091b6b.png differ diff --git a/src/server/public/files/upload_793745d2b6c8a5c3dbeea343b9332846.PNG b/src/server/public/files/upload_793745d2b6c8a5c3dbeea343b9332846.PNG new file mode 100644 index 000000000..acd759e09 Binary files /dev/null and b/src/server/public/files/upload_793745d2b6c8a5c3dbeea343b9332846.PNG differ diff --git a/src/server/public/files/upload_7c369564861f079a17bd77081ace597b.PNG b/src/server/public/files/upload_7c369564861f079a17bd77081ace597b.PNG new file mode 100644 index 000000000..acd759e09 Binary files /dev/null and b/src/server/public/files/upload_7c369564861f079a17bd77081ace597b.PNG differ diff --git a/src/server/public/files/upload_7c7f3f317ea27a2ddad9e8a34f636b78.png b/src/server/public/files/upload_7c7f3f317ea27a2ddad9e8a34f636b78.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_7c7f3f317ea27a2ddad9e8a34f636b78.png differ diff --git a/src/server/public/files/upload_7f357bbbe7756dabad0b9cb49c9ceb0c.PNG b/src/server/public/files/upload_7f357bbbe7756dabad0b9cb49c9ceb0c.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_7f357bbbe7756dabad0b9cb49c9ceb0c.PNG differ diff --git a/src/server/public/files/upload_814802d9faf217a7b09c1c95c4ecfd05.png b/src/server/public/files/upload_814802d9faf217a7b09c1c95c4ecfd05.png new file mode 100644 index 000000000..4bd1e688a Binary files /dev/null and b/src/server/public/files/upload_814802d9faf217a7b09c1c95c4ecfd05.png differ diff --git a/src/server/public/files/upload_83180cda4fa509f6ff0654376c1da7f2.jpg b/src/server/public/files/upload_83180cda4fa509f6ff0654376c1da7f2.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_83180cda4fa509f6ff0654376c1da7f2.jpg differ diff --git a/src/server/public/files/upload_8321ece56de47e0bf5345fe30d23414e.PNG b/src/server/public/files/upload_8321ece56de47e0bf5345fe30d23414e.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_8321ece56de47e0bf5345fe30d23414e.PNG differ diff --git a/src/server/public/files/upload_871f1af44ec7a2140f32433f3015d603.jpg b/src/server/public/files/upload_871f1af44ec7a2140f32433f3015d603.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_871f1af44ec7a2140f32433f3015d603.jpg differ diff --git a/src/server/public/files/upload_892d1d9d981f679fedaa2c5bf193fd20.jpg b/src/server/public/files/upload_892d1d9d981f679fedaa2c5bf193fd20.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_892d1d9d981f679fedaa2c5bf193fd20.jpg differ diff --git a/src/server/public/files/upload_89721bf0d244b1fcc52f70a7d9e3593b.jpg b/src/server/public/files/upload_89721bf0d244b1fcc52f70a7d9e3593b.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_89721bf0d244b1fcc52f70a7d9e3593b.jpg differ diff --git a/src/server/public/files/upload_89e66f8d531a44a63fa3355602813ae7.png b/src/server/public/files/upload_89e66f8d531a44a63fa3355602813ae7.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_89e66f8d531a44a63fa3355602813ae7.png differ diff --git a/src/server/public/files/upload_8a6090d2b978221d0810b954f7b14065.PNG b/src/server/public/files/upload_8a6090d2b978221d0810b954f7b14065.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_8a6090d2b978221d0810b954f7b14065.PNG differ diff --git a/src/server/public/files/upload_8b92f6ffc9a8c8353fd141c6dc71895f.jpg b/src/server/public/files/upload_8b92f6ffc9a8c8353fd141c6dc71895f.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_8b92f6ffc9a8c8353fd141c6dc71895f.jpg differ diff --git a/src/server/public/files/upload_8bfca62429aada8f6b5dae1dcde24cab.png b/src/server/public/files/upload_8bfca62429aada8f6b5dae1dcde24cab.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_8bfca62429aada8f6b5dae1dcde24cab.png differ diff --git a/src/server/public/files/upload_8e9e27d1918f3a0a5f242397079e66fa.png b/src/server/public/files/upload_8e9e27d1918f3a0a5f242397079e66fa.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_8e9e27d1918f3a0a5f242397079e66fa.png differ diff --git a/src/server/public/files/upload_8ef0953ff77d42848b6e7f37e9bd506d.PNG b/src/server/public/files/upload_8ef0953ff77d42848b6e7f37e9bd506d.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_8ef0953ff77d42848b6e7f37e9bd506d.PNG differ diff --git a/src/server/public/files/upload_902c6b9c79da47ec00238f4831795077.jpg b/src/server/public/files/upload_902c6b9c79da47ec00238f4831795077.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_902c6b9c79da47ec00238f4831795077.jpg differ diff --git a/src/server/public/files/upload_90d380b38492369c1470868b019f0d0c.jpg b/src/server/public/files/upload_90d380b38492369c1470868b019f0d0c.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_90d380b38492369c1470868b019f0d0c.jpg differ diff --git a/src/server/public/files/upload_95af42b1b5db521aa1539980fe85e71a.jpg b/src/server/public/files/upload_95af42b1b5db521aa1539980fe85e71a.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_95af42b1b5db521aa1539980fe85e71a.jpg differ diff --git a/src/server/public/files/upload_97031060c857a0e8f15af3fcc038a2b8.jpg b/src/server/public/files/upload_97031060c857a0e8f15af3fcc038a2b8.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_97031060c857a0e8f15af3fcc038a2b8.jpg differ diff --git a/src/server/public/files/upload_97903efc6c08245acaea37eefacf289f.png b/src/server/public/files/upload_97903efc6c08245acaea37eefacf289f.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_97903efc6c08245acaea37eefacf289f.png differ diff --git a/src/server/public/files/upload_9974b3459e182fef33b8e467058b7525.png b/src/server/public/files/upload_9974b3459e182fef33b8e467058b7525.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_9974b3459e182fef33b8e467058b7525.png differ diff --git a/src/server/public/files/upload_9a8429dac8feba05bbda2b53b5da4efa.jpg b/src/server/public/files/upload_9a8429dac8feba05bbda2b53b5da4efa.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_9a8429dac8feba05bbda2b53b5da4efa.jpg differ diff --git a/src/server/public/files/upload_9bbc86def05076b89080adcc37481324.jpg b/src/server/public/files/upload_9bbc86def05076b89080adcc37481324.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_9bbc86def05076b89080adcc37481324.jpg differ diff --git a/src/server/public/files/upload_9cd52fc451f3d459021127a7d51d108b.png b/src/server/public/files/upload_9cd52fc451f3d459021127a7d51d108b.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_9cd52fc451f3d459021127a7d51d108b.png differ diff --git a/src/server/public/files/upload_9de9f004f258cee8c55bf872362d6453.jpg b/src/server/public/files/upload_9de9f004f258cee8c55bf872362d6453.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_9de9f004f258cee8c55bf872362d6453.jpg differ diff --git a/src/server/public/files/upload_a0286ae2a1eec8c31c8276ec067d91aa.png b/src/server/public/files/upload_a0286ae2a1eec8c31c8276ec067d91aa.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_a0286ae2a1eec8c31c8276ec067d91aa.png differ diff --git a/src/server/public/files/upload_a04473da584e5a602d0f8984a670a91c.jpg b/src/server/public/files/upload_a04473da584e5a602d0f8984a670a91c.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_a04473da584e5a602d0f8984a670a91c.jpg differ diff --git a/src/server/public/files/upload_a2cf3f6ab4ab5b249ebf8100e461aa27.png b/src/server/public/files/upload_a2cf3f6ab4ab5b249ebf8100e461aa27.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_a2cf3f6ab4ab5b249ebf8100e461aa27.png differ diff --git a/src/server/public/files/upload_a3095034ec19353c9ee55221088f01d8.PNG b/src/server/public/files/upload_a3095034ec19353c9ee55221088f01d8.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_a3095034ec19353c9ee55221088f01d8.PNG differ diff --git a/src/server/public/files/upload_a520a6856021104b8130f8d3b42d85c0.png b/src/server/public/files/upload_a520a6856021104b8130f8d3b42d85c0.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_a520a6856021104b8130f8d3b42d85c0.png differ diff --git a/src/server/public/files/upload_a5c26f52ddcbd705ffbd3dfd7cd2ce40.jpg b/src/server/public/files/upload_a5c26f52ddcbd705ffbd3dfd7cd2ce40.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_a5c26f52ddcbd705ffbd3dfd7cd2ce40.jpg differ diff --git a/src/server/public/files/upload_a60864ff7892974e941e42a2441e530d.png b/src/server/public/files/upload_a60864ff7892974e941e42a2441e530d.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_a60864ff7892974e941e42a2441e530d.png differ diff --git a/src/server/public/files/upload_a77f86dbeaa0c3cecc2516f9d9cecf1d.png b/src/server/public/files/upload_a77f86dbeaa0c3cecc2516f9d9cecf1d.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_a77f86dbeaa0c3cecc2516f9d9cecf1d.png differ diff --git a/src/server/public/files/upload_aa2bbeb0871a2d6b4b54524ac2758270.jpg b/src/server/public/files/upload_aa2bbeb0871a2d6b4b54524ac2758270.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_aa2bbeb0871a2d6b4b54524ac2758270.jpg differ diff --git a/src/server/public/files/upload_aa9fec4828bfdfef3ae20d43997fb274.png b/src/server/public/files/upload_aa9fec4828bfdfef3ae20d43997fb274.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_aa9fec4828bfdfef3ae20d43997fb274.png differ diff --git a/src/server/public/files/upload_ab2bba2cee88991561f20d7cd69ec6e1.png b/src/server/public/files/upload_ab2bba2cee88991561f20d7cd69ec6e1.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_ab2bba2cee88991561f20d7cd69ec6e1.png differ diff --git a/src/server/public/files/upload_ae1c01e481fc6b753c78605bfbe680b9.png b/src/server/public/files/upload_ae1c01e481fc6b753c78605bfbe680b9.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_ae1c01e481fc6b753c78605bfbe680b9.png differ diff --git a/src/server/public/files/upload_b0d25a0dccc640f78dcbc291f930b5d6.png b/src/server/public/files/upload_b0d25a0dccc640f78dcbc291f930b5d6.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_b0d25a0dccc640f78dcbc291f930b5d6.png differ diff --git a/src/server/public/files/upload_b0e527b27b7cabf651b29c9d834d24f3.PNG b/src/server/public/files/upload_b0e527b27b7cabf651b29c9d834d24f3.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_b0e527b27b7cabf651b29c9d834d24f3.PNG differ diff --git a/src/server/public/files/upload_b0ea7e49e84cf91075962a75c76d3233.png b/src/server/public/files/upload_b0ea7e49e84cf91075962a75c76d3233.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_b0ea7e49e84cf91075962a75c76d3233.png differ diff --git a/src/server/public/files/upload_b1b334829e1d99d7cd32fae5044cc103.PNG b/src/server/public/files/upload_b1b334829e1d99d7cd32fae5044cc103.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_b1b334829e1d99d7cd32fae5044cc103.PNG differ diff --git a/src/server/public/files/upload_b52adf6e1ecdbbe76aa3c038ddc3b02b.PNG b/src/server/public/files/upload_b52adf6e1ecdbbe76aa3c038ddc3b02b.PNG new file mode 100644 index 000000000..acd759e09 Binary files /dev/null and b/src/server/public/files/upload_b52adf6e1ecdbbe76aa3c038ddc3b02b.PNG differ diff --git a/src/server/public/files/upload_b6c992aa6c434520887521e11bb5f492.png b/src/server/public/files/upload_b6c992aa6c434520887521e11bb5f492.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_b6c992aa6c434520887521e11bb5f492.png differ diff --git a/src/server/public/files/upload_ba04eb816ef3bec770aa7eebf3b21cb1.PNG b/src/server/public/files/upload_ba04eb816ef3bec770aa7eebf3b21cb1.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_ba04eb816ef3bec770aa7eebf3b21cb1.PNG differ diff --git a/src/server/public/files/upload_ba58066314a79d1c845241fb4400e44d.png b/src/server/public/files/upload_ba58066314a79d1c845241fb4400e44d.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_ba58066314a79d1c845241fb4400e44d.png differ diff --git a/src/server/public/files/upload_bb6b521b4df6bd783d6a5b83a66caa0a.jpg b/src/server/public/files/upload_bb6b521b4df6bd783d6a5b83a66caa0a.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_bb6b521b4df6bd783d6a5b83a66caa0a.jpg differ diff --git a/src/server/public/files/upload_bcb173a15068ded66b39623ab18bfdb7.jpg b/src/server/public/files/upload_bcb173a15068ded66b39623ab18bfdb7.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_bcb173a15068ded66b39623ab18bfdb7.jpg differ diff --git a/src/server/public/files/upload_be4034faba6a5313dfb8a53e18ffc188.png b/src/server/public/files/upload_be4034faba6a5313dfb8a53e18ffc188.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_be4034faba6a5313dfb8a53e18ffc188.png differ diff --git a/src/server/public/files/upload_be5f90995b34cd30d9a269b5a9f10fcc.PNG b/src/server/public/files/upload_be5f90995b34cd30d9a269b5a9f10fcc.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_be5f90995b34cd30d9a269b5a9f10fcc.PNG differ diff --git a/src/server/public/files/upload_c1a964ca145f45e7e666cfaf7c8398e3.png b/src/server/public/files/upload_c1a964ca145f45e7e666cfaf7c8398e3.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_c1a964ca145f45e7e666cfaf7c8398e3.png differ diff --git a/src/server/public/files/upload_c6764790a8182d796acddb76d3df595e.PNG b/src/server/public/files/upload_c6764790a8182d796acddb76d3df595e.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_c6764790a8182d796acddb76d3df595e.PNG differ diff --git a/src/server/public/files/upload_c81bff72d05e0bb7f13376a46506ec2a.jpg b/src/server/public/files/upload_c81bff72d05e0bb7f13376a46506ec2a.jpg new file mode 100644 index 000000000..9bb7f57d2 Binary files /dev/null and b/src/server/public/files/upload_c81bff72d05e0bb7f13376a46506ec2a.jpg differ diff --git a/src/server/public/files/upload_c98c0184a19b621b2bc0575b49996a69.png b/src/server/public/files/upload_c98c0184a19b621b2bc0575b49996a69.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_c98c0184a19b621b2bc0575b49996a69.png differ diff --git a/src/server/public/files/upload_cb4d875a9f73d1f735da5ae82dce6eb1.jpg b/src/server/public/files/upload_cb4d875a9f73d1f735da5ae82dce6eb1.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_cb4d875a9f73d1f735da5ae82dce6eb1.jpg differ diff --git a/src/server/public/files/upload_cd08524995e5f124505fe3d7ab38a41f.png b/src/server/public/files/upload_cd08524995e5f124505fe3d7ab38a41f.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_cd08524995e5f124505fe3d7ab38a41f.png differ diff --git a/src/server/public/files/upload_cd73b55488fcc7e5e5e5f2a4c43bc1fd.png b/src/server/public/files/upload_cd73b55488fcc7e5e5e5f2a4c43bc1fd.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_cd73b55488fcc7e5e5e5f2a4c43bc1fd.png differ diff --git a/src/server/public/files/upload_ce357d5a6d727ac44110c60dd379428f.png b/src/server/public/files/upload_ce357d5a6d727ac44110c60dd379428f.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_ce357d5a6d727ac44110c60dd379428f.png differ diff --git a/src/server/public/files/upload_d00c34a1e1c319a9373b5f136c38a866.jpg b/src/server/public/files/upload_d00c34a1e1c319a9373b5f136c38a866.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_d00c34a1e1c319a9373b5f136c38a866.jpg differ diff --git a/src/server/public/files/upload_d242527805ab4c52f2385ae57b85e6fb.png b/src/server/public/files/upload_d242527805ab4c52f2385ae57b85e6fb.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_d242527805ab4c52f2385ae57b85e6fb.png differ diff --git a/src/server/public/files/upload_d28007fa68c809cd3c0a78d4a8727275.png b/src/server/public/files/upload_d28007fa68c809cd3c0a78d4a8727275.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_d28007fa68c809cd3c0a78d4a8727275.png differ diff --git a/src/server/public/files/upload_d35ea9c62bf8da0352a16193b880469e.jpg b/src/server/public/files/upload_d35ea9c62bf8da0352a16193b880469e.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_d35ea9c62bf8da0352a16193b880469e.jpg differ diff --git a/src/server/public/files/upload_d4e0e9d2aee31b5931129dc3bc83e813.png b/src/server/public/files/upload_d4e0e9d2aee31b5931129dc3bc83e813.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_d4e0e9d2aee31b5931129dc3bc83e813.png differ diff --git a/src/server/public/files/upload_d5801c03d9562a612d1907085ba39373.jpg b/src/server/public/files/upload_d5801c03d9562a612d1907085ba39373.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_d5801c03d9562a612d1907085ba39373.jpg differ diff --git a/src/server/public/files/upload_d6d0e3a302e0edafa70785c39041e522.PNG b/src/server/public/files/upload_d6d0e3a302e0edafa70785c39041e522.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_d6d0e3a302e0edafa70785c39041e522.PNG differ diff --git a/src/server/public/files/upload_d6e725cc697751599b177e0cf330b9f2.jpg b/src/server/public/files/upload_d6e725cc697751599b177e0cf330b9f2.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_d6e725cc697751599b177e0cf330b9f2.jpg differ diff --git a/src/server/public/files/upload_d794d56fcab3b93b6c79aa201cba34f8.png b/src/server/public/files/upload_d794d56fcab3b93b6c79aa201cba34f8.png new file mode 100644 index 000000000..4bd1e688a Binary files /dev/null and b/src/server/public/files/upload_d794d56fcab3b93b6c79aa201cba34f8.png differ diff --git a/src/server/public/files/upload_d8abeaef04a42678432e5e1d3377a2d0.png b/src/server/public/files/upload_d8abeaef04a42678432e5e1d3377a2d0.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_d8abeaef04a42678432e5e1d3377a2d0.png differ diff --git a/src/server/public/files/upload_dac5245c657d29c1c4dfba98472fb50d.pdf b/src/server/public/files/upload_dac5245c657d29c1c4dfba98472fb50d.pdf new file mode 100644 index 000000000..7c9fa9a6f Binary files /dev/null and b/src/server/public/files/upload_dac5245c657d29c1c4dfba98472fb50d.pdf differ diff --git a/src/server/public/files/upload_db3c5a0b560c9da35607359d86cf2b97.png b/src/server/public/files/upload_db3c5a0b560c9da35607359d86cf2b97.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_db3c5a0b560c9da35607359d86cf2b97.png differ diff --git a/src/server/public/files/upload_dc8821dc596b1938c855e0affbe614dd.png b/src/server/public/files/upload_dc8821dc596b1938c855e0affbe614dd.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_dc8821dc596b1938c855e0affbe614dd.png differ diff --git a/src/server/public/files/upload_df7697c4832990aad0e8d9f0daa1711b.png b/src/server/public/files/upload_df7697c4832990aad0e8d9f0daa1711b.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_df7697c4832990aad0e8d9f0daa1711b.png differ diff --git a/src/server/public/files/upload_e009e45db30e47383fad5d71908dc69d.png b/src/server/public/files/upload_e009e45db30e47383fad5d71908dc69d.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_e009e45db30e47383fad5d71908dc69d.png differ diff --git a/src/server/public/files/upload_e15738d092ff38197dc1fb41a4747d16.jpg b/src/server/public/files/upload_e15738d092ff38197dc1fb41a4747d16.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_e15738d092ff38197dc1fb41a4747d16.jpg differ diff --git a/src/server/public/files/upload_e51079d9af97a412353d63c60e1ea96d.png b/src/server/public/files/upload_e51079d9af97a412353d63c60e1ea96d.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_e51079d9af97a412353d63c60e1ea96d.png differ diff --git a/src/server/public/files/upload_e5422cdcfa80628842ff3aacf14ad25e.png b/src/server/public/files/upload_e5422cdcfa80628842ff3aacf14ad25e.png new file mode 100644 index 000000000..c178a9106 Binary files /dev/null and b/src/server/public/files/upload_e5422cdcfa80628842ff3aacf14ad25e.png differ diff --git a/src/server/public/files/upload_e6256196c38216ac539ef7e8ee28ab02.png b/src/server/public/files/upload_e6256196c38216ac539ef7e8ee28ab02.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_e6256196c38216ac539ef7e8ee28ab02.png differ diff --git a/src/server/public/files/upload_e9668199bd12c905f27be76b11366d68.png b/src/server/public/files/upload_e9668199bd12c905f27be76b11366d68.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_e9668199bd12c905f27be76b11366d68.png differ diff --git a/src/server/public/files/upload_e98ebeeebd5f0ddc98ea9b3a2d9f40d2.png b/src/server/public/files/upload_e98ebeeebd5f0ddc98ea9b3a2d9f40d2.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_e98ebeeebd5f0ddc98ea9b3a2d9f40d2.png differ diff --git a/src/server/public/files/upload_eb2f002129e0cfb5c940f6b4ecc5a8f2.jpg b/src/server/public/files/upload_eb2f002129e0cfb5c940f6b4ecc5a8f2.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_eb2f002129e0cfb5c940f6b4ecc5a8f2.jpg differ diff --git a/src/server/public/files/upload_ec02ff06b3154d269086e23ebf6ad942.png b/src/server/public/files/upload_ec02ff06b3154d269086e23ebf6ad942.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_ec02ff06b3154d269086e23ebf6ad942.png differ diff --git a/src/server/public/files/upload_ef3873102a70850a4da2040eab002c55.jpg b/src/server/public/files/upload_ef3873102a70850a4da2040eab002c55.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_ef3873102a70850a4da2040eab002c55.jpg differ diff --git a/src/server/public/files/upload_f259c9aa37b0919d6d20ad8d75e8329e.png b/src/server/public/files/upload_f259c9aa37b0919d6d20ad8d75e8329e.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_f259c9aa37b0919d6d20ad8d75e8329e.png differ diff --git a/src/server/public/files/upload_f48143c75b8c2412785e3ed31ebbb150.PNG b/src/server/public/files/upload_f48143c75b8c2412785e3ed31ebbb150.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_f48143c75b8c2412785e3ed31ebbb150.PNG differ diff --git a/src/server/public/files/upload_f5347da10a373480807fc3469533b9fe.png b/src/server/public/files/upload_f5347da10a373480807fc3469533b9fe.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_f5347da10a373480807fc3469533b9fe.png differ diff --git a/src/server/public/files/upload_f6e36f6d3de7a2036eeff617f186b78f.png b/src/server/public/files/upload_f6e36f6d3de7a2036eeff617f186b78f.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_f6e36f6d3de7a2036eeff617f186b78f.png differ diff --git a/src/server/public/files/upload_f6f1ed7a268523278457de08ee61bcfa.PNG b/src/server/public/files/upload_f6f1ed7a268523278457de08ee61bcfa.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_f6f1ed7a268523278457de08ee61bcfa.PNG differ diff --git a/src/server/public/files/upload_f73607b7cf818631165aca9d32ef19c5.jpg b/src/server/public/files/upload_f73607b7cf818631165aca9d32ef19c5.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_f73607b7cf818631165aca9d32ef19c5.jpg differ diff --git a/src/server/public/files/upload_f804a6c7ec796718d66108af0b1e6d0e.png b/src/server/public/files/upload_f804a6c7ec796718d66108af0b1e6d0e.png new file mode 100644 index 000000000..2ff127e97 Binary files /dev/null and b/src/server/public/files/upload_f804a6c7ec796718d66108af0b1e6d0e.png differ diff --git a/src/server/public/files/upload_f9ed03ab046d7f579d6f531df9c4050a.PNG b/src/server/public/files/upload_f9ed03ab046d7f579d6f531df9c4050a.PNG new file mode 100644 index 000000000..2b64654dd Binary files /dev/null and b/src/server/public/files/upload_f9ed03ab046d7f579d6f531df9c4050a.PNG differ diff --git a/src/server/public/files/upload_fac4f686367ad63f2fcc1d8b4f74f123.png b/src/server/public/files/upload_fac4f686367ad63f2fcc1d8b4f74f123.png new file mode 100644 index 000000000..0bacb6189 Binary files /dev/null and b/src/server/public/files/upload_fac4f686367ad63f2fcc1d8b4f74f123.png differ diff --git a/src/server/public/files/upload_faebd8bdc2b00efe50b232c9cf4e63b6.PNG b/src/server/public/files/upload_faebd8bdc2b00efe50b232c9cf4e63b6.PNG new file mode 100644 index 000000000..9105f02e3 Binary files /dev/null and b/src/server/public/files/upload_faebd8bdc2b00efe50b232c9cf4e63b6.PNG differ diff --git a/src/server/public/files/upload_fb3cc3a1d715a6ffa1c72bde91faf3af.png b/src/server/public/files/upload_fb3cc3a1d715a6ffa1c72bde91faf3af.png new file mode 100644 index 000000000..23e8efe47 Binary files /dev/null and b/src/server/public/files/upload_fb3cc3a1d715a6ffa1c72bde91faf3af.png differ diff --git a/src/server/public/files/upload_fe2dbe44900645eba61207748f63ade3.jpg b/src/server/public/files/upload_fe2dbe44900645eba61207748f63ade3.jpg new file mode 100644 index 000000000..756f4572f Binary files /dev/null and b/src/server/public/files/upload_fe2dbe44900645eba61207748f63ade3.jpg differ diff --git a/src/server/public/files/upload_ffd58755419ab98f03d56fedd16736e9.jpg b/src/server/public/files/upload_ffd58755419ab98f03d56fedd16736e9.jpg new file mode 100644 index 000000000..bb78e4c23 Binary files /dev/null and b/src/server/public/files/upload_ffd58755419ab98f03d56fedd16736e9.jpg differ -- 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/collections/CollectionView.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 a12bc4e408119ca2c310c04598c3aa2b424751c5 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 14 Apr 2019 15:10:12 -0400 Subject: restored ContainingCollectionView for use in drawings links (maybe brushing later) --- src/client/views/Main.tsx | 2 +- .../views/collections/CollectionSchemaView.tsx | 4 +++- src/client/views/collections/CollectionSubView.tsx | 2 ++ src/client/views/collections/CollectionView.tsx | 8 +++---- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- .../collections/collectionFreeForm/MarqueeView.tsx | 5 ++-- src/client/views/nodes/DocumentContentsView.tsx | 28 ++++++++++++---------- src/client/views/nodes/FieldView.tsx | 7 ++++-- src/client/views/nodes/KeyValuePair.tsx | 2 ++ 9 files changed, 36 insertions(+), 24 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index babd3be2a..03cfbe9da 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -282,7 +282,7 @@ export class Main extends React.Component { return
    this._textXf} focus={emptyDocFunction} /> + selectOnLoad={true} ContainingCollectionView={undefined} CollectionView={undefined} onActiveChanged={emptyFunction} active={returnTrue} ScreenToLocalTransform={() => this._textXf} focus={emptyDocFunction} />
    ; } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 2a1d1dd94..63346a4c6 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -75,6 +75,8 @@ export class CollectionSchemaView extends CollectionSubView { let props: FieldViewProps = { Document: rowProps.value[0], fieldKey: rowProps.value[1], + CollectionView: this.props.CollectionView, + ContainingCollectionView: this.props.CollectionView, isSelected: returnFalse, select: emptyFunction, isTopMost: false, @@ -313,7 +315,7 @@ export class CollectionSchemaView extends CollectionSubView { ContentScaling={this.getContentScaling} PanelWidth={this.getPanelWidth} PanelHeight={this.getPanelHeight} - ContainingCollectionView={undefined} + ContainingCollectionView={this.props.CollectionView} focus={emptyDocFunction} parentActive={this.props.active} onActiveChanged={this.props.onActiveChanged} /> : null} diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index d91db68bb..61b7787e7 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -16,6 +16,7 @@ import { Server } from "../../Server"; import { FieldViewProps } from "../nodes/FieldView"; import * as rp from 'request-promise'; import { emptyFunction } from "../../../Utils"; +import { CollectionView } from "./CollectionView"; export interface CollectionViewProps extends FieldViewProps { addDocument: (document: Document, allowDuplicates?: boolean) => boolean; @@ -24,6 +25,7 @@ export interface CollectionViewProps extends FieldViewProps { } export interface SubCollectionViewProps extends CollectionViewProps { + CollectionView: Opt; } export type CursorEntry = TupleField<[string, string], [number, number]>; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 8abd0a02d..1f69a69e8 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -18,12 +18,12 @@ export class CollectionView extends React.Component { 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); } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 94945bde6..e9e942b78 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -274,7 +274,7 @@ export class CollectionFreeFormView extends CollectionSubView { PanelWidth: document.Width, PanelHeight: document.Height, ContentScaling: this.noScaling, - ContainingCollectionView: undefined, + ContainingCollectionView: this.props.CollectionView, focus: this.focusDocument, parentActive: this.props.active, onActiveChanged: this.props.active, diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index a4722a6f8..cf75aef40 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -209,10 +209,11 @@ 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 x = doc.GetNumber(KeyStore.X, 0); var y = doc.GetNumber(KeyStore.Y, 0); - var w = doc.GetNumber(KeyStore.Width, 0); - var h = doc.GetNumber(KeyStore.Height, 0); + var w = doc.GetNumber(KeyStore.Width, 0) / z; + var h = doc.GetNumber(KeyStore.Height, 0) / z; if (this.intersectRect({ left: x, top: y, width: w, height: h }, selRect)) { selection.push(doc); } diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 5836da396..a967db000 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -44,19 +44,19 @@ export class DocumentContentsView extends React.Component; + CollectionView: Opt; Document: Document; isSelected: () => boolean; select: (isCtrlPressed: boolean) => void; @@ -90,7 +93,7 @@ export class FieldView extends React.Component { isSelected={returnFalse} select={returnFalse} layoutKey={KeyStore.Layout} - ContainingCollectionView={undefined} + ContainingCollectionView={this.props.ContainingCollectionView} parentActive={this.props.active} onActiveChanged={this.props.onActiveChanged} /> ); diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index 3e0b61c3d..1b9dd26bd 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -47,6 +47,8 @@ export class KeyValuePair extends React.Component { } let props: FieldViewProps = { Document: this.props.doc, + CollectionView: undefined, + ContainingCollectionView: undefined, fieldKey: this.key, isSelected: returnFalse, select: emptyFunction, -- 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/collections/CollectionView.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 21b1e20106ff49c02657c88f503ef46bc7e4fb07 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 16 Apr 2019 23:09:03 -0400 Subject: various bug fixes --- src/client/northstar/dash-nodes/HistogramBox.tsx | 2 +- .../views/collections/CollectionBaseView.tsx | 9 ++++-- .../views/collections/CollectionDockingView.scss | 5 ++++ .../views/collections/CollectionDockingView.tsx | 7 ++++- .../views/collections/CollectionSchemaView.tsx | 14 ++++++---- src/client/views/collections/CollectionView.tsx | 4 ++- .../CollectionFreeFormLinksView.tsx | 4 +-- .../CollectionFreeFormRemoteCursors.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- .../collections/collectionFreeForm/MarqueeView.tsx | 1 - src/client/views/nodes/DocumentView.scss | 4 +-- src/client/views/nodes/ImageBox.tsx | 32 ++++++---------------- 12 files changed, 44 insertions(+), 42 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx index 3e94fed81..0e84ace50 100644 --- a/src/client/northstar/dash-nodes/HistogramBox.tsx +++ b/src/client/northstar/dash-nodes/HistogramBox.tsx @@ -118,7 +118,7 @@ export class HistogramBox extends React.Component { this.props.Document.GetTAsync(this.props.fieldKey, HistogramField).then((histoOp: Opt) => runInAction(() => { this.HistoOp = histoOp ? histoOp.Data : HistogramOperation.Empty; if (this.HistoOp !== HistogramOperation.Empty) { - reaction(() => this.props.Document.GetList(KeyStore.LinkedFromDocs, []), (docs: Document[]) => this.HistoOp.Links.splice(0, this.HistoOp.Links.length, ...docs), { fireImmediately: true }); + reaction(() => this.props.Document.GetList(KeyStore.LinkedFromDocs, [] as Document[]), (docs) => this.HistoOp.Links.splice(0, this.HistoOp.Links.length, ...docs), { fireImmediately: true }); reaction(() => this.props.Document.GetList(KeyStore.BrushingDocs, []).length, () => { let brushingDocs = this.props.Document.GetList(KeyStore.BrushingDocs, [] as Document[]); diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index 444f6fc26..4fda38a26 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -61,13 +61,16 @@ export class CollectionBaseView extends React.Component { } createsCycle(documentToAdd: Document, containerDocument: Document): boolean { - let data = documentToAdd.GetList(KeyStore.Data, []); - for (const doc of data) { + if (!(documentToAdd instanceof Document)) { + return false; + } + let data = documentToAdd.GetList(KeyStore.Data, [] as Document[]); + for (const doc of data.filter(d => d instanceof Document)) { if (this.createsCycle(doc, containerDocument)) { return true; } } - let annots = documentToAdd.GetList(KeyStore.Annotations, []); + let annots = documentToAdd.GetList(KeyStore.Annotations, [] as Document[]); for (const annot of annots) { if (this.createsCycle(annot, containerDocument)) { return true; diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 0e7e0afa7..5ed4567cf 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -2,6 +2,11 @@ .collectiondockingview-content { height: 100%; + text-align:center; + .documentView-node-topmost { + transform-origin: center top; + display: inline-block; + } } .lm_active .messageCounter{ color:white; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 4ea21b2f5..b998362f4 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -327,7 +327,12 @@ export class DockedFrameRenderer extends React.Component { 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 _contentScaling = () => { + let wscale = this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth); + if (wscale * this._nativeHeight() > this._panelHeight) + return this._panelHeight / (this._nativeHeight() ? this._nativeHeight() : this._panelHeight); + return wscale; + } ScreenToLocalTransform = () => { let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!); diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 4f4068e7a..1defdba7e 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -167,7 +167,7 @@ export class CollectionSchemaView extends CollectionSubView { @computed get columns() { - return this.props.Document.GetList(KeyStore.ColumnsKey, []); + return this.props.Document.GetList(KeyStore.ColumnsKey, [] as Key[]); } @action @@ -195,7 +195,7 @@ export class CollectionSchemaView extends CollectionSubView { @computed get findAllDocumentKeys(): { [id: string]: boolean } { - const docs = this.props.Document.GetList(this.props.fieldKey, []); + const docs = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); 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. @@ -237,7 +237,7 @@ export class CollectionSchemaView extends CollectionSubView { } @action setScaling = (r: any) => { - const children = this.props.Document.GetList(this.props.fieldKey, []); + const children = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; this._panelWidth = r.entry.width; this._panelHeight = r.entry.height ? r.entry.height : this._panelHeight; @@ -253,8 +253,10 @@ export class CollectionSchemaView extends CollectionSubView { getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform().translate(- this.borderWidth - this.DIVIDER_WIDTH - this._dividerX - this._tableWidth, - this.borderWidth).scale(1 / this._contentScaling); onPointerDown = (e: React.PointerEvent): void => { - if (e.button === 1 && this.props.isSelected() && !e.altKey && !e.ctrlKey && !e.metaKey) { - e.stopPropagation(); + if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey) { + if (this.props.isSelected()) + e.stopPropagation(); + else e.preventDefault(); } } @@ -293,7 +295,7 @@ export class CollectionSchemaView extends CollectionSubView { library.add(faCog); library.add(faPlus); const columns = this.columns; - const children = this.props.Document.GetList(this.props.fieldKey, []); + const children = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; //all the keys/columns that will be displayed in the schema const allKeys = this.findAllDocumentKeys; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index bd7a5635f..675e720e2 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -29,8 +29,10 @@ export class CollectionView extends React.Component { return (null); } + get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey.Id === KeyStore.Annotations.Id; } // bcz: ? Why do we need to compare Id's? + 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 + if (!this.isAnnotationOverlay && !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)) }); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx index 2f684a54e..cd74d3a84 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx @@ -16,9 +16,9 @@ export class CollectionFreeFormLinksView extends React.Component this.props.Document.GetList(this.props.fieldKey, []).map(doc => doc.GetNumber(KeyStore.X, 0)), + this._brushReactionDisposer = reaction(() => this.props.Document.GetList(this.props.fieldKey, [] as Document[]).map(doc => doc.GetNumber(KeyStore.X, 0)), () => { - let views = this.props.Document.GetList(this.props.fieldKey, []); + let views = this.props.Document.GetList(this.props.fieldKey, [] as Document[]); for (let i = 0; i < views.length; i++) { for (let j = 0; j < views.length; j++) { let srcDoc = views[j]; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx index 751ea8190..cf0a6de00 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx @@ -12,7 +12,7 @@ export class CollectionFreeFormRemoteCursors extends React.Component(KeyStore.Cursors, []); + let cursors = doc.GetList(KeyStore.Cursors, [] as CursorEntry[]); let notMe = cursors.filter(entry => entry.Data[0][0] !== id); return id ? notMe : []; } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 3ae64d2c6..97708ce19 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -218,7 +218,7 @@ export class CollectionFreeFormView extends CollectionSubView { @action bringToFront(doc: Document) { - this.props.Document.GetList(this.props.fieldKey, []).slice().sort((doc1, doc2) => { + this.props.Document.GetList(this.props.fieldKey, [] as Document[]).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); diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 96d59c831..65f461b27 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -147,7 +147,6 @@ 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.Width() + " " + d.Height()); return d; }); let ink = this.props.container.props.Document.GetT(KeyStore.Ink, InkField); diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 6383ac3f6..690ee50e8 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -1,6 +1,6 @@ @import "../globalCssVariables"; -.documentView-node, .documentView-node-topMost { +.documentView-node, .documentView-node-topmost { position: inherit; top: 0; left:0; @@ -29,7 +29,7 @@ height: calc(100% - 20px); } } -.documentView-node-topMost { +.documentView-node-topmost { background: white; } diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index ac54321d5..fe0b07bc0 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -1,24 +1,20 @@ -import { action, observable, trace } from 'mobx'; +import { action, observable } from 'mobx'; import { observer } from "mobx-react"; import Lightbox from 'react-image-lightbox'; import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app +import { Document } from '../../../fields/Document'; import { FieldWaiting } from '../../../fields/Field'; import { ImageField } from '../../../fields/ImageField'; import { KeyStore } from '../../../fields/KeyStore'; +import { ListField } from '../../../fields/ListField'; +import { Utils } from '../../../Utils'; +import { DragManager } from '../../util/DragManager'; +import { undoBatch } from '../../util/UndoManager'; import { ContextMenu } from "../../views/ContextMenu"; import { FieldView, FieldViewProps } from './FieldView'; import "./ImageBox.scss"; import React = require("react"); -import { Utils } from '../../../Utils'; -import { ListField } from '../../../fields/ListField'; -import { DragManager } from '../../util/DragManager'; -import { undoBatch, UndoManager } from '../../util/UndoManager'; -import { TextField } from '../../../fields/TextField'; -import { Document } from '../../../fields/Document'; -import { RouteStore } from '../../../server/RouteStore'; -import { ServerUtils } from '../../../server/ServerUtil'; -import { CollectionSubView } from '../collections/CollectionSubView'; @observer export class ImageBox extends React.Component { @@ -36,10 +32,6 @@ export class ImageBox extends React.Component { super(props); this._imgRef = React.createRef(); - this.state = { - photoIndex: 0, - isOpen: false, - }; } @action @@ -49,8 +41,6 @@ export class ImageBox extends React.Component { if (this._photoIndex == 0) this.props.Document.SetNumber(KeyStore.NativeHeight, this.props.Document.GetNumber(KeyStore.NativeWidth, 0) * h / w); } - componentDidMount() { - } protected createDropTarget = (ele: HTMLDivElement) => { if (this.dropDisposer) { @@ -60,10 +50,6 @@ export class ImageBox extends React.Component { this.dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.drop.bind(this) } }); } } - - componentWillUnmount() { - } - onDrop = (e: React.DragEvent) => { e.stopPropagation(); e.preventDefault(); @@ -158,8 +144,8 @@ export class ImageBox extends React.Component { 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); }} /> +
    +
    { e.stopPropagation(); this.onDotDown(i); }} />
    ) } @@ -174,7 +160,7 @@ export class ImageBox extends React.Component { return (
    Image not found - {this.dots(paths)} + {paths.length > 1 ? this.dots(paths) : (null)} {this.lightbox(paths)}
    ); } -- cgit v1.2.3-70-g09d2 From f01b842a5d6ef6b9deb9807fa0c3a8cd2c81a25a Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Fri, 26 Apr 2019 17:08:38 -0400 Subject: TreeView and others --- src/client/documents/Documents.ts | 3 +- src/client/views/collections/CollectionView.tsx | 9 ++- .../collections/collectionFreeForm/MarqueeView.tsx | 80 +++++++++++----------- src/client/views/nodes/LinkBox.tsx | 77 +++++++++------------ src/new_fields/Doc.ts | 2 +- src/new_fields/InkField.ts | 7 +- src/new_fields/Types.ts | 4 ++ 7 files changed, 91 insertions(+), 91 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index ed76f32ff..9511027d3 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -29,11 +29,12 @@ import { Cast } from "../../new_fields/Types"; import { IconField } from "../../new_fields/IconField"; import { listSpec } from "../../new_fields/Schema"; import { DocServer } from "../DocServer"; +import { StrokeData, InkField } from "../../new_fields/InkField"; export interface DocumentOptions { x?: number; y?: number; - // ink?: Map; + ink?: InkField; width?: number; height?: number; nativeWidth?: number; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 675e720e2..e7bf1e121 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -7,7 +7,6 @@ import { CollectionDockingView } from './CollectionDockingView'; import { CollectionTreeView } from './CollectionTreeView'; import { ContextMenu } from '../ContextMenu'; import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils'; -import { KeyStore } from '../../../fields/KeyStore'; import { observer } from 'mobx-react'; import { undoBatch } from '../../util/UndoManager'; import { trace } from 'mobx'; @@ -29,13 +28,13 @@ export class CollectionView extends React.Component { return (null); } - get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey.Id === KeyStore.Annotations.Id; } // bcz: ? Why do we need to compare Id's? + get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey === "annotations"; } // bcz: ? Why do we need to compare Id's? onContextMenu = (e: React.MouseEvent): void => { if (!this.isAnnotationOverlay && !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.viewType = CollectionViewType.Freeform) }); + ContextMenu.Instance.addItem({ description: "Schema", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Schema) }); + ContextMenu.Instance.addItem({ description: "Treeview", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Tree) }); } } diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index c6681e014..644a8784c 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -1,10 +1,6 @@ import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; -import { Document } from "../../../../fields/Document"; -import { FieldWaiting } from "../../../../fields/Field"; -import { InkField, StrokeData } from "../../../../fields/InkField"; -import { KeyStore } from "../../../../fields/KeyStore"; -import { Documents } from "../../../documents/Documents"; +import { Docs } from "../../../documents/Documents"; import { SelectionManager } from "../../../util/SelectionManager"; import { Transform } from "../../../util/Transform"; import { undoBatch } from "../../../util/UndoManager"; @@ -14,16 +10,19 @@ import { CollectionFreeFormView } from "./CollectionFreeFormView"; import "./MarqueeView.scss"; import React = require("react"); import { Utils } from "../../../../Utils"; +import { Doc } from "../../../../new_fields/Doc"; +import { NumCast, Cast } from "../../../../new_fields/Types"; +import { InkField, StrokeData } from "../../../../new_fields/InkField"; interface MarqueeViewProps { getContainerTransform: () => Transform; getTransform: () => Transform; container: CollectionFreeFormView; - addDocument: (doc: Document, allowDuplicates: false) => boolean; - activeDocuments: () => Document[]; - selectDocuments: (docs: Document[]) => void; - removeDocument: (doc: Document) => boolean; - addLiveTextDocument: (doc: Document) => void; + addDocument: (doc: Doc, allowDuplicates: false) => boolean; + activeDocuments: () => Doc[]; + selectDocuments: (docs: Doc[]) => void; + removeDocument: (doc: Doc) => boolean; + addLiveTextDocument: (doc: Doc) => void; } @observer @@ -49,7 +48,7 @@ export class MarqueeView extends React.Component onKeyPress = (e: KeyboardEvent) => { //make textbox and add it to this collection let [x, y] = this.props.getTransform().transformPoint(this._downX, this._downY); - let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "-typed text-" }); + let newBox = Docs.TextDocument({ width: 200, height: 100, x: x, y: y, title: "-typed text-" }); this.props.addLiveTextDocument(newBox); e.stopPropagation(); } @@ -64,8 +63,9 @@ export class MarqueeView extends React.Component document.addEventListener("pointerup", this.onPointerUp, true); document.addEventListener("keydown", this.marqueeCommand, true); } - if (e.altKey) + if (e.altKey) { e.preventDefault(); + } } @action @@ -80,8 +80,9 @@ export class MarqueeView extends React.Component e.preventDefault(); } } - if (e.altKey) + if (e.altKey) { e.preventDefault(); + } } @action @@ -94,8 +95,9 @@ export class MarqueeView extends React.Component this.props.selectDocuments(mselect.length ? mselect : [this.props.container.props.Document]); } this.cleanupInteractions(true); - if (e.altKey) + if (e.altKey) { e.preventDefault(); + } } @action @@ -127,11 +129,11 @@ export class MarqueeView extends React.Component @undoBatch @action marqueeCommand = (e: KeyboardEvent) => { - if (e.key === "Backspace" || e.key === "Delete" || e.key == "d") { + if (e.key === "Backspace" || e.key === "Delete" || e.key === "d") { this.marqueeSelect().map(d => this.props.removeDocument(d)); - let ink = this.props.container.props.Document.GetT(KeyStore.Ink, InkField); - if (ink && ink !== FieldWaiting) { - this.marqueeInkDelete(ink.Data); + let ink = Cast(this.props.container.props.Document.ink, InkField); + if (ink) { + this.marqueeInkDelete(ink.inkData); } this.cleanupInteractions(true); e.stopPropagation(); @@ -141,33 +143,33 @@ export class MarqueeView extends React.Component let bounds = this.Bounds; let selected = this.marqueeSelect().map(d => { this.props.removeDocument(d); - 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.x = NumCast(d.X) - bounds.left - bounds.width / 2; + d.y = NumCast(d.Y) - bounds.top - bounds.height / 2; + d.page = -1; return d; }); - let ink = this.props.container.props.Document.GetT(KeyStore.Ink, InkField); - let inkData = ink && ink !== FieldWaiting ? ink.Data : undefined; - let zoomBasis = this.props.container.props.Document.GetNumber(KeyStore.Scale, 1); - let newCollection = Documents.FreeformDocument(selected, { + let ink = Cast(this.props.container.props.Document.ink, InkField); + let inkData = ink ? ink.inkData : undefined; + let zoomBasis = NumCast(this.props.container.props.Document.scale, 1); + let newCollection = Docs.FreeformDocument(selected, { x: bounds.left, y: bounds.top, - panx: 0, - pany: 0, + panX: 0, + panY: 0, borderRounding: e.key === "e" ? -1 : undefined, backgroundColor: selected.length ? "white" : "", scale: zoomBasis, width: bounds.width * zoomBasis, height: bounds.height * zoomBasis, - ink: inkData ? this.marqueeInkSelect(inkData) : undefined, + ink: inkData ? new InkField(this.marqueeInkSelect(inkData)) : undefined, title: "a nested collection" }); this.marqueeInkDelete(inkData); SelectionManager.DeselectAll(); if (e.key === "r") { - let summary = Documents.TextDocument({ x: bounds.left, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" }); - summary.GetPrototype()!.CreateLink(newCollection.GetPrototype()!); + let summary = Docs.TextDocument({ x: bounds.left, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" }); + Doc.MakeLink(summary.proto!, newCollection.proto!); this.props.addLiveTextDocument(summary); e.preventDefault(); } @@ -182,9 +184,9 @@ export class MarqueeView extends React.Component let bounds = this.Bounds; let selected = this.marqueeSelect(); SelectionManager.DeselectAll(); - let summary = Documents.TextDocument({ x: bounds.left + bounds.width + 25, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" }); + let summary = Docs.TextDocument({ x: bounds.left + bounds.width + 25, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" }); this.props.addLiveTextDocument(summary); - selected.map(select => summary.GetPrototype()!.CreateLink(select.GetPrototype()!)); + selected.forEach(select => Doc.MakeLink(summary.proto!, select.proto!)); this.cleanupInteractions(true); } @@ -219,19 +221,19 @@ export class MarqueeView extends React.Component let idata = new Map(); ink.forEach((value: StrokeData, key: string, map: any) => !InkingCanvas.IntersectStrokeRect(value, this.Bounds) && idata.set(key, value)); - this.props.container.props.Document.SetDataOnPrototype(KeyStore.Ink, idata, InkField); + Doc.SetOnPrototype(this.props.container.props.Document, "ink", new InkField(idata)); } } marqueeSelect() { let selRect = this.Bounds; - let selection: Document[] = []; + let selection: Doc[] = []; this.props.activeDocuments().map(doc => { - 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; - var h = doc.Height() / z; + var z = NumCast(doc.zoomBasis, 1); + var x = NumCast(doc.x); + var y = NumCast(doc.y); + var w = NumCast(doc.width) / z; + var h = NumCast(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/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx index 1c0e316e8..9bb90de0d 100644 --- a/src/client/views/nodes/LinkBox.tsx +++ b/src/client/views/nodes/LinkBox.tsx @@ -2,15 +2,14 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faEdit, faEye, faTimes } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { observer } from "mobx-react"; -import { Document } from "../../../fields/Document"; -import { KeyStore } from '../../../fields/KeyStore'; -import { ListField } from "../../../fields/ListField"; -import { NumberField } from "../../../fields/NumberField"; import { DocumentManager } from "../../util/DocumentManager"; import { undoBatch } from "../../util/UndoManager"; import { CollectionDockingView } from "../collections/CollectionDockingView"; import './LinkBox.scss'; import React = require("react"); +import { Doc } from '../../../new_fields/Doc'; +import { Cast, NumCast } from '../../../new_fields/Types'; +import { listSpec } from '../../../new_fields/Schema'; library.add(faEye); @@ -18,9 +17,9 @@ library.add(faEdit); library.add(faTimes); interface Props { - linkDoc: Document; + linkDoc: Doc; linkName: String; - pairedDoc: Document; + pairedDoc: Doc; type: String; showEditor: () => void; } @@ -29,62 +28,52 @@ interface Props { export class LinkBox extends React.Component { @undoBatch - onViewButtonPressed = (e: React.PointerEvent): void => { + onViewButtonPressed = async (e: React.PointerEvent): Promise => { e.stopPropagation(); let docView = DocumentManager.Instance.getDocumentView(this.props.pairedDoc); if (docView) { docView.props.focus(docView.props.Document); } else { - this.props.pairedDoc.GetAsync(KeyStore.AnnotationOn, (contextDoc: any) => { - if (!contextDoc) { - CollectionDockingView.Instance.AddRightSplit(this.props.pairedDoc.MakeDelegate()); - } 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) { - contextDoc.SetNumber(KeyStore.CurPage, pfield.Data); - } - let contextView = DocumentManager.Instance.getDocumentView(contextDoc); - if (contextView) { - contextView.props.focus(contextDoc); - } else { - CollectionDockingView.Instance.AddRightSplit(contextDoc); - } - }); - }); + const contextDoc = await Cast(this.props.pairedDoc.annotationOn, Doc); + if (!contextDoc) { + CollectionDockingView.Instance.AddRightSplit(Doc.MakeDelegate(this.props.pairedDoc)); + } else { + const page = NumCast(this.props.pairedDoc.page, undefined); + const curPage = NumCast(contextDoc.curPage, undefined); + if (page !== curPage) { + contextDoc.curPage = page; } - }); + let contextView = DocumentManager.Instance.getDocumentView(contextDoc); + if (contextView) { + contextView.props.focus(contextDoc); + } else { + CollectionDockingView.Instance.AddRightSplit(contextDoc); + } + } } } onEditButtonPressed = (e: React.PointerEvent): void => { - console.log("edit down"); e.stopPropagation(); this.props.showEditor(); } - onDeleteButtonPressed = (e: React.PointerEvent): void => { - console.log("delete down"); + onDeleteButtonPressed = async (e: React.PointerEvent): Promise => { e.stopPropagation(); - this.props.linkDoc.GetTAsync(KeyStore.LinkedFromDocs, Document, field => { - if (field) { - field.GetTAsync>(KeyStore.LinkedToDocs, ListField, field => { - if (field) { - field.Data.splice(field.Data.indexOf(this.props.linkDoc)); - } - }); + const [linkedFrom, linkedTo] = await Promise.all([Cast(this.props.linkDoc.linkedFrom, Doc), Cast(this.props.linkDoc.linkedTo, Doc)]); + if (linkedFrom) { + const linkedToDocs = Cast(linkedFrom.linkedToDocs, listSpec(Doc)); + if (linkedToDocs) { + linkedToDocs.splice(linkedToDocs.indexOf(this.props.linkDoc)); } - }); - this.props.linkDoc.GetTAsync(KeyStore.LinkedToDocs, Document, field => { - if (field) { - field.GetTAsync>(KeyStore.LinkedFromDocs, ListField, field => { - if (field) { - field.Data.splice(field.Data.indexOf(this.props.linkDoc)); - } - }); + } + if (linkedTo) { + const linkedFromDocs = Cast(linkedTo.linkedToDocs, listSpec(Doc)); + if (linkedFromDocs) { + linkedFromDocs.splice(linkedFromDocs.indexOf(this.props.linkDoc)); } - }); + } } render() { diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts index 79e5a156d..a5f495477 100644 --- a/src/new_fields/Doc.ts +++ b/src/new_fields/Doc.ts @@ -91,7 +91,7 @@ export namespace Doc { return Cast(Get(doc, key, ignoreProto), ctor) as T | null | undefined; } export async function SetOnPrototype(doc: Doc, key: string, value: Field) { - const proto = await Cast(doc.proto, Doc); + const proto = doc.proto; if (proto) { proto[key] = value; } diff --git a/src/new_fields/InkField.ts b/src/new_fields/InkField.ts index cdb34cedf..49e6bf61e 100644 --- a/src/new_fields/InkField.ts +++ b/src/new_fields/InkField.ts @@ -27,5 +27,10 @@ const strokeDataSchema = createSimpleSchema({ export class InkField extends ObjectField { @serializable(map(object(strokeDataSchema))) - readonly inkData: Map = new Map; + readonly inkData: Map; + + constructor(data?: Map) { + super(); + this.inkData = data || new Map; + } } diff --git a/src/new_fields/Types.ts b/src/new_fields/Types.ts index 079c7b76d..649dfdc3e 100644 --- a/src/new_fields/Types.ts +++ b/src/new_fields/Types.ts @@ -67,6 +67,10 @@ export function StrCast(field: FieldResult, defaultVal: Opt = "") { return Cast(field, "string", defaultVal); } +export function BoolCast(field: FieldResult, defaultVal: Opt = undefined) { + return Cast(field, "boolean", defaultVal); +} + type WithoutList = T extends List ? R[] : T; export function FieldValue>(field: Opt | Promise>, defaultValue: U): WithoutList; -- cgit v1.2.3-70-g09d2 From 506af03831bf3cc002f93ad8708eafb909c0a194 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sat, 27 Apr 2019 22:27:26 -0400 Subject: Various fixes --- src/client/DocServer.ts | 24 ++++++++++++++++++---- src/client/documents/Documents.ts | 2 +- src/client/northstar/dash-nodes/HistogramBox.tsx | 2 +- src/client/views/collections/CollectionPDFView.tsx | 2 +- src/client/views/collections/CollectionSubView.tsx | 1 + .../views/collections/CollectionVideoView.tsx | 2 +- src/client/views/collections/CollectionView.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/FieldView.tsx | 4 ++-- src/client/views/nodes/FormattedTextBox.tsx | 2 +- src/client/views/nodes/KeyValueBox.tsx | 2 +- src/new_fields/util.ts | 5 +++-- src/server/database.ts | 21 +++++++++++++------ src/server/index.ts | 10 +++++---- 14 files changed, 55 insertions(+), 26 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts index c7cbfce37..07997f072 100644 --- a/src/client/DocServer.ts +++ b/src/client/DocServer.ts @@ -55,12 +55,28 @@ export namespace DocServer { map[id] = cached; } } - const prom = Utils.EmitCallback(_socket, MessageStore.GetFields, requestedIds); - requestedIds.map((id, index) => _cache[id] = prom.then((fields: RefField[]) => fields[index])); + const prom = Utils.EmitCallback(_socket, MessageStore.GetRefFields, requestedIds).then(fields => { + for (const key in fields) { + const field = fields[key]; + if (field) { + fields[key] = SerializationHelper.Deserialize(field); + } + } + return fields; + }); + requestedIds.forEach((id, index) => _cache[id] = prom.then((fields: RefField[]) => fields[index])); const fields = await prom; - requestedIds.map((id, index) => map[id] = fields[index]); + requestedIds.forEach((id, index) => { + const field = fields[index]; + if (field) { + _cache[id] = field; + } else { + delete _cache[id]; + } + map[id] = field; + }); const otherFields = await Promise.all(promises); - waitingIds.map((id, index) => map[id] = otherFields[index]); + waitingIds.forEach((id, index) => map[id] = otherFields[index]); return map; } diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index c30fb21d5..2a9687bda 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -138,7 +138,7 @@ export namespace Docs { return webProto; } function CreateCollectionPrototype(): Doc { - let collProto = setupPrototypeOptions(collProtoId, "COLLECTION_PROTO", CollectionView.LayoutString("DataKey"), + let collProto = setupPrototypeOptions(collProtoId, "COLLECTION_PROTO", CollectionView.LayoutString("data"), { panX: 0, panY: 0, scale: 1, width: 500, height: 500 }); return collProto; } diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx index a9c68ccba..19d108676 100644 --- a/src/client/northstar/dash-nodes/HistogramBox.tsx +++ b/src/client/northstar/dash-nodes/HistogramBox.tsx @@ -26,7 +26,7 @@ import { Id } from "../../../new_fields/RefField"; @observer export class HistogramBox extends React.Component { - public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(HistogramBox, fieldStr); } + public static LayoutString(fieldStr: string = "data") { return FieldView.LayoutString(HistogramBox, fieldStr); } private _dropXRef = React.createRef(); private _dropYRef = React.createRef(); private _dropXDisposer?: DragManager.DragDropDisposer; diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index e73b7b4a6..99438b4e8 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -13,7 +13,7 @@ import { NumCast } from "../../../new_fields/Types"; @observer export class CollectionPDFView extends React.Component { - public static LayoutString(fieldKey: string = "DataKey") { + public static LayoutString(fieldKey: string = "data") { return FieldView.LayoutString(CollectionPDFView, fieldKey); } diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 4d090b680..2c2d74302 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -53,6 +53,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T) { @action protected async setCursorPosition(position: [number, number]) { + return; let ind; let doc = this.props.Document; let id = CurrentUserUtils.id; diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index d314e3fc0..d45be228a 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -18,7 +18,7 @@ export class CollectionVideoView extends React.Component { @observable _currentTimecode: number = 0; @observable _isPlaying: boolean = false; - public static LayoutString(fieldKey: string = "DataKey") { + public static LayoutString(fieldKey: string = "data") { return FieldView.LayoutString(CollectionVideoView, fieldKey); } private get uIButtons() { diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index e7bf1e121..b72065bca 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -13,7 +13,7 @@ import { trace } from 'mobx'; @observer export class CollectionView extends React.Component { - public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(CollectionView, fieldStr); } + public static LayoutString(fieldStr: string = "data") { return FieldView.LayoutString(CollectionView, fieldStr); } private SubView = (type: CollectionViewType, renderProps: CollectionRenderProps) => { let props = { ...this.props, ...renderProps }; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 18107e98a..dfacca204 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -314,7 +314,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { {this.childViews} - + {/* */} diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index dc36c5914..df76f7cea 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -45,8 +45,8 @@ export interface FieldViewProps { @observer export class FieldView extends React.Component { - public static LayoutString(fieldType: { name: string }, fieldStr: string = "DataKey") { - return `<${fieldType.name} {...props} fieldKey={${fieldStr}} />`; + public static LayoutString(fieldType: { name: string }, fieldStr: string = "data") { + return `<${fieldType.name} {...props} fieldKey={"${fieldStr}"} />`; } @computed diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 7a85c9dd3..96512718f 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -55,7 +55,7 @@ const RichTextDocument = makeInterface(richTextSchema); @observer export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTextBoxOverlay), RichTextDocument>(RichTextDocument) { - public static LayoutString(fieldStr: string = "DataKey") { + public static LayoutString(fieldStr: string = "data") { return FieldView.LayoutString(FormattedTextBox, fieldStr); } private _ref: React.RefObject; diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index ae39ebe2d..876a3c173 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -14,7 +14,7 @@ import { Doc, IsField } from "../../../new_fields/Doc"; export class KeyValueBox extends React.Component { private _mainCont = React.createRef(); - public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr); } + public static LayoutString(fieldStr: string = "data") { return FieldView.LayoutString(KeyValueBox, fieldStr); } @observable private _keyInput: string = ""; @observable private _valueInput: string = ""; @computed get splitPercentage() { return NumCast(this.props.Document.schemaSplitPercentage, 50); } diff --git a/src/new_fields/util.ts b/src/new_fields/util.ts index 011e8c8d9..b2299f34a 100644 --- a/src/new_fields/util.ts +++ b/src/new_fields/util.ts @@ -5,8 +5,9 @@ import { ProxyField } from "./Proxy"; import { FieldValue } from "./Types"; import { RefField, Id } from "./RefField"; import { ObjectField, Parent, OnUpdate } from "./ObjectField"; +import { action } from "mobx"; -export function setter(target: any, prop: string | symbol | number, value: any, receiver: any): boolean { +export const setter = action(function (target: any, prop: string | symbol | number, value: any, receiver: any): boolean { if (SerializationHelper.IsSerializing()) { target[prop] = value; return true; @@ -46,7 +47,7 @@ export function setter(target: any, prop: string | symbol | number, value: any, undo: () => receiver[prop] = curValue }); return true; -} +}); export function getter(target: any, prop: string | symbol | number, receiver: any): any { if (typeof prop === "symbol") { diff --git a/src/server/database.ts b/src/server/database.ts index 6b3b6797f..4775c0eeb 100644 --- a/src/server/database.ts +++ b/src/server/database.ts @@ -60,19 +60,28 @@ export class Database { } public getDocument(id: string, fn: (result?: Transferable) => void, collectionName = Database.DocumentsCollection) { - console.log("getDocument"); - this.db && this.db.collection(collectionName).findOne({ id: id }, (err, result) => - fn(result ? ({ id: result._id, type: result.type, data: result.data }) : undefined)); + this.db && this.db.collection(collectionName).findOne({ _id: id }, (err, result) => { + if (result) { + result.id = result._id; + delete result._id; + fn(result); + } else { + fn(undefined); + } + }); } public getDocuments(ids: string[], fn: (result: Transferable[]) => void, collectionName = Database.DocumentsCollection) { - console.log("getDocuments"); - this.db && this.db.collection(collectionName).find({ id: { "$in": ids } }).toArray((err, docs) => { + this.db && this.db.collection(collectionName).find({ _id: { "$in": ids } }).toArray((err, docs) => { if (err) { console.log(err.message); console.log(err.errmsg); } - fn(docs.map(doc => ({ id: doc._id, type: doc.type, data: doc.data }))); + fn(docs.map(doc => { + doc.id = doc._id; + delete doc._id; + return doc; + })); }); } diff --git a/src/server/index.ts b/src/server/index.ts index 10158eb96..6801b3132 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -234,16 +234,18 @@ server.on("connection", function (socket: Socket) { Utils.AddServerHandler(socket, MessageStore.CreateField, CreateField); Utils.AddServerHandler(socket, MessageStore.UpdateField, diff => UpdateField(socket, diff)); - Utils.AddServerHandler(socket, MessageStore.GetRefField, GetRefField); - Utils.AddServerHandler(socket, MessageStore.GetRefFields, GetRefFields); + Utils.AddServerHandlerCallback(socket, MessageStore.GetRefField, GetRefField); + Utils.AddServerHandlerCallback(socket, MessageStore.GetRefFields, GetRefFields); }); -function deleteFields() { - return Database.Instance.deleteAll(); +async function deleteFields() { + await Database.Instance.deleteAll(); + await Database.Instance.deleteAll('newDocuments'); } async function deleteAll() { await Database.Instance.deleteAll(); + await Database.Instance.deleteAll('newDocuments'); await Database.Instance.deleteAll('sessions'); await Database.Instance.deleteAll('users'); } -- cgit v1.2.3-70-g09d2 From a2751d16babb38cde2b86b1cb8fc5d74c15762d7 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sun, 28 Apr 2019 00:23:18 -0400 Subject: Decent amount of stuff is working --- src/client/views/Main.tsx | 2 +- src/client/views/collections/CollectionBaseView.tsx | 2 +- src/client/views/collections/CollectionPDFView.tsx | 3 ++- src/client/views/collections/CollectionVideoView.tsx | 3 ++- src/client/views/collections/CollectionView.tsx | 3 ++- .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 1 + src/client/views/nodes/DocumentView.tsx | 4 ++-- src/client/views/nodes/FormattedTextBox.tsx | 3 ++- src/client/views/nodes/PDFBox.tsx | 2 +- src/new_fields/RichTextField.ts | 2 ++ src/new_fields/Types.ts | 2 +- 12 files changed, 18 insertions(+), 11 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 4a68d1c68..98c5a5306 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -165,7 +165,7 @@ export class Main extends React.Component { @action openWorkspace = async (doc: Doc, fromHistory = false) => { this.mainContainer = doc; - fromHistory || window.history.pushState(null, StrCast(doc.title), "/doc/" + doc.Id); + fromHistory || window.history.pushState(null, StrCast(doc.title), "/doc/" + doc[Id]); const col = await Cast(CurrentUserUtils.UserDocument.optionalRightCollection, Doc); // if there is a pending doc, and it has new data, show it (syip: we use a timeout to prevent collection docking view from being uninitialized) setTimeout(async () => { diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index b2fba1415..ed761d3f3 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -95,7 +95,7 @@ export class CollectionBaseView extends React.Component { //TODO This won't create the field if it doesn't already exist const value = Cast(props.Document[props.fieldKey], listSpec(Doc)); if (value !== undefined) { - if (allowDuplicates || !value.some(v => v.Id === doc.Id)) { + if (allowDuplicates || !value.some(v => v[Id] === doc[Id])) { value.push(doc); } } else { diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index 99438b4e8..5a1af354a 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -8,6 +8,7 @@ import { FieldView, FieldViewProps } from "../nodes/FieldView"; import { CollectionRenderProps, CollectionBaseView, CollectionViewType } from "./CollectionBaseView"; import { emptyFunction } from "../../../Utils"; import { NumCast } from "../../../new_fields/Types"; +import { Id } from "../../../new_fields/RefField"; @observer @@ -33,7 +34,7 @@ export class CollectionPDFView extends React.Component { } onContextMenu = (e: React.MouseEvent): void => { - if (!e.isPropagationStopped() && this.props.Document.Id !== "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 + if (!e.isPropagationStopped() && this.props.Document[Id] !== "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 ContextMenu.Instance.addItem({ description: "PDFOptions", event: emptyFunction }); } } diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index d45be228a..7232ecea2 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -8,6 +8,7 @@ import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormV import { FieldView, FieldViewProps } from "../nodes/FieldView"; import { emptyFunction } from "../../../Utils"; import { NumCast } from "../../../new_fields/Types"; +import { Id } from "../../../new_fields/RefField"; @observer @@ -107,7 +108,7 @@ export class CollectionVideoView extends React.Component { } onContextMenu = (e: React.MouseEvent): void => { - if (!e.isPropagationStopped() && this.props.Document.Id !== "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 + if (!e.isPropagationStopped() && this.props.Document[Id] !== "mainDoc") { // 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: "VideoOptions", event: emptyFunction }); } } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index b72065bca..c2049a09a 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 { observer } from 'mobx-react'; import { undoBatch } from '../../util/UndoManager'; import { trace } from 'mobx'; +import { Id } from '../../../new_fields/RefField'; @observer export class CollectionView extends React.Component { @@ -31,7 +32,7 @@ export class CollectionView extends React.Component { get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey === "annotations"; } // bcz: ? Why do we need to compare Id's? onContextMenu = (e: React.MouseEvent): void => { - if (!this.isAnnotationOverlay && !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 + if (!this.isAnnotationOverlay && !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.viewType = CollectionViewType.Freeform) }); ContextMenu.Instance.addItem({ description: "Schema", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Schema) }); ContextMenu.Instance.addItem({ description: "Treeview", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Tree) }); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index dfacca204..dcded7648 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -257,7 +257,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { moveDocument: this.props.moveDocument, ScreenToLocalTransform: this.getTransform, isTopMost: false, - selectOnLoad: document.Id === this._selectOnLoaded, + selectOnLoad: document[Id] === this._selectOnLoaded, PanelWidth: () => Cast(document.width, "number", 0),//TODO Types These are inline functions PanelHeight: () => Cast(document.height, "number", 0), ContentScaling: returnOne, diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 376af0b36..8766eb7ea 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -20,6 +20,7 @@ const schema = createSchema({ zIndex: "number" }); +//TODO Types: The import order is wrong, so positionSchema is undefined type FreeformDocument = makeInterface<[typeof schema, typeof positionSchema]>; const FreeformDocument = makeInterface(schema, positionSchema); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index c304b6a35..3814eeb9c 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -139,7 +139,7 @@ export class DocumentView extends DocComponent(Docu } onClick = (e: React.MouseEvent): void => { - if (CurrentUserUtils.MainDocId !== this.props.Document.Id && + if (CurrentUserUtils.MainDocId !== this.props.Document[Id] && (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD)) { SelectionManager.SelectDoc(this, e.ctrlKey); @@ -247,7 +247,7 @@ export class DocumentView extends DocComponent(Docu 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(DocServer.prepend("/doc/" + this.props.Document.Id)) }); + ContextMenu.Instance.addItem({ description: "Copy URL", event: () => Utils.CopyText(DocServer.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.addItem({ description: "Delete", event: this.deleteClicked }); diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 96512718f..c4c720ca9 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -22,6 +22,7 @@ import { observer } from "mobx-react"; import { InkingControl } from "../InkingControl"; import { StrCast, Cast } from "../../../new_fields/Types"; import { RichTextField } from "../../../new_fields/RichTextField"; +import { Id } from "../../../new_fields/RefField"; const { buildMenuItems } = require("prosemirror-example-setup"); const { menuBar } = require("prosemirror-menu"); @@ -108,7 +109,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe }; if (this.props.isOverlay) { - this._inputReactionDisposer = reaction(() => MainOverlayTextBox.Instance.TextDoc && MainOverlayTextBox.Instance.TextDoc.Id, + this._inputReactionDisposer = reaction(() => MainOverlayTextBox.Instance.TextDoc && MainOverlayTextBox.Instance.TextDoc[Id], () => { if (this._editorView) { this._editorView.destroy(); diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 7fbfed1c0..9f0849492 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -447,7 +447,7 @@ export class PDFBox extends DocComponent(PdfDocumen let pdfUrl = Cast(this.props.Document[this.props.fieldKey], PdfField); let xf = FieldValue(this.Document.nativeHeight, 0) / renderHeight; return
    - + {({ measureRef }) =>
    diff --git a/src/new_fields/RichTextField.ts b/src/new_fields/RichTextField.ts index 0fa3cf73c..f2033d5a7 100644 --- a/src/new_fields/RichTextField.ts +++ b/src/new_fields/RichTextField.ts @@ -1,6 +1,8 @@ import { ObjectField } from "./ObjectField"; import { serializable } from "serializr"; +import { Deserializable } from "../client/util/SerializationHelper"; +@Deserializable("RichTextField") export class RichTextField extends ObjectField { @serializable(true) readonly Data: string; diff --git a/src/new_fields/Types.ts b/src/new_fields/Types.ts index 3f8eabd45..e179c2602 100644 --- a/src/new_fields/Types.ts +++ b/src/new_fields/Types.ts @@ -76,7 +76,7 @@ type WithoutList = T extends List ? R[] : T; export function FieldValue>(field: FieldResult, defaultValue: U): WithoutList; export function FieldValue(field: FieldResult): Opt; export function FieldValue(field: FieldResult, defaultValue?: T): Opt { - return field instanceof Promise ? defaultValue : field; + return (field instanceof Promise || field === undefined) ? defaultValue : field; } export interface PromiseLike { -- cgit v1.2.3-70-g09d2 From 5f8f133040918713ace577cfe82f38254ea07964 Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 2 May 2019 12:19:31 -0400 Subject: library and workspace stuff. --- src/client/views/Main.tsx | 28 ++----- src/client/views/TemplateMenu.tsx | 7 +- .../views/collections/CollectionDockingView.tsx | 27 ++----- .../views/collections/CollectionTreeView.scss | 1 - .../views/collections/CollectionTreeView.tsx | 57 ++++++++++---- src/client/views/collections/CollectionView.tsx | 1 + src/client/views/nodes/DocumentView.tsx | 10 +-- .../authentication/controllers/WorkspacesMenu.css | 3 - .../authentication/controllers/WorkspacesMenu.tsx | 90 ---------------------- 9 files changed, 60 insertions(+), 164 deletions(-) delete mode 100644 src/server/authentication/controllers/WorkspacesMenu.css delete mode 100644 src/server/authentication/controllers/WorkspacesMenu.tsx (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 4e918221c..b2ca4a196 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -100,8 +100,7 @@ export class Main extends React.Component { onHistory = () => { if (window.location.pathname !== RouteStore.home) { let pathname = window.location.pathname.split("/"); - CurrentUserUtils.MainDocId = pathname[pathname.length - 1]; - DocServer.GetRefField(CurrentUserUtils.MainDocId).then(action((field: Opt) => { + DocServer.GetRefField(pathname[pathname.length - 1]).then(action((field: Opt) => { if (field instanceof Doc) { this.openWorkspace(field, true); } @@ -132,7 +131,6 @@ export class Main extends React.Component { if (!CurrentUserUtils.MainDocId) { const doc = await Cast(CurrentUserUtils.UserDocument.activeWorkspace, Doc); if (doc) { - CurrentUserUtils.MainDocId = doc[Id]; this.openWorkspace(doc); } else { this.createNewWorkspace(); @@ -148,11 +146,12 @@ export class Main extends React.Component { createNewWorkspace = async (id?: string) => { const list = Cast(CurrentUserUtils.UserDocument.data, listSpec(Doc)); if (list) { + let libraryDoc = Docs.TreeDocument([CurrentUserUtils.UserDocument], { x: 0, y: 400, title: `Library: ${CurrentUserUtils.email} ${list.length + 1}` }); + libraryDoc.excludeFromLibrary = true; let freeformDoc = Docs.FreeformDocument([], { x: 0, y: 400, title: `WS collection ${list.length + 1}` }); - var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(freeformDoc)] }] }; - let mainDoc = Docs.DockDocument([freeformDoc], JSON.stringify(dockingLayout), { title: `Workspace ${list.length + 1}` }); + var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(libraryDoc, 150), CollectionDockingView.makeDocumentConfig(freeformDoc, 600)] }] }; + let mainDoc = Docs.DockDocument([libraryDoc, freeformDoc], JSON.stringify(dockingLayout), { title: `Workspace ${list.length + 1}` }); list.push(mainDoc); - CurrentUserUtils.MainDocId = mainDoc[Id]; // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) setTimeout(() => { this.openWorkspace(mainDoc); @@ -164,6 +163,7 @@ export class Main extends React.Component { @action openWorkspace = async (doc: Doc, fromHistory = false) => { + CurrentUserUtils.MainDocId = doc[Id]; this.mainContainer = doc; fromHistory || window.history.pushState(null, StrCast(doc.title), "/doc/" + doc[Id]); const col = await Cast(CurrentUserUtils.UserDocument.optionalRightCollection, Doc); @@ -259,9 +259,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 */ @computed get miscButtons() { - let workspacesRef = React.createRef(); let logoutRef = React.createRef(); - let toggleWorkspaces = () => runInAction(() => this._workspacesShown = !this._workspacesShown); return [ , @@ -270,24 +268,11 @@ export class Main extends React.Component {
    , -
    -
    ,
    ]; } - @computed - get workspaceMenu() { - let areWorkspacesShown = () => this._workspacesShown; - let toggleWorkspaces = () => runInAction(() => this._workspacesShown = !this._workspacesShown); - let workspaces = Cast(CurrentUserUtils.UserDocument.data, listSpec(Doc)); - return (!workspaces || !this.mainContainer) ? (null) : - ; - } - render() { return (
    @@ -297,7 +282,6 @@ export class Main extends React.Component { {this.nodesMenu()} {this.miscButtons} - {this.workspaceMenu}
    diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx index 7be846e05..f29d9c8a1 100644 --- a/src/client/views/TemplateMenu.tsx +++ b/src/client/views/TemplateMenu.tsx @@ -59,12 +59,9 @@ export class TemplateMenu extends React.Component { } render() { - trace(); let templateMenu: Array = []; - this.props.templates.forEach((checked, template) => { - console.log("checked + " + checked + " " + this.props.templates.get(template)); - templateMenu.push(); - }); + this.props.templates.forEach((checked, template) => + templateMenu.push()); return (
    diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 014773ab6..cfb1aef7d 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -19,15 +19,17 @@ import { List } from "../../../new_fields/List"; import { DocServer } from "../../DocServer"; import { listSpec } from "../../../new_fields/Schema"; import { Id, FieldId } from "../../../new_fields/RefField"; +import { faSignInAlt } from "@fortawesome/free-solid-svg-icons"; @observer export class CollectionDockingView extends React.Component { public static Instance: CollectionDockingView; - public static makeDocumentConfig(document: Doc) { + public static makeDocumentConfig(document: Doc, width?: number) { return { type: 'react-component', component: 'DocumentFrameRenderer', title: document.title, + width: width, props: { documentId: document[Id], //collectionDockingView: CollectionDockingView.Instance @@ -37,7 +39,6 @@ export class CollectionDockingView extends React.Component(); - private _fullScreen: any = null; private _flush: boolean = false; private _ignoreStateChange = ""; @@ -67,20 +68,9 @@ export class CollectionDockingView extends React.Component { - _mainCont = React.createRef(); @observable private _panelWidth = 0; @observable private _panelHeight = 0; @@ -347,10 +336,7 @@ export class DockedFrameRenderer extends React.Component { const nativeH = this.nativeHeight(); const nativeW = this.nativeWidth(); let wscale = this._panelWidth / nativeW; - if (wscale * nativeH > this._panelHeight) { - return this._panelHeight / nativeH; - } - return wscale; + return wscale * nativeH > this._panelHeight ? this._panelHeight / nativeH : wscale; } ScreenToLocalTransform = () => { @@ -364,6 +350,8 @@ export class DockedFrameRenderer extends React.Component { get previewPanelCenteringOffset() { return (this._panelWidth - this.nativeWidth() * this.contentScaling()) / 2; } get content() { + if (!this._document) + return (null); return (
    @@ -385,9 +373,10 @@ export class DockedFrameRenderer extends React.Component { } render() { + let theContent = this.content; return !this._document ? (null) : { this._panelWidth = r.entry.width; this._panelHeight = r.entry.height; })}> - {({ measureRef }) =>
    {this.content}
    } + {({ measureRef }) =>
    {theContent}
    }     ; } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 95df5edb9..ecb5f78bb 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -41,7 +41,6 @@ .coll-title { font-size: 24px; - margin-bottom: 20px; } .docContainer { diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index f148c2b2f..0520e0f88 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -9,10 +9,15 @@ import { CollectionSubView } from "./CollectionSubView"; import "./CollectionTreeView.scss"; import React = require("react"); import { Document, listSpec } from '../../../new_fields/Schema'; -import { Cast, StrCast, BoolCast } from '../../../new_fields/Types'; +import { Cast, StrCast, BoolCast, FieldValue } from '../../../new_fields/Types'; import { Doc } from '../../../new_fields/Doc'; import { Id } from '../../../new_fields/RefField'; import { Utils } from '../../../Utils'; +import { JSXElement } from 'babel-types'; +import { ContextMenu } from '../ContextMenu'; +import { undoBatch } from '../../util/UndoManager'; +import { Main } from '../Main'; +import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils'; export interface TreeViewProps { @@ -42,11 +47,14 @@ class TreeView extends React.Component { delete = () => this.props.deleteDoc(this.props.document); + get children() { + return Cast(this.props.document.data, listSpec(Doc), []).filter(doc => FieldValue(doc)); + } + @action remove = (document: Document) => { - var children = Cast(this.props.document.data, listSpec(Doc)); - if (children) { - children.splice(children.indexOf(document), 1); + if (this.children) { + this.children.splice(this.children.indexOf(document), 1); } } @@ -94,27 +102,38 @@ class TreeView extends React.Component {
    ); } + onWorkspaceContextMenu = (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 + if (!ContextMenu.Instance.getItems().some(item => item.description === "Open as Workspace")) { + ContextMenu.Instance.addItem({ description: "Open as Workspace", event: undoBatch(() => Main.Instance.openWorkspace(this.props.document)) }); + } + } + } render() { let bulletType = BulletType.List; - let childElements: JSX.Element | undefined = undefined; + let contentElement: JSX.Element | null = (null); var children = Cast(this.props.document.data, listSpec(Doc)); if (children) { // add children for a collection if (!this._collapsed) { bulletType = BulletType.Collapsible; - childElements =
      - {children.map(value => )} + contentElement =
        + {TreeView.GetChildElements(children, this.remove, this.move, this.props.copyOnDrag)}
      ; } else bulletType = BulletType.Collapsed; } - return
      + return
    • {this.renderBullet(bulletType)} {this.renderTitle()} - {childElements ? childElements : (null)} + {contentElement}
      • ; } + public static GetChildElements(docs: Doc[], remove: ((doc: Doc) => void), move: DragManager.MoveFunction, copyOnDrag: boolean) { + return docs.filter(child => !child.excludeFromLibrary).map(child => + ); + } } @observer @@ -128,21 +147,30 @@ export class CollectionTreeView extends CollectionSubView(Document) { } } + 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: "Create Workspace", event: undoBatch(() => Main.Instance.createNewWorkspace()) }); + } + } render() { const children = this.children; let copyOnDrag = BoolCast(this.props.Document.copyDraggedItems, false); - let childrenElement = !children ? (null) : - (children.map(value => - )); + if (!children) { + return (null); + } + let testForLibrary = children && children.length === 1 && children[0] === CurrentUserUtils.UserDocument; + var subchildren = testForLibrary ? Cast(children[0].data, listSpec(Doc), children) : children; + let childElements = TreeView.GetChildElements(subchildren, this.remove, this.props.moveDocument, copyOnDrag); return (
      e.stopPropagation()} onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget}>
      StrCast(this.props.Document.title)} @@ -151,9 +179,8 @@ export class CollectionTreeView extends CollectionSubView(Document) { return true; }} />
      -
        - {childrenElement} + {childElements}
      ); diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index c2049a09a..8c1442d38 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -11,6 +11,7 @@ import { observer } from 'mobx-react'; import { undoBatch } from '../../util/UndoManager'; import { trace } from 'mobx'; import { Id } from '../../../new_fields/RefField'; +import { Main } from '../Main'; @observer export class CollectionView extends React.Component { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 5588fa1ac..86d34725d 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -205,16 +205,8 @@ export class DocumentView extends DocComponent(Docu CollectionDockingView.Instance.OpenFullScreen(doc); } ContextMenu.Instance.clearItems(); - 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.displayMenu(e.pageX - 15, e.pageY - 15); + SelectionManager.DeselectAll(); } - @undoBatch @action drop = async (e: Event, de: DragManager.DropEvent) => { diff --git a/src/server/authentication/controllers/WorkspacesMenu.css b/src/server/authentication/controllers/WorkspacesMenu.css deleted file mode 100644 index b89039965..000000000 --- a/src/server/authentication/controllers/WorkspacesMenu.css +++ /dev/null @@ -1,3 +0,0 @@ -.ids:hover { - color: darkblue; -} \ No newline at end of file diff --git a/src/server/authentication/controllers/WorkspacesMenu.tsx b/src/server/authentication/controllers/WorkspacesMenu.tsx deleted file mode 100644 index 91756315d..000000000 --- a/src/server/authentication/controllers/WorkspacesMenu.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import * as React from 'react'; -import { observable, action, configure, reaction, computed, ObservableMap, runInAction } from 'mobx'; -import { observer } from "mobx-react"; -import './WorkspacesMenu.css'; -import { EditableView } from '../../../client/views/EditableView'; -import { Doc } from '../../../new_fields/Doc'; -import { StrCast } from '../../../new_fields/Types'; -import { Id } from '../../../new_fields/RefField'; - -export interface WorkspaceMenuProps { - active: Doc | undefined; - open: (workspace: Doc) => void; - new: () => void; - allWorkspaces: Doc[]; - isShown: () => boolean; - toggle: () => void; -} - -@observer -export class WorkspacesMenu extends React.Component { - constructor(props: WorkspaceMenuProps) { - super(props); - this.addNewWorkspace = this.addNewWorkspace.bind(this); - } - - @action - addNewWorkspace() { - this.props.new(); - this.props.toggle(); - } - - render() { - return ( -
      - - {this.props.allWorkspaces.map((s, i) => -
      { - e.preventDefault(); - this.props.open(s); - }} - style={{ - marginTop: 10, - color: s === this.props.active ? "red" : "black" - }} - > - {i + 1} - - StrCast(s.title)} - SetValue={(title: string): boolean => { - s.title = title; - return true; - }} - contents={s.Title} - height={20} - /> -
      - )} -
      - ); - } -} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 0b677567dce5673bc45f08704485901801c90646 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 14 May 2019 22:46:08 -0400 Subject: fixed following links to video frames --- src/client/util/DocumentManager.ts | 12 ++--- .../views/collections/CollectionBaseView.tsx | 2 +- .../views/collections/CollectionSchemaView.scss | 2 +- .../views/collections/CollectionVideoView.tsx | 51 +++++++-------------- src/client/views/collections/CollectionView.tsx | 2 - src/client/views/nodes/KeyValuePair.scss | 2 +- src/client/views/nodes/PDFBox.tsx | 7 +-- src/client/views/nodes/VideoBox.scss | 6 ++- src/client/views/nodes/VideoBox.tsx | 53 ++++++++++++++++++---- 9 files changed, 76 insertions(+), 61 deletions(-) (limited to 'src/client/views/collections/CollectionView.tsx') diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 49c5d8c19..51f5fbe9f 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -111,19 +111,19 @@ export class DocumentManager { @undoBatch public jumpToDocument = async (doc: Doc): Promise => { + const page = NumCast(doc.page, undefined); + const contextDoc = await Cast(doc.annotationOn, Doc); + if (contextDoc) { + const curPage = NumCast(contextDoc.curPage, page); + if (page !== curPage) contextDoc.curPage = page; + } let docView = DocumentManager.Instance.getDocumentView(doc); if (docView) { docView.props.focus(docView.props.Document); } else { - const contextDoc = await Cast(doc.annotationOn, Doc); if (!contextDoc) { CollectionDockingView.Instance.AddRightSplit(Doc.MakeDelegate(doc)); } else { - const page = NumCast(doc.page, undefined); - const curPage = NumCast(contextDoc.curPage, undefined); - if (page !== curPage) { - contextDoc.curPage = page; - } let contextView = DocumentManager.Instance.getDocumentView(contextDoc); if (contextView) { contextDoc.panTransformType = "Ease"; diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index 645296d27..31bdf213e 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -87,7 +87,7 @@ export class CollectionBaseView extends React.Component { @action.bound addDocument(doc: Doc, allowDuplicates: boolean = false): boolean { let props = this.props; - var curPage = Cast(props.Document.curPage, "number", -1); + var curPage = NumCast(props.Document.curPage, -1); Doc.SetOnPrototype(doc, "page", curPage); if (curPage >= 0) { Doc.SetOnPrototype(doc, "annotationOn", props.Document); diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index b9ed99155..5e9d2ac67 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -127,7 +127,7 @@ max-width: 100%; height: 100%; } - .videobox-cont { + .videoBox-cont { object-fit: contain; width: auto; height: 100%; diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index cb3fd1ba4..16121bb1b 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -9,27 +9,26 @@ import { FieldView, FieldViewProps } from "../nodes/FieldView"; import { emptyFunction } from "../../../Utils"; import { Id } from "../../../new_fields/RefField"; import { VideoBox } from "../nodes/VideoBox"; +import { NumCast } from "../../../new_fields/Types"; @observer export class CollectionVideoView extends React.Component { - private _videoBox: VideoBox | undefined = undefined; - @observable _playTimer?: NodeJS.Timeout = undefined; - - @observable _currentTimecode: number = 0; + private _videoBox?: VideoBox; public static LayoutString(fieldKey: string = "data") { return FieldView.LayoutString(CollectionVideoView, fieldKey); } private get uIButtons() { let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().Scale); + let curTime = NumCast(this.props.Document.curPage); return ([
      - {"" + Math.round(this._currentTimecode)} - {" " + Math.round((this._currentTimecode - Math.trunc(this._currentTimecode)) * 100)} + {"" + Math.round(curTime)} + {" " + Math.round((curTime - Math.trunc(curTime)) * 100)}
      ,
      - {this._playTimer ? "\"" : ">"} + {this._videoBox && this._videoBox.Playing ? "\"" : ">"}
      ,
      F @@ -37,37 +36,21 @@ export class CollectionVideoView extends React.Component { ]); } - @action - updateTimecode = () => { - if (this._videoBox && this._videoBox.player) { - this._currentTimecode = this._videoBox.player.currentTime; - this.props.Document.curPage = Math.round(this._currentTimecode); - } - } - - componentDidMount() { this.updateTimecode(); } - - componentWillUnmount() { if (this._playTimer) clearInterval(this._playTimer); } - @action onPlayDown = () => { if (this._videoBox && this._videoBox.player) { - if (this._videoBox.player.paused) { - this._videoBox.player.play(); - if (!this._playTimer) this._playTimer = setInterval(this.updateTimecode, 1000); + if (this._videoBox.Playing) { + this._videoBox.Pause(); } else { - this._videoBox.player.pause(); - if (this._playTimer) clearInterval(this._playTimer); - this._playTimer = undefined; - + this._videoBox.Play(); } } } @action onFullDown = (e: React.PointerEvent) => { - if (this._videoBox && this._videoBox.player) { - this._videoBox.player.requestFullscreen(); + if (this._videoBox) { + this._videoBox.FullScreen(); e.stopPropagation(); e.preventDefault(); } @@ -75,12 +58,9 @@ export class CollectionVideoView extends React.Component { @action onResetDown = () => { - if (this._videoBox && this._videoBox.player) { - this._videoBox.player.pause(); - this._videoBox.player.currentTime = 0; - if (this._playTimer) clearInterval(this._playTimer); - this._playTimer = undefined; - this.updateTimecode(); + if (this._videoBox) { + this._videoBox.Pause(); + this.props.Document.curPage = 0; } } @@ -90,7 +70,7 @@ export class CollectionVideoView extends React.Component { } } - setVideoBox = (player: VideoBox) => { this._videoBox = player; }; + setVideoBox = (videoBox: VideoBox) => { this._videoBox = videoBox; }; private subView = (_type: CollectionViewType, renderProps: CollectionRenderProps) => { let props = { ...this.props, ...renderProps }; @@ -101,6 +81,7 @@ export class CollectionVideoView extends React.Component { } render() { + trace(); return ( {this.subView} diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 8c1442d38..55fd2a284 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -9,9 +9,7 @@ import { ContextMenu } from '../ContextMenu'; import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils'; import { observer } from 'mobx-react'; import { undoBatch } from '../../util/UndoManager'; -import { trace } from 'mobx'; import { Id } from '../../../new_fields/RefField'; -import { Main } from '../Main'; @observer export class CollectionView extends React.Component { diff --git a/src/client/views/nodes/KeyValuePair.scss b/src/client/views/nodes/KeyValuePair.scss index 4f305dc91..a1c5d5537 100644 --- a/src/client/views/nodes/KeyValuePair.scss +++ b/src/client/views/nodes/KeyValuePair.scss @@ -30,7 +30,7 @@ max-height: 36px; width: auto; } - .videobox-cont{ + .videoBox-cont{ width: auto; max-height: 36px; } diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 6cbf066ca..14fe2df80 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -58,7 +58,7 @@ export class PDFBox extends DocComponent(PdfDocumen @observable private _renderAsSvg = true; @observable private _alt = false; - private _reactionDisposer: Opt; + private _reactionDisposer?: IReactionDisposer; @observable private _perPageInfo: Object[] = []; //stores pageInfo @observable private _pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno @@ -84,9 +84,7 @@ export class PDFBox extends DocComponent(PdfDocumen } componentWillUnmount() { - if (this._reactionDisposer) { - this._reactionDisposer(); - } + if (this._reactionDisposer) this._reactionDisposer(); } /** @@ -338,7 +336,6 @@ export class PDFBox extends DocComponent(PdfDocumen @action onKeyDown = (e: React.KeyboardEvent) => e.key === "Alt" && (this._alt = true); @action onKeyUp = (e: React.KeyboardEvent) => e.key === "Alt" && (this._alt = false); render() { - trace(); let classname = "pdfBox-cont"; // + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !this._alt ? "-interactive" : ""); return (
      diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss index 76bbeb37c..35db64cf4 100644 --- a/src/client/views/nodes/VideoBox.scss +++ b/src/client/views/nodes/VideoBox.scss @@ -1,4 +1,8 @@ -.videobox-cont{ +.videoBox-cont, .videoBox-cont-fullScreen{ width: 100%; height: Auto; +} + +.videoBox-cont-fullScreen { + pointer-events: all; } \ No newline at end of file diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 740d4cc1b..96dc884c8 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -3,16 +3,15 @@ import { observer } from "mobx-react"; import { FieldView, FieldViewProps } from './FieldView'; import * as rp from "request-promise"; import "./VideoBox.scss"; -import { action, computed, trace } from "mobx"; +import { action, IReactionDisposer, reaction, observable } from "mobx"; import { DocComponent } from "../DocComponent"; import { positionSchema } from "./DocumentView"; import { makeInterface } from "../../../new_fields/Schema"; import { pageSchema } from "./ImageBox"; -import { Cast, FieldValue, NumCast, ToConstructor, ListSpec } from "../../../new_fields/Types"; +import { Cast, FieldValue, NumCast } from "../../../new_fields/Types"; import { VideoField } from "../../../new_fields/URLField"; import Measure from "react-measure"; import "./VideoBox.scss"; -import { Field, FieldResult, Opt } from "../../../new_fields/Doc"; import { RouteStore } from "../../../server/RouteStore"; import { DocServer } from "../../DocServer"; @@ -21,10 +20,12 @@ const VideoDocument = makeInterface(positionSchema, pageSchema); @observer export class VideoBox extends DocComponent(VideoDocument) { - + private _reactionDisposer?: IReactionDisposer; private _videoRef: HTMLVideoElement | null = null; private _loaded: boolean = false; - private get initialTimecode() { return FieldValue(this.Document.curPage, -1); } + @observable _playTimer?: NodeJS.Timeout = undefined; + @observable _fullScreen = false; + @observable public Playing: boolean = false; public static LayoutString() { return FieldView.LayoutString(VideoBox); } public get player(): HTMLVideoElement | undefined { @@ -48,19 +49,50 @@ export class VideoBox extends DocComponent(VideoD } } + @action public Play() { + this.Playing = true; + if (this.player) this.player.play(); + if (!this._playTimer) this._playTimer = setInterval(this.updateTimecode, 1000); + } + + @action public Pause() { + this.Playing = false; + if (this.player) this.player.pause(); + if (this._playTimer) { + clearInterval(this._playTimer); + this._playTimer = undefined; + } + } + + @action public FullScreen() { + this._fullScreen = true; + this.player && this.player.requestFullscreen(); + } + + @action + updateTimecode = () => this.player && (this.props.Document.curPage = this.player.currentTime); + componentDidMount() { if (this.props.setVideoBox) this.props.setVideoBox(this); } + componentWillUnmount() { + this.Pause(); + if (this._reactionDisposer) this._reactionDisposer(); + } @action setVideoRef = (vref: HTMLVideoElement | null) => { this._videoRef = vref; - if (this.initialTimecode >= 0 && vref) { - vref.currentTime = this.initialTimecode; + if (vref) { + vref.onfullscreenchange = action((e) => this._fullScreen = vref.webkitDisplayingFullscreen); + if (this._reactionDisposer) this._reactionDisposer(); + this._reactionDisposer = reaction(() => this.props.Document.curPage, () => + vref.currentTime = NumCast(this.props.Document.curPage, 0), { fireImmediately: true }); } } videoContent(path: string) { - return