From 4472b1921c43a4e8411542552763f268f5fd2e89 Mon Sep 17 00:00:00 2001 From: Marek Skrobacki Date: Tue, 18 Jan 2022 08:39:41 +0000 Subject: [PATCH] kroki: generate URL / compressed diagram on-demand Converting the diagram to base64 and compression are the operations that might be CPU heavy, it is better to perform these only when actually needed. After this commit, the URL will be generated only after the button is pressed instead of after every change to the text. --- src/lib/components/actions.svelte | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/lib/components/actions.svelte b/src/lib/components/actions.svelte index 59d2f2b3..5f05714d 100644 --- a/src/lib/components/actions.svelte +++ b/src/lib/components/actions.svelte @@ -140,6 +140,13 @@ return result; }; + const onKrokiClick = () => { + const stateCopy = JSON.parse(JSON.stringify($codeStore)); + const krokiCode = getKrokiCode(stateCopy.code); + const krokiUrl = `${krokiRendererUrl}/mermaid/svg/${krokiCode}`; + return window.open(krokiUrl, '_blank'); + }; + const getKrokiCode = (source) => { const data = textEncode(source); const compressed = pako.deflate(data, { level: 9, to: 'string' }); @@ -149,7 +156,6 @@ let iUrl: string; let svgUrl: string; - let krokiUrl: string; let mdCode: string; let imagemodeselected = 'auto'; let userimagesize = 1080; @@ -164,10 +170,8 @@ stateCopy.mermaid = JSON.parse(stateCopy.mermaid); } const b64Code = toBase64(JSON.stringify(stateCopy), true); - const krokiCode = getKrokiCode(stateCopy.code); iUrl = `${rendererUrl}/img/${b64Code}`; svgUrl = `${rendererUrl}/svg/${b64Code}`; - krokiUrl = `${krokiRendererUrl}/mermaid/svg/${krokiCode}`; mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#${encodedState})`; }); @@ -191,8 +195,8 @@ -