From 8ee05a9a51d8adf36cb5f1be884651e0292f4be5 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Sat, 27 Jul 2024 20:39:39 +0200
Subject: [PATCH] markup mindmap
---
src/components/mindmap/mindmap-hooks.tsx | 44 +++++++++++++++---------
src/components/mindmap/mindmap.ts | 6 ++--
2 files changed, 31 insertions(+), 19 deletions(-)
diff --git a/src/components/mindmap/mindmap-hooks.tsx b/src/components/mindmap/mindmap-hooks.tsx
index e3d0c389..a13d7a8b 100644
--- a/src/components/mindmap/mindmap-hooks.tsx
+++ b/src/components/mindmap/mindmap-hooks.tsx
@@ -1,30 +1,43 @@
+
import React, { useState, useRef, useEffect } from 'react';
import { Markmap } from 'markmap-view';
import { transformer } from './mindmap';
import 'markmap-toolbar/dist/style.css';
-const initValue = `# markmap
-
-- beautiful
-- useful
-- easy
-- interactive
+const initValue = `# Stakeholders
+- Patients
+ - hi
+- Industry
+- Academia
+- Medical Professionals
`;
-
-
export default function MarkmapHooks() {
- const [value, setValue] = useState(initValue);
+ const [value] = useState(initValue);
// Ref for SVG element
- const refSvg = useRef<SVGSVGElement>();
+ const refSvg = useRef<SVGSVGElement>(null); // Initialize with null
// Ref for markmap object
- const refMm = useRef<Markmap>();
+ const refMm = useRef<Markmap | null>(null); // Initialize with null
useEffect(() => {
// Create markmap and save to refMm
- if (refMm.current) return;
+ if (refMm.current || !refSvg.current) return; // Add null check
const mm = Markmap.create(refSvg.current);
refMm.current = mm;
+
+ // Add double-click event listener to prevent zoom
+ const svgElement = refSvg.current;
+ if (svgElement) {
+ const handleDoubleClick = (event: MouseEvent) => {
+ event.preventDefault();
+ };
+ svgElement.addEventListener('dblclick', handleDoubleClick);
+
+ // Cleanup event listener on unmount
+ return () => {
+ svgElement.removeEventListener('dblclick', handleDoubleClick);
+ };
+ }
}, [refSvg.current]);
useEffect(() => {
@@ -33,15 +46,12 @@ export default function MarkmapHooks() {
if (!mm) return;
const { root } = transformer.transform(value);
mm.setData(root);
- mm.fit();
+ mm.fit();
}, [refMm.current, value]);
-
-
return (
<React.Fragment>
- <div className="flex-1">
- </div>
+ <div className="flex-1"></div>
<svg className="flex-1" ref={refSvg} />
</React.Fragment>
);
diff --git a/src/components/mindmap/mindmap.ts b/src/components/mindmap/mindmap.ts
index 2e4aeb1c..bb0321b4 100644
--- a/src/components/mindmap/mindmap.ts
+++ b/src/components/mindmap/mindmap.ts
@@ -3,5 +3,7 @@ import { Transformer } from 'markmap-lib';
export const transformer = new Transformer();
const { scripts, styles } = transformer.getAssets();
-loadCSS(styles);
-loadJS(scripts);
+
+// Provide default empty array if styles or scripts are undefined
+loadCSS(styles ?? []);
+loadJS(scripts ?? []);
--
GitLab