From 4b4c88f85cc23cfa0fed41419df51151a65ea890 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Mon, 25 May 2020 18:08:39 +1000
Subject: [PATCH] Added back double click to reset map transform

---
 src/components/map/MapInteraction.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/map/MapInteraction.js b/src/components/map/MapInteraction.js
index 603c8f1..9f4c562 100644
--- a/src/components/map/MapInteraction.js
+++ b/src/components/map/MapInteraction.js
@@ -1,4 +1,10 @@
-import React, { useRef, useEffect, useState, useContext } from "react";
+import React, {
+  useRef,
+  useEffect,
+  useState,
+  useContext,
+  useCallback,
+} from "react";
 import { Box } from "theme-ui";
 import { useGesture } from "react-use-gesture";
 import ReactResizeDetector from "react-resize-detector";
@@ -36,7 +42,7 @@ function MapInteraction({ map, children, controls, selectedToolId }) {
   const stageTranslateRef = useRef({ x: 0, y: 0 });
   const mapDragPositionRef = useRef({ x: 0, y: 0 });
 
-  useEffect(() => {
+  const resetMapTransform = useCallback(() => {
     const layer = mapLayerRef.current;
     if (map && layer) {
       const mapHeight = stageWidthRef.current * (map.height / map.width);
@@ -48,9 +54,16 @@ function MapInteraction({ map, children, controls, selectedToolId }) {
       layer.y(newTranslate.y);
       layer.draw();
       stageTranslateRef.current = newTranslate;
+
+      setStageScale(1);
     }
   }, [map]);
 
+  // Reset transform when map changes
+  useEffect(() => {
+    resetMapTransform();
+  }, [map, resetMapTransform]);
+
   // Convert a client space XY to be normalized to the map image
   function getMapDragPosition(xy) {
     const [x, y] = xy;
@@ -197,6 +210,7 @@ function MapInteraction({ map, children, controls, selectedToolId }) {
       ref={containerRef}
       {...bind()}
       className="map"
+      onDoubleClick={resetMapTransform}
     >
       <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
         <Stage