Merge branch 'dev6' into main

打包
优化：插入子节点时自动展开
2026-02-18 22:38:46 +08:00 · 2022-10-11 18:54:24 +08:00 · 2022-10-11 18:53:30 +08:00 · 2022-10-11 18:48:52 +08:00 · 2022-10-11 18:36:16 +08:00 · 2022-10-11 11:10:00 +08:00
102 changed files with 4239 additions and 569 deletions
--- a/README.md
+++ b/README.md
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/css/app.9f8f33bc.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.6fd71983.css" rel="preload" as="style"><link href="dist/js/app.ae3c62cc.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.384d822e.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.6fd71983.css" rel="stylesheet"><link href="dist/css/app.9f8f33bc.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.384d822e.js"></script><script src="dist/js/app.ae3c62cc.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.81d632f4.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.228f2009.js" rel="prefetch"><link href="dist/js/chunk-35b0a040.cb76da7d.js" rel="prefetch"><link href="dist/css/app.8e12b326.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.6fd71983.css" rel="preload" as="style"><link href="dist/js/app.5b772a90.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d724da21.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.6fd71983.css" rel="stylesheet"><link href="dist/css/app.8e12b326.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.d724da21.js"></script><script src="dist/js/app.5b772a90.js"></script></body></html>
--- a/simple-mind-map/README.md
+++ b/simple-mind-map/README.md
--- a/simple-mind-map/dist/img/blueSky.3c7f8ccb.jpg
+++ b/simple-mind-map/dist/img/blueSky.3c7f8ccb.jpg
--- a/simple-mind-map/dist/img/brainImpairedPink.511fee22.jpg
+++ b/simple-mind-map/dist/img/brainImpairedPink.511fee22.jpg
--- a/simple-mind-map/dist/img/catalogOrganization.380bb277.jpg
+++ b/simple-mind-map/dist/img/catalogOrganization.380bb277.jpg
--- a/simple-mind-map/dist/img/classic.733f273c.jpg
+++ b/simple-mind-map/dist/img/classic.733f273c.jpg
--- a/simple-mind-map/dist/img/classic2.cdfe2a8d.jpg
+++ b/simple-mind-map/dist/img/classic2.cdfe2a8d.jpg
--- a/simple-mind-map/dist/img/classic3.19d6c347.jpg
+++ b/simple-mind-map/dist/img/classic3.19d6c347.jpg
--- a/simple-mind-map/dist/img/classic4.087902fc.jpg
+++ b/simple-mind-map/dist/img/classic4.087902fc.jpg
--- a/simple-mind-map/dist/img/classicBlue.4b8243c6.jpg
+++ b/simple-mind-map/dist/img/classicBlue.4b8243c6.jpg
--- a/simple-mind-map/dist/img/classicGreen.c2ae7bde.jpg
+++ b/simple-mind-map/dist/img/classicGreen.c2ae7bde.jpg
--- a/simple-mind-map/dist/img/dark.894c1d36.jpg
+++ b/simple-mind-map/dist/img/dark.894c1d36.jpg
--- a/simple-mind-map/dist/img/dark2.c49dc11c.jpg
+++ b/simple-mind-map/dist/img/dark2.c49dc11c.jpg
--- a/simple-mind-map/dist/img/default.1312a3ba.jpg
+++ b/simple-mind-map/dist/img/default.1312a3ba.jpg
--- a/simple-mind-map/dist/img/earthYellow.c35e546d.jpg
+++ b/simple-mind-map/dist/img/earthYellow.c35e546d.jpg
--- a/simple-mind-map/dist/img/freshGreen.0e344e3e.jpg
+++ b/simple-mind-map/dist/img/freshGreen.0e344e3e.jpg
--- a/simple-mind-map/dist/img/freshRed.1c5bde77.jpg
+++ b/simple-mind-map/dist/img/freshRed.1c5bde77.jpg
--- a/simple-mind-map/dist/img/gold.3093b3c8.jpg
+++ b/simple-mind-map/dist/img/gold.3093b3c8.jpg
--- a/simple-mind-map/dist/img/greenLeaf.6789e8fc.jpg
+++ b/simple-mind-map/dist/img/greenLeaf.6789e8fc.jpg
--- a/simple-mind-map/dist/img/logicalStructure.624920ce.jpg
+++ b/simple-mind-map/dist/img/logicalStructure.624920ce.jpg
--- a/simple-mind-map/dist/img/mindMap.223b38aa.jpg
+++ b/simple-mind-map/dist/img/mindMap.223b38aa.jpg
--- a/simple-mind-map/dist/img/minions.c2a93f9e.jpg
+++ b/simple-mind-map/dist/img/minions.c2a93f9e.jpg
--- a/simple-mind-map/dist/img/mint.7933f60a.jpg
+++ b/simple-mind-map/dist/img/mint.7933f60a.jpg
--- a/simple-mind-map/dist/img/organizationStructure.8064f4da.jpg
+++ b/simple-mind-map/dist/img/organizationStructure.8064f4da.jpg
--- a/simple-mind-map/dist/img/pinkGrape.32c2587b.jpg
+++ b/simple-mind-map/dist/img/pinkGrape.32c2587b.jpg
--- a/simple-mind-map/dist/img/romanticPurple.7607e58a.jpg
+++ b/simple-mind-map/dist/img/romanticPurple.7607e58a.jpg
--- a/simple-mind-map/dist/img/skyGreen.4cfa829a.jpg
+++ b/simple-mind-map/dist/img/skyGreen.4cfa829a.jpg
--- a/simple-mind-map/dist/img/vitalityOrange.5dd9014f.jpg
+++ b/simple-mind-map/dist/img/vitalityOrange.5dd9014f.jpg
--- a/simple-mind-map/example/exampleData.js
+++ b/simple-mind-map/example/exampleData.js
@@ -10,7 +10,10 @@ const createFullData = () => {
        "tag": ["标签1", "标签2"],
        "hyperlink": "http://lxqnsys.com/",
        "hyperlinkTitle": "理想青年实验室",
-        "note": "理想青年实验室\n一个有意思的角落"
+        "note": "理想青年实验室\n一个有意思的角落",
+        // 自定义位置
+        // "customLeft": 1318,
+        // "customTop": 374.5
    };
 }

@@ -32,110 +35,110 @@ const data1 = {
                },
                "children": [{
                    "data": {
-                        "text": "子节点",
+                        "text": "分支主题",
                        ...createFullData()
                    },
                    "children": [{
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                        "children": [{
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                                ...createFullData()
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                            "children": [{
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                                "children": [{
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                    "children": [{
                                        "data": {
-                                            "text": "子节点",
+                                            "text": "分支主题",
                                        },
                                    }, {
                                        "data": {
-                                            "text": "子节点",
+                                            "text": "分支主题",
                                        },
                                        "children": [{
                                            "data": {
-                                                "text": "子节点",
+                                                "text": "分支主题",
                                            },
                                        }, {
                                            "data": {
-                                                "text": "子节点",
+                                                "text": "分支主题",
                                            },
                                        }, {
                                            "data": {
-                                                "text": "子节点",
+                                                "text": "分支主题",
                                            },
                                        }, {
                                            "data": {
-                                                "text": "子节点",
+                                                "text": "分支主题",
                                            },
                                        }]
                                    }, {
                                        "data": {
-                                            "text": "子节点",
+                                            "text": "分支主题",
                                        },
                                    }, {
                                        "data": {
-                                            "text": "子节点",
+                                            "text": "分支主题",
                                        },
                                    }]
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }]
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }]
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }]
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }]
                }]
@@ -147,36 +150,36 @@ const data1 = {
                },
                "children": [{
                    "data": {
-                        "text": "子节点",
+                        "text": "分支主题",
                    },
                }, {
                    "data": {
-                        "text": "子节点",
+                        "text": "分支主题",
                    },
                    "children": [{
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }]
                }, {
                    "data": {
-                        "text": "子节点",
+                        "text": "分支主题",
                    },
                }, {
                    "data": {
-                        "text": "子节点",
+                        "text": "分支主题",
                    },
                }]
            },
@@ -187,40 +190,40 @@ const data1 = {
                },
                "children": [{
                    "data": {
-                        "text": "子节点",
+                        "text": "分支主题",
                    },
                    "children": [{
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                        "children": [{
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }]
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }]
                }]
