Dot viewer updates:

- reset position button (still needs icon)
- view dot in the same window
- when dot is updated, it retains the position/zoom level

media/dark/preview.svg

+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="white"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2h12l1 1v10l-1 1H2l-1-1V3l1-1zm0 11h12V3H2v10zm11-9H3v3h10V4zm-1 2H4V5h8v1zm-3 6h4V8H9v4zm1-3h2v2h-2V9zM7 8H3v1h4V8zm-4 3h4v1H3v-1z"/></svg>
\ No newline at end of file

media/dotview.js

@@ -10,15 +10,32 @@ var svgImage;
 var viewBox;
 var lastPoint;
 var newPoint;
-var scale = 1;
+var scale;
 
 window.addEventListener('message', event => {
-    svgContainer.innerHTML = event.data.svg.replace('<svg', '<svg id="svgImage"');
-    svgImage = document.getElementById("svgImage");
-    scale = 1;
-    //TODO: DIFFERENTIATE BETWEEN A COMPLETELY NEW SVG AND THE SAME SVG (rn it just resets the whole view)
-    viewBox = { x: 0, y: 0, w: svgImage.clientWidth, h: svgImage.clientHeight };
-    svgImage.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
+    const type = event.data.type;
+    switch (type) {
+        case 'reset':
+            if (svgImage !== undefined) {
+                scale = 1;
+                viewBox = { x: 0, y: 0, w: svgImage.clientWidth, h: svgImage.clientHeight };
+                svgImage.setAttribute('viewBox', `0 0 ${svgImage.clientWidth} ${svgImage.clientHeight}`);
+            }
+            break;
+        case 'svg':
+            const newSvg = event.data.svg;
+            if (svgImage === undefined) {
+                svgContainer.innerHTML = newSvg.replace('<svg', '<svg id="svgImage"');
+                svgImage = document.getElementById("svgImage");
+                scale = 1;
+                viewBox = { x: 0, y: 0, w: svgImage.clientWidth, h: svgImage.clientHeight };
+                svgImage.setAttribute('viewBox', `0 0 ${svgImage.clientWidth} ${svgImage.clientHeight}`);
+            } else {
+                // If we already have an svg element, replace the contents
+                svgImage.innerHTML = newSvg.match(/(?<=<svg(?:.|\n|\r)+?>)(?:(?:.|\n|\r)+)(?=<\/svg>)/)[0];
+            }
+            break;
+    }
 });
 
 window.addEventListener('resize', () => {

media/light/preview.svg

+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2h12l1 1v10l-1 1H2l-1-1V3l1-1zm0 11h12V3H2v10zm11-9H3v3h10V4zm-1 2H4V5h8v1zm-3 6h4V8H9v4zm1-3h2v2h-2V9zM7 8H3v1h4V8zm-4 3h4v1H3v-1z"/></svg>
\ No newline at end of file

package.json

@@ -97,6 +97,18 @@
 					"light": "media/light/open-preview.svg",
 					"dark": "media/dark/open-preview.svg"
 				}
+			},
+			{
+				"command": "modest.viewDotSameWindow",
+				"title": "Open DOT view in the current window",
+				"icon": {
+					"light": "media/light/preview.svg",
+					"dark": "media/dark/preview.svg"
+				}
+			},
+			{
+				"command": "modest.resetDotPosition",
+				"title": "Reset position"
 			}
         ],
         "menus": {
@@ -174,6 +186,12 @@
 				{
 					"when": "resourceLangId == modest",
 					"command": "modest.viewDot",
+					"alt": "modest.viewDotSameWindow",
+					"group": "navigation"
+				},
+				{
+					"when": "modest:dotViewFocused",
+					"command": "modest.resetDotPosition",
 					"group": "navigation"
 				}
 			]

src/commands.ts

@@ -45,17 +45,33 @@ export namespace ModestCommands {
             vscode.window.activeTextEditor.document.uri === undefined) {
             return;
         }
-        let dotView = new LiveDotView(vscode.window.activeTextEditor?.document.uri);
+        new LiveDotView(vscode.window.activeTextEditor?.document.uri);
+    });
 
+    export let viewDotSameWindow = vscode.commands.registerCommand('modest.viewDotSameWindow', async () => {
+        if (vscode.window.activeTextEditor === undefined ||
+            vscode.window.activeTextEditor.document.uri === undefined) {
+            return;
+        }
+        new LiveDotView(vscode.window.activeTextEditor?.document.uri, true);
+    });
+
+    export let resetDotPosition = vscode.commands.registerCommand('modest.resetDotPosition', async () => {
+        // Can only trigger when dotView is open, so we can just send a message.
+        LiveDotView.currentWebView?.postMessage({
+            type: 'reset'
+        });
     });
 
     class LiveDotView {
+        public static currentWebView: vscode.Webview | undefined;
+
         private fileUri: vscode.Uri;
         private panel: vscode.WebviewPanel;
         private webview: vscode.Webview;
-        private lastSvgStr: string = '';
+        private lastSvgStr: string | undefined;
 
-        public constructor(fileUri: vscode.Uri) {
+        public constructor(fileUri: vscode.Uri, sameColumn = false) {
             this.fileUri = fileUri;
 
             this.panel = vscode.window.createWebviewPanel(
@@ -64,7 +80,7 @@ export namespace ModestCommands {
                 // Webview title
                 `[Preview] ${this.fileUri.path.split("/").pop()}`,
                 // This will open the second column for preview inside editor
-                2,
+                sameColumn ? -1 : -2,
                 {
                     // Enable scripts in the webview
                     enableScripts: true,
@@ -73,16 +89,22 @@ export namespace ModestCommands {
                 }
             );
 
+
             this.webview = this.panel.webview;
             this.webview.html = this.getHtml();
 
+            this.panel.onDidDispose(() => vscode.commands.executeCommand('setContext', 'modest:dotViewFocused', false));
+
             this.panel.onDidChangeViewState(
                 e => {
-                    this.panel = e.webviewPanel;
-                    this.webview = e.webviewPanel.webview;
-                    this.webview.postMessage({
-                        svg: this.lastSvgStr
-                    });
+                    vscode.commands.executeCommand('setContext', 'modest:dotViewFocused', e.webviewPanel.active);
+                    LiveDotView.currentWebView = this.webview;
+                    if (this.lastSvgStr) {
+                        this.webview.postMessage({
+                            type: 'svg',
+                            svg: this.lastSvgStr
+                        });
+                    }
                 },
                 null,
                 undefined
@@ -94,6 +116,8 @@ export namespace ModestCommands {
                 }
             });
             this.updateDot();
+            vscode.commands.executeCommand('setContext', 'modest:dotViewFocused', this.panel.active);
+            LiveDotView.currentWebView = this.webview;
         }
 
 
@@ -102,6 +126,7 @@ export namespace ModestCommands {
             client?.sendRequest<string>("modest/dot", jsonObject).then(data => {
                 this.lastSvgStr = data;
                 this.webview.postMessage({
+                    type: 'svg',
                     svg: data
                 });
             });

src/extension.ts

@@ -133,6 +133,8 @@ export function activate(context: ExtensionContext) {
 
     context.subscriptions.push(ModestCommands.simCommand);
     context.subscriptions.push(ModestCommands.viewDot);
+    context.subscriptions.push(ModestCommands.viewDotSameWindow);
+    context.subscriptions.push(ModestCommands.resetDotPosition);
     extensionUri = context.extensionUri;
 
     //#region listeners