Use SVG rendering1.1.0

1 files changed, 21 insertions, 16 deletions

diff --git a/src/wmap.js b/src/wmap.js
index 4532368..6e9606e 100644
--- a/src/wmap.js
+++ b/src/wmap.js
@@ -1,5 +1,5 @@
 import { parse } from "wmap-parser";
-import { renderToCanvas, StageType } from "wmap-renderer-canvas";
+import { renderToSVG, StageType } from "wmap-renderer-svg";
 import DOMPurify from "isomorphic-dompurify";
 
 const internals = {
@@ -45,17 +45,13 @@ const internals = {
     async renderImage(source, dimensions) {
         const parsedText = parse(source);
 
-        const canvas = document.createElement("canvas");
-        canvas.width = dimensions.map.mapWidth + 2 * dimensions.map.padding;
-        canvas.height = dimensions.map.mapHeight + 2 * dimensions.map.padding;
-
         // Further Improvements. The zoomed version could have a drop down
         // to show the different StageTypes and allow one to see the image
         // with the different types.
         // This  could also potentially be in the toolbar that appears
         // on hover to also show this in the download. It requires some
         // thought on what the right interaction model would be.
-        await renderToCanvas(parsedText, canvas, StageType.ACTIVITIES, {
+        return await renderToSVG(parsedText, StageType.ACTIVITIES, {
             theme: {
                 sizes: {
                     ...dimensions.map,
@@ -65,30 +61,32 @@ const internals = {
                 },
             },
         });
-        return canvas.toDataURL();
     },
 
     // Starts a download of the image.
     download(filename, text) {
+        const svgWithNamespace = text.replace(
+            "<svg",
+            '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"',
+        );
+        const svgContent = '<?xml version="1.0" encoding="UTF-8"?>\n' + svgWithNamespace;
+        const blob = new Blob([svgContent], { type: "image/svg+xml" });
+        const url = URL.createObjectURL(blob);
         const element = document.createElement("a");
-        element.setAttribute("href", text);
+        element.setAttribute("href", url);
         element.setAttribute("download", filename);
         element.style.display = "none";
         document.body.appendChild(element);
         element.click();
         document.body.removeChild(element);
+        URL.revokeObjectURL(url);
     },
 
     // Replaces the image in a window. Intended for use in a dialog.
     replaceImage(window, imageData) {
         try {
             const $container = window.document.querySelector("main");
-            $container.querySelectorAll("img").forEach((img) => img.remove());
-
-            const image = document.createElement("img");
-            image.src = imageData;
-            image.alt = "Wardley map rendered from source.";
-            $container.appendChild(image);
+            $container.innerHTML = imageData;
         } catch (error) {
             console.error(
                 "wmap: Could not replace image. The DOM wasn't ready!",
@@ -148,7 +146,7 @@ const bind = async function bind($item, item) {
                         internals.kDimensions.full,
                     );
                     const slug = $item.parents(".page").attr("id");
-                    internals.download(`${slug}.png`, imageData);
+                    internals.download(`${slug}.svg`, imageData);
                 }
                 break;
             case "zoom":
@@ -202,7 +200,7 @@ const bind = async function bind($item, item) {
             internals.kDimensions.thumbnail,
         );
         $item.find(".viewer").html(`
-            <article class="wardley-map"><img src="${thumbnailData}"></article>
+            <article class="wardley-map thumbnail">${thumbnailData}</article>
             <nav class="actions">
                 <menu>
                     <li><a href="#" data-action="download" title="Download"><img width="18" height="18" alt="download" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="grey"><g><rect fill="none" height="24" width="24"/></g><g><path d="M5,20h14v-2H5V20z M19,9h-4V3H9v6H5l7,7L19,9z"/></g></svg>'></a></li>
@@ -210,6 +208,13 @@ const bind = async function bind($item, item) {
                 </menu>
             </nav>
             `);
+
+        $item.find('svg text:gt(7)').on('click', function(event) {
+            const title = this.innerHTML;
+            let $page = $item.parents('.page')
+            wiki.pageHandler.context = wiki.lineup.atKey($page.data('key')).getContext()
+            wiki.doInternalLink(title, event.shiftKey ? null : $page)
+        });
     } catch (err) {
         console.log("Failed to parse wardley map: ", err);
         $item.html(internals.message(err.message));