feat: Add GeoJSON, TopoJSON, and ASCII STL interactive renderers

desktop-app/prepare.js

@@ -188,12 +188,61 @@ async function prepareOfflineDependencies() {
   downloads.push(downloadFile("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2", path.join(fontDir, "bootstrap-icons.woff2"), null));
   downloads.push(downloadFile("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff", path.join(fontDir, "bootstrap-icons.woff"), null));
 
+  // Create Leaflet images directory for offline map icons
+  const leafletImagesDir = path.join(LIBS_DIR, "images");
+  fs.mkdirSync(leafletImagesDir, { recursive: true });
+
   // Dynamic / Lazy-loaded dependencies to download manually for offline capability
   const dynamicLibs = [
     {
       url: "https://cdnjs.cloudflare.com/ajax/libs/abcjs/6.5.2/abcjs-basic-min.js",
       dest: path.join(LIBS_DIR, "abcjs-basic-min.js"),
       hash: "sha512-QJ21PAOSw5KSiQ12gnP74qwLRAEn9GZtrFI0yY1akCLLpcEaC7xwZ7BiONZ/7pyrfUADyh7sHnI3SYHifO+tmg=="
+    },
+    {
+      url: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js",
+      dest: path.join(LIBS_DIR, "leaflet.js"),
+      hash: null
+    },
+    {
+      url: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css",
+      dest: path.join(LIBS_DIR, "leaflet.css"),
+      hash: null
+    },
+    {
+      url: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon.png",
+      dest: path.join(leafletImagesDir, "marker-icon.png"),
+      hash: null
+    },
+    {
+      url: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon-2x.png",
+      dest: path.join(leafletImagesDir, "marker-icon-2x.png"),
+      hash: null
+    },
+    {
+      url: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png",
+      dest: path.join(leafletImagesDir, "marker-shadow.png"),
+      hash: null
+    },
+    {
+      url: "https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js",
+      dest: path.join(LIBS_DIR, "topojson.min.js"),
+      hash: null
+    },
+    {
+      url: "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js",
+      dest: path.join(LIBS_DIR, "three.min.js"),
+      hash: null
+    },
+    {
+      url: "https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/STLLoader.js",
+      dest: path.join(LIBS_DIR, "STLLoader.js"),
+      hash: null
+    },
+    {
+      url: "https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js",
+      dest: path.join(LIBS_DIR, "OrbitControls.js"),
+      hash: null
     }
   ];
 

desktop-app/resources/index.html

@@ -878,6 +878,37 @@ <h3 class="modal-section-title">Open-source credits</h3>
         </div>
     </div>
 
+    <!-- STL Zoom Modal -->
+    <div id="stl-zoom-modal" role="dialog" aria-modal="true" aria-label="STL 3D model zoom view" aria-hidden="true">
+        <div class="stl-modal-content">
+            <div class="stl-modal-header">
+                <span>3D Model Viewer</span>
+                <button class="stl-modal-close" id="stl-zoom-modal-close" title="Close" aria-label="Close 3D modal">
+                    <i class="bi bi-x-lg"></i>
+                </button>
+            </div>
+            <div class="stl-modal-viewer" id="stl-modal-viewer"></div>
+            <div class="stl-modal-controls">
+                <button class="stl-toolbar-btn" id="stl-modal-btn-solid" title="Solid Mode">
+                    <i class="bi bi-circle-fill me-1"></i>Solid
+                </button>
+                <button class="stl-toolbar-btn" id="stl-modal-btn-angle" title="Surface Angle Mode">
+                    <i class="bi bi-circle-half me-1"></i>Surface Angle
+                </button>
+                <button class="stl-toolbar-btn" id="stl-modal-btn-wireframe" title="Wireframe Mode">
+                    <i class="bi bi-grid-3x3 me-1"></i>Wireframe
+                </button>
+                <div class="stl-divider"></div>
+                <button class="stl-toolbar-btn" id="stl-modal-btn-copy" title="Copy Image">
+                    <i class="bi bi-clipboard-image me-1"></i>Copy
+                </button>
+                <button class="stl-toolbar-btn" id="stl-modal-btn-png" title="Download PNG">
+                    <i class="bi bi-file-image me-1"></i>PNG
+                </button>
+            </div>
+        </div>
+    </div>
+
     <script type="text/markdown" id="default-markdown">---
 title: Welcome to Markdown Viewer
 description: A GitHub-style Markdown renderer with live preview, math, diagrams, and export support.

desktop-app/resources/js/preview-worker.js

@@ -4,6 +4,9 @@ let librariesLoaded = false;
 let markedConfigured = false;
 let mermaidIdCounter = 0;
 let abcIdCounter = 0;
+let geojsonIdCounter = 0;
+let topojsonIdCounter = 0;
+let stlIdCounter = 0;
 
 const markedOptions = {
   gfm: true,
@@ -318,6 +321,21 @@ function configureMarked() {
       return `<div class="abc-container is-loading"><div class="abc-notation" id="${uniqueId}" data-original-code="${encodeURIComponent(code)}">${escapeHtml(code)}</div></div>`;
     }
 
+    if (language === "geojson") {
+      const uniqueId = `geojson-map-worker-${geojsonIdCounter++}`;
+      return `<div class="geojson-container is-loading"><div class="geojson-map" id="${uniqueId}" data-original-code="${encodeURIComponent(code)}">${escapeHtml(code)}</div></div>`;
+    }
+
+    if (language === "topojson") {
+      const uniqueId = `topojson-map-worker-${topojsonIdCounter++}`;
+      return `<div class="topojson-container is-loading"><div class="topojson-map" id="${uniqueId}" data-original-code="${encodeURIComponent(code)}">${escapeHtml(code)}</div></div>`;
+    }
+
+    if (language === "stl") {
+      const uniqueId = `stl-viewer-worker-${stlIdCounter++}`;
+      return `<div class="stl-container is-loading"><div class="stl-viewer" id="${uniqueId}" data-original-code="${encodeURIComponent(code)}">${escapeHtml(code)}</div></div>`;
+    }
+
     if (language === "math") {
       return `<div class="math-block">$$\n${code}\n$$</div>\n`;
     }
@@ -495,6 +513,9 @@ self.onmessage = function(event) {
     ensureLibraries(options.libraryUrls || {});
     mermaidIdCounter = 0;
     abcIdCounter = 0;
+    geojsonIdCounter = 0;
+    topojsonIdCounter = 0;
+    stlIdCounter = 0;
     const result = renderSegmentedMarkdown(data.markdown || "", options);
     self.postMessage({
       type: "render-result",