diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/wmap.js | 37 |
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)); |