优化思维导图显示

lib/modules/meeting/views/mind_map_tab.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get/get.dart';
 import 'package:webview_flutter/webview_flutter.dart';
 
@@ -27,14 +28,11 @@ class _MindMapTabState extends State<MindMapTab>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>MindMap</title>
-  <script>
-    window.markmap = {
-      autoLoader: {
-        toolbar: true,
-      },
-    };
-  </script>
-  <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@latest"></script>
+  <script src="https://cdn.jsdelivr.net/npm/markmap-lib"></script>
+  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
+  <script src="https://cdn.jsdelivr.net/npm/markmap-view"></script>
+  <script src="https://cdn.jsdelivr.net/npm/markmap-toolbar"></script>
+  <script src="https://cdn.jsdelivr.net/npm/save-svg-as-png@1.4.17/lib/saveSvgAsPng.min.js"></script>
   <style>
     html,
     body {
@@ -45,51 +43,97 @@ class _MindMapTabState extends State<MindMapTab>
       overflow: hidden;
     }
 
-    .markmap {
+    .mind-map {
       width: 100%;
       height: 100%;
       position: relative;
       overflow: hidden;
     }
 
-    .markmap>svg {
+    .mind-map #markmap {
       width: 100%;
       height: 100%;
     }
 
-    .markmap>.mm-toolbar {
-      top: 20px !important;
-      bottom: initial !important;
+    .mind-map .mm-toolbar {
+      height: 30px;
+      background: #fff;
+      border: 1px solid #d0d5dd;
+      border-radius: 8px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      position: absolute;
+      top: 20px;
+      right: 20px;
     }
 
-    .markmap>.mm-toolbar>.mm-toolbar-brand {
-      display: none;
+    .mind-map .mm-toolbar-item {
+      width: 24px;
+      height: 24px;
+      border-radius: 6px;
+      cursor: pointer;
+      color: #101828;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
-    .markmap>.mm-toolbar>.mm-toolbar-item:nth-child(2) {
-      margin-left: 0;
+    .mind-map .mm-toolbar-item.active {
+      background-color: #d4d4d8;
     }
   </style>
 </head>
 
 <body>
-<div class="markmap">
-<script type="text/template">
----
-markmap:
-  maxWidth: 300
-  colorFreezeLevel: 2
-  initialExpandLevel: 3
----
-${_meetingDetailsController.meetingDetails.value.summary}
-</script>
-</div>
+  <div class="mind-map">
+    <svg id="markmap"></svg>
+    <div id="toolbar"></div>
+  </div>
+  <script>
+    const { Transformer, Markmap, Toolbar } = window.markmap;
+    const transformer = new Transformer();
+    const { root } = transformer.transform(`${_meetingDetailsController.meetingDetails.value.summary}`);
+    let mm = Markmap.create('#markmap', {
+      maxWidth: 300,
+      initialExpandLevel: 3,
+    }, root);
+    const toolbar = Toolbar.create(mm);
+    toolbar.showBrand = false
+    toolbar.render();
+    const el = toolbar.el;
+    const toolbarElement = document.getElementById('toolbar');
+    toolbarElement.append(el);
+
+    async function captureImage() {
+      const markmapElement = document.getElementById('markmap');
+      markmapElement.style.height = `${1.sw}px`;
+      await mm.fit();
+      const options = {
+        scale: 2,
+        backgroundColor: '#FFFFFF',
+        encoderOptions: 1,
+      };
+      const uri = await svgAsPngUri(markmapElement, options);
+      markmapElement.style.height = '100%';
+      await mm.fit();
+      if (window.ImageChannel) {
+        window.ImageChannel.postMessage(uri);
+      }
+    }
+  </script>
 </body>
 
 </html>
     ''';
     _controller = WebViewController()
       ..setJavaScriptMode(JavaScriptMode.unrestricted)
+      ..addJavaScriptChannel(
+        'ImageChannel',
+        onMessageReceived: (message) {
+          print('-------${message.message}------');
+        },
+      )
       ..setBackgroundColor(Colors.transparent)
       ..loadHtmlString(html);
   }
@@ -100,8 +144,20 @@ ${_meetingDetailsController.meetingDetails.value.summary}
   @override
   Widget build(BuildContext context) {
     super.build(context);
-    return WebViewWidget(
-      controller: _controller,
+    return Column(
+      children: [
+        InkWell(
+          child: Text('保存111111'),
+          onTap: () async {
+            await _controller.runJavaScript('captureImage()');
+          },
+        ),
+        Expanded(
+          child: WebViewWidget(
+            controller: _controller,
+          ),
+        ),
+      ],
     );
   }
 }