From 646f5db87cf116533915814a790cb77565ceb515 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Mon, 25 Feb 2019 19:17:23 -0500 Subject: added in editableview stuff and minor css styling --- .../views/collections/CollectionTreeView.tsx | 25 +++++++++++++--------- 1 file changed, 15 insertions(+), 10 deletions(-) (limited to 'src/client/views/collections/CollectionTreeView.tsx') diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 52e853bf7..2bcd8e8ef 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -7,6 +7,7 @@ import React = require("react") import { TextField } from "../../../fields/TextField"; import { observable, action } from "mobx"; import "./CollectionTreeView.scss"; +import { EditableView } from "../EditableView"; export interface TreeViewProps { document: Document; @@ -37,6 +38,7 @@ class TreeView extends React.Component { // otherwise, check if it's a collection. else if (children && children !== "") { // if it's not collapsed, then render the full TreeView. + // TODO once clicking the title no longer expands the thing also make collection titles editable if (!this.collapsed) { return (
  • this.collapsed = true)} > @@ -55,7 +57,18 @@ class TreeView extends React.Component { // finally, if it's a normal document, then render it as such. else { - return
  • {title.Data}
    • ; + return
  • + { + let title = document.GetT(KeyStore.Title, TextField); + if (title && title !== "") + return title.Data; + return ""; + }} SetValue={(value: string) => { + document.SetData(KeyStore.Title, value, TextField); + return true; + }}> +
    • ; } } @@ -66,14 +79,6 @@ class TreeView extends React.Component { 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)); - // }) - - // return results; } else { return
    ; } @@ -91,7 +96,7 @@ export class CollectionTreeView extends CollectionViewBase { titleStr = title.Data; } return ( -
    +

    {titleStr}

      Date: Mon, 25 Feb 2019 19:57:17 -0500 Subject: refactored out bullets and can retitle main collection, but still need to retitle nested collections --- .../views/collections/CollectionTreeView.scss | 18 ++-------- .../views/collections/CollectionTreeView.tsx | 38 +++++++++++++++++++--- 2 files changed, 37 insertions(+), 19 deletions(-) (limited to 'src/client/views/collections/CollectionTreeView.tsx') diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 054e605a0..452c56f54 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -15,19 +15,7 @@ li { 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; +.bullet { + width: 1.5em; + display: inline-block; } \ No newline at end of file diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 2bcd8e8ef..3dbbb045a 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -13,6 +13,12 @@ export interface TreeViewProps { document: Document; } +export enum BulletType { + Collapsed, + Collapsible, + List +} + @observer /** * Component that takes in a document prop and a boolean whether it's collapsed or not. @@ -22,6 +28,17 @@ class TreeView extends React.Component { @observable collapsed: boolean = false; + renderBullet(type: BulletType) { + switch (type) { + case BulletType.Collapsed: + return
      ▶
      + case BulletType.Collapsible: + return
      ▼
      + case BulletType.List: + return
      —
      + } + } + /** * 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. @@ -38,10 +55,10 @@ class TreeView extends React.Component { // otherwise, check if it's a collection. else if (children && children !== "") { // if it's not collapsed, then render the full TreeView. - // TODO once clicking the title no longer expands the thing also make collection titles editable if (!this.collapsed) { return ( -
    • this.collapsed = true)} > +
    • this.collapsed = true)} > + {this.renderBullet(BulletType.Collapsible)} {title.Data}
        { ); } else { - return
      • this.collapsed = false)}>{title.Data}
        • + return
      • this.collapsed = false)}> + {this.renderBullet(BulletType.Collapsed)} + {title.Data} +
        • } } // finally, if it's a normal document, then render it as such. else { return
      • + {this.renderBullet(BulletType.List)} { let title = document.GetT(KeyStore.Title, TextField); @@ -97,7 +118,16 @@ export class CollectionTreeView extends CollectionViewBase { } return (
        -

        {titleStr}

        +

        { + let title = this.props.Document.GetT(KeyStore.Title, TextField); + if (title && title !== "") + return title.Data; + return ""; + }} SetValue={(value: string) => { + this.props.Document.SetData(KeyStore.Title, value, TextField); + return true; + }}>

          Date: Tue, 26 Feb 2019 12:32:52 -0500 Subject: extended CollectionTreeView to support drag and drop. updated CollectionSchemaView's drag drop --- src/client/util/DragManager.ts | 33 ++++++ .../views/collections/CollectionSchemaView.scss | 27 +++++ .../views/collections/CollectionSchemaView.tsx | 111 ++++++++------------- .../views/collections/CollectionTreeView.scss | 6 ++ .../views/collections/CollectionTreeView.tsx | 78 ++++++--------- src/client/views/nodes/DocumentView.tsx | 30 +++--- src/client/views/nodes/FieldView.tsx | 11 +- 7 files changed, 160 insertions(+), 136 deletions(-) (limited to 'src/client/views/collections/CollectionTreeView.tsx') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index aab23f91c..8adadee0f 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -1,4 +1,37 @@ import { DocumentDecorations } from "../views/DocumentDecorations"; +import { CollectionDockingView } from "../views/collections/CollectionDockingView"; +import { Document } from "../../fields/Document" +import { action } from "mobx"; + +export function setupDrag(_reference: React.RefObject, _dragDocument: Document) { + let onRowMove = action((e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + + document.removeEventListener("pointermove", onRowMove); + document.removeEventListener('pointerup', onRowUp); + DragManager.StartDrag(_reference.current!, { document: _dragDocument }); + }); + let onRowUp = action((e: PointerEvent): void => { + document.removeEventListener("pointermove", onRowMove); + document.removeEventListener('pointerup', onRowUp); + }); + let onItemDown = (e: React.PointerEvent) => { + // if (this.props.isSelected() || this.props.isTopMost) { + if (e.button == 0) { + e.stopPropagation(); + e.preventDefault(); + if (e.shiftKey) { + CollectionDockingView.Instance.StartOtherDrag(_reference.current!, _dragDocument); + } else { + document.addEventListener("pointermove", onRowMove); + document.addEventListener('pointerup', onRowUp); + } + } + //} + } + return onItemDown; +} export namespace DragManager { export function Root() { diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index f86094a98..995d60f74 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -1,4 +1,5 @@ + .collectionSchemaView-container { border-style: solid; box-sizing: border-box; @@ -14,6 +15,32 @@ border-radius: 2px; background-color: rgba(0,0,0,.5); } + .collectionSchemaView-previewRegion { + position: relative; + background: black; + float: left; + height: 100%; + } + .collectionSchemaView-previewHandle { + position: absolute; + height: 37px; + width: 20px; + z-index: 20; + right: 0; + top: 0; + background: Black ; + } + .collectionSchemaView-dividerDragger{ + position: relative; + background: black; + float: left; + height: 100%; + } + .collectionSchemaView-tableContainer { + position: relative; + float: left; + height: 100%; + } .ReactTable { position: absolute; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 79c688f6b..106a5c4f5 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -15,11 +15,11 @@ import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; -import { DragManager } from "../../util/DragManager"; -import { CollectionDockingView } from "./CollectionDockingView"; +import { setupDrag } from "../../util/DragManager"; // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 + @observer export class CollectionSchemaView extends CollectionViewBase { private _mainCont = React.createRef(); @@ -32,9 +32,6 @@ export class CollectionSchemaView extends CollectionViewBase { @observable _selectedIndex = 0; @observable _splitPercentage: number = 50; - - - renderCell = (rowProps: CellInfo) => { let props: FieldViewProps = { doc: rowProps.value[0], @@ -48,31 +45,9 @@ export class CollectionSchemaView extends CollectionViewBase { ) let reference = React.createRef(); - let onRowMove = action((e: PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); - - document.removeEventListener("pointermove", onRowMove); - document.removeEventListener('pointerup', onRowUp); - DragManager.StartDrag(reference.current!, { document: props.doc }); - }); - let onRowUp = action((e: PointerEvent): void => { - document.removeEventListener("pointermove", onRowMove); - document.removeEventListener('pointerup', onRowUp); - }); - let onRowDown = (e: React.PointerEvent) => { - if (this.props.isSelected() || this.props.isTopMost) { - if (e.shiftKey) { - CollectionDockingView.Instance.StartOtherDrag(reference.current!, props.doc); - e.stopPropagation(); - } else { - document.addEventListener("pointermove", onRowMove); - document.addEventListener('pointerup', onRowUp); - } - } - } + let onItemDown = setupDrag(reference, props.doc); return ( -
          +
          { let field = props.doc.Get(props.fieldKey); @@ -80,7 +55,8 @@ export class CollectionSchemaView extends CollectionViewBase { return field.ToScriptString(); } return field || ""; - }} SetValue={(value: string) => { + }} + SetValue={(value: string) => { let script = CompileScript(value); if (!script.compiled) { return false; @@ -97,7 +73,9 @@ export class CollectionSchemaView extends CollectionViewBase { } } return false; - }}>
          + }}> + +
          ) } @@ -216,44 +194,43 @@ export class CollectionSchemaView extends CollectionViewBase { } ) - let handle = !this.props.active() ? (null) : ( -
          ); + let previewHandle = !this.props.active() ? (null) : ( +
          ); return ( -
          - { - this._dividerX = r.entry.width; - this._panelHeight = r.entry.height; - })}> - {({ measureRef }) => -
          - ({ - Header: col.Name, - accessor: (doc: Document) => [doc, col], - id: col.Id - }))} - column={{ - ...ReactTableDefaults.column, - Cell: this.renderCell, - - }} - getTrProps={this.getTrProps} - /> -
          - } -           -
          -
          this.onDrop(e, {})} - ref={this.createDropTarget} - style={{ position: "relative", float: "left", width: `calc(${100 - this._splitPercentage}% - ${this.DIVIDER_WIDTH}px)`, height: "100%" }}> - {content} +
          +
          this.onDrop(e, {})} ref={this.createDropTarget}> + { + this._dividerX = r.entry.width; + this._panelHeight = r.entry.height; + })}> + {({ measureRef }) => +
          + ({ + Header: col.Name, + accessor: (doc: Document) => [doc, col], + id: col.Id + }))} + column={{ + ...ReactTableDefaults.column, + Cell: this.renderCell, + + }} + getTrProps={this.getTrProps} + /> +
          + } +           +
          +
          + {content} +
          + {previewHandle}
          - {handle}
          ) } diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 675fc6c53..c488e2894 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -25,4 +25,10 @@ li:before { .uncollapsed:before { content: '\25bc'; margin-right: 0.5em; +} + +.collectionTreeView-dropTarget { + border-style: solid; + box-sizing: border-box; + height:100%; } \ No newline at end of file diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 52e853bf7..64f4c0970 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -7,6 +7,9 @@ import React = require("react") import { TextField } from "../../../fields/TextField"; import { observable, action } from "mobx"; import "./CollectionTreeView.scss"; +import { setupDrag } from "../../util/DragManager"; +import { FieldWaiting } from "../../../fields/Field"; +import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; export interface TreeViewProps { document: Document; @@ -23,60 +26,39 @@ class TreeView extends React.Component { /** * 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. + * @param childDocument The document to render. */ - renderChild(document: Document) { - var children = document.GetT>(KeyStore.Data, ListField); - let title = document.GetT(KeyStore.Title, TextField); + renderChild(childDocument: Document) { + let reference = React.createRef(); - // 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}
          • - } - } + var children = childDocument.GetT>(KeyStore.Data, ListField); + let title = childDocument.GetT(KeyStore.Title, TextField); + let onItemDown = setupDrag(reference, childDocument); - // finally, if it's a normal document, then render it as such. - else { - return
        • {title.Data}
          • ; + if (title && title != FieldWaiting) { + let subView = !children || this.collapsed || children === FieldWaiting ? (null) : +
            + +
          ; + return
          +
        • this.collapsed = !this.collapsed)} > + {title.Data} + {subView} +
          • +
          } + return (null); } 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)); - // }) - - // return results; - } else { - return
          ; - } + return !children || children === FieldWaiting ? (null) : + (children.Data.map(value => +
          + {this.renderChild(value)} +
          ) + ) } } @@ -87,11 +69,11 @@ export class CollectionTreeView extends CollectionViewBase { render() { let titleStr = ""; let title = this.props.Document.GetT(KeyStore.Title, TextField); - if (title && title !== "") { + if (title && title !== FieldWaiting) { titleStr = title.Data; } return ( -
          +
          this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >

          {titleStr}

            { return; } - if (this.topMost) { - ContextMenu.Instance.clearItems() - ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) - ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) - } - else { + ContextMenu.Instance.clearItems() + 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: "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) + if (!this.topMost) { // DocumentViews should stop propagation of this event e.stopPropagation(); - - ContextMenu.Instance.clearItems(); - 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 }) - 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); } + + ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked }) + ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) + SelectionManager.SelectDoc(this, e.ctrlKey); } @computed get mainContent() { diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 1a9d325db..b71309bf5 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -52,11 +52,14 @@ export class FieldView extends React.Component { } else if (field instanceof NumberField) { return

            {field.Data}

            - } else if (field instanceof HtmlField) { + } + else if (field instanceof HtmlField) { return - } else if (field != FieldWaiting) { - return

            {field.GetValue}

            - } else + } + else if (field != FieldWaiting) { + return

            {JSON.stringify(field.GetValue())}

            + } + else return

            {"Waiting for server..."}

            } -- cgit v1.2.3-70-g09d2 From 6b61bc19641b3c10658aba00b9cc2cddb6254049 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Tue, 26 Feb 2019 16:04:30 -0500 Subject: merge --- src/client/views/collections/CollectionTreeView.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src/client/views/collections/CollectionTreeView.tsx') diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 3dbbb045a..273f312dd 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -28,6 +28,7 @@ class TreeView extends React.Component { @observable collapsed: boolean = false; + // TODO this will eventually come with functions for what to attach to them renderBullet(type: BulletType) { switch (type) { case BulletType.Collapsed: -- cgit v1.2.3-70-g09d2 From 11fe73b1f0ec63f7bf7d2341d787e3e20a66ab2b Mon Sep 17 00:00:00 2001 From: madelinegr Date: Tue, 26 Feb 2019 16:53:25 -0500 Subject: only bullets toggle clicks nowgit add . --- .../views/collections/CollectionTreeView.tsx | 50 ++++++++-------------- 1 file changed, 17 insertions(+), 33 deletions(-) (limited to 'src/client/views/collections/CollectionTreeView.tsx') diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 4075ff423..b6036b251 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -31,13 +31,16 @@ class TreeView extends React.Component { @observable collapsed: boolean = false; + // TODO this will eventually come with functions for what to attach to them renderBullet(type: BulletType) { + let onClicked = action(() => this.collapsed = !this.collapsed); + switch (type) { case BulletType.Collapsed: - return
            ▶
            + return
            ▶
            case BulletType.Collapsible: - return
            ▼
            + return
            ▼
            case BulletType.List: return
            —
            } @@ -53,13 +56,19 @@ class TreeView extends React.Component { let title = childDocument.GetT(KeyStore.Title, TextField); let onItemDown = setupDrag(reference, childDocument); - if (title && title != FieldWaiting) { + // 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. var subView = null; if (!this.collapsed) { subView = -
          • this.collapsed = true)} > +
          • {this.renderBullet(BulletType.Collapsible)} {title.Data}
              @@ -67,7 +76,7 @@ class TreeView extends React.Component {
            • } else { - subView =
          • this.collapsed = false)}> + subView =
          • {this.renderBullet(BulletType.Collapsed)} {title.Data}
            • @@ -76,48 +85,23 @@ class TreeView extends React.Component { return
            {subView}
            - - - // let subView = !children || this.collapsed || children === FieldWaiting ? (null) : - //
              - // - //
            ; - // return
            - //
          • this.collapsed = !this.collapsed)} > - // {title.Data} - // {subView} - //
            • - //
            - } - - // 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 !== "") { - } // finally, if it's a normal document, then render it as such. else { - return
          • + return
          • {this.renderBullet(BulletType.List)} { - let title = document.GetT(KeyStore.Title, TextField); + let title = childDocument.GetT(KeyStore.Title, TextField); if (title && title !== "") return title.Data; return ""; }} SetValue={(value: string) => { - document.SetData(KeyStore.Title, value, TextField); + childDocument.SetData(KeyStore.Title, value, TextField); return true; }}>
            • ; - - return (null); } } -- cgit v1.2.3-70-g09d2 From bd54526065428de2e931d7254776352199f6e55a Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 26 Feb 2019 16:56:04 -0500 Subject: fixed shift-dragging!! --- src/client/util/DragManager.ts | 8 ++-- src/client/views/Main.tsx | 33 +++-------------- .../views/collections/CollectionDockingView.tsx | 43 ++++------------------ .../views/collections/CollectionSchemaView.tsx | 4 +- .../views/collections/CollectionTreeView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 2 +- 6 files changed, 21 insertions(+), 71 deletions(-) (limited to 'src/client/views/collections/CollectionTreeView.tsx') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 8adadee0f..0d76d2640 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -3,14 +3,14 @@ import { CollectionDockingView } from "../views/collections/CollectionDockingVie import { Document } from "../../fields/Document" import { action } from "mobx"; -export function setupDrag(_reference: React.RefObject, _dragDocument: Document) { +export function setupDrag(_reference: React.RefObject, docFunc: () => Document) { let onRowMove = action((e: PointerEvent): void => { e.stopPropagation(); e.preventDefault(); document.removeEventListener("pointermove", onRowMove); document.removeEventListener('pointerup', onRowUp); - DragManager.StartDrag(_reference.current!, { document: _dragDocument }); + DragManager.StartDrag(_reference.current!, { document: docFunc() }); }); let onRowUp = action((e: PointerEvent): void => { document.removeEventListener("pointermove", onRowMove); @@ -20,10 +20,10 @@ export function setupDrag(_reference: React.RefObject, _dragDocu // if (this.props.isSelected() || this.props.isTopMost) { if (e.button == 0) { e.stopPropagation(); - e.preventDefault(); if (e.shiftKey) { - CollectionDockingView.Instance.StartOtherDrag(_reference.current!, _dragDocument); + CollectionDockingView.Instance.StartOtherDrag(docFunc(), e); } else { + e.preventDefault(); document.addEventListener("pointermove", onRowMove); document.addEventListener('pointerup', onRowUp); } diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 17dda899d..7ef4b6132 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -15,9 +15,8 @@ import { ServerUtils } from '../../server/ServerUtil'; import { MessageStore, DocumentTransfer } from '../../server/Message'; import { Transform } from '../util/Transform'; import { CollectionDockingView } from './collections/CollectionDockingView'; -import { FieldWaiting } from '../../fields/Field'; import { UndoManager } from '../util/UndoManager'; -import { DragManager } from '../util/DragManager'; +import { setupDrag } from '../util/DragManager'; configure({ @@ -30,7 +29,6 @@ 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() } @@ -98,28 +96,7 @@ Documents.initProtos(() => { let textRef = React.createRef(); let schemaRef = React.createRef(); let colRef = React.createRef(); - let curMoveListener: any = null - let onRowMove = (creator: any, dragRef: any) => action((e: PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); - document.removeEventListener("pointermove", curMoveListener); - document.removeEventListener('pointerup', onRowUp); - DragManager.StartDrag(dragRef.current!, { document: creator() }); - }); - let onRowUp = action((e: PointerEvent): void => { - document.removeEventListener("pointermove", curMoveListener); - document.removeEventListener('pointerup', onRowUp); - }); - let onRowDown = (creator: any, dragRef: any) => (e: React.PointerEvent) => { - if (e.shiftKey) { - CollectionDockingView.Instance.StartOtherDrag(dragRef.current!, creator()); - e.stopPropagation(); - } else { - document.addEventListener("pointermove", curMoveListener = onRowMove(creator, dragRef)); - document.addEventListener('pointerup', onRowUp); - } - } ReactDOM.render((
            {
            -
            +
            -
            +
          -
          +
          -
          +
          diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 5fb632469..3d7e46a01 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -10,7 +10,6 @@ import { FieldId, Opt, Field } from "../../../fields/Field"; import { KeyStore } from "../../../fields/KeyStore"; import { Utils } from "../../../Utils"; import { Server } from "../../Server"; -import { DragManager } from "../../util/DragManager"; import { undoBatch } from "../../util/UndoManager"; import { DocumentView } from "../nodes/DocumentView"; import "./CollectionDockingView.scss"; @@ -34,10 +33,6 @@ export class CollectionDockingView extends React.Component(); private _fullScreen: any = null; @@ -47,28 +42,8 @@ export class CollectionDockingView extends React.Component { }, button: e.button }) } @action @@ -98,7 +73,7 @@ export class CollectionDockingView extends React.Component { - if (this._dragDiv) { - this._dragDiv.removeChild(this._dragElement); - this._dragParent!.removeChild(this._dragFakeElement!); - this._dragParent!.appendChild(this._dragElement!); - DragManager.Root().removeChild(this._dragDiv); - this._dragDiv = null; - } tab.closeElement.off('click') //unbind the current click handler .click(function () { tab.contentItem.remove(); diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 106a5c4f5..03110a9c7 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -45,9 +45,9 @@ export class CollectionSchemaView extends CollectionViewBase { ) let reference = React.createRef(); - let onItemDown = setupDrag(reference, props.doc); + let onItemDown = setupDrag(reference, () => props.doc); return ( -
          +
          { let field = props.doc.Get(props.fieldKey); diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 64f4c0970..55c804337 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -33,7 +33,7 @@ class TreeView extends React.Component { var children = childDocument.GetT>(KeyStore.Data, ListField); let title = childDocument.GetT(KeyStore.Title, TextField); - let onItemDown = setupDrag(reference, childDocument); + let onItemDown = setupDrag(reference, () => childDocument); if (title && title != FieldWaiting) { let subView = !children || this.collapsed || children === FieldWaiting ? (null) : diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index c579b7142..feecde921 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -96,7 +96,7 @@ export class DocumentView extends React.Component { this._downX = e.clientX; this._downY = e.clientY; if (e.shiftKey && e.buttons === 1) { - CollectionDockingView.Instance.StartOtherDrag(this._mainCont.current!, this.props.Document); + CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e); e.stopPropagation(); } else { this._contextMenuCanOpen = true; -- cgit v1.2.3-70-g09d2 From 95dfe5a650d4d4f5fde890cabaeae949cb3aaf9d Mon Sep 17 00:00:00 2001 From: madelinegr Date: Tue, 26 Feb 2019 17:01:35 -0500 Subject: collection names can be renamed now --- .../views/collections/CollectionTreeView.tsx | 34 ++++++++++++---------- 1 file changed, 18 insertions(+), 16 deletions(-) (limited to 'src/client/views/collections/CollectionTreeView.tsx') diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index b6036b251..2b85645db 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -61,8 +61,20 @@ class TreeView extends React.Component { return
          ; } + // set up the title element, which will be rendered the same way for everyone + let titleElement = { + let title = childDocument.GetT(KeyStore.Title, TextField); + if (title && title !== "") + return title.Data; + return ""; + }} SetValue={(value: string) => { + childDocument.SetData(KeyStore.Title, value, TextField); + return true; + }} /> + // otherwise, check if it's a collection. - else if (children && children !== "") { + if (children && children !== "") { // if it's not collapsed, then render the full TreeView. var subView = null; @@ -70,7 +82,7 @@ class TreeView extends React.Component { subView =
        • {this.renderBullet(BulletType.Collapsible)} - {title.Data} + {titleElement}
          @@ -78,7 +90,7 @@ class TreeView extends React.Component { } else { subView =
        • {this.renderBullet(BulletType.Collapsed)} - {title.Data} + {titleElement}
          • } @@ -91,16 +103,7 @@ class TreeView extends React.Component { else { return
        • {this.renderBullet(BulletType.List)} - { - let title = childDocument.GetT(KeyStore.Title, TextField); - if (title && title !== "") - return title.Data; - return ""; - }} SetValue={(value: string) => { - childDocument.SetData(KeyStore.Title, value, TextField); - return true; - }}> + {titleElement}
          • ; } } @@ -138,15 +141,14 @@ export class CollectionTreeView extends CollectionViewBase { }} SetValue={(value: string) => { this.props.Document.SetData(KeyStore.Title, value, TextField); return true; - }}> -           + }} />
          -
          +
          ); } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From ef4cfe47ba73e63e91bb389ea8a55951baf20067 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Tue, 26 Feb 2019 18:21:52 -0500 Subject: collapsing things no longer make other siblings die --- .../views/collections/CollectionTreeView.tsx | 73 +++++++++++----------- 1 file changed, 37 insertions(+), 36 deletions(-) (limited to 'src/client/views/collections/CollectionTreeView.tsx') diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 25885cf49..924312d06 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -31,8 +31,6 @@ class TreeView extends React.Component { @observable collapsed: boolean = false; - - // TODO this will eventually come with functions for what to attach to them renderBullet(type: BulletType) { let onClicked = action(() => this.collapsed = !this.collapsed); @@ -47,48 +45,56 @@ class TreeView extends React.Component { } /** - * 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 childDocument The document to render. + * Renders the EditableView title element for placement into the tree. */ - renderChild(childDocument: Document) { - let reference = React.createRef(); - var children = childDocument.GetT>(KeyStore.Data, ListField); - let title = childDocument.GetT(KeyStore.Title, TextField); - let onItemDown = setupDrag(reference, () => childDocument); + renderTitle() { + let title = this.props.document.GetT(KeyStore.Title, TextField); // if the title hasn't loaded, immediately return the div if (!title || title === "") { - return
          ; + return
          ; } - // set up the title element, which will be rendered the same way for everyone - let titleElement = { - let title = childDocument.GetT(KeyStore.Title, TextField); + let title = this.props.document.GetT(KeyStore.Title, TextField); if (title && title !== "") return title.Data; return ""; }} SetValue={(value: string) => { - childDocument.SetData(KeyStore.Title, value, TextField); + this.props.document.SetData(KeyStore.Title, value, TextField); return true; }} /> + } + + render() { + var children = this.props.document.GetT>(KeyStore.Data, ListField); + + let reference = React.createRef(); + let onItemDown = setupDrag(reference, () => this.props.document); + let titleElement = this.renderTitle(); - // otherwise, check if it's a collection. - if (children && children !== "") { - // if it's not collapsed, then render the full TreeView. + // check if this document is a collection + if (children && children !== FieldWaiting) { var subView = null; + // render all children elements + let childrenElement = (children.Data.map(value => + ) + ) + + // if uncollapsed, then add the children elements if (!this.collapsed) { subView = -
        • +
        • {this.renderBullet(BulletType.Collapsible)} {titleElement} -
            - +
              + {childrenElement}
            } else { - subView =
          • + subView =
          • {this.renderBullet(BulletType.Collapsed)} {titleElement}
            • @@ -99,24 +105,14 @@ class TreeView extends React.Component {
          • } - // finally, if it's a normal document, then render it as such. + // otherwise this is a normal leaf node else { - return
        • + return
        • {this.renderBullet(BulletType.List)} {titleElement}
          • ; } } - - render() { - var children = this.props.document.GetT>(KeyStore.Data, ListField); - return !children || children === FieldWaiting ? (null) : - (children.Data.map(value => -
          - {this.renderChild(value)} -
          ) - ) - } } @@ -129,6 +125,13 @@ export class CollectionTreeView extends CollectionViewBase { if (title && title !== FieldWaiting) { titleStr = title.Data; } + + var children = this.props.Document.GetT>(KeyStore.Data, ListField); + let childrenElement = !children || children === FieldWaiting ? (null) : + (children.Data.map(value => + ) + ) + return (
          this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}>

          @@ -144,9 +147,7 @@ export class CollectionTreeView extends CollectionViewBase { }} />

            - + {childrenElement}
          ); -- cgit v1.2.3-70-g09d2 From 33809739a0a24a256d6a1b30bf237fc8bd749db3 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Tue, 26 Feb 2019 18:59:56 -0500 Subject: set up infrastructure for deletedoc --- src/client/views/collections/CollectionTreeView.scss | 10 ++++++++++ src/client/views/collections/CollectionTreeView.tsx | 13 ++++++++++--- 2 files changed, 20 insertions(+), 3 deletions(-) (limited to 'src/client/views/collections/CollectionTreeView.tsx') diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 75feebbbe..f8d580a7b 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -24,4 +24,14 @@ li { border-style: solid; box-sizing: border-box; height: 100%; +} + +.docContainer { + display: inline-table; +} + +.delete-button { + color: #999999; + float: right; + margin-left: 1em; } \ No newline at end of file diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 924312d06..b075737d2 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -14,6 +14,7 @@ import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; export interface TreeViewProps { document: Document; + deleteDoc: (doc: Document) => void; } export enum BulletType { @@ -31,6 +32,10 @@ class TreeView extends React.Component { @observable collapsed: boolean = false; + delete() { + this.props.deleteDoc; + } + renderBullet(type: BulletType) { let onClicked = action(() => this.collapsed = !this.collapsed); @@ -55,7 +60,7 @@ class TreeView extends React.Component { return
          ; } - return { let title = this.props.document.GetT(KeyStore.Title, TextField); if (title && title !== "") @@ -65,6 +70,8 @@ class TreeView extends React.Component { this.props.document.SetData(KeyStore.Title, value, TextField); return true; }} /> +
          x
          +
          } render() { @@ -80,7 +87,7 @@ class TreeView extends React.Component { // render all children elements let childrenElement = (children.Data.map(value => - ) + console.log("test")} />) ) // if uncollapsed, then add the children elements @@ -129,7 +136,7 @@ export class CollectionTreeView extends CollectionViewBase { var children = this.props.Document.GetT>(KeyStore.Data, ListField); let childrenElement = !children || children === FieldWaiting ? (null) : (children.Data.map(value => - ) + console.log("test")} />) ) return ( -- cgit v1.2.3-70-g09d2 From d9d32abedf7163a2683798879e668dc92966caa6 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Sat, 2 Mar 2019 17:37:19 -0500 Subject: delete is working --- src/client/views/collections/CollectionTreeView.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) (limited to 'src/client/views/collections/CollectionTreeView.tsx') diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index b075737d2..bb1b49f4f 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -32,8 +32,10 @@ class TreeView extends React.Component { @observable collapsed: boolean = false; - delete() { - this.props.deleteDoc; + delete = () => { + if (this) { + this.props.deleteDoc(this.props.document); + } } renderBullet(type: BulletType) { @@ -126,6 +128,14 @@ class TreeView extends React.Component { @observer export class CollectionTreeView extends CollectionViewBase { + @action + remove(document: Document) { + var children = this.props.Document.GetT>(KeyStore.Data, ListField); + if (children && children !== FieldWaiting) { + children.Data.splice(children.Data.indexOf(document), 1); + } + } + render() { let titleStr = ""; let title = this.props.Document.GetT(KeyStore.Title, TextField); @@ -136,7 +146,7 @@ export class CollectionTreeView extends CollectionViewBase { var children = this.props.Document.GetT>(KeyStore.Data, ListField); let childrenElement = !children || children === FieldWaiting ? (null) : (children.Data.map(value => - console.log("test")} />) + this.remove(value)} />) ) return ( -- cgit v1.2.3-70-g09d2 From e67ea3e4df4af7b85c213baf2fc2fa0c695c3b8b Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sat, 2 Mar 2019 22:46:48 -0500 Subject: Minor fixes --- .../views/collections/CollectionTreeView.tsx | 31 ++++++++++++---------- 1 file changed, 17 insertions(+), 14 deletions(-) (limited to 'src/client/views/collections/CollectionTreeView.tsx') diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index bb1b49f4f..8b06d9ac4 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -33,8 +33,15 @@ class TreeView extends React.Component { collapsed: boolean = false; delete = () => { - if (this) { - this.props.deleteDoc(this.props.document); + this.props.deleteDoc(this.props.document); + } + + + @action + remove = (document: Document) => { + var children = this.props.document.GetT>(KeyStore.Data, ListField); + if (children && children !== FieldWaiting) { + children.Data.splice(children.Data.indexOf(document), 1); } } @@ -85,15 +92,14 @@ class TreeView extends React.Component { // check if this document is a collection if (children && children !== FieldWaiting) { - var subView = null; - - // render all children elements - let childrenElement = (children.Data.map(value => - console.log("test")} />) - ) + let subView; // if uncollapsed, then add the children elements if (!this.collapsed) { + // render all children elements + let childrenElement = (children.Data.map(value => + ) + ) subView =
        • {this.renderBullet(BulletType.Collapsible)} @@ -129,7 +135,7 @@ class TreeView extends React.Component { export class CollectionTreeView extends CollectionViewBase { @action - remove(document: Document) { + remove = (document: Document) => { var children = this.props.Document.GetT>(KeyStore.Data, ListField); if (children && children !== FieldWaiting) { children.Data.splice(children.Data.indexOf(document), 1); @@ -146,7 +152,7 @@ export class CollectionTreeView extends CollectionViewBase { var children = this.props.Document.GetT>(KeyStore.Data, ListField); let childrenElement = !children || children === FieldWaiting ? (null) : (children.Data.map(value => - this.remove(value)} />) + ) ) return ( @@ -154,10 +160,7 @@ export class CollectionTreeView extends CollectionViewBase {

          { - let title = this.props.Document.GetT(KeyStore.Title, TextField); - if (title && title !== "") - return title.Data; - return ""; + return this.props.Document.Title; }} SetValue={(value: string) => { this.props.Document.SetData(KeyStore.Title, value, TextField); return true; -- cgit v1.2.3-70-g09d2