Merge branch 'fcieminski-download-svg'

damonsk · Dec 11, 2023 · 190d728 · 190d728
2 parents ee7e2f3 + c639578
commit 190d728
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 1 deletion.
diff --git a/src/components/App.js b/src/components/App.js
@@ -80,6 +80,7 @@ function App() {
 
 	const [highlightLine, setHighlightLine] = useState(0);
 	const mapRef = useRef(null);
+	const svgRef = useRef(null);
 	const [mainViewHeight, setMainViewHeight] = useState(100);
 	const [errorLine, setErrorLine] = useState(-1);
 	const [showLineNumbers, setShowLineNumbers] = useState(false);
@@ -180,6 +181,19 @@ function App() {
 		});
 	}
 
+	const downloadMapSvg = () => {
+		const svg = svgRef.current;
+		const svgData = new XMLSerializer().serializeToString(svg);
+		const svgBlob = new Blob([svgData], {
+			type: 'image/svg+xml;charset=utf-8',
+		});
+		const svgUrl = URL.createObjectURL(svgBlob);
+		const link = document.createElement('a');
+		link.download = mapTitle;
+		link.href = svgUrl;
+		link.click();
+	};
+
 	React.useEffect(() => {
 		try {
 			setErrorLine([]);
@@ -276,6 +290,7 @@ function App() {
 								newMapClick={newMap}
 								saveMapClick={saveMap}
 								downloadMapImage={downloadMap}
+								downloadMapSvg={downloadMapSvg}
 								showLineNumbers={showLineNumbers}
 								setShowLineNumbers={setShowLineNumbers}
 								showLinkedEvolved={showLinkedEvolved}
@@ -342,6 +357,7 @@ function App() {
 							mapDimensions={mapDimensions}
 							mapEvolutionStates={mapEvolutionStates}
 							mapRef={mapRef}
+							svgRef={svgRef}
 							mapText={mapText}
 							mutateMapText={mutateMapText}
 							setMetaText={setMetaText}

diff --git a/src/components/editor/Controls.js b/src/components/editor/Controls.js
@@ -21,6 +21,7 @@ function Controls(props) {
 		setMetaText,
 		newMapClick,
 		downloadMapImage,
+		downloadMapSvg,
 		currentUrl,
 		setShowLineNumbers,
 		showLineNumbers,
@@ -86,7 +87,10 @@ function Controls(props) {
 				<Dropdown.Item eventKey="1" onClick={downloadMapImage}>
 					Download as PNG
 				</Dropdown.Item>
-				<Dropdown.Item eventKey="2" onClick={() => setModalShow(true)}>
+				<Dropdown.Item eventKey="2" onClick={downloadMapSvg}>
+					Download as SVG
+				</Dropdown.Item>
+				<Dropdown.Item eventKey="3" onClick={() => setModalShow(true)}>
 					Get Clone URL
 				</Dropdown.Item>
 				<Dropdown.Item

diff --git a/src/components/map/MapCanvas.js b/src/components/map/MapCanvas.js
@@ -128,6 +128,7 @@ function MapCanvas(props) {
 				fontSize={props.mapStyleDefs.fontSize}
 				className={props.mapStyleDefs.className}
 				id="svgMap"
+				ref={props.svgRef}
 				width={props.mapDimensions.width + 2 * props.mapPadding}
 				height={props.mapDimensions.height + 4 * props.mapPadding}
 				viewBox={

diff --git a/src/constants/mapstyles.js b/src/constants/mapstyles.js
@@ -5,6 +5,7 @@ const mergeIntoDefault = style => merge({}, Plain, style);
 
 export const Plain = {
 	className: 'plain',
+	backgroundColor: 'white',
 	fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif',
 	fontSize: '13px',
 	stroke: 'black',