Add a 'recompile' button

Fixes terrastruct#133
BarryNolte · Mar 31, 2024 · c9d3162 · c9d3162
1 parent d722a70
commit c9d3162
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 20 deletions.
diff --git a/pages/previewPage.html b/pages/previewPage.html
@@ -56,7 +56,7 @@
         background-color: var(--vscode-button-background);
         padding: 5px;
         border: 0px;
-        min-width: 50px;
+        min-width: 25px;
       }
 
       body {
@@ -66,10 +66,20 @@
         height: 100%;
       }
 
+      path {
+        fill: var(--vscode-button-foreground)
+      }
+
       #previewWrapper {
         transform-origin: left top;
+        box-sizing: border-box;
         margin-top: 45px;
+        position: absolute;
+        top: 10px;
+        left: 0px;
+        right: 0px;
       }
+
       #progressBar {
         position: fixed;
         margin-left: -10px;
@@ -106,7 +116,7 @@
       #toastMsg {
         margin-top: 0px;
         margin-left: 3px;
-        font-size: x-large;
+        font-size: larger;
         font-family: Arial, Helvetica, sans-serif;
       }
 
@@ -180,17 +190,18 @@
         setZoomLevel(zoomSlider.value);
       }
       function setZoomText(text) {
-        if (text === true) {
-          percent.innerText = zoomLevel.toFixed() + "%";
-        } else {
-          percent.innerText = "Fit";
-        }
+        percent.innerText = zoomLevel.toFixed() + "%";
       }
+
       function roundToZoomLevel(zl) {
         var newZl = Math.round(zl + zoomStep) - Math.round(zl % zoomStep);
         return Math.max(10, newZl);
       }
 
+      function refreshPage() {
+        vscode.postMessage({ command: "refreshPage" });
+      }
+
       window.addEventListener("DOMContentLoaded", () => {
         init();
       });
@@ -265,7 +276,11 @@
 
   <body>
     <div id="toolbar">
-      <button onclick="zoomMinus();" title="Zoom Out">Out</button>
+      <button onclick="zoomMinus();" title="Zoom Out">
+        <svg id="zoom-out" viewBox="0 -25 122 140">
+          <path d="M49.991,0h0.015v0.006c13.794,0.004,26.294,5.601,35.336,14.645 c9.026,9.031,14.618,21.515,14.628,35.303h0.006v0.034v0.04h-0.006c-0.005,5.557-0.918,10.905-2.594,15.892 c-0.281,0.837-0.576,1.641-0.877,2.409v0.007c-1.446,3.661-3.315,7.12-5.548,10.307l29.08,26.14l0.018,0.015l0.157,0.146 l0.012,0.012c1.641,1.563,2.535,3.656,2.648,5.779c0.11,2.1-0.538,4.248-1.976,5.971l-0.011,0.016l-0.176,0.204l-0.039,0.046 l-0.145,0.155l-0.011,0.011c-1.563,1.642-3.656,2.539-5.782,2.651c-2.104,0.111-4.254-0.54-5.975-1.978l-0.012-0.012l-0.203-0.175 l-0.029-0.024L78.764,90.865c-0.88,0.62-1.779,1.207-2.687,1.763c-1.234,0.756-2.51,1.467-3.816,2.117 c-6.699,3.342-14.266,5.223-22.27,5.223v0.006h-0.016v-0.006c-13.797-0.005-26.297-5.601-35.334-14.644l-0.004,0.005 C5.608,76.3,0.016,63.81,0.007,50.021H0v-0.033v-0.016h0.007c0.005-13.799,5.601-26.297,14.646-35.339 C23.684,5.607,36.169,0.015,49.958,0.006V0H49.991L49.991,0z M67.787,43.397c1.21-0.007,2.353,0.312,3.322,0.872l-0.002,0.002 c0.365,0.21,0.708,0.454,1.01,0.715c0.306,0.264,0.594,0.569,0.851,0.895h0.004c0.873,1.11,1.397,2.522,1.394,4.053 c-0.003,1.216-0.335,2.358-0.906,3.335c-0.454,0.78-1.069,1.461-1.791,1.996c-0.354,0.261-0.751,0.496-1.168,0.688v0.002 c-0.823,0.378-1.749,0.595-2.722,0.6l-35.166,0.248c-1.209,0.011-2.354-0.31-3.327-0.873l0.002-0.002 c-0.37-0.212-0.715-0.458-1.016-0.722c-0.306-0.264-0.589-0.567-0.844-0.891h-0.004c-0.873-1.112-1.397-2.522-1.393-4.053 c0.002-1.213,0.337-2.354,0.906-3.328l-0.004-0.002c0.376-0.642,0.869-1.225,1.442-1.714h0.004 c0.574-0.489,1.236-0.883,1.942-1.151c0.704-0.266,1.484-0.418,2.296-0.423L67.787,43.397L67.787,43.397z M50.006,11.212v0.006 h-0.015h-0.034v-0.006C39.274,11.219,29.59,15.56,22.581,22.566l0.002,0.002c-7.019,7.018-11.365,16.711-11.368,27.404h0.006v0.016 v0.033h-0.006c0.006,10.683,4.347,20.365,11.354,27.377l0.002-0.002c7.018,7.018,16.711,11.365,27.404,11.367v-0.007h0.016h0.033 v0.007c10.685-0.007,20.367-4.348,27.381-11.359c7.012-7.009,11.359-16.702,11.361-27.401H88.76v-0.015v-0.034h0.007 C88.76,39.273,84.419,29.591,77.407,22.58v-0.007C70.398,15.562,60.705,11.214,50.006,11.212L50.006,11.212z"/>
+        </svg>
+      </button>
       <input
         id="zoomSlider"
         title="Zoom"
