markup mindmap

src/components/mindmap/mindmap-hooks.tsx

+
 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>
   );

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 ?? []);