From 6445930e05e8eb81a36930615926712986bc1a9d Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Tue, 12 Feb 2019 16:20:01 -0500 Subject: Started node centering --- src/Main.tsx | 3 +++ src/TempTreeView.scss | 0 src/TempTreeView.tsx | 28 ++++++++++++++++++++++ src/views/nodes/CollectionFreeFormDocumentView.tsx | 8 +++++++ 4 files changed, 39 insertions(+) create mode 100644 src/TempTreeView.scss create mode 100644 src/TempTreeView.tsx (limited to 'src') diff --git a/src/Main.tsx b/src/Main.tsx index 6730cf799..7a11e6873 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -13,6 +13,7 @@ import "./Main.scss"; import { ContextMenu } from './views/ContextMenu'; import { DocumentView } from './views/nodes/DocumentView'; import { CompileScript } from './util/Scripting'; +import { TempTreeView } from './TempTreeView'; configure({ @@ -20,6 +21,7 @@ configure({ }); const mainNodeCollection = new Array(); +let mainNodes = null;// mainContainer.GetFieldT(KeyStore.Data, ListField); let mainContainer = Documents.DockDocument(mainNodeCollection, { x: 0, y: 0, title: "main container" }) @@ -86,5 +88,6 @@ ReactDOM.render(( + ), document.getElementById('root')); \ No newline at end of file diff --git a/src/TempTreeView.scss b/src/TempTreeView.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/TempTreeView.tsx b/src/TempTreeView.tsx new file mode 100644 index 000000000..0311d09bc --- /dev/null +++ b/src/TempTreeView.tsx @@ -0,0 +1,28 @@ +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/views/nodes/CollectionFreeFormDocumentView.tsx b/src/views/nodes/CollectionFreeFormDocumentView.tsx index 25d67d96a..5d6bcf4a3 100644 --- a/src/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/views/nodes/CollectionFreeFormDocumentView.tsx @@ -175,6 +175,13 @@ export class CollectionFreeFormDocumentView extends DocumentView { ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) } + //MONIKA TODO + //needs to be @action? + @action + centerNode = (e: React.MouseEvent): void => { + + } + @action onContextMenu = (e: React.MouseEvent): void => { if (!SelectionManager.IsSelected(this)) { @@ -196,6 +203,7 @@ export class CollectionFreeFormDocumentView extends DocumentView { e.stopPropagation(); ContextMenu.Instance.clearItems(); + ContextMenu.Instance.addItem({ description: "Center", event: this.centerNode }) ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight }) ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked }) -- 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') 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 a0430a981cd5996f3b3be60ed12f37f4fed235ae Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Wed, 13 Feb 2019 15:32:14 -0500 Subject: collection id removed --- src/client/views/TempTreeView.tsx | 2 +- src/temp.txt | 103 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 104 insertions(+), 1 deletion(-) create mode 100644 src/temp.txt (limited to 'src') diff --git a/src/client/views/TempTreeView.tsx b/src/client/views/TempTreeView.tsx index eeffe6cba..8dd256c8a 100644 --- a/src/client/views/TempTreeView.tsx +++ b/src/client/views/TempTreeView.tsx @@ -19,7 +19,7 @@ export class TempTreeView extends React.Component{ console.log(view.Id) console.log(view.props.Document.Title) if (view.props.ContainingCollectionView != undefined) { - console.log(view.props.ContainingCollectionView.Id) + //console.log(view.props.ContainingCollectionView.Id) } else { console.log("containing collection is undefined") diff --git a/src/temp.txt b/src/temp.txt new file mode 100644 index 000000000..251606e02 --- /dev/null +++ b/src/temp.txt @@ -0,0 +1,103 @@ += + //NAV + /** + * This method takes the node passed in as a parameter and centers it in the view. It is recursive + * so if the node is nested in collections, its parents will be centered too. + */ + public CenterNode(node: NodeStore) { + + let scale: number; + let XView: number; + let YView: number; + + //base case: parent is main + if(node.Parent == RootStore.Instance.MainNodeCollection){ + 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); + } + //parent is not main, parent is centered and calls itself + else{ + scale = node.Parent.Scale; + XView = (-node.X * scale) + (node.Parent.Width / 2) - (node.Width * scale / 2 ); + YView = (-node.Y * scale) +(node.Parent.Height / 2) - (node.Height * scale / 2); + node.Parent.SetViewportXY(XView, YView); + + return this.CenterNode(node.Parent); + } + + } + + + //NAV + /** + * This method sets the position of the new node to the center of the window/collection + * it is in. + */ + private SetPosition(node: NodeStore){ + let windowWidth: number; + let windowHeight: number; + let cornerX: number; + let cornerY: number; + + //size of parent is size of window if parent is root + if (node.Parent === RootStore.Instance.MainNodeCollection) { + windowWidth = window.innerWidth; + windowHeight = window.innerHeight; + } + //size of parent is size of collection node if not main + else { + windowWidth = node.Parent.Width; + windowHeight = node.Parent.Height; + } + + //corner of the parent's viewport (top left) + cornerX = node.Parent.ViewportX; + cornerY = node.Parent.ViewportY; + + //calculates node's position + let x = (windowWidth / 2 - cornerX) / node.Parent.Scale - node.Width / 2; + let y = (windowHeight / 2 - cornerY) / node.Parent.Scale - node.Height / 2; + + //sets node's position + node.X = x; + node.Y = y; + } + + /** + * This method finds the collection that has a name corresponding with the string + * passed in as a parameter. + */ + private findCollection(name: string): NodeCollectionStore { + + for (let cur of RootStore.Instance.Collections) { + if (name === cur.Title) { + return cur; + } + } + + return null; + } + + //NAV + /** + * This method resets all of the Z indices of the nodes to 0 so that one of them could be brought forward. + */ + @observable + private resetZIndices() { + for (let node of RootStore.Instance.Nodes) { + node.zIndex = 0; + } + } + + //NAV + /** + * This method brings the node passed in as a parameter to the front by resetting all of the + * z indices to 0, and then setting the one passed in to have a z index of 1 + */ + @observable + public bringForward(node: NodeStore) { + this.resetZIndices(); + node.zIndex = 1; + } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 1e8240e9ca1c2e2ff0e02ffb8b43be8dcbba9d14 Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Wed, 13 Feb 2019 20:57:12 -0500 Subject: nav working --- src/client/util/Transform.ts | 7 ++ src/client/views/DocumentManager.tsx | 81 +++++++++++++++++++++- src/client/views/TempTreeView.tsx | 5 ++ .../views/collections/CollectionFreeFormView.tsx | 1 + src/client/views/nodes/DocumentView.tsx | 19 ++++- src/client/views/nodes/NodeView.scss | 2 + src/temp.txt | 6 ++ 7 files changed, 118 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/util/Transform.ts b/src/client/util/Transform.ts index 8ae3f837f..aa922f358 100644 --- a/src/client/util/Transform.ts +++ b/src/client/util/Transform.ts @@ -55,6 +55,13 @@ export class Transform { return this; } + //MONIKA + center = (x: number, y: number): Transform => { + this._translateX = x + this._translateY = y + return this; + } + preTransform = (transform: Transform): Transform => { this._translateX = transform._translateX + this._translateX * transform._scale; this._translateY = transform._translateY + this._translateY * transform._scale; diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx index b69d40148..2ab643657 100644 --- a/src/client/views/DocumentManager.tsx +++ b/src/client/views/DocumentManager.tsx @@ -3,6 +3,9 @@ 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/Key'; +import { CollectionViewBase } from './collections/CollectionViewBase'; export class DocumentManager { @@ -29,19 +32,95 @@ export class DocumentManager { 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 getDocumentViewFreeform(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; + } + } }) return (toReturn); } - public centerNode(doc: DocumentView) { + public centerNode(doc: Document): any { + + //gets document view that is in freeform collection + let docView: DocumentView | null = this.getDocumentViewFreeform(doc) + + let scale: number; + let XView: number; + let YView: number; + let width: number; + let height: number; + + //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) + + //base case: parent does not exist (aka is parent) + 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.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) + } + //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) + + scale = docView.props.ContainingCollectionView.props.ContainingDocumentView.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); + } + } + } + } + private setViewportXY(collection: CollectionViewBase, x: number, y: number) { + if (collection.props.ContainingDocumentView != null) { + collection.props.ContainingDocumentView.props.GetTransform().center(x, y) + } } public setPosition(doc: DocumentView) { diff --git a/src/client/views/TempTreeView.tsx b/src/client/views/TempTreeView.tsx index 8dd256c8a..5bb44fde2 100644 --- a/src/client/views/TempTreeView.tsx +++ b/src/client/views/TempTreeView.tsx @@ -17,13 +17,18 @@ export class TempTreeView extends React.Component{ let view = DocumentManager.Instance.getDocumentView(doc); if (view != null) { console.log(view.Id) + console.log(view.props.GetTransform().TranslateX) + 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") } + + view.switchColor(); } } diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 7947b1c51..d60b98edd 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -25,6 +25,7 @@ export class CollectionFreeFormView extends CollectionViewBase { private _lastY: number = 0; private _downX: number = 0; private _downY: number = 0; + private _borderColor: string = "red" constructor(props: CollectionViewProps) { super(props); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index bc27c424c..f653919cf 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,5 +1,6 @@ import { action, computed } from "mobx"; import { observer } from "mobx-react"; +import { observable } from "mobx"; import { Document } from "../../../fields/Document"; import { Opt, FieldWaiting } from "../../../fields/Field"; import { Key, KeyStore } from "../../../fields/Key"; @@ -38,7 +39,14 @@ export interface DocumentViewProps { export class DocumentView extends React.Component { public Id: string = Utils.GenerateGuid(); - public tempTitle: string = "hello there" + + @observable + public Border: string = "white" + + @action + public switchColor() { + this.Border = "red" + } private _mainCont = React.createRef(); get MainContent() { @@ -172,6 +180,12 @@ export class DocumentView extends React.Component { ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) } + @action + Center = (e: React.MouseEvent): void => { + //DocumentManager.Instance.centerNode() + console.log("centering...") + } + @action onContextMenu = (e: React.MouseEvent): void => { if (!SelectionManager.IsSelected(this)) { @@ -193,6 +207,7 @@ export class DocumentView extends React.Component { e.stopPropagation(); ContextMenu.Instance.clearItems(); + ContextMenu.Instance.addItem({ description: "Center", event: this.Center }) ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight }) ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked }) @@ -268,7 +283,7 @@ export class DocumentView extends React.Component { var height = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); var strheight = height > 0 ? height.toString() + "px" : "100%"; return ( -
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') 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 9596bd5b6505fa6e9d32630ed7d824d263cd1e63 Mon Sep 17 00:00:00 2001 From: Eleanor Eng Date: Sat, 16 Feb 2019 17:18:02 -0500 Subject: first commit --- src/client/views/ContextMenu.scss | 7 ++++++- src/client/views/ContextMenu.tsx | 17 +++++++++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index 234f82eb9..dc5907f14 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -3,6 +3,7 @@ display: flex; z-index: 1000; box-shadow: #AAAAAA .2vw .2vw .4vw; + flex-direction: column; //E } .contextMenu-item { @@ -31,4 +32,8 @@ font-size: 1.5vw; text-align: left; width: 8vw; -} \ No newline at end of file +} + +// #mySearch { +// font-size: 1.5vw; +// } \ No newline at end of file diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index 4f26a75d2..4a216ca21 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -59,10 +59,27 @@ export class ContextMenu extends React.Component { render() { return (
+ {this._items.map(prop => { return })}
) } + + search() { + let input = document.getElementById("mySearch"); + let filter = (input as HTMLSelectElement).value.toUpperCase(); + let li = document.getElementById("options"); + let a = (li as HTMLSelectElement).getElementsByTagName("div"); + for (let i = 0; i < a.length; i++) { + let txtValue = a[i].textContent || a[i].innerText; + if (txtValue.toUpperCase().indexOf(filter) > -1) { + a[i].style.display = ""; + } + else { + a[i].style.display = "none"; + } + } + } } \ No newline at end of file -- 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') 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 953a11d8f5c46d8900032f16867660401673cc73 Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Mon, 18 Feb 2019 19:04:08 -0500 Subject: transforms update 2 --- .../views/collections/CollectionDockingView.tsx | 117 ++++++++++----------- 1 file changed, 58 insertions(+), 59 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 472f8a4d2..c870a9cf0 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -4,17 +4,18 @@ import 'golden-layout/src/css/goldenlayout-base.css'; import 'golden-layout/src/css/goldenlayout-dark-theme.css'; import { action, computed, reaction, observable } from "mobx"; import { observer } from "mobx-react"; +import * as ReactDOM from 'react-dom'; import { Document } from "../../../fields/Document"; import { KeyStore } from "../../../fields/Key"; import { ListField } from "../../../fields/ListField"; +import { NumberField } from "../../../fields/NumberField"; import { DragManager } from "../../util/DragManager"; import { Transform } from "../../util/Transform"; import { DocumentView } from "../nodes/DocumentView"; import "./CollectionDockingView.scss"; import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; import React = require("react"); -import * as ReactDOM from 'react-dom'; -import Measure from "react-measure"; +import { changeDependenciesStateTo0 } from "mobx/lib/internal"; import { Utils } from "../../../Utils"; @observer @@ -67,6 +68,7 @@ export class CollectionDockingView extends CollectionViewBase { } private nextId = (function () { var _next_id = 0; return function () { return _next_id++; } })(); + @action onResize = (event: any) => { var cur = this.props.ContainingDocumentView!.MainContent.current; @@ -98,7 +100,7 @@ export class CollectionDockingView extends CollectionViewBase { if (value[i].Id === component) { return ( Transform.Identity} + GetTransform={() => Transform.Identity} isTopMost={true} Scaling={1} ContainingCollectionView={this} DocumentView={undefined} />); @@ -111,6 +113,7 @@ export class CollectionDockingView extends CollectionViewBase { public static myLayout: any = null; + public rcs: Array = new Array(); private static _dragDiv: any = null; private static _dragParent: HTMLElement | null = null; private static _dragElement: HTMLDivElement; @@ -226,7 +229,6 @@ export class CollectionDockingView extends CollectionViewBase { .off('click') //unbind the current click handler .click(function () { //if (confirm('really close this?')) { - console.log("closing!") stack.remove(); //} }); @@ -241,19 +243,10 @@ export class CollectionDockingView extends CollectionViewBase { var containingDiv = "component_" + me.nextId(); container.getElement().html("
"); setTimeout(function () { - let divContainer = document.getElementById(containingDiv) as HTMLDivElement; - if (divContainer) { - let props: DockingProps = { - ContainingDiv: containingDiv, - Document: state.doc, - Container: container, - CollectionDockingView: me, - HtmlElement: divContainer, - } - ReactDOM.render((), divContainer); - if (CollectionDockingView.myLayout._maxstack) { - CollectionDockingView.myLayout._maxstack.click(); - } + state.rc = new RenderClass(containingDiv, state.doc, me, container); + me.rcs.push(state.rc); + if (CollectionDockingView.myLayout._maxstack != null) { + CollectionDockingView.myLayout._maxstack.click(); } }, 0); }); @@ -267,8 +260,8 @@ export class CollectionDockingView extends CollectionViewBase { const value: Document[] = Document.GetData(fieldKey, ListField, []); // bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes. var s = this.props.ContainingDocumentView != undefined ? this.props.ContainingDocumentView!.ScalingToScreenSpace : 1; - var w = Document.GetNumber(KeyStore.Width, 0) / s; - var h = Document.GetNumber(KeyStore.Height, 0) / s; + var w = Document.GetData(KeyStore.Width, NumberField, Number(0)) / s; + var h = Document.GetData(KeyStore.Height, NumberField, Number(0)) / s; var chooseLayout = () => { if (!CollectionDockingView.UseGoldenLayout) @@ -276,54 +269,60 @@ export class CollectionDockingView extends CollectionViewBase { } return ( -