Merge branch 'transforms' of https://github.com/browngraphicslab/Dash-Web into hedmanLocal

2 files changed, 15 insertions, 5 deletions

diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 15450d737..975eaaae8 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -123,14 +123,17 @@ export class CollectionFreeFormView extends CollectionViewBase {
         let coefficient = 1000;
         // if (modes[e.deltaMode] == 'pixels') coefficient = 50;
         // else if (modes[e.deltaMode] == 'lines') coefficient = 1000; // This should correspond to line-height??
+        let transform = this.getTransform();
+        let localTransform = this.getLocalTransform();
 
-        let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY);
+        let deltaScale = (1 - (e.deltaY / coefficient)) * transform.Scale;
+        let newDeltaScale = this.isAnnotationOverlay ? Math.max(1, deltaScale) : deltaScale;
+        let [x, y] = transform.transformPoint(e.clientX, e.clientY);
 
-        var deltaScale = (1 - (e.deltaY / coefficient)) * Ss;
-        var newDeltaScale = this.isAnnotationOverlay ? Math.max(1, deltaScale) : deltaScale;
+        localTransform.scaleAbout(newDeltaScale, x, y);
 
         this.props.DocumentForCollection.SetNumber(KeyStore.Scale, newDeltaScale);
-        this.SetPan(ContainerX - (LocalX * newDeltaScale + Xx), ContainerY - (LocalY * newDeltaScale + Yy));
+        this.SetPan(localTransform.TranslateX, localTransform.TranslateY);
     }
 
     @action
@@ -213,6 +216,11 @@ export class CollectionFreeFormView extends CollectionViewBase {
         return this.props.GetTransform().scaled(this.scale).translate(x, y);
     }
 
+    getLocalTransform = (): Transform => {
+        const [x, y] = this.translate;
+        return new Transform(x, y, this.scale);
+    }
+
     render() {
         const Document: Document = this.props.DocumentForCollection;
         const value: Document[] = Document.GetList<Document>(this.props.CollectionFieldKey, []);
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 7e2fcb39d..a41196027 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -28,7 +28,9 @@ export const COLLECTION_BORDER_WIDTH = 2;
 export class CollectionViewBase extends React.Component<CollectionViewProps> {
 
     public static LayoutString(collectionType: string, fieldKey: string = "DataKey") {
-        return `<${collectionType} Scaling={Scaling} DocumentForCollection={Document} CollectionFieldKey={${fieldKey}} ContainingDocumentView={DocumentView} BackgroundView={BackgroundView} />`;
+        return `<${collectionType} DocumentForCollection={Document} CollectionFieldKey={${fieldKey}}
+                    GetTransform={GetTransform}
+                    ContainingDocumentView={DocumentView}/>`;
     }
     @computed
     public get active(): boolean {