Demo:支持扩展节点形状列表

web/src/pages/Edit/components/Edit.vue

@@ -15,7 +15,7 @@
     <Navigator v-if="mindMap" :mindMap="mindMap"></Navigator>
     <NavigatorToolbar :mindMap="mindMap" v-if="!isZenMode"></NavigatorToolbar>
     <OutlineSidebar :mindMap="mindMap"></OutlineSidebar>
-    <Style v-if="!isZenMode"></Style>
+    <Style v-if="mindMap && !isZenMode" :mindMap="mindMap"></Style>
     <BaseStyle
       :data="mindMapData"
       :configData="mindMapConfig"
@@ -102,8 +102,9 @@ import Checkbox from 'simple-mind-map-plugin-checkbox'
 import LineFlow from 'simple-mind-map-plugin-lineflow'
 import Momentum from 'simple-mind-map-plugin-momentum'
 import RightFishbone from 'simple-mind-map-plugin-right-fishbone'
+import MoreShapes from 'simple-mind-map-plugin-more-shapes'
 import MoreThemes from 'simple-mind-map-plugin-more-themes'
-// npm link simple-mind-map-plugin-excel simple-mind-map-plugin-freemind simple-mind-map-plugin-numbers simple-mind-map-plugin-notation simple-mind-map-plugin-handdrawnlikestyle simple-mind-map-plugin-checkbox simple-mind-map simple-mind-map-plugin-themes simple-mind-map-plugin-lineflow simple-mind-map-plugin-momentum simple-mind-map-plugin-right-fishbone simple-mind-map-plugin-more-themes
+// npm link simple-mind-map-plugin-excel simple-mind-map-plugin-freemind simple-mind-map-plugin-numbers simple-mind-map-plugin-notation simple-mind-map-plugin-handdrawnlikestyle simple-mind-map-plugin-checkbox simple-mind-map simple-mind-map-plugin-themes simple-mind-map-plugin-lineflow simple-mind-map-plugin-momentum simple-mind-map-plugin-right-fishbone simple-mind-map-plugin-more-themes simple-mind-map-plugin-more-shapes
 import OutlineSidebar from './OutlineSidebar.vue'
 import Style from './Style.vue'
 import BaseStyle from './BaseStyle.vue'
@@ -702,6 +703,10 @@ export default {
         this.mindMap.addPlugin(LineFlow)
         this.$store.commit('setSupportLineFlow', true)
       }
+      if (typeof MoreShapes !== 'undefined') {
+        this.mindMap.addPlugin(MoreShapes)
+        this.$store.commit('setSupportMoreShapes', true)
+      }
       // 扩展侧边主题列表
       if (typeof MoreThemes !== 'undefined') {
         const extendThemeGroupList = [

web/src/pages/Edit/components/Style.vue

@@ -316,8 +316,13 @@
                 :key="item.value"
                 :label="item.name"
                 :value="item.value"
+                style="display: flex; justify-content: center; align-items: center;"
+              >
+                <svg
+                  :width="item.width || 60"
+                  :height="item.height || 26"
+                  style="margin-top: 5px"
                 >
-                <svg width="60" height="26" style="margin-top: 5px">
                   <path
                     :d="shapeListMap[item.value]"
                     fill="none"
@@ -572,6 +577,11 @@ export default {
     Sidebar,
     Color
   },
+  props: {
+    mindMap: {
+      type: Object
+    }
+  },
   data() {
     return {
       fontSizeList,
@@ -623,10 +633,27 @@ export default {
       return borderDasharrayList[this.$i18n.locale] || borderDasharrayList.zh
     },
     shapeList() {
-      return shapeList[this.$i18n.locale] || shapeList.zh
+      return [
+        ...(shapeList[this.$i18n.locale] || shapeList.zh),
+        ...this.mindMap.extendShapeList.map(item => {
+          return {
+            width: '40px',
+            name: item.nameShow,
+            value: item.name
+          }
+        })
+      ]
     },
     shapeListMap() {
-      return shapeListMap[this.$i18n.locale] || shapeListMap.zh
+      const map = shapeListMap[this.$i18n.locale] || shapeListMap.zh
+      const map2 = {}
+      this.mindMap.extendShapeList.forEach(item => {
+        map2[item.name] = item.path
+      })
+      return {
+        ...map,
+        ...map2
+      }
     },
     linearGradientDirList() {
       return (

web/src/store.js

@@ -38,6 +38,7 @@ const store = new Vuex.Store({
     supportCheckbox: false, // 是否支持Checkbox插件
     supportLineFlow: false, // 是否支持LineFlow插件
     supportMomentum: false, // 是否支持Momentum插件
+    supportMoreShapes: false,// 是否支持MoreShapes插件
     isDragOutlineTreeNode: false, // 当前是否正在拖拽大纲树的节点
     aiConfig: {
       api: 'http://ark.cn-beijing.volces.com/api/v3/chat/completions',
@@ -138,6 +139,11 @@ const store = new Vuex.Store({
       state.supportMomentum = data
     },
 
+    // 设置是否支持MoreShapes插件
+    setSupportMoreShapes(state, data) {
+      state.supportMoreShapes = data
+    },
+
     // 设置树节点拖拽
     setIsDragOutlineTreeNode(state, data) {
       state.isDragOutlineTreeNode = data