Added back double click to reset map transform

This commit is contained in:
Mitchell McCaffrey 2020-05-25 18:08:39 +10:00
parent 92c14533f1
commit 4b4c88f85c

View File

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