From e063724ab6fcb6db82b5f6711a62464baeb48cd5 Mon Sep 17 00:00:00 2001
From: wanghao1993 <whao53333@gmail.com>
Date: Sun, 17 Sep 2023 18:42:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AEfit=EF=BC=8C=E6=94=AF=E6=8C=81=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=8C=96=E7=9A=84=E6=97=B6=E5=80=99=E6=98=AF=E5=90=A6?=
 =?UTF-8?q?fit=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simple-mind-map/index.js                      |  7 ++-
 .../src/constants/defaultOptions.js           |  4 +-
 web/src/pages/Edit/components/Edit.vue        | 56 +++++++++----------
 3 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js
index e1556230..f5296e18 100644
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -36,7 +36,8 @@ class MindMap {
     // 画布宽高
     this.width = this.elRect.width
     this.height = this.elRect.height
-    if (this.width <= 0 || this.height <= 0) throw new Error('容器元素el的宽高不能为0')
+    if (this.width <= 0 || this.height <= 0)
+      throw new Error('容器元素el的宽高不能为0')
 
     // 添加css
     this.cssEl = null
@@ -87,7 +88,7 @@ class MindMap {
     })
 
     // 初始渲染
-    this.render()
+    this.render(this.opt.fit ? () => this.view.fit() : () => {})
     setTimeout(() => {
       this.command.addHistory()
     }, 0)
@@ -360,7 +361,7 @@ class MindMap {
     // 克隆一份数据
     let clone = svg.clone()
     // 添加必要的样式
-    clone.add(SVG(`<style>${ cssContent }</style>`))
+    clone.add(SVG(`<style>${cssContent}</style>`))
     // 如果实际图形宽高超出了屏幕宽高，且存在水印的话需要重新绘制水印，否则会出现超出部分没有水印的问题
     if (
       (rect.width > origWidth || rect.height > origHeight) &&
diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js
index 442ec94d..eaba6b86 100644
--- a/simple-mind-map/src/constants/defaultOptions.js
+++ b/simple-mind-map/src/constants/defaultOptions.js
@@ -186,5 +186,7 @@ export const defaultOpt = {
   // 删除节点后激活相邻节点
   deleteNodeActive: true,
   // 拖拽节点时鼠标移动到画布边缘是否开启画布自动移动
-  autoMoveWhenMouseInEdgeOnDrag: true
+  autoMoveWhenMouseInEdgeOnDrag: true,
+  // 是否首次加载fit view
+  fit: false
 }
diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue
index d4141aed..0693e068 100644
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -12,10 +12,7 @@
     <ShortcutKey></ShortcutKey>
     <Contextmenu v-if="mindMap" :mindMap="mindMap"></Contextmenu>
     <RichTextToolbar v-if="mindMap" :mindMap="mindMap"></RichTextToolbar>
-    <NodeNoteContentShow
-      v-if="mindMap"
-      :mindMap="mindMap"
-    ></NodeNoteContentShow>
+    <NodeNoteContentShow v-if="mindMap" :mindMap="mindMap"></NodeNoteContentShow>
     <NodeImgPreview v-if="mindMap" :mindMap="mindMap"></NodeImgPreview>
     <SidebarTrigger v-if="!isZenMode"></SidebarTrigger>
     <Search v-if="mindMap" :mindMap="mindMap"></Search>
@@ -268,7 +265,7 @@ export default {
       if (hasFileURL) {
         root = {
           "data": {
-              "text": "根节点"
+            "text": "根节点"
           },
           "children": []
         }
@@ -279,6 +276,7 @@ export default {
       this.mindMap = new MindMap({
         el: this.$refs.mindMapContainer,
         data: root,
+        fit: true,
         layout: layout,
         theme: theme.template,
         themeConfig: theme.config,
@@ -346,31 +344,31 @@ export default {
       this.mindMap.keyCommand.addShortcut('Control+s', () => {
         this.manualSave()
       })
-      // 转发事件
-      ;[
-        'node_active',
-        'data_change',
-        'view_data_change',
-        'back_forward',
-        'node_contextmenu',
-        'node_click',
-        'draw_click',
-        'expand_btn_click',
-        'svg_mousedown',
-        'mouseup',
-        'mode_change',
-        'node_tree_render_end',
-        'rich_text_selection_change',
-        'transforming-dom-to-images',
-        'generalization_node_contextmenu',
-        'painter_start',
-        'painter_end',
-        'scrollbar_change'
-      ].forEach(event => {
-        this.mindMap.on(event, (...args) => {
-          this.$bus.$emit(event, ...args)
+        // 转发事件
+        ;[
+          'node_active',
+          'data_change',
+          'view_data_change',
+          'back_forward',
+          'node_contextmenu',
+          'node_click',
+          'draw_click',
+          'expand_btn_click',
+          'svg_mousedown',
+          'mouseup',
+          'mode_change',
+          'node_tree_render_end',
+          'rich_text_selection_change',
+          'transforming-dom-to-images',
+          'generalization_node_contextmenu',
+          'painter_start',
+          'painter_end',
+          'scrollbar_change'
+        ].forEach(event => {
+          this.mindMap.on(event, (...args) => {
+            this.$bus.$emit(event, ...args)
+          })
         })
-      })
       this.bindSaveEvent()
       // setTimeout(() => {
       // 动态给指定节点添加子节点