From ad1aab1e757a2f0d8acc6038c19c54caa5b1ec48 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 25 Feb 2019 13:47:59 -0500
Subject: fixed so that docs are centered in middle of window.

---
 src/client/views/collections/CollectionDockingView.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'src/client/views/collections/CollectionDockingView.tsx')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 2230ec14f..a0f457ef2 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -265,6 +265,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
 
     @observable private _mainCont = React.createRef<HTMLDivElement>();
     @observable private _panelWidth = 0;
+    @observable private _panelHeight = 0;
     @observable private _document: Opt<Document>;
 
     constructor(props: any) {
@@ -272,8 +273,8 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         Server.GetField(this.props.documentId, action((f: Opt<Field>) => this._document = f as Document));
     }
 
-    private _nativeWidth = () => { return this._document!.GetNumber(KeyStore.NativeWidth, 0); }
-    private _nativeHeight = () => { return this._document!.GetNumber(KeyStore.NativeHeight, 0); }
+    private _nativeWidth = () => { return this._document!.GetNumber(KeyStore.NativeWidth, this._panelWidth); }
+    private _nativeHeight = () => { return this._document!.GetNumber(KeyStore.NativeHeight, this._panelHeight); }
     private _contentScaling = () => { return this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth); }
 
     ScreenToLocalTransform = () => {
@@ -297,7 +298,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                     ContainingCollectionView={undefined} />
             </div>
 
-        return <Measure onResize={action((r: any) => this._panelWidth = r.entry.width)}>
+        return <Measure onResize={action((r: any) => { this._panelWidth = r.entry.width; this._panelHeight = r.entry.height; })}>
             {({ measureRef }) => <div ref={measureRef}>  {content} </div>}
         </Measure>
     }
-- 
cgit v1.2.3-70-g09d2


From bb418216efa9cc2e191b970e4cbe5080f4fd2b87 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 25 Feb 2019 17:00:31 -0500
Subject: drag and drop of main buttons.

---
 src/client/util/DragManager.ts                     |   2 +
 src/client/views/Main.tsx                          | 116 +++++++++------------
 .../views/collections/CollectionDockingView.tsx    |   8 +-
 .../views/collections/CollectionSchemaView.scss    |   1 +
 4 files changed, 58 insertions(+), 69 deletions(-)

(limited to 'src/client/views/collections/CollectionDockingView.tsx')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index fd026992b..aab23f91c 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -75,6 +75,8 @@ export namespace DragManager {
         let dragElement = ele.cloneNode(true) as HTMLElement;
         dragElement.style.opacity = "0.7";
         dragElement.style.position = "absolute";
+        dragElement.style.bottom = "";
+        dragElement.style.left = "";
         dragElement.style.transformOrigin = "0 0";
         dragElement.style.zIndex = "1000";
         dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 661a2ac20..61ad66c72 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -17,6 +17,7 @@ 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';
 
 
 configure({
@@ -77,31 +78,47 @@ Documents.initProtos(() => {
             }, 0);
         }
 
-        let addImageNode = action(() => {
-            mainfreeform.GetList<Document>(KeyStore.Data, []).push(Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-                x: 0, y: 300, width: 200, height: 200, title: "added note"
-            }));
-        })
-        let addTextNode = action(() => {
-            mainfreeform.GetList<Document>(KeyStore.Data, []).push(Documents.TextDocument({
-                x: 0, y: 300, width: 200, height: 200, title: "added note"
-            }));
-        })
-        let addColNode = action(() => {
-            mainfreeform.GetList<Document>(KeyStore.Data, []).push(Documents.FreeformDocument([], {
-                x: 0, y: 300, width: 200, height: 200, title: "added note"
-            }));
-        })
-        let addSchemaNode = action(() => {
-            mainfreeform.GetList<Document>(KeyStore.Data, []).push(Documents.SchemaDocument([Documents.TextDocument()], {
-                x: 0, y: 300, width: 200, height: 200, title: "added note"
-            }));
-        })
+        let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {}))
+        let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" }))
+        let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a feeform collection" }));
+        let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" }));
+        let addImageNode = action(() => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
+            width: 200, height: 200, title: "an image of a cat"
+        }));
 
