From bbd637806504e762dd20dbc445ba961d8a137039 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 19 Feb 2023 20:09:42 +0530 Subject: [PATCH] v10 changes --- package.json | 2 +- src/lib/components/View.svelte | 36 +++++++++++++++++----------------- src/lib/util/mermaid.ts | 14 ++++++------- yarn.lock | 8 ++++---- 4 files changed, 30 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index 28ab2a99..a94c06d2 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "daisyui": "2.50.0", "dayjs": "^1.11.7", "js-base64": "3.7.4", - "mermaid": "10.0.0-rc.2", + "mermaid": "10.0.0-rc.3", "monaco-editor": "0.34.1", "monaco-mermaid": "1.0.8", "pako": "2.1.0", diff --git a/src/lib/components/View.svelte b/src/lib/components/View.svelte index 0fa6ab2c..5bdd20c3 100644 --- a/src/lib/components/View.svelte +++ b/src/lib/components/View.svelte @@ -79,27 +79,27 @@ panZoomEnabled = state.panZoom; const scroll = view.parentElement!.scrollTop; delete container.dataset.processed; - await renderDiagram( + const { svg, bindFunctions } = await renderDiagram( Object.assign({}, JSON.parse(state.mermaid)) as MermaidConfig, code, - 'graph-div', - (svgCode, bindFunctions) => { - if (svgCode.length > 0) { - handlePanZoom(state); - container.innerHTML = svgCode; - console.log({ svgCode }); - const graphDiv = document.getElementById('graph-div'); - if (!graphDiv) { - throw new Error('graph-div not found'); - } - graphDiv.setAttribute('height', '100%'); - graphDiv.style.maxWidth = '100%'; - if (bindFunctions) { - bindFunctions(graphDiv); - } - } - } + 'graph-div' ); + + if (svg.length > 0) { + handlePanZoom(state); + container.innerHTML = svg; + console.log({ svg }); + const graphDiv = document.getElementById('graph-div'); + if (!graphDiv) { + throw new Error('graph-div not found'); + } + graphDiv.setAttribute('height', '100%'); + graphDiv.style.maxWidth = '100%'; + if (bindFunctions) { + bindFunctions(graphDiv); + } + } + view.parentElement!.scrollTop = scroll; error = false; } else if (manualUpdate) { diff --git a/src/lib/util/mermaid.ts b/src/lib/util/mermaid.ts index e3adc0f5..53c00788 100644 --- a/src/lib/util/mermaid.ts +++ b/src/lib/util/mermaid.ts @@ -1,16 +1,16 @@ -import mermaid, { type MermaidConfig } from 'mermaid'; +import mermaid from 'mermaid'; +import type { MermaidConfig, RenderResult } from 'mermaid'; export const render = async ( config: MermaidConfig, code: string, - id: string, - callback: Parameters[2] -): Promise => { + id: string +): Promise => { // Should be able to call this multiple times without any issues. mermaid.initialize(config); - await mermaid.mermaidAPI.renderAsync(id, code, callback); + return await mermaid.render(id, code); }; -export const parse = async (code: string): Promise => { - return await mermaid.parseAsync(code); +export const parse = async (code: string): Promise => { + return await mermaid.parse(code); }; diff --git a/yarn.lock b/yarn.lock index f239fdda..dd81ef19 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3676,10 +3676,10 @@ merge2@^1.3.0, merge2@^1.4.1: resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz" integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg== -mermaid@10.0.0-rc.2: - version "10.0.0-rc.2" - resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.0.0-rc.2.tgz#e4fc043cfb4be4b887edc7638e505ffcb0eb0d68" - integrity sha512-L7ecv8yjNq2Mud7kwelzKuQiyxODOKVjTHcZnrvaJWVFfdlvIYt75bZjKn42cHA3GCJThRaEBc8Ow6la8WUscw== +mermaid@10.0.0-rc.3: + version "10.0.0-rc.3" + resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.0.0-rc.3.tgz#3ad25014902468b0a8bec9bab295ac7007c49475" + integrity sha512-gm9bnBOlJbB65trwT2nUiNw26wQ78HKINLua033bPDotjRc2iR6q1Owl8WClS4xM0Kd1n1N1oQFqSv3RFyKbCQ== dependencies: "@braintree/sanitize-url" "^6.0.0" cytoscape "^3.23.0"