flexLayout fixes, but flexlayout seems hopelessly broken once it gets scaled.

4 files changed, 28 insertions, 19 deletions

diff --git a/src/Main.tsx b/src/Main.tsx
index 566216373..c636ee42e 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -61,7 +61,7 @@ runInAction(() => {
     let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
         x: 650, y: 500, width: 600, height: 600
     });
-    let docset2 = new Array<Document>(doc1, doc4, doc3);
+    let docset2 = new Array<Document>(doc4, doc1, doc3);
     let doc6 = Documents.DockDocument(docset2, {
         x: 350, y: 100
     });
diff --git a/src/util/DragManager.ts b/src/util/DragManager.ts
index e523408a3..ca5b6c0ea 100644
--- a/src/util/DragManager.ts
+++ b/src/util/DragManager.ts
@@ -1,7 +1,7 @@
-import {Opt} from "../fields/Field";
-import {DocumentView} from "../views/nodes/DocumentView";
-import {DocumentDecorations} from "../DocumentDecorations";
-import {SelectionManager} from "./SelectionManager";
+import { Opt } from "../fields/Field";
+import { DocumentView } from "../views/nodes/DocumentView";
+import { DocumentDecorations } from "../DocumentDecorations";
+import { SelectionManager } from "./SelectionManager";
 
 export namespace DragManager {
     export let rootId = "root";
@@ -33,7 +33,7 @@ export namespace DragManager {
     }
 
     export class DropEvent {
-        constructor(readonly x: number, readonly y: number, readonly data: {[ id: string ]: any}) {}
+        constructor(readonly x: number, readonly y: number, readonly data: { [ id: string ]: any }) { }
     }
 
     export interface DropHandlers {
@@ -56,7 +56,10 @@ export namespace DragManager {
         };
     }
 
-    export function StartDrag(ele: HTMLElement, dragData: {[ id: string ]: any}, options: DragOptions) {
+
+    let _lastPointerX: number = 0;
+    let _lastPointerY: number = 0;
+    export function StartDrag(ele: HTMLElement, dragData: { [ id: string ]: any }, options: DragOptions) {
         if (!dragDiv) {
             const root = document.getElementById(rootId);
             if (!root) {
@@ -76,6 +79,8 @@ export namespace DragManager {
         dragElement.style.transformOrigin = "0 0";
         dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
         dragDiv.appendChild(dragElement);
+        _lastPointerX = dragData[ "xOffset" ] + rect.left;
+        _lastPointerY = dragData[ "yOffset" ] + rect.top;
 
         let hideSource = false;
         if (typeof options.hideSource === "boolean") {
@@ -91,8 +96,8 @@ export namespace DragManager {
         const moveHandler = (e: PointerEvent) => {
             e.stopPropagation();
             e.preventDefault();
-            x += e.movementX;
-            y += e.movementY;
+            x += e.clientX - _lastPointerX; _lastPointerX = e.clientX;
+            y += e.clientY - _lastPointerY; _lastPointerY = e.clientY;
             dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
         };
         const upHandler = (e: PointerEvent) => {
@@ -107,7 +112,7 @@ export namespace DragManager {
         document.addEventListener("pointerup", upHandler);
     }
 
-    function FinishDrag(dragEle: HTMLElement, e: PointerEvent, options: DragOptions, dragData: {[ index: string ]: any}) {
+    function FinishDrag(dragEle: HTMLElement, e: PointerEvent, options: DragOptions, dragData: { [ index: string ]: any }) {
         dragDiv.removeChild(dragEle);
         const target = document.elementFromPoint(e.x, e.y);
         if (!target) {
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx
index cdcdf3bf1..19b212bde 100644
--- a/src/views/collections/CollectionDockingView.tsx
+++ b/src/views/collections/CollectionDockingView.tsx
@@ -77,6 +77,7 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
     }
 
     public static BORDER_WIDTH = 2;
+    public static TAB_HEADER_HEIGHT = 20;
 
     @computed
     public get active(): boolean {
@@ -131,7 +132,6 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
         if (component === "button") {
             return <button>{node.getName()}</button>;
         }
-        console.log("Gettting " + component);
         const { fieldKey, Document: Document } = this.props;
         const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []);
         if (component === "doc1" && value.length > 0) {
@@ -153,8 +153,10 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
 
         const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []);
         // bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes.
-        var w = Document.GetFieldValue(KeyStore.Width, NumberField, Number(0));
-        var h = Document.GetFieldValue(KeyStore.Height, NumberField, Number(0));
+        var s = this.props.ContainingDocumentView!.ScalingToScreenSpace;
+        var w = Document.GetFieldValue(KeyStore.Width, NumberField, Number(0)) / s;
+        var h = Document.GetFieldValue(KeyStore.Height, NumberField, Number(0)) / s;
+
         return (
             <div className="border" style={{
                 borderStyle: "solid",
@@ -162,8 +164,8 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
             }}>
                 <div className="collectiondockingview-container" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
                     style={{
-                        width: "100%",
-                        height: `calc(100% - 2*${CollectionDockingView.BORDER_WIDTH}px)`,
+                        width: s > 1 ? "100%" : w - 2 * CollectionDockingView.BORDER_WIDTH,
+                        height: s > 1 ? "100%" : h - 2 * CollectionDockingView.BORDER_WIDTH
                     }} >
                     <FlexLayout.Layout model={this._model} factory={this.factory} />
                 </div>
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 5ce64b347..7ba62e0b8 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -178,8 +178,9 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             ContainerY = LocalY - CollectionFreeFormView.BORDER_WIDTH;
         }
 
-        let Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
-        let Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
+        let dockingViewChromeHack = this.props.ContainingCollectionView instanceof CollectionDockingView;
+        let Xx = dockingViewChromeHack ? 0 : this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
+        let Yy = dockingViewChromeHack ? CollectionDockingView.TAB_HEADER_HEIGHT : this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
         let Ss = this.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
         let Panxx = this.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
         let Panyy = this.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
@@ -196,10 +197,11 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         // if (this.props.ContainingCollectionView != undefined && !(this.props.ContainingCollectionView instanceof CollectionFreeFormView)) {
         //     return { ScreenX: undefined, ScreenY: undefined };
         // }
+        let dockingViewChromeHack = this.props.ContainingCollectionView instanceof CollectionDockingView;
         let W = CollectionFreeFormView.BORDER_WIDTH; // this.props.Document.GetFieldValue(KeyStore.Width, NumberField, Number(0));
         let H = CollectionFreeFormView.BORDER_WIDTH;
-        let Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
-        let Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
+        let Xx = dockingViewChromeHack ? 0 : this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
+        let Yy = dockingViewChromeHack ? CollectionDockingView.TAB_HEADER_HEIGHT : this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
         let parentX: Opt<any> = (localX - W) * Ss + (Xx + Panxx) + W;
         let parentY: Opt<any> = (localY - H) * Ss + (Yy + Panyy) + H;