diff options
| -rw-r--r-- | src/client/util/Transform.ts | 7 | ||||
| -rw-r--r-- | src/client/views/DocumentManager.tsx | 154 | ||||
| -rw-r--r-- | src/client/views/Main.tsx | 84 | ||||
| -rw-r--r-- | src/client/views/TempTreeView.scss | 12 | ||||
| -rw-r--r-- | src/client/views/TempTreeView.tsx | 53 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionDockingView.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.scss | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 35 | ||||
| -rw-r--r-- | src/temp.txt | 109 |
10 files changed, 416 insertions, 42 deletions
diff --git a/src/client/util/Transform.ts b/src/client/util/Transform.ts index 9fd4f7bef..9a66727a2 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._scale; this._translateY += transform._translateY * this._scale; diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx new file mode 100644 index 000000000..4d8756107 --- /dev/null +++ b/src/client/views/DocumentManager.tsx @@ -0,0 +1,154 @@ +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/Key'; +import { CollectionViewBase } from './collections/CollectionViewBase'; + + +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 instanceof CollectionFreeFormView) { + if (Object.is(doc, toFind)) { + toReturn = view; + return; + } + } + }) + + return (toReturn); + } + + 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 = this.getDocumentViewFreeform(doc) + } + else { + docView = 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.Width, 0) + height = docView.props.Document.GetNumber(KeyStore.Height, 0) + + //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.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.DocumentForCollection != null) { + console.log("view of parent exists") + + 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.DocumentForCollection); + } + } + } + } + } + + private setViewportXY(collection: CollectionViewBase, x: number, y: number) { + if (collection.props.BackgroundView != null) { + collection.props.BackgroundView.props.GetTransform().center(x, y) + } + } + + 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 1eeec7ff5..0532cbc1f 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -10,10 +10,12 @@ import { ListField } from '../../fields/ListField'; import { NumberField } from '../../fields/NumberField'; import { TextField } from '../../fields/TextField'; import "./Main.scss"; -import { ContextMenu } from './ContextMenu'; -import { DocumentView } from './nodes/DocumentView'; -import { ImageField } from '../../fields/ImageField'; +import { ContextMenu } from './../views/ContextMenu'; +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({ @@ -39,47 +41,46 @@ 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: "dog", 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.push(doc3); - 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, doc4, doc2]; - let doc6 = Documents.CollectionDocument(docset2, { - x: 350, y: 100, width: 600, height: 600, title: "docking collection" - }); - let mainNodes = mainContainer.GetOrCreate<ListField<Document>>(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: "dog", 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.push(doc3); +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, doc4, doc2]; +let doc6 = Documents.CollectionDocument(docset2, { + x: 350, y: 100, width: 600, height: 600, title: "docking collection" +}); +let mainNodes = mainContainer.GetOrCreate<ListField<Document>>(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); //} //); + ReactDOM.render(( <div style={{ position: "absolute", width: "100%", height: "100%" }}> <DocumentView Document={mainContainer} @@ -89,5 +90,6 @@ ReactDOM.render(( ContainingCollectionView={undefined} DocumentView={undefined} /> <DocumentDecorations /> <ContextMenu /> + <TempTreeView mainCollection={mainNodes.Data} /> </div>), 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..2d02f3fde --- /dev/null +++ b/src/client/views/TempTreeView.tsx @@ -0,0 +1,53 @@ +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<Document>; +} + +@observer +export class TempTreeView extends React.Component<IProps>{ + + 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") + } + + view.switchColor(); + } + } + + render() { + return ( + <div className="tempTree"> + <div className="list"> + {this.props.mainCollection.map(doc => { + return ( + <div key={doc.Id} onClick={() => { this.onClick(doc) }}> + {doc.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 1c1f6f8b4..472f8a4d2 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -226,6 +226,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(); //} }); diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index eca8a0adf..26c8517b3 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.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 f368fdeaf..9bd8c0288 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"; @@ -14,6 +15,7 @@ import { ImageBox } from "../nodes/ImageBox"; import "./DocumentView.scss"; import React = require("react"); import { Transform } from "../../util/Transform"; +import { DocumentManager } from "../DocumentManager"; import { SelectionManager } from "../../util/SelectionManager"; import { DragManager } from "../../util/DragManager"; import { ContextMenu } from "../ContextMenu"; @@ -35,6 +37,16 @@ export interface DocumentViewProps { @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>(); get MainContent() { return this._mainCont; @@ -168,6 +180,13 @@ export class DocumentView extends React.Component<DocumentViewProps> { } @action + Center = (e: React.MouseEvent): void => { + DocumentManager.Instance.centerNode(this.props.Document) + DocumentManager.Instance.centerNode(this) + //console.log(this.props.ContainingCollectionView.props.) + } + + @action onContextMenu = (e: React.MouseEvent): void => { if (!SelectionManager.IsSelected(this)) { return; @@ -188,6 +207,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: this.openRight }) ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked }) @@ -209,6 +229,19 @@ export class DocumentView extends React.Component<DocumentViewProps> { 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); + } + } + } isSelected = () => { return SelectionManager.IsSelected(this); } @@ -250,7 +283,7 @@ export class DocumentView extends React.Component<DocumentViewProps> { var height = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); var strheight = height > 0 ? height.toString() + "px" : "100%"; return ( - <div className="documentView-node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }} + <div className="documentView-node" ref={this._mainCont} style={{ borderColor: this.Border, width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} > <JsxParser 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 |