Merge pull request #3880 from ZenUml/defects/issue-3878
Defects/issue 3878
This commit is contained in:
commit
f2ee20fdf5
|
@ -20,11 +20,6 @@ const props = defineProps({
|
||||||
const svg = ref(null);
|
const svg = ref(null);
|
||||||
let mut = null;
|
let mut = null;
|
||||||
|
|
||||||
const mermaidConfig = {
|
|
||||||
securityLevel: 'loose',
|
|
||||||
startOnLoad: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
mut = new MutationObserver(() => renderChart());
|
mut = new MutationObserver(() => renderChart());
|
||||||
mut.observe(document.documentElement, { attributes: true });
|
mut.observe(document.documentElement, { attributes: true });
|
||||||
|
@ -58,9 +53,20 @@ onUnmounted(() => mut.disconnect());
|
||||||
const renderChart = async () => {
|
const renderChart = async () => {
|
||||||
console.log('rendering chart' + props.id + props.graph);
|
console.log('rendering chart' + props.id + props.graph);
|
||||||
const hasDarkClass = document.documentElement.classList.contains('dark');
|
const hasDarkClass = document.documentElement.classList.contains('dark');
|
||||||
mermaidConfig.theme = hasDarkClass ? 'dark' : 'default';
|
const mermaidConfig = {
|
||||||
|
securityLevel: 'loose',
|
||||||
|
startOnLoad: false,
|
||||||
|
theme: hasDarkClass ? 'dark' : 'default',
|
||||||
|
};
|
||||||
|
|
||||||
console.log({ mermaidConfig });
|
console.log({ mermaidConfig });
|
||||||
svg.value = await render(props.id, decodeURIComponent(props.graph), mermaidConfig);
|
let svgCode = await render(props.id, decodeURIComponent(props.graph), mermaidConfig);
|
||||||
|
// This is a hack to force v-html to re-render, otherwise the diagram disappears
|
||||||
|
// when **switching themes** or **reloading the page**.
|
||||||
|
// The cause is that the diagram is deleted during rendering (out of Vue's knowledge).
|
||||||
|
// Because svgCode does NOT change, v-html does not re-render.
|
||||||
|
// This is not required for all diagrams, but it is required for c4c, mindmap and zenuml.
|
||||||
|
const salt = Math.random().toString(36).substring(7);
|
||||||
|
svg.value = `${svgCode} <span style="display: none">${salt}</span>`;
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue