diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/DocumentManager.tsx | 283 | ||||
| -rw-r--r-- | src/client/views/Main.tsx | 6 | ||||
| -rw-r--r-- | src/client/views/TempTreeView.scss | 13 | ||||
| -rw-r--r-- | src/client/views/TempTreeView.tsx | 41 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionDockingView.tsx | 8 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.tsx | 17 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionViewBase.tsx | 8 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 56 | ||||
| -rw-r--r-- | src/temp.txt | 109 |
11 files changed, 534 insertions, 13 deletions
diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx new file mode 100644 index 000000000..a53ed4a91 --- /dev/null +++ b/src/client/views/DocumentManager.tsx @@ -0,0 +1,283 @@ +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<DocumentView>(); + } + + 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 24c2ea7f7..2e1deebd1 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -4,7 +4,9 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { Document } from '../../fields/Document'; import { KeyStore } from '../../fields/KeyStore'; -import { DocumentTransfer, MessageStore } from '../../server/Message'; +import "./Main.scss"; +import { TempTreeView } from './../views/TempTreeView'; +import { MessageStore } from '../../server/Message'; import { Utils } from '../../Utils'; import { Documents } from '../documents/Documents'; import { Server } from '../Server'; @@ -76,8 +78,10 @@ Documents.initProtos(mainDocId, (res?: Document) => { PanelHeight={() => 0} isTopMost={true} SelectOnLoad={false} + focus={() => { }} ContainingCollectionView={undefined} /> <DocumentDecorations /> + <TempTreeView /> <ContextMenu /> <div className="main-buttonDiv" style={{ bottom: '0px' }} ref={imgRef} > <button onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>Add Image</button></div> diff --git a/src/client/views/TempTreeView.scss b/src/client/views/TempTreeView.scss new file mode 100644 index 000000000..0a6342ca6 --- /dev/null +++ b/src/client/views/TempTreeView.scss @@ -0,0 +1,13 @@ +.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 new file mode 100644 index 000000000..bd73ef887 --- /dev/null +++ b/src/client/views/TempTreeView.tsx @@ -0,0 +1,41 @@ +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 ( + <div className="tempTree"> + <div className="list"> + {DocumentManager.Instance.DocumentViews.map(doc => { + return ( + <div key={doc.Id} onClick={() => { this.onClick(doc.props.Document) }}> + {doc.props.Document.Title} + </div> + ) + } + )} + </div> + </div> + ); + } +}
\ No newline at end of file diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index ad7164e33..d5b888e28 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -4,10 +4,12 @@ import 'golden-layout/src/css/goldenlayout-dark-theme.css'; import { action, computed, observable, reaction } from "mobx"; import { observer } from "mobx-react"; import * as ReactDOM from 'react-dom'; -import Measure from "react-measure"; import { Document } from "../../../fields/Document"; -import { FieldId, Opt, Field } from "../../../fields/Field"; import { KeyStore } from "../../../fields/KeyStore"; +import { ListField } from "../../../fields/ListField"; +import { NumberField } from "../../../fields/NumberField"; +import Measure from "react-measure"; +import { FieldId, Opt, Field } from "../../../fields/Field"; import { Utils } from "../../../Utils"; import { Server } from "../../Server"; import { undoBatch } from "../../util/UndoManager"; @@ -15,6 +17,7 @@ import { DocumentView } from "../nodes/DocumentView"; import "./CollectionDockingView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import React = require("react"); +import { changeDependenciesStateTo0 } from "mobx/lib/internal"; import { SubCollectionViewProps } from "./CollectionViewBase"; @observer @@ -269,6 +272,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> { ScreenToLocalTransform={this.ScreenToLocalTransform} isTopMost={true} SelectOnLoad={false} + focus={(doc: Document, x: number, y: number) => { }} ContainingCollectionView={undefined} /> </div> diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 5e9dcd5d5..fc6021a6e 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -22,6 +22,7 @@ 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 @@ -35,6 +36,7 @@ export class CollectionFreeFormView extends CollectionViewBase { private _downX: number = 0; @observable private _downY: number = 0; + private _borderColor: string = "red" //determines whether the blinking cursor for indicating whether a text will be made on key down is visible @observable @@ -208,12 +210,21 @@ export class CollectionFreeFormView extends CollectionViewBase { return field.Data; } } + + focusDocument = (doc: Document) => { + let x = doc.GetNumber(KeyStore.X, 0) + doc.GetNumber(KeyStore.Width, 0) / 2; + let y = doc.GetNumber(KeyStore.Y, 0) + doc.GetNumber(KeyStore.Height, 0) / 2; + this.SetPan(x, y); + this.props.focus(this.props.Document); + } + + @computed get views() { const lvalue = this.props.Document.GetT<ListField<Document>>(this.props.fieldKey, ListField); if (lvalue && lvalue != FieldWaiting) { return lvalue.Data.map(doc => { - return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc} ref={focus} + return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc} ref={focus}//tfs: why are we setting ref={focus}? AddDocument={this.props.addDocument} RemoveDocument={this.props.removeDocument} ScreenToLocalTransform={this.getTransform} @@ -222,7 +233,9 @@ export class CollectionFreeFormView extends CollectionViewBase { ContentScaling={this.noScaling} PanelWidth={doc.Width} PanelHeight={doc.Height} - ContainingCollectionView={this.props.CollectionView} />); + ContainingCollectionView={this.props.CollectionView} + focus={this.focusDocument} + />); }) } return null; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 5bcd501cc..cdbd472b9 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -191,7 +191,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) => this.props.focus(this.props.Document)} + /> </div> } </Measure> diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index f938d2237..948f97889 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<CollectionViewProps> { public static LayoutString(fieldKey: string = "DataKey") { return `<CollectionView Document={Document} ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings} - isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} />`; + isTopMost={isTopMost} SelectOnLoad={selectOnLoad} 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 7067724c8..51dd50d39 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -6,11 +6,11 @@ import { KeyStore } from "../../../fields/KeyStore"; import { Opt, FieldWaiting } from "../../../fields/Field"; import { undoBatch } from "../../util/UndoManager"; import { DragManager } from "../../util/DragManager"; -import { DocumentView } from "../nodes/DocumentView"; +import { DocumentView, JsxArgs } from "../nodes/DocumentView"; import { Documents, DocumentOptions } from "../../documents/Documents"; import { Key } from "../../../fields/Key"; import { Transform } from "../../util/Transform"; - +import { CollectionView } from "./CollectionView"; export interface CollectionViewProps { fieldKey: Key; @@ -19,15 +19,17 @@ export interface CollectionViewProps { isSelected: () => boolean; isTopMost: boolean; select: (ctrlPressed: boolean) => void; + documentSize: () => { width: number, height: number }; bindings: any; panelWidth: () => number; panelHeight: () => number; + focus: (doc: Document) => void; } export interface SubCollectionViewProps extends CollectionViewProps { active: () => boolean; addDocument: (doc: Document) => void; removeDocument: (doc: Document) => boolean; - CollectionView: any; + CollectionView: CollectionView; } export class CollectionViewBase extends React.Component<SubCollectionViewProps> { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 19a455b74..a624c1d7f 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 { action, computed, runInAction } from "mobx"; import { observer } from "mobx-react"; +import { observable } from "mobx"; import { Document } from "../../../fields/Document"; import { Field, FieldWaiting, Opt } from "../../../fields/Field"; import { Key } from "../../../fields/Key"; @@ -20,6 +21,9 @@ 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"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? @@ -36,6 +40,7 @@ export interface DocumentViewProps { ContentScaling: () => number; PanelWidth: () => number; PanelHeight: () => number; + focus: (doc: Document, x: number, y: number) => void; SelectOnLoad: boolean; } export interface JsxArgs extends DocumentViewProps { @@ -83,6 +88,16 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs { @observer export class DocumentView extends React.Component<DocumentViewProps> { + public Id: string = Utils.GenerateGuid(); + + @observable + public Border: string = "white" + + @action + public switchColor() { + this.Border = "red" + } + private _mainCont = React.createRef<HTMLDivElement>(); private _documentBindings: any = null; private _downX: number = 0; @@ -95,6 +110,7 @@ export class DocumentView extends React.Component<DocumentViewProps> { @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>()); } screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect(); + size = (): { width: number, height: number } => this._mainCont.current ? { width: this._mainCont.current.clientWidth, height: this._mainCont.current.clientHeight } : { width: 0, height: 0 }; onPointerDown = (e: React.PointerEvent): void => { this._downX = e.clientX; @@ -175,6 +191,12 @@ export class DocumentView extends React.Component<DocumentViewProps> { 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(); @@ -187,6 +209,7 @@ export class DocumentView extends React.Component<DocumentViewProps> { 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: "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) }) @@ -222,6 +245,31 @@ export class DocumentView extends React.Component<DocumentViewProps> { /> } + //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); + } + + select = (ctrlPressed: boolean) => { + SelectionManager.SelectDoc(this, ctrlPressed) + } + render() { if (!this.props.Document) return <div></div> @@ -231,8 +279,10 @@ export class DocumentView extends React.Component<DocumentViewProps> { } this._documentBindings = { ...this.props, - isSelected: () => SelectionManager.IsSelected(this), - select: (ctrlPressed: boolean) => SelectionManager.SelectDoc(this, ctrlPressed) + isSelected: this.isSelected, + select: this.select, + 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 <keyname>Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data diff --git a/src/temp.txt b/src/temp.txt new file mode 100644 index 000000000..481424859 --- /dev/null +++ b/src/temp.txt @@ -0,0 +1,109 @@ += + //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); + } + + } + + @observable + public SetViewportXY(x: number, y: number) { + this.ViewportX = x; + this.ViewportY = y; + } + + + //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 |