aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/DocumentManager.tsx152
-rw-r--r--src/client/views/Main.tsx3
-rw-r--r--src/client/views/TempTreeView.scss12
-rw-r--r--src/client/views/TempTreeView.tsx45
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx7
-rw-r--r--src/client/views/collections/CollectionFreeFormView.tsx1
-rw-r--r--src/client/views/collections/CollectionViewBase.tsx1
-rw-r--r--src/client/views/nodes/DocumentView.scss2
-rw-r--r--src/client/views/nodes/DocumentView.tsx53
-rw-r--r--src/temp.txt109
10 files changed, 379 insertions, 6 deletions
diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx
new file mode 100644
index 000000000..ab54a7955
--- /dev/null
+++ b/src/client/views/DocumentManager.tsx
@@ -0,0 +1,152 @@
+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);
+ }
+
+ @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;
+ let width: number;
+ let height: number;
+
+ //if the view exists in a freeform collection
+ if (docView && docView.MainContent.current) {
+ width = docView.MainContent.current.clientWidth
+ height = docView.MainContent.current.clientHeight
+
+ //base case: parent of parent does not exist
+ if (docView.props.ContainingCollectionView == null) {
+ 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 CollectionFreeFormView) {
+ DocumentManager.Instance.setViewportXY(docView, XView, YView)
+ }
+ }
+ //parent is not main, parent is centered and calls itself
+ else {
+ if (docView.props.ContainingCollectionView.props.ContainingDocumentView && docView.props.ContainingCollectionView.props.ContainingDocumentView.MainContent.current) {
+ //view of parent
+ let tempCollectionView = docView.props.ContainingCollectionView.props.ContainingDocumentView
+ let doc = docView.props.Document
+ let parentWidth = docView.props.ContainingCollectionView.props.ContainingDocumentView.MainContent.current.clientWidth
+ let parentHeight = docView.props.ContainingCollectionView.props.ContainingDocumentView.MainContent.current.clientHeight
+
+ //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 instanceof CollectionFreeFormView) {
+ //scale of parent
+ scale = tempCollectionView.props.ScreenToLocalTransform().Scale
+
+ 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.DocumentForCollection);
+ }
+ }
+ else {
+ return DocumentManager.Instance.centerNode(docView.props.ContainingCollectionView.props.DocumentForCollection)
+ }
+ }
+ }
+ }
+
+ parentIsFreeform(node: any): boolean {
+ return node.props.ContainingCollectionView instanceof CollectionFreeFormView
+ }
+
+ @action
+ private setViewportXY(collection: CollectionFreeFormView, x: number, y: number) {
+ console.log("viewport is setting")
+ let doc = collection.props.DocumentForCollection;
+ 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 661a2ac20..8bb2084ec 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 86dc66e39..ed07cfac0 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 cb6668634..05de8dab9 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) }
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 7e269caf1..0658c8af0 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -11,7 +11,6 @@ import { Documents, DocumentOptions } from "../../documents/Documents";
import { Key } from "../../../fields/Key";
import { Transform } from "../../util/Transform";
-
export interface CollectionViewProps {
fieldKey: Key;
Document: Document;
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 ad1328e5d..d8e2f3401 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,8 @@ 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";
const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
export interface DocumentViewProps {
@@ -78,6 +81,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;
@@ -166,6 +179,13 @@ 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.props.Document)
+ DocumentManager.Instance.centerNode(this)
+ }
+
@action
onContextMenu = (e: React.MouseEvent): void => {
e.preventDefault()
@@ -184,6 +204,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 })
@@ -204,6 +225,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>
@@ -213,8 +260,8 @@ 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
};
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
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 10:33:21 +0000