@@ -276,10 +291,22 @@
         value="100"
         step="5"
       />
-      <button onclick="zoomPlus();" title="Zoom In">In</button>
+      <button onclick="zoomPlus();" title="Zoom In">
+        <svg id="zoom-in" viewBox="0 -25 122 140">
+          <path d="M49.991,0h0.015v0.006c13.794,0.004,26.294,5.601,35.336,14.645c9.026,9.031,14.618,21.515,14.628,35.303h0.006v0.034v0.04 h-0.006c-0.005,5.557-0.918,10.905-2.594,15.892c-0.281,0.837-0.576,1.641-0.877,2.409v0.007c-1.446,3.661-3.315,7.12-5.548,10.307 l29.08,26.14l0.018,0.015l0.157,0.146l0.012,0.012c1.641,1.563,2.535,3.656,2.648,5.779c0.11,2.1-0.538,4.248-1.976,5.971 l-0.011,0.016l-0.176,0.204l-0.039,0.046l-0.145,0.155l-0.011,0.011c-1.563,1.642-3.656,2.539-5.782,2.651 c-2.104,0.111-4.254-0.54-5.975-1.978l-0.012-0.012l-0.203-0.175l-0.029-0.024L78.764,90.865c-0.88,0.62-1.779,1.207-2.687,1.763 c-1.234,0.756-2.51,1.467-3.816,2.117c-6.699,3.342-14.266,5.223-22.27,5.223v0.006h-0.016v-0.006 c-13.797-0.005-26.297-5.601-35.334-14.644l-0.004,0.005C5.608,76.3,0.016,63.81,0.007,50.021H0v-0.033v-0.016h0.007 c0.005-13.799,5.601-26.297,14.646-35.339C23.684,5.607,36.169,0.015,49.958,0.006V0H49.991L49.991,0z M67.787,43.397 c1.21-0.007,2.353,0.312,3.322,0.872l-0.002,0.002c0.365,0.21,0.708,0.454,1.01,0.715c0.306,0.264,0.594,0.569,0.851,0.895h0.004 c0.873,1.11,1.397,2.522,1.394,4.053c-0.003,1.216-0.335,2.358-0.906,3.335c-0.454,0.78-1.069,1.461-1.791,1.996 c-0.354,0.261-0.751,0.496-1.168,0.688v0.002c-0.823,0.378-1.749,0.595-2.722,0.6l-11.051,0.08l-0.08,11.062 c-0.004,1.034-0.254,2.02-0.688,2.886c-0.188,0.374-0.417,0.737-0.678,1.074l-0.006,0.007c-0.257,0.329-0.551,0.644-0.866,0.919 c-1.169,1.025-2.713,1.649-4.381,1.649v-0.007c-0.609,0-1.195-0.082-1.743-0.232c-1.116-0.306-2.115-0.903-2.899-1.689 c-0.788-0.791-1.377-1.787-1.672-2.893v-0.006c-0.144-0.543-0.22-1.128-0.215-1.728v-0.005l0.075-10.945l-10.962,0.076 c-1.209,0.011-2.354-0.31-3.327-0.873l0.002-0.002c-0.37-0.212-0.715-0.458-1.016-0.722c-0.306-0.264-0.589-0.567-0.844-0.891 h-0.004c-0.873-1.112-1.397-2.522-1.393-4.053c0.002-1.213,0.337-2.354,0.906-3.328l-0.004-0.002 c0.376-0.642,0.869-1.225,1.442-1.714h0.004c0.574-0.489,1.236-0.883,1.942-1.151c0.704-0.266,1.484-0.418,2.296-0.423 l11.051-0.082l0.08-11.062c0.004-1.207,0.345-2.345,0.921-3.309l0.004,0.002c0.224-0.374,0.467-0.715,0.727-1.003 c0.264-0.296,0.576-0.584,0.908-0.839l0.005-0.004v0.002c1.121-0.861,2.533-1.379,4.055-1.375c1.211,0.002,2.352,0.332,3.317,0.897 c0.479,0.279,0.928,0.631,1.32,1.025l0.004-0.004c0.383,0.383,0.73,0.834,1.019,1.333c0.56,0.968,0.879,2.104,0.868,3.304 l-0.075,10.942L67.787,43.397L67.787,43.397z M50.006,11.212v0.006h-0.015h-0.034v-0.006C39.274,11.219,29.59,15.56,22.581,22.566 l0.002,0.002c-7.019,7.018-11.365,16.711-11.368,27.404h0.006v0.016v0.033h-0.006c0.006,10.683,4.347,20.365,11.354,27.377 l0.002-0.002c7.018,7.018,16.711,11.365,27.404,11.367v-0.007h0.016h0.033v0.007c10.685-0.007,20.367-4.348,27.381-11.359 c7.012-7.009,11.359-16.702,11.361-27.401H88.76v-0.015v-0.034h0.007C88.76,39.273,84.419,29.591,77.407,22.58v-0.007 C70.398,15.562,60.705,11.214,50.006,11.212L50.006,11.212z"/>
+        </svg>
+      </button>
       <span id="percent"></span>
