3 files changed, 15 insertions, 8 deletions
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index f1b0445ca..337ec855a 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -80,9 +80,11 @@ export namespace DragManager {
         dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
         dragElement.style.width = `${rect.width / scaleX}px`;
         dragElement.style.height = `${rect.height / scaleY}px`;
+        // It seems like the above code should be able to just be this:
+        // dragElement.style.transform = `translate(${x}px, ${y}px)`;
+        // dragElement.style.width = `${rect.width}px`;
+        // dragElement.style.height = `${rect.height}px`;
         dragDiv.appendChild(dragElement);
-        _lastPointerX = dragData["xOffset"] + rect.left;
-        _lastPointerY = dragData["yOffset"] + rect.top;
 
         let hideSource = false;
         if (typeof options.hideSource === "boolean") {
@@ -98,8 +100,8 @@ export namespace DragManager {
         const moveHandler = (e: PointerEvent) => {
             e.stopPropagation();
             e.preventDefault();
-            x += e.clientX - _lastPointerX; _lastPointerX = e.clientX;
-            y += e.clientY - _lastPointerY; _lastPointerY = e.clientY;
+            x += e.movementX;
+            y += e.movementY;
             dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
         };
         const upHandler = (e: PointerEvent) => {
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 39716170b..adfcb96ee 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -15,6 +15,7 @@ import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from
 import React = require("react");
 import * as ReactDOM from 'react-dom';
 import Measure from "react-measure";
+import { Utils } from "../../../Utils";
 
 @observer
 export class CollectionDockingView extends CollectionViewBase {
@@ -239,14 +240,14 @@ export class CollectionDockingView extends CollectionViewBase {
             var containingDiv = "component_" + me.nextId();
             container.getElement().html("<div id='" + containingDiv + "'></div>");
             setTimeout(function () {
-                let divContainer = document.getElementById(containingDiv);
+                let divContainer = document.getElementById(containingDiv) as HTMLDivElement;
                 if (divContainer) {
                     let props: DockingProps = {
                         ContainingDiv: containingDiv,
                         Document: state.doc,
                         Container: container,
                         CollectionDockingView: me,
-                        HtmlElement: divContainer
+                        HtmlElement: divContainer,
                     }
                     ReactDOM.render((<RenderClass {...props} />), divContainer);
                     if (CollectionDockingView.myLayout._maxstack) {
@@ -293,7 +294,7 @@ interface DockingProps {
     Document: Document,
     Container: any,
     HtmlElement: HTMLElement,
-    CollectionDockingView: CollectionDockingView
+    CollectionDockingView: CollectionDockingView,
 }
 @observer
 export class RenderClass extends React.Component<DockingProps> {
@@ -307,8 +308,11 @@ export class RenderClass extends React.Component<DockingProps> {
             <DocumentView key={this.props.Document.Id} Document={this.props.Document}
                 AddDocument={this.props.CollectionDockingView.addDocument}
                 RemoveDocument={this.props.CollectionDockingView.removeDocument}
-                GetTransform={() => Transform.Identity}
                 Scaling={this._parentScaling}
+                GetTransform={() => {
+                    let { scale, translateX, translateY } = Utils.GetScreenTransform(this.props.HtmlElement);
+                    return this.props.CollectionDockingView.props.GetTransform().scale(scale).translate(translateX, translateY)
+                }}
                 isTopMost={true}
                 ContainingCollectionView={this.props.CollectionDockingView} DocumentView={undefined} />
 
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index b5e954e83..49864ca6c 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -54,6 +54,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
         }
         const xOffset = de.data["xOffset"] as number || 0;
         const yOffset = de.data["yOffset"] as number || 0;
+        //this should be able to use translate and scale methods on an Identity transform, no?
         const transform = new Transform(0, 0, 1 / me.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1)).transform(
             new Transform(-me.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0), -me.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0), 1)
         ).transform(me.props.GetTransform());