progresses #20 #5 - improving quality of png and sizing concerns.

damonsk · Jan 11, 2024 · dd4491e · dd4491e
1 parent 835d8bf
commit dd4491e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/extension/src/MapViewLoader.ts b/extension/src/MapViewLoader.ts
@@ -175,15 +175,12 @@ class MapViewLoader {
 					const message = e.data;
 					switch (message.command) {
 						case 'updateText':
-							console.log("message from react", message);
 							vscode.postMessage(message);
 							break;
 						case 'didExportAsSvg':
-							console.log("message from react", message);
 							vscode.postMessage(message);
 							break;
 						case 'didExportAsPng':
-							console.log("message from react", message);
 							vscode.postMessage(message);
 							break;
 					}

diff --git a/src/components/App.js b/src/components/App.js
@@ -93,10 +93,10 @@ const App = () => {
 
 	const getHeight = () => {
 		var winHeight = window.innerHeight;
-		return winHeight - 120;
+		return winHeight - 140;
 	};
 	const getWidth = function () {
-		return document.getElementById('map').clientWidth - 50;
+		return document.getElementById('map').clientWidth - 70;
 	};
 
 	function debounce(fn, ms) {
@@ -121,8 +121,22 @@ const App = () => {
 		const createData = () =>
 			new Promise((resolve) => {
 				const mapNode = mapRef.current; // Make sure mapRef.current is a valid DOM node
+				const scale = 3;
+				const style = {
+					transform: 'scale(' + scale + ')',
+					transformOrigin: 'top left',
+					width: mapNode.offsetWidth + 'px',
+					height: mapNode.offsetHeight + 'px',
+					backgroundColor: 'white',
+				};
+				const param = {
+					height: mapNode.offsetHeight * scale,
+					width: mapNode.offsetWidth * scale,
+					quality: 1,
+					style,
+				};
 				domtoimage
-					.toBlob(mapNode)
+					.toBlob(mapNode, param)
 					.then((blob) => {
 						const reader = new FileReader();
 						reader.onloadend = () => {