From db4eb0777639495e6afb6636bbd7c9be6aedd3bc Mon Sep 17 00:00:00 2001 From: Jude Date: Mon, 11 Feb 2019 18:59:05 -0500 Subject: added button --- src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'src') diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 1d53cedc4..79cd78f32 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -159,6 +159,11 @@ export class CollectionFreeFormDocumentView extends DocumentView { this.props.ContainingCollectionView.removeDocument(this.props.Document) } } + + viewAsTreeview = (e: React.MouseEvent): void => { + // do something + } + @action fullScreenClicked = (e: React.MouseEvent): void => { CollectionDockingView.OpenFullScreen(this.props.Document); @@ -198,6 +203,7 @@ export class CollectionFreeFormDocumentView extends DocumentView { 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 }) + ContextMenu.Instance.addItem({ description: "View as Treeview", event: this.viewAsTreeview }) ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) SelectionManager.SelectDoc(this, e.ctrlKey); } -- cgit v1.2.3-70-g09d2 From 6c6e5ebcfa80c04844a08ab23f6f7b66494b78d4 Mon Sep 17 00:00:00 2001 From: Jude Date: Sun, 24 Feb 2019 15:10:36 -0500 Subject: test --- src/client/views/collections/CollectionTreeView.scss | 0 src/client/views/collections/CollectionTreeView.tsx | 20 ++++++++++++++++++++ .../views/nodes/CollectionFreeFormDocumentView.tsx | 3 ++- 3 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 src/client/views/collections/CollectionTreeView.scss create mode 100644 src/client/views/collections/CollectionTreeView.tsx (limited to 'src') diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx new file mode 100644 index 000000000..adc2e032d --- /dev/null +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -0,0 +1,20 @@ +import { observer } from "mobx-react"; +import { CollectionViewBase } from "./CollectionViewBase"; +import { Document } from "../../../fields/Document"; +import { KeyStore } from "../../../fields/Key"; +import { ListField } from "../../../fields/ListField"; + +@observer +export class CollectionTreeView extends CollectionViewBase { + + public static makeTreeView(document: Document) { + var children = document.GetT>(KeyStore.Data, ListField); + if (children != null) { + console.log("\nNumber of Children: " + children); + } + } + + render() { + return "HELLO WORLD"; + } +} \ No newline at end of file diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 1867d1d9d..14d956d32 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -10,6 +10,7 @@ import { ContextMenu } from "../ContextMenu"; import "./NodeView.scss"; import React = require("react"); import { DocumentView, DocumentViewProps } from "./DocumentView"; +import { CollectionTreeView } from "../collections/CollectionTreeView"; @observer @@ -161,7 +162,7 @@ export class CollectionFreeFormDocumentView extends DocumentView { } viewAsTreeview = (e: React.MouseEvent): void => { - // do something + CollectionTreeView.makeTreeView(this.props.Document); } @action -- cgit v1.2.3-70-g09d2 From 3213d828b4386eabc2ee19b47279d0053958ea2a Mon Sep 17 00:00:00 2001 From: Jude Date: Sun, 24 Feb 2019 15:27:27 -0500 Subject: why doesn't this work --- src/client/views/collections/CollectionFreeFormView.tsx | 1 + src/client/views/collections/CollectionTreeView.tsx | 7 ++++--- src/client/views/collections/CollectionView.tsx | 6 ++++++ 3 files changed, 11 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index cb6668634..a6296ba3e 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -10,6 +10,7 @@ import { Transform } from "../../util/Transform"; import { undoBatch } from "../../util/UndoManager"; import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionSchemaView } from "../collections/CollectionSchemaView"; +import { CollectionTreeView } from "../collections/CollectionTreeView"; import { CollectionView } from "../collections/CollectionView"; import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; import { DocumentView } from "../nodes/DocumentView"; diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index adc2e032d..90cd5a4c0 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -7,14 +7,15 @@ import { ListField } from "../../../fields/ListField"; @observer export class CollectionTreeView extends CollectionViewBase { - public static makeTreeView(document: Document) { - var children = document.GetT>(KeyStore.Data, ListField); + test = () => { + var children = this.props.Document.GetT>(KeyStore.Data, ListField); if (children != null) { console.log("\nNumber of Children: " + children); } + return "HELLO WORLD"; } render() { - return "HELLO WORLD"; + return { test }; } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 90080ab43..35ebb5687 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -11,6 +11,7 @@ import { CollectionFreeFormView } from "./CollectionFreeFormView"; import { CollectionDockingView } from "./CollectionDockingView"; import { CollectionSchemaView } from "./CollectionSchemaView"; import { CollectionViewProps } from "./CollectionViewBase"; +import { CollectionTreeView } from "./CollectionTreeView"; @@ -19,6 +20,7 @@ export enum CollectionViewType { Freeform, Schema, Docking, + Tree } export const COLLECTION_BORDER_WIDTH = 2; @@ -91,6 +93,10 @@ export class CollectionView extends React.Component { return () + case CollectionViewType.Tree: + return () default: return
} -- cgit v1.2.3-70-g09d2 From 68874b882ad9806cf1bf7493bc4efe766ed16ab4 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Sun, 24 Feb 2019 18:51:33 -0500 Subject: test --- src/client/views/Main.tsx | 1 + src/client/views/collections/CollectionTreeView.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 661a2ac20..2f5d42641 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -29,6 +29,7 @@ window.addEventListener("dragover", function (e) { e.preventDefault(); }, false) document.addEventListener("pointerdown", action(function (e: PointerEvent) { + console.log(ContextMenu); if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) { ContextMenu.Instance.clearItems() } diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 90cd5a4c0..9cead9558 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -1,7 +1,7 @@ import { observer } from "mobx-react"; import { CollectionViewBase } from "./CollectionViewBase"; import { Document } from "../../../fields/Document"; -import { KeyStore } from "../../../fields/Key"; +import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; @observer -- cgit v1.2.3-70-g09d2 From fe05db6c34d54e27ceeb853da5718aca4c52dcae Mon Sep 17 00:00:00 2001 From: madelinegr Date: Sun, 24 Feb 2019 23:16:55 -0500 Subject: look it works --- .../views/collections/CollectionTreeView.tsx | 98 ++++++++++++++++++++-- src/client/views/collections/CollectionView.tsx | 2 - src/client/views/nodes/DocumentView.tsx | 1 + 3 files changed, 92 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 9cead9558..745b06c46 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -3,19 +3,103 @@ import { CollectionViewBase } from "./CollectionViewBase"; import { Document } from "../../../fields/Document"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; +import React = require("react") +import { TextField } from "../../../fields/TextField"; +import { BasicField } from "../../../fields/BasicField"; +import { assertParenthesizedExpression } from "babel-types"; +import { observable, action } from "mobx"; + +export interface TreeViewProps { + document: Document; +} @observer -export class CollectionTreeView extends CollectionViewBase { +/** + * Component that takes in a document prop and a boolean whether it's collapsed or not. + */ +class TreeView extends React.Component { + + @observable + collapsed: boolean = false; + + /** + * Renders a single child document. If this child is a collection, it will call renderTreeView again. Otherwise, it will just append a list element. + * @param document The document to render. + */ + renderChild(document: Document) { + var children = document.GetT>(KeyStore.Data, ListField); + let title = document.GetT(KeyStore.Title, TextField); + + // if the title hasn't loaded, immediately return the div + if (!title || title === "") { + return
; + } + + // otherwise, check if it's a collection. + else if (children && children !== "") { + // if it's not collapsed, then render the full TreeView. + if (!this.collapsed) { + return ( +
  • this.collapsed = true)} > + {title.Data} +
      + +
    +
    • + ); + } else { + return
  • this.collapsed = false)}>{title.Data}
    • + } + } + + // finally, if it's a normal document, then render it as such. + else { + return
  • {title.Data}
    • ; + } + } + + render() { + var children = this.props.document.GetT>(KeyStore.Data, ListField); + + if (children && children !== "") { + return (
    + {children.Data.map(value => this.renderChild(value))} +
    ) + // let results: JSX.Element[] = []; + + // // append a list item for each child in the collection + // children.Data.forEach((value) => { + // results.push(this.renderChild(value)); + // }) - test = () => { - var children = this.props.Document.GetT>(KeyStore.Data, ListField); - if (children != null) { - console.log("\nNumber of Children: " + children); + // return results; + } else { + return
    ; } - return "HELLO WORLD"; } +} + + +@observer +export class CollectionTreeView extends CollectionViewBase { render() { - return { test }; + let titleStr = ""; + let title = this.props.Document.GetT(KeyStore.Title, TextField); + if (title && title !== "") { + titleStr = title.Data; + } + return ( +
    +

    {titleStr}

    +
      + +
    +
    + ); } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 35ebb5687..37fe43ab3 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -13,8 +13,6 @@ import { CollectionSchemaView } from "./CollectionSchemaView"; import { CollectionViewProps } from "./CollectionViewBase"; import { CollectionTreeView } from "./CollectionTreeView"; - - export enum CollectionViewType { Invalid, Freeform, diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index ad1328e5d..f06ea632c 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -189,6 +189,7 @@ export class DocumentView extends React.Component { ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked }) 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) }) + ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) }) ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) }) ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) SelectionManager.SelectDoc(this, e.ctrlKey); -- cgit v1.2.3-70-g09d2 From fc3308a7760860328d153faba65ab3821d4d0c70 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Sun, 24 Feb 2019 23:37:41 -0500 Subject: minor css styling --- .../views/collections/CollectionTreeView.scss | 28 ++++++++++++++++++++++ .../views/collections/CollectionTreeView.tsx | 9 ++++--- 2 files changed, 32 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index e69de29bb..675fc6c53 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -0,0 +1,28 @@ +ul { + list-style: none; +} + +li { + margin: 5px 0; +} + +.no-indent { + padding-left: 0; +} + +/* ALL THESE SPACINGS ARE SUPER HACKY RIGHT NOW HANNAH PLS HELP */ + +li:before { + content: '\2014'; + margin-right: 0.7em; +} + +.collapsed:before { + content: '\25b6'; + margin-right: 0.65em; +} + +.uncollapsed:before { + content: '\25bc'; + margin-right: 0.5em; +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 745b06c46..52e853bf7 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -5,9 +5,8 @@ import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; import React = require("react") import { TextField } from "../../../fields/TextField"; -import { BasicField } from "../../../fields/BasicField"; -import { assertParenthesizedExpression } from "babel-types"; import { observable, action } from "mobx"; +import "./CollectionTreeView.scss"; export interface TreeViewProps { document: Document; @@ -40,7 +39,7 @@ class TreeView extends React.Component { // if it's not collapsed, then render the full TreeView. if (!this.collapsed) { return ( -
  • this.collapsed = true)} > +
  • this.collapsed = true)} > {title.Data}
      { ); } else { - return
    • this.collapsed = false)}>{title.Data}
      • + return
    • this.collapsed = false)}>{title.Data}
      • } } @@ -94,7 +93,7 @@ export class CollectionTreeView extends CollectionViewBase { return (

      {titleStr}

      -
        +
          -- cgit v1.2.3-70-g09d2