added save plot as image button

package.json

@@ -128,19 +128,27 @@
             },
             {
                 "command": "modest.dotSaveSvg",
-                "title": "Save to .svg file"
+                "title": "Save as SVG file"
             },
             {
                 "command": "modest.dotCopySvg",
-                "title": "Copy svg to clipboard"
+                "title": "Copy SVG to clipboard"
             },
             {
                 "command": "modest.dotSaveDot",
-                "title": "Save to .dot file"
+                "title": "Save as DOT file"
             },
             {
                 "command": "modest.dotCopyDot",
-                "title": "Copy dot to clipboard"
+                "title": "Copy DOT to clipboard"
+            },
+			{
+                "command": "modest.savePlot",
+                "title": "Save plot as image",
+                "icon": {
+                    "light": "media/light/save.svg",
+                    "dark": "media/dark/save.svg"
+                }
             }
         ],
         "menus": {
@@ -239,6 +247,11 @@
                     "when": "modest:dotViewFocused",
                     "command": "modest.dotZoomIn",
                     "group": "navigation@3"
+                },
+				{
+                    "when": "modest:plotViewFocused",
+                    "command": "modest.savePlot",
+					"group": "navigation"
                 }
             ],
             "editor/title/context": [

src/extension.ts

@@ -28,6 +28,8 @@ export let clientReady: boolean = false;
 export let disposalQueue: Array<vscode.Disposable> = [];
 export let resultHandlers: Array<(notification: ResultNotification) => void> = [];
 
+export let activePlotView: vscode.Webview;
+
 export function modestExecutable(): string | undefined {
     let executable: string | undefined = vscode.workspace
         .getConfiguration("modest")
@@ -223,67 +225,72 @@ export function activate(context: ExtensionContext) {
     );
 
     //#region register commands
-    vscode.commands.registerCommand(
+    context.subscriptions.push(vscode.commands.registerCommand(
         "analysisResults.copyValue",
         (res: Result) => copyToClipboard(res.getValue())
-    );
-    vscode.commands.registerCommand(
+    ));
+    context.subscriptions.push(vscode.commands.registerCommand(
         "analysisResults.copyItem",
         (res: Result) => copyItemToClipboard(res)
-    );
-    vscode.commands.registerCommand(
+    ));
+    context.subscriptions.push(vscode.commands.registerCommand(
         "analysisResults.openInEditor",
         (res: Result) => openInEditor(analysisResultsProvider, res)
-    );
-	vscode.commands.registerCommand(
+    ));
+	context.subscriptions.push(vscode.commands.registerCommand(
 		"analysisResults.highlight",
 		(res: Result) => highlight(res)
-	);
-	vscode.commands.registerCommand(
+	));
+	context.subscriptions.push(vscode.commands.registerCommand(
 		"analysisResults.plotValue",
 		(res: Result) => plotValue(res, context)
-	);
+	));
 
-    vscode.commands.registerCommand(
+    context.subscriptions.push(vscode.commands.registerCommand(
         "analysisResults.load",
         () => loadResults(analysisResultsProvider)
-    );
-    vscode.commands.registerCommand(
+    ));
+    context.subscriptions.push(vscode.commands.registerCommand(
         "analysisResultsCompView.load",
         () => loadResults(analysisResultsCompProvider)
-    );
+    ));
 
-    vscode.commands.registerCommand(
+    context.subscriptions.push(vscode.commands.registerCommand(
         "analysisResults.export",
         () => exportResults(analysisResultsProvider)
-    );
-    vscode.commands.registerCommand(
+    ));
+    context.subscriptions.push(vscode.commands.registerCommand(
         "analysisResultsCompView.export",
         () => exportResults(analysisResultsCompProvider)
-    );
+    ));
 
-    vscode.commands.registerCommand(
+    context.subscriptions.push(vscode.commands.registerCommand(
         "analysisResults.openFileInEditor",
         () => openFileInEditor(analysisResultsProvider)
-    );
-    vscode.commands.registerCommand(
+    ));
+    context.subscriptions.push(vscode.commands.registerCommand(
         "analysisResultsCompView.openFileInEditor",
         () => openFileInEditor(analysisResultsCompProvider)
-    );
+    ));
 
-    vscode.commands.registerCommand(
+    context.subscriptions.push(vscode.commands.registerCommand(
         "analysisResults.clear",
         () => clearView(analysisResultsProvider)
-    );
-    vscode.commands.registerCommand(
+    ));
+    context.subscriptions.push(vscode.commands.registerCommand(
         "analysisResultsCompView.clearCompView",
         () => clearView(analysisResultsCompProvider)
-    );
+    ));
 
-    vscode.commands.registerCommand(
+    context.subscriptions.push(vscode.commands.registerCommand(
         "analysisResults.openInCompView",
         () => analysisResultsCompProvider.setJsonObject(analysisResultsProvider.getJsonObject())
-    );
+    ));
+
+	context.subscriptions.push(vscode.commands.registerCommand(
+        "modest.savePlot",
+		() => savePlot()
+	));
     //#endregion
 }
 
@@ -464,6 +471,10 @@ function highlight(res: Result) {
 	analysisResultsCompProvider.refresh();
 }
 
+function savePlot() {
+	activePlotView.postMessage({ command: 'savePlot' });
+}
+
 function plotValue(res: Result, context: ExtensionContext) {
 	const panel = vscode.window.createWebviewPanel(
         'plotGraph',
@@ -475,6 +486,20 @@ function plotValue(res: Result, context: ExtensionContext) {
 		}
 	);
 
+	activePlotView = panel.webview;
+	panel.onDidDispose(() => {
+		vscode.commands.executeCommand('setContext', 'modest:plotViewFocused', false);
+	});
+	panel.onDidChangeViewState(
+		e => {
+			vscode.commands.executeCommand('setContext', 'modest:plotViewFocused', e.webviewPanel.active);
+			if (e.webviewPanel.active) {
+				activePlotView = e.webviewPanel.webview;
+			}
+		}
+	);
+	vscode.commands.executeCommand('setContext', 'modest:plotViewFocused', panel.active);
+
 	var dataPoints: {x: number, y: number}[] = [];
 	const value = res.getValue();
 	const regex = /\((\d+\.?d*),.(\d+\.?\d*)\)/gm;
@@ -497,8 +522,6 @@ function plotValue(res: Result, context: ExtensionContext) {
 	</head>
 	<body>
 	<canvas id="myChart"></canvas>
-	<button style="width: fit-content; position: absolute; top: 2%; right: 2%; padding: var(--input-margin-vertical) 0.8em;" onclick="save()">Save as Image</button>
-
 	<script nonce="${nonce}" src="${chart}"></script>
 	<script nonce="${nonce}">
 		var htmlStyle = document.documentElement.style;
@@ -564,11 +587,21 @@ function plotValue(res: Result, context: ExtensionContext) {
 		function save(){
 			if (image) {
 				vscode.postMessage({
-					command: 'save',
+					command: 'saveImage',
 					url: image.toString()
 				})
 			}
 		}
+
+		window.addEventListener('message', event => {
+            const message = event.data;
+
+            switch (message.command) {
+                case 'savePlot':
+                    save()
+                    break;
+            }
+        });
 	</script>
 	</body>
 	</html>
@@ -577,7 +610,7 @@ function plotValue(res: Result, context: ExtensionContext) {
 	panel.webview.onDidReceiveMessage(
         message => {
           switch (message.command) {
-            case 'save':
+            case 'saveImage':
 				var data = message.url.replace(/^data:image\/\w+;base64,/, "");
 				var buf = new Buffer(data, 'base64');
 				saveImage(res, buf);