@@ -232,225 +235,225 @@ const data1 = {
                },
                "children": [{
                    "data": {
-                        "text": "子节点",
+                        "text": "分支主题",
                    },
                    "children": [{
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                        "children": [{
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                            "children": [{
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }]
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }]
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                        "children": [{
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                            "children": [{
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                                "children": [{
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }]
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                                "children": [{
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                    "children": [{
                                        "data": {
-                                            "text": "子节点",
+                                            "text": "分支主题",
                                        },
                                    }, {
                                        "data": {
-                                            "text": "子节点",
+                                            "text": "分支主题",
                                        },
                                    }, {
                                        "data": {
-                                            "text": "子节点",
+                                            "text": "分支主题",
                                        },
                                    }, {
                                        "data": {
-                                            "text": "子节点",
+                                            "text": "分支主题",
                                        },
                                    }]
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }]
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }]
                        }]
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                        "children": [{
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                            "children": [{
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                                "children": [{
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }]
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }]
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                            "children": [{
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }]
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                            "children": [{
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }]
                        }]
@@ -767,13 +770,13 @@ const data3 = {
                "children": [
                    {
                        "data": {
-                            "text": "子节点"
+                            "text": "分支主题"
                        },
                        "children": []
                    },
                    {
                        "data": {
-                            "text": "子节点"
+                            "text": "分支主题"
                        },
                        "children": []
                    }
@@ -864,6 +867,39 @@ const data4 = {
    }
 }

+// 带概要
+const data5 = {
+    "root": {
+        "data": {
+            "text": "根节点"
+        },
+        "children": [
+            {
+                "data": {
+                    "text": "二级节点",
+                    "generalization": {
+                        "text": "概要",
+                    }
+                },
+                "children": [
+                    {
+                        "data": {
+                            "text": "分支主题"
+                        },
+                        "children": []
+                    },
+                    {
+                        "data": {
+                            "text": "分支主题"
+                        },
+                        "children": []
+                    }
+                ]
+            },
+        ]
+    }
+}
+
 const rootData = {
    "root": {
        "data": {
@@ -876,11 +912,12 @@ const rootData = {
 export default {
    // ...data1,
    // ...data2,
-    ...data3,
+    // ...data3,
    // ...data4,
+    ...data5,
    // ...rootData,
    "theme": {
-        "template": "minions",
+        "template": "classic4",
        "config": {
            // 自定义配置...
        }
--- a/simple-mind-map/example/exportFullData.json
+++ b/simple-mind-map/example/exportFullData.json
@@ -0,0 +1,66 @@
+{
+    "layout": "logicalStructure",
+    "root": {
+        "data": {
+            "text": "根节点",
+            "expand": true,
+            "isActive": false
+        },
+        "children": [{
+            "data": {
+                "text": "二级节点",
+                "generalization": {
+                    "text": "概要",
+                    "expand": true,
+                    "isActive": false
+                },
+                "expand": true,
+                "isActive": false
+            },
+            "children": [{
+                "data": {
+                    "text": "分支主题",
+                    "expand": true,
+                    "isActive": false
+                },
+                "children": []
+            }, {
+                "data": {
+                    "text": "分支主题",
+                    "expand": true,
+                    "isActive": false
+                },
+                "children": []
+            }]
+        }]
+    },
+    "theme": {
+        "template": "classic4",
+        "config": {}
+    },
+    "view": {
+        "transform": {
+            "scaleX": 1,
+            "scaleY": 1,
+            "shear": 0,
+            "rotate": 0,
+            "translateX": 0,
+            "translateY": 0,
+            "originX": 0,
+            "originY": 0,
+            "a": 1,
+            "b": 0,
+            "c": 0,
+            "d": 1,
+            "e": 0,
+            "f": 0
+        },
+        "state": {
+            "scale": 1,
+            "x": 0,
+            "y": 0,
+            "sx": 0,
+            "sy": 0
+        }
+    }
+}
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -10,15 +10,20 @@ import BatchExecution from './src/BatchExecution'
 import Export from './src/Export'
 import Select from './src/Select'
 import Drag from './src/Drag'
+import MiniMap from './src/MiniMap';
 import {
    layoutValueList
 } from './src/utils/constant'
 import {
    SVG
 } from '@svgdotjs/svg.js'
+import xmind from './src/parse/xmind'
+import { simpleDeepClone } from './src/utils';

 // 默认选项配置
 const defaultOpt = {
+    // 是否只读
+    readonly: false,
    // 布局
    layout: 'logicalStructure',
    // 主题
@@ -112,6 +117,11 @@ class MindMap {
            draw: this.draw
        })

+        // 小地图类
+        this.miniMap = new MiniMap({
+            mindMap: this
+        })
+
        // 导出类
        this.doExport = new Export({
            mindMap: this
@@ -317,7 +327,7 @@ class MindMap {
    /** 
     * @Author: 王林 
     * @Date: 2021-08-03 22:58:12 
-     * @Desc: 动态设置思维导图数据 
+     * @Desc: 动态设置思维导图数据，纯节点数据
     */
    setData(data) {
        this.execCommand('CLEAR_ACTIVE_NODE')
@@ -326,6 +336,57 @@ class MindMap {
        this.reRender()
    }

+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-21 16:39:13 
+     * @Desc: 动态设置思维导图数据，包括节点数据、布局、主题、视图
+     */
+    setFullData(data) {
+        if (data.root) {
+            this.setData(data.root)
+        }
+        if (data.layout) {
+            this.setLayout(data.layout)
+        }
+        if (data.theme) {
+            if (data.theme.template) {
+                this.setTheme(data.theme.template)
+            }
+            if (data.theme.config) {
+                this.setThemeConfig(data.theme.config)
+            }
+        }
+        if (data.view) {
+            this.view.setTransformData(data.view)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-24 14:42:07 
+     * @Desc: 获取思维导图数据，节点树、主题、布局等 
+     */
+    getData(withConfig) {
+        let nodeData = this.command.getCopyData()
+        let data = {}
+        if (withConfig) {
+            data = {
+                layout: this.getLayout(),
+                root: nodeData,
+                theme: {
+                    template: this.getTheme(),
+                    config: this.getCustomThemeConfig()
+                },
+                view: this.view.getTransformData()
+            }
+        } else {
+            data = nodeData
+        }
+        return simpleDeepClone(data)
+    }
+
    /** 
     * @Author: 王林 
     * @Date: 2021-07-01 22:06:38 
@@ -347,6 +408,26 @@ class MindMap {
            y: y - this.elRect.top
        }
    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-06-08 14:12:38 
+     * @Desc: 设置只读模式、编辑模式 
+     */
+    setMode(mode) {
+        if (!['readonly', 'edit'].includes(mode)) {
+            return
+        }
+        this.opt.readonly = mode === 'readonly'
+        if (this.opt.readonly) {
+            // 取消当前激活的元素
+            this.renderer.clearAllActive()
+        }
+        this.emit('mode_change', mode)
+    }
 }

+MindMap.xmind = xmind
+
 export default MindMap
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.1.6",
+  "version": "0.2.14",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
@@ -18,13 +18,16 @@
    "url": "https://github.com/wanglin2/mind-map"
  },
  "scripts": {},
-  "main": "index.js",
-  "type": "module",
+  "module": "index.js",
+  "main": "./dist/simpleMindMap.umd.min.js",
  "dependencies": {
    "@svgdotjs/svg.js": "^3.0.16",
    "canvg": "^3.0.7",
    "deepmerge": "^1.5.2",
-    "eventemitter3": "^4.0.7"
+    "eventemitter3": "^4.0.7",
+    "jspdf": "^2.5.1",
+    "jszip": "^3.10.1",
+    "xml-js": "^1.6.11"
  },
  "keywords": [
    "javascript",
--- a/simple-mind-map/src/Drag.js
+++ b/simple-mind-map/src/Drag.js
@@ -71,6 +71,9 @@ class Drag extends Base {
    bindEvent() {
        this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this)
        this.mindMap.on('node_mousedown', (node, e) => {
+            if (this.mindMap.opt.readonly || node.isGeneralization) {
+                return
+            }
            if (e.which !== 1 || node.isRoot) {
                return
            }
@@ -96,6 +99,9 @@ class Drag extends Base {
            this.mouseDownY = y
        })
        this.mindMap.on('mousemove', (e) => {
+            if (this.mindMap.opt.readonly) {
+                return
+            }
            if (!this.isMousedown) {
                return
            }
@@ -123,11 +129,12 @@ class Drag extends Base {
     * @Date: 2021-11-23 19:38:02 
     * @Desc: 鼠标松开事件 
     */
-    onMouseup() {
+    onMouseup(e) {
        if (!this.isMousedown) {
            return;
        }
        this.isMousedown = false
+        let _nodeIsDrag = this.node.isDrag
        this.node.isDrag = false
        this.node.show()
        this.removeCloneNode()
@@ -141,6 +148,26 @@ class Drag extends Base {
        } else if (this.nextNode) { // 存在下一个相邻节点，作为其前一个兄弟节点
            this.mindMap.renderer.setNodeActive(this.nextNode, false)
            this.mindMap.execCommand('INSERT_BEFORE', this.node, this.nextNode)
+        } else if (_nodeIsDrag) {
+            // 自定义位置
+            let {
+                x,
+                y
+            } = this.mindMap.toPos(e.clientX - this.offsetX, e.clientY - this.offsetY)
+            let {
+                scaleX,
+                scaleY,
+                translateX,
+                translateY
+            } = this.drawTransform
+            x = (x - translateX) / scaleX
+            y = (y - translateY) / scaleY
+            this.node.left = x
+            this.node.top = y
+            this.node.customLeft = x
+            this.node.customTop = y
+            this.mindMap.execCommand('SET_NODE_CUSTOM_POSITION', this.node, x, y)
+            this.mindMap.render()
        }
        this.reset()
    }
@@ -162,7 +189,7 @@ class Drag extends Base {
            // 连接线
            this.line = this.draw.path()
            this.line.opacity(0.5)
-            this.node.style.line(this.line)
+            this.node.styleLine(this.line, this.node)
            // 同级位置占位符
            this.placeholder = this.draw.rect().fill({
                color: this.node.style.merge('lineColor', true)
--- a/simple-mind-map/src/Export.js
+++ b/simple-mind-map/src/Export.js
@@ -1,4 +1,8 @@
 import { imgToDataUrl, downloadFile } from './utils'
+import JsPDF from 'jspdf'
+import {
+    SVG,
+} from '@svgdotjs/svg.js'
 const URL = window.URL || window.webkitURL || window

 /** 
@@ -22,10 +26,10 @@ class Export {
     * @Date: 2021-07-02 07:44:06 
     * @Desc: 导出 
     */
-    async export(type, isDownload = true, name = '思维导图') {
+    async export(type, isDownload = true, name = '思维导图', ...args) {
        if (this[type]) {
-            let result = await this[type]()
-            if (isDownload) {
+            let result = await this[type](name, ...args)
+            if (isDownload && type !== 'pdf') {
                downloadFile(result, name + '.' + type)
            }
            return result
@@ -40,28 +44,9 @@ class Export {
     * @Desc: 获取svg数据 
     */
    async getSvgData() {
-        const svg = this.mindMap.svg
-        const draw = this.mindMap.draw
-        // 保存原始信息
-        const origWidth = svg.width()
-        const origHeight = svg.height()
-        const origTransform = draw.transform()
-        const elRect = this.mindMap.el.getBoundingClientRect()
-        // 去除放大缩小的变换效果
-        draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
-        // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
-        const rect = draw.rbox()
-        // 将svg设置为实际内容的宽高
-        svg.size(rect.wdith, rect.height)
-        // 把实际内容变换
-        draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
-        // 克隆一份数据
-        const clone = svg.clone()
-        // 恢复原先的大小和变换信息
-        svg.size(origWidth, origHeight)
-        draw.transform(origTransform)
+        let { svg, svgHTML } = this.mindMap.miniMap.getMiniMap()
        // 把图片的url转换成data:url类型，否则导出会丢失图片
-        let imageList = clone.find('image')
+        let imageList = svg.find('image')
        let task = imageList.map(async (item) => {
            let imgUlr = item.attr('href') || item.attr('xlink:href')
            let imgData = await imgToDataUrl(imgUlr)
@@ -69,8 +54,8 @@ class Export {
        })
        await Promise.all(task)
        return {
-            node: clone,
-            str: clone.svg()
+            node: svg,
+            str: svgHTML
        }
    }

@@ -163,6 +148,43 @@ class Export {
        return imgDataUrl
    }

+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-08-08 19:23:08 
+     * @Desc: 导出为pdf 
+     */
+    async pdf(name) {
+        let img = await this.png()
+        let pdf = new JsPDF('', 'pt', 'a4')
+        let a4Width = 595
+        let a4Height = 841
+        let a4Ratio = a4Width / a4Height
+        let image = new Image()
+        image.onload = () => {
+            let imageWidth = image.width
+            let imageHeight = image.height
+            let imageRatio = imageWidth / imageHeight
+            let w, h
+            if (imageWidth <= a4Width && imageHeight <= a4Height) {
+                // 使用图片原始宽高
+                w = imageWidth
+                h = imageHeight
+            } else if (a4Ratio > imageRatio) {
+                // 以a4Height为高度，缩放图片宽度
+                w = imageRatio * a4Height
+                h = a4Height
+            } else {
+                // 以a4Width为宽度，缩放图片高度
+                w = a4Width
+                h = a4Width / imageRatio
+            }
+            pdf.addImage(img, 'PNG', (a4Width - w) / 2, (a4Height - h) / 2, w, h)
+            pdf.save(name)
+        }
+        image.src = img
+    }
+
    /** 
     * @Author: 王林 
     * @Date: 2021-07-04 15:32:07 
@@ -190,8 +212,9 @@ class Export {
     * @Date: 2021-07-04 14:54:07 
     * @Desc: 导出为svg 
     */
-    async svg() {
+    async svg(name) {
        let { node } = await this.getSvgData()
+        node.first().before(SVG(`<title>${name}</title>`))
        await this.drawBackgroundToSvg(node)
        let str = node.svg()
        // 转换成blob数据
@@ -206,8 +229,8 @@ class Export {
     * @Date: 2021-08-03 22:19:17 
     * @Desc: 导出为json 
     */
-    json () {
-        let data = this.mindMap.command.getCopyData()
+    json (name, withConfig = true) {
+        let data = this.mindMap.getData(withConfig)
        let str = JSON.stringify(data)
        let blob = new Blob([str])
        return URL.createObjectURL(blob)
@@ -218,9 +241,9 @@ class Export {
     * @Date: 2021-08-03 22:24:24 
     * @Desc: 专有文件，其实就是json文件 
     */
-    smm () {
-        return this.json();
+    smm (name, withConfig) {
+        return this.json(name, withConfig);
    }
 }

-export default Export
+export default Export
--- a/simple-mind-map/src/KeyCommand.js
+++ b/simple-mind-map/src/KeyCommand.js
@@ -16,9 +16,51 @@ export default class KeyCommand {
        this.shortcutMap = {
            //Enter: [fn]
        }
+        this.shortcutMapCache = {}
+        this.isPause = false
        this.bindEvent()
    }

+    /** 
+     * @Author: 王林 
+     * @Date: 2022-08-14 08:57:55 
+     * @Desc: 暂停快捷键响应 
+     */
+    pause() {
+        this.isPause = true
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-08-14 08:58:43 
+     * @Desc: 恢复快捷键响应 
+     */
+    recovery() {
+        this.isPause = false
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-08-16 16:29:01 
+     * @Desc: 保存当前注册的快捷键数据，然后清空快捷键数据
+     */
+    save() {
+        this.shortcutMapCache = this.shortcutMap
+        this.shortcutMap = {}
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-08-16 16:29:38 
+     * @Desc: 恢复保存的快捷键数据，然后清空缓存数据 
+     */
+    restore() {
+        this.shortcutMap = this.shortcutMapCache
+        this.shortcutMapCache = {}
+    }
+
    /** 
     * @Author: 王林 
     * @Date: 2021-04-24 15:23:22 
@@ -26,6 +68,9 @@ export default class KeyCommand {
     */
    bindEvent() {
        window.addEventListener('keydown', (e) => {
+            if (this.isPause) {
+                return
+            }
            Object.keys(this.shortcutMap).forEach((key) => {
                if (this.checkKey(e, key)) {
                    e.stopPropagation()
@@ -139,4 +184,17 @@ export default class KeyCommand {
            }
        })
    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-08-14 08:49:58 
+     * @Desc: 获取指定快捷键的处理函数 
+     */
+    getShortcutFn(key) {
+        let res = []
+        key.split(/\s*\|\s*/).forEach((item) => {
+            res = this.shortcutMap[item] || []
+        })
+        return res
+    }
 }
--- a/simple-mind-map/src/MiniMap.js
+++ b/simple-mind-map/src/MiniMap.js
@@ -0,0 +1,175 @@
+// 小地图类
+class MiniMap {
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-10-10 14:00:45
+   * @Desc: 构造函数
+   */
+  constructor(opt) {
+    this.mindMap = opt.mindMap;
+    this.isMousedown = false;
+    this.mousedownPos = {
+      x: 0,
+      y: 0,
+    };
+    this.startViewPos = {
+      x: 0,
+      y: 0,
+    };
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-10-10 14:00:43
+   * @Desc:  获取小地图相关数据
+   */
+  getMiniMap() {
+    const svg = this.mindMap.svg;
+    const draw = this.mindMap.draw;
+    // 保存原始信息
+    const origWidth = svg.width();
+    const origHeight = svg.height();
+    const origTransform = draw.transform();
+    const elRect = this.mindMap.el.getBoundingClientRect();
+    // 去除放大缩小的变换效果
+    draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY);
+    // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
+    const rect = draw.rbox();
+    // 将svg设置为实际内容的宽高
+    svg.size(rect.width, rect.height);
+    // 把实际内容变换
+    draw.translate(-rect.x + elRect.left, -rect.y + elRect.top);
+    // 克隆一份数据
+    const clone = svg.clone();
+    // 恢复原先的大小和变换信息
+    svg.size(origWidth, origHeight);
+    draw.transform(origTransform);
+
+    return {
+      svg: clone, // 思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）
+      svgHTML: clone.svg(), // svg字符串
+      rect: {
+        ...rect, // 思维导图图形未缩放时的位置尺寸等信息
+        ratio: rect.width / rect.height, // 思维导图图形的宽高比
+      },
+      origWidth, // 画布宽度
+      origHeight, // 画布高度
+      scaleX: origTransform.scaleX, // 思维导图图形的水平缩放值
+      scaleY: origTransform.scaleY, // 思维导图图形的垂直缩放值
+    };
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-10-10 14:05:51
+   * @Desc: 计算小地图的渲染数据
+   * boxWidth：小地图容器的宽度
+   * boxHeight：小地图容器的高度
+   */
+  calculationMiniMap(boxWidth, boxHeight) {
+    let { svgHTML, rect, origWidth, origHeight, scaleX, scaleY } =
+      this.getMiniMap();
+    // 计算数据
+    let boxRatio = boxWidth / boxHeight;
+    let actWidth = 0;
+    let actHeight = 0;
+    if (boxRatio > rect.ratio) {
+      // 高度以box为准，缩放宽度
+      actHeight = boxHeight;
+      actWidth = rect.ratio * actHeight;
+    } else {
+      // 宽度以box为准，缩放高度
+      actWidth = boxWidth;
+      actHeight = actWidth / rect.ratio;
+    }
+    // svg图形的缩放及位置
+    let miniMapBoxScale = actWidth / rect.width;
+    let miniMapBoxLeft = (boxWidth - actWidth) / 2;
+    let miniMapBoxTop = (boxHeight - actHeight) / 2;
+    // 视口框大小及位置
+    let _rectX = rect.x - (rect.width * scaleX - rect.width) / 2;
+    let _rectX2 = rect.x2 + (rect.width * scaleX - rect.width) / 2;
+    let _rectY = rect.y - (rect.height * scaleY - rect.height) / 2;
+    let _rectY2 = rect.y2 + (rect.height * scaleY - rect.height) / 2;
+    let _rectWidth = rect.width * scaleX;
+    let _rectHeight = rect.height * scaleY;
+    let viewBoxStyle = {
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+    };
+    viewBoxStyle.left =
+      Math.max(0, (-_rectX / _rectWidth) * actWidth) + miniMapBoxLeft + "px";
+    viewBoxStyle.right =
+      Math.max(0, ((_rectX2 - origWidth) / _rectWidth) * actWidth) +
+      miniMapBoxLeft +
+      "px";
+
+    viewBoxStyle.top =
+      Math.max(0, (-_rectY / _rectHeight) * actHeight) + miniMapBoxTop + "px";
+    viewBoxStyle.bottom =
+      Math.max(0, ((_rectY2 - origHeight) / _rectHeight) * actHeight) +
+      miniMapBoxTop +
+      "px";
+    return {
+      svgHTML, // 小地图html
+      viewBoxStyle, // 视图框的位置信息
+      miniMapBoxScale, // 视图框的缩放值
+      miniMapBoxLeft, // 视图框的left值
+      miniMapBoxTop, // 视图框的top值
+    };
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-10-10 14:22:40
+   * @Desc: 小地图鼠标按下事件
+   */
+  onMousedown(e) {
+    this.isMousedown = true;
+    this.mousedownPos = {
+      x: e.clientX,
+      y: e.clientY,
+    };
+    // 保存视图当前的偏移量
+    let transformData = this.mindMap.view.getTransformData();
+    this.startViewPos = {
+      x: transformData.state.x,
+      y: transformData.state.y,
+    };
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-10-10 14:22:55
+   * @Desc: 小地图鼠标移动事件
+   */
+  onMousemove(e, sensitivityNum = 5) {
+    if (!this.isMousedown) {
+      return;
+    }
+    let ox = e.clientX - this.mousedownPos.x;
+    let oy = e.clientY - this.mousedownPos.y;
+    // 在视图最初偏移量上累加更新量
+    this.mindMap.view.translateXTo(ox * sensitivityNum + this.startViewPos.x);
+    this.mindMap.view.translateYTo(oy * sensitivityNum + this.startViewPos.y);
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-10-10 14:23:01
+   * @Desc: 小地图鼠标松开事件
+   */
+  onMouseup() {
+    this.isMousedown = false;
+  }
+}
+
+export default MiniMap;
--- a/simple-mind-map/src/Node.js
+++ b/simple-mind-map/src/Node.js
@@ -1,4 +1,5 @@
 import Style from './Style'
+import Shape from './Shape'
 import {
    resizeImgSize,
    asyncRun
@@ -43,8 +44,17 @@ class Node {
        this.themeConfig = this.mindMap.themeConfig
        // 样式实例
        this.style = new Style(this, this.themeConfig)
+        // 形状实例
+        this.shapeInstance = new Shape(this)
+        this.shapePadding = {
+            paddingX: 0,
+            paddingY: 0
+        }
        // 是否是根节点
        this.isRoot = opt.isRoot === undefined ? false : opt.isRoot
+        // 是否是概要节点
+        this.isGeneralization = opt.isGeneralization === undefined ? false : opt.isGeneralization
+        this.generalizationBelongNode = null
        // 节点层级
        this.layerIndex = opt.layerIndex === undefined ? 0 : opt.layerIndex
        // 节点宽
@@ -52,9 +62,12 @@ class Node {
        // 节点高
        this.height = opt.height || 0
        // left
-        this.left = opt.left || 0
+        this._left = opt.left || 0
        // top
-        this.top = opt.top || 0
+        this._top = opt.top || 0
+        // 自定义位置
+        this.customLeft = opt.data.data.customLeft || undefined
+        this.customTop = opt.data.data.customTop || undefined
        // 是否正在拖拽中
        this.isDrag = false
        // 父节点
@@ -73,13 +86,18 @@ class Node {
        this.noteEl = null
        this._expandBtn = null
        this._lines = []
+        this._generalizationLine = null
+        this._generalizationNode = null
        // 尺寸信息
        this._rectInfo = {
            imgContentWidth: 0,
            imgContentHeight: 0,
-            textContentHeight: 0,
+            textContentWidth: 0,
            textContentHeight: 0
        }
+        // 概要节点的宽高
+        this._generalizationNodeWidth = 0
+        this._generalizationNodeHeight = 0
        // 各种文字信息的间距
        this.textContentItemMargin = this.mindMap.opt.textContentMargin
        // 图片和文字节点的间距
@@ -89,10 +107,27 @@ class Node {
        // 初始渲染
        this.initRender = true
        // 初始化
-        this.createNodeData()
+        // this.createNodeData()
        this.getSize()
    }

+    // 支持自定义位置
+    get left() {
+        return this.customLeft || this._left
+    }
+
+    set left(val) {
+        this._left = val
+    }
+
+    get top() {
+        return this.customTop || this._top
+    }
+
+    set top(val) {
+        this._top = val
+    }
+
    /** 
     * @Author: 王林 
     * @Date: 2021-07-12 07:40:47 
@@ -131,6 +166,33 @@ class Node {
        return data
    }

+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-08-02 19:53:40 
+     * @Desc: 检查节点是否存在自定义数据 
+     */
+    hasCustomPosition() {
+        return this.customLeft !== undefined && this.customTop !== undefined
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-08-04 09:06:56 
+     * @Desc: 检查节点是否存在自定义位置的祖先节点 
+     */
+    ancestorHasCustomPosition() {
+        let node = this
+        while(node) {
+            if (node.hasCustomPosition()) {
+                return true
+            }
+            node = node.parent
+        }
+        return false
+    }
+
    /** 
     * javascript comment 
     * @Author: 王林25 
@@ -153,6 +215,7 @@ class Node {
        this._hyperlinkData = this.createHyperlinkNode()
        this._tagData = this.createTagNode()
        this._noteData = this.createNoteNode()
+        this.createGeneralizationNode()
    }

    /** 
@@ -199,6 +262,8 @@ class Node {
            this.group.remove()
            this.group = null
        }
+        // 概要
+        this.removeGeneralization()
    }

    /** 
@@ -273,9 +338,16 @@ class Node {
        // 间距
        let margin = imgContentHeight > 0 && textContentHeight > 0 ? this.blockContentMargin : 0
        let { paddingX, paddingY } = this.getPaddingVale()
+        // 纯内容宽高
+        let _width = Math.max(imgContentWidth, textContentWidth)
+        let _height = imgContentHeight + textContentHeight
+        // 计算节点形状需要的附加内边距
+        let { paddingX: shapePaddingX, paddingY: shapePaddingY } = this.shapeInstance.getShapePadding(_width, _height, paddingX, paddingY)
+        this.shapePadding.paddingX = shapePaddingX
+        this.shapePadding.paddingY = shapePaddingY
        return {
-            width: Math.max(imgContentWidth, textContentWidth) + paddingX * 2,
-            height: imgContentHeight + textContentHeight + paddingY * 2 + margin
+            width: _width + paddingX * 2 + shapePaddingX * 2,
+            height: _height + paddingY * 2 + margin + shapePaddingY * 2
        }
    }

@@ -484,6 +556,16 @@ class Node {
        }
    }

+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 22:02:07 
+     * @Desc: 获取节点形状 
+     */
+    getShape() {
+        return this.style.getStyle('shape', false, false)
+    }
+
    /** 
     * javascript comment 
     * @Author: 王林25 
@@ -497,12 +579,18 @@ class Node {
            textContentItemMargin
        } = this
        let { paddingY } = this.getPaddingVale()
+        paddingY += this.shapePadding.paddingY
        // 创建组
        this.group = new G()
+        // 概要节点添加一个带所属节点id的类名
+        if (this.isGeneralization && this.generalizationBelongNode) {
+            this.group.addClass('generalization_' + this.generalizationBelongNode.uid)
+        }
        this.draw.add(this.group)
        this.update(true)
-        // 节点矩形
-        this.style.rect(this.group.rect(width, height))
+        // 节点形状
+        const shape = this.getShape()
+        this.style[shape === 'rectangle' ? 'rect' : 'shape'](this.shapeInstance.createShape())
        // 图片节点
        let imgHeight = 0
        if (this._imgData) {
@@ -576,11 +664,17 @@ class Node {
        })
        // 双击事件
        this.group.on('dblclick', (e) => {
+            if (this.mindMap.opt.readonly) {
+                return
+            }
            e.stopPropagation()
            this.mindMap.emit('node_dblclick', this, e)
        })
        // 右键菜单事件
        this.group.on('contextmenu', (e) => {
+            if (this.mindMap.opt.readonly || this.isGeneralization) {
+                return
+            }
            e.stopPropagation()
            e.preventDefault()
            if (this.nodeData.data.isActive) {
@@ -597,7 +691,10 @@ class Node {
     * @Desc: 激活节点 
     */
    active(e) {
-        e.stopPropagation()
+        if (this.mindMap.opt.readonly) {
+            return
+        }
+        e && e.stopPropagation()
        if (this.nodeData.data.isActive) {
            return
        }
@@ -614,6 +711,8 @@ class Node {
     * @Desc: 渲染节点到画布，会移除旧的，创建新的
     */
    renderNode() {
+        // 连线
+        this.renderLine()
        this.removeAllEvent()
        this.removeAllNode()
        this.createNodeData()
@@ -637,6 +736,7 @@ class Node {
        } else {
            this.updateExpandBtnPos()
        }
+        this.renderGeneralization()
        let t = this.group.transform()
        if (!layout) {
            this.group.animate(300).translate(this.left - t.translateX, this.top - t.translateY)
@@ -652,13 +752,13 @@ class Node {
     * @Desc: 递归渲染 
     */
    render() {
-        // 连线
-        this.renderLine()
        // 节点
        if (this.initRender) {
            this.initRender = false
            this.renderNode()
        } else {
+            // 连线
+            this.renderLine()
            this.update()
        }
        // 子节点
@@ -669,6 +769,12 @@ class Node {
                }
            }))
        }
+        // 手动插入的节点立即获得焦点并且开启编辑模式
+        if (this.nodeData.inserting) {
+            delete this.nodeData.inserting
+            this.active()
+            this.mindMap.emit('node_dblclick', this)
+        }
    }

    /** 
@@ -699,6 +805,7 @@ class Node {
     */
    hide() {
        this.group.hide()
+        this.hideGeneralization()
        if (this.parent) {
            let index = this.parent.children.indexOf(this)
            this.parent._lines[index].hide()
@@ -719,11 +826,15 @@ class Node {
     * @Date: 2021-11-23 18:39:14 
     * @Desc: 显示节点 
     */
-     show() {
+    show() {
+        if (!this.group) {
+            return;
+        }
        this.group.show()
+        this.showGeneralization()
        if (this.parent) {
            let index = this.parent.children.indexOf(this)
-            this.parent._lines[index].show()
+            this.parent._lines[index] && this.parent._lines[index].show()
        }
        // 子节点
        if (this.children && this.children.length) {
@@ -740,7 +851,7 @@ class Node {
     * @Date: 2021-04-10 22:01:53 
     * @Desc: 连线 
     */
-    renderLine() {
+    renderLine(deep = false) {
        if (this.nodeData.data.expand === false) {
            return
        }
@@ -758,10 +869,32 @@ class Node {
            this._lines = this._lines.slice(0, childrenLen)
        }
        // 画线
-        this.renderer.layout.renderLine(this, this._lines)
-        // 添加样式
-        this._lines.forEach((line) => {
-            this.style.line(line)
+        this.renderer.layout.renderLine(this, this._lines, (line, node) => {
+            // 添加样式
+            this.styleLine(line, node)
+        }, this.style.getStyle('lineStyle', true))
+        // 子级的连线也需要更新
+        if (deep && this.children && this.children.length > 0) {
+            this.children.forEach((item) => {
+                item.renderLine(deep)
+            })
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: flydreame 
+     * @Date: 2022-09-17 12:41:29 
+     * @Desc: 设置连线样式 
+     */
+    styleLine(line, node) {
+        let width = node.getSelfInhertStyle('lineWidth') || node.getStyle('lineWidth', true)
+        let color = node.getSelfInhertStyle('lineColor') || node.getStyle('lineColor', true)
+        let dasharray = node.getSelfInhertStyle('lineDasharray') || node.getStyle('lineDasharray', true)
+        this.style.line(line, {
+            width,
+            color,
+            dasharray,
        })
    }

@@ -777,6 +910,136 @@ class Node {
        this._lines = []
    }

+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-08-01 09:27:30 
+     * @Desc: 检查是否存在概要 
+     */
+    checkHasGeneralization() {
+        return !!this.nodeData.data.generalization
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-07-31 09:41:28 
+     * @Desc: 创建概要节点 
+     */
+    createGeneralizationNode() {
+        if (this.isGeneralization || !this.checkHasGeneralization()) {
+            return
+        }
+        if (!this._generalizationLine) {
+            this._generalizationLine = this.draw.path()
+        }
+        if (!this._generalizationNode) {
+            this._generalizationNode = new Node({
+                data: {
+                    data: this.nodeData.data.generalization
+                },
+                uid: this.mindMap.uid++,
+                renderer: this.renderer,
+                mindMap: this.mindMap,
+                draw: this.draw,
+                isGeneralization: true
+            })
+            this._generalizationNodeWidth = this._generalizationNode.width
+            this._generalizationNodeHeight = this._generalizationNode.height
+            this._generalizationNode.generalizationBelongNode = this
+            if (this.nodeData.data.generalization.isActive) {
+                this.renderer.addActiveNode(this._generalizationNode)
+            }
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-08-01 15:38:52 
+     * @Desc: 更新概要节点 
+     */
+    updateGeneralization() {
+        this.removeGeneralization()
+        this.createGeneralizationNode()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-07-30 08:35:51 
+     * @Desc: 渲染概要节点 
+     */
+    renderGeneralization() {
+        if (this.isGeneralization) {
+            return
+        }
+        if (!this.checkHasGeneralization()) {
+            this.removeGeneralization()
+            this._generalizationNodeWidth = 0
+            this._generalizationNodeHeight = 0
+            return
+        }
+        if (this.nodeData.data.expand === false) {
+            this.removeGeneralization()
+            return
+        }
+        this.createGeneralizationNode()
+        this.renderer.layout.renderGeneralization(this, this._generalizationLine, this._generalizationNode)
+        this.style.generalizationLine(this._generalizationLine)
+        this._generalizationNode.render()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-07-30 13:11:27 
+     * @Desc: 删除概要节点 
+     */
+    removeGeneralization() {
+        if (this._generalizationLine) {
+            this._generalizationLine.remove()
+            this._generalizationLine = null
+        }
+        if (this._generalizationNode) {
+            // 删除概要节点时要同步从激活节点里删除
+            this.renderer.removeActiveNode(this._generalizationNode)
+            this._generalizationNode.remove()
+            this._generalizationNode = null
+        }
+        // hack修复当激活一个节点时创建概要，然后立即激活创建的概要节点后会重复创建概要节点并且无法删除的问题
+        if (this.generalizationBelongNode) {
+            this.draw.find('.generalization_' + this.generalizationBelongNode.uid).remove()
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-08-01 09:56:46 
+     * @Desc: 隐藏概要节点 
+     */
+    hideGeneralization() {
+        if (this._generalizationLine) {
+            this._generalizationLine.hide()
+        }
+        if (this._generalizationNode) {
+            this._generalizationNode.hide()
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-08-01 09:57:42 
+     * @Desc: 显示概要节点 
+     */
+    showGeneralization() {
+        if (this._generalizationLine) {
+            this._generalizationLine.show()
+        }
+        if (this._generalizationNode) {
+            this._generalizationNode.show()
+        }
+    }
+
    /** 
     * @Author: 王林 
     * @Date: 2021-07-10 17:59:14 
@@ -797,7 +1060,7 @@ class Node {
        node.x(0).y(-this.expandBtnSize / 2)
        fillNode.x(0).y(-this.expandBtnSize / 2)
        this.style.iconBtn(node, fillNode)
-        this._expandBtn.add(fillNode).add(node)
+        if (this._expandBtn) this._expandBtn.add(fillNode).add(node)
    }

    /** 
@@ -918,6 +1181,40 @@ class Node {
        return v === undefined ? '' : v
    }

+    /** 
+     * javascript comment 
+     * @Author: flydreame 
+     * @Date: 2022-09-17 11:21:15 
+     * @Desc: 获取自定义样式 
+     */
+    getSelfStyle(prop) {
+        return this.style.getSelfStyle(prop)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: flydreame 
+     * @Date: 2022-09-17 11:21:26 
+     * @Desc:  获取最近一个存在自身自定义样式的祖先节点的自定义样式
+     */
+    getParentSelfStyle(prop) {
+        if (this.parent) {
+            return this.parent.getSelfStyle(prop) || this.parent.getParentSelfStyle(prop)
+        }
+        return null
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: flydreame 
+     * @Date: 2022-09-17 12:15:30 
+     * @Desc: 获取自身可继承的自定义样式 
+     */
+    getSelfInhertStyle(prop) {
+        return this.getSelfStyle(prop) // 自身
+        || this.getParentSelfStyle(prop) // 父级
+    }
+
    /** 
     * @Author: 王林 
     * @Date: 2021-05-04 22:18:07 
@@ -998,6 +1295,16 @@ class Node {
    setTag(tag) {
        this.mindMap.execCommand('SET_NODE_TAG', this, tag)
    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 21:47:45 
+     * @Desc: 设置形状 
+     */
+    setShape(shape) {
+        this.mindMap.execCommand('SET_NODE_SHAPE', this, shape)
+    }
 }

-export default Node
+export default Node
--- a/simple-mind-map/src/Render.js
+++ b/simple-mind-map/src/Render.js
@@ -5,6 +5,8 @@ import CatalogOrganization from './layouts/CatalogOrganization'
 import OrganizationStructure from './layouts/OrganizationStructure'
 import TextEdit from './TextEdit'
 import { copyNodeTree, simpleDeepClone, walk } from './utils'
+import { shapeList } from './Shape'
+import { lineStyleProps } from './themes/default'

 // 布局列表
 const layouts = {
@@ -142,6 +144,9 @@ class Render {
        // 收起所有节点
        this.unexpandAllNode = this.unexpandAllNode.bind(this)
        this.mindMap.command.add('UNEXPAND_ALL', this.unexpandAllNode)
+        // 展开到指定层级
+        this.expandToLevel = this.expandToLevel.bind(this)
+        this.mindMap.command.add('UNEXPAND_TO_LEVEL', this.expandToLevel)
        // 设置节点数据
        this.setNodeData = this.setNodeData.bind(this)
        this.mindMap.command.add('SET_NODE_DATA', this.setNodeData)
@@ -163,6 +168,21 @@ class Render {
        // 设置节点标签
        this.setNodeTag = this.setNodeTag.bind(this)
        this.mindMap.command.add('SET_NODE_TAG', this.setNodeTag)
+        // 添加节点概要
+        this.addGeneralization = this.addGeneralization.bind(this)
+        this.mindMap.command.add('ADD_GENERALIZATION', this.addGeneralization)
+        // 删除节点概要
+        this.removeGeneralization = this.removeGeneralization.bind(this)
+        this.mindMap.command.add('REMOVE_GENERALIZATION', this.removeGeneralization)
+        // 设置节点自定义位置
+        this.setNodeCustomPosition = this.setNodeCustomPosition.bind(this)
+        this.mindMap.command.add('SET_NODE_CUSTOM_POSITION', this.setNodeCustomPosition)
+        // 一键整理布局
+        this.resetLayout = this.resetLayout.bind(this)
+        this.mindMap.command.add('RESET_LAYOUT', this.resetLayout)
+        // 设置节点形状
+        this.setNodeShape = this.setNodeShape.bind(this)
+        this.mindMap.command.add('SET_NODE_SHAPE', this.setNodeShape)
    }

    /** 
@@ -183,15 +203,11 @@ class Render {
            this.mindMap.execCommand('INSERT_NODE')
        }
        this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
+        // 插入概要
+        this.mindMap.keyCommand.addShortcut('Control+s', this.addGeneralization)
        // 展开/收起节点
-        this.mindMap.keyCommand.addShortcut('/', () => {
-            this.activeNodeList.forEach((node) => {
-                if (node.nodeData.children.length <= 0) {
-                    return
-                }
-                this.toggleNodeExpand(node)
-            })
-        })
+        this.toggleActiveExpand = this.toggleActiveExpand.bind(this)
+        this.mindMap.keyCommand.addShortcut('/', this.toggleActiveExpand)
        // 删除节点
        this.removeNodeWrap = () => {
            this.mindMap.execCommand('REMOVE_NODE')
@@ -208,6 +224,13 @@ class Render {
        this.mindMap.keyCommand.addShortcut('Control+a', () => {
            this.mindMap.execCommand('SELECT_ALL')
        })
+        // 一键整理布局
+        this.mindMap.keyCommand.addShortcut('Control+l', this.resetLayout)
+        // 上移节点
+        this.mindMap.keyCommand.addShortcut('Control+Up', this.upNode)
+        // 下移节点
+        this.mindMap.keyCommand.addShortcut('Control+Down', this.downNode)
+        // 复制节点、剪切节点、粘贴节点的快捷键需开发者自行注册实现，可参考demo
    }

    /** 
@@ -217,8 +240,10 @@ class Render {
     * @Desc: 开启文字编辑，会禁用回车键和删除键相关快捷键防止冲突 
     */
    startTextEdit() {
-        this.mindMap.keyCommand.removeShortcut('Del|Backspace')
-        this.mindMap.keyCommand.removeShortcut('Enter', this.insertNodeWrap)
+        this.mindMap.keyCommand.save()
+        // this.mindMap.keyCommand.removeShortcut('Del|Backspace')
+        // this.mindMap.keyCommand.removeShortcut('/')
+        // this.mindMap.keyCommand.removeShortcut('Enter', this.insertNodeWrap)
    }

    /** 
@@ -228,8 +253,10 @@ class Render {
     * @Desc: 结束文字编辑，会恢复回车键和删除键相关快捷键
     */
    endTextEdit() {
-        this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap)
-        this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
+        this.mindMap.keyCommand.restore()
+        // this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap)
+        // this.mindMap.keyCommand.addShortcut('/', this.toggleActiveExpand)
+        // this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
    }

    /** 
@@ -246,6 +273,7 @@ class Render {
            this.root = root
            this.root.render()
        })
+        this.mindMap.emit('node_active', null, this.activeNodeList)
    }

    /** 
@@ -379,13 +407,15 @@ class Render {
        if (first.isRoot) {
            this.insertChildNode()
        } else {
+            let text = first.layerIndex === 1 ? '二级节点' : '分支主题'
            if (first.layerIndex === 1) {
                first.parent.initRender = true
            }
            let index = this.getNodeIndex(first)
            first.parent.nodeData.children.splice(index + 1, 0, {
+                "inserting": true,
                "data": {
-                    "text": "分支主题",
+                    "text": text,
                    "expand": true
                },
                "children": []
@@ -407,13 +437,17 @@ class Render {
            if (!node.nodeData.children) {
                node.nodeData.children = []
            }
+            let text = node.isRoot ? '二级节点' : '分支主题'
            node.nodeData.children.push({
+                "inserting": true,
                "data": {
-                    "text": "分支主题",
+                    "text": text,
                    "expand": true
                },
                "children": []
            })
+            // 插入子节点时自动展开子节点
+            node.nodeData.data.expand = true
            if (node.isRoot) {
                node.initRender = true
                // this.mindMap.batchExecution.push('renderNode' + index, () => {
@@ -579,7 +613,15 @@ class Render {
        }
        for (let i = 0; i < this.activeNodeList.length; i++) {
            let node = this.activeNodeList[i]
-            if (node.isRoot) {
+            if (node.isGeneralization) {
+                // 删除概要节点
+                this.setNodeData(node.generalizationBelongNode, {
+                    generalization: null
+                })
+                node.generalizationBelongNode.update()
+                this.removeActiveNode(node)
+                i--
+            } else if (node.isRoot) {
                node.children.forEach((child) => {
                    child.remove()
                })
@@ -618,7 +660,7 @@ class Render {
        if (this.activeNodeList.length <= 0) {
            return
        }
-        return copyNodeTree({}, this.activeNodeList[0])
+        return copyNodeTree({}, this.activeNodeList[0], true)
    }

    /** 
@@ -634,7 +676,7 @@ class Render {
        if (node.isRoot) {
            return null
        }
-        let copyData = copyNodeTree({}, node)
+        let copyData = copyNodeTree({}, node, true)
        this.removeActiveNode(node)
        this.removeOneNode(node)
        this.mindMap.emit('node_active', null, this.activeNodeList)
@@ -697,6 +739,10 @@ class Render {
            }
        }
        this.setNodeDataRender(node, data)
+        // 更新了连线的样式
+        if (lineStyleProps.includes(prop)) {
+            (node.parent || node).renderLine(true)
+        }
    }

    /** 
@@ -747,10 +793,7 @@ class Render {
                node.data.expand = true
            }
        }, null, true, 0, 0)
-        this.mindMap.render()
-        this.root.children.forEach((item) => {
-            item.updateExpandBtnNode()
-        })
+        this.mindMap.reRender()
    }

    /** 
@@ -759,14 +802,41 @@ class Render {
     * @Desc: 收起所有 
     */
    unexpandAllNode() {
-        this.root.children.forEach((item) => {
-            this.setNodeExpand(item, false)
-        })
        walk(this.renderTree, null, (node, parent, isRoot) => {
+            node._node = null
            if (!isRoot) {
                node.data.expand = false
            }
        }, null, true, 0, 0)
+        this.mindMap.reRender()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-23 16:31:27 
+     * @Desc: 展开到指定层级 
+     */
+    expandToLevel(level) {
+        walk(this.renderTree, null, (node, parent, isRoot, layerIndex) => {
+            node._node = null
+            node.data.expand = layerIndex < level
+        }, null, true, 0, 0)
+        this.mindMap.reRender()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-08-14 09:18:40 
+     * @Desc: 切换激活节点的展开状态 
+     */
+    toggleActiveExpand() {
+        this.activeNodeList.forEach((node) => {
+            if (node.nodeData.children.length <= 0) {
+                return
+            }
+            this.toggleNodeExpand(node)
+        })
    }

    /** 
@@ -855,6 +925,100 @@ class Render {
        })
    }

+    /** 
+     * @Author: 王林 
+     * @Date: 2022-07-30 20:52:42 
+     * @Desc: 添加节点概要
+     */
+    addGeneralization(data) {
+        if (this.activeNodeList.length <= 0) {
+            return
+        }
+        this.activeNodeList.forEach((node) => {
+            if (node.nodeData.data.generalization || node.isRoot) {
+                return
+            }
+            this.setNodeData(node, {
+                generalization: data || {
+                    text: '概要'
+                }
+            })
+            node.update()
+        })
+        this.mindMap.render()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-07-30 21:16:33 
+     * @Desc: 删除节点概要
+     */
+    removeGeneralization() {
+        if (this.activeNodeList.length <= 0) {
+            return
+        }
+        this.activeNodeList.forEach((node) => {
+            if (!node.nodeData.data.generalization) {
+                return
+            }
+            this.setNodeData(node, {
+                generalization: null
+            })
+            node.update()
+        })
+        this.mindMap.render()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-08-02 19:04:24 
+     * @Desc: 设置节点自定义位置 
+     */
+    setNodeCustomPosition(node, left = undefined, top = undefined) {
+        let nodeList = [node] || this.activeNodeList
+        nodeList.forEach((item) => {
+            this.setNodeData(item, {
+                customLeft: left,
+                customTop: top
+            })
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-08-02 20:02:50 
+     * @Desc: 一键整理布局，即去除自定义位置 
+     */
+    resetLayout() {
+        walk(this.root, null, (node) => {
+            node.customLeft = undefined
+            node.customTop = undefined
+            this.setNodeData(node, {
+                customLeft: undefined,
+                customTop: undefined
+            })
+            this.mindMap.render()
+        }, null, true, 0, 0)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 21:44:01 
+     * @Desc: 设置节点形状 
+     */
+    setNodeShape(node, shape) {
+        if (!shape || !shapeList.includes(shape)) {
+            return
+        }
+        let nodeList = [node] || this.activeNodeList
+        nodeList.forEach((item) => {
+            this.setNodeStyle(item, 'shape', shape)
+        })
+    }
+
    /** 
     * @Author: 王林 
     * @Date: 2021-05-04 14:19:48 
@@ -876,6 +1040,10 @@ class Render {
        let changed = node.getSize()
        node.renderNode()
        if (changed) {
+            if (node.isGeneralization) {
+                // 概要节点
+                node.generalizationBelongNode.updateGeneralization()
+            }
            this.mindMap.render()
        }
    }
--- a/simple-mind-map/src/Select.js
+++ b/simple-mind-map/src/Select.js
@@ -31,7 +31,10 @@ class Select {
    bindEvent() {
        this.checkInNodes = throttle(this.checkInNodes, 500, this)
        this.mindMap.on('mousedown', (e) => {
-            if (e.which !== 3) {
+            if (this.mindMap.opt.readonly) {
+                return
+            }
+            if (!e.ctrlKey && e.which !== 3) {
                return
            }
            this.isMousedown = true
@@ -41,6 +44,9 @@ class Select {
            this.createRect(x, y)
        })
        this.mindMap.on('mousemove', (e) => {
+            if (this.mindMap.opt.readonly) {
+                return
+            }
            if (!this.isMousedown) {
                return
            }
@@ -54,6 +60,9 @@ class Select {
            this.onMove(x, y)
        })
        this.mindMap.on('mouseup', (e) => {
+            if (this.mindMap.opt.readonly) {
+                return
+            }
            if (!this.isMousedown) {
                return;
            }
--- a/simple-mind-map/src/Shape.js
+++ b/simple-mind-map/src/Shape.js
@@ -0,0 +1,265 @@
+/** 
+ * @Author: 王林 
+ * @Date: 2022-08-22 21:32:50 
+ * @Desc: 节点形状类 
+ */
+ export default class Shape {
+    constructor(node) {
+        this.node = node
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-08-17 22:32:32 
+     * @Desc: 形状需要的padding 
+     */
+    getShapePadding(width, height, paddingX, paddingY) {
+        const shape = this.node.getShape()
+        const defaultPaddingX = 15
+        const defaultPaddingY = 5
+        const actWidth = width + paddingX * 2
+        const actHeight = height + paddingY * 2
+        const actOffset = Math.abs(actWidth - actHeight)
+        switch (shape) {
+            case 'roundedRectangle':
+                return {
+                    paddingX: height > width ? (height - width) / 2 : 0,
+                    paddingY: 0
+                }  
+            case 'diamond':
+                return {
+                    paddingX: width / 2,
+                    paddingY: height / 2
+                }
+            case 'parallelogram':
+                return {
+                    paddingX: paddingX <= 0 ? defaultPaddingX : 0,
+                    paddingY: 0
+                }
+            case 'outerTriangularRectangle':
+                return {
+                    paddingX: paddingX <= 0 ? defaultPaddingX : 0,
+                    paddingY: 0
+                }
+            case 'innerTriangularRectangle':
+                return {
+                    paddingX: paddingX <= 0 ? defaultPaddingX : 0,
+                    paddingY: 0
+                }
+            case 'ellipse':
+                return {
+                    paddingX: paddingX <= 0 ? defaultPaddingX : 0,
+                    paddingY: paddingY <= 0 ? defaultPaddingY : 0
+                }
+            case 'circle':
+                return {
+                    paddingX: actHeight > actWidth ? actOffset / 2 : 0,
+                    paddingY: actHeight < actWidth ? actOffset / 2 : 0,
+                }
+            default:
+                return {
+                    paddingX: 0,
+                    paddingY: 0
+                }
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-08-17 22:22:53 
+     * @Desc: 创建形状节点 
+     */
+    createShape() {
+        const shape = this.node.getShape()
+        let { width, height } = this.node
+        let node = null
+        // 矩形
+        if (shape === 'rectangle') {
+            node = this.node.group.rect(width, height)
+        } else if (shape === 'diamond') {
+            // 菱形
+            node = this.createDiamond()
+        } else if (shape === 'parallelogram') {
+            // 平行四边形
+            node = this.createParallelogram()
+        } else if (shape === 'roundedRectangle') {
+            // 圆角矩形
+            node = this.createRoundedRectangle()
+        } else if (shape === 'octagonalRectangle') {
+            // 八角矩形
+            node = this.createOctagonalRectangle()
+        } else if (shape === 'outerTriangularRectangle') {
+            // 外三角矩形
+            node = this.createOuterTriangularRectangle()
+        } else if (shape === 'innerTriangularRectangle') {
+            // 内三角矩形
+            node = this.createInnerTriangularRectangle()
+        } else if (shape === 'ellipse') {
+            // 椭圆
+            node = this.createEllipse()
+        } else if (shape === 'circle') {
+            // 圆
+            node = this.createCircle()
+        }
+        return node
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-09-04 09:08:54 
+     * @Desc: 创建菱形 
+     */
+    createDiamond() {
+        let { width, height } = this.node
+        let halfWidth = width / 2
+        let halfHeight = height / 2
+        let topX = halfWidth
+        let topY = 0
+        let rightX = width
+        let rightY = halfHeight
+        let bottomX = halfWidth
+        let bottomY = height
+        let leftX = 0
+        let leftY = halfHeight
+        return this.node.group.polygon(`
+            ${topX}, ${topY}
+            ${rightX}, ${rightY}
+            ${bottomX}, ${bottomY}
+            ${leftX}, ${leftY}
+        `)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-09-03 16:14:12 
+     * @Desc: 创建平行四边形 
+     */
+    createParallelogram() {
+        let { paddingX } = this.node.getPaddingVale()
+        paddingX = paddingX || this.node.shapePadding.paddingX
+        let { width, height } = this.node
+        return this.node.group.polygon(`
+            ${paddingX}, ${0}
+            ${width}, ${0}
+            ${width - paddingX}, ${height}
+            ${0}, ${height}
+        `)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-09-03 16:50:23 
+     * @Desc: 创建圆角矩形 
+     */
+    createRoundedRectangle() {
+        let { width, height } = this.node
+        let halfHeight = height / 2
+        return this.node.group.path(`
+            M${halfHeight},0
+            L${width - halfHeight},0
+            A${height / 2},${height / 2} 0 0,1 ${width - halfHeight},${height} 
+            L${halfHeight},${height}
+            A${height / 2},${height / 2} 0 0,1 ${halfHeight},${0}
+        `)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 16:14:08 
+     * @Desc: 创建八角矩形 
+     */
+    createOctagonalRectangle() {
+        let w = 5
+        let { width, height } = this.node
+        return this.node.group.polygon(`
+            ${0}, ${w}
+            ${w}, ${0}
+            ${width - w}, ${0}
+            ${width}, ${w}
+            ${width}, ${height - w}
+            ${width - w}, ${height}
+            ${w}, ${height}
+            ${0}, ${height - w}
+        `)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 20:55:50 
+     * @Desc: 创建外三角矩形 
+     */
+    createOuterTriangularRectangle() {
+        let { paddingX } = this.node.getPaddingVale()
+        paddingX = paddingX || this.node.shapePadding.paddingX
+        let { width, height } = this.node
+        return this.node.group.polygon(`
+            ${paddingX}, ${0}
+            ${width - paddingX}, ${0}
+            ${width}, ${height / 2}
+            ${width - paddingX}, ${height}
+            ${paddingX}, ${height}
+            ${0}, ${height / 2}
+        `)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 20:59:37 
+     * @Desc: 创建内三角矩形 
+     */
+    createInnerTriangularRectangle() {
+        let { paddingX } = this.node.getPaddingVale()
+        paddingX = paddingX || this.node.shapePadding.paddingX
+        let { width, height } = this.node
+        return this.node.group.polygon(`
+            ${0}, ${0}
+            ${width}, ${0}
+            ${width - paddingX / 2}, ${height / 2}
+            ${width}, ${height}
+            ${0}, ${height}
+            ${paddingX / 2}, ${height / 2}
+        `)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 21:06:31 
+     * @Desc: 创建椭圆 
+     */
+    createEllipse() {
+        let { width, height } = this.node
+        let halfWidth = width / 2
+        let halfHeight = height / 2
+        return this.node.group.path(`
+            M${halfWidth},0
+            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
+            M${halfWidth},${height} 
+            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
+        `)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 21:14:04 
+     * @Desc: 创建圆 
+     */
+    createCircle() {
+        let { width, height } = this.node
+        let halfWidth = width / 2
+        let halfHeight = height / 2
+        return this.node.group.path(`
+            M${halfWidth},0
+            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
+            M${halfWidth},${height} 
+            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
+        `)
+    }
+}
+
+// 形状列表
+export const shapeList = ['rectangle', 'diamond', 'parallelogram', 'roundedRectangle', 'octagonalRectangle', 'outerTriangularRectangle', 'innerTriangularRectangle', 'ellipse', 'circle']
--- a/simple-mind-map/src/Style.js
+++ b/simple-mind-map/src/Style.js
@@ -50,6 +50,8 @@ class Style {
        let defaultConfig = this.themeConfig.node
        if (root || rootProp.includes(prop)) {// 直接使用最外层样式
            defaultConfig = this.themeConfig
+        } else if (this.ctx.isGeneralization) {// 概要节点
+            defaultConfig = this.themeConfig.generalization
        } else if (this.ctx.layerIndex === 0) {// 根节点
            defaultConfig = this.themeConfig.root
        } else if (this.ctx.layerIndex === 1) {// 二级节点
@@ -64,7 +66,27 @@ class Style {
            }
        }
        // 优先使用节点本身的样式
-        return this.ctx.nodeData.data[prop] !== undefined ? this.ctx.nodeData.data[prop] : defaultConfig[prop]
+        return this.getSelfStyle(prop) !== undefined ? this.getSelfStyle(prop) : defaultConfig[prop]
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 21:55:57 
+     * @Desc: 获取某个样式值 
+     */
+    getStyle(prop, root, isActive) {
+        return this.merge(prop, root, isActive)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: flydreame 
+     * @Date: 2022-09-17 12:09:39 
+     * @Desc: 获取自身自定义样式 
+     */
+    getSelfStyle(prop) {
+        return this.ctx.nodeData.data[prop]
    }

    /** 
@@ -73,13 +95,24 @@ class Style {
     * @Desc: 矩形 
     */
    rect(node) {
+        this.shape(node)
+        node.radius(this.merge('borderRadius'))
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林 
+     * @Date: 2022-09-12 15:04:28 
+     * @Desc:  矩形外的其他形状 
+     */
+    shape(node) {
        node.fill({
            color: this.merge('fillColor')
        }).stroke({
            color: this.merge('borderColor'),
            width: this.merge('borderWidth'),
            dasharray: this.merge('borderDasharray')
-        }).radius(this.merge('borderRadius'))
+        })
    }

    /** 
@@ -150,8 +183,17 @@ class Style {
     * @Date: 2021-04-11 14:50:49 
     * @Desc: 连线 
     */
-    line(node) {
-        node.stroke({ width: this.merge('lineWidth', true), color: this.merge('lineColor', true) }).fill({ color: 'none' })
+    line(node, { width, color, dasharray } = {}) {
+        node.stroke({ width, color, dasharray }).fill({ color: 'none' })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-07-30 16:19:03 
+     * @Desc: 概要连线 
+     */
+    generalizationLine(node) {
+        node.stroke({ width: this.merge('generalizationLineWidth', true), color: this.merge('generalizationLineColor', true) }).fill({ color: 'none' })
    }

    /** 
--- a/simple-mind-map/src/TextEdit.js
+++ b/simple-mind-map/src/TextEdit.js
@@ -47,10 +47,6 @@ export default class TextEdit {
        this.mindMap.on('before_node_active', () => {
            this.hideEditTextBox()
        })
-        // 注册回车快捷键
-        this.mindMap.keyCommand.addShortcut('Enter', () => {
-            this.hideEditTextBox()
-        })
        // 注册编辑快捷键
        this.mindMap.keyCommand.addShortcut('F2', () => {
            if (this.renderer.activeNodeList.length <= 0) {
@@ -60,6 +56,19 @@ export default class TextEdit {
        })
    }

+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-08-16 16:27:02 
+     * @Desc: 注册临时快捷键 
+     */
+    registerTmpShortcut() {
+        // 注册回车快捷键
+        this.mindMap.keyCommand.addShortcut('Enter', () => {
+            this.hideEditTextBox()
+        })
+    }
+
    /** 
     * @Author: 王林 
     * @Date: 2021-04-13 22:15:56 
@@ -76,6 +85,7 @@ export default class TextEdit {
     */
    showEditTextBox(node, rect) {
        this.mindMap.emit('before_show_text_edit')
+        this.registerTmpShortcut()
        if (!this.textEditNode) {
            this.textEditNode = document.createElement('div')
            this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none;`
@@ -119,6 +129,10 @@ export default class TextEdit {
        this.renderer.activeNodeList.forEach((node) => {
            let str = getStrWithBrFromHtml(this.textEditNode.innerHTML)
            this.mindMap.execCommand('SET_NODE_TEXT', node, str)
+            if (node.isGeneralization) {
+                // 概要节点
+                node.generalizationBelongNode.updateGeneralization()
+            }
            this.mindMap.render()
        })
        this.mindMap.emit('hide_text_edit', this.textEditNode, this.renderer.activeNodeList)
--- a/simple-mind-map/src/View.js
+++ b/simple-mind-map/src/View.js
@@ -50,6 +50,10 @@ class View {
            this.sy = this.y
        })
        this.mindMap.event.on('drag', (e, event) => {
+            if (e.ctrlKey) {
+                // 按住ctrl键拖动为多选
+                return
+            }
            if (this.firstDrag) {
                this.firstDrag = false
                // 清除激活节点
@@ -122,6 +126,17 @@ class View {
        this.transform()
    }

+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-10-10 14:03:53 
+     * @Desc: 平移x方式到 
+     */
+    translateXTo(x) {
+        this.x = x
+        this.transform()
+    }
+
    /** 
     * javascript comment 
     * @Author: 王林25 
@@ -133,6 +148,17 @@ class View {
        this.transform()
    }

+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-10-10 14:04:10 
+     * @Desc: 平移y方向到 
+     */
+    translateYTo(y) {
+        this.y = y
+        this.transform()
+    }
+
    /** 
     * @Author: 王林 
     * @Date: 2021-07-04 17:13:14 
--- a/simple-mind-map/src/assets/classic4.jpg
+++ b/simple-mind-map/src/assets/classic4.jpg
--- a/simple-mind-map/src/layouts/Base.js
+++ b/simple-mind-map/src/layouts/Base.js
@@ -1,4 +1,7 @@
 import Node from '../Node'
+import {
+    walk,
+} from '../utils'

 /** 
 * @Author: 王林 
@@ -49,6 +52,13 @@ class Base {
        throw new Error('【renderExpandBtn】方法为必要方法，需要子类进行重写！')
    }

+    /** 
+     * @Author: 王林 
+     * @Date: 2022-07-30 22:49:28 
+     * @Desc: 概要节点 
+     */
+    renderGeneralization() {}
+
    /** 
     * @Author: 王林 
     * @Date: 2021-07-10 21:30:54 
@@ -109,7 +119,7 @@ class Base {
    updateChildren(children, prop, offset) {
        children.forEach((item) => {
            item[prop] += offset
-            if (item.children && item.children.length) {
+            if (item.children && item.children.length && !item.hasCustomPosition()) {// 适配自定义位置
                this.updateChildren(item.children, prop, offset)
            }
        })
@@ -156,6 +166,83 @@ class Base {
    getMarginY(layerIndex) {
        return layerIndex === 1 ? this.mindMap.themeConfig.second.marginY : this.mindMap.themeConfig.node.marginY;
    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-07-31 20:53:12 
+     * @Desc: 获取节点包括概要在内的宽度 
+     */
+    getNodeWidthWithGeneralization(node) {
+        return Math.max(node.width, node.checkHasGeneralization() ? node._generalizationNodeWidth : 0)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-07-31 20:53:12 
+     * @Desc: 获取节点包括概要在内的高度 
+     */
+    getNodeHeightWithGeneralization(node) {
+        return Math.max(node.height, node.checkHasGeneralization() ? node._generalizationNodeHeight : 0)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-07-31 09:14:03 
+     * @Desc: 获取节点的边界值 
+     * dir：生长方向，h（水平）、v（垂直）
+     * isLeft：是否向左生长
+     */
+    getNodeBoundaries(node, dir, isLeft) {
+        let { generalizationLineMargin, generalizationNodeMargin } = this.mindMap.themeConfig
+        let walk = (root) => {
+            let _left = Infinity
+            let _right = -Infinity
+            let _top = Infinity
+            let _bottom = -Infinity
+            if (root.children && root.children.length > 0) {
+                root.children.forEach((child) => {
+                    let {left, right, top, bottom} = walk(child)
+                    // 概要内容的宽度
+                    let generalizationWidth = child.checkHasGeneralization() && child.nodeData.data.expand ? child._generalizationNodeWidth + generalizationNodeMargin : 0
+                    // 概要内容的高度
+                    let generalizationHeight = child.checkHasGeneralization() && child.nodeData.data.expand ? child._generalizationNodeHeight + generalizationNodeMargin : 0
+                    if (left - (dir === 'h' ? generalizationWidth : 0) < _left) {
+                        _left = left - (dir === 'h' ? generalizationWidth : 0)
+                    }
+                    if (right + (dir === 'h' ? generalizationWidth : 0) > _right) {
+                        _right = right + (dir === 'h' ? generalizationWidth : 0)
+                    }
+                    if (top < _top) {
+                        _top = top
+                    }
+                    if (bottom + (dir === 'v' ? generalizationHeight : 0) > _bottom) {
+                        _bottom = bottom + (dir === 'v' ? generalizationHeight : 0)
+                    }
+                })
+            }
+            let cur = {
+                left: root.left,
+                right: root.left + root.width,
+                top: root.top,
+                bottom: root.top + root.height
+            }
+            return {
+                left: cur.left < _left ? cur.left : _left,
+                right: cur.right > _right ? cur.right : _right,
+                top: cur.top < _top ? cur.top : _top,
+                bottom: cur.bottom > _bottom ? cur.bottom : _bottom
+            }
+        }
+        let {left, right, top, bottom} = walk(node)
+        return {
+            left, 
+            right,
+            top,
+            bottom,
+            generalizationLineMargin,
+            generalizationNodeMargin
+        };
+    }
 }

 export default Base
--- a/simple-mind-map/src/layouts/CatalogOrganization.js
+++ b/simple-mind-map/src/layouts/CatalogOrganization.js
@@ -165,15 +165,18 @@ class CatalogOrganization extends Base {
            let index = childrenList.findIndex((item) => {
                return item === node
            })
-            // 第一个或最后一个节点自身也需要移动，否则两边不对称
-            if (index === 0 || index === childrenList.length - 1) {
+            // 存在大于一个节点时，第一个或最后一个节点自身也需要移动，否则两边不对称
+            if ((index === 0 || index === childrenList.length - 1) && childrenList.length > 1) {
                let _offset = index === 0 ? -addWidth : addWidth
                node.left += _offset
-                if (node.children && node.children.length) {
+                if (node.children && node.children.length && !node.hasCustomPosition()) {
                    this.updateChildren(node.children, 'left', _offset)
                }
            }
            childrenList.forEach((item, _index) => {
+                if (item.hasCustomPosition()) {// 适配自定义位置
+                    return
+                }
                let _offset = 0
                if (_index < index) { // 左边的节点往左移
                    _offset = -addWidth
@@ -204,6 +207,9 @@ class CatalogOrganization extends Base {
                return item === node
            })
            childrenList.forEach((item, _index) => {
+                if (item.hasCustomPosition()) {// 适配自定义位置
+                    return
+                }
                let _offset = 0
                // 下面的节点往下移
                if (_index > index) {
@@ -225,7 +231,7 @@ class CatalogOrganization extends Base {
     * @Date: 2021-04-11 14:42:48 
     * @Desc: 绘制连线，连接该节点到其子节点
     */
-    renderLine(node, lines) {
+    renderLine(node, lines, style) {
        if (node.children.length <= 0) {
            return [];
        }
@@ -239,53 +245,99 @@ class CatalogOrganization extends Base {
        let len = node.children.length
        let marginX = this.getMarginX(node.layerIndex + 1)
        if (node.isRoot) {
+            // 根节点
            let x1 = left + width / 2
            let y1 = top + height
            let s1 = marginX * 0.7
-            let minx = 0
-            let maxx = 0
+            let minx = Infinity
+            let maxx = -Infinity
            node.children.forEach((item, index) => {
                let x2 = item.left +item.width / 2
                let y2 = item.top
-                if (index === 0) {
+                if (x2 < minx) {
                    minx = x2
-                } else if (index >= len - 1) {
+                }
+                if (x2 > maxx) {
                    maxx = x2
                }
-                let path = `M ${x2},${y1 + s1} L ${x2},${y2}`
+                let path = `M ${x2},${y1 + s1} L ${x2},${y1 + s1 > y2 ? y2 + item.height : y2}`
+                // 竖线
                lines[index].plot(path)
+                style && style(lines[index], item)
            })
+            minx = Math.min(minx, x1)
+            maxx = Math.max(maxx, x1)
            // 父节点的竖线
            let line1 = this.draw.path()
            node.style.line(line1)
            line1.plot(`M ${x1},${y1} L ${x1},${y1 + s1}`)
            node._lines.push(line1)
+            style && style(line1, node)
            // 水平线
-            if (len > 1) {
+            if (len > 0) {
                let lin2 = this.draw.path()
                node.style.line(lin2)
                lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
                node._lines.push(lin2)
+                style && style(lin2, node)
            }
        } else {
+            // 非根节点
            let y1 = top + height
-            let maxy = 0
+            let maxy = -Infinity
            let x2 = node.left + node.width * 0.3
            node.children.forEach((item, index) => {
+                // 为了适配自定义位置，下面做了各种位置的兼容
                let y2 = item.top + item.height / 2
-                if (index >= len - 1) {
+                if (y2 > maxy) {
                    maxy = y2
                }
-                let path = `M ${x2},${y2} L ${x2 + node.width * 0.2},${y2}`
+                // 水平线
+                let path = ''
+                let _left = item.left
+                let _isLeft = item.left + item.width < x2
+                let _isXCenter = false
+                if (_isLeft) {
+                    // 水平位置在父节点左边
+                    _left = item.left + item.width
+                } else if (item.left < x2 && item.left + item.width > x2) {
+                    // 水平位置在父节点之间
+                    _isXCenter = true
+                    y2 = item.top
+                    maxy = y2
+                }   
+                if (y2 > top && y2 < y1) {
+                    // 自定义位置的情况：垂直位置节点在父节点之间
+                    path = `M ${_isLeft ? node.left : node.left + node.width},${y2} L ${_left},${y2}`
+                } else if (y2 < y1) {
+                    // 自定义位置的情况：垂直位置节点在父节点上面
+                    if (_isXCenter) {
+                        y2 = item.top + item.height
+                        _left = x2
+                    }
+                    path = `M ${x2},${top} L ${x2},${y2} L ${_left},${y2}`
+                } else {
+                    if (_isXCenter) {
+                        _left = x2
+                    }
+                    path = `M ${x2},${y2} L ${_left},${y2}`
+                }
                lines[index].plot(path)
+                style && style(lines[index], item)
            })
            // 竖线
            if (len > 0) {
                let lin2 = this.draw.path()
                expandBtnSize = len > 0 ? expandBtnSize : 0
                node.style.line(lin2)
-                lin2.plot(`M ${x2},${y1 + expandBtnSize} L ${x2},${maxy}`)
+                if (maxy < y1 + expandBtnSize) {
+                    lin2.hide()
+                } else {
+                    lin2.plot(`M ${x2},${y1 + expandBtnSize} L ${x2},${maxy}`)
+                    lin2.show()
+                }
                node._lines.push(lin2)
+                style && style(lin2, node)
            }
        }
    }
@@ -310,6 +362,25 @@ class CatalogOrganization extends Base {
            btn.translate(width * 0.3 - expandBtnSize / 2 - translateX, height + expandBtnSize / 2 - translateY)
        }
    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-07-30 08:30:35 
+     * @Desc: 创建概要节点 
+     */
+    renderGeneralization(node, gLine, gNode) {
+        let { top, bottom, right, generalizationLineMargin, generalizationNodeMargin } = this.getNodeBoundaries(node, 'h')
+        let x1 = right + generalizationLineMargin
+        let y1 = top
+        let x2 = right + generalizationLineMargin
+        let y2 = bottom
+        let cx = x1 + 20
+        let cy = y1 + (y2 - y1) / 2
+        let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+        gLine.plot(path)
+        gNode.left = right + generalizationNodeMargin
+        gNode.top = top + (bottom - top - gNode.height) / 2
+    }
 }

 export default CatalogOrganization
--- a/simple-mind-map/src/layouts/LogicalStructure.js
+++ b/simple-mind-map/src/layouts/LogicalStructure.js
@@ -120,7 +120,7 @@ class LogicalStructure extends Base {
                return item === node
            })
            childrenList.forEach((item, _index) => {
-                if (item === node) {
+                if (item === node || item.hasCustomPosition()) {// 适配自定义位置
                    return
                }
                let _offset = 0
@@ -146,7 +146,81 @@ class LogicalStructure extends Base {
     * @Date: 2021-04-11 14:42:48 
     * @Desc: 绘制连线，连接该节点到其子节点
     */
-    renderLine(node, lines) {
+    renderLine(node, lines, style, lineStyle) {
+        if (lineStyle === 'curve') {
+            this.renderLineCurve(node, lines, style)
+        } else if (lineStyle === 'direct') {
+            this.renderLineDirect(node, lines, style)
+        } else {
+            this.renderLineStraight(node, lines, style)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:17:30 
+     * @Desc: 直线风格连线 
+     */
+    renderLineStraight(node, lines, style) {
+        if (node.children.length <= 0) {
+            return [];
+        }
+        let {
+            left,
+            top,
+            width,
+            height,
+            expandBtnSize
+        } = node
+        let marginX = this.getMarginX(node.layerIndex + 1)
+        let s1 = (marginX - expandBtnSize) * 0.6
+        node.children.forEach((item, index) => {
+            let x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
+            let y1 = top + height / 2
+            let x2 = item.left
+            let y2 = item.top + item.height / 2
+            let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${x1 + s1},${y2} L ${x2},${y2}`
+            lines[index].plot(path)
+            style && style(lines[index], item)
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:34:41 
+     * @Desc: 直连风格 
+     */
+    renderLineDirect(node, lines, style) {
+        if (node.children.length <= 0) {
+            return [];
+        }
+        let {
+            left,
+            top,
+            width,
+            height,
+            expandBtnSize
+        } = node
+        node.children.forEach((item, index) => {
+            let x1 = node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
+            let y1 = top + height / 2
+            let x2 = item.left
+            let y2 = item.top + item.height / 2
+            let path = `M ${x1},${y1} L ${x2},${y2}`
+            lines[index].plot(path)
+            style && style(lines[index], item)
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:17:43 
+     * @Desc: 曲线风格连线 
+     */
+    renderLineCurve(node, lines, style) {
        if (node.children.length <= 0) {
            return [];
        }
@@ -169,6 +243,7 @@ class LogicalStructure extends Base {
                path = this.cubicBezierPath(x1, y1, x2, y2)
            }
            lines[index].plot(path)
+            style && style(lines[index], item)
        })
    }

@@ -188,6 +263,25 @@ class LogicalStructure extends Base {
        } = btn.transform()
        btn.translate(width - translateX, height / 2 - translateY)
    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-07-30 08:30:35 
+     * @Desc: 创建概要节点 
+     */
+    renderGeneralization(node, gLine, gNode) {
+        let { top, bottom, right, generalizationLineMargin, generalizationNodeMargin } = this.getNodeBoundaries(node, 'h')
+        let x1 = right + generalizationLineMargin
+        let y1 = top
+        let x2 = right + generalizationLineMargin
+        let y2 = bottom
+        let cx = x1 + 20
+        let cy = y1 + (y2 - y1) / 2
+        let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+        gLine.plot(path)
+        gNode.left = right + generalizationNodeMargin
+        gNode.top = top + (bottom - top - gNode.height) / 2
+    }
 }

 export default LogicalStructure
--- a/simple-mind-map/src/layouts/MindMap.js
+++ b/simple-mind-map/src/layouts/MindMap.js
@@ -155,6 +155,9 @@ class MindMap extends Base {
                return item === node
            })
            childrenList.forEach((item, _index) => {
+                if (item.hasCustomPosition()) {// 适配自定义位置
+                    return
+                }
                let _offset = 0
                let addHeight = item.dir === 'left' ? leftAddHeight : rightAddHeight
                // 上面的节点往上移
@@ -179,7 +182,89 @@ class MindMap extends Base {
     * @Date: 2021-04-11 14:42:48 
     * @Desc: 绘制连线，连接该节点到其子节点
     */
-    renderLine(node, lines) {
+    renderLine(node, lines, style, lineStyle) {
+        if (lineStyle === 'curve') {
+            this.renderLineCurve(node, lines, style)
+        } else if (lineStyle === 'direct') {
+            this.renderLineDirect(node, lines, style)
+        } else {
+            this.renderLineStraight(node, lines, style)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:10:47 
+     * @Desc: 直线风格连线 
+     */
+    renderLineStraight(node, lines, style) {
+        if (node.children.length <= 0) {
+            return [];
+        }
+        let {
+            left,
+            top,
+            width,
+            height,
+            expandBtnSize
+        } = node
+        let marginX = this.getMarginX(node.layerIndex + 1)
+        let s1 = (marginX - expandBtnSize) * 0.6
+        node.children.forEach((item, index) => {
+            let x1 = 0
+            let _s = 0
+            if (item.dir === 'left') {
+                _s = -s1
+                x1 = node.layerIndex === 0 ? left : left - expandBtnSize
+            } else {
+                _s = s1
+                x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
+            }
+            let y1 = top + height / 2
+            let x2 = item.dir === 'left' ? item.left + item.width : item.left
+            let y2 = item.top + item.height / 2
+            let path = `M ${x1},${y1} L ${x1 + _s},${y1} L ${x1 + _s},${y2} L ${x2},${y2}` 
+            lines[index].plot(path)
+            style && style(lines[index], item)
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:34:41 
+     * @Desc: 直连风格 
+     */
+     renderLineDirect(node, lines, style) {
+        if (node.children.length <= 0) {
+            return [];
+        }
+        let {
+            left,
+            top,
+            width,
+            height,
+            expandBtnSize
+        } = node
+        node.children.forEach((item, index) => {
+            let x1 = node.layerIndex === 0 ? left + width / 2 : item.dir === 'left' ? left - expandBtnSize : left + width + expandBtnSize
+            let y1 = top + height / 2
+            let x2 = item.dir === 'left' ? item.left + item.width : item.left
+            let y2 = item.top + item.height / 2
+            let path = `M ${x1},${y1} L ${x2},${y2}`
+            lines[index].plot(path)
+            style && style(lines[index], item)
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:10:56 
+     * @Desc: 曲线风格连线 
+     */
+    renderLineCurve(node, lines, style) {
        if (node.children.length <= 0) {
            return [];
        }
@@ -202,6 +287,7 @@ class MindMap extends Base {
                path = this.cubicBezierPath(x1, y1, x2, y2)
            }
            lines[index].plot(path)
+            style && style(lines[index], item)
        })
    }

@@ -224,6 +310,27 @@ class MindMap extends Base {
        let y = height / 2 - translateY
        btn.translate(x, y)
    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-07-30 08:30:35 
+     * @Desc: 创建概要节点 
+     */
+    renderGeneralization(node, gLine, gNode) {
+        let isLeft = node.dir === 'left'
+        let { top, bottom, left, right, generalizationLineMargin, generalizationNodeMargin } = this.getNodeBoundaries(node, 'h', isLeft)
+        let x = isLeft ? left - generalizationLineMargin : right + generalizationLineMargin
+        let x1 = x
+        let y1 = top
+        let x2 = x
+        let y2 = bottom
+        let cx = x1 + (isLeft ? -20 : 20)
+        let cy = y1 + (y2 - y1) / 2
+        let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+        gLine.plot(path)
+        gNode.left = x + (isLeft ? -generalizationNodeMargin : generalizationNodeMargin) - (isLeft ? gNode.width : 0)
+        gNode.top = top + (bottom - top - gNode.height) / 2
+    }
 }

 export default MindMap
--- a/simple-mind-map/src/layouts/OrganizationStructure.js
+++ b/simple-mind-map/src/layouts/OrganizationStructure.js
@@ -121,6 +121,9 @@ class OrganizationStructure extends Base {
                return item === node
            })
            childrenList.forEach((item, _index) => {
+                if (item.hasCustomPosition()) {// 适配自定义位置
+                    return
+                }
                let _offset = 0
                // 上面的节点往上移
                if (_index < index) {
@@ -144,7 +147,48 @@ class OrganizationStructure extends Base {
     * @Date: 2021-04-11 14:42:48 
     * @Desc: 绘制连线，连接该节点到其子节点
     */
-    renderLine(node, lines) {
+    renderLine(node, lines, style, lineStyle) {
+        if (lineStyle === 'direct') {
+            this.renderLineDirect(node, lines, style)
+        } else {
+            this.renderLineStraight(node, lines, style)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:34:41 
+     * @Desc: 直连风格 
+     */
+     renderLineDirect(node, lines, style) {
+        if (node.children.length <= 0) {
+            return [];
+        }
+        let {
+            left,
+            top,
+            width,
+            height,
+        } = node
+        let x1 = left + width / 2
+        let y1 = top + height
+        node.children.forEach((item, index) => {
+            let x2 = item.left + item.width / 2
+            let y2 = item.top
+            let path = `M ${x1},${y1} L ${x2},${y2}`
+            lines[index].plot(path)
+            style && style(lines[index], item)
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-09-30 14:39:07 
+     * @Desc: 直线风格连线 
+     */
+    renderLineStraight(node, lines, style) {
        if (node.children.length <= 0) {
            return [];
        }
@@ -160,32 +204,38 @@ class OrganizationStructure extends Base {
        let y1 = top + height
        let marginX = this.getMarginX(node.layerIndex + 1)
        let s1 = marginX * 0.7
-        let minx = 0
-        let maxx = 0
+        let minx = Infinity
+        let maxx = -Infinity
        let len = node.children.length
        node.children.forEach((item, index) => {
            let x2 = item.left + item.width / 2
-            let y2 = item.top
-            if (index === 0) {
+            let y2 = y1 + s1 > item.top ? item.top + item.height : item.top
+            if (x2 < minx) {
                minx = x2
-            } else if (index >= len - 1) {
+            }
+            if (x2 > maxx) {
                maxx = x2
            }
            let path = `M ${x2},${y1 + s1} L ${x2},${y2}`
            lines[index].plot(path)
+            style && style(lines[index], item)
        })
+        minx = Math.min(x1, minx)
+        maxx = Math.max(x1, maxx)
        // 父节点的竖线
        let line1 = this.draw.path()
        node.style.line(line1)
        expandBtnSize = len > 0 && !isRoot ? expandBtnSize : 0
        line1.plot(`M ${x1},${y1 + expandBtnSize} L ${x1},${y1 + s1}`)
        node._lines.push(line1)
+        style && style(line1, node)
        // 水平线
-        if (len > 1) {
+        if (len > 0) {
            let lin2 = this.draw.path()
            node.style.line(lin2)
            lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
            node._lines.push(lin2)
+            style && style(lin2, node)
        }
    }

@@ -206,6 +256,25 @@ class OrganizationStructure extends Base {
        } = btn.transform()
        btn.translate(width / 2 - expandBtnSize / 2 - translateX, height + expandBtnSize / 2 - translateY)
    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2022-07-30 08:30:35 
+     * @Desc: 创建概要节点 
+     */
+    renderGeneralization(node, gLine, gNode) {
+        let { bottom, left, right, generalizationLineMargin, generalizationNodeMargin } = this.getNodeBoundaries(node, 'v')
+        let x1 = left
+        let y1 = bottom + generalizationLineMargin
+        let x2 = right
+        let y2 = bottom + generalizationLineMargin
+        let cx = x1 + (x2 - x1) / 2
+        let cy = y1 + 20
+        let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+        gLine.plot(path)
+        gNode.top = bottom + generalizationNodeMargin
+        gNode.left = left + (right - left - gNode.width) / 2
+    }
 }

 export default OrganizationStructure
--- a/simple-mind-map/src/parse/xmind.js
+++ b/simple-mind-map/src/parse/xmind.js
@@ -0,0 +1,173 @@
+import JSZip from "jszip";
+import xmlConvert from "xml-js";
+
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2022-09-21 14:07:47
+ * @Desc: 解析.xmind文件
+ */
+const parseXmindFile = (file) => {
+  return new Promise((resolve, reject) => {
+    JSZip.loadAsync(file).then(
+      async (zip) => {
+        try {
+          let content = "";
+          if (zip.files["content.json"]) {
+            let json = await zip.files["content.json"].async("string");
+            content = transformXmind(json);
+          } else if (zip.files["content.xml"]) {
+            let xml = await zip.files["content.xml"].async("string");
+            let json = xmlConvert.xml2json(xml);
+            content = transformOldXmind(json);
+          }
+          if (content) {
+            resolve(content);
+          } else {
+            reject(new Error("解析失败"));
+          }
+        } catch (error) {
+          reject(error);
+        }
+      },
+      (e) => {
+        reject(e);
+      }
+    );
+  });
+};
+
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2022-09-21 18:57:25
+ * @Desc: 转换xmind数据
+ */
+const transformXmind = (content) => {
+  let data = JSON.parse(content)[0];
+  let nodeTree = data.rootTopic;
+  let newTree = {};
+  let walk = (node, newNode) => {
+    newNode.data = {
+      // 节点内容
+      text: node.title,
+    };
+    // 节点备注
+    if (node.notes) {
+      newNode.data.note = (node.notes.realHTML || node.notes.plain).content;
+    }
+    // 超链接
+    if (node.href && /^https?:\/\//.test(node.href)) {
+      newNode.data.hyperlink = node.href;
+    }
+    // 标签
+    if (node.labels && node.labels.length > 0) {
+      newNode.data.tag = node.labels;
+    }
+    // 子节点
+    newNode.children = [];
+    if (
+      node.children &&
+      node.children.attached &&
+      node.children.attached.length > 0
+    ) {
+      node.children.attached.forEach((item) => {
+        let newChild = {};
+        newNode.children.push(newChild);
+        walk(item, newChild);
+      });
+    }
+  };
+  walk(nodeTree, newTree);
+  return newTree;
+};
+
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2022-09-23 15:51:51
+ * @Desc: 转换旧版xmind数据，xmind8
+ */
+const transformOldXmind = (content) => {
+  let data = JSON.parse(content);
+  let elements = data.elements;
+  let root = null;
+  let getRoot = (arr) => {
+    for (let i = 0; i < arr.length; i++) {
+      if (!root && arr[i].name === "topic") {
+        root = arr[i];
+        return;
+      }
+    }
+    arr.forEach((item) => {
+      getRoot(item.elements);
+    });
+  };
+  getRoot(elements);
+  let newTree = {};
+  let getItemByName = (arr, name) => {
+    return arr.find((item) => {
+      return item.name === name;
+    });
+  };
+  let walk = (node, newNode) => {
+    let nodeElements = node.elements;
+    newNode.data = {
+      // 节点内容
+      text: getItemByName(nodeElements, "title").elements[0].text,
+    };
+    try {
+      // 节点备注
+      let notesElement = getItemByName(nodeElements, "notes");
+      if (notesElement) {
+        newNode.data.note =
+          notesElement.elements[0].elements[0].elements[0].text;
+      }
+    } catch (error) {}
+    try {
+      // 超链接
+      if (
+        node.attributes &&
+        node.attributes["xlink:href"] &&
+        /^https?:\/\//.test(node.attributes["xlink:href"])
+      ) {
+        newNode.data.hyperlink = node.attributes["xlink:href"];
+      }
+    } catch (error) {}
+    try {
+      // 标签
+      let labelsElement = getItemByName(nodeElements, "labels");
+      if (labelsElement) {
+        newNode.data.tag = labelsElement.elements.map((item) => {
+          return item.elements[0].text;
+        });
+      }
+    } catch (error) {}
+    // 子节点
+    newNode.children = [];
+    let _children = getItemByName(nodeElements, "children");
+    if (_children && _children.elements && _children.elements.length > 0) {
+      _children.elements.forEach((item) => {
+        if (item.name === "topics") {
+          item.elements.forEach((item2) => {
+            let newChild = {};
+            newNode.children.push(newChild);
+            walk(item2, newChild);
+          });
+        } else {
+          let newChild = {};
+          newNode.children.push(newChild);
+          walk(item, newChild);
+        }
+      });
+    }
+  };
+  walk(root, newTree);
+  return newTree;
+};
+
+export default {
+  parseXmindFile,
+  transformXmind,
+  transformOldXmind,
+};
--- a/simple-mind-map/src/themes/blueSky.js
+++ b/simple-mind-map/src/themes/blueSky.js
@@ -11,6 +11,10 @@ export default merge(defaultTheme, {
    lineColor: 'rgb(115, 161, 191)',
    // 背景颜色
    backgroundColor: 'rgb(251, 251, 251)',
+    // 概要连线的粗细
+    generalizationLineWidth: 1,
+    // 概要连线的颜色
+    generalizationLineColor: '#333',
    // 根节点样式
    root: {
        fillColor: 'rgb(115, 161, 191)',
@@ -37,4 +41,13 @@ export default merge(defaultTheme, {
            borderColor: 'rgb(57, 80, 96)'
        }
    },
+    // 概要节点样式
+    generalization: {
+        fillColor: '#fff',
+        borderColor: '#333',
+        color: '#333',
+        active: {
+            borderColor: 'rgb(57, 80, 96)'
+        }
+    }
 })
--- a/simple-mind-map/src/themes/brainImpairedPink.js
+++ b/simple-mind-map/src/themes/brainImpairedPink.js
@@ -11,6 +11,10 @@ export default merge(defaultTheme, {
    lineColor: 'rgb(191, 115, 148)',
    // 背景颜色
    backgroundColor: 'rgb(251, 251, 251)',
+    // 概要连线的粗细
+    generalizationLineWidth: 1,
+    // 概要连线的颜色
+    generalizationLineColor: '#333',
    // 根节点样式
    root: {
        fillColor: 'rgb(191, 115, 148)',
@@ -36,5 +40,14 @@ export default merge(defaultTheme, {
        active: {
            borderColor: 'rgb(96, 57, 74)'
        }
+    },
+    // 概要节点样式
+    generalization: {
+        fillColor: '#fff',
+        borderColor: '#333',
+        color: '#333',
+        active: {
+            borderColor: 'rgb(96, 57, 74)'
+        }
    }
 })
--- a/simple-mind-map/src/themes/classic.js
+++ b/simple-mind-map/src/themes/classic.js
@@ -11,6 +11,10 @@ export default merge(defaultTheme, {
    lineColor: '#fff',
    // 连线的粗细
    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: '#fff',
    // 背景颜色
    backgroundColor: 'rgb(58, 65, 68)',
    // 背景图片
@@ -49,5 +53,15 @@ export default merge(defaultTheme, {
            fillColor: 'rgb(254, 219, 0)',
            borderColor: 'transparent'
        }
+    },
+    // 概要节点样式
+    generalization: {
+        fillColor: '#fff',
+        borderColor: 'transparent',
+        color: '#333',
+        active: {
+            fillColor: 'rgb(254, 219, 0)',
+            borderColor: 'transparent'
+        }
    }
 })
--- a/simple-mind-map/src/themes/classic2.js
+++ b/simple-mind-map/src/themes/classic2.js
@@ -11,6 +11,10 @@ export default merge(defaultTheme, {
    lineColor: 'rgb(51, 51, 51)',
    // 连线的粗细
    lineWidth: 2,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(51, 51, 51)',
    // 背景颜色
    backgroundColor: '#fff',
    // 根节点样式
@@ -41,5 +45,15 @@ export default merge(defaultTheme, {
        active: {
            borderColor: 'rgb(51, 51, 51)'
        }
+    },
+    // 概要节点样式
+    generalization: {
+        fillColor: '#fff',
+        borderColor: 'rgb(51, 51, 51)',
+        borderWidth: 2,
+        color: '#1a1a1a',
+        active: {
+            borderColor: 'rgb(18, 187, 55)'
+        }
    }
 })
--- a/simple-mind-map/src/themes/classic3.js
+++ b/simple-mind-map/src/themes/classic3.js
@@ -11,6 +11,10 @@ export default merge(defaultTheme, {
    lineColor: 'rgb(94, 202, 110)',
    // 连线的粗细
    lineWidth: 2,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: '#1a1a1a',
    // 背景颜色
    backgroundColor: 'rgb(241, 241, 241)',
    // 根节点样式
@@ -44,5 +48,15 @@ export default merge(defaultTheme, {
        active: {
            borderColor: 'rgb(94, 202, 110)'
        }
+    },
+    // 概要节点样式
+    generalization: {
+        fillColor: '#fff',
+        borderColor: '#1a1a1a',
+        color: '#1a1a1a',
+        borderWidth: 2,
+        active: {
+            borderColor: 'rgb(94, 202, 110)'
+        }
    }
 })
--- a/simple-mind-map/src/themes/classic4.js
+++ b/simple-mind-map/src/themes/classic4.js
@@ -0,0 +1,65 @@
+import defaultTheme from './default';
+import merge from 'deepmerge';
+
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-11 15:22:18 
+ * @Desc: 经典4
+ */
+export default merge(defaultTheme, {
+    // 连线的颜色
+    lineColor: 'rgb(30, 53, 86)',
+    // 连线的粗细
+    lineWidth: 2,
+    // 概要连线的粗细
+    generalizationLineWidth: 2,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(56, 123, 233)',
+    // 背景颜色
+    backgroundColor: 'rgb(241, 241, 241)',
+    // 根节点样式
+    root: {
+        fillColor: 'rgb(30, 53, 86)',
+        color: '#fff',
+        fontSize: 24,
+        borderRadius: 10,
+        borderColor: 'rgb(189, 197, 201)',
+        borderWidth: 2,
+        active: {
+            borderColor: 'rgb(169, 218, 218)'
+        }
+    },
+    // 二级节点样式
+    second: {
+        fillColor: 'rgb(169, 218, 218)',
+        borderColor: 'rgb(30, 53, 86)',
+        borderWidth: 2,
+        color: '#fff',
+        fontSize: 18,
+        borderRadius: 10,
+        active: {
+            borderColor: 'rgb(56, 123, 233)'
+        }
+    },
+    // 三级及以下节点样式
+    node: {
+        fontSize: 14,
+        color: 'rgb(30, 53, 86)',
+        borderColor: 'rgb(30, 53, 86)',
+        borderWidth: 1,
+        marginY: 20,
+        active: {
+            borderColor: 'rgb(169, 218, 218)'
+        }
+    },
+    // 概要节点样式
+    generalization: {
+        fillColor: 'rgb(56, 123, 233)',
+        borderColor: 'rgb(56, 123, 233)',
+        color: '#fff',
+        borderWidth: 0,
+        active: {
+            borderColor: 'rgb(169, 218, 218)'
+        }
+    }
+})
--- a/simple-mind-map/src/themes/classicBlue.js
+++ b/simple-mind-map/src/themes/classicBlue.js
@@ -11,6 +11,10 @@ export default merge(defaultTheme, {
    lineColor: 'rgb(51, 51, 51)',
    // 连线的粗细
    lineWidth: 2,
+    // 概要连线的粗细
+    generalizationLineWidth: 2,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(51, 51, 51)',
    // 背景颜色
    backgroundColor: 'rgb(239, 248, 250)',
    // 根节点样式
@@ -39,5 +43,14 @@ export default merge(defaultTheme, {
        active: {
            borderColor: 'rgb(94, 199, 248)'
        }
+    },
+    // 概要节点样式
+    generalization: {
+        fillColor: '#fff',
+        borderColor: 'rgb(51, 51, 51)',
+        color: '#333',
+        active: {
+            borderColor: 'rgb(94, 199, 248)'
+        }
    }
 })
--- a/simple-mind-map/src/themes/classicGreen.js
+++ b/simple-mind-map/src/themes/classicGreen.js
@@ -11,6 +11,10 @@ export default merge(defaultTheme, {
    lineColor: 'rgb(123, 199, 120)',
    // 背景颜色
    backgroundColor: 'rgb(236, 245, 231)',
+    // 概要连线的粗细
+    generalizationLineWidth: 2,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(123, 199, 120)',
    // 根节点样式
    root: {
        fillColor: 'rgb(253, 244, 217)',
@@ -37,5 +41,15 @@ export default merge(defaultTheme, {
        active: {
            borderColor: 'rgb(94, 199, 248)'
        }
+    },
+    // 概要节点样式
+    generalization: {
+        fillColor: 'rgb(123, 199, 120)',
+        borderColor: 'transparent',
+        borderWidth: 2,
+        color: '#fff',
+        active: {
+            borderColor: 'rgb(94, 199, 248)'
+        }
    }
 })
--- a/simple-mind-map/src/themes/dark.js
+++ b/simple-mind-map/src/themes/dark.js
@@ -11,6 +11,10 @@ export default merge(defaultTheme, {
    lineColor: 'rgb(17, 68, 23)',
    // 连线的粗细
    lineWidth: 2,
+    // 概要连线的粗细
+    generalizationLineWidth: 2,
+    // 概要连线的颜色
+    generalizationLineColor: '#fff',
    // 背景颜色
    backgroundColor: 'rgb(15, 16, 17)',
    // 根节点样式
@@ -41,5 +45,14 @@ export default merge(defaultTheme, {
        active: {
            borderColor: 'rgb(17, 68, 23)'
        }
+    },
+    // 概要节点样式
+    generalization: {
+        fillColor: '#fff',
+        borderColor: 'transparent',
+        color: '#333',
+        active: {
+            borderColor: 'rgb(17, 68, 23)'
+        }
    }
 })
--- a/simple-mind-map/src/themes/dark2.js
+++ b/simple-mind-map/src/themes/dark2.js
@@ -10,6 +10,10 @@ export default merge(defaultTheme, {
    // 连线的颜色
    lineColor: 'rgb(75, 81, 78)',
    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(255, 119, 34)',
    // 背景颜色
    backgroundColor: 'rgb(27, 31, 34)',
    // 根节点样式
@@ -42,5 +46,15 @@ export default merge(defaultTheme, {
        active: {
            borderColor: 'rgb(254, 199, 13)'
        }
+    },
+    // 概要节点样式
+    generalization: {
+        fillColor: 'transparent',
+        borderColor: 'rgb(255, 119, 34)',
+        borderWidth: 2,
+        color: 'rgb(204, 204, 204)',
+        active: {
+            borderColor: 'rgb(254, 199, 13)'
+        }
    }
 })
--- a/simple-mind-map/src/themes/default.js
+++ b/simple-mind-map/src/themes/default.js
@@ -17,6 +17,18 @@ export default {
    lineWidth: 1,
    // 连线的颜色
    lineColor: '#549688',
+    // 连线样式
+    lineDasharray: 'none',
+    // 连线风格
+    lineStyle: 'straight',// 针对logicalStructure、mindMap两种结构。曲线（curve）、直线（straight）、直连（direct）
+    // 概要连线的粗细
+    generalizationLineWidth: 1,
+    // 概要连线的颜色
+    generalizationLineColor: '#549688',
+    // 概要曲线距节点的距离
+    generalizationLineMargin: 0,
+    // 概要节点距节点的距离
+    generalizationNodeMargin: 20,
    // 背景颜色
    backgroundColor: '#fafafa',
    // 背景图片
@@ -25,6 +37,7 @@ export default {
    backgroundRepeat: 'no-repeat',
    // 根节点样式
    root: {
+        shape: 'rectangle',
        fillColor: '#549688',
        fontFamily: '微软雅黑, Microsoft YaHei',
        color: '#fff',
@@ -45,6 +58,7 @@ export default {
    },
    // 二级节点样式
    second: {
+        shape: 'rectangle',
        marginX: 100,
        marginY: 40,
        fillColor: '#fff',
@@ -67,6 +81,7 @@ export default {
    },
    // 三级及以下节点样式
    node: {
+        shape: 'rectangle',
        marginX: 50,
        marginY: 0,
        fillColor: 'transparent',
@@ -86,5 +101,34 @@ export default {
            borderWidth: 3,
            borderDasharray: 'none',
        }
+    },
+    // 概要节点样式
+    generalization: {
+        shape: 'rectangle',
+        marginX: 100,
+        marginY: 40,
+        fillColor: '#fff',
+        fontFamily: '微软雅黑, Microsoft YaHei',
+        color: '#565656',
+        fontSize: 16,
+        fontWeight: 'noraml',
+        fontStyle: 'normal',
+        lineHeight: 1.5,
+        borderColor: '#549688',
+        borderWidth: 1,
+        borderDasharray: 'none',
+        borderRadius: 5,
+        textDecoration: 'none',
+        active: {
+            borderColor: 'rgb(57, 80, 96)',
+            borderWidth: 3,
+            borderDasharray: 'none',
+        }
    }
-}
+}
+
+// 支持激活样式的属性
+// 简单来说，会改变节点大小的都不支持在激活时设置，为了性能考虑，节点切换激活态时不会重新计算节点大小
+export const supportActiveStyle = ['fillColor', 'color', 'fontWeight', 'fontStyle', 'borderColor', 'borderWidth', 'borderDasharray', 'borderRadius', 'textDecoration']
+
+export const lineStyleProps = ['lineColor', 'lineDasharray', 'lineWidth']
--- a/simple-mind-map/src/themes/earthYellow.js
+++ b/simple-mind-map/src/themes/earthYellow.js
@@ -11,6 +11,10 @@ export default merge(defaultTheme, {
    lineColor: 'rgb(191, 147, 115)',
    // 背景颜色
    backgroundColor: 'rgb(251, 251, 251)',
+    // 概要连线的粗细
+    generalizationLineWidth: 1,
+    // 概要连线的颜色
+    generalizationLineColor: '#333',
    // 根节点样式
    root: {
        fillColor: 'rgb(191, 147, 115)',
@@ -36,5 +40,14 @@ export default merge(defaultTheme, {
        active: {
            borderColor: 'rgb(96, 73, 57)'
        }
+    },
+    // 概要节点样式
+    generalization: {
+        fillColor: '#fff',
+        borderColor: '#333',
+        color: '#333',
+        active: {
+            borderColor: 'rgb(96, 73, 57)'
+        }
    }
 })
--- a/simple-mind-map/src/themes/freshGreen.js
+++ b/simple-mind-map/src/themes/freshGreen.js
@@ -11,6 +11,10 @@ export default merge(defaultTheme, {
    lineColor: '#333',
    // 背景颜色
    backgroundColor: '#d1f6ec',
+    // 概要连线的粗细
+    generalizationLineWidth: 1,
+    // 概要连线的颜色
+    generalizationLineColor: '#333',
    // 根节点样式
    root: {
        fillColor: '#1fb27d'
@@ -22,4 +26,15 @@ export default merge(defaultTheme, {
        borderColor: 'transparent',
        borderWidth: 0
    },
+    // 概要节点样式
+    generalization: {
+        fillColor: '#fff',
+        borderColor: '#333',
+        color: '#333',
+        active: {
+            borderColor: 'rgb(57, 80, 96)',
+            borderWidth: 3,
+            borderDasharray: 'none',
+        }
+    }
 })
--- a/simple-mind-map/src/themes/freshRed.js
+++ b/simple-mind-map/src/themes/freshRed.js
@@ -11,6 +11,10 @@ export default merge(defaultTheme, {
    lineColor: 'rgb(191, 115, 115)',
    // 背景颜色
    backgroundColor: 'rgb(251, 251, 251)',
+    // 概要连线的粗细
+    generalizationLineWidth: 1,
+    // 概要连线的颜色
+    generalizationLineColor: '#333',
    // 根节点样式
    root: {
        fillColor: 'rgb(191, 115, 115)',
@@ -36,5 +40,14 @@ export default merge(defaultTheme, {
        active: {
            borderColor: 'rgb(96, 57, 57)'
        }
+    },
+    // 概要节点样式
+    generalization: {
+        fillColor: '#fff',
+        borderColor: '#333',
+        color: '#333',
+        active: {
+            borderColor: 'rgb(96, 57, 57)'
+        }
    }
 })
--- a/simple-mind-map/src/themes/gold.js
+++ b/simple-mind-map/src/themes/gold.js
@@ -10,6 +10,10 @@ export default merge(defaultTheme, {
    // 连线的颜色
    lineColor: 'rgb(51, 56, 62)',
    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(127, 93, 64)',
    // 背景颜色
    backgroundColor: '#fff',
    // 根节点样式
@@ -42,5 +46,14 @@ export default merge(defaultTheme, {
        active: {
            borderColor: 'rgb(0, 192, 184)'
        }
+    },
+    // 概要节点样式
+    generalization: {
+        fillColor: 'rgb(127, 93, 64)',
+        borderColor: 'transparent',
+        color: 'rgb(255, 214, 175)',
+        active: {
+            borderColor: 'rgb(51, 56, 62)'
+        }
    }
 })
--- a/simple-mind-map/src/themes/greenLeaf.js
+++ b/simple-mind-map/src/themes/greenLeaf.js
@@ -10,6 +10,10 @@ export default merge(defaultTheme, {
    // 连线的颜色
    lineColor: 'rgb(40, 193, 84)',
    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(251, 158, 0)',
    // 背景颜色
    backgroundColor: 'rgb(238, 255, 243)',
    // 根节点样式
@@ -42,5 +46,15 @@ export default merge(defaultTheme, {
        active: {
            borderColor: 'rgb(25, 193, 73)'
        }
+    },
+    // 概要节点样式
+    generalization: {
+        fillColor: '#fff',
+        borderColor: 'rgb(251, 158, 0)',
+        borderWidth: 2,
+        color: 'rgb(51, 51, 51)',
+        active: {
+            borderColor: 'rgb(25, 193, 73)'
+        }
    }
 })
--- a/simple-mind-map/src/themes/index.js
+++ b/simple-mind-map/src/themes/index.js
@@ -8,6 +8,7 @@ import earthYellow from './earthYellow'
 import classic from './classic'
 import classic2 from './classic2'
 import classic3 from './classic3'
+import classic4 from './classic4';
 import dark from './dark';
 import classicGreen from './classicGreen'
 import classicBlue from './classicBlue'
@@ -31,6 +32,7 @@ export default {
    classic,
    classic2,
    classic3,
+    classic4,
    dark,
    classicGreen,
    classicBlue,
--- a/simple-mind-map/src/themes/minions.js
+++ b/simple-mind-map/src/themes/minions.js
@@ -10,6 +10,10 @@ export default merge(defaultTheme, {
    // 连线的颜色
    lineColor: 'rgb(51, 51, 51)',
    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: '#222',
    // 背景颜色
    backgroundColor: 'rgb(248, 215, 49)',
    // 根节点样式
@@ -39,5 +43,14 @@ export default merge(defaultTheme, {
        active: {
            borderColor: 'rgb(55, 165, 255)'
        }
+    },
+    // 概要节点样式
+    generalization: {
+        borderColor: '#222',
+        borderWidth: 3,
+        color: '#222',
+        active: {
+            borderColor: 'rgb(55, 165, 255)'
+        }
    }
 })
--- a/simple-mind-map/src/themes/mint.js
+++ b/simple-mind-map/src/themes/mint.js
@@ -10,6 +10,10 @@ export default merge(defaultTheme, {
    // 连线的颜色
    lineColor: 'rgb(104, 204, 202)',
    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(90, 206, 241)',
    // 背景颜色
    backgroundColor: 'rgb(239, 255, 255)',
    // 根节点样式
@@ -40,5 +44,14 @@ export default merge(defaultTheme, {
        active: {
            borderColor: 'rgb(0, 192, 184)'
        }
+    },
+    // 概要节点样式
+    generalization: {
+        fillColor: 'rgb(90, 206, 241)',
+        borderColor: 'transparent',
+        color: '#fff',
+        active: {
+            borderColor: 'rgb(0, 192, 184)'
+        }
    }
 })
--- a/simple-mind-map/src/themes/pinkGrape.js
+++ b/simple-mind-map/src/themes/pinkGrape.js
@@ -10,6 +10,10 @@ export default merge(defaultTheme, {
    // 连线的颜色
    lineColor: 'rgb(166, 101, 106)',
    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: '#fff',
    // 背景颜色
    backgroundColor: 'rgb(255, 208, 211)',
    // 根节点样式
@@ -41,5 +45,15 @@ export default merge(defaultTheme, {
        active: {
            borderColor: 'rgb(139, 109, 225)'
        }
+    },
+    // 概要节点样式
+    generalization: {
+        fillColor: '#fff',
+        borderColor: 'transparent',
+        color: '#222',
+        active: {
+            borderColor: 'rgb(139, 109, 225)',
+            borderWidth: 2,
+        }
    }
 })
--- a/simple-mind-map/src/themes/romanticPurple.js
+++ b/simple-mind-map/src/themes/romanticPurple.js
@@ -11,6 +11,10 @@ export default merge(defaultTheme, {
    lineColor: 'rgb(123, 115, 191)',
    // 背景颜色
    backgroundColor: 'rgb(251, 251, 251)',
+    // 概要连线的粗细
+    generalizationLineWidth: 1,
+    // 概要连线的颜色
+    generalizationLineColor: '#333',
    // 根节点样式
    root: {
        fillColor: 'rgb(123, 115, 191)',
@@ -36,5 +40,14 @@ export default merge(defaultTheme, {
        active: {
            borderColor: 'rgb(61, 57, 96)'
        }
+    },
+    // 概要节点样式
+    generalization: {
+        fillColor: '#fff',
+        borderColor: '#333',
+        color: '#333',
+        active: {
+            borderColor: 'rgb(61, 57, 96)'
+        }
    }
 })
--- a/simple-mind-map/src/themes/skyGreen.js
+++ b/simple-mind-map/src/themes/skyGreen.js
@@ -10,6 +10,10 @@ export default merge(defaultTheme, {
    // 连线的颜色
    lineColor: '#fff',
    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: '#fff',
    // 背景颜色
    backgroundColor: 'rgb(80, 156, 170)',
    // 根节点样式
@@ -42,5 +46,14 @@ export default merge(defaultTheme, {
        active: {
            borderColor: 'rgb(251, 227, 188)'
        }
+    },
+    // 概要节点样式
+    generalization: {
+        fillColor: '#fff',
+        borderColor: 'transparent',
+        color: 'rgb(65, 89, 158)',
+        active: {
+            borderColor: 'rgb(251, 227, 188)'
+        }
    }
 })
--- a/simple-mind-map/src/themes/vitalityOrange.js
+++ b/simple-mind-map/src/themes/vitalityOrange.js
@@ -10,6 +10,10 @@ export default merge(defaultTheme, {
    // 连线的颜色
    lineColor: 'rgb(254, 146, 0)',
    lineWidth: 3,
+    // 概要连线的粗细
+    generalizationLineWidth: 3,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(255, 222, 69)',
    // 背景颜色
    backgroundColor: 'rgb(255, 246, 243)',
    // 根节点样式
@@ -42,5 +46,14 @@ export default merge(defaultTheme, {
        active: {
            borderColor: 'rgb(255, 112, 52)'
        }
+    },
+    // 概要节点样式
+    generalization: {
+        fillColor: 'rgb(255, 222, 69)',
+        borderColor: 'transparent',
+        color: 'rgb(51, 51, 51)',
+        active: {
+            borderColor: 'rgb(255, 112, 52)'
+        }
    }
 })
--- a/simple-mind-map/src/utils/constant.js
+++ b/simple-mind-map/src/utils/constant.js
@@ -122,6 +122,11 @@ export const themeList = [
        value: 'classic3',
        img: require('../assets/classic3.jpg')
    },
+    {
+        name: '脑图经典4',
+        value: 'classic4',
+        img: require('../assets/classic4.jpg')
+    },
    {
        name: '经典绿',
        value: 'classicGreen',
--- a/simple-mind-map/src/utils/index.js
+++ b/simple-mind-map/src/utils/index.js
@@ -147,13 +147,19 @@ export const copyRenderTree = (tree, root) => {
 * @Date: 2021-05-04 14:40:11 
 * @Desc: 复制节点树数据 
 */
-export const copyNodeTree = (tree, root) => {
-    tree.data = simpleDeepClone(root.nodeData.data)
-    // tree.data.isActive = false
+export const copyNodeTree = (tree, root, removeActiveState = false) => {
+    tree.data = simpleDeepClone(root.nodeData ? root.nodeData.data : root.data)
+    if (removeActiveState) {
+        tree.data.isActive = false
+    }
    tree.children = []
    if (root.children && root.children.length > 0) {
        root.children.forEach((item, index) => {
-            tree.children[index] = copyNodeTree({}, item)
+            tree.children[index] = copyNodeTree({}, item, removeActiveState)
+        })
+    } else if (root.nodeData && root.nodeData.children && root.nodeData.children.length > 0) {
+        root.nodeData.children.forEach((item, index) => {
+            tree.children[index] = copyNodeTree({}, item, removeActiveState)
        })
    }
    return tree;
@@ -178,7 +184,7 @@ export const imgToDataUrl = (src) => {
                // 图片绘制到canvas里
                ctx.drawImage(img, 0, 0, img.width, img.height)
                resolve(canvas.toDataURL())
-            } catch (error) {
+            } catch (e) {
                reject(e)
            }
        }
@@ -229,7 +235,7 @@ export const asyncRun = (taskList, callback = () => {}) => {
    let index = 0
    let len = taskList.length
    if (len <= 0) {
-        return
+        return callback()
    }
    let loop = () => {
        if (index >= len) {
@@ -243,4 +249,4 @@ export const asyncRun = (taskList, callback = () => {}) => {
        }, 0)
    }
    loop()
-}
+}
--- a/web/package.json
+++ b/web/package.json
@@ -5,7 +5,8 @@
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build && node ../copy.js",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "buildLibrary": "vue-cli-service build --target lib --name simpleMindMap ../simple-mind-map/index.js --dest ../simple-mind-map/dist"
  },
  "dependencies": {
    "@toast-ui/editor": "^3.1.5",
--- a/web/src/.DS_Store
+++ b/web/src/.DS_Store
--- a/web/src/api/index.js
+++ b/web/src/api/index.js
@@ -1,5 +1,6 @@
 import exampleData from "simple-mind-map/example/exampleData"
 import { simpleDeepClone } from 'simple-mind-map/src/utils/index'
+import Vue from 'vue'

 const SIMPLE_MIND_MAP_DATA = 'SIMPLE_MIND_MAP_DATA'

@@ -47,6 +48,7 @@ export const storeData = (data) => {
    try {
        let originData = getData()
        originData.root = copyMindMapTreeData({}, data)
+        Vue.prototype.$bus.$emit('write_local_file', originData)
        let dataStr = JSON.stringify(originData)
        localStorage.setItem(SIMPLE_MIND_MAP_DATA, dataStr)
    } catch (error) {
@@ -66,6 +68,7 @@ export const storeConfig = (config) => {
            ...originData,
            ...config
        }
+        Vue.prototype.$bus.$emit('write_local_file', originData)
        let dataStr = JSON.stringify(originData)
        localStorage.setItem(SIMPLE_MIND_MAP_DATA, dataStr)
    } catch (error) {
--- a/web/src/assets/.DS_Store
+++ b/web/src/assets/.DS_Store
--- a/web/src/assets/icon-font/.DS_Store
+++ b/web/src/assets/icon-font/.DS_Store
--- a/web/src/assets/icon-font/demo_index.html
+++ b/web/src/assets/icon-font/demo_index.html
@@ -3,8 +3,8 @@
 <head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
-  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
-  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
@@ -54,6 +54,78 @@
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63e;</span>
+                <div class="name">导出</div>
+                <div class="code-name">&amp;#xe63e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe657;</span>
+                <div class="name">另存为</div>
+                <div class="code-name">&amp;#xe657;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe642;</span>
+                <div class="name">export</div>
+                <div class="code-name">&amp;#xe642;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xebdf;</span>
+                <div class="name">打开</div>
+                <div class="code-name">&amp;#xebdf;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64e;</span>
+                <div class="name">新建</div>
+                <div class="code-name">&amp;#xe64e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">剪切</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe83b;</span>
+                <div class="name">整理</div>
+                <div class="code-name">&amp;#xe83b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe604;</span>
+                <div class="name">复制</div>
+                <div class="code-name">&amp;#xe604;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63f;</span>
+                <div class="name">粘贴</div>
+                <div class="code-name">&amp;#xe63f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6be;</span>
+                <div class="name">上移</div>
+                <div class="code-name">&amp;#xe6be;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6bf;</span>
+                <div class="name">下移</div>
+                <div class="code-name">&amp;#xe6bf;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe609;</span>
+                <div class="name">概括总览</div>
+                <div class="code-name">&amp;#xe609;</div>
+              </li>
+          
            <li class="dib">
              <span class="icon iconfont">&#xf199;</span>
                <div class="name">全选</div>
@@ -258,9 +330,9 @@
 <pre><code class="language-css"
 >@font-face {
  font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1628093007325') format('woff2'),
-       url('iconfont.woff?t=1628093007325') format('woff'),
-       url('iconfont.ttf?t=1628093007325') format('truetype');
+  src: url('iconfont.woff2?t=1664005697217') format('woff2'),
+       url('iconfont.woff?t=1664005697217') format('woff'),
+       url('iconfont.ttf?t=1664005697217') format('truetype');
 }
 </code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -286,6 +358,114 @@
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
+          <li class="dib">
+            <span class="icon iconfont icondaochu1"></span>
+            <div class="name">
+              导出
+            </div>
+            <div class="code-name">.icondaochu1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconlingcunwei"></span>
+            <div class="name">
+              另存为
+            </div>
+            <div class="code-name">.iconlingcunwei
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconexport"></span>
+            <div class="name">
+              export
+            </div>
+            <div class="code-name">.iconexport
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icondakai"></span>
+            <div class="name">
+              打开
+            </div>
+            <div class="code-name">.icondakai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconxinjian"></span>
+            <div class="name">
+              新建
+            </div>
+            <div class="code-name">.iconxinjian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconjianqie"></span>
+            <div class="name">
+              剪切
+            </div>
+            <div class="code-name">.iconjianqie
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconzhengli"></span>
+            <div class="name">
+              整理
+            </div>
+            <div class="code-name">.iconzhengli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconfuzhi"></span>
+            <div class="name">
+              复制
+            </div>
+            <div class="code-name">.iconfuzhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconniantie"></span>
+            <div class="name">
+              粘贴
+            </div>
+            <div class="code-name">.iconniantie
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconshangyi"></span>
+            <div class="name">
+              上移
+            </div>
+            <div class="code-name">.iconshangyi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont iconxiayi"></span>
+            <div class="name">
+              下移
+            </div>
+            <div class="code-name">.iconxiayi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icongaikuozonglan"></span>
+            <div class="name">
+              概括总览
+            </div>
+            <div class="code-name">.icongaikuozonglan
+            </div>
+          </li>
+          
          <li class="dib">
            <span class="icon iconfont iconquanxuan"></span>
            <div class="name">
@@ -592,6 +772,102 @@
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icondaochu1"></use>
+                </svg>
+                <div class="name">导出</div>
+                <div class="code-name">#icondaochu1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconlingcunwei"></use>
+                </svg>
+                <div class="name">另存为</div>
+                <div class="code-name">#iconlingcunwei</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconexport"></use>
+                </svg>
+                <div class="name">export</div>
+                <div class="code-name">#iconexport</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icondakai"></use>
+                </svg>
+                <div class="name">打开</div>
+                <div class="code-name">#icondakai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconxinjian"></use>
+                </svg>
+                <div class="name">新建</div>
+                <div class="code-name">#iconxinjian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconjianqie"></use>
+                </svg>
+                <div class="name">剪切</div>
+                <div class="code-name">#iconjianqie</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconzhengli"></use>
+                </svg>
+                <div class="name">整理</div>
+                <div class="code-name">#iconzhengli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconfuzhi"></use>
+                </svg>
+                <div class="name">复制</div>
+                <div class="code-name">#iconfuzhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconniantie"></use>
+                </svg>
+                <div class="name">粘贴</div>
+                <div class="code-name">#iconniantie</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconshangyi"></use>
+                </svg>
+                <div class="name">上移</div>
+                <div class="code-name">#iconshangyi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#iconxiayi"></use>
+                </svg>
+                <div class="name">下移</div>
+                <div class="code-name">#iconxiayi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icongaikuozonglan"></use>
+                </svg>
+                <div class="name">概括总览</div>
+                <div class="code-name">#icongaikuozonglan</div>
+            </li>
+          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconquanxuan"></use>
--- a/web/src/assets/icon-font/iconfont.css
+++ b/web/src/assets/icon-font/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
  font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1628093007325') format('woff2'),
-       url('iconfont.woff?t=1628093007325') format('woff'),
-       url('iconfont.ttf?t=1628093007325') format('truetype');
+  src: url('iconfont.woff2?t=1664005697217') format('woff2'),
+       url('iconfont.woff?t=1664005697217') format('woff'),
+       url('iconfont.ttf?t=1664005697217') format('truetype');
 }

 .iconfont {
@@ -13,6 +13,54 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.icondaochu1:before {
+  content: "\e63e";
+}
+
+.iconlingcunwei:before {
+  content: "\e657";
+}
+
+.iconexport:before {
+  content: "\e642";
+}
+
+.icondakai:before {
+  content: "\ebdf";
+}
+
+.iconxinjian:before {
+  content: "\e64e";
+}
+
+.iconjianqie:before {
+  content: "\e601";
+}
+
+.iconzhengli:before {
+  content: "\e83b";
+}
+
+.iconfuzhi:before {
+  content: "\e604";
+}
+
+.iconniantie:before {
+  content: "\e63f";
+}
+
+.iconshangyi:before {
+  content: "\e6be";
+}
+
+.iconxiayi:before {
+  content: "\e6bf";
+}
+
+.icongaikuozonglan:before {
+  content: "\e609";
+}
+
 .iconquanxuan:before {
  content: "\f199";
 }
--- a/web/src/assets/icon-font/iconfont.js
+++ b/web/src/assets/icon-font/iconfont.js
--- a/web/src/assets/icon-font/iconfont.json
+++ b/web/src/assets/icon-font/iconfont.json
@@ -5,6 +5,90 @@
  "css_prefix_text": "icon",
  "description": "思维导图",
  "glyphs": [
+    {
+      "icon_id": "1305460",
+      "name": "导出",
+      "font_class": "daochu1",
+      "unicode": "e63e",
+      "unicode_decimal": 58942
+    },
+    {
+      "icon_id": "4784101",
+      "name": "另存为",
+      "font_class": "lingcunwei",
+      "unicode": "e657",
+      "unicode_decimal": 58967
+    },
+    {
+      "icon_id": "9929033",
+      "name": "export",
+      "font_class": "export",
+      "unicode": "e642",
+      "unicode_decimal": 58946
+    },
+    {
+      "icon_id": "4570294",
+      "name": "打开",
+      "font_class": "dakai",
+      "unicode": "ebdf",
+      "unicode_decimal": 60383
+    },
+    {
+      "icon_id": "5086088",
+      "name": "新建",
+      "font_class": "xinjian",
+      "unicode": "e64e",
+      "unicode_decimal": 58958
+    },
+    {
+      "icon_id": "1117",
+      "name": "剪切",
+      "font_class": "jianqie",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "1415523",
+      "name": "整理",
+      "font_class": "zhengli",
+      "unicode": "e83b",
+      "unicode_decimal": 59451
+    },
+    {
+      "icon_id": "2815710",
+      "name": "复制",
+      "font_class": "fuzhi",
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
+    {
+      "icon_id": "11121506",
+      "name": "粘贴",
+      "font_class": "niantie",
+      "unicode": "e63f",
+      "unicode_decimal": 58943
+    },
+    {
+      "icon_id": "11383392",
+      "name": "上移",
+      "font_class": "shangyi",
+      "unicode": "e6be",
+      "unicode_decimal": 59070
+    },
+    {
+      "icon_id": "11383396",
+      "name": "下移",
+      "font_class": "xiayi",
+      "unicode": "e6bf",
+      "unicode_decimal": 59071
+    },
+    {
+      "icon_id": "14843439",
+      "name": "概括总览",
+      "font_class": "gaikuozonglan",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
    {
      "icon_id": "19738998",
      "name": "全选",
--- a/web/src/assets/icon-font/iconfont.ttf
+++ b/web/src/assets/icon-font/iconfont.ttf
--- a/web/src/assets/icon-font/iconfont.woff
+++ b/web/src/assets/icon-font/iconfont.woff
--- a/web/src/assets/icon-font/iconfont.woff2
+++ b/web/src/assets/icon-font/iconfont.woff2
--- a/web/src/config/index.js
+++ b/web/src/config/index.js
@@ -130,6 +130,22 @@ export const borderRadiusList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 // 线宽
 export const lineWidthList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

+// 连线风格
+export const lineStyleList = [
+    {
+        name: '直线',
+        value: 'straight'
+    },
+    {
+        name: '曲线',
+        value: 'curve'
+    },
+    {
+        name: '直连',
+        value: 'direct'
+    }
+]
+
 // 图片重复方式
 export const backgroundRepeatList = [
    {
@@ -214,6 +230,21 @@ export const shortcutKeyList = [
                name: '插入同级节点',
                value: 'Enter'
            },
+            {
+                icon: 'iconshangyi',
+                name: '上移节点',
+                value: 'Ctrl + ↑'
+            },
+            {
+                icon: 'iconxiayi',
+                name: '下移节点',
+                value: 'Ctrl + ↓'
+            },
+            {
+                icon: 'icongaikuozonglan',
+                name: '插入概要',
+                value: 'Ctrl + S'
+            },
            {
                icon: 'iconzhankai',
                name: '展开/收起节点',
@@ -224,6 +255,21 @@ export const shortcutKeyList = [
                name: '删除节点',
                value: 'Delete | Backspace'
            },
+            {
+                icon: 'iconfuzhi',
+                name: '复制节点',
+                value: 'Ctrl + C'
+            },
+            {
+                icon: 'iconjianqie',
+                name: '剪切节点',
+                value: 'Ctrl + X'
+            },
+            {
+                icon: 'iconniantie',
+                name: '粘贴节点',
+                value: 'Ctrl + V'
+            },
            {
                icon: 'iconbianji',
                name: '编辑节点',
@@ -248,7 +294,17 @@ export const shortcutKeyList = [
                icon: 'iconquanxuan',
                name: '全选',
                value: 'Ctrl + A'
-            }
+            },
+            {
+                icon: 'iconquanxuan',
+                name: '多选',
+                value: '右键 / Ctrl + 左键'
+            },
+            {
+                icon: 'iconzhengli',
+                name: '一键整理布局',
+                value: 'Ctrl + L'
+            },
        ]
    },
    {
@@ -271,4 +327,44 @@ export const shortcutKeyList = [
            }
        ]
    }
+]
+
+// 形状列表
+export const shapeList = [
+    {
+        name: '矩形',
+        value: 'rectangle'
+    },
+    {
+        name: '菱形',
+        value: 'diamond'
+    },
+    {
+        name: '平行四边形',
+        value: 'parallelogram'
+    },
+    {
+        name: '圆角矩形',
+        value: 'roundedRectangle'
+    },
+    {
+        name: '八角矩形',
+        value: 'octagonalRectangle'
+    },
+    {
+        name: '外三角矩形',
+        value: 'outerTriangularRectangle'
+    },
+    {
+        name: '内三角矩形',
+        value: 'innerTriangularRectangle'
+    },
+    {
+        name: '椭圆',
+        value: 'ellipse'
+    },
+    {
+        name: '圆',
+        value: 'circle'
+    }
 ]
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/web/src/pages/Edit/components/BaseStyle.vue
@@ -94,6 +94,74 @@
          </el-select>
        </div>
      </div>
+      <div class="row">
+        <div class="rowItem">
+          <span class="name">风格</span>
+          <el-select
+            size="mini"
+            style="width: 80px"
+            v-model="style.lineStyle"
+            placeholder=""
+            @change="
+              (value) => {
+                update('lineStyle', value);
+              }
+            "
+          >
+            <el-option
+              v-for="item in lineStyleList"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <!-- 概要连线 -->
+      <div class="title noTop">概要的连线</div>
+      <div class="row">
+        <div class="rowItem">
+          <span class="name">颜色</span>
+          <span
+            class="block"
+            v-popover:popover2
+            :style="{ backgroundColor: style.generalizationLineColor }"
+          ></span>
+          <el-popover ref="popover2" placement="bottom" trigger="click">
+            <Color
+              :color="style.generalizationLineColor"
+              @change="
+                (color) => {
+                  update('generalizationLineColor', color);
+                }
+              "
+            ></Color>
+          </el-popover>
+        </div>
+        <div class="rowItem">
+          <span class="name">粗细</span>
+          <el-select
+            size="mini"
+            style="width: 80px"
+            v-model="style.generalizationLineWidth"
+            placeholder=""
+            @change="
+              (value) => {
+                update('generalizationLineWidth', value);
+              }
+            "
+          >
+            <el-option
+              v-for="item in lineWidthList"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
      <!-- 内边距 -->
      <div class="title noTop">节点内边距</div>
      <div class="row">
@@ -223,6 +291,7 @@ import Sidebar from "./Sidebar";
 import Color from "./Color";
 import {
  lineWidthList,
+  lineStyleList,
  backgroundRepeatList
 } from "@/config";
 import ImgUpload from "@/components/ImgUpload";
@@ -252,6 +321,7 @@ export default {
  data() {
    return {
      lineWidthList,
+      lineStyleList,
      backgroundRepeatList,
      activeTab: "color",
      marginActiveTab: "second",
@@ -259,6 +329,9 @@ export default {
        backgroundColor: "",
        lineColor: "",
        lineWidth: "",
+        lineStyle: "",
+        generalizationLineWidth: "",
+        generalizationLineColor: "",
        paddingX: 0,
        paddingY: 0,
        imgMaxWidth: 0,
@@ -290,7 +363,10 @@ export default {
      [
        "backgroundColor",
        "lineWidth",
+        "lineStyle",
        "lineColor",
+        "generalizationLineWidth",
+        "generalizationLineColor",
        "paddingX",
        "paddingY",
        "imgMaxWidth",
--- a/web/src/pages/Edit/components/Contextmenu.vue
+++ b/web/src/pages/Edit/components/Contextmenu.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="contextmenuContainer"
+    class="contextmenuContainer listBox"
    v-if="isShow"
    :style="{ left: left + 'px', top: top + 'px' }"
  >
@@ -11,14 +11,23 @@
        :class="{ disabled: insertNodeBtnDisabled }"
      >
        插入同级节点
+        <span class="desc">Enter</span>
+      </div>
+      <div class="item" @click="exec('INSERT_CHILD_NODE')">
+        插入子级节点
+        <span class="desc">Tab</span>
+      </div>
+      <div class="item" @click="exec('ADD_GENERALIZATION')" :class="{ disabled: insertNodeBtnDisabled }">
+        插入概要
+        <span class="desc">Ctrl + S</span>
      </div>
-      <div class="item" @click="exec('INSERT_CHILD_NODE')">插入子级节点</div>
      <div
        class="item"
        @click="exec('UP_NODE')"
        :class="{ disabled: upNodeBtnDisabled }"
      >
        上移节点
+        <span class="desc">Ctrl + ↑</span>
      </div>
      <div
        class="item"
@@ -26,22 +35,43 @@
        :class="{ disabled: downNodeBtnDisabled }"
      >
        下移节点
+        <span class="desc">Ctrl + ↓</span>
+      </div>
+      <div class="item danger" @click="exec('REMOVE_NODE')">
+        删除节点
+        <span class="desc">Delete</span>
+      </div>
+      <div class="item" @click="exec('COPY_NODE')">
+        复制节点
+        <span class="desc">Ctrl + C</span>
+      </div>
+      <div class="item" @click="exec('CUT_NODE')">
+        剪切节点
+        <span class="desc">Ctrl + X</span>
      </div>
-      <div class="item danger" @click="exec('REMOVE_NODE')">删除节点</div>
-      <div class="item" @click="exec('COPY_NODE')">复制节点</div>
-      <div class="item" @click="exec('CUT_NODE')">剪切节点</div>
      <div
        class="item"
        :class="{ disabled: copyData === null }"
        @click="exec('PASTE_NODE')"
      >
        粘贴节点
+        <span class="desc">Ctrl + V</span>
      </div>
    </template>
    <template v-if="type === 'svg'">
      <div class="item" @click="exec('RETURN_CENTER')">回到中心</div>
      <div class="item" @click="exec('EXPAND_ALL')">展开所有</div>
      <div class="item" @click="exec('UNEXPAND_ALL')">收起所有</div>
+      <div class="item">
+        展开到
+        <div class="subItems listBox">
+          <div class="item" v-for="(item, index) in expandList" :key="item" @click="exec('UNEXPAND_TO_LEVEL', false, index + 1)">{{item}}</div>
+        </div>
+      </div>
+      <div class="item" @click="exec('RESET_LAYOUT')">
+        一键整理布局
+        <span class="desc">Ctrl + L</span>
+      </div>
    </template>
  </div>
 </template>
@@ -69,7 +99,8 @@ export default {
      type: "",
      isMousedown: false,
      mosuedownX: 0,
-      mosuedownY: 0
+      mosuedownY: 0,
+      expandList: ['一级主题', '二级主题', '三级主题', '四级主题', '五级主题', '六级主题']
    };
  },
  computed: {
@@ -106,6 +137,10 @@ export default {
    this.$bus.$on("expand_btn_click", this.hide);
    this.$bus.$on("svg_mousedown", this.onMousedown);
    this.$bus.$on("mouseup", this.onMouseup);
+    // 注册快捷键
+    this.mindMap.keyCommand.addShortcut('Control+c', this.copy);
+    this.mindMap.keyCommand.addShortcut('Control+v', this.paste);
+    this.mindMap.keyCommand.addShortcut('Control+x', this.cut);
  },
  beforeDestroy() {
    this.$bus.$off("node_contextmenu", this.show);
@@ -114,6 +149,10 @@ export default {
    this.$bus.$off("expand_btn_click", this.hide);
    this.$bus.$on("svg_mousedown", this.onMousedown);
    this.$bus.$on("mouseup", this.onMouseup);
+    // 移除快捷键
+    this.mindMap.keyCommand.removeShortcut('Control+c', this.copy);
+    this.mindMap.keyCommand.removeShortcut('Control+v', this.paste);
+    this.mindMap.keyCommand.removeShortcut('Control+x', this.cut);
  },
  methods: {
    /**
@@ -189,7 +228,7 @@ export default {
     * @Date: 2021-07-14 23:27:54
     * @Desc: 执行命令
     */
-    exec(key, disabled) {
+    exec(key, disabled, ...args) {
      if (disabled) {
        return;
      }
@@ -209,34 +248,66 @@ export default {
          this.mindMap.view.reset();
          break;
        default:
-          this.$bus.$emit("execCommand", key);
+          this.$bus.$emit("execCommand", key, ...args);
          break;
      }
      this.hide();
    },
+
+    /** 
+     * @Author: 王林25 
+     * @Date: 2022-08-04 14:25:45 
+     * @Desc: 复制 
+     */
+    copy() {
+      this.exec("COPY_NODE");
+    },
+
+    /** 
+     * @Author: 王林25 
+     * @Date: 2022-08-04 14:26:43 
+     * @Desc: 粘贴 
+     */
+    paste() {
+      this.exec("PASTE_NODE");
+    },
+
+    /** 
+     * @Author: 王林25 
+     * @Date: 2022-08-04 14:27:32 
+     * @Desc: 剪切 
+     */
+    cut() {
+      this.exec("CUT_NODE");
+    }
  },
 };
 </script>

 <style lang="less" scoped>
-.contextmenuContainer {
-  position: fixed;
-  width: 161px;
+.listBox {
+  width: 200px;
  background: #fff;
  box-shadow: 0 4px 12px 0 hsla(0, 0%, 69%, 0.5);
  border-radius: 4px;
  padding-top: 16px;
  padding-bottom: 16px;
+}
+.contextmenuContainer {
+  position: fixed;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1a1a1a;

  .item {
+    position: relative;
    height: 28px;
    line-height: 28px;
-    padding-left: 16px;
+    padding: 0 16px;
    cursor: pointer;
+    display: flex;
+    justify-content: space-between;

    &.danger {
      color: #f56c6c;
@@ -244,16 +315,32 @@ export default {

    &:hover {
      background: #f5f5f5;
+
+      .subItems {
+        visibility: visible;
+      }
    }

    &.disabled {
      color: grey;
      cursor: not-allowed;
+      pointer-events: none;

      &:hover {
        background: #fff;
      }
    }
+
+    .desc {
+      color: #999;
+    }
+
+    .subItems {
+      position: absolute;
+      left: 100%;
+      top: 0;
+      visibility: hidden;
+    }
  }
 }
 </style>
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -2,6 +2,7 @@
  <div class="editContainer">
    <div class="mindMapContainer" ref="mindMapContainer"></div>
    <Count></Count>
+    <Navigator :mindMap="mindMap"></Navigator>
    <NavigatorToolbar :mindMap="mindMap"></NavigatorToolbar>
    <Outline></Outline>
    <Style></Style>
@@ -9,7 +10,7 @@
    <Theme :mindMap="mindMap"></Theme>
    <Structure :mindMap="mindMap"></Structure>
    <ShortcutKey></ShortcutKey>
-    <Contextmenu :mindMap="mindMap"></Contextmenu>
+    <Contextmenu v-if="mindMap" :mindMap="mindMap"></Contextmenu>
    <NodeNoteContentShow></NodeNoteContentShow>
  </div>
 </template>
@@ -27,6 +28,7 @@ import ShortcutKey from './ShortcutKey'
 import Contextmenu from './Contextmenu'
 import NodeNoteContentShow from './NodeNoteContentShow.vue'
 import { getData, storeData, storeConfig } from '@/api'
+import Navigator from './Navigator.vue';

 /**
 * @Author: 王林
@@ -45,7 +47,8 @@ export default {
    NavigatorToolbar,
    ShortcutKey,
    Contextmenu,
-    NodeNoteContentShow
+    NodeNoteContentShow,
+    Navigator
  },
  data() {
    return {
@@ -154,12 +157,8 @@ export default {
      if (this.openTest) {
        return
      }
-      let data = this.mindMap.command.getCopyData()
-      storeData(data)
-      let viewData = this.mindMap.view.getTransformData()
-      storeConfig({
-        view: viewData,
-      })
+      let data = this.mindMap.getData(true)
+      storeConfig(data)
    },

    /**
@@ -200,6 +199,7 @@ export default {
        'expand_btn_click',
        'svg_mousedown',
        'mouseup',
+        'mode_change'
      ].forEach((event) => {
        this.mindMap.on(event, (...args) => {
          this.$bus.$emit(event, ...args)
@@ -214,7 +214,11 @@ export default {
     * @Desc: 动态设置思维导图数据
     */
    setData(data) {
-      this.mindMap.setData(data)
+      if (data.root) {
+        this.mindMap.setFullData(data)
+      } else {
+        this.mindMap.setData(data)
+      }
      this.manualSave()
    },

--- a/web/src/pages/Edit/components/Export.vue
+++ b/web/src/pages/Edit/components/Export.vue
@@ -3,20 +3,22 @@
    class="nodeDialog"
    title="导出"
    :visible.sync="dialogVisible"
-    width="500"
+    width="700px"
  >
    <div>
      <div class="nameInputBox">
        <span class="name">导出文件名称</span>
        <el-input style="width: 300px" v-model="fileName" size="mini"></el-input>
+        <el-checkbox v-show="['smm', 'json'].includes(exportType)" v-model="widthConfig" style="margin-left: 12px">是否包含主题、结构等配置数据</el-checkbox>
      </div>
-      <el-radio-group v-model="exportType">
-        <el-radio label="smm">专有文件（.smm）</el-radio>
-        <el-radio label="json">json文件（.json）</el-radio>
-        <el-radio label="png">图片文件（.png）</el-radio>
-        <el-radio label="svg">svg文件（.svg）</el-radio>
+      <el-radio-group v-model="exportType" size="mini">
+        <el-radio-button label="smm">专有文件（.smm）</el-radio-button>
+        <el-radio-button label="json">json文件（.json）</el-radio-button>
+        <el-radio-button label="png">图片文件（.png）</el-radio-button>
+        <el-radio-button label="svg">svg文件（.svg）</el-radio-button>
+        <el-radio-button label="pdf">pdf文件（.pdf）</el-radio-button>
      </el-radio-group>
-      <div class="tip">tips：.smm文件可用于导入</div>
+      <div class="tip">tips：.smm和.json文件可用于导入</div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
@@ -37,7 +39,8 @@ export default {
    return {
      dialogVisible: false,
      exportType: "smm",
-      fileName: '思维导图'
+      fileName: '思维导图',
+      widthConfig: true
    };
  },
  created() {
@@ -61,7 +64,7 @@ export default {
     * @Desc:  确定
     */
    confirm() {
-      this.$bus.$emit("export", this.exportType, true, this.fileName);
+      this.$bus.$emit("export", this.exportType, true, this.fileName, this.widthConfig);
      this.$notify.info({
          title: '消息',
          message: '如果没有触发下载，请检查是否被浏览器拦截了'
--- a/web/src/pages/Edit/components/Import.vue
+++ b/web/src/pages/Edit/components/Import.vue
@@ -1,8 +1,8 @@
 <template>
-<el-dialog class="nodeDialog" title="导入" :visible.sync="dialogVisible" width="500">
+<el-dialog class="nodeDialog" title="导入" :visible.sync="dialogVisible" width="300px">
    <el-upload ref="upload" action="x" :file-list="fileList" :auto-upload="false" :multiple="false" :on-change="onChange" :limit="1" :on-exceed="onExceed">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
-        <div slot="tip" class="el-upload__tip">只能上传.smm文件</div>
+        <div slot="tip" class="el-upload__tip">支持.smm、.json、.xmind文件</div>
    </el-upload>
    <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
@@ -12,6 +12,8 @@
 </template>

 <script>
+import MindMap from 'simple-mind-map'
+
 /**
 * @Author: 王林
 * @Date: 2021-06-24 22:53:54
@@ -44,9 +46,9 @@ export default {
         * @Desc: 文件选择
         */
        onChange(file) {
-            let reg = /\.smm$/;
+            let reg = /\.(smm|xmind|json)$/;
            if (!reg.test(file.name)) {
-                this.$message.error("请选择.smm文件");
+                this.$message.error("请选择.smm、.json、.xmind文件");
                this.fileList = [];
            } else {
                this.fileList.push(file)
@@ -80,7 +82,17 @@ export default {
            if (this.fileList.length <= 0) {
                return this.$message.error("请选择要导入的文件");
            }
+            this.$store.commit('setIsHandleLocalFile', false);
            let file = this.fileList[0];
+            if (/\.(smm|json)$/.test(file.name)) {
+                this.handleSmm(file)
+            } else if (/\.xmind$/.test(file.name)) {
+                this.handleXmind(file)
+            }
+            this.cancel();
+        },
+
+        handleSmm(file) {
            let fileReader = new FileReader()
            fileReader.readAsText(file.raw)
            fileReader.onload = (evt) => {
@@ -96,8 +108,18 @@ export default {
                    this.$message.error("文件解析失败");
                }
            }
-            this.cancel();
        },
+
+        async handleXmind(file) {
+            try {
+                let data = await MindMap.xmind.parseXmindFile(file.raw)
+                this.$bus.$emit('setData', data)
+                this.$message.success("导入成功");
+            } catch (error) {
+                console.log(error)
+                this.$message.error("文件解析失败");
+            }
+        }
    },
 };
 </script>
--- a/web/src/pages/Edit/components/Navigator.vue
+++ b/web/src/pages/Edit/components/Navigator.vue
@@ -0,0 +1,143 @@
+<template>
+  <div
+    v-if="showMiniMap"
+    class="navigatorBox"
+    ref="navigatorBox"
+    @mousedown="onMousedown"
+    @mousemove="onMousemove"
+    @mouseup="onMouseup"
+  >
+    <div
+      class="svgBox"
+      ref="svgBox"
+      :style="{
+        transform: `scale(${svgBoxScale})`,
+        left: svgBoxLeft + 'px',
+        top: svgBoxTop + 'px',
+      }"
+    ></div>
+    <div class="windowBox" :style="viewBoxStyle"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    mindMap: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      showMiniMap: false,
+      timer: null,
+      boxWidth: 0,
+      boxHeight: 0,
+      svgBoxScale: 1,
+      svgBoxLeft: 0,
+      svgBoxTop: 0,
+      viewBoxStyle: {
+        left: 0,
+        top: 0,
+        bottom: 0,
+        right: 0,
+      },
+    };
+  },
+  mounted() {
+    this.$bus.$on("toggle_mini_map", (show) => {
+      this.showMiniMap = show;
+      this.$nextTick(() => {
+        if (show) {
+          this.init();
+          this.drawMiniMap();
+        }
+      });
+    });
+    this.$bus.$on("data_change", () => {
+      if (!this.showMiniMap) {
+        return;
+      }
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.drawMiniMap();
+      }, 500);
+    });
+    this.$bus.$on("view_data_change", () => {
+      if (!this.showMiniMap) {
+        return;
+      }
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.drawMiniMap();
+      }, 500);
+    });
+  },
+  methods: {
+    init() {
+      let { width, height } = this.$refs.navigatorBox.getBoundingClientRect();
+      this.boxWidth = width;
+      this.boxHeight = height;
+    },
+
+    drawMiniMap() {
+      let {
+        svgHTML,
+        viewBoxStyle,
+        miniMapBoxScale,
+        miniMapBoxLeft,
+        miniMapBoxTop,
+      } = this.mindMap.miniMap.calculationMiniMap(
+        this.boxWidth,
+        this.boxHeight
+      );
+      // 渲染到小地图
+      this.$refs.svgBox.innerHTML = svgHTML;
+      this.viewBoxStyle = viewBoxStyle;
+      this.svgBoxScale = miniMapBoxScale;
+      this.svgBoxLeft = miniMapBoxLeft;
+      this.svgBoxTop = miniMapBoxTop;
+    },
+
+    onMousedown(e) {
+      this.mindMap.miniMap.onMousedown(e);
+    },
+
+    onMousemove(e) {
+      this.mindMap.miniMap.onMousemove(e);
+    },
+
+    onMouseup(e) {
+      this.mindMap.miniMap.onMouseup(e);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.navigatorBox {
+  position: absolute;
+  width: 350px;
+  height: 220px;
+  background-color: #fff;
+  bottom: 80px;
+  right: 20px;
+  box-shadow: 0 0 16px #989898;
+  border-radius: 4px;
+  border: 1px solid #eee;
+  cursor: pointer;
+  user-select: none;
+
+  .svgBox {
+    position: absolute;
+    left: 0;
+    transform-origin: left top;
+  }
+
+  .windowBox {
+    position: absolute;
+    border: 2px solid rgb(238, 69, 69);
+    transition: all 0.3s;
+  }
+}
+</style>
--- a/web/src/pages/Edit/components/NavigatorToolbar.vue
+++ b/web/src/pages/Edit/components/NavigatorToolbar.vue
@@ -1,5 +1,17 @@
 <template>
  <div class="navigatorContainer">
+    <div class="item">
+      <el-checkbox v-model="openMiniMap" @change="toggleMiniMap">开启小地图</el-checkbox>
+    </div>
+    <div class="item">
+      <el-switch
+        v-model="isReadonly"
+        active-text="只读模式"
+        inactive-text="编辑模式"
+        @change="readonlyChange"
+      >
+      </el-switch>
+    </div>
    <div class="item">
      <Scale :mindMap="mindMap"></Scale>
    </div>
@@ -28,6 +40,24 @@ export default {
    mindMap: {
      type: Object,
    },
+  },
+  data () {
+    return {
+      isReadonly: false,
+      openMiniMap: false
+    }
+  },
+  mounted () {
+    this.toggleMiniMap(this.openMiniMap)
+  },
+  methods: {
+    readonlyChange(value) {
+      this.mindMap.setMode(value ? 'readonly' : 'edit')
+    },
+
+    toggleMiniMap(show) {
+      this.$bus.$emit('toggle_mini_map', show)
+    }
  }
 };
 </script>
--- a/web/src/pages/Edit/components/NodeHyperlink.vue
+++ b/web/src/pages/Edit/components/NodeHyperlink.vue
@@ -53,6 +53,7 @@ export default {
      }
    });
    this.$bus.$on("showNodeLink", () => {
+      this.activeNodes[0].mindMap.keyCommand.pause();
      this.$bus.$emit('startTextEdit');
      this.dialogVisible = true;
    });
@@ -65,6 +66,7 @@ export default {
     */
    cancel() {
      this.dialogVisible = false;
+      this.activeNodes[0].mindMap.keyCommand.recovery();
      this.$bus.$emit('endTextEdit');
    },

--- a/web/src/pages/Edit/components/NodeIcon.vue
+++ b/web/src/pages/Edit/components/NodeIcon.vue
@@ -13,6 +13,9 @@
          v-for="icon in item.list"
          :key="icon.name"
          v-html="icon.icon"
+          :class="{
+            selected: iconList.includes(item.type + '_' + icon.name)
+          }"
          @click="setIcon(item.type, icon.name)"
        ></div>
      </div>
@@ -34,7 +37,7 @@ export default {
    return {
      nodeIconList,
      dialogVisible: false,
-      icon: [],
+      iconList: [],
      activeNodes: [],
    };
  },
@@ -43,9 +46,9 @@ export default {
      this.activeNodes = args[1];
      if (this.activeNodes.length > 0) {
        let firstNode = this.activeNodes[0];
-        this.icon = firstNode.getData("icon") || [];
+        this.iconList = firstNode.getData("icon") || [];
      } else {
-        this.icon = [];
+        this.iconList = [];
      }
    });
    this.$bus.$on("showNodeIcon", () => {
@@ -59,16 +62,27 @@ export default {
     * @Desc: 设置icon
     */
    setIcon(type, name) {
-      let index = this.icon.findIndex((item) => {
-        return item.split("_")[0] === type;
+      let key = type + "_" + name;
+      let index = this.iconList.findIndex((item) => {
+        return item === key;
      });
+      // 删除icon
      if (index !== -1) {
-        this.icon.splice(index, 1, type + "_" + name);
+        this.iconList.splice(index, 1);
      } else {
-        this.icon.push(type + "_" + name);
+        let typeIndex = this.iconList.findIndex((item) => {
+          return item.split("_")[0] === type;
+        });
+        // 替换icon
+        if (typeIndex !== -1) {
+          this.iconList.splice(typeIndex, 1, key);
+        } else {
+          // 增加icon
+          this.iconList.push(key);
+        }
      }
      this.activeNodes.forEach((node) => {
-        node.setIcon([...this.icon]);
+        node.setIcon([...this.iconList]);
      });
    },
  },
@@ -81,6 +95,10 @@ export default {
    padding: 0 20px;
  }

+  .deleteBtn {
+    margin-bottom: 20px;
+  }
+
  .item {
    margin-bottom: 20px;
    font-weight: bold;
@@ -99,6 +117,20 @@ export default {
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;
+        position: relative;
+
+        &.selected {
+          &::after {
+            content: '';
+            position: absolute;
+            left: -4px;
+            top: -4px;
+            width: 28px;
+            height: 28px;
+            border-radius: 50%;
+            border: 2px solid #409EFF;
+          }
+        }
      }
    }
  }
--- a/web/src/pages/Edit/components/ShortcutKey.vue
+++ b/web/src/pages/Edit/components/ShortcutKey.vue
@@ -51,7 +51,7 @@ export default {

 <style lang="less" scoped>
 .box {
-  padding: 20px;
+  padding: 0 20px;

  .title {
    font-size: 16px;
--- a/web/src/pages/Edit/components/Style.vue
+++ b/web/src/pages/Edit/components/Style.vue
@@ -15,6 +15,7 @@
              size="mini"
              v-model="style.fontFamily"
              placeholder=""
+              :disabled="checkDisabled('fontFamily')"
              @change="update('fontFamily')"
            >
              <el-option
@@ -36,6 +37,7 @@
              style="width: 80px"
              v-model="style.fontSize"
              placeholder=""
+              :disabled="checkDisabled('fontSize')"
              @change="update('fontSize')"
            >
              <el-option
@@ -54,6 +56,7 @@
              style="width: 80px"
              v-model="style.lineHeight"
              placeholder=""
+              :disabled="checkDisabled('lineHeight')"
              @change="update('lineHeight')"
            >
              <el-option
@@ -69,7 +72,7 @@
        <div class="row">
          <div class="btnGroup">
            <el-tooltip content="颜色" placement="bottom">
-              <div class="styleBtn" v-popover:popover>
+              <div class="styleBtn" v-popover:popover :class="{ disabled: checkDisabled('color') }">
                A
                <span
                  class="colorShow"
@@ -80,7 +83,7 @@
            <el-tooltip content="加粗" placement="bottom">
              <div
                class="styleBtn"
-                :class="{ actived: style.fontWeight === 'bold' }"
+                :class="{ actived: style.fontWeight === 'bold', disabled: checkDisabled('fontWeight') }"
                @click="toggleFontWeight"
              >
                B
@@ -89,7 +92,7 @@
            <el-tooltip content="斜体" placement="bottom">
              <div
                class="styleBtn i"
-                :class="{ actived: style.fontStyle === 'italic' }"
+                :class="{ actived: style.fontStyle === 'italic', disabled: checkDisabled('fontStyle') }"
                @click="toggleFontStyle"
              >
                I
@@ -99,16 +102,17 @@
              <div
                class="styleBtn u"
                :style="{ textDecoration: style.textDecoration || 'none' }"
+                :class="{ disabled: checkDisabled('textDecoration') }"
                v-popover:popover2
              >
                U
              </div>
            </el-tooltip>
          </div>
-          <el-popover ref="popover" placement="bottom" trigger="click">
+          <el-popover ref="popover" placement="bottom" trigger="click" :disabled="checkDisabled('color')">
            <Color :color="style.color" @change="changeFontColor"></Color>
          </el-popover>
-          <el-popover ref="popover2" placement="bottom" trigger="click">
+          <el-popover ref="popover2" placement="bottom" trigger="click" :disabled="checkDisabled('textDecoration')">
            <el-radio-group
              size="mini"
              v-model="style.textDecoration"
@@ -129,8 +133,9 @@
              class="block"
              v-popover:popover3
              :style="{ width: '80px', backgroundColor: style.borderColor }"
+              :class="{ disabled: checkDisabled('borderColor') }"
            ></span>
-            <el-popover ref="popover3" placement="bottom" trigger="click">
+            <el-popover ref="popover3" placement="bottom" trigger="click" :disabled="checkDisabled('borderColor')">
              <Color
                :color="style.borderColor"
                @change="changeBorderColor"
@@ -138,12 +143,13 @@
            </el-popover>
          </div>
          <div class="rowItem">
-            <span class="name" v-popover:popover5>样式</span>
+            <span class="name">样式</span>
            <el-select
              size="mini"
              style="width: 80px"
              v-model="style.borderDasharray"
              placeholder=""
+              :disabled="checkDisabled('borderDasharray')"
              @change="update('borderDasharray')"
            >
              <el-option
@@ -164,6 +170,7 @@
              style="width: 80px"
              v-model="style.borderWidth"
              placeholder=""
+              :disabled="checkDisabled('borderWidth')"
              @change="update('borderWidth')"
            >
              <el-option
@@ -182,6 +189,7 @@
              style="width: 80px"
              v-model="style.borderRadius"
              placeholder=""
+              :disabled="checkDisabled('borderRadius')"
              @change="update('borderRadius')"
            >
              <el-option
@@ -203,12 +211,95 @@
              class="block"
              v-popover:popover4
              :style="{ backgroundColor: style.fillColor }"
+              :class="{ disabled: checkDisabled('fillColor') }"
            ></span>
-            <el-popover ref="popover4" placement="bottom" trigger="click">
+            <el-popover ref="popover4" placement="bottom" trigger="click" :disabled="checkDisabled('fillColor')">
              <Color :color="style.fillColor" @change="changeFillColor"></Color>
            </el-popover>
          </div>
        </div>
+        <!-- 形状 -->
+        <div class="title">形状</div>
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">形状</span>
+            <el-select
+              size="mini"
+              style="width: 120px"
+              v-model="style.shape"
+              placeholder=""
+              :disabled="checkDisabled('shape')"
+              @change="update('shape')"
+            >
+              <el-option
+                v-for="item in shapeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <!-- 线条 -->
+        <div class="title">线条</div>
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">颜色</span>
+            <span
+              class="block"
+              v-popover:popover5
+              :style="{ width: '80px', backgroundColor: style.lineColor }"
+              :class="{ disabled: checkDisabled('lineColor') }"
+            ></span>
+            <el-popover ref="popover5" placement="bottom" trigger="click" :disabled="checkDisabled('lineColor')">
+              <Color
+                :color="style.lineColor"
+                @change="changeLineColor"
+              ></Color>
+            </el-popover>
+          </div>
+          <div class="rowItem">
+            <span class="name">样式</span>
+            <el-select
+              size="mini"
+              style="width: 80px"
+              v-model="style.lineDasharray"
+              placeholder=""
+              :disabled="checkDisabled('lineDasharray')"
+              @change="update('lineDasharray')"
+            >
+              <el-option
+                v-for="item in borderDasharrayList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">宽度</span>
+            <el-select
+              size="mini"
+              style="width: 80px"
+              v-model="style.lineWidth"
+              placeholder=""
+              :disabled="checkDisabled('lineWidth')"
+              @change="update('lineWidth')"
+            >
+              <el-option
+                v-for="item in borderWidthList"
+                :key="item"
+                :label="item"
+                :value="item"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
        <!-- 节点内边距 -->
        <div class="title noTop">节点内边距</div>
        <div class="row">
@@ -217,6 +308,7 @@
            <el-slider
              style="width: 200px"
              v-model="style.paddingX"
+              :disabled="checkDisabled('paddingX')"
              @change="update('paddingX')"
            ></el-slider>
          </div>
@@ -227,6 +319,7 @@
            <el-slider
              style="width: 200px"
              v-model="style.paddingY"
+              :disabled="checkDisabled('paddingY')"
              @change="update('paddingY')"
            ></el-slider>
          </div>
@@ -246,7 +339,9 @@ import {
  borderDasharrayList,
  borderRadiusList,
  lineHeightList,
+  shapeList,
 } from "@/config";
+import { supportActiveStyle } from 'simple-mind-map/src/themes/default';

 /**
 * @Author: 王林
@@ -261,6 +356,8 @@ export default {
  },
  data() {
    return {
+      supportActiveStyle,
+      shapeList,
      fontFamilyList,
      fontSizeList,
      borderWidthList,
@@ -270,6 +367,7 @@ export default {
      activeNodes: [],
      activeTab: "normal",
      style: {
+        shape: '',
        paddingX: 0,
        paddingY: 0,
        color: "",
@@ -284,16 +382,19 @@ export default {
        fillColor: "",
        borderDasharray: "",
        borderRadius: "",
+        lineColor: "",
+        lineDasharray: "",
+        lineWidth: "",
      },
    };
  },
  created() {
    this.$bus.$on("node_active", (...args) => {
-      this.$refs.sidebar.show = false;
+      if (this.$refs.sidebar) this.$refs.sidebar.show = false;
      this.$nextTick(() => {
        this.activeTab = "normal";
        this.activeNodes = args[1];
-        this.$refs.sidebar.show = this.activeNodes.length > 0;
+        if (this.$refs.sidebar) this.$refs.sidebar.show = this.activeNodes.length > 0;
        this.initNodeStyle();
      });
    });
@@ -308,6 +409,15 @@ export default {
      this.initNodeStyle();
    },

+    /** 
+     * @Author: 王林 
+     * @Date: 2022-09-12 22:16:56 
+     * @Desc: 检查是否禁用 
+     */
+    checkDisabled(prop) {
+      return this.activeTab === 'active' && !this.supportActiveStyle.includes(prop)
+    },
+
    /**
     * @Author: 王林
     * @Date: 2021-05-05 09:48:52
@@ -319,6 +429,7 @@ export default {
        return;
      }
      [
+        "shape",
        "paddingX",
        "paddingY",
        "color",
@@ -333,6 +444,9 @@ export default {
        "fillColor",
        "borderDasharray",
        "borderRadius",
+        "lineColor",
+        "lineDasharray",
+        "lineWidth",
      ].forEach((item) => {
        this.style[item] = this.activeNodes[0].getStyle(
          item,
@@ -401,6 +515,16 @@ export default {
      this.update("borderColor");
    },

+    /** 
+     * @Author: flydreame 
+     * @Date: 2022-09-17 10:18:15 
+     * @Desc: 修改线条颜色 
+     */
+    changeLineColor(color) {
+      this.style.lineColor = color;
+      this.update("lineColor");
+    },
+
    /**
     * @Author: 王林
     * @Date: 2021-05-05 10:18:59
@@ -472,6 +596,13 @@ export default {
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        cursor: pointer;
+
+        &.disabled {
+          background-color: #F5F7FA !important;
+          border-color: #E4E7ED !important;
+          color: #C0C4CC !important;
+          cursor: not-allowed !important;
+        }
      }
    }

@@ -492,6 +623,13 @@ export default {
        background-color: #eee;
      }

+      &.disabled {
+        background-color: #F5F7FA !important;
+        border-color: #E4E7ED !important;
+        color: #C0C4CC !important;
+        cursor: not-allowed !important;
+      }
+
      &.i {
        font-style: italic;
      }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
wanglin25	35d6297b72	Merge branch 'dev6' into main	2022-10-11 18:54:24 +08:00
wanglin25	5afe0a8c41	打包	2022-10-11 18:53:30 +08:00
wanglin25	81f86ccb30	优化：插入子节点时自动展开	2022-10-11 18:48:52 +08:00
wanglin25	87383498c8	修复小地图关闭时报错的问题	2022-10-11 18:36:16 +08:00
wanglin25	c68608c72c	合并	2022-10-11 11:10:00 +08:00
wanglin25	9d325d99a2	更新版本	2022-10-11 11:08:58 +08:00
wanglin2	bc59fa6dc7	修改文档	2022-10-10 22:40:44 +08:00
wanglin2	2daa59679a	修改文档	2022-10-10 22:40:12 +08:00
wanglin25	da456eeb8f	打包	2022-10-10 16:27:49 +08:00
wanglin25	5cd36b57d5	修复子节点收起状态复制时丢失的问题	2022-10-10 16:11:00 +08:00
wanglin25	e2b239fcbb	更新文档	2022-10-10 15:02:22 +08:00
wanglin25	5449e79d49	打包	2022-10-10 14:39:09 +08:00
wanglin25	c2045ddedc	支持小地图	2022-10-10 14:31:43 +08:00
wanglin2	5dfa215538	修改文档	2022-09-30 22:16:27 +08:00
wanglin25	d90013da71	打包	2022-09-30 14:48:08 +08:00
wanglin25	b3b74323f7	逻辑结构图、思维导图新增直线连接风格、直连风格	2022-09-30 14:44:40 +08:00
wanglin2	f9000ea478	逻辑结构图和思维导图支持直线连接线开发中	2022-09-25 22:07:21 +08:00
wanglin2	830e7e2482	打包	2022-09-24 20:42:53 +08:00
wanglin2	13ed7f28df	优化：手动创建节点时立即聚焦	2022-09-24 20:38:47 +08:00
wanglin2	17e79a0b23	修复连线样式深度更新问题	2022-09-24 20:13:53 +08:00
wanglin2	eee310ba49	支持新建、打开、	2022-09-24 17:08:11 +08:00
wanglin2	36c8927dd0	修改文档	2022-09-24 10:51:09 +08:00
wanglin2	05333daa63	支持展开到指定层级	2022-09-24 10:49:40 +08:00
wanglin25	5aed681198	支持展开到指定层级	2022-09-23 17:41:38 +08:00
wanglin25	8a438f2906	修复xmind8版本文件导入失败的问题	2022-09-23 16:16:08 +08:00
wanglin2	260de4987d	修改README	2022-09-21 21:02:17 +08:00
wanglin25	31cc658c06	打包	2022-09-21 20:11:12 +08:00
wanglin25	be6b41d74d	支持导入.xmind文件	2022-09-21 20:07:46 +08:00
wanglin25	4beeead53d	修复根节点添加多个节点爆栈的问题	2022-09-21 09:38:41 +08:00
wanglin25	af2df6acd3	导出svg增加title标签	2022-09-19 09:36:19 +08:00
wanglin2	c08d66acf2	打包	2022-09-17 22:00:15 +08:00
wanglin2	5a9cb9ac07	节点支持设置自定义线条样式	2022-09-17 16:18:38 +08:00
wanglin2	1662cd1be7	优化节点自定义线条样式	2022-09-17 15:09:34 +08:00
wanglin2	9dd5b3d47e	节点支持自定义线条样式	2022-09-17 15:00:12 +08:00
wanglin2	ece116317b	修改文档	2022-09-13 22:30:45 +08:00
wanglin25	d24d5c8281	修复节点展开收起的bug&打包	2022-09-13 10:34:20 +08:00
wanglin25	97c01cda3a	打包	2022-09-13 09:43:18 +08:00
wanglin25	6d520ece7e	修改文档	2022-09-13 09:33:05 +08:00
wanglin2	745041deef	节点支持多种形状开发完成	2022-09-12 23:07:01 +08:00
wanglin25	ae6c10cdf9	打包	2022-09-01 11:11:33 +08:00
街角小林	f5338d62fc	Merge pull request #26 from huangyuanyin/main fix 二级节点后无子节点，展开所有/收起所有操作后的报错信息	2022-09-01 11:07:38 +08:00
liuzhanghao	19fc12ff20	fix	2022-09-01 10:28:26 +08:00
liuzhanghao	d7640bb026	fix 二级节点后无子节点，展开所有/收起所有操作后的报错信息	2022-09-01 10:22:01 +08:00
wanglin	193b293cfe	更新readme	2022-08-22 21:03:08 +08:00
wanglin25	615ff3ea25	fix:修改右键菜单快捷键提示	2022-08-17 09:25:16 +08:00
wanglin25	8b9cfd2972	fix:修复右键菜单快捷键提示错误	2022-08-16 18:48:11 +08:00
wanglin25	03f8cb9290	fix:修复编辑节点文本时快捷键冲突的问题	2022-08-16 16:47:43 +08:00
wanglin	1ea0c7e316	修复输入字符串/和快捷键/冲突问题	2022-08-14 09:43:00 +08:00
wanglin	a39c8c30e6	打包	2022-08-08 21:24:02 +08:00
街角小林	26ce08c27d	Update README.md	2022-08-08 20:09:31 +08:00
wanglin25	4bfc98a96f	支持导出为pdf	2022-08-08 20:06:59 +08:00
wanglin	7560411922	打包&发布新版本	2022-08-06 09:21:18 +08:00
wanglin25	4288e44f3a	支持Ctrl+左键多选	2022-08-05 17:21:21 +08:00
wanglin25	b82c5247fa	Merge branch 'dev' of https://github.com/wanglin2/mind-map into dev	2022-08-05 09:30:19 +08:00
wanglin25	c7d2082944	新增库打包&修改文档	2022-08-05 09:29:59 +08:00
wanglin	29458ade9c	增加图标	2022-08-04 20:24:57 +08:00
wanglin25	49d366628e	修改文档	2022-08-04 15:06:07 +08:00
wanglin25	b093153262	新增快捷键	2022-08-04 14:48:52 +08:00
wanglin25	02f276bc2a	支持自由拖拽、修复一些bug	2022-08-04 11:39:17 +08:00
wanglin25	69cb961cc1	修复概要的一些bug	2022-08-02 08:59:05 +08:00
wanglin25	7096391f3b	修复拖拽节点时为隐藏概要内容的问题	2022-08-01 09:59:43 +08:00
wanglin25	280ffcf01d	修复初始渲染时激活节点没有触发页面效果的问题	2022-08-01 09:51:53 +08:00
wanglin25	db3c2b71f5	修复概要展开收起的定位错误问题	2022-08-01 09:36:25 +08:00
wanglin	f11f364d00	新增方法	2022-07-31 22:29:40 +08:00
wanglin	0e8c50d430	修复概要定位问题	2022-07-31 20:46:40 +08:00
wanglin	dd8d250857	修改及新增主题	2022-07-31 14:54:32 +08:00
wanglin	693ead6b49	概要开发中	2022-07-31 10:28:13 +08:00
wanglin	dc3c91270c	更新版本	2022-07-30 08:21:43 +08:00
街角小林	71ac739964	Merge pull request #16 from harris2012/patch-2 fix typo	2022-07-29 21:59:53 +08:00
街角小林	eae5dc5854	Merge pull request #15 from harris2012/patch-1 Update Node.js	2022-07-29 21:57:05 +08:00
Harris Zhang	c45ceac7dc	fix typo	2022-07-29 17:55:20 +08:00
Harris Zhang	3d8702be8a	Update Node.js	2022-07-29 11:29:25 +08:00
街角小林	084dd9fd84	Merge pull request #13 from harris2012/patch-1 Update index.js	2022-07-26 21:15:41 +08:00
Harris Zhang	0c6c68820f	Update index.js	2022-07-26 19:12:47 +08:00
wanglin25	f5ff479f47	fix:1.节点图标不能删除的问题；2.工具按钮置灰仍然可以点击的问题	2022-06-28 19:55:31 +08:00
wanglin25	e9722efe93	增加只读模式	2022-06-08 14:30:45 +08:00
wanglin	db1f9c04c1	修改README	2022-05-10 23:09:54 +08:00