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 From 79c86272093efc8416619575280f178982f5c449 Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 25 Feb 2019 17:36:12 -0500 Subject: tweaks --- src/client/views/collections/CollectionSchemaView.scss | 5 +++-- src/client/views/collections/CollectionSchemaView.tsx | 14 ++++++++------ 2 files changed, 11 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 74aa20e8b..0bd5a2ed3 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -38,6 +38,7 @@ } .rt-tr-group { direction: ltr; + max-height: 44px; } .rt-td { border-width: 1; @@ -61,13 +62,13 @@ background:grey; } .ReactTable .rt-th, .ReactTable .rt-td { - max-height: 75px; + max-height: 44; + padding: 3px 7px; } .ReactTable .rt-tbody .rt-tr-group:last-child { border-bottom: grey; border-bottom-style: solid; border-bottom-width: 1; - height: auto; } .documentView-node:first-child { background: grey; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index d5b82cbb6..38217d7c4 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -61,12 +61,14 @@ export class CollectionSchemaView extends CollectionViewBase { document.removeEventListener('pointerup', onRowUp); }); let onRowDown = (e: React.PointerEvent) => { - if (e.shiftKey) { - CollectionDockingView.Instance.StartOtherDrag(reference.current!, props.doc); - e.stopPropagation(); - } else { - document.addEventListener("pointermove", onRowMove); - document.addEventListener('pointerup', onRowUp); + 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); + } } } return ( -- cgit v1.2.3-70-g09d2 From de0d0a38fbd30719e381f4f560c19257f0308f0e Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Mon, 25 Feb 2019 18:01:01 -0500 Subject: Fixed docking thing --- src/client/views/collections/CollectionDockingView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index a0f457ef2..45e283db5 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -235,11 +235,11 @@ export class CollectionDockingView extends React.Component Date: Mon, 25 Feb 2019 21:21:14 -0500 Subject: fixed some small things --- src/client/views/collections/CollectionFreeFormView.scss | 2 +- src/client/views/collections/CollectionSchemaView.scss | 2 +- src/client/views/collections/CollectionSchemaView.tsx | 4 ++-- src/client/views/nodes/FormattedTextBox.scss | 6 ++++-- 4 files changed, 8 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index d583a8218..7dd6223bc 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -2,7 +2,7 @@ ::-webkit-scrollbar { -webkit-appearance: none; - width: 10px; + height:5px; } ::-webkit-scrollbar-thumb { border-radius: 5px; diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 0bd5a2ed3..9a7165209 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -7,7 +7,7 @@ height: 100%; ::-webkit-scrollbar { -webkit-appearance: none; - width: 10px; + width: 5px; } ::-webkit-scrollbar-thumb { border-radius: 5px; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 38217d7c4..79c688f6b 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -116,8 +116,8 @@ export class CollectionSchemaView extends CollectionViewBase { } }), style: { - background: rowInfo.index == this._selectedIndex ? "#00afec" : "white", - color: rowInfo.index == this._selectedIndex ? "white" : "black" + background: rowInfo.index == this._selectedIndex ? "lightGray" : "white", + //color: rowInfo.index == this._selectedIndex ? "white" : "black" } }; } diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss index 0389a3f85..f06fdae24 100644 --- a/src/client/views/nodes/FormattedTextBox.scss +++ b/src/client/views/nodes/FormattedTextBox.scss @@ -9,8 +9,10 @@ } .formattedTextBox-cont { - background: beige; - padding: 0; + background: rgb(218, 215, 215); + padding: 1; + border: black; + border-width: 10; overflow-y: scroll; overflow-x: hidden; color: initial; -- cgit v1.2.3-70-g09d2 From 245904b619675cda216218e8d38d0970b7b6b249 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 25 Feb 2019 22:00:22 -0500 Subject: for mac --- src/client/documents/Documents.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 15ecfbfe6..9770e5cdc 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -130,13 +130,13 @@ export namespace Documents {
          ` + ImageBox.LayoutString() + `
          -
          ` +
          ` + FormattedTextBox.LayoutString("CaptionKey") + `
          ` }; function FixedCaption() { return `
          -
          ` +
          ` + FormattedTextBox.LayoutString("CaptionKey") + `
          ` }; -- cgit v1.2.3-70-g09d2 From 56cecd09e098e39592c1ace0da7c73f5d080c0a7 Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 26 Feb 2019 10:18:04 -0500 Subject: scrollbar redux --- src/client/views/collections/CollectionFreeFormView.scss | 3 ++- src/client/views/collections/CollectionSchemaView.scss | 5 +++-- 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index 7dd6223bc..737f28318 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -3,9 +3,10 @@ ::-webkit-scrollbar { -webkit-appearance: none; height:5px; + width:5px; } ::-webkit-scrollbar-thumb { - border-radius: 5px; + border-radius: 2px; background-color: rgba(0,0,0,.5); } diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 9a7165209..f86094a98 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -7,10 +7,11 @@ height: 100%; ::-webkit-scrollbar { -webkit-appearance: none; - width: 5px; + height:5px; + width:5px; } ::-webkit-scrollbar-thumb { - border-radius: 5px; + border-radius: 2px; background-color: rgba(0,0,0,.5); } -- cgit v1.2.3-70-g09d2 From 3ff149e05a76fa0a0ace32a1b0c9876c4850aa2a Mon Sep 17 00:00:00 2001 From: bob 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') 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 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') 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 04ee2ad6e7ca887c3cfc7277c4b382f936c0fa6d Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 26 Feb 2019 17:32:07 -0500 Subject: can switch into drag-as-dockingframe using shift after drag starts. changed scrollbars globally . --- src/client/util/DragManager.ts | 18 ++++++++++++++---- src/client/views/Main.scss | 11 ++++++++++- .../views/collections/CollectionFreeFormView.scss | 10 ---------- src/client/views/collections/CollectionSchemaView.scss | 9 --------- 4 files changed, 24 insertions(+), 24 deletions(-) (limited to 'src') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 0d76d2640..6b4b8ca57 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -2,6 +2,7 @@ import { DocumentDecorations } from "../views/DocumentDecorations"; import { CollectionDockingView } from "../views/collections/CollectionDockingView"; import { Document } from "../../fields/Document" import { action } from "mobx"; +import { DocumentView } from "../views/nodes/DocumentView"; export function setupDrag(_reference: React.RefObject, docFunc: () => Document) { let onRowMove = action((e: PointerEvent): void => { @@ -23,7 +24,6 @@ export function setupDrag(_reference: React.RefObject, docFunc: if (e.shiftKey) { CollectionDockingView.Instance.StartOtherDrag(docFunc(), e); } else { - e.preventDefault(); document.addEventListener("pointermove", onRowMove); document.addEventListener('pointerup', onRowUp); } @@ -139,22 +139,32 @@ export namespace DragManager { e.preventDefault(); x += e.movementX; y += e.movementY; + if (e.shiftKey) { + abortDrag(); + const docView: DocumentView = dragData["documentView"]; + const doc: Document = docView ? docView.props.Document : dragData["document"]; + CollectionDockingView.Instance.StartOtherDrag(doc, { pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: 0 }); + } dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`; }; - const upHandler = (e: PointerEvent) => { + + const abortDrag = () => { document.removeEventListener("pointermove", moveHandler, true); document.removeEventListener("pointerup", upHandler); - FinishDrag(dragElement, e, dragData, options); + dragDiv.removeChild(dragElement); if (hideSource && !wasHidden) { ele.hidden = false; } + } + const upHandler = (e: PointerEvent) => { + abortDrag(); + FinishDrag(dragElement, e, dragData, options); }; document.addEventListener("pointermove", moveHandler, true); document.addEventListener("pointerup", upHandler); } function FinishDrag(dragEle: HTMLElement, e: PointerEvent, dragData: { [index: string]: any }, options?: DragOptions) { - dragDiv.removeChild(dragEle); const target = document.elementFromPoint(e.x, e.y); if (!target) { return; diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index e73f62904..6540af5b2 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -28,4 +28,13 @@ h1 { p { margin: 0px; padding: 0px; -} \ No newline at end of file +} +::-webkit-scrollbar { + -webkit-appearance: none; + height:5px; + width:5px; +} +::-webkit-scrollbar-thumb { + border-radius: 2px; + background-color: rgba(0,0,0,.5); +} diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index 737f28318..e86295c26 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -1,15 +1,5 @@ .collectionfreeformview-container { - ::-webkit-scrollbar { - -webkit-appearance: none; - height:5px; - width:5px; - } - ::-webkit-scrollbar-thumb { - border-radius: 2px; - background-color: rgba(0,0,0,.5); - } - .collectionfreeformview > .jsx-parser{ position:absolute; height: 100%; diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 995d60f74..d40e6d314 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -6,15 +6,6 @@ position: absolute; width: 100%; height: 100%; - ::-webkit-scrollbar { - -webkit-appearance: none; - height:5px; - width:5px; - } - ::-webkit-scrollbar-thumb { - border-radius: 2px; - background-color: rgba(0,0,0,.5); - } .collectionSchemaView-previewRegion { position: relative; background: black; -- cgit v1.2.3-70-g09d2