3 files changed, 60 insertions, 37 deletions

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index f4dcce7c8..337ec855a 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -78,9 +78,13 @@ export namespace DragManager {
         dragElement.style.transformOrigin = "0 0";
         dragElement.style.zIndex = "1000";
         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") {
@@ -96,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/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 0759ae110..1a711ae64 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -1,13 +1,13 @@
-import { CollectionFreeFormDocumentView } from "../views/nodes/CollectionFreeFormDocumentView";
 import { observable, action } from "mobx";
+import { DocumentView } from "../views/nodes/DocumentView";
 
 export namespace SelectionManager {
     class Manager {
         @observable
-        SelectedDocuments: Array<CollectionFreeFormDocumentView> = [];
+        SelectedDocuments: Array<DocumentView> = [];
 
         @action
-        SelectDoc(doc: CollectionFreeFormDocumentView, ctrlPressed: boolean): void {
+        SelectDoc(doc: DocumentView, ctrlPressed: boolean): void {
             // if doc is not in SelectedDocuments, add it
             if (!ctrlPressed) {
                 manager.SelectedDocuments = [];
@@ -21,11 +21,11 @@ export namespace SelectionManager {
 
     const manager = new Manager;
 
-    export function SelectDoc(doc: CollectionFreeFormDocumentView, ctrlPressed: boolean): void {
+    export function SelectDoc(doc: DocumentView, ctrlPressed: boolean): void {
         manager.SelectDoc(doc, ctrlPressed)
     }
 
-    export function IsSelected(doc: CollectionFreeFormDocumentView): boolean {
+    export function IsSelected(doc: DocumentView): boolean {
         return manager.SelectedDocuments.indexOf(doc) !== -1;
     }
 
@@ -33,7 +33,7 @@ export namespace SelectionManager {
         manager.SelectedDocuments = []
     }
 
-    export function SelectedDocuments(): Array<CollectionFreeFormDocumentView> {
+    export function SelectedDocuments(): Array<DocumentView> {
         return manager.SelectedDocuments;
     }
 }
\ No newline at end of file
diff --git a/src/client/util/Transform.ts b/src/client/util/Transform.ts
index 7861ed308..9fd4f7bef 100644
--- a/src/client/util/Transform.ts
+++ b/src/client/util/Transform.ts
@@ -7,6 +7,10 @@ export class Transform {
         return new Transform(0, 0, 1);
     }
 
+    get TranslateX(): number { return this._translateX; }
+    get TranslateY(): number { return this._translateY; }
+    get Scale(): number { return this._scale; }
+
     constructor(x: number, y: number, scale: number) {
         this._translateX = x;
         this._translateY = y;
@@ -19,56 +23,67 @@ export class Transform {
         return this;
     }
 
-    translated = (x: number, y: number): Transform => {
-        return this.copy().translate(x, y);
-    }
-
-    preTranslate = (x: number, y: number): Transform => {
-        this._translateX += x * this._scale;
-        this._translateY += y * this._scale;
+    scale = (scale: number): Transform => {
+        this._scale *= scale;
+        this._translateX *= scale;
+        this._translateY *= scale;
         return this;
     }
 
-    preTranslated = (x: number, y: number): Transform => {
-        return this.copy().preTranslate(x, y);
+    scaleAbout = (scale: number, x: number, y: number): Transform => {
+        this._translateX += x * this._scale - x * this._scale * scale;
+        this._translateY += y * this._scale - y * this._scale * scale;
+        this._scale *= scale;
+        return this;
     }
 
-    scale = (scale: number): Transform => {
-        this._scale *= scale;
+    transform = (transform: Transform): Transform => {
+        this._translateX = transform._translateX + transform._scale * this._translateX;
+        this._translateY = transform._translateY + transform._scale * this._translateY;
+        this._scale *= transform._scale;
         return this;
     }
 
-    scaled = (scale: number): Transform => {
-        return this.copy().scale(scale);
+    preTranslate = (x: number, y: number): Transform => {
+        this._translateX += this._scale * x;
+        this._translateY += this._scale * y;
+        return this;
     }
 
     preScale = (scale: number): Transform => {
         this._scale *= scale;
-        this._translateX *= scale;
-        this._translateY *= scale;
         return this;
     }
 
-    preScaled = (scale: number): Transform => {
-        return this.copy().preScale(scale);
-    }
-
-    transform = (transform: Transform): Transform => {
+    preTransform = (transform: Transform): Transform => {
         this._translateX += transform._translateX * this._scale;
         this._translateY += transform._translateY * this._scale;
         this._scale *= transform._scale;
         return this;
     }
 
-    transformed = (transform: Transform): Transform => {
-        return this.copy().transform(transform);
+    translated = (x: number, y: number): Transform => {
+        return this.copy().translate(x, y);
     }
 
-    preTransform = (transform: Transform): Transform => {
-        this._translateX = transform._translateX + this._translateX * transform._scale;
-        this._translateY = transform._translateY + this._translateY * transform._scale;
-        this._scale *= transform._scale;
-        return this;
+    preTranslated = (x: number, y: number): Transform => {
+        return this.copy().preTranslate(x, y);
+    }
+
+    scaled = (scale: number): Transform => {
+        return this.copy().scale(scale);
+    }
+
+    scaledAbout = (scale: number, x: number, y: number): Transform => {
+        return this.copy().scaleAbout(scale, x, y);
+    }
+
+    preScaled = (scale: number): Transform => {
+        return this.copy().preScale(scale);
+    }
+
+    transformed = (transform: Transform): Transform => {
+        return this.copy().transform(transform);
     }
 
     preTransformed = (transform: Transform): Transform => {
@@ -83,6 +98,10 @@ export class Transform {
         return [x, y];
     }
 
+    transformDirection = (x: number, y: number): [number, number] => {
+        return [x * this._scale, y * this._scale];
+    }
+
     inverse = () => {
         return new Transform(-this._translateX / this._scale, -this._translateY / this._scale, 1 / this._scale)
     }