-      <button id="zoomFit" onclick="zoomFit()" title="Fit to window">
-        Fit to window
+      <button id="zoomFit" onclick="zoomFit()" title="Zoom to Fit">
+        <svg id="zoom-to-fit" viewBox="0 -25 122 140">
+          <title>zoom-to-fit</title>
+          <path d="M86.64,12a6,6,0,1,1,0-12H113.8a6,6,0,0,1,6,6V33.66a6,6,0,1,1-12,0V20.45L84.12,44.23a6,6,0,0,1-8.47-8.42L99.41,12ZM12,36.24a6,6,0,1,1-12,0V9.08a6,6,0,0,1,6-6H33.66a6,6,0,1,1,0,12H20.45l23.77,23.7a6,6,0,1,1-8.41,8.47L12,23.47V36.24Zm24.27,64.92a6,6,0,0,1,0,12H9.08a6,6,0,0,1-6-6V79.47a6,6,0,1,1,12,0V92.68l23.7-23.77a6,6,0,0,1,8.47,8.41L23.47,101.16Zm74.67-24.27a6,6,0,0,1,12,0v27.16a6,6,0,0,1-6,6H89.22a6,6,0,1,1,0-12h13.21L78.65,74.37a6,6,0,0,1,8.42-8.47l23.84,23.76V76.89Z"/>
+      </svg>
+      </button>
+      <button id="refresh" onclick="refreshPage()" title="Refresh Page">
+        <svg id="refresh" viewBox="0 -15 122 140">
+          <path d="M16.08,59.26A8,8,0,0,1,0,59.26a59,59,0,0,1,97.13-45V8a8,8,0,1,1,16.08,0V33.35a8,8,0,0,1-8,8L80.82,43.62a8,8,0,1,1-1.44-15.95l8-.73A43,43,0,0,0,16.08,59.26Zm22.77,19.6a8,8,0,0,1,1.44,16l-10.08.91A42.95,42.95,0,0,0,102,63.86a8,8,0,0,1,16.08,0A59,59,0,0,1,22.3,110v4.18a8,8,0,0,1-16.08,0V89.14h0a8,8,0,0,1,7.29-8l25.31-2.3Z"/>
+      </svg>
       </button>
     </div>
     <div id="previewWrapper" style="margin-top: 45px"></div>

