aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/DragManager.ts6
-rw-r--r--src/client/views/DocumentDecorations.tsx19
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx110
3 files changed, 62 insertions, 73 deletions
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 337ec855a..6d5fe12a7 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -1,3 +1,4 @@
+import { DocumentDecorations } from "../views/DocumentDecorations";
export namespace DragManager {
export function Root() {
@@ -59,10 +60,8 @@ export namespace DragManager {
};
}
-
- let _lastPointerX: number = 0;
- let _lastPointerY: number = 0;
export function StartDrag(ele: HTMLElement, dragData: { [id: string]: any }, options: DragOptions) {
+ DocumentDecorations.Instance.Hidden = true;
if (!dragDiv) {
dragDiv = document.createElement("div");
DragManager.Root().appendChild(dragDiv);
@@ -131,5 +130,6 @@ export namespace DragManager {
}
}));
options.handlers.dragComplete({});
+ DocumentDecorations.Instance.Hidden = false;
}
} \ No newline at end of file
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 770433e27..dccab1dc5 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -1,9 +1,8 @@
-import { observable, computed } from "mobx";
+import { observable, computed, action } from "mobx";
import React = require("react");
import { SelectionManager } from "../util/SelectionManager";
import { observer } from "mobx-react";
import './DocumentDecorations.scss'
-import { CollectionFreeFormView } from "./collections/CollectionFreeFormView";
import { KeyStore } from '../../fields/KeyStore'
import { NumberField } from "../../fields/NumberField";
@@ -12,7 +11,7 @@ export class DocumentDecorations extends React.Component {
static Instance: DocumentDecorations
private _resizer = ""
private _isPointerDown = false;
- @observable private _opacity = 1;
+ @observable private _hidden = false;
constructor(props: Readonly<{}>) {
super(props)
@@ -39,14 +38,10 @@ export class DocumentDecorations extends React.Component {
}, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE });
}
- @computed
- get opacity(): number {
- return this._opacity
- }
- set opacity(o: number) {
- this._opacity = Math.min(Math.max(0, o), 1)
- }
+ @computed
+ public get Hidden() { return this._hidden; }
+ public set Hidden(value: boolean) { this._hidden = value; }
onPointerDown = (e: React.PointerEvent): void => {
e.stopPropagation();
@@ -147,13 +142,15 @@ export class DocumentDecorations extends React.Component {
render() {
var bounds = this.Bounds;
+ if (this.Hidden) {
+ return (null);
+ }
return (
<div id="documentDecorations-container" style={{
width: (bounds.r - bounds.x + 40) + "px",
height: (bounds.b - bounds.y + 40) + "px",
left: bounds.x - 20,
top: bounds.y - 20,
- opacity: this.opacity
}}>
<div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
<div id="documentDecorations-topResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 597a97222..fa37e0e76 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -2,7 +2,6 @@ import React = require("react")
import { action, observable } from "mobx";
import { observer } from "mobx-react";
import Measure from "react-measure";
-import SplitPane from "react-split-pane";
import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table";
import "react-table/react-table.css";
import { Document } from "../../../fields/Document";
@@ -15,7 +14,6 @@ import { DocumentView } from "../nodes/DocumentView";
import { FieldView, FieldViewProps } from "../nodes/FieldView";
import "./CollectionSchemaView.scss";
import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
-import { relative } from "path";
@observer
export class CollectionSchemaView extends CollectionViewBase {
@@ -67,6 +65,7 @@ export class CollectionSchemaView extends CollectionViewBase {
)
}
+
private getTrProps: ComponentPropsGetterR = (state, rowInfo) => {
const that = this;
if (!rowInfo) {
@@ -75,8 +74,7 @@ export class CollectionSchemaView extends CollectionViewBase {
return {
onClick: action((e: React.MouseEvent, handleOriginal: Function) => {
that.selectedIndex = rowInfo.index;
- const doc: Document = rowInfo.original;
- console.log("Row clicked: ", doc.Title)
+ this._splitPercentage += 0.05; // bcz - ugh - needed to force Measure to do its thing and call onResize
if (handleOriginal) {
handleOriginal()
@@ -118,70 +116,64 @@ export class CollectionSchemaView extends CollectionViewBase {
}
}
+ innerScreenToLocal(tx: number, ty: number) {
+ return () => this.props.ScreenToLocalTransform().transform(new Transform(-tx - 5 - COLLECTION_BORDER_WIDTH, -ty - COLLECTION_BORDER_WIDTH, 1))
+ }
- @observable
- private _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView
+ @observable _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView
+ @observable _dividerX = 0;
+ @observable _dividerY = 0;
render() {
- const { Document: Document, fieldKey: fieldKey } = this.props;
- const children = Document.GetList<Document>(fieldKey, []);
- const columns = Document.GetList(KeyStore.ColumnsKey,
- [KeyStore.Title, KeyStore.Data, KeyStore.Author])
- let content = <div></div>
+ const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author])
+ const children = this.props.Document.GetList<Document>(this.props.fieldKey, []);
+ const selected = children.length > this.selectedIndex ? children[this.selectedIndex] : undefined;
let me = this;
- if (this.selectedIndex != -1) {
- content = (
+ let content = this.selectedIndex == -1 || !selected ? (null) : (
+ <Measure onResize={action((r: any) => this._parentScaling = r.entry.width / selected.GetNumber(KeyStore.NativeWidth, r.entry.width))}>
+ {({ measureRef }) =>
+ <div ref={measureRef}>
+ <DocumentView Document={selected}
+ AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
+ ScreenToLocalTransform={this.innerScreenToLocal(me._dividerX, me._dividerY)}//TODO This should probably be an actual transform
+ Scaling={this._parentScaling}
+ isTopMost={false}
+ ContainingCollectionView={me} />
+ </div>
+ }
+ </Measure>
+ )
+ return (
+ <div onPointerDown={this.onPointerDown} ref={this._mainCont} className="collectionSchemaView-container" style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
<Measure onResize={action((r: any) => {
- var doc = children[this.selectedIndex];
- var n = doc.GetNumber(KeyStore.NativeWidth, 0);
- if (n > 0 && r.entry.width > 0) {
- this._parentScaling = r.entry.width / n;
- }
+ this._dividerX = r.entry.width;
})}>
{({ measureRef }) =>
- <div ref={measureRef}>
- <DocumentView Document={children[this.selectedIndex]}
- AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
- ScreenToLocalTransform={() => Transform.Identity}//TODO This should probably be an actual transform
- Scaling={this._parentScaling}
- isTopMost={false}
- ContainingCollectionView={me} />
+ <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 => {
+ return (
+ {
+ Header: col.Name,
+ accessor: (doc: Document) => [doc, col],
+ id: col.Id
+ })
+ })}
+ column={{
+ ...ReactTableDefaults.column,
+ Cell: this.renderCell
+ }}
+ getTrProps={this.getTrProps}
+ />
</div>
}
</Measure>
- )
- }
- let nativeWidth = Document.GetNumber(KeyStore.NativeWidth, 0);
- return (
- <div onPointerDown={this.onPointerDown} ref={this._mainCont} className="collectionSchemaView-container"
- style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
- <div 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 => {
- return (
- {
- Header: col.Name,
- accessor: (doc: Document) => [doc, col],
- id: col.Id
- })
- })}
- column={{
- ...ReactTableDefaults.column,
- Cell: this.renderCell
- }}
- getTrProps={this.getTrProps}
- />
- </div>
- <div onPointerDown={this.onDividerDown} style={{ position: "relative", background: "black", float: "left", width: "5px", height: "100%" }}>
-
- </div>
- <div style={{ position: "relative", float: "left", width: `calc(${100 - this._splitPercentage}% - 5px)`, height: "100%" }}>
- <Measure onResize={action((r: any) => this._parentScaling = nativeWidth > 0 ? r.entry.width / nativeWidth : 1)}>
- {({ measureRef }) => <div ref={measureRef}> {content} </div>}
- </Measure>
+ <div className="collectionSchemaView-dividerDragger" style={{ position: "relative", background: "black", float: "left", width: "5px", height: "100%" }} onPointerDown={this.onDividerDown} />
+ <div className="collectionSchemaView-previewRegion" style={{ position: "relative", float: "left", width: `calc(${100 - this._splitPercentage}% - 5px)`, height: "100%" }}>
+ {content}
</div>
</div >
)
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 23:34:12 +0000