Merge branch 'master' of github-tsch-brown:browngraphicslab/Dash-Web

11 files changed, 147 insertions, 110 deletions

diff --git a/src/client/northstar/dash-nodes/HistogramBox.scss b/src/client/northstar/dash-nodes/HistogramBox.scss
index 94da36e29..e899cf15e 100644
--- a/src/client/northstar/dash-nodes/HistogramBox.scss
+++ b/src/client/northstar/dash-nodes/HistogramBox.scss
@@ -29,9 +29,10 @@
   .histogrambox-yaxislabel-text {
     position:absolute;
     left:0;
-    transform-origin: left;
+    width: 1000px;
+    transform-origin: 10px 10px;
     transform: rotate(-90deg);
-    text-align: center;
+    text-align: left;
     font-size: 14;
     font-weight: bold;
     bottom: calc(50% - 25px);
diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx
index 49ebe5ebc..dd6e09900 100644
--- a/src/client/northstar/dash-nodes/HistogramBox.tsx
+++ b/src/client/northstar/dash-nodes/HistogramBox.tsx
@@ -148,7 +148,7 @@ export class HistogramBox extends React.Component<FieldViewProps> {
         return (
             <Measure onResize={(r: any) => runInAction(() => { this.PanelWidth = r.entry.width; this.PanelHeight = r.entry.height })}>
                 {({ measureRef }) =>
-                    <div className="histogrambox-container" ref={measureRef} style={{ transform: `translate(${-w / 2}px, ${-h / 2}px)` }}>
+                    <div className="histogrambox-container" ref={measureRef} style={{ transform: `translate(-50%, -50%)` }}>
                         <div className="histogrambox-yaxislabel" onPointerDown={this.yLabelPointerDown} ref={this._dropYRef} >
                             <span className="histogrambox-yaxislabel-text">
                                 {labelY}
diff --git a/src/client/northstar/dash-nodes/HistogramBoxPrimitives.scss b/src/client/northstar/dash-nodes/HistogramBoxPrimitives.scss
index ce9edd65e..26203612a 100644
--- a/src/client/northstar/dash-nodes/HistogramBoxPrimitives.scss
+++ b/src/client/northstar/dash-nodes/HistogramBoxPrimitives.scss
@@ -4,10 +4,11 @@
 }
 .histogramboxprimitives-border {
     border: 3px;
-    border-style: solid;
-    border-color: white;
     pointer-events: none;
     position: absolute;
+    fill:"transparent";
+    stroke: white;
+    stroke-width: 1px;
 }
 .histogramboxprimitives-bar {
     position: absolute;
@@ -23,8 +24,19 @@
     width: 100%;
     height: 100%;
 }
+.histogramboxprimitives-svgContainer {
+    position: absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height: 100%;
+}
 .histogramboxprimitives-line {
     position: absolute;
     background: darkGray;
+    stroke: darkGray;
+    stroke-width: 1px;
+    width:100%;
+    height:100%;
     opacity: 0.4;
 }
\ No newline at end of file
diff --git a/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx b/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx
index e9adb3ce5..0918bc0c4 100644
--- a/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx
+++ b/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx
@@ -1,5 +1,5 @@
 import React = require("react")
-import { computed, observable, reaction, runInAction, trace } from "mobx";
+import { computed, observable, reaction, runInAction, trace, action } from "mobx";
 import { observer } from "mobx-react";
 import { Utils as DashUtils } from '../../../Utils';
 import { FilterModel } from "../../northstar/core/filter/FilterModel";
@@ -11,6 +11,9 @@ import { StyleConstants } from "../../northstar/utils/StyleContants";
 import { HistogramBinPrimitiveCollection, HistogramBinPrimitive } from "./HistogramBinPrimitiveCollection";
 import { HistogramBox } from "./HistogramBox";
 import "./HistogramBoxPrimitives.scss";
+import { JSXElement } from "babel-types";
+import { Utils } from "../utils/Utils";
+import { all } from "bluebird";
 
 export interface HistogramPrimitivesProps {
     HistoBox: HistogramBox;
@@ -23,20 +26,19 @@ export class HistogramBoxPrimitives extends React.Component<HistogramPrimitivesP
     @computed get xaxislines() { return this.renderGridLinesAndLabels(0); }
     @computed get yaxislines() { return this.renderGridLinesAndLabels(1); }
     @computed get selectedPrimitives() { return this._selectedPrims.map(bp => this.drawRect(bp.Rect, bp.BarAxis, undefined, "border")); }
-    @computed get binPrimitives() {
+    @computed get barPrimitives() {
         let histoResult = this.props.HistoBox.HistogramResult;
         if (!histoResult || !histoResult.bins || !this.props.HistoBox.VisualBinRanges.length)
             return (null);
-        trace();
         let allBrushIndex = ModelHelpers.AllBrushIndex(histoResult);
-        return Object.keys(histoResult.bins).reduce((prims, key) => {
+        return Object.keys(histoResult.bins).reduce((prims: JSX.Element[], key: string) => {
             let drawPrims = new HistogramBinPrimitiveCollection(histoResult!.bins![key], this.props.HistoBox);
             let toggle = this.getSelectionToggle(drawPrims.BinPrimitives, allBrushIndex,
                 ModelHelpers.GetBinFilterModel(histoResult!.bins![key], allBrushIndex, histoResult!, this.histoOp.X, this.histoOp.Y));
             drawPrims.BinPrimitives.filter(bp => bp.DataValue && bp.BrushIndex !== allBrushIndex).map(bp =>
                 prims.push(...[{ r: bp.Rect, c: bp.Color }, { r: bp.MarginRect, c: StyleConstants.MARGIN_BARS_COLOR }].map(pair => this.drawRect(pair.r, bp.BarAxis, pair.c, "bar", toggle))));
             return prims;
-        }, [] as JSX.Element[]);
+        }, [] as JSX.Element[])
     }
 
     componentDidMount() {
@@ -44,39 +46,38 @@ export class HistogramBoxPrimitives extends React.Component<HistogramPrimitivesP
     }
 
     private getSelectionToggle(binPrimitives: HistogramBinPrimitive[], allBrushIndex: number, filterModel: FilterModel) {
-        let allBrushPrim = ArrayUtil.FirstOrDefault(binPrimitives, bp => bp.BrushIndex == allBrushIndex);
-        return !allBrushPrim ? () => { } : () => runInAction(() => {
+        let rawAllBrushPrim = ArrayUtil.FirstOrDefault(binPrimitives, bp => bp.BrushIndex == allBrushIndex);
+        if (!rawAllBrushPrim)
+            return () => { }
+        let allBrushPrim = rawAllBrushPrim;
+        return () => runInAction(() => {
             if (ArrayUtil.Contains(this.histoOp.FilterModels, filterModel)) {
-                this._selectedPrims.splice(this._selectedPrims.indexOf(allBrushPrim!), 1);
+                this._selectedPrims.splice(this._selectedPrims.indexOf(allBrushPrim), 1);
                 this.histoOp.RemoveFilterModels([filterModel]);
             }
             else {
-                this._selectedPrims.push(allBrushPrim!);
+                this._selectedPrims.push(allBrushPrim);
                 this.histoOp.AddFilterModels([filterModel]);
             }
         })
     }
 
     private renderGridLinesAndLabels(axis: number) {
+        trace();
         if (!this.props.HistoBox.SizeConverter.Initialized)
             return (null);
         let labels = this.props.HistoBox.VisualBinRanges[axis].GetLabels();
-        return labels.reduce((prims, binLabel, i) => {
-            let r = this.props.HistoBox.SizeConverter.DataToScreenRange(binLabel.minValue!, binLabel.maxValue!, axis);
-            prims.push(this.drawLine(r.xFrom, r.yFrom, axis == 0 ? 0 : r.xTo - r.xFrom, axis == 0 ? r.yTo - r.yFrom : 0));
-            if (i == labels.length - 1)
-                prims.push(this.drawLine(axis == 0 ? r.xTo : r.xFrom, axis == 0 ? r.yFrom : r.yTo, axis == 0 ? 0 : r.xTo - r.xFrom, axis == 0 ? r.yTo - r.yFrom : 0));
-            return prims;
-        }, [] as JSX.Element[]);
+        return <svg className="histogramboxprimitives-svgContainer">
+            {labels.reduce((prims, binLabel, i) => {
+                let r = this.props.HistoBox.SizeConverter.DataToScreenRange(binLabel.minValue!, binLabel.maxValue!, axis);
+                prims.push(this.drawLine(r.xFrom, r.yFrom, axis == 0 ? 0 : r.xTo - r.xFrom, axis == 0 ? r.yTo - r.yFrom : 0));
+                if (i == labels.length - 1)
+                    prims.push(this.drawLine(axis == 0 ? r.xTo : r.xFrom, axis == 0 ? r.yFrom : r.yTo, axis == 0 ? 0 : r.xTo - r.xFrom, axis == 0 ? r.yTo - r.yFrom : 0));
+                return prims;
+            }, [] as JSX.Element[])}
+        </svg>
     }
 
-    drawEntity(xFrom: number, yFrom: number, entity: JSX.Element) {
-        let transXpercent = xFrom / this.renderDimension * 100;
-        let transYpercent = yFrom / this.renderDimension * 100;
-        return (<div key={DashUtils.GenerateGuid()} className={`histogramboxprimitives-placer`} style={{ transform: `translate(${transXpercent}%, ${transYpercent}%)` }}>
-            {entity}
-        </div>);
-    }
     drawLine(xFrom: number, yFrom: number, width: number, height: number) {
         if (height < 0) {
             yFrom += height;
@@ -86,10 +87,11 @@ export class HistogramBoxPrimitives extends React.Component<HistogramPrimitivesP
             xFrom += width;
             width = -width;
         }
-        let trans2Xpercent = width == 0 ? `1px` : `${(xFrom + width) / this.renderDimension * 100}%`;
-        let trans2Ypercent = height == 0 ? `1px` : `${(yFrom + height) / this.renderDimension * 100}%`;
-        let line = (<div className="histogramboxprimitives-line" style={{ width: trans2Xpercent, height: trans2Ypercent, }} />);
-        return this.drawEntity(xFrom, yFrom, line);
+        let trans2Xpercent = `${(xFrom + width) / this.renderDimension * 100}%`;
+        let trans2Ypercent = `${(yFrom + height) / this.renderDimension * 100}%`;
+        let trans1Xpercent = `${xFrom / this.renderDimension * 100}%`
+        let trans1Ypercent = `${yFrom / this.renderDimension * 100}%`
+        return <line className="histogramboxprimitives-line" key={DashUtils.GenerateGuid()} x1={trans1Xpercent} x2={`${trans2Xpercent}`} y1={trans1Ypercent} y2={`${trans2Ypercent}`} />
     }
     drawRect(r: PIXIRectangle, barAxis: number, color: number | undefined, classExt: string, tapHandler: () => void = () => { }) {
         if (r.height < 0) {
@@ -100,25 +102,22 @@ export class HistogramBoxPrimitives extends React.Component<HistogramPrimitivesP
             r.x += r.width;
             r.width = -r.width;
         }
-        let widthPercent = r.width / this.renderDimension * 100;
-        let heightPercent = r.height / this.renderDimension * 100;
-        let rect = (<div className={`histogramboxprimitives-${classExt}`} onPointerDown={(e: React.PointerEvent) => { if (e.button == 0) tapHandler() }}
-            style={{
-                borderBottomStyle: barAxis == 1 ? "none" : "solid",
-                borderLeftStyle: barAxis == 0 ? "none" : "solid",
-                width: `${widthPercent}%`,
-                height: `${heightPercent}%`,
-                background: color ? `${LABColor.RGBtoHexString(color)}` : ""
-            }}
-        />);
-        return this.drawEntity(r.x, r.y, rect);
+        let transXpercent = `${r.x / this.renderDimension * 100}%`
+        let transYpercent = `${r.y / this.renderDimension * 100}%`
+        let widthXpercent = `${r.width / this.renderDimension * 100}%`;
+        let heightYpercent = `${r.height / this.renderDimension * 100}%`;
+        return (<rect className={`histogramboxprimitives-${classExt}`} key={DashUtils.GenerateGuid()} onPointerDown={(e: React.PointerEvent) => { if (e.button == 0) tapHandler() }}
+            x={transXpercent} width={`${widthXpercent}`} y={transYpercent} height={`${heightYpercent}`} fill={color ? `${LABColor.RGBtoHexString(color)}` : "transparent"} />);
     }
     render() {
+        trace();
         return <div className="histogramboxprimitives-container">
             {this.xaxislines}
             {this.yaxislines}
-            {this.binPrimitives}
-            {this.selectedPrimitives}
+            <svg className="histogramboxprimitives-svgContainer">
+                {this.barPrimitives}
+                {this.selectedPrimitives}
+            </svg>
         </div>
     }
 }
\ No newline at end of file
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index e8f8cce7c..043932de5 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -1,10 +1,10 @@
-import { DocumentDecorations } from "../views/DocumentDecorations";
-import { CollectionDockingView } from "../views/collections/CollectionDockingView";
-import { Document } from "../../fields/Document";
 import { action } from "mobx";
+import { Document } from "../../fields/Document";
 import { ImageField } from "../../fields/ImageField";
 import { KeyStore } from "../../fields/KeyStore";
+import { CollectionDockingView } from "../views/collections/CollectionDockingView";
 import { CollectionView } from "../views/collections/CollectionView";
+import { DocumentDecorations } from "../views/DocumentDecorations";
 import { DocumentView } from "../views/nodes/DocumentView";
 
 export function setupDrag(
@@ -21,7 +21,7 @@ export function setupDrag(
             document.removeEventListener("pointerup", onRowUp);
             var dragData = new DragManager.DocumentDragData([docFunc()]);
             dragData.removeDocument = removeFunc;
-            DragManager.StartDocumentDrag([_reference.current!], dragData);
+            DragManager.StartDocumentDrag([_reference.current!], dragData, e.x, e.y);
         }
     );
     let onRowUp = action(
@@ -132,11 +132,14 @@ export namespace DragManager {
     export function StartDocumentDrag(
         eles: HTMLElement[],
         dragData: DocumentDragData,
+        downX: number,
+        downY: number,
         options?: DragOptions
     ) {
         StartDrag(
             eles,
             dragData,
+            downX, downY,
             options,
             (dropData: { [id: string]: any }) =>
                 (dropData.droppedDocuments = dragData.aliasOnDrop
@@ -156,13 +159,15 @@ export namespace DragManager {
     export function StartLinkDrag(
         ele: HTMLElement,
         dragData: LinkDragData,
+        downX: number, downY: number,
         options?: DragOptions
     ) {
-        StartDrag([ele], dragData, options);
+        StartDrag([ele], dragData, downX, downY, options);
     }
     function StartDrag(
         eles: HTMLElement[],
         dragData: { [id: string]: any },
+        downX: number, downY: number,
         options?: DragOptions,
         finishDrag?: (dropData: { [id: string]: any }) => void
     ) {
@@ -204,23 +209,22 @@ export namespace DragManager {
             dragElement.style.width = `${rect.width / scaleX}px`;
             dragElement.style.height = `${rect.height / scaleY}px`;
 
-            // bcz: PDFs don't show up if you clone them because they contain a canvas.
+            // bcz: if PDFs are rendered with svg's, then this code isn't needed
+            // bcz: PDFs don't show up if you clone them when rendered using a canvas. 
             //      however, PDF's have a thumbnail field that contains an image of their canvas.
             //      So we replace the pdf's canvas with the image thumbnail
-            if (docs.length) {
-                var pdfBox = dragElement.getElementsByClassName(
-                    "pdfBox-cont"
-                )[0] as HTMLElement;
-                let thumbnail = docs[0].GetT(KeyStore.Thumbnail, ImageField);
-                if (pdfBox && pdfBox.childElementCount && thumbnail) {
-                    let img = new Image();
-                    img!.src = thumbnail.toString();
-                    img!.style.position = "absolute";
-                    img!.style.width = `${rect.width / scaleX}px`;
-                    img!.style.height = `${rect.height / scaleY}px`;
-                    pdfBox.replaceChild(img!, pdfBox.children[0]);
-                }
-            }
+            // if (docs.length) {
+            //     var pdfBox = dragElement.getElementsByClassName("pdfBox-cont")[0] as HTMLElement;
+            //     let thumbnail = docs[0].GetT(KeyStore.Thumbnail, ImageField);
+            //     if (pdfBox && pdfBox.childElementCount && thumbnail) {
+            //         let img = new Image();
+            //         img!.src = thumbnail.toString();
+            //         img!.style.position = "absolute";
+            //         img!.style.width = `${rect.width / scaleX}px`;
+            //         img!.style.height = `${rect.height / scaleY}px`;
+            //         pdfBox.replaceChild(img!, pdfBox.children[0]);
+            //     }
+            // }
 
             dragDiv.appendChild(dragElement);
             return dragElement;
@@ -236,6 +240,8 @@ export namespace DragManager {
         }
         eles.map(ele => (ele.hidden = hideSource));
 
+        let lastX = downX;
+        let lastY = downY;
         const moveHandler = (e: PointerEvent) => {
             e.stopPropagation();
             e.preventDefault();
@@ -250,12 +256,13 @@ export namespace DragManager {
                     button: 0
                 });
             }
-            dragElements.map(
-                (dragElement, i) =>
-                    (dragElement.style.transform = `translate(${(xs[i] +=
-                        e.movementX)}px, ${(ys[i] += e.movementY)}px) scale(${
-                        scaleXs[i]
-                        }, ${scaleYs[i]})`)
+            let moveX = e.pageX - lastX;
+            let moveY = e.pageY - lastY;
+            lastX = e.pageX;
+            lastY = e.pageY;
+            dragElements.map((dragElement, i) => (dragElement.style.transform =
+                `translate(${(xs[i] += moveX)}px, ${(ys[i] += moveY)}px) 
+                scale(${scaleXs[i]}, ${scaleYs[i]})`)
             );
         };
 
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index d7137d7a2..c4e4aed8e 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -60,6 +60,7 @@
         cursor: ew-resize;
     }
     .title{
+        width:100%;
         background: lightblue;
         grid-column-start:3;
         grid-column-end: 4;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 8bf1a42d1..c7e4a269a 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -126,12 +126,14 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         this._dragging = true;
         document.removeEventListener("pointermove", this.onBackgroundMove);
         document.removeEventListener("pointerup", this.onBackgroundUp);
-        DragManager.StartDocumentDrag(SelectionManager.SelectedDocuments().map(docView => (docView as any)._mainCont!.current!), dragData, {
-            handlers: {
-                dragComplete: action(() => this._dragging = false),
-            },
-            hideSource: true
-        })
+        DragManager.StartDocumentDrag(SelectionManager.SelectedDocuments().map(docView => (docView as any)._mainCont!.current!), dragData,
+            e.x, e.y,
+            {
+                handlers: {
+                    dragComplete: action(() => this._dragging = false),
+                },
+                hideSource: true
+            })
         e.stopPropagation();
     }
 
@@ -219,7 +221,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
             document.removeEventListener("pointermove", this.onLinkerButtonMoved)
             document.removeEventListener("pointerup", this.onLinkerButtonUp)
             let dragData = new DragManager.LinkDragData(SelectionManager.SelectedDocuments()[0]);
-            DragManager.StartLinkDrag(this._linkerButton.current, dragData, {
+            DragManager.StartLinkDrag(this._linkerButton.current, dragData, e.pageX, e.pageY, {
                 handlers: {
                     dragComplete: action(() => { }),
                 },
@@ -265,7 +267,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                         moddrag.push(doc);
                 }
                 let dragData = new DragManager.DocumentDragData(moddrag);
-                DragManager.StartDocumentDrag([this._linkButton.current], dragData, {
+                DragManager.StartDocumentDrag([this._linkButton.current], dragData, e.x, e.y, {
                     handlers: {
                         dragComplete: action(() => { }),
                     },
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 6f66f8f38..a324421ac 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -13,7 +13,7 @@ import { Documents } from '../documents/Documents';
 import { Server } from '../Server';
 import { setupDrag } from '../util/DragManager';
 import { Transform } from '../util/Transform';
-import { UndoManager } from '../util/UndoManager';
+import { UndoManager, undoBatch } from '../util/UndoManager';
 import { WorkspacesMenu } from '../../server/authentication/controllers/WorkspacesMenu';
 import { CollectionDockingView } from './collections/CollectionDockingView';
 import { ContextMenu } from './ContextMenu';
@@ -51,6 +51,7 @@ import '../northstar/utils/Extensions'
 import { HistogramOperation } from '../northstar/operations/HistogramOperation';
 import { AttributeTransformationModel } from '../northstar/core/attribute/AttributeTransformationModel';
 import { ColumnAttributeModel } from '../northstar/core/attribute/AttributeModel';
+import { CollectionView } from './collections/CollectionView';
 
 @observer
 export class Main extends React.Component {
@@ -234,6 +235,15 @@ export class Main extends React.Component {
                 ContainingCollectionView={undefined} />
     }
 
+    @undoBatch
+    @action
+    prepareDrag = (
+        _reference: React.RefObject<HTMLDivElement>,
+        docFunc: () => Document,
+        removeFunc: (containingCollection: CollectionView) => void = () => { }) => {
+        return setupDrag(_reference, docFunc, removeFunc);
+    }
+
     /* for the expandable add nodes menu. Not included with the miscbuttons because once it expands it expands the whole div with it, making canvas interactions limited. */
     @computed
     get nodesMenu() {
@@ -273,7 +283,7 @@ export class Main extends React.Component {
                 <ul id="add-options-list">
                     {btns.map(btn =>
                         <li key={btn[1]} ><div ref={btn[0]}>
-                            <button className="round-button add-button" title={btn[2]} onPointerDown={setupDrag(btn[0], btn[3])}>
+                            <button className="round-button add-button" title={btn[2]} onPointerDown={this.prepareDrag(btn[0], btn[3])}>
                                 <FontAwesomeIcon icon={btn[1]} size="sm" />
                             </button>
                         </div></li>)}
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 39e0dd989..921ee4591 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -200,7 +200,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
             let tab = (e.target as any).parentElement as HTMLElement;
             Server.GetField(docid, action((f: Opt<Field>) => {
                 if (f instanceof Document)
-                    DragManager.StartDocumentDrag([tab], new DragManager.DocumentDragData([f as Document]),
+                    DragManager.StartDocumentDrag([tab], new DragManager.DocumentDragData([f as Document]), e.pageX, e.pageY,
                         {
                             handlers: {
                                 dragComplete: action(() => { }),
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index eb20b3100..d4809ac1c 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -12,6 +12,7 @@ import "./CollectionFreeFormLinksView.scss";
 import { CollectionFreeFormLinkView } from "./CollectionFreeFormLinkView";
 import React = require("react");
 import v5 = require("uuid/v5");
+import { find } from "async";
 
 @observer
 export class CollectionFreeFormLinksView extends React.Component<CollectionViewProps> {
@@ -22,40 +23,44 @@ export class CollectionFreeFormLinksView extends React.Component<CollectionViewP
         }, () => {
             let views = DocumentManager.Instance.getAllDocumentViews(this.props.Document);
             for (let i = 0; i < views.length; i++) {
-                for (let j = i + 1; j < views.length; j++) {
+                for (let j = 0; j < views.length; j++) {
                     let srcDoc = views[j].props.Document;
                     let dstDoc = views[i].props.Document;
                     let x1 = srcDoc.GetNumber(KeyStore.X, 0);
                     let x1w = srcDoc.GetNumber(KeyStore.Width, -1);
                     let x2 = dstDoc.GetNumber(KeyStore.X, 0);
                     let x2w = dstDoc.GetNumber(KeyStore.Width, -1);
-                    if (x1w < 0 || x2w < 0)
+                    if (x1w < 0 || x2w < 0 || i == j)
                         continue;
-                    dstDoc.GetTAsync(KeyStore.Prototype, Document).then((protoDest) =>
-                        srcDoc.GetTAsync(KeyStore.Prototype, Document).then((protoSrc) => runInAction(() => {
-                            let dstTarg = (protoDest ? protoDest : dstDoc);
-                            let srcTarg = (protoSrc ? protoSrc : srcDoc);
-                            let findBrush = (field: ListField<Document>) => field.Data.findIndex(brush => {
-                                let bdocs = brush.GetList(KeyStore.BrushingDocs, [] as Document[]);
-                                return (bdocs.length == 0 || (bdocs[0] == dstTarg && bdocs[1] == srcTarg) || (bdocs[0] == srcTarg && bdocs[1] == dstTarg))
-                            });
-                            let brushAction = (field: ListField<Document>) => {
-                                let found = findBrush(field);
-                                if (found != -1)
-                                    field.Data.splice(found, 1);
-                            };
-                            if (Math.abs(x1 + x1w - x2) < 20 || Math.abs(x2 + x2w - x1) < 20) {
-                                let linkDoc: Document = new Document();
-                                linkDoc.SetText(KeyStore.Title, "Histogram Brush");
-                                linkDoc.SetText(KeyStore.LinkDescription, "Brush between " + srcTarg.Title + " and " + dstTarg.Title);
-                                linkDoc.SetData(KeyStore.BrushingDocs, [dstTarg, srcTarg], ListField);
+                    let dstTarg = dstDoc;
+                    let srcTarg = srcDoc;
+                    let findBrush = (field: ListField<Document>) => field.Data.findIndex(brush => {
+                        let bdocs = brush ? brush.GetList(KeyStore.BrushingDocs, [] as Document[]) : [];
+                        return (bdocs.length && ((bdocs[0] == dstTarg && bdocs[1] == srcTarg)) ? true : false)
+                    });
+                    let brushAction = (field: ListField<Document>) => {
+                        let found = findBrush(field);
+                        if (found != -1) {
+                            console.log("REMOVE BRUSH " + srcTarg.Title + " " + dstTarg.Title);
+                            field.Data.splice(found, 1);
+                        }
+                    };
+                    if (Math.abs(x1 + x1w - x2) < 20) {
+                        let linkDoc: Document = new Document();
+                        linkDoc.SetText(KeyStore.Title, "Histogram Brush");
+                        linkDoc.SetText(KeyStore.LinkDescription, "Brush between " + srcTarg.Title + " and " + dstTarg.Title);
+                        linkDoc.SetData(KeyStore.BrushingDocs, [dstTarg, srcTarg], ListField);
 
-                                brushAction = brushAction = (field: ListField<Document>) => (findBrush(field) == -1) && field.Data.push(linkDoc);
+                        brushAction = brushAction = (field: ListField<Document>) => {
+                            if (findBrush(field) == -1) {
+                                console.log("ADD BRUSH " + srcTarg.Title + " " + dstTarg.Title);
+                                (findBrush(field) == -1) && field.Data.push(linkDoc);
                             }
-                            dstTarg.GetOrCreateAsync(KeyStore.BrushingDocs, ListField, brushAction);
-                            srcTarg.GetOrCreateAsync(KeyStore.BrushingDocs, ListField, brushAction);
-                        }
-                        )))
+                        };
+                    }
+                    dstTarg.GetOrCreateAsync(KeyStore.BrushingDocs, ListField, brushAction);
+                    srcTarg.GetOrCreateAsync(KeyStore.BrushingDocs, ListField, brushAction);
+
                 }
             }
         })
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index b9329f269..7514e782d 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -219,7 +219,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
                     this.props.RemoveDocument(this.props.Document);
                 }
             };
-            DragManager.StartDocumentDrag([this._mainCont.current], dragData, {
+            DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, {
                 handlers: {
                     dragComplete: action(() => { })
                 },
@@ -239,7 +239,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             document.removeEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
             if (!this.topMost || e.buttons == 2 || e.altKey) {
-                this.startDragging(e.x, e.y, e.ctrlKey || e.altKey);
+                this.startDragging(this._downX, this._downY, e.ctrlKey || e.altKey);
             }
         }
         e.stopPropagation();