add options for extended and standard ascii

Author: alixander

src/js/modules/editor.js

@@ -527,6 +527,7 @@ export default {
   displayCompileErrors,
   clearCompileErrors,
   getDiagramSVG,
+  getScript,
   getEditor,
   compile,
 };

src/js/modules/export.js

@@ -25,7 +25,7 @@ function init() {
 
 function handleExportClick() {
   if (Sketch.getASCII()) {
-    copyASCII();
+    toggleASCIIMenu();
   } else {
     toggleMenu();
   }
@@ -40,10 +40,60 @@ function updateExportButton() {
   }
 
   if (Sketch.getASCII()) {
-    exportBtn.textContent = "Copy";
-    exportMenu.style.display = "none";
+    exportBtn.innerHTML = 'Copy<img src="assets/icons/down.svg" class="btn-icon" />';
+    setupASCIIMenu();
   } else {
     exportBtn.innerHTML = 'Export<img src="assets/icons/down.svg" class="btn-icon" />';
+    setupExportMenu();
+  }
+}
+
+function setupASCIIMenu() {
+  const exportMenu = document.getElementById("export-menu");
+  exportMenu.innerHTML = `
+    <div id="export-menu-ascii-extended" class="btn-menu-item">Extended ASCII</div>
+    <div id="export-menu-ascii-standard" class="btn-menu-item">Standard ASCII</div>
+  `;
+
+  document
+    .getElementById("export-menu-ascii-extended")
+    .addEventListener("click", copyASCIIExtended);
+  document
+    .getElementById("export-menu-ascii-standard")
+    .addEventListener("click", copyASCIIStandard);
+}
+
+function setupExportMenu() {
+  const exportMenu = document.getElementById("export-menu");
+  exportMenu.innerHTML = `
+    <div id="export-menu-png" class="btn-menu-item">PNG</div>
+    <div id="export-menu-svg" class="btn-menu-item">SVG</div>
+    <div id="export-menu-png-clipboard" class="btn-menu-item">PNG (copy)</div>
+    <div id="export-menu-svg-clipboard" class="btn-menu-item">SVG (copy)</div>
+  `;
+
+  document.getElementById("export-menu-png").addEventListener("click", exportPNG);
+  document.getElementById("export-menu-svg").addEventListener("click", exportSVG);
+
+  if (!Mobile.is()) {
+    document
+      .getElementById("export-menu-png-clipboard")
+      .addEventListener("click", exportPNGClipboard);
+    document
+      .getElementById("export-menu-svg-clipboard")
+      .addEventListener("click", exportSVGClipboard);
+  } else {
+    document.getElementById("export-menu-png-clipboard").style.display = "none";
+    document.getElementById("export-menu-svg-clipboard").style.display = "none";
+  }
+}
+
+function toggleASCIIMenu() {
+  const menu = document.getElementById("export-menu");
+  if (menu.style.display == "none") {
+    menu.style.display = "block";
+  } else {
+    menu.style.display = "none";
   }
 }
 
@@ -226,21 +276,69 @@ async function exportPNGClipboard() {
   }, "image/png");
 }
 
-async function copyASCII() {
-  const ascii = Editor.getDiagramSVG();
-  if (ascii == "") {
-    Alert.show(`Compile a diagram to copy`, 4000);
-    return;
+async function copyASCIIExtended() {
+  hideMenu();
+  const ascii = await renderASCII("extended");
+  if (!ascii) return;
+
+  try {
+    await navigator.clipboard.writeText(ascii);
+    Alert.show(`Extended ASCII copied to clipboard`, 2000, "success");
+  } catch (e) {
+    Alert.show(`Failed to copy to clipboard: ${e}`, 4000);
   }
+}
+
+async function copyASCIIStandard() {
+  hideMenu();
+  const ascii = await renderASCII("standard");
+  if (!ascii) return;
 
   try {
     await navigator.clipboard.writeText(ascii);
-    Alert.show(`Copied to clipboard`, 2000, "success");
+    Alert.show(`Standard ASCII copied to clipboard`, 2000, "success");
   } catch (e) {
     Alert.show(`Failed to copy to clipboard: ${e}`, 4000);
   }
 }
 
+async function renderASCII(mode) {
+  const script = Editor.getScript();
+  if (!script) {
+    Alert.show(`Compile a diagram to copy`, 4000);
+    return null;
+  }
+
+  try {
+    const compileRequest = {
+      fs: { index: script },
+      options: {
+        layout: "elk",
+        sketch: false,
+        ascii: true,
+        asciiMode: mode,
+        forceAppendix: false,
+        target: "",
+        animateInterval: 0,
+        salt: "",
+        noXMLTag: false,
+      },
+    };
+
+    const compiled = await window.d2.compile(compileRequest);
+    const renderOptions = {
+      ascii: true,
+      asciiMode: mode,
+      center: true,
+    };
+
+    return await window.d2.render(compiled.diagram, renderOptions);
+  } catch (err) {
+    Alert.show(`Failed to render ASCII: ${err.message}`, 4000);
+    return null;
+  }
+}
+
 export default {
   init,
   updateExportButton,