Adding in pan/scale and custom sized maps. Progresses #178

damonsk · May 31, 2024 · e1c4e9b · e1c4e9b
1 parent e68c29e
commit e1c4e9b
Show file tree

Hide file tree

Showing 23 changed files with 602 additions and 404 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -59,6 +59,7 @@
 		"react": "18.2.0",
 		"react-ace": "^10.1.0",
 		"react-dom": "18.2.0",
+		"react-svg-pan-zoom": "^3.12.1",
 		"sass": "^1.69.5",
 		"styled-components": "6.1.5"
 	},

diff --git a/frontend/src/components/MapEnvironment.js b/frontend/src/components/MapEnvironment.js
@@ -61,10 +61,9 @@ function convertToImage(base64Data, contentType) {
 }
 
 const getHeight = () => {
-	var winHeight = window.innerHeight;
-	var topNavHeight = document.getElementById('top-nav-wrapper').clientHeight;
-	var titleHeight = document.getElementById('title').clientHeight;
-	return winHeight - topNavHeight - titleHeight - 95;
+	const winHeight = window.innerHeight;
+	const topNavHeight = document.getElementById('top-nav-wrapper').clientHeight;
+	return winHeight - topNavHeight - 95;
 };
 const getWidth = () => {
 	return document.getElementById('map').clientWidth - 50;
@@ -116,6 +115,9 @@ function Environment(props) {
 	);
 	const [mapIterations, setMapIterations] = useState([]);
 	const [mapDimensions, setMapDimensions] = useState(Defaults.MapDimensions);
+	const [mapCanvasDimensions, setMapCanvasDimensions] = useState(
+		Defaults.MapDimensions
+	);
 	const [mapEvolutionStates, setMapEvolutionStates] = useState(
 		Defaults.EvolutionStages
 	);
@@ -137,7 +139,6 @@ function Environment(props) {
 	const [hideNav, setHideNav] = useState(false);
 
 	const mutateMapText = (newText) => {
-		console.log('mutate');
 		setMapText(newText);
 		setSaveOutstanding(true);
 		if (currentIteration !== null && currentIteration > -1) {
@@ -291,13 +292,25 @@ function Environment(props) {
 	}
 
 	function downloadMap() {
-		html2canvas(mapRef.current).then((canvas) => {
-			const base64image = canvas.toDataURL('image/png');
-			const link = document.createElement('a');
-			link.download = mapTitle;
-			link.href = base64image;
-			link.click();
-		});
+		const svgMapText = mapRef.current.getElementsByTagName('svg')[0].outerHTML;
+		const tempElement = document.createElement('div');
+		tempElement.innerHTML = svgMapText;
+		tempElement.style.position = 'absolute';
+		tempElement.style.left = '-9999px';
+		document.body.appendChild(tempElement);
+		html2canvas(tempElement, { useCORS: true, allowTaint: true })
+			.then((canvas) => {
+				const base64image = canvas.toDataURL('image/png');
+				const link = document.createElement('a');
+				link.download = mapTitle;
+				link.href = base64image;
+				link.click();
+				tempElement.remove();
+			})
+			.catch((x) => {
+				console.log(x);
+				tempElement.remove();
+			});
 	}
 
 	function downloadMapAsSVG() {
@@ -389,7 +402,6 @@ function Environment(props) {
 	useEffect(() => {
 		document.title = mapTitle + ' - ' + Defaults.PageTitle;
 	}, [mapTitle]);
-
 	useEffect(() => {
 		setMapDimensions({
 			width: mapSize.width > 0 ? mapSize.width : getWidth(),
@@ -467,31 +479,53 @@ function Environment(props) {
 
 	useEffect(() => {
 		const debouncedHandleResize = debounce(() => {
-			setMapDimensions({
+			const dimensions = {
 				width: mapSize.width > 0 ? mapSize.width : getWidth(),
 				height: mapSize.height > 0 ? mapSize.height : getHeight(),
-			});
-		}, 0);
+			};
+			setMapDimensions(dimensions);
+		}, 1);
 
-		if (mapSize.width === 0 || mapSize.height === 0) {
-			window.addEventListener('resize', debouncedHandleResize);
-			debouncedHandleResize();
-		}
+		window.addEventListener('resize', debouncedHandleResize);
+		debouncedHandleResize();
 
 		return function cleanup() {
 			window.removeEventListener('resize', debouncedHandleResize);
 		};
 	}, [mapSize]);
 
+	useEffect(() => {
+		const newDimensions = {
+			width: mapSize.width > 0 ? mapSize.width : getWidth(),
+			height: mapSize.height > 0 ? mapSize.height : getHeight(),
+		};
+		setMapDimensions(newDimensions);
+		setMapCanvasDimensions({
+			width: getWidth(),
+			height: getHeight(),
+		});
+	}, [mapOnlyView, hideNav]);
+
 	useEffect(() => {
 		const initialLoad = () => {
-			setMapDimensions({
+			setMapCanvasDimensions({
 				width: getWidth(),
 				height: getHeight(),
 			});
 		};
+
+		const debouncedHandleCanvasResize = debounce(() => {
+			setMapCanvasDimensions({
+				width: getWidth(),
+				height: getHeight(),
+			});
+		}, 500);
+
 		window.addEventListener('load', initialLoad);
+		window.addEventListener('resize', debouncedHandleCanvasResize);
+
 		return function cleanup() {
+			window.removeEventListener('resize', debouncedHandleCanvasResize);
 			window.removeEventListener('load', initialLoad);
 		};
 	}, []);
@@ -616,6 +650,7 @@ function Environment(props) {
 							mapMethods={mapMethods}
 							mapStyleDefs={mapStyleDefs}
 							mapDimensions={mapDimensions}
+							mapCanvasDimensions={mapCanvasDimensions}
 							mapEvolutionStates={mapEvolutionStates}
 							mapRef={mapRef}
 							mapText={mapText}

diff --git a/frontend/src/components/editor/Editor.js b/frontend/src/components/editor/Editor.js
@@ -37,10 +37,10 @@ function Editor(props) {
 	};
 
 	const getHeight = () => {
-		var winHeight = window.innerHeight;
-		var topNavHeight = document.getElementById('top-nav-wrapper').clientHeight;
-		var titleHeight = document.getElementById('title').clientHeight;
-		return winHeight - topNavHeight - titleHeight + 35;
+		const winHeight = window.innerHeight;
+		const topNavHeight =
+			document.getElementById('top-nav-wrapper').clientHeight;
+		return winHeight - topNavHeight + 35;
 	};
 
 	useEffect(() => {

diff --git a/frontend/src/components/map/Anchor.js b/frontend/src/components/map/Anchor.js
@@ -56,6 +56,7 @@ const Anchor = (props) => {
 				fixedY={false}
 				fixedX={false}
 				isModKeyPressed={isModKeyPressed}
+				scaleFactor={props.scaleFactor}
 			>
 				<ComponentTextSymbol
 					id={elementKey('text')}

diff --git a/frontend/src/components/map/AnnotationBox.js b/frontend/src/components/map/AnnotationBox.js
@@ -92,6 +92,7 @@ function AnnotationElement(props) {
 			fixedX={false}
 			x={x()}
 			y={y()}
+			scaleFactor={props.scaleFactor}
 		>
 			<AnnotationBoxSymbol
 				id={'annotationsBoxTextContainer'}

diff --git a/frontend/src/components/map/AnnotationElement.js b/frontend/src/components/map/AnnotationElement.js
@@ -80,6 +80,7 @@ function AnnotationElement(props) {
 			y={y()}
 			fixedY={false}
 			fixedX={false}
+			scaleFactor={props.scaleFactor}
 		>
 			<AnnotationElementSymbol
 				annotation={props.annotation}

diff --git a/frontend/src/components/map/Attitude.js b/frontend/src/components/map/Attitude.js
@@ -62,6 +62,7 @@ const Attitude = (props) => {
 				y={y}
 				fixedY={false}
 				fixedX={false}
+				scaleFactor={props.scaleFactor}
 			>
 				<AttitudeSymbol
 					id={`attitude_${type}`}

diff --git a/frontend/src/components/map/ComponentLink.js b/frontend/src/components/map/ComponentLink.js
@@ -64,6 +64,7 @@ function ComponentLink(props) {
 					setMetaText={props.setMetaText}
 					x={x2}
 					y={y2}
+					scaleFactor={props.scaleFactor}
 				/>
 			)}
 			{featureSwitches.enableLinkContext && link.context && (

diff --git a/frontend/src/components/map/ComponentText.js b/frontend/src/components/map/ComponentText.js
@@ -125,6 +125,7 @@ function ComponentText(props) {
 				onMove={overrideDrag ? overrideDrag : endDrag}
 				x={element.label.x}
 				y={element.label.y}
+				scaleFactor={props.scaleFactor}
 			>
 				{showTextField === false && (
 					<ComponentTextSymbol

diff --git a/frontend/src/components/map/FlowText.js b/frontend/src/components/map/FlowText.js
@@ -42,6 +42,7 @@ const FlowText = (props) => {
 				onMove={flowLabelEndDrag}
 				y={flowLabelPosition.y}
 				x={flowLabelPosition.x}
+				scaleFactor={props.scaleFactor}
 			>
 				<ComponentTextSymbol
 					className="draggable label"

diff --git a/frontend/src/components/map/FluidLink.js b/frontend/src/components/map/FluidLink.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import PositionCalculator from './PositionCalculator';
 import LinkSymbol from '../symbols/LinkSymbol';
 
@@ -17,20 +17,24 @@ function FluidLink(props) {
 		coords: {},
 	});
 
-	const handleMouseMove = (e) => {
-		setPosition((position) => {
-			const xDiff = position.coords.x - e.pageX;
-			const yDiff = position.coords.y - e.pageY;
-			return {
-				x: position.x - xDiff,
-				y: position.y - yDiff,
-				coords: {
-					x: e.pageX,
-					y: e.pageY,
-				},
-			};
-		});
-	};
+	const handleMouseMove = useCallback(
+		(e) => {
+			setPosition((position) => {
+				const scaleFactor = props.scaleFactor || 1; // Use scaleFactor from props, default to 1 if not provided
+				const xDiff = (position.coords.x - e.pageX) / scaleFactor;
+				const yDiff = (position.coords.y - e.pageY) / scaleFactor;
+				return {
+					x: position.x - xDiff,
+					y: position.y - yDiff,
+					coords: {
+						x: e.pageX,
+						y: e.pageY,
+					},
+				};
+			});
+		},
+		[props.scaleFactor]
+	);
 
 	useEffect(() => {
 		const pageX = origClick.pageX;

diff --git a/frontend/src/components/map/MapAccelerator.js b/frontend/src/components/map/MapAccelerator.js
@@ -43,6 +43,7 @@ function MapAccelerator(props) {
 				fixedX={false}
 				shouldShowMoving={false}
 				isModKeyPressed={false}
+				scaleFactor={props.scaleFactor}
 			>
 				<>{children}</>
 			</Movable>