fixed dragdrop issue. improved selection in schema views, but not fixed fully.

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 >
         )