-        let clearDatabase = action(() => {
-            Utils.Emit(Server.Socket, MessageStore.DeleteAll, {});
-        })
+        let addClick = (creator: any) => action(() => {
+            var img = creator();
+            img.SetNumber(KeyStore.X, 0);
+            img.SetNumber(KeyStore.Y, 0);
+            mainfreeform.GetList<Document>(KeyStore.Data, []).push(img);
+        });
 
+        let imgRef = React.createRef<HTMLDivElement>();
+        let textRef = React.createRef<HTMLDivElement>();
+        let schemaRef = React.createRef<HTMLDivElement>();
+        let colRef = React.createRef<HTMLDivElement>();
+        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((
             <div style={{ position: "absolute", width: "100%", height: "100%" }}>
                 <DocumentView Document={mainContainer}
@@ -113,48 +130,17 @@ Documents.initProtos(() => {
                     ContainingCollectionView={undefined} />
                 <DocumentDecorations />
                 <ContextMenu />
-                <button style={{
-                    position: 'absolute',
-                    bottom: '0px',
-                    left: '0px',
-                    width: '150px'
-                }} onClick={addImageNode}>Add Image</button>
-                <button style={{
-                    position: 'absolute',
-                    bottom: '25px',
-                    left: '0px',
-                    width: '150px'
-                }} onClick={addTextNode}>Add Text</button>
-                <button style={{
-                    position: 'absolute',
-                    bottom: '50px',
-                    left: '0px',
-                    width: '150px'
-                }} onClick={addColNode}>Add Collection</button>
-                <button style={{
-                    position: 'absolute',
-                    bottom: '100',
-                    left: '0px',
-                    width: '150px'
-                }} onClick={addSchemaNode}>Add Schema</button>
-                <button style={{
-                    position: 'absolute',
-                    bottom: '75px',
-                    left: '0px',
-                    width: '150px'
-                }} onClick={clearDatabase}>Clear Database</button>
-                <button style={{
-                    position: 'absolute',
-                    bottom: '25',
-                    right: '0px',
-                    width: '150px'
-                }} onClick={() => UndoManager.Undo()}>Undo</button>
-                <button style={{
-                    position: 'absolute',
-                    bottom: '0',
-                    right: '0px',
-                    width: '150px'
-                }} onClick={() => UndoManager.Redo()}>Redo</button>
+                <div style={{ position: 'absolute', bottom: '0px', left: '0px', width: '150px' }} ref={imgRef} >
+                    <button onPointerDown={onRowDown(addImageNode, imgRef)} onClick={addClick(addImageNode)}>Add Image</button></div>
+                <div style={{ position: 'absolute', bottom: '25px', left: '0px', width: '150px' }} ref={textRef}>
+                    <button onPointerDown={onRowDown(addTextNode, textRef)} onClick={addClick(addTextNode)}>Add Text</button></div>
+                <div style={{ position: 'absolute', bottom: '50px', left: '0px', width: '150px' }} ref={colRef}>
+                    <button onPointerDown={onRowDown(addColNode, colRef)} onClick={addClick(addColNode)}>Add Collection</button></div>
+                <div style={{ position: 'absolute', bottom: '75px', left: '0px', width: '150px' }} ref={schemaRef}>
+                    <button onPointerDown={onRowDown(addSchemaNode, schemaRef)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
+                <button style={{ position: 'absolute', bottom: '100px', left: '0px', width: '150px' }} onClick={clearDatabase}>Clear Database</button>
+                <button style={{ position: 'absolute', bottom: '25', right: '0px', width: '150px' }} onClick={() => UndoManager.Undo()}>Undo</button>
+                <button style={{ position: 'absolute', bottom: '0', right: '0px', width: '150px' }} onClick={() => UndoManager.Redo()}>Redo</button>
             </div>),
             document.getElementById('root'));
     })
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index a0f457ef2..8926f4aca 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -36,8 +36,8 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     private _goldenLayout: any = null;
     private _dragDiv: any = null;
     private _dragParent: HTMLElement | null = null;
-    private _dragElement: HTMLDivElement | undefined;
-    private _dragFakeElement: HTMLDivElement | undefined;
+    private _dragElement: HTMLElement | undefined;
+    private _dragFakeElement: HTMLElement | undefined;
     private _containerRef = React.createRef<HTMLDivElement>();
     private _fullScreen: any = null;
 
@@ -48,7 +48,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         (window as any).ReactDOM = ReactDOM;
     }
 
