aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/DragManager.ts33
-rw-r--r--src/client/views/collections/CollectionSchemaView.scss27
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx111
-rw-r--r--src/client/views/collections/CollectionTreeView.scss6
-rw-r--r--src/client/views/collections/CollectionTreeView.tsx78
-rw-r--r--src/client/views/nodes/DocumentView.tsx30
-rw-r--r--src/client/views/nodes/FieldView.tsx11
7 files changed, 160 insertions, 136 deletions
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<HTMLDivElement>, _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<HTMLDivElement>();
@@ -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 {
<FieldView {...props} />
)
let reference = React.createRef<HTMLDivElement>();
- 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 (
- <div onPointerDown={onRowDown} ref={reference}>
+ <div onPointerDown={onItemDown} ref={reference}>
<EditableView contents={contents}
height={36} GetValue={() => {
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;
- }}></EditableView></div>
+ }}>
+ </EditableView>
+ </div>
)
}
@@ -216,44 +194,43 @@ export class CollectionSchemaView extends CollectionViewBase {
}
</Measure>
)
- let handle = !this.props.active() ? (null) : (
- <div style={{ position: "absolute", height: "37px", width: "20px", zIndex: 20, right: 0, top: 0, background: "Black" }} onPointerDown={this.onExpanderDown} />);
+ let previewHandle = !this.props.active() ? (null) : (
+ <div className="collectionSchemaView-previewHandle" onPointerDown={this.onExpanderDown} />);
return (
- <div onPointerDown={this.onPointerDown} ref={this._mainCont} className="collectionSchemaView-container" style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
- <Measure onResize={action((r: any) => {
- this._dividerX = r.entry.width;
- this._panelHeight = r.entry.height;
- })}>
- {({ measureRef }) =>
- <div ref={measureRef} className="collectionSchemaView-tableContainer" style={{ position: "relative", float: "left", width: `${this._splitPercentage}%`, height: "100%" }}>
- <ReactTable
- data={children}
- pageSize={children.length}
- page={0}
- showPagination={false}
- columns={columns.map(col => ({
- Header: col.Name,
- accessor: (doc: Document) => [doc, col],
- id: col.Id
- }))}
- column={{
- ...ReactTableDefaults.column,
- Cell: this.renderCell,
-
- }}
- getTrProps={this.getTrProps}
- />
- </div>
- }
- </Measure>
- <div className="collectionSchemaView-dividerDragger" style={{ position: "relative", background: "black", float: "left", width: `${this.DIVIDER_WIDTH}px`, height: "100%" }} onPointerDown={this.onDividerDown} />
- <div className="collectionSchemaView-previewRegion"
- onDrop={(e: React.DragEvent) => this.onDrop(e, {})}
- ref={this.createDropTarget}
- style={{ position: "relative", float: "left", width: `calc(${100 - this._splitPercentage}% - ${this.DIVIDER_WIDTH}px)`, height: "100%" }}>
- {content}
+ <div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} ref={this._mainCont} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
+ <div className="collectionSchemaView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget}>
+ <Measure onResize={action((r: any) => {
+ this._dividerX = r.entry.width;
+ this._panelHeight = r.entry.height;
+ })}>
+ {({ measureRef }) =>
+ <div ref={measureRef} className="collectionSchemaView-tableContainer" style={{ width: `${this._splitPercentage}%` }}>
+ <ReactTable
+ data={children}
+ pageSize={children.length}
+ page={0}
+ showPagination={false}
+ columns={columns.map(col => ({
+ Header: col.Name,
+ accessor: (doc: Document) => [doc, col],
+ id: col.Id
+ }))}
+ column={{
+ ...ReactTableDefaults.column,
+ Cell: this.renderCell,
+
+ }}
+ getTrProps={this.getTrProps}
+ />
+ </div>
+ }
+ </Measure>
+ <div className="collectionSchemaView-dividerDragger" onPointerDown={this.onDividerDown} style={{ width: `${this.DIVIDER_WIDTH}px` }} />
+ <div className="collectionSchemaView-previewRegion" style={{ width: `calc(${100 - this._splitPercentage}% - ${this.DIVIDER_WIDTH}px)` }}>
+ {content}
+ </div>
+ {previewHandle}
</div>
- {handle}
</div >
)
}
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<TreeViewProps> {
/**
* 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<ListField<Document>>(KeyStore.Data, ListField);
- let title = document.GetT<TextField>(KeyStore.Title, TextField);
+ renderChild(childDocument: Document) {
+ let reference = React.createRef<HTMLDivElement>();
- // if the title hasn't loaded, immediately return the div
- if (!title || title === "<Waiting>") {
- return <div key={document.Id}></div>;
- }
-
- // otherwise, check if it's a collection.
- else if (children && children !== "<Waiting>") {
- // if it's not collapsed, then render the full TreeView.
- if (!this.collapsed) {
- return (
- <li className="uncollapsed" key={document.Id} onClick={action(() => this.collapsed = true)} >
- {title.Data}
- <ul key={document.Id}>
- <TreeView
- document={document}
- />
- </ul>
- </li>
- );
- } else {
- return <li className="collapsed" key={document.Id} onClick={action(() => this.collapsed = false)}>{title.Data}</li>
- }
- }
+ var children = childDocument.GetT<ListField<Document>>(KeyStore.Data, ListField);
+ let title = childDocument.GetT<TextField>(KeyStore.Title, TextField);
+ let onItemDown = setupDrag(reference, childDocument);
- // finally, if it's a normal document, then render it as such.
- else {
- return <li key={document.Id}>{title.Data}</li>;
+ if (title && title != FieldWaiting) {
+ let subView = !children || this.collapsed || children === FieldWaiting ? (null) :
+ <ul>
+ <TreeView document={childDocument} />
+ </ul>;
+ return <div className="treeViewItem-container" onPointerDown={onItemDown} ref={reference}>
+ <li className={!children ? "leaf" : this.collapsed ? "collapsed" : "uncollapsed"}
+ onClick={action(() => this.collapsed = !this.collapsed)} >
+ {title.Data}
+ {subView}
+ </li>
+ </div>
}
+ return (null);
}
render() {
var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
-
- if (children && children !== "<Waiting>") {
- return (<div>
- {children.Data.map(value => this.renderChild(value))}
- </div>)
- // 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 <div></div>;
- }
+ return !children || children === FieldWaiting ? (null) :
+ (children.Data.map(value =>
+ <div key={value.Id}>
+ {this.renderChild(value)}
+ </div>)
+ )
}
}
@@ -87,11 +69,11 @@ export class CollectionTreeView extends CollectionViewBase {
render() {
let titleStr = "";
let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField);
- if (title && title !== "<Waiting>") {
+ if (title && title !== FieldWaiting) {
titleStr = title.Data;
}
return (
- <div>
+ <div className="collectionTreeView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
<h3>{titleStr}</h3>
<ul className="no-indent">
<TreeView
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 87f2e205b..c579b7142 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -174,26 +174,22 @@ export class DocumentView extends React.Component<DocumentViewProps> {
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<FieldViewProps> {
}
else if (field instanceof NumberField) {
return <p>{field.Data}</p>
- } else if (field instanceof HtmlField) {
+ }
+ else if (field instanceof HtmlField) {
return <WebView {...this.props} />
- } else if (field != FieldWaiting) {
- return <p>{field.GetValue}</p>
- } else
+ }
+ else if (field != FieldWaiting) {
+ return <p>{JSON.stringify(field.GetValue())}</p>
+ }
+ else
return <p> {"Waiting for server..."} </p>
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 11:12:56 +0000