diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/DocumentManager.tsx | 151 | ||||
| -rw-r--r-- | src/client/views/Main.tsx | 3 | ||||
| -rw-r--r-- | src/client/views/TempTreeView.scss | 12 | ||||
| -rw-r--r-- | src/client/views/TempTreeView.tsx | 45 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionDockingView.tsx | 7 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionView.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionViewBase.tsx | 7 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.scss | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 55 | ||||
| -rw-r--r-- | src/temp.txt | 109 |
11 files changed, 388 insertions, 8 deletions
diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx new file mode 100644 index 000000000..35064d830 --- /dev/null +++ b/src/client/views/DocumentManager.tsx @@ -0,0 +1,151 @@ +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 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 && view.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { + if (Object.is(doc, toFind)) { + toReturn = view; + return; + } + } + }) + + return (toReturn); + } + + @action + public centerNode(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; + + 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) + } + } + //parent is not main, parent is centered and calls itself + else { + if (true) { + //view of parent + 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); + // //node.Parent.setViewportXY(XView, YView); + 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) + } + } + } + } + + parentIsFreeform(node: any): boolean { + return node.props.ContainingCollectionView instanceof CollectionFreeFormView + } + + @action + private setViewportXY(collection: CollectionView, x: number, y: number) { + if (collection.collectionViewType !== CollectionViewType.Freeform) { + return; + } + console.log("viewport is setting") + let doc = collection.props.Document; + doc.SetNumber(KeyStore.PanX, x); + doc.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 17dda899d..b8896d50a 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -7,6 +7,9 @@ import { Documents } from '../documents/Documents'; import { Document } from '../../fields/Document'; import { KeyStore } from '../../fields/KeyStore'; import "./Main.scss"; +import { CompileScript } from './../util/Scripting'; +import { TempTreeView } from './../views/TempTreeView'; +import { DocumentManager } from './DocumentManager'; import { ContextMenu } from './ContextMenu'; import { DocumentView } from './nodes/DocumentView'; import { Server } from '../Server'; diff --git a/src/client/views/TempTreeView.scss b/src/client/views/TempTreeView.scss new file mode 100644 index 000000000..fe8cf4da8 --- /dev/null +++ b/src/client/views/TempTreeView.scss @@ -0,0 +1,12 @@ +.temptree { + background: #ADD8E6; + width: 300px; + height: 200px; + 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..4b1650ac5 --- /dev/null +++ b/src/client/views/TempTreeView.tsx @@ -0,0 +1,45 @@ +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"; + +export interface IProps { + mainCollection: Array<Document>; +} + +@observer +export class TempTreeView extends React.Component<IProps>{ + + @action + onClick(doc: Document) { + + let view = DocumentManager.Instance.getDocumentView(doc); + if (view != null) { + + if (DocumentManager.Instance.parentIsFreeform(view)) { + view.switchColor() + } + DocumentManager.Instance.centerNode(view); + } + } + + 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 5fb632469..5393ac06e 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 { DragManager } from "../../util/DragManager"; @@ -16,6 +18,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 diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 12909c151..ac14811a5 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -30,6 +30,7 @@ export class CollectionFreeFormView extends CollectionViewBase { private _lastY: number = 0; private _downX: number = 0; private _downY: number = 0; + private _borderColor: string = "red" @computed get panX(): number { return this.props.Document.GetNumber(KeyStore.PanX, 0) } @computed get panY(): number { return this.props.Document.GetNumber(KeyStore.PanY, 0) } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 03e1f1fa4..99f76decf 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -29,7 +29,11 @@ export class CollectionView extends React.Component<CollectionViewProps> { public static LayoutString(fieldKey: string = "DataKey") { return `<CollectionView Document={Document} +<<<<<<< HEAD + ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} isSelected={isSelected} select={select} bindings={bindings} documentSize={documentSize} +======= ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings} +>>>>>>> 292ff1a8d75f8b15f9388d2c577e09a13836d5dc isTopMost={isTopMost} BackgroundView={BackgroundView} />`; } public active = () => { diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 217536e2b..e38258e0b 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,6 +19,7 @@ export interface CollectionViewProps { isSelected: () => boolean; isTopMost: boolean; select: (ctrlPressed: boolean) => void; + documentSize: () => { width: number, height: number }; bindings: any; panelWidth: () => number; panelHeight: () => number; @@ -27,7 +28,7 @@ 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.scss b/src/client/views/nodes/DocumentView.scss index 8e2ebd690..5f7e6ff17 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -2,6 +2,8 @@ position: absolute; background: #cdcdcd; overflow: hidden; + border-style: solid; + border-width: 2px; //border-color: blue; &.minimized { width: 30px; height: 30px; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 87f2e205b..21f64ef35 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"; @@ -18,6 +19,9 @@ import { FormattedTextBox } from "../nodes/FormattedTextBox"; import { ImageBox } from "../nodes/ImageBox"; import "./DocumentView.scss"; import React = require("react"); +import { DocumentManager } from "../DocumentManager"; +import { TextField } from "../../../fields/TextField"; +import { Utils } from "../../../Utils"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? export interface DocumentViewProps { @@ -78,6 +82,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 _contextMenuCanOpen = false; @@ -91,6 +105,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; @@ -166,6 +181,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 => { + DocumentManager.Instance.centerNode(this) + } + @action onContextMenu = (e: React.MouseEvent): void => { e.preventDefault() @@ -184,6 +205,7 @@ export class DocumentView extends React.Component<DocumentViewProps> { 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: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) }) ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked }) @@ -206,6 +228,32 @@ export class DocumentView extends React.Component<DocumentViewProps> { onError={(test: any) => { console.log(test) }} /> } + + //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> @@ -215,8 +263,9 @@ 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 }; 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 |