diff --git a/src/browserWindow.ts b/src/browserWindow.ts
@@ -2,7 +2,7 @@ import { existsSync, readFileSync } from "fs";
 import * as path from "path";
 import { Uri, ViewColumn, Webview, WebviewPanel, window, workspace } from "vscode";
 import { D2P } from "./docToPreviewGenerator";
-import { extContext } from "./extension";
+import { extContext, previewGenerator } from "./extension";
 import { util } from "./utility";
 
 /**
@@ -55,6 +55,11 @@ export class BrowserWindow {
     this.webViewPanel.webview.onDidReceiveMessage(
       (message) => {
         switch (message.command) {
+          case "refreshPage":
+            {
+              previewGenerator.generateAll();
+            }
+            break;
           case "clickOnTag_A": {
             const f = message.link.trim().toLowerCase();
             const isWeb: boolean = f.startsWith("http://") || f.startsWith("https://");

diff --git a/src/docToPreviewGenerator.ts b/src/docToPreviewGenerator.ts
@@ -50,6 +50,12 @@ export class DocToPreviewGenerator {
     return this.mapOfConnection.get(inDoc);
   }
 
+  generateAll(): void {
+    this.mapOfConnection.forEach((_: D2P, td: TextDocument) => {
+      this.generate(td);
+    });
+  }
+
   generate(inDoc: TextDocument): void {
     const trkObj = this.getTrackObject(inDoc);
     // if we can't find our tracking info, no sense doing anything

diff --git a/src/extension.ts b/src/extension.ts
@@ -28,10 +28,9 @@ import { util } from "./utility";
 import path = require("path");
 import { TextEncoder } from "util";
 
-const d2Ext = "d2";
-const d2Lang = "d2";
-const previewGenerator: DocToPreviewGenerator = new DocToPreviewGenerator();
-
+export const d2Ext = "d2";
+export const d2Lang = "d2";
+export const previewGenerator: DocToPreviewGenerator = new DocToPreviewGenerator();
 export const d2ConfigSection = "D2";
 export let ws: WorkspaceConfiguration = workspace.getConfiguration(d2ConfigSection);
 export const outputChannel: D2OutputChannel = new D2OutputChannel();
@@ -239,9 +238,9 @@ export function activate(context: ExtensionContext): any {
   // Return our markdown renderer
   return {
     // Sets up our ability to render for markdown files
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    extendMarkdownIt(md: any) {
-      return extendMarkdownItWithD2(md);
+    extendMarkdownIt(md: markdownit) {
+      extendMarkdownItWithD2(md);
+      return md;
     },
   };
 }

diff --git a/src/refreshTimer.ts b/src/refreshTimer.ts
@@ -13,7 +13,7 @@ import { ws } from "./extension";
 type TimerCallback = () => void;
 
 export class RefreshTimer {
-  timerId?: NodeJS.Timer;
+  timerId?: NodeJS.Timeout;
   callback: TimerCallback;
   interval = 0;