aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/Transform.ts7
-rw-r--r--src/client/views/DocumentManager.tsx154
-rw-r--r--src/client/views/Main.tsx84
-rw-r--r--src/client/views/TempTreeView.scss12
-rw-r--r--src/client/views/TempTreeView.tsx53
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx1
-rw-r--r--src/client/views/collections/CollectionFreeFormView.tsx1
-rw-r--r--src/client/views/nodes/DocumentView.scss2
-rw-r--r--src/client/views/nodes/DocumentView.tsx35
-rw-r--r--src/temp.txt109
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
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-11 17:33:29 +0000