-    public StartOtherDrag(dragElement: HTMLDivElement, dragDoc: Document) {
+    public StartOtherDrag(dragElement: HTMLElement, dragDoc: Document) {
         this._dragElement = dragElement;
         this._dragParent = dragElement.parentElement;
         // bcz: we want to copy this document into the header, not move it there.
@@ -65,7 +65,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
 
         //   - add a duplicate of our document to the original document's container 
         //     (GoldenLayout will be removing our original one)
-        this._dragFakeElement = dragElement.cloneNode(true) as HTMLDivElement;
+        this._dragFakeElement = dragElement.cloneNode(true) as HTMLElement;
         this._dragParent!.appendChild(this._dragFakeElement);
 
         // all of this must be undone when the document has been dropped (see tabCreated)
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 3bf84f3cd..74aa20e8b 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -67,6 +67,7 @@
         border-bottom: grey;
         border-bottom-style: solid;
         border-bottom-width: 1;
+        height: auto;
     }
     .documentView-node:first-child {
         background: grey;
-- 
cgit v1.2.3-70-g09d2


From de0d0a38fbd30719e381f4f560c19257f0308f0e Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
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/client/views/collections/CollectionDockingView.tsx')

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<SubCollectionViewProp
         //stack.header.controlsContainer.find('.lm_popout').hide();
         stack.header.controlsContainer.find('.lm_close') //get the close icon
             .off('click') //unbind the current click handler
-            .click(function () {
+            .click(action(function () {
                 //if (confirm('really close this?')) {
                 stack.remove();
                 //}
-            });
+            }));
     }
 
     render() {
-- 
cgit v1.2.3-70-g09d2


From bd54526065428de2e931d7254776352199f6e55a Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
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/client/views/collections/CollectionDockingView.tsx')

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<HTMLDivElement>, _dragDocument: Document) {
+export function setupDrag(_reference: React.RefObject<HTMLDivElement>, 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<HTMLDivElement>, _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<HTMLDivElement>();
         let schemaRef = React.createRef<HTMLDivElement>();
         let colRef = React.createRef<HTMLDivElement>();
-        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((
             <div style={{ position: "absolute", width: "100%", height: "100%" }}>
                 <DocumentView Document={mainContainer}
@@ -132,13 +109,13 @@ Documents.initProtos(() => {
                 <DocumentDecorations />
                 <ContextMenu />
                 <div style={{ position: 'absolute', bottom: '0px', left: '0px', width: '150px' }} ref={imgRef} >
-                    <button onPointerDown={onRowDown(addImageNode, imgRef)} onClick={addClick(addImageNode)}>Add Image</button></div>
+                    <button onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>Add Image</button></div>
                 <div style={{ position: 'absolute', bottom: '25px', left: '0px', width: '150px' }} ref={textRef}>
-                    <button onPointerDown={onRowDown(addTextNode, textRef)} onClick={addClick(addTextNode)}>Add Text</button></div>
+                    <button onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}>Add Text</button></div>
                 <div style={{ position: 'absolute', bottom: '50px', left: '0px', width: '150px' }} ref={colRef}>
-                    <button onPointerDown={onRowDown(addColNode, colRef)} onClick={addClick(addColNode)}>Add Collection</button></div>
+                    <button onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}>Add Collection</button></div>
                 <div style={{ position: 'absolute', bottom: '75px', left: '0px', width: '150px' }} ref={schemaRef}>
-                    <button onPointerDown={onRowDown(addSchemaNode, schemaRef)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
+                    <button onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
                 <button style={{ position: 'absolute', bottom: '100px', left: '0px', width: '150px' }} onClick={clearDatabase}>Clear Database</button>
                 <button style={{ position: 'absolute', bottom: '25', right: '0px', width: '150px' }} onClick={() => UndoManager.Undo()}>Undo</button>
                 <button style={{ position: 'absolute', bottom: '0', right: '0px', width: '150px' }} onClick={() => UndoManager.Redo()}>Redo</button>
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<SubCollectionViewProp
     }
 
     private _goldenLayout: any = null;
-    private _dragDiv: any = null;
-    private _dragParent: HTMLElement | null = null;
-    private _dragElement: HTMLElement | undefined;
-    private _dragFakeElement: HTMLElement | undefined;
     private _containerRef = React.createRef<HTMLDivElement>();
     private _fullScreen: any = null;
 
@@ -47,28 +42,8 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         (window as any).React = React;
         (window as any).ReactDOM = ReactDOM;
     }
-
-    public StartOtherDrag(dragElement: HTMLElement, dragDoc: Document) {
-        this._dragElement = dragElement;
-        this._dragParent = dragElement.parentElement;
-        // bcz: we want to copy this document into the header, not move it there.
-        //   However, GoldenLayout is setup to move things, so we have to do some kludgy stuff:
-
-        //   - create a temporary invisible div and register that as a DragSource with GoldenLayout
-        this._dragDiv = document.createElement("div");
-        this._dragDiv.style.opacity = 0;
-        DragManager.Root().appendChild(this._dragDiv);
-        this._goldenLayout.createDragSource(this._dragDiv, CollectionDockingView.makeDocumentConfig(dragDoc));
-
-        //   - add our document to that div so that GoldenLayout will get the move events its listening for
-        this._dragDiv.appendChild(this._dragElement);
-
-        //   - add a duplicate of our document to the original document's container 
-        //     (GoldenLayout will be removing our original one)
-        this._dragFakeElement = dragElement.cloneNode(true) as HTMLElement;
-        this._dragParent!.appendChild(this._dragFakeElement);
-
-        // all of this must be undone when the document has been dropped (see tabCreated)
+    public StartOtherDrag(dragDoc: Document, e: any) {
+        this.AddRightSplit(dragDoc, true).contentItems[0].tab._dragListener.onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: e.button })
     }
 
     @action
@@ -98,7 +73,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     //  Creates a vertical split on the right side of the docking view, and then adds the Document to that split
     //
     @action
-    public AddRightSplit(document: Document) {
+    public AddRightSplit(document: Document, minimize: boolean = false) {
         this._goldenLayout.emit('stateChanged');
         let newItemStackConfig = {
             type: 'stack',
@@ -121,10 +96,15 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
             collayout.config["width"] = 50;
             newContentItem.config["width"] = 50;
         }
+        if (minimize) {
+            newContentItem.config["width"] = 10;
+            newContentItem.config["height"] = 10;
+        }
         newContentItem.callDownwards('_$init');
         this._goldenLayout.root.callDownwards('setSize', [this._goldenLayout.width, this._goldenLayout.height]);
         this._goldenLayout.emit('stateChanged');
         this.stateChanged();
+        return newContentItem;
     }
 
     setupGoldenLayout() {
@@ -218,13 +198,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         this.stateChanged();
     }
     tabCreated = (tab: any) => {
-        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 {
             <FieldView {...props} />
         )
         let reference = React.createRef<HTMLDivElement>();
-        let onItemDown = setupDrag(reference, props.doc);
+        let onItemDown = setupDrag(reference, () => props.doc);
         return (
-            <div onPointerDown={onItemDown} ref={reference}>
+            <div onPointerDown={onItemDown} key={props.doc.Id} ref={reference}>
                 <EditableView contents={contents}
                     height={36} GetValue={() => {
                         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<TreeViewProps> {
 
         var children = childDocument.GetT<ListField<Document>>(KeyStore.Data, ListField);
         let title = childDocument.GetT<TextField>(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<DocumentViewProps> {
         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 09f0bebe4ac64250769297ccf64c33217b8db66a Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Wed, 27 Feb 2019 15:33:32 -0500
Subject: Fixes for context menu stuff

---
 deploy/debug/test.html                             | 13 ++++++
 package-lock.json                                  |  8 +++-
 src/client/views/Main.tsx                          |  1 -
 .../views/collections/CollectionDockingView.tsx    |  2 +-
 .../views/collections/CollectionFreeFormView.tsx   |  2 -
 src/client/views/nodes/DocumentView.tsx            | 17 +++-----
 src/debug/Test.tsx                                 | 46 ++++++++++++++++++++++
 webpack.config.js                                  |  1 +
 8 files changed, 73 insertions(+), 17 deletions(-)
 create mode 100644 deploy/debug/test.html
 create mode 100644 src/debug/Test.tsx

(limited to 'src/client/views/collections/CollectionDockingView.tsx')

diff --git a/deploy/debug/test.html b/deploy/debug/test.html
new file mode 100644
index 000000000..58febbc81
--- /dev/null
+++ b/deploy/debug/test.html
@@ -0,0 +1,13 @@
+<html>
+
+<head>
+    <title>Test view</title>
+    <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Hind+Siliguri:300" rel="stylesheet">
+</head>
+
+<body>
+    <div id="root"></div>
+    <script src="../test.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d74c77819..ecfa3d6d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3389,11 +3389,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3410,7 +3412,8 @@
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -3539,6 +3542,7 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 17dda899d..61ad66c72 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -30,7 +30,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()
     }
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 5fb632469..cb978c1ba 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -245,7 +245,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     render() {
         return (
             <div className="collectiondockingview-container" id="menuContainer"
-                onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
+                onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} ref={this._containerRef}
                 style={{
                     width: "100%",
                     height: "100%",
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 12909c151..1f8d76432 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -83,7 +83,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
     @action
     onPointerMove = (e: PointerEvent): void => {
         if (!e.cancelBubble && this.props.active()) {
-            e.preventDefault();
             e.stopPropagation();
             let x = this.props.Document.GetNumber(KeyStore.PanX, 0);
             let y = this.props.Document.GetNumber(KeyStore.PanY, 0);
@@ -230,7 +229,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
             <div className="collectionfreeformview-container"
                 onPointerDown={this.onPointerDown}
                 onWheel={this.onPointerWheel}
-                onContextMenu={(e) => e.preventDefault()}
                 onDrop={this.onDrop.bind(this)}
                 onDragOver={this.onDragOver}
                 style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index c579b7142..6e14df229 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -80,7 +80,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     private _mainCont = React.createRef<HTMLDivElement>();
     private _documentBindings: any = null;
-    private _contextMenuCanOpen = false;
     private _downX: number = 0;
     private _downY: number = 0;
 
@@ -99,7 +98,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             CollectionDockingView.Instance.StartOtherDrag(this._mainCont.current!, this.props.Document);
             e.stopPropagation();
         } else {
-            this._contextMenuCanOpen = true;
             if (this.active && !e.isDefaultPrevented()) {
                 e.stopPropagation();
                 if (e.buttons === 2) {
@@ -115,13 +113,10 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     onPointerMove = (e: PointerEvent): void => {
         if (e.cancelBubble) {
-            this._contextMenuCanOpen = false;
             return;
         }
         if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
-            this._contextMenuCanOpen = false;
             if (this._mainCont.current != null && !this.topMost) {
-                this._contextMenuCanOpen = false;
                 const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
                 let dragData: { [id: string]: any } = {};
                 dragData["documentView"] = this;
@@ -129,7 +124,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
                 dragData["yOffset"] = e.y - top;
                 DragManager.StartDrag(this._mainCont.current, dragData, {
                     handlers: {
-                        dragComplete: action((e: DragManager.DragCompleteEvent) => { }),
+                        dragComplete: action(() => { }),
                     },
                     hideSource: true
                 })
@@ -148,7 +143,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         }
     }
 
-    deleteClicked = (e: React.MouseEvent): void => {
+    deleteClicked = (): void => {
         if (this.props.RemoveDocument) {
             this.props.RemoveDocument(this.props.Document);
         }
@@ -168,13 +163,14 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     @action
     onContextMenu = (e: React.MouseEvent): void => {
-        e.preventDefault()
         e.stopPropagation();
-        if (!SelectionManager.IsSelected(this) || !this._contextMenuCanOpen) {
+        let moved = Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3;
+        if (moved || e.isDefaultPrevented()) {
+            e.preventDefault()
             return;
         }
+        e.preventDefault()
 
-        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) })
@@ -193,7 +189,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     }
 
     @computed get mainContent() {
-        var val = this.props.Document.Id;
         return <JsxParser
             components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebView }}
             bindings={this._documentBindings}
diff --git a/src/debug/Test.tsx b/src/debug/Test.tsx
new file mode 100644
index 000000000..7bc70615f
--- /dev/null
+++ b/src/debug/Test.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+class TestInternal extends React.Component {
+    onContextMenu = (e: React.MouseEvent) => {
+        console.log("Internal");
+        e.stopPropagation();
+    }
+
+    onPointerDown = (e: React.MouseEvent) => {
+        console.log("pointer down")
+        e.preventDefault();
+    }
+
+    render() {
+        return <div onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown}
+            onPointerUp={this.onPointerDown}>Hello world</div>
+    }
+}
+
+class TestChild extends React.Component {
+    onContextMenu = () => {
+        console.log("Child");
+    }
+
+    render() {
+        return <div onContextMenu={this.onContextMenu}><TestInternal /></div>
+    }
+}
+
+class TestParent extends React.Component {
+    onContextMenu = () => {
+        console.log("Parent");
+    }
+
+    render() {
+        return <div onContextMenu={this.onContextMenu}><TestChild /></div>
+    }
+}
+
+ReactDOM.render((
+    <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+        <TestParent />
+    </div>),
+    document.getElementById('root')
+);
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 2a29844e8..900802d7d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -7,6 +7,7 @@ module.exports = {
   entry: {
     bundle: ["./src/client/views/Main.tsx", 'webpack-hot-middleware/client?reload=true'],
     viewer: ["./src/debug/Viewer.tsx", 'webpack-hot-middleware/client?reload=true'],
+    test: ["./src/debug/Test.tsx", 'webpack-hot-middleware/client?reload=true'],
   },
   devtool: "source-map",
   node: {
-- 
cgit v1.2.3-70-g09d2


From a793e29e99d15ac0fe39c0ac838b10d8311eec03 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 28 Feb 2019 10:34:33 -0500
Subject: Started fixing transforms

---
 .../views/collections/CollectionDockingView.tsx    |  2 +-
 .../views/collections/CollectionFreeFormView.tsx   | 26 ++++++++++++++--------
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  1 +
 src/client/views/nodes/DocumentView.tsx            |  9 ++++++++
 4 files changed, 28 insertions(+), 10 deletions(-)

(limited to 'src/client/views/collections/CollectionDockingView.tsx')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 915e33533..ad7164e33 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -236,7 +236,7 @@ interface DockedFrameProps {
 @observer
 export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
 
-    @observable private _mainCont = React.createRef<HTMLDivElement>();
+    private _mainCont = React.createRef<HTMLDivElement>();
     @observable private _panelWidth = 0;
     @observable private _panelHeight = 0;
     @observable private _document: Opt<Document>;
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 63255dd90..dee4651df 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -100,9 +100,9 @@ export class CollectionFreeFormView extends CollectionViewBase {
             e.stopPropagation();
             let x = this.props.Document.GetNumber(KeyStore.PanX, 0);
             let y = this.props.Document.GetNumber(KeyStore.PanY, 0);
-            let [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
+            let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
             this._previewCursorVisible = false;
-            this.SetPan(x + dx, y + dy);
+            this.SetPan(x - dx, y - dy);
         }
         this._lastX = e.pageX;
         this._lastY = e.pageY;
@@ -134,10 +134,14 @@ export class CollectionFreeFormView extends CollectionViewBase {
             let [x, y] = transform.transformPoint(e.clientX, e.clientY);
 
             let localTransform = this.getLocalTransform();
-            localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y)
+            console.log("test")
+            console.log(localTransform.inverse())
+            console.log([x, y])
+            localTransform = localTransform.inverse().preTranslate(-this.centeringShiftX, -this.centeringShiftY).scaleAbout(deltaScale, x, y)
+            console.log(localTransform)
 
             this.props.Document.SetNumber(KeyStore.Scale, localTransform.Scale);
-            this.SetPan(localTransform.TranslateX, localTransform.TranslateY);
+            this.SetPan(-localTransform.TranslateX, -localTransform.TranslateY);
         }
     }
 
@@ -250,8 +254,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
             />);
     }
 
-    getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH - this.centeringShiftX, -COLLECTION_BORDER_WIDTH - this.centeringShiftY).transform(this.getLocalTransform())
-    getLocalTransform = (): Transform => Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale);
+    getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform())
+    getLocalTransform = (): Transform => Transform.Identity.translate(-this.centeringShiftX, -this.centeringShiftY).scale(1 / this.scale).translate(this.panX, this.panY);
     noScaling = () => 1;
 
     //when focus is lost, this will remove the preview cursor
@@ -270,8 +274,12 @@ export class CollectionFreeFormView extends CollectionViewBase {
             cursor = <div id="prevCursor" onKeyPress={this.onKeyDown} style={{ color: "black", position: "absolute", transformOrigin: "left top", transform: `translate(${x}px, ${y}px)` }}>I</div>
         }
 
-        const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0) + this.centeringShiftX;
-        const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0) + this.centeringShiftY;
+        let [dx, dy] = [this.centeringShiftX, this.centeringShiftY];
+
+        const panx: number = -this.props.Document.GetNumber(KeyStore.PanX, 0);
+        const pany: number = -this.props.Document.GetNumber(KeyStore.PanY, 0);
+        // const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0) + this.centeringShiftX;
+        // const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0) + this.centeringShiftY;
 
         return (
             <div className="collectionfreeformview-container"
@@ -285,7 +293,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                 tabIndex={0}
                 ref={this.createDropTarget}>
                 <div className="collectionfreeformview"
-                    style={{ transformOrigin: "left top", transform: ` translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})` }}
+                    style={{ transformOrigin: "left top", transform: `translate(${dx}px, ${dy}px) scale(${this.zoomScaling}, ${this.zoomScaling}) translate(${panx}px, ${pany}px)` }}
                     ref={this._canvasRef}>
                     {this.backgroundView}
                     {cursor}
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 50dc5a619..9edad1f64 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -69,6 +69,7 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
     }
 
     render() {
+        console.log(this.transform);
         return (
             <div className="collectionFreeFormDocumentView-container" ref={this._mainCont} style={{
                 transformOrigin: "left top",
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index d5b4a723d..221ded21b 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -179,6 +179,15 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         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: "center", event: () => {
+                if (this.props.ContainingCollectionView) {
+                    let doc = this.props.ContainingCollectionView.props.Document;
+                    doc.SetNumber(KeyStore.PanX, this.props.Document.GetNumber(KeyStore.X, 0) + (this.props.Document.GetNumber(KeyStore.Width, 0) / 2))
+                    doc.SetNumber(KeyStore.PanY, this.props.Document.GetNumber(KeyStore.Y, 0) + (this.props.Document.GetNumber(KeyStore.Height, 0) / 2))
+                }
+            }
+        })
         //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) {
-- 
cgit v1.2.3-70-g09d2