From 1d667d19f5402dc9f9069e0a57008dac96f6de2a Mon Sep 17 00:00:00 2001 From: madelinegr Date: Tue, 12 Feb 2019 18:55:11 -0500 Subject: set up web box classes --- src/client/views/Main.tsx | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'src/client/views/Main.tsx') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index ba92cc17e..3e5118379 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -78,6 +78,12 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { // mainNodes.Data.push(doc1); // mainNodes.Data.push(doc2); mainNodes.Data.push(doc6); + + let doc9 = Documents.WebDocument("https://cs.brown.edu/", { + x: 450, y: 100, title: "cat 1", width: 606, height: 386, nativeWidth: 606, nativeHeight: 386 + }); + mainNodes.Data.push(doc9); + mainContainer.Set(KeyStore.Data, mainNodes); } //} -- cgit v1.2.3-70-g09d2 From e8bd54161e55b8ed429a3c99e05be8ea89653194 Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Wed, 13 Feb 2019 15:31:29 -0500 Subject: nav beginning --- src/TempTreeView.scss | 0 src/TempTreeView.tsx | 28 ------------- src/client/views/DocumentManager.tsx | 51 +++++++++++++++++++++++ src/client/views/Main.tsx | 74 ++++++++++++++++----------------- src/client/views/TempTreeView.scss | 12 ++++++ src/client/views/TempTreeView.tsx | 47 +++++++++++++++++++++ src/client/views/nodes/DocumentView.tsx | 18 ++++++++ 7 files changed, 164 insertions(+), 66 deletions(-) delete mode 100644 src/TempTreeView.scss delete mode 100644 src/TempTreeView.tsx create mode 100644 src/client/views/DocumentManager.tsx create mode 100644 src/client/views/TempTreeView.scss create mode 100644 src/client/views/TempTreeView.tsx (limited to 'src/client/views/Main.tsx') diff --git a/src/TempTreeView.scss b/src/TempTreeView.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/TempTreeView.tsx b/src/TempTreeView.tsx deleted file mode 100644 index 0311d09bc..000000000 --- a/src/TempTreeView.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { observable, computed } from "mobx"; -import React = require("react"); -import { observer } from "mobx-react"; -import { Document } from "./fields/Document"; - -export interface IProps { - mainCollection: Array; -} - -@observer -export class TempTreeView extends React.Component{ - - render() { - return ( -
- {this.props.mainCollection.map(node => { - return ( -
- {node.Title} -
- ) - } - )}} -
- ); - } - -} \ No newline at end of file diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx new file mode 100644 index 000000000..b69d40148 --- /dev/null +++ b/src/client/views/DocumentManager.tsx @@ -0,0 +1,51 @@ +import React = require('react') +import { observer } from 'mobx-react'; +import { observable, action } from 'mobx'; +import { DocumentView } from './nodes/DocumentView'; +import { Document } from "../../fields/Document" + + +export class DocumentManager { + + //global holds all of the nodes (regardless of which collection they're in) + @observable + public DocumentViews: DocumentView[]; + + // singleton instance + private static _instance: DocumentManager; + + // create one and only one instance of NodeManager + public static get Instance(): DocumentManager { + return this._instance || (this._instance = new this()); + } + + //private constructor so no other class can create a nodemanager + private constructor() { + this.DocumentViews = new Array(); + } + + public getDocumentView(toFind: Document): DocumentView | null { + + let toReturn: DocumentView | null; + toReturn = null; + + DocumentManager.Instance.DocumentViews.map(view => { + let doc = view.props.Document; + if (Object.is(doc, toFind)) { + toReturn = view; + return; + } + }) + + return (toReturn); + } + + public centerNode(doc: DocumentView) { + + } + + public setPosition(doc: DocumentView) { + + } + +} \ No newline at end of file diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 6202be95f..240010f27 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -40,43 +40,41 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { //runInAction(() => -{ - let doc1 = Documents.TextDocument({ title: "hello", width: 400, height: 300 }); - let doc2 = doc1.MakeDelegate(); - doc2.Set(KS.X, new NumberField(150)); - doc2.Set(KS.Y, new NumberField(20)); - let doc3 = Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", { - x: 450, y: 100, title: "cat 1", width: 606, height: 386, nativeWidth: 606, nativeHeight: 386 - }); - //doc3.Set(KeyStore.Data, new ImageField); - const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", { - x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v, nativeWidth: 606, nativeHeight: 386 - })); - schemaDocs[0].SetData(KS.Author, "Tyler", TextField); - schemaDocs[4].SetData(KS.Author, "Bob", TextField); - schemaDocs.push(doc2); - const doc7 = Documents.SchemaDocument(schemaDocs) - const docset = [doc1, doc2, doc3, doc7]; - let doc4 = Documents.CollectionDocument(docset, { - x: 0, y: 400, title: "mini collection" - }); - // let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { - // x: 650, y: 500, width: 600, height: 600, title: "cat 2" - // }); - let docset2 = [doc3, doc1, doc2]; - let doc6 = Documents.CollectionDocument(docset2, { - x: 350, y: 100, width: 600, height: 600, title: "docking collection" - }); - let mainNodes = mainContainer.GetOrCreate>(KeyStore.Data, ListField); - // mainNodes.Data.push(doc6); - // mainNodes.Data.push(doc2); - mainNodes.Data.push(doc4); - mainNodes.Data.push(doc3); - // mainNodes.Data.push(doc5); - // mainNodes.Data.push(doc1); - // mainNodes.Data.push(doc2); - mainNodes.Data.push(doc6); -} +let doc1 = Documents.TextDocument({ title: "hello", width: 400, height: 300 }); +let doc2 = doc1.MakeDelegate(); +doc2.Set(KS.X, new NumberField(150)); +doc2.Set(KS.Y, new NumberField(20)); +let doc3 = Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", { + x: 450, y: 100, title: "cat 1", width: 606, height: 386, nativeWidth: 606, nativeHeight: 386 +}); +//doc3.Set(KeyStore.Data, new ImageField); +const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", { + x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v, nativeWidth: 606, nativeHeight: 386 +})); +schemaDocs[0].SetData(KS.Author, "Tyler", TextField); +schemaDocs[4].SetData(KS.Author, "Bob", TextField); +schemaDocs.push(doc2); +const doc7 = Documents.SchemaDocument(schemaDocs) +const docset = [doc1, doc2, doc3, doc7]; +let doc4 = Documents.CollectionDocument(docset, { + x: 0, y: 400, title: "mini collection" +}); +// let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { +// x: 650, y: 500, width: 600, height: 600, title: "cat 2" +// }); +let docset2 = [doc3, doc1, doc2]; +let doc6 = Documents.CollectionDocument(docset2, { + x: 350, y: 100, width: 600, height: 600, title: "docking collection" +}); +let mainNodes = mainContainer.GetOrCreate>(KeyStore.Data, ListField); +// mainNodes.Data.push(doc6); +// mainNodes.Data.push(doc2); +mainNodes.Data.push(doc4); +mainNodes.Data.push(doc3); +// mainNodes.Data.push(doc5); +// mainNodes.Data.push(doc1); +// mainNodes.Data.push(doc2); +mainNodes.Data.push(doc6); //} //); @@ -88,6 +86,6 @@ ReactDOM.render(( ContainingCollectionView={undefined} DocumentView={undefined} /> - {/* */} + ), document.getElementById('root')); \ No newline at end of file diff --git a/src/client/views/TempTreeView.scss b/src/client/views/TempTreeView.scss new file mode 100644 index 000000000..c50b5be2c --- /dev/null +++ b/src/client/views/TempTreeView.scss @@ -0,0 +1,12 @@ +.temptree { + background: #ADD8E6; + width: 300px; + height: 100px; + z-index: 100; + position: fixed; + bottom: 0px; + .list { + padding: 5px; + color: #1e5162; + } +} \ No newline at end of file diff --git a/src/client/views/TempTreeView.tsx b/src/client/views/TempTreeView.tsx new file mode 100644 index 000000000..eeffe6cba --- /dev/null +++ b/src/client/views/TempTreeView.tsx @@ -0,0 +1,47 @@ +import { observable, computed } from "mobx"; +import React = require("react"); +import { observer } from "mobx-react"; +import { Document } from "../../fields/Document"; +import { ListField } from "../../fields/ListField"; +import "./TempTreeView.scss" +import { DocumentManager } from "./DocumentManager"; + +export interface IProps { + mainCollection: Array; +} + +@observer +export class TempTreeView extends React.Component{ + + onClick(doc: Document) { + let view = DocumentManager.Instance.getDocumentView(doc); + if (view != null) { + console.log(view.Id) + console.log(view.props.Document.Title) + if (view.props.ContainingCollectionView != undefined) { + console.log(view.props.ContainingCollectionView.Id) + } + else { + console.log("containing collection is undefined") + } + } + } + + render() { + return ( +
+
+ {this.props.mainCollection.map(doc => { + return ( +
{ this.onClick(doc) }}> + {doc.Title} +
+ ) + } + )} +
+
+ ); + } + +} \ No newline at end of file diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index d7ecc6d9d..3be8afda3 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -16,6 +16,7 @@ import { ImageBox } from "../nodes/ImageBox"; import "./NodeView.scss"; import React = require("react"); import { Transform } from "../../util/Transform"; +import { DocumentManager } from "../DocumentManager"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? export interface DocumentViewProps { @@ -32,6 +33,9 @@ export interface DocumentViewProps { @observer export class DocumentView extends React.Component { + public Id: string = Utils.GenerateGuid(); + public tempTitle: string = "hello there" + protected _mainCont = React.createRef(); get MainContent() { return this._mainCont; @@ -69,6 +73,20 @@ export class DocumentView extends React.Component { return 1; } + //adds doc to global list + componentDidMount: () => void = () => { + DocumentManager.Instance.DocumentViews.push(this); + } + + //removes doc from global list + componentWillUnmount: () => void = () => { + for (let node of DocumentManager.Instance.DocumentViews) { + if (Object.is(node, this)) { + DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1); + } + } + } + render() { let bindings = { ...this.props } as any; -- cgit v1.2.3-70-g09d2 From d669634a8bffab2248cf1732babe3a516bc55e4c Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Wed, 13 Feb 2019 21:21:03 -0500 Subject: translate - need docview of collection? --- src/client/views/DocumentManager.tsx | 32 +++++++++++++++++++++----------- src/client/views/Main.tsx | 2 ++ src/client/views/nodes/DocumentView.tsx | 5 +++-- 3 files changed, 26 insertions(+), 13 deletions(-) (limited to 'src/client/views/Main.tsx') diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx index 2ab643657..904ac0cce 100644 --- a/src/client/views/DocumentManager.tsx +++ b/src/client/views/DocumentManager.tsx @@ -71,10 +71,18 @@ export class DocumentManager { return (toReturn); } - public centerNode(doc: Document): any { - + public centerNode(doc: Document | DocumentView): any { + //console.log(doc.Title) //gets document view that is in freeform collection - let docView: DocumentView | null = this.getDocumentViewFreeform(doc) + + let docView: DocumentView | null; + + if (doc instanceof Document) { + docView = this.getDocumentViewFreeform(doc) + } + else { + docView = doc + } let scale: number; let XView: number; @@ -88,6 +96,7 @@ export class DocumentManager { width = docView.props.Document.GetNumber(KeyStore.NativeWidth, 0) height = docView.props.Document.GetNumber(KeyStore.NativeHeight, 0) + //base case: parent does not exist (aka is parent) if (docView.props.ContainingCollectionView == null) { // scale = RootStore.Instance.MainNodeCollection.Scale; @@ -100,26 +109,27 @@ export class DocumentManager { } //parent is not main, parent is centered and calls itself else { - if (docView.props.ContainingCollectionView.props.ContainingDocumentView != null) { - - let parentWidth = docView.props.ContainingCollectionView.props.ContainingDocumentView.props.Document.GetNumber(KeyStore.NativeWidth, 0) - let parentHeight = docView.props.ContainingCollectionView.props.ContainingDocumentView.props.Document.GetNumber(KeyStore.NativeHeight, 0) + console.log("parent does exist") + if (docView.props.ContainingCollectionView.props.BackgroundView != null) { + console.log("view of parent exists") + let parentWidth = docView.props.ContainingCollectionView.props.BackgroundView.props.Document.GetNumber(KeyStore.NativeWidth, 0) + let parentHeight = docView.props.ContainingCollectionView.props.BackgroundView.props.Document.GetNumber(KeyStore.NativeHeight, 0) - scale = docView.props.ContainingCollectionView.props.ContainingDocumentView.props.GetTransform().Scale + scale = docView.props.ContainingCollectionView.props.BackgroundView.props.GetTransform().Scale XView = (-docView.props.GetTransform().TranslateX * scale) + (parentWidth / 2) - (width * scale / 2); YView = (-docView.props.GetTransform().TranslateY * scale) + (parentHeight / 2) - (height * scale / 2); //node.Parent.setViewportXY(XView, YView); this.setViewportXY(docView.props.ContainingCollectionView, XView, YView) - return this.centerNode(docView.props.ContainingCollectionView.props.ContainingDocumentView.props.Document); + return this.centerNode(docView.props.ContainingCollectionView.props.BackgroundView.props.Document); } } } } private setViewportXY(collection: CollectionViewBase, x: number, y: number) { - if (collection.props.ContainingDocumentView != null) { - collection.props.ContainingDocumentView.props.GetTransform().center(x, y) + if (collection.props.BackgroundView != null) { + collection.props.BackgroundView.props.GetTransform().center(x, y) } } diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 17abceedf..5d23f5439 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -15,6 +15,7 @@ import { DocumentView } from './../views/nodes/DocumentView'; import { CompileScript } from './../util/Scripting'; import { TempTreeView } from './../views/TempTreeView'; import { Transform } from '../util/Transform'; +import { DocumentManager } from './DocumentManager'; configure({ @@ -78,6 +79,7 @@ mainNodes.Data.push(doc6); //} //); + ReactDOM.render((
{ @action Center = (e: React.MouseEvent): void => { - //DocumentManager.Instance.centerNode() - console.log("centering...") + DocumentManager.Instance.centerNode(this.props.Document) + DocumentManager.Instance.centerNode(this) + //console.log(this.props.ContainingCollectionView.props.) } @action -- cgit v1.2.3-70-g09d2 From 281f6268238c4f9f1640899ce258535ad4fe2401 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Mon, 18 Feb 2019 18:01:47 -0500 Subject: tried to get around cors with crossorigin.me --- src/client/views/Main.tsx | 2 +- src/client/views/nodes/WebBox.tsx | 2 +- src/fields/WebField.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'src/client/views/Main.tsx') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 3e5118379..f310be950 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -79,7 +79,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { // mainNodes.Data.push(doc2); mainNodes.Data.push(doc6); - let doc9 = Documents.WebDocument("https://cs.brown.edu/", { + let doc9 = Documents.WebDocument("https://crossorigin.me/https://google.com", { x: 450, y: 100, title: "cat 1", width: 606, height: 386, nativeWidth: 606, nativeHeight: 386 }); mainNodes.Data.push(doc9); diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index f50f8c60e..b9d0853b9 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -62,7 +62,7 @@ export class WebBox extends React.Component { render() { let field = this.props.doc.Get(this.props.fieldKey); let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" : - field instanceof WebField ? field.Data.href : "https://cs.brown.edu/"; + field instanceof WebField ? field.Data.href : "https://crossorigin.me/" + "https://cs.brown.edu"; let nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 1); return ( diff --git a/src/fields/WebField.ts b/src/fields/WebField.ts index 88e6130e0..cd3519128 100644 --- a/src/fields/WebField.ts +++ b/src/fields/WebField.ts @@ -3,7 +3,7 @@ import { Field } from "./Field"; export class WebField extends BasicField { constructor(data: URL | undefined = undefined) { - super(data == undefined ? new URL("https://cs.brown.edu/") : data); + super(data == undefined ? new URL("https://crossorigin.me/" + "https://cs.brown.edu/") : data); } toString(): string { -- cgit v1.2.3-70-g09d2 From 30986620c34c93e12509b2875e90cf5876838403 Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Mon, 18 Feb 2019 18:52:30 -0500 Subject: transforms --- src/client/views/DocumentManager.tsx | 40 +++++++++++++++------- src/client/views/Main.tsx | 8 ++--- src/client/views/TempTreeView.tsx | 5 +-- .../views/collections/CollectionDockingView.tsx | 1 + 4 files changed, 35 insertions(+), 19 deletions(-) (limited to 'src/client/views/Main.tsx') diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx index 904ac0cce..4d8756107 100644 --- a/src/client/views/DocumentManager.tsx +++ b/src/client/views/DocumentManager.tsx @@ -93,11 +93,10 @@ export class DocumentManager { //if the view exists in a freeform collection if (docView != null) { //view.props.GetTransform().TranslateX - width = docView.props.Document.GetNumber(KeyStore.NativeWidth, 0) - height = docView.props.Document.GetNumber(KeyStore.NativeHeight, 0) + width = docView.props.Document.GetNumber(KeyStore.Width, 0) + height = docView.props.Document.GetNumber(KeyStore.Height, 0) - - //base case: parent does not exist (aka is parent) + //base case: parent of parent does not exist if (docView.props.ContainingCollectionView == null) { // scale = RootStore.Instance.MainNodeCollection.Scale; // XView = (-node.X * scale) + (window.innerWidth / 2) - (node.Width * scale / 2); @@ -106,22 +105,37 @@ export class DocumentManager { scale = docView.props.GetTransform().Scale XView = (-docView.props.GetTransform().TranslateX * scale) + (window.innerWidth / 2) - (width * scale / 2) YView = (-docView.props.GetTransform().TranslateY * scale) + (window.innerHeight / 2) - (height * scale / 2) + //set x and y view of parent } //parent is not main, parent is centered and calls itself else { + console.log("------------------------------------------") + console.log(docView.props.ContainingCollectionView.props.DocumentForCollection.Title) + console.log("------------------------------------------") console.log("parent does exist") - if (docView.props.ContainingCollectionView.props.BackgroundView != null) { + if (docView.props.ContainingCollectionView.props.DocumentForCollection != null) { console.log("view of parent exists") - let parentWidth = docView.props.ContainingCollectionView.props.BackgroundView.props.Document.GetNumber(KeyStore.NativeWidth, 0) - let parentHeight = docView.props.ContainingCollectionView.props.BackgroundView.props.Document.GetNumber(KeyStore.NativeHeight, 0) - scale = docView.props.ContainingCollectionView.props.BackgroundView.props.GetTransform().Scale - XView = (-docView.props.GetTransform().TranslateX * scale) + (parentWidth / 2) - (width * scale / 2); - YView = (-docView.props.GetTransform().TranslateY * scale) + (parentHeight / 2) - (height * scale / 2); - //node.Parent.setViewportXY(XView, YView); - this.setViewportXY(docView.props.ContainingCollectionView, XView, YView) + let tempView = this.getDocumentView(docView.props.ContainingCollectionView.props.DocumentForCollection) + + console.log(docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Width, 0)) + + let parentWidth = docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Width, 0) + let parentHeight = docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Height, 0) + + console.log("parent width: " + parentWidth + ", parent height: " + parentHeight) + + + if (tempView != null) { + console.log("View is NOT null") + scale = tempView.props.GetTransform().Scale + XView = (-docView.props.GetTransform().TranslateX * scale) + (parentWidth / 2) - (width * scale / 2); + YView = (-docView.props.GetTransform().TranslateY * scale) + (parentHeight / 2) - (height * scale / 2); + //node.Parent.setViewportXY(XView, YView); + this.setViewportXY(docView.props.ContainingCollectionView, XView, YView) - return this.centerNode(docView.props.ContainingCollectionView.props.BackgroundView.props.Document); + return this.centerNode(docView.props.ContainingCollectionView.props.DocumentForCollection); + } } } } diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 5d23f5439..38e353055 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -64,9 +64,9 @@ let doc4 = Documents.CollectionDocument(docset, { // x: 650, y: 500, width: 600, height: 600, title: "cat 2" // }); let docset2 = [doc3, doc1, doc2]; -let doc6 = Documents.CollectionDocument(docset2, { - x: 350, y: 100, width: 600, height: 600, title: "docking collection" -}); +// let doc6 = Documents.CollectionDocument(docset2, { +// x: 350, y: 100, width: 600, height: 600, title: "docking collection" +// }); let mainNodes = mainContainer.GetOrCreate>(KeyStore.Data, ListField); // mainNodes.Data.push(doc6); // mainNodes.Data.push(doc2); @@ -75,7 +75,7 @@ mainNodes.Data.push(doc3); // mainNodes.Data.push(doc5); // mainNodes.Data.push(doc1); // mainNodes.Data.push(doc2); -mainNodes.Data.push(doc6); +//mainNodes.Data.push(doc6); //} //); diff --git a/src/client/views/TempTreeView.tsx b/src/client/views/TempTreeView.tsx index 5bb44fde2..2d02f3fde 100644 --- a/src/client/views/TempTreeView.tsx +++ b/src/client/views/TempTreeView.tsx @@ -16,8 +16,9 @@ export class TempTreeView extends React.Component{ onClick(doc: Document) { let view = DocumentManager.Instance.getDocumentView(doc); if (view != null) { - console.log(view.Id) - console.log(view.props.GetTransform().TranslateX) + //console.log(view.Id) + //console.log(view.props.GetTransform().TranslateX) + DocumentManager.Instance.centerNode(view); console.log(view.props.Document.Title) if (view.props.ContainingCollectionView != undefined) { diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index c870a9cf0..310933275 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -229,6 +229,7 @@ export class CollectionDockingView extends CollectionViewBase { .off('click') //unbind the current click handler .click(function () { //if (confirm('really close this?')) { + console.log("closing!") stack.remove(); //} }); -- cgit v1.2.3-70-g09d2 From f2bdae28c9fcd5306b0d14e1bbfafc2bb232aed8 Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Tue, 19 Feb 2019 19:01:28 -0500 Subject: got width and height!!! --- src/client/views/DocumentManager.tsx | 57 +++++++--------------- src/client/views/Main.tsx | 4 +- src/client/views/TempTreeView.scss | 2 +- src/client/views/TempTreeView.tsx | 26 ++++------ .../views/collections/CollectionViewBase.tsx | 1 - src/client/views/nodes/DocumentView.tsx | 22 ++++++--- 6 files changed, 45 insertions(+), 67 deletions(-) (limited to 'src/client/views/Main.tsx') diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx index 81231bf13..3aa185dd3 100644 --- a/src/client/views/DocumentManager.tsx +++ b/src/client/views/DocumentManager.tsx @@ -12,7 +12,7 @@ export class DocumentManager { //global holds all of the nodes (regardless of which collection they're in) @observable - public DocumentViews: DocumentView[]; + public DocumentViews: DocumentView[] = []; // singleton instance private static _instance: DocumentManager; @@ -24,7 +24,7 @@ export class DocumentManager { //private constructor so no other class can create a nodemanager private constructor() { - this.DocumentViews = new Array(); + // this.DocumentViews = new Array(); } public getDocumentView(toFind: Document): DocumentView | null { @@ -91,17 +91,12 @@ export class DocumentManager { let height: number; //if the view exists in a freeform collection - if (docView != null) { - //view.props.GetTransform().TranslateX - width = docView.props.Document.GetNumber(KeyStore.Width, 0) - height = docView.props.Document.GetNumber(KeyStore.Height, 0) + if (docView && docView.MainContent.current) { + width = docView.MainContent.current.clientWidth + height = docView.MainContent.current.clientHeight //base case: parent of parent does not exist if (docView.props.ContainingCollectionView == null) { - // scale = RootStore.Instance.MainNodeCollection.Scale; - // XView = (-node.X * scale) + (window.innerWidth / 2) - (node.Width * scale / 2); - // YView = (-node.Y * scale) + (window.innerHeight / 2) - (node.Height * scale / 2); - // RootStore.Instance.MainNodeCollection.SetViewportXY(XView, YView); scale = docView.props.ScreenToLocalTransform().Scale XView = (-docView.props.ScreenToLocalTransform().TranslateX * scale) + (window.innerWidth / 2) - (width * scale / 2) YView = (-docView.props.ScreenToLocalTransform().TranslateY * scale) + (window.innerHeight / 2) - (height * scale / 2) @@ -109,37 +104,17 @@ export class DocumentManager { } //parent is not main, parent is centered and calls itself else { - console.log("------------------------------------------") - console.log(docView.props.ContainingCollectionView.props.DocumentForCollection.Title) - console.log("------------------------------------------") - console.log("parent does exist") - if (docView.props.ContainingCollectionView.props.DocumentForCollection != null) { - console.log("view of parent exists") + if (docView.props.ContainingCollectionView.props.ContainingDocumentView && docView.props.ContainingCollectionView.props.ContainingDocumentView.MainContent.current) { + //view of parent + let tempCollectionView = docView.props.ContainingCollectionView.props.ContainingDocumentView - let tempView = this.getDocumentView(docView.props.ContainingCollectionView.props.DocumentForCollection) + let parentWidth = docView.props.ContainingCollectionView.props.ContainingDocumentView.MainContent.current.clientWidth + let parentHeight = docView.props.ContainingCollectionView.props.ContainingDocumentView.MainContent.current.clientHeight - //console.log(docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.NativeWidth, 0)) - - // let parentWidth = docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Width, 0) - // let parentHeight = docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Height, 0) - - let parentWidth = docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Width, 0) - let parentHeight = docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Height, 0) - //_htmlElement!.clientWidth - - // console.log("window width: " + window.innerWidth + ", window height: " + window.innerHeight) - // console.log("parent width: " + parentWidth + ", parent height: " + parentHeight) - - - if (tempView != null) { - console.log("View is NOT null") - scale = tempView.props.ScreenToLocalTransform().Scale - - parentWidth *= scale - parentHeight *= scale - - console.log("window width: " + window.innerWidth + ", window height: " + window.innerHeight) - console.log("parent width: " + parentWidth + ", parent height: " + parentHeight) + //make sure to test if the parent view is a freeform view + if (tempCollectionView) { + //scale of parent + scale = tempCollectionView.props.ScreenToLocalTransform().Scale XView = (-docView.props.ScreenToLocalTransform().TranslateX * scale) + (parentWidth / 2) - (width * scale / 2); YView = (-docView.props.ScreenToLocalTransform().TranslateY * scale) + (parentHeight / 2) - (height * scale / 2); @@ -153,6 +128,10 @@ export class DocumentManager { } } + parentIsFreeform(node: any): boolean { + return node.props.ContainingCollectionView instanceof CollectionFreeFormView + } + private setViewportXY(collection: CollectionViewBase, x: number, y: number) { if (collection.props.BackgroundView != null) { collection.props.ScreenToLocalTransform().center(x, y) diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 0532cbc1f..5f7590f8d 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -72,11 +72,11 @@ let mainNodes = mainContainer.GetOrCreate>(KeyStore.Data, Li // mainNodes.Data.push(doc6); // mainNodes.Data.push(doc2); mainNodes.Data.push(doc4); -mainNodes.Data.push(doc3); +// mainNodes.Data.push(doc3); // mainNodes.Data.push(doc5); // mainNodes.Data.push(doc1); // mainNodes.Data.push(doc2); -mainNodes.Data.push(doc6); +// mainNodes.Data.push(doc6); //} //); diff --git a/src/client/views/TempTreeView.scss b/src/client/views/TempTreeView.scss index c50b5be2c..fe8cf4da8 100644 --- a/src/client/views/TempTreeView.scss +++ b/src/client/views/TempTreeView.scss @@ -1,7 +1,7 @@ .temptree { background: #ADD8E6; width: 300px; - height: 100px; + height: 200px; z-index: 100; position: fixed; bottom: 0px; diff --git a/src/client/views/TempTreeView.tsx b/src/client/views/TempTreeView.tsx index 2d02f3fde..4b1650ac5 100644 --- a/src/client/views/TempTreeView.tsx +++ b/src/client/views/TempTreeView.tsx @@ -1,4 +1,4 @@ -import { observable, computed } from "mobx"; +import { action, observable, computed } from "mobx"; import React = require("react"); import { observer } from "mobx-react"; import { Document } from "../../fields/Document"; @@ -13,23 +13,16 @@ export interface IProps { @observer export class TempTreeView extends React.Component{ + @action onClick(doc: Document) { + let view = DocumentManager.Instance.getDocumentView(doc); if (view != null) { - //console.log(view.Id) - //console.log(view.props.GetTransform().TranslateX) - DocumentManager.Instance.centerNode(view); - console.log(view.props.Document.Title) - if (view.props.ContainingCollectionView != undefined) { - //console.log(view.props.ContainingCollectionView.Id) - // view.props.ContainingCollectionView - } - else { - console.log("containing collection is undefined") + if (DocumentManager.Instance.parentIsFreeform(view)) { + view.switchColor() } - - view.switchColor(); + DocumentManager.Instance.centerNode(view); } } @@ -37,10 +30,10 @@ export class TempTreeView extends React.Component{ return (
- {this.props.mainCollection.map(doc => { + {DocumentManager.Instance.DocumentViews.map(doc => { return ( -
{ this.onClick(doc) }}> - {doc.Title} +
{ this.onClick(doc.props.Document) }}> + {doc.props.Document.Title}
) } @@ -49,5 +42,4 @@ export class TempTreeView extends React.Component{
); } - } \ No newline at end of file diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 4cbafe950..35ba227e9 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -12,7 +12,6 @@ import { CollectionDockingView } from "./CollectionDockingView"; import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; import { Transform } from "../../util/Transform"; - export interface CollectionViewProps { CollectionFieldKey: Key; DocumentForCollection: Document; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 9bd8c0288..8e2f1afe7 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,4 +1,4 @@ -import { action, computed } from "mobx"; +import { action, computed, runInAction } from "mobx"; import { observer } from "mobx-react"; import { observable } from "mobx"; import { Document } from "../../../fields/Document"; @@ -179,11 +179,11 @@ export class DocumentView extends React.Component { ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) } + //TODO Monika @action Center = (e: React.MouseEvent): void => { DocumentManager.Instance.centerNode(this.props.Document) DocumentManager.Instance.centerNode(this) - //console.log(this.props.ContainingCollectionView.props.) } @action @@ -230,17 +230,23 @@ export class DocumentView extends React.Component { } //adds doc to global list + @action componentDidMount: () => void = () => { - DocumentManager.Instance.DocumentViews.push(this); + runInAction(() => { + DocumentManager.Instance.DocumentViews.push(this); + }) } //removes doc from global list + @action componentWillUnmount: () => void = () => { - for (let node of DocumentManager.Instance.DocumentViews) { - if (Object.is(node, this)) { - DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1); + runInAction(() => { + for (let node of DocumentManager.Instance.DocumentViews) { + if (Object.is(node, this)) { + DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1); + } } - } + }) } isSelected = () => { return SelectionManager.IsSelected(this); @@ -278,6 +284,8 @@ export class DocumentView extends React.Component { bindings.BackgroundView = backgroundView; } + bindings.DocumentView = this; + var width = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); var strwidth = width > 0 ? width.toString() + "px" : "100%"; var height = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); -- cgit v1.2.3-70-g09d2 From d4843297c3304aebb5625788c748eafb27b45083 Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Mon, 25 Feb 2019 20:14:33 -0500 Subject: scale still not working --- package-lock.json | 2 +- src/client/views/DocumentManager.tsx | 24 +++++++++++++++++------- src/client/views/Main.tsx | 1 + src/client/views/TempTreeView.scss | 1 + src/client/views/TempTreeView.tsx | 5 +---- 5 files changed, 21 insertions(+), 12 deletions(-) (limited to 'src/client/views/Main.tsx') diff --git a/package-lock.json b/package-lock.json index 4f6be9f69..5a0676e80 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13343,4 +13343,4 @@ "dev": true } } -} \ No newline at end of file +} diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx index 35064d830..2bf942383 100644 --- a/src/client/views/DocumentManager.tsx +++ b/src/client/views/DocumentManager.tsx @@ -77,6 +77,8 @@ export class DocumentManager { //console.log(doc.Title) //gets document view that is in freeform collection + console.log("centering...") + let docView: DocumentView | null; if (doc instanceof Document) { @@ -99,9 +101,13 @@ export class DocumentManager { scale = docView.props.ScreenToLocalTransform().Scale let doc = docView.props.Document; - - XView = (-doc.GetNumber(KeyStore.X, 0) * scale) + (window.innerWidth / 2) - (width * scale / 2) - YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) + (window.innerHeight / 2) - (height * scale / 2) + console.log("hello") + XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2) + YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2) + console.log("width: " + width) + console.log("height: " + height) + // XView = (-doc.GetNumber(KeyStore.X, 0) * scale) + (window.innerWidth / 2) - (width * scale / 2) + // YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) + (window.innerHeight / 2) - (height * scale / 2) //set x and y view of parent if (docView instanceof CollectionView) { DocumentManager.Instance.setViewportXY(docView, XView, YView) @@ -111,16 +117,20 @@ export class DocumentManager { else { if (true) { //view of parent - let { width: parentWidth, height: parentHeight } = docView.props.ContainingCollectionView.props.documentSize(); + //let { width: parentWidth, height: parentHeight } = docView.props.ContainingCollectionView.props.documentSize(); let scale = docView.props.ContainingCollectionView.props.ScreenToLocalTransform().Scale; let doc = docView.props.Document //TODO: make sure to test if the parent view is a freeform view. if not, just skip to the next level if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { //scale of parent - - XView = (-doc.GetNumber(KeyStore.X, 0) * scale) + (parentWidth / 2) - (width * scale / 2); - YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) + (parentHeight / 2) - (height * scale / 2); + console.log("scale: " + scale) + XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2); + YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2); + console.log("width: " + width) + console.log("height: " + height) + // XView = (-doc.GetNumber(KeyStore.X, 0) * scale) + (parentWidth / 2) - (width * scale / 2); + // YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) + (parentHeight / 2) - (height * scale / 2); // //node.Parent.setViewportXY(XView, YView); DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index b8896d50a..64bcbc24f 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -133,6 +133,7 @@ Documents.initProtos(() => { isTopMost={true} ContainingCollectionView={undefined} /> +
diff --git a/src/client/views/TempTreeView.scss b/src/client/views/TempTreeView.scss index fe8cf4da8..0a6342ca6 100644 --- a/src/client/views/TempTreeView.scss +++ b/src/client/views/TempTreeView.scss @@ -5,6 +5,7 @@ z-index: 100; position: fixed; bottom: 0px; + right: 0px; .list { padding: 5px; color: #1e5162; diff --git a/src/client/views/TempTreeView.tsx b/src/client/views/TempTreeView.tsx index 4b1650ac5..17e05068a 100644 --- a/src/client/views/TempTreeView.tsx +++ b/src/client/views/TempTreeView.tsx @@ -6,12 +6,9 @@ import { ListField } from "../../fields/ListField"; import "./TempTreeView.scss" import { DocumentManager } from "./DocumentManager"; -export interface IProps { - mainCollection: Array; -} @observer -export class TempTreeView extends React.Component{ +export class TempTreeView extends React.Component { @action onClick(doc: Document) { -- cgit v1.2.3-70-g09d2 From bd54526065428de2e931d7254776352199f6e55a Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 26 Feb 2019 16:56:04 -0500 Subject: fixed shift-dragging!! --- src/client/util/DragManager.ts | 8 ++-- src/client/views/Main.tsx | 33 +++-------------- .../views/collections/CollectionDockingView.tsx | 43 ++++------------------ .../views/collections/CollectionSchemaView.tsx | 4 +- .../views/collections/CollectionTreeView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 2 +- 6 files changed, 21 insertions(+), 71 deletions(-) (limited to 'src/client/views/Main.tsx') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 8adadee0f..0d76d2640 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -3,14 +3,14 @@ import { CollectionDockingView } from "../views/collections/CollectionDockingVie import { Document } from "../../fields/Document" import { action } from "mobx"; -export function setupDrag(_reference: React.RefObject, _dragDocument: Document) { +export function setupDrag(_reference: React.RefObject, docFunc: () => Document) { let onRowMove = action((e: PointerEvent): void => { e.stopPropagation(); e.preventDefault(); document.removeEventListener("pointermove", onRowMove); document.removeEventListener('pointerup', onRowUp); - DragManager.StartDrag(_reference.current!, { document: _dragDocument }); + DragManager.StartDrag(_reference.current!, { document: docFunc() }); }); let onRowUp = action((e: PointerEvent): void => { document.removeEventListener("pointermove", onRowMove); @@ -20,10 +20,10 @@ export function setupDrag(_reference: React.RefObject, _dragDocu // if (this.props.isSelected() || this.props.isTopMost) { if (e.button == 0) { e.stopPropagation(); - e.preventDefault(); if (e.shiftKey) { - CollectionDockingView.Instance.StartOtherDrag(_reference.current!, _dragDocument); + CollectionDockingView.Instance.StartOtherDrag(docFunc(), e); } else { + e.preventDefault(); document.addEventListener("pointermove", onRowMove); document.addEventListener('pointerup', onRowUp); } diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 17dda899d..7ef4b6132 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -15,9 +15,8 @@ import { ServerUtils } from '../../server/ServerUtil'; import { MessageStore, DocumentTransfer } from '../../server/Message'; import { Transform } from '../util/Transform'; import { CollectionDockingView } from './collections/CollectionDockingView'; -import { FieldWaiting } from '../../fields/Field'; import { UndoManager } from '../util/UndoManager'; -import { DragManager } from '../util/DragManager'; +import { setupDrag } from '../util/DragManager'; configure({ @@ -30,7 +29,6 @@ window.addEventListener("dragover", function (e) { e.preventDefault(); }, false) document.addEventListener("pointerdown", action(function (e: PointerEvent) { - console.log(ContextMenu); if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) { ContextMenu.Instance.clearItems() } @@ -98,28 +96,7 @@ Documents.initProtos(() => { let textRef = React.createRef(); let schemaRef = React.createRef(); let colRef = React.createRef(); - let curMoveListener: any = null - let onRowMove = (creator: any, dragRef: any) => action((e: PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); - document.removeEventListener("pointermove", curMoveListener); - document.removeEventListener('pointerup', onRowUp); - DragManager.StartDrag(dragRef.current!, { document: creator() }); - }); - let onRowUp = action((e: PointerEvent): void => { - document.removeEventListener("pointermove", curMoveListener); - document.removeEventListener('pointerup', onRowUp); - }); - let onRowDown = (creator: any, dragRef: any) => (e: React.PointerEvent) => { - if (e.shiftKey) { - CollectionDockingView.Instance.StartOtherDrag(dragRef.current!, creator()); - e.stopPropagation(); - } else { - document.addEventListener("pointermove", curMoveListener = onRowMove(creator, dragRef)); - document.addEventListener('pointerup', onRowUp); - } - } ReactDOM.render((
{
-
+
-
+
-
+
-
+
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 5fb632469..3d7e46a01 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -10,7 +10,6 @@ import { FieldId, Opt, Field } from "../../../fields/Field"; import { KeyStore } from "../../../fields/KeyStore"; import { Utils } from "../../../Utils"; import { Server } from "../../Server"; -import { DragManager } from "../../util/DragManager"; import { undoBatch } from "../../util/UndoManager"; import { DocumentView } from "../nodes/DocumentView"; import "./CollectionDockingView.scss"; @@ -34,10 +33,6 @@ export class CollectionDockingView extends React.Component(); private _fullScreen: any = null; @@ -47,28 +42,8 @@ export class CollectionDockingView extends React.Component { }, button: e.button }) } @action @@ -98,7 +73,7 @@ export class CollectionDockingView extends React.Component { - if (this._dragDiv) { - this._dragDiv.removeChild(this._dragElement); - this._dragParent!.removeChild(this._dragFakeElement!); - this._dragParent!.appendChild(this._dragElement!); - DragManager.Root().removeChild(this._dragDiv); - this._dragDiv = null; - } tab.closeElement.off('click') //unbind the current click handler .click(function () { tab.contentItem.remove(); diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 106a5c4f5..03110a9c7 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -45,9 +45,9 @@ export class CollectionSchemaView extends CollectionViewBase { ) let reference = React.createRef(); - let onItemDown = setupDrag(reference, props.doc); + let onItemDown = setupDrag(reference, () => props.doc); return ( -
+
{ let field = props.doc.Get(props.fieldKey); diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 64f4c0970..55c804337 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -33,7 +33,7 @@ class TreeView extends React.Component { var children = childDocument.GetT>(KeyStore.Data, ListField); let title = childDocument.GetT(KeyStore.Title, TextField); - let onItemDown = setupDrag(reference, childDocument); + let onItemDown = setupDrag(reference, () => childDocument); if (title && title != FieldWaiting) { let subView = !children || this.collapsed || children === FieldWaiting ? (null) : diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index c579b7142..feecde921 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -96,7 +96,7 @@ export class DocumentView extends React.Component { this._downX = e.clientX; this._downY = e.clientY; if (e.shiftKey && e.buttons === 1) { - CollectionDockingView.Instance.StartOtherDrag(this._mainCont.current!, this.props.Document); + CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e); e.stopPropagation(); } else { this._contextMenuCanOpen = true; -- cgit v1.2.3-70-g09d2 From 98ade639c6ffa6cc704cc310af506973d83e494b Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Tue, 26 Feb 2019 20:44:32 -0500 Subject: what is going ON --- src/client/views/DocumentManager.tsx | 267 ++++++++++++++------- src/client/views/Main.tsx | 4 +- src/client/views/TempTreeView.tsx | 5 +- .../views/collections/CollectionDockingView.tsx | 4 +- .../views/collections/CollectionFreeFormView.tsx | 10 +- .../views/collections/CollectionSchemaView.tsx | 4 +- src/client/views/collections/CollectionView.tsx | 2 +- .../views/collections/CollectionViewBase.tsx | 1 + src/client/views/nodes/DocumentView.tsx | 6 +- 9 files changed, 210 insertions(+), 93 deletions(-) (limited to 'src/client/views/Main.tsx') diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx index bd3c4abfd..750b7aecf 100644 --- a/src/client/views/DocumentManager.tsx +++ b/src/client/views/DocumentManager.tsx @@ -53,7 +53,27 @@ export class DocumentManager { return (toReturn); } - public getDocumentViewFreeform(toFind: Document): DocumentView | null { + // public getDocumentViewFreeform2(toFind: Document): DocumentView | null { + + // let toReturn: DocumentView | null; + // toReturn = null; + + // //gets document view that is in a freeform canvas collection + // DocumentManager.Instance.DocumentViews.map(view => { + // let doc = view.props.Document; + // if (view.props.ContainingCollectionView && view.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { + // if (Object.is(doc, toFind)) { + // console.log("finding view") + // toReturn = view; + // return; + // } + // } + // }) + + // return (toReturn); + // } + + public getCollectionView(toFind: Document): DocumentView | null { let toReturn: DocumentView | null; toReturn = null; @@ -61,7 +81,8 @@ export class DocumentManager { //gets document view that is in a freeform canvas collection DocumentManager.Instance.DocumentViews.map(view => { let doc = view.props.Document; - if (view.props.ContainingCollectionView && view.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { + if (view instanceof CollectionView) { + console.log("finding view") if (Object.is(doc, toFind)) { toReturn = view; return; @@ -72,113 +93,189 @@ export class DocumentManager { return (toReturn); } - @action - public centerNode2(doc: Document | DocumentView): any { - //console.log(doc.Title) - //gets document view that is in freeform collection - - let docView: DocumentView | null; - - if (doc instanceof Document) { - docView = DocumentManager.Instance.getDocumentViewFreeform(doc) - } - else { - docView = doc - } - - let scale: number; - let XView: number; - let YView: number; - - //if the view exists in a freeform collection - if (docView) { - let { width, height } = docView.size(); - - //base case: parent of parent does not exist - if (!docView.props.ContainingCollectionView) { - scale = docView.props.ScreenToLocalTransform().Scale - let doc = docView.props.Document; - console.log("hello") - XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2) - YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2) - //set x and y view of parent - if (docView instanceof CollectionView) { - console.log("here") - DocumentManager.Instance.setViewportXY(docView, XView, YView) - } - } - //parent is not main, parent is centered and calls itself - else { - if (true) { - //view of parent - let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1) - let doc = docView.props.Document - - //TODO: make sure to test if the parent view is a freeform view. if not, just skip to the next level - if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { - //scale of parent - console.log("scale: " + scale) - XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2); - YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2); - // //node.Parent.setViewportXY(XView, YView); - DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) - return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) - } - else { return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) } - } - else { - // return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) - } - } - } - } + // @action + // public centerNode2(doc: Document | DocumentView): any { + // //console.log(doc.Title) + // //gets document view that is in freeform collection + + // let docView: DocumentView | null; + + // if (doc instanceof Document) { + // docView = DocumentManager.Instance.getDocumentViewFreeform(doc) + // } + // else { + // docView = doc + // } + + // let scale: number; + // let XView: number; + // let YView: number; + + // //if the view exists in a freeform collection + // if (docView) { + // let { width, height } = docView.size(); + + // //base case: parent of parent does not exist + // if (!docView.props.ContainingCollectionView) { + // scale = docView.props.ScreenToLocalTransform().Scale + // let doc = docView.props.Document; + // console.log("hello") + // XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2) + // YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2) + // //set x and y view of parent + // if (docView instanceof CollectionView) { + // console.log("here") + // DocumentManager.Instance.setViewportXY(docView, XView, YView) + // } + // } + // //parent is not main, parent is centered and calls itself + // else { + // if (true) { + // //view of parent + // let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1) + // let doc = docView.props.Document + + // //TODO: make sure to test if the parent view is a freeform view. if not, just skip to the next level + // if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { + // //scale of parent + // console.log("scale: " + scale) + // XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2); + // YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2); + // // //node.Parent.setViewportXY(XView, YView); + // DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) + // return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) + // } + // else { return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) } + // } + // else { + // // return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) + // } + // } + // } + // } + + // @action + // public centerNode4(doc: Document | DocumentView): any { + // //console.log(doc.Title) + // //gets document view that is in freeform collection + + // console.log("things are happening") + + // let docView: DocumentView | null; + + // if (doc instanceof Document) { + // console.log(doc.Title) + // docView = DocumentManager.Instance.getDocumentViewFreeform(doc) + // } + // else { + // docView = doc + // console.log(docView.props.Document.Title) + // } + + // let scale: number; + // let XView: number; + // let YView: number; + + // //if the view exists in a freeform collection + // if (docView) { + // let { width, height } = docView.size(); + + // if (docView.props.ContainingCollectionView) { + // //view of parent + // let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1) + // let doc = docView.props.Document + + // if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { + // //scale of parent + // XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2); + // YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2); + // DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) + // return DocumentManager.Instance.centerNode4(docView.props.ContainingCollectionView.props.Document) + // } + // else { return DocumentManager.Instance.centerNode4(docView.props.ContainingCollectionView.props.Document) } + // } + // } + // } @action - public centerNode(doc: Document | DocumentView): any { + public centerNode(doc: Document | DocumentView, x: number, y: number): any { //console.log(doc.Title) - //gets document view that is in freeform collection - + //gets document view that is in freeform collection let docView: DocumentView | null; if (doc instanceof Document) { - docView = DocumentManager.Instance.getDocumentViewFreeform(doc) + console.log(doc.Title) + docView = DocumentManager.Instance.getDocumentView(doc) } else { docView = doc + console.log(docView.props.Document.Title) } let scale: number; let XView: number; let YView: number; - //if the view exists in a freeform collection if (docView) { let { width, height } = docView.size(); + let scale = docView.props.Document.GetNumber(KeyStore.Scale, 1) + let doc = docView.props.Document - //parent is not main, parent is centered and calls itself - if (docView.props.ContainingCollectionView) { - //view of parent - let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1) - let doc = docView.props.Document - - if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { - //scale of parent - XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2); - YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2); - DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) - return DocumentManager.Instance.centerNode(docView.props.ContainingCollectionView.props.Document) - } - else { return DocumentManager.Instance.centerNode(docView.props.ContainingCollectionView.props.Document) } + if (x && y) { + XView = (-x * scale) - (width * scale / 2); + YView = (-y * scale) - (height * scale / 2); + DocumentManager.Instance.setViewportXY(docView, XView, YView) } + } } + // @action + // public centerNode3(doc: Document | DocumentView): any { + // //console.log(doc.Title) + // //gets document view that is in freeform collection + + // let docView: DocumentView | null; + + // if (doc instanceof Document) { + // docView = DocumentManager.Instance.getDocumentViewFreeform(doc) + // } + // else { + // docView = doc + // } + + // let scale: number; + // let XView: number; + // let YView: number; + + // //if the view exists in a freeform collection + // if (docView) { + // let { width, height } = docView.size(); + + // //parent is not main, parent is centered and calls itself + // if (docView.props.ContainingCollectionView) { + // //view of parent + // let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1) + // let doc = docView.props.Document + + // if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { + // //scale of parent + // XView = doc.GetNumber(KeyStore.X, 0) - width / 2 + // YView = doc.GetNumber(KeyStore.Y, 0) - height / 2 + // // console.log("X location: " + XView) + // // console.log("Y location: " + YView) + // DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) + // return DocumentManager.Instance.centerNode3(docView.props.ContainingCollectionView.props.Document) + // } + // else { return DocumentManager.Instance.centerNode3(docView.props.ContainingCollectionView.props.Document) } + // } + // } + // } + @action - private setViewportXY(collection: CollectionView, x: number, y: number) { - if (collection.collectionViewType !== CollectionViewType.Freeform) { - return - } + private setViewportXY(collection: DocumentView, x: number, y: number) { + console.log("setting") let doc = collection.props.Document; doc.SetNumber(KeyStore.PanX, x); doc.SetNumber(KeyStore.PanY, y); diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 64bcbc24f..da78dcfba 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -131,7 +131,9 @@ Documents.initProtos(() => { PanelWidth={() => 0} PanelHeight={() => 0} isTopMost={true} - ContainingCollectionView={undefined} /> + ContainingCollectionView={undefined} + focus={(doc, x, y) => { }} + /> diff --git a/src/client/views/TempTreeView.tsx b/src/client/views/TempTreeView.tsx index f852224e9..bd73ef887 100644 --- a/src/client/views/TempTreeView.tsx +++ b/src/client/views/TempTreeView.tsx @@ -5,6 +5,7 @@ import { Document } from "../../fields/Document"; import { ListField } from "../../fields/ListField"; import "./TempTreeView.scss" import { DocumentManager } from "./DocumentManager"; +import { KeyStore } from "../../fields/KeyStore"; @observer @@ -15,7 +16,9 @@ export class TempTreeView extends React.Component { let view = DocumentManager.Instance.getDocumentView(doc); if (view != null) { - DocumentManager.Instance.centerNode(view); + // DocumentManager.Instance.centerNode(view); + doc = view.props.Document + view.props.focus(doc, doc.GetNumber(KeyStore.X, 0), doc.GetNumber(KeyStore.Y, 0)) } } diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 5393ac06e..9c1f1a56d 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -298,7 +298,9 @@ export class DockedFrameRenderer extends React.Component { PanelHeight={this._nativeHeight} ScreenToLocalTransform={this.ScreenToLocalTransform} isTopMost={true} - ContainingCollectionView={undefined} /> + ContainingCollectionView={undefined} + focus={(doc: Document, x: number, y: number) => { }} + />
return { this._panelWidth = r.entry.width; this._panelHeight = r.entry.height; })}> diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index ac14811a5..fe2fc42ad 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -21,6 +21,7 @@ import "./CollectionFreeFormView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import React = require("react"); +import { DocumentManager } from "../DocumentManager"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? @observer @@ -191,7 +192,14 @@ export class CollectionFreeFormView extends CollectionViewBase { ContentScaling={this.noScaling} PanelWidth={doc.Width} PanelHeight={doc.Height} - ContainingCollectionView={this.props.CollectionView} />); + ContainingCollectionView={this.props.CollectionView} + focus={(doc: Document, x: number, y: number) => { + //set pan of colleciton freeform and then call parent + console.log("calling...") + DocumentManager.Instance.centerNode(doc, doc.GetNumber(KeyStore.X, 0), doc.GetNumber(KeyStore.Y, 0)) + this.props.focus(this.props.Document, doc.GetNumber(KeyStore.X, 0), doc.GetNumber(KeyStore.Y, 0)) + }} + />); }) } return null; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 38217d7c4..4eaf585ce 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -211,7 +211,9 @@ export class CollectionSchemaView extends CollectionViewBase { ContentScaling={this.getContentScaling} PanelWidth={this.getPanelWidth} PanelHeight={this.getPanelHeight} - ContainingCollectionView={this.props.CollectionView} /> + ContainingCollectionView={this.props.CollectionView} + focus={(doc, x, y) => this.props.focus(this.props.Document, x, y)} + />
} diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 03e1f1fa4..e6a8d2448 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -30,7 +30,7 @@ export class CollectionView extends React.Component { public static LayoutString(fieldKey: string = "DataKey") { return ``; + isTopMost={isTopMost} BackgroundView={BackgroundView} focus={focus}/>`; } public active = () => { var isSelected = this.props.isSelected(); diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index e38258e0b..d9e43c0dc 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -23,6 +23,7 @@ export interface CollectionViewProps { bindings: any; panelWidth: () => number; panelHeight: () => number; + focus: (doc: Document, x: number, y: number) => void; } export interface SubCollectionViewProps extends CollectionViewProps { active: () => boolean; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 21f64ef35..90699cd2e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -36,6 +36,7 @@ export interface DocumentViewProps { ContentScaling: () => number; PanelWidth: () => number; PanelHeight: () => number; + focus: (doc: Document, x: number, y: number) => void; } export interface JsxArgs extends DocumentViewProps { Keys: { [name: string]: Key } @@ -184,7 +185,7 @@ export class DocumentView extends React.Component { //TODO Monika @action Center = (e: React.MouseEvent): void => { - DocumentManager.Instance.centerNode(this) + this.props.focus(this.props.Document, this.props.Document.GetNumber(KeyStore.X, 0), this.props.Document.GetNumber(KeyStore.Y, 0)) } @action @@ -265,7 +266,8 @@ export class DocumentView extends React.Component { ...this.props, isSelected: this.isSelected, select: this.select, - documentSize: this.size + documentSize: this.size, + focus: this.props.focus }; for (const key of this.layoutKeys) { this._documentBindings[key.Name + "Key"] = key; // this maps string values of the form Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data -- cgit v1.2.3-70-g09d2 From 14d6495e4d4b9d38a37187a50ebeb84057abbc20 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 26 Feb 2019 23:59:38 -0500 Subject: from last --- src/client/views/Main.tsx | 2 +- src/client/views/nodes/FieldView.tsx | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) (limited to 'src/client/views/Main.tsx') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index af4db521c..578aecd1e 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -85,7 +85,7 @@ Documents.initProtos(() => { width: 200, height: 200, title: "an image of a cat" })); let addWebNode = action(() => Documents.WebDocument("https://cs.brown.edu/courses/cs166/", { - width: 200, height: 200, title: "an image of a cat" + width: 200, height: 200, title: "a sample web page" })); let addClick = (creator: any) => action(() => { diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index f34574234..a883fa672 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -12,6 +12,7 @@ import { Key } from "../../../fields/Key"; import { FormattedTextBox } from "./FormattedTextBox"; import { ImageBox } from "./ImageBox"; import { WebBox } from "./WebBox"; +import { HtmlField } from "../../../fields/HtmlField"; // // these properties get assigned through the render() method of the DocumentView when it creates this node. @@ -53,6 +54,10 @@ export class FieldView extends React.Component { else if (field instanceof WebField) { return } + // 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}

} -- cgit v1.2.3-70-g09d2 From 7d7d9349a9c2c7136eccf8d08af506d00f2bd2fd Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 27 Feb 2019 00:24:46 -0500 Subject: cleaned up main a tiny bit --- src/client/documents/Documents.ts | 6 +- src/client/views/Main.tsx | 156 ++++++++++++++++---------------------- 2 files changed, 70 insertions(+), 92 deletions(-) (limited to 'src/client/views/Main.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 8b733507b..ba13cc31b 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -40,13 +40,13 @@ export namespace Documents { const webProtoId = "webProto"; const collProtoId = "collectionProto"; - export function initProtos(callback: () => void) { - Server.GetFields([collProtoId, textProtoId, imageProtoId], (fields) => { + export function initProtos(mainDocId: string, callback: (mainDoc?: Document) => void) { + Server.GetFields([collProtoId, textProtoId, imageProtoId, mainDocId], (fields) => { collProto = fields[collProtoId] as Document; imageProto = fields[imageProtoId] as Document; textProto = fields[textProtoId] as Document; webProto = fields[webProtoId] as Document; - callback() + callback(fields[mainDocId] as Document) }); } function assignOptions(doc: Document, options: DocumentOptions): Document { diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 578aecd1e..305627c19 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -53,98 +53,76 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { // const doc7 = Documents.SchemaDocument(schemaDocs) const mainDocId = "mainDoc"; -Documents.initProtos(() => { - Utils.EmitCallback(Server.Socket, MessageStore.GetField, mainDocId, (res: any) => { - console.log("HELLO WORLD") - console.log("RESPONSE: " + res) - let mainContainer: Document; - let mainfreeform: Document; - if (res) { - mainContainer = ServerUtils.FromJson(res) as Document; - mainContainer.GetAsync(KeyStore.ActiveFrame, field => mainfreeform = field as Document); - } - else { - mainContainer = Documents.DockDocument(JSON.stringify({ content: [{ type: 'row', content: [] }] }), { title: "main container" }, mainDocId); - Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainContainer.ToJson())) +Documents.initProtos(mainDocId, (res?: Document) => { + console.log("HELLO WORLD") + console.log("RESPONSE: " + res) + let mainContainer: Document; + let mainfreeform: Document; + if (res) { + mainContainer = res as Document; + mainContainer.GetAsync(KeyStore.ActiveFrame, field => mainfreeform = field as Document); + } + else { + mainContainer = Documents.DockDocument(JSON.stringify({ content: [{ type: 'row', content: [] }] }), { title: "main container" }, mainDocId); + Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainContainer.ToJson())) - setTimeout(() => { - mainfreeform = Documents.FreeformDocument([], { x: 0, y: 400, title: "mini collection" }); - Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainfreeform.ToJson())); + // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) + setTimeout(() => { + mainfreeform = Documents.FreeformDocument([], { x: 0, y: 400, title: "mini collection" }); + Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainfreeform.ToJson())); - var docs = [mainfreeform].map(doc => CollectionDockingView.makeDocumentConfig(doc)); - mainContainer.SetText(KeyStore.Data, JSON.stringify({ content: [{ type: 'row', content: docs }] })); - mainContainer.Set(KeyStore.ActiveFrame, mainfreeform); - }, 0); - } + var docs = [mainfreeform].map(doc => CollectionDockingView.makeDocumentConfig(doc)); + mainContainer.SetText(KeyStore.Data, JSON.stringify({ content: [{ type: 'row', content: docs }] })); + mainContainer.Set(KeyStore.ActiveFrame, mainfreeform); + }, 0); + } - let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {})) - let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" })) - let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a feeform collection" })); - let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" })); - let addImageNode = action(() => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { - width: 200, height: 200, title: "an image of a cat" - })); - let addWebNode = action(() => Documents.WebDocument("https://cs.brown.edu/courses/cs166/", { - width: 200, height: 200, title: "a sample web page" - })); + let imgurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"; + let weburl = "https://cs.brown.edu/courses/cs166/"; + let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {})) + let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" })) + let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a feeform collection" })); + let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { 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 addClick = (creator: any) => action(() => { - var img = creator(); - img.SetNumber(KeyStore.X, 0); - img.SetNumber(KeyStore.Y, 0); - mainfreeform.GetList(KeyStore.Data, []).push(img); - }); + let addClick = (creator: any) => action(() => { + var img = creator(); + img.SetNumber(KeyStore.X, 0); + img.SetNumber(KeyStore.Y, 0); + mainfreeform.GetList(KeyStore.Data, []).push(img); + }); - let imgRef = React.createRef(); - let webRef = React.createRef(); - let textRef = React.createRef(); - let schemaRef = React.createRef(); - let colRef = React.createRef(); + let imgRef = React.createRef(); + let webRef = React.createRef(); + let textRef = React.createRef(); + let schemaRef = React.createRef(); + let colRef = React.createRef(); - ReactDOM.render(( -
- Transform.Identity} - ContentScaling={() => 1} - PanelWidth={() => 0} - PanelHeight={() => 0} - isTopMost={true} - ContainingCollectionView={undefined} /> - - -
-
-
-
-
-
-
-
-
-
- - - -
), - document.getElementById('root')); - }) -}); -// let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { -// x: 650, y: 500, width: 600, height: 600, title: "cat 2" -// }); -// let docset2 = new Array(doc4);//, doc1, doc3); -// let doc6 = Documents.CollectionDocument(docset2, { -// x: 350, y: 100, width: 600, height: 600, title: "docking collection" -// }); -// let mainNodes = mainContainer.GetOrCreate(KeyStore.Data, ListField); -// mainNodes.Data.push(doc6); -// mainNodes.Data.push(doc2); -// mainNodes.Data.push(doc4); -// mainNodes.Data.push(doc3); -// mainNodes.Data.push(doc5); -// mainNodes.Data.push(doc1); -//mainNodes.Data.push(doc2); -//mainNodes.Data.push(doc6); -// mainContainer.Set(KeyStore.Data, mainNodes); -//} -//); + ReactDOM.render(( +
+ Transform.Identity} + ContentScaling={() => 1} + PanelWidth={() => 0} + PanelHeight={() => 0} + isTopMost={true} + ContainingCollectionView={undefined} /> + + +
+
+
+
+
+
+
+
+
+
+ + + +
), + document.getElementById('root')); +}) -- cgit v1.2.3-70-g09d2 From ae1337e39bc2811e32bd5321bce708eda08fe62a Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 27 Feb 2019 01:07:03 -0500 Subject: moved stuff into scss. --- src/client/views/Main.scss | 11 ++++++ src/client/views/Main.tsx | 90 ++++++++++++++++------------------------------ 2 files changed, 42 insertions(+), 59 deletions(-) (limited to 'src/client/views/Main.tsx') diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index 6540af5b2..4334ed299 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -38,3 +38,14 @@ p { border-radius: 2px; background-color: rgba(0,0,0,.5); } + +.main-buttonDiv { + position: absolute; + width: 150px; + left: 0px; +} +.main-undoButtons { + position: absolute; + width: 150px; + right: 0px; +} diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 305627c19..7120a8836 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -1,33 +1,26 @@ -import { action, configure, reaction, computed } from 'mobx'; +import { action, configure } from 'mobx'; import "normalize.css"; import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { DocumentDecorations } from './DocumentDecorations'; -import { Documents } from '../documents/Documents'; import { Document } from '../../fields/Document'; import { KeyStore } from '../../fields/KeyStore'; -import "./Main.scss"; -import { ContextMenu } from './ContextMenu'; -import { DocumentView } from './nodes/DocumentView'; -import { Server } from '../Server'; +import { DocumentTransfer, MessageStore } from '../../server/Message'; import { Utils } from '../../Utils'; -import { ServerUtils } from '../../server/ServerUtil'; -import { MessageStore, DocumentTransfer } from '../../server/Message'; +import { Documents } from '../documents/Documents'; +import { Server } from '../Server'; +import { setupDrag } from '../util/DragManager'; import { Transform } from '../util/Transform'; -import { CollectionDockingView } from './collections/CollectionDockingView'; import { UndoManager } from '../util/UndoManager'; -import { setupDrag } from '../util/DragManager'; +import { CollectionDockingView } from './collections/CollectionDockingView'; +import { ContextMenu } from './ContextMenu'; +import { DocumentDecorations } from './DocumentDecorations'; +import { DocumentView } from './nodes/DocumentView'; +import "./Main.scss"; -configure({ - enforceActions: "observed" -}); -window.addEventListener("drop", function (e) { - e.preventDefault(); -}, false) -window.addEventListener("dragover", function (e) { - e.preventDefault(); -}, false) +configure({ enforceActions: "observed" }); // causes errors to be generated when modifying an observable outside of an action +window.addEventListener("drop", (e) => e.preventDefault(), false) +window.addEventListener("dragover", (e) => e.preventDefault(), false) document.addEventListener("pointerdown", action(function (e: PointerEvent) { if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) { ContextMenu.Instance.clearItems() @@ -35,31 +28,14 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { }), true) -//runInAction(() => -// let doc1 = Documents.TextDocument({ title: "hello" }); -// let doc2 = doc1.MakeDelegate(); -// doc2.Set(KS.X, new NumberField(150)); -// doc2.Set(KS.Y, new NumberField(20)); -// let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { -// x: 450, y: 100, title: "cat 1" -// }); -// doc3.Set(KeyStore.Data, new ImageField); -// const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { -// x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v -// })); -// schemaDocs[0].SetData(KS.Author, "Tyler", TextField); -// schemaDocs[4].SetData(KS.Author, "Bob", TextField); -// schemaDocs.push(doc2); -// const doc7 = Documents.SchemaDocument(schemaDocs) - const mainDocId = "mainDoc"; +let mainContainer: Document; +let mainfreeform: Document; +console.log("HELLO WORLD") Documents.initProtos(mainDocId, (res?: Document) => { - console.log("HELLO WORLD") - console.log("RESPONSE: " + res) - let mainContainer: Document; - let mainfreeform: Document; - if (res) { - mainContainer = res as Document; + console.log("Response => " + JSON.stringify(res as Document)) + if (res instanceof Document) { + mainContainer = res; mainContainer.GetAsync(KeyStore.ActiveFrame, field => mainfreeform = field as Document); } else { @@ -71,8 +47,8 @@ Documents.initProtos(mainDocId, (res?: Document) => { mainfreeform = Documents.FreeformDocument([], { x: 0, y: 400, title: "mini collection" }); Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainfreeform.ToJson())); - var docs = [mainfreeform].map(doc => CollectionDockingView.makeDocumentConfig(doc)); - mainContainer.SetText(KeyStore.Data, JSON.stringify({ content: [{ type: 'row', content: docs }] })); + var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(mainfreeform)] }] }; + mainContainer.SetText(KeyStore.Data, JSON.stringify(dockingLayout)); mainContainer.Set(KeyStore.ActiveFrame, mainfreeform); }, 0); } @@ -86,12 +62,7 @@ Documents.initProtos(mainDocId, (res?: Document) => { 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 addClick = (creator: any) => action(() => { - var img = creator(); - img.SetNumber(KeyStore.X, 0); - img.SetNumber(KeyStore.Y, 0); - mainfreeform.GetList(KeyStore.Data, []).push(img); - }); + let addClick = (creator: () => Document) => action(() => mainfreeform.GetList(KeyStore.Data, []).push(creator())); let imgRef = React.createRef(); let webRef = React.createRef(); @@ -110,19 +81,20 @@ Documents.initProtos(mainDocId, (res?: Document) => { ContainingCollectionView={undefined} /> -
+
-
+
-
+
-
+
-
+
- - - +
+
+ +
), document.getElementById('root')); }) -- cgit v1.2.3-70-g09d2 From fa2a9c1af221e12f10b6297851846828c6c5110f Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Thu, 28 Feb 2019 13:31:04 -0500 Subject: minor cleanup and fixed transforms --- src/client/views/Main.tsx | 3 --- src/client/views/collections/CollectionFreeFormView.tsx | 14 ++++++-------- 2 files changed, 6 insertions(+), 11 deletions(-) (limited to 'src/client/views/Main.tsx') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 16e95ad82..24c2ea7f7 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -33,19 +33,16 @@ let mainContainer: Document; let mainfreeform: Document; console.log("HELLO WORLD") Documents.initProtos(mainDocId, (res?: Document) => { - console.log("Response => " + JSON.stringify(res as Document)) if (res instanceof Document) { mainContainer = res; mainContainer.GetAsync(KeyStore.ActiveFrame, field => mainfreeform = field as Document); } else { mainContainer = Documents.DockDocument(JSON.stringify({ content: [{ type: 'row', content: [] }] }), { title: "main container" }, mainDocId); - Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainContainer.ToJson())) // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) setTimeout(() => { mainfreeform = Documents.FreeformDocument([], { x: 0, y: 400, title: "mini collection" }); - Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainfreeform.ToJson())); var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(mainfreeform)] }] }; mainContainer.SetText(KeyStore.Data, JSON.stringify(dockingLayout)); diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index dee4651df..736896c08 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -133,15 +133,12 @@ export class CollectionFreeFormView extends CollectionViewBase { deltaScale = 1 / this.zoomScaling; let [x, y] = transform.transformPoint(e.clientX, e.clientY); - let localTransform = this.getLocalTransform(); - console.log("test") - console.log(localTransform.inverse()) - console.log([x, y]) - localTransform = localTransform.inverse().preTranslate(-this.centeringShiftX, -this.centeringShiftY).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); - this.SetPan(-localTransform.TranslateX, -localTransform.TranslateY); + this.SetPan(-localTransform.TranslateX / localTransform.Scale, -localTransform.TranslateY / localTransform.Scale); } } @@ -254,8 +251,8 @@ export class CollectionFreeFormView extends CollectionViewBase { />); } - getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform()) - getLocalTransform = (): Transform => Transform.Identity.translate(-this.centeringShiftX, -this.centeringShiftY).scale(1 / this.scale).translate(this.panX, this.panY); + getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).translate(-this.centeringShiftX, -this.centeringShiftY).transform(this.getLocalTransform()) + 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 @@ -280,6 +277,7 @@ export class CollectionFreeFormView extends CollectionViewBase { 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 (
Date: Sat, 2 Mar 2019 17:15:10 -0500 Subject: focus --- src/client/views/DocumentManager.tsx | 283 --------------------- src/client/views/Main.tsx | 2 - src/client/views/TempTreeView.scss | 13 - src/client/views/TempTreeView.tsx | 41 --- .../views/collections/CollectionDockingView.tsx | 2 +- .../views/collections/CollectionFreeFormView.tsx | 8 +- .../views/collections/CollectionSchemaView.tsx | 4 +- src/client/views/nodes/DocumentView.tsx | 37 +-- 8 files changed, 8 insertions(+), 382 deletions(-) delete mode 100644 src/client/views/DocumentManager.tsx delete mode 100644 src/client/views/TempTreeView.scss delete mode 100644 src/client/views/TempTreeView.tsx (limited to 'src/client/views/Main.tsx') diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx deleted file mode 100644 index a53ed4a91..000000000 --- a/src/client/views/DocumentManager.tsx +++ /dev/null @@ -1,283 +0,0 @@ -import React = require('react') -import { observer } from 'mobx-react'; -import { observable, action } from 'mobx'; -import { DocumentView } from './nodes/DocumentView'; -import { Document } from "../../fields/Document" -import { CollectionFreeFormView } from './collections/CollectionFreeFormView'; -import { KeyStore } from '../../fields/KeyStore'; -import { CollectionViewBase } from './collections/CollectionViewBase'; -import { CollectionViewType, CollectionView } from './collections/CollectionView'; - - -export class DocumentManager { - - //global holds all of the nodes (regardless of which collection they're in) - @observable - public DocumentViews: DocumentView[] = []; - - // singleton instance - private static _instance: DocumentManager; - - // create one and only one instance of NodeManager - public static get Instance(): DocumentManager { - return this._instance || (this._instance = new this()); - } - - //private constructor so no other class can create a nodemanager - private constructor() { - // this.DocumentViews = new Array(); - } - - public getDocumentView(toFind: Document): DocumentView | null { - - let toReturn: DocumentView | null; - toReturn = null; - - //gets document view that is in a freeform canvas collection - DocumentManager.Instance.DocumentViews.map(view => { - let doc = view.props.Document; - // if (view.props.ContainingCollectionView instanceof CollectionFreeFormView) { - // if (Object.is(doc, toFind)) { - // toReturn = view; - // return; - // } - // } - - if (Object.is(doc, toFind)) { - toReturn = view; - return; - } - - }) - - return (toReturn); - } - - // public getDocumentViewFreeform2(toFind: Document): DocumentView | null { - - // let toReturn: DocumentView | null; - // toReturn = null; - - // //gets document view that is in a freeform canvas collection - // DocumentManager.Instance.DocumentViews.map(view => { - // let doc = view.props.Document; - // if (view.props.ContainingCollectionView && view.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { - // if (Object.is(doc, toFind)) { - // console.log("finding view") - // toReturn = view; - // return; - // } - // } - // }) - - // return (toReturn); - // } - - public getCollectionView(toFind: Document): DocumentView | null { - - let toReturn: DocumentView | null; - toReturn = null; - - //gets document view that is in a freeform canvas collection - DocumentManager.Instance.DocumentViews.map(view => { - let doc = view.props.Document; - if (view instanceof CollectionView) { - console.log("finding view") - if (Object.is(doc, toFind)) { - toReturn = view; - return; - } - } - }) - - return (toReturn); - } - - // @action - // public centerNode2(doc: Document | DocumentView): any { - // //console.log(doc.Title) - // //gets document view that is in freeform collection - - // let docView: DocumentView | null; - - // if (doc instanceof Document) { - // docView = DocumentManager.Instance.getDocumentViewFreeform(doc) - // } - // else { - // docView = doc - // } - - // let scale: number; - // let XView: number; - // let YView: number; - - // //if the view exists in a freeform collection - // if (docView) { - // let { width, height } = docView.size(); - - // //base case: parent of parent does not exist - // if (!docView.props.ContainingCollectionView) { - // scale = docView.props.ScreenToLocalTransform().Scale - // let doc = docView.props.Document; - // console.log("hello") - // XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2) - // YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2) - // //set x and y view of parent - // if (docView instanceof CollectionView) { - // console.log("here") - // DocumentManager.Instance.setViewportXY(docView, XView, YView) - // } - // } - // //parent is not main, parent is centered and calls itself - // else { - // if (true) { - // //view of parent - // let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1) - // let doc = docView.props.Document - - // //TODO: make sure to test if the parent view is a freeform view. if not, just skip to the next level - // if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { - // //scale of parent - // console.log("scale: " + scale) - // XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2); - // YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2); - // // //node.Parent.setViewportXY(XView, YView); - // DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) - // return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) - // } - // else { return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) } - // } - // else { - // // return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) - // } - // } - // } - // } - - // @action - // public centerNode4(doc: Document | DocumentView): any { - // //console.log(doc.Title) - // //gets document view that is in freeform collection - - // console.log("things are happening") - - // let docView: DocumentView | null; - - // if (doc instanceof Document) { - // console.log(doc.Title) - // docView = DocumentManager.Instance.getDocumentViewFreeform(doc) - // } - // else { - // docView = doc - // console.log(docView.props.Document.Title) - // } - - // let scale: number; - // let XView: number; - // let YView: number; - - // //if the view exists in a freeform collection - // if (docView) { - // let { width, height } = docView.size(); - - // if (docView.props.ContainingCollectionView) { - // //view of parent - // let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1) - // let doc = docView.props.Document - - // if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { - // //scale of parent - // XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2); - // YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2); - // DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) - // return DocumentManager.Instance.centerNode4(docView.props.ContainingCollectionView.props.Document) - // } - // else { return DocumentManager.Instance.centerNode4(docView.props.ContainingCollectionView.props.Document) } - // } - // } - // } - - @action - public centerNode(doc: Document | DocumentView, collection: Document): void { - //console.log(doc.Title) - //gets document view that is in freeform collection - let docView: DocumentView | null; - - if (doc instanceof Document) { - console.log(doc.Title) - docView = DocumentManager.Instance.getDocumentView(doc) - } - else { - docView = doc - console.log(docView.props.Document.Title) - } - - let scale: number; - let XView: number; - let YView: number; - - if (docView) { - let { width, height } = docView.size(); - let scale = docView.props.Document.GetNumber(KeyStore.Scale, 1); - let doc = docView.props.Document; - let x = doc.GetNumber(KeyStore.X, 0); - let y = doc.GetNumber(KeyStore.X, 0); - - if (x && y) { - XView = (-x * scale) - (width * scale / 2); - YView = (-y * scale) - (height * scale / 2); - DocumentManager.Instance.setViewportXY(collection, XView, YView) - } - - } - } - - // @action - // public centerNode3(doc: Document | DocumentView): any { - // //console.log(doc.Title) - // //gets document view that is in freeform collection - - // let docView: DocumentView | null; - - // if (doc instanceof Document) { - // docView = DocumentManager.Instance.getDocumentViewFreeform(doc) - // } - // else { - // docView = doc - // } - - // let scale: number; - // let XView: number; - // let YView: number; - - // //if the view exists in a freeform collection - // if (docView) { - // let { width, height } = docView.size(); - - // //parent is not main, parent is centered and calls itself - // if (docView.props.ContainingCollectionView) { - // //view of parent - // let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1) - // let doc = docView.props.Document - - // if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { - // //scale of parent - // XView = doc.GetNumber(KeyStore.X, 0) - width / 2 - // YView = doc.GetNumber(KeyStore.Y, 0) - height / 2 - // // console.log("X location: " + XView) - // // console.log("Y location: " + YView) - // DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) - // return DocumentManager.Instance.centerNode3(docView.props.ContainingCollectionView.props.Document) - // } - // else { return DocumentManager.Instance.centerNode3(docView.props.ContainingCollectionView.props.Document) } - // } - // } - // } - - - @action - private setViewportXY(collection: Document, x: number, y: number) { - collection.SetNumber(KeyStore.PanX, x); - collection.SetNumber(KeyStore.PanY, y); - } -} \ No newline at end of file diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 2e1deebd1..ce23d9ffb 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -5,7 +5,6 @@ import * as ReactDOM from 'react-dom'; import { Document } from '../../fields/Document'; import { KeyStore } from '../../fields/KeyStore'; import "./Main.scss"; -import { TempTreeView } from './../views/TempTreeView'; import { MessageStore } from '../../server/Message'; import { Utils } from '../../Utils'; import { Documents } from '../documents/Documents'; @@ -81,7 +80,6 @@ Documents.initProtos(mainDocId, (res?: Document) => { focus={() => { }} ContainingCollectionView={undefined} /> -
diff --git a/src/client/views/TempTreeView.scss b/src/client/views/TempTreeView.scss deleted file mode 100644 index 0a6342ca6..000000000 --- a/src/client/views/TempTreeView.scss +++ /dev/null @@ -1,13 +0,0 @@ -.temptree { - background: #ADD8E6; - width: 300px; - height: 200px; - z-index: 100; - position: fixed; - bottom: 0px; - right: 0px; - .list { - padding: 5px; - color: #1e5162; - } -} \ No newline at end of file diff --git a/src/client/views/TempTreeView.tsx b/src/client/views/TempTreeView.tsx deleted file mode 100644 index bd73ef887..000000000 --- a/src/client/views/TempTreeView.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { action, observable, computed } from "mobx"; -import React = require("react"); -import { observer } from "mobx-react"; -import { Document } from "../../fields/Document"; -import { ListField } from "../../fields/ListField"; -import "./TempTreeView.scss" -import { DocumentManager } from "./DocumentManager"; -import { KeyStore } from "../../fields/KeyStore"; - - -@observer -export class TempTreeView extends React.Component { - - @action - onClick(doc: Document) { - - let view = DocumentManager.Instance.getDocumentView(doc); - if (view != null) { - // DocumentManager.Instance.centerNode(view); - doc = view.props.Document - view.props.focus(doc, doc.GetNumber(KeyStore.X, 0), doc.GetNumber(KeyStore.Y, 0)) - } - } - - render() { - return ( -
-
- {DocumentManager.Instance.DocumentViews.map(doc => { - return ( -
{ this.onClick(doc.props.Document) }}> - {doc.props.Document.Title} -
- ) - } - )} -
-
- ); - } -} \ No newline at end of file diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index d5b888e28..6b7c2a191 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -272,7 +272,7 @@ export class DockedFrameRenderer extends React.Component { ScreenToLocalTransform={this.ScreenToLocalTransform} isTopMost={true} SelectOnLoad={false} - focus={(doc: Document, x: number, y: number) => { }} + focus={(doc: Document) => { }} ContainingCollectionView={undefined} />
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index fc6021a6e..1b39dcae5 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -22,7 +22,6 @@ import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import { Documents } from "../../documents/Documents"; import React = require("react"); -import { DocumentManager } from "../DocumentManager"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? @observer @@ -224,7 +223,7 @@ export class CollectionFreeFormView extends CollectionViewBase { const lvalue = this.props.Document.GetT>(this.props.fieldKey, ListField); if (lvalue && lvalue != FieldWaiting) { return lvalue.Data.map(doc => { - return (): void => { + onBlur = (e: React.FocusEvent): void => { this._previewCursorVisible = false; } @@ -288,9 +287,6 @@ export class CollectionFreeFormView extends CollectionViewBase { 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 (
{ } + render() { const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author]) const children = this.props.Document.GetList(this.props.fieldKey, []); @@ -192,7 +194,7 @@ export class CollectionSchemaView extends CollectionViewBase { PanelWidth={this.getPanelWidth} PanelHeight={this.getPanelHeight} ContainingCollectionView={this.props.CollectionView} - focus={(doc) => this.props.focus(this.props.Document)} + focus={this.focusDocument} />
} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index a624c1d7f..9244ca08d 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -21,7 +21,6 @@ import { KeyValueBox } from "./KeyValueBox" import { WebBox } from "../nodes/WebBox"; import "./DocumentView.scss"; import React = require("react"); -import { DocumentManager } from "../DocumentManager"; import { TextField } from "../../../fields/TextField"; import { Utils } from "../../../Utils"; import { CollectionViewProps } from "../collections/CollectionViewBase"; @@ -40,7 +39,7 @@ export interface DocumentViewProps { ContentScaling: () => number; PanelWidth: () => number; PanelHeight: () => number; - focus: (doc: Document, x: number, y: number) => void; + focus: (doc: Document) => void; SelectOnLoad: boolean; } export interface JsxArgs extends DocumentViewProps { @@ -191,12 +190,6 @@ export class DocumentView extends React.Component { ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) } - //TODO Monika - @action - Center = (e: React.MouseEvent): void => { - this.props.focus(this.props.Document, this.props.Document.GetNumber(KeyStore.X, 0), this.props.Document.GetNumber(KeyStore.Y, 0)) - } - @action onContextMenu = (e: React.MouseEvent): void => { e.stopPropagation(); @@ -209,20 +202,11 @@ export class DocumentView extends React.Component { ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) ContextMenu.Instance.addItem({ description: "Fields", event: this.fieldsClicked }) - ContextMenu.Instance.addItem({ description: "Center", event: this.Center }) + 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: "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: "center", event: () => { - if (this.props.ContainingCollectionView) { - let doc = this.props.ContainingCollectionView.props.Document; - doc.SetNumber(KeyStore.PanX, this.props.Document.GetNumber(KeyStore.X, 0) + (this.props.Document.GetNumber(KeyStore.Width, 0) / 2)) - doc.SetNumber(KeyStore.PanY, this.props.Document.GetNumber(KeyStore.Y, 0) + (this.props.Document.GetNumber(KeyStore.Height, 0) / 2)) - } - } - }) //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) { @@ -245,23 +229,6 @@ export class DocumentView extends React.Component { /> } - //adds doc to global list - componentDidMount: () => void = () => { - runInAction(() => { - DocumentManager.Instance.DocumentViews.push(this); - }) - } - - //removes doc from global list - componentWillUnmount: () => void = () => { - runInAction(() => { - for (let node of DocumentManager.Instance.DocumentViews) { - if (Object.is(node, this)) { - DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1); - } - } - }) - } isSelected = () => { return SelectionManager.IsSelected(this); } -- cgit v1.2.3-70-g09d2 From 92f2dd5df2b8be69415c9cbe07dfda45d719c5ea Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Sat, 2 Mar 2019 18:01:49 -0500 Subject: time to merge --- src/client/views/Main.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/client/views/Main.tsx') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index c842e7fe3..48935d00d 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -54,13 +54,14 @@ Documents.initProtos(mainDocId, (res?: Document) => { let weburl = "https://cs.brown.edu/courses/cs166/"; let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {})) let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" })) - let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a feeform collection" })); + let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" })); let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { 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 addClick = (creator: () => Document) => action(() => mainfreeform.GetList(KeyStore.Data, []).push(creator()) + ); let imgRef = React.createRef(); -- cgit v1.2.3-70-g09d2 From e7955efcfa18c5cb03066217c3e228c2e46786be Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sat, 2 Mar 2019 23:03:03 -0500 Subject: minor cleanup --- src/client/views/Main.tsx | 1 - src/client/views/collections/CollectionViewBase.tsx | 1 - 2 files changed, 2 deletions(-) (limited to 'src/client/views/Main.tsx') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 48935d00d..d845fa7a3 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -61,7 +61,6 @@ Documents.initProtos(mainDocId, (res?: Document) => { let addClick = (creator: () => Document) => action(() => mainfreeform.GetList(KeyStore.Data, []).push(creator()) - ); let imgRef = React.createRef(); diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 73d7acefb..0a3b965f2 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -19,7 +19,6 @@ export interface CollectionViewProps { isSelected: () => boolean; isTopMost: boolean; select: (ctrlPressed: boolean) => void; - documentSize: () => { width: number, height: number }; bindings: any; panelWidth: () => number; panelHeight: () => number; -- cgit v1.2.3-70-g09d2