Demo：支持数学公式

web/src/assets/icon-font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1691822758372') format('woff2'),
-       url('iconfont.woff?t=1691822758372') format('woff'),
-       url('iconfont.ttf?t=1691822758372') format('truetype');
+  src: url('iconfont.woff2?t=1695365666344') format('woff2'),
+       url('iconfont.woff?t=1695365666344') format('woff'),
+       url('iconfont.ttf?t=1695365666344') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icongongshi:before {
+  content: "\e617";
+}
+
 .icontouming:before {
   content: "\e60c";
 }

web/src/config/constant.js

@@ -1,60 +1,83 @@
 //  布局结构图片映射
 export const layoutImgMap = {
-    logicalStructure: require('../assets/img/structures/logicalStructure.png'),
-    mindMap: require('../assets/img/structures/mindMap.png'),
-    organizationStructure: require('../assets/img/structures/organizationStructure.png'),
-    catalogOrganization: require('../assets/img/structures/catalogOrganization.png'),
-    timeline: require('../assets/img/structures/timeline.png'),
-    timeline2: require('../assets/img/structures/timeline2.png'),
-    fishbone: require('../assets/img/structures/fishbone.png'),
-    verticalTimeline: require('../assets/img/structures/verticalTimeline.png'),
+  logicalStructure: require('../assets/img/structures/logicalStructure.png'),
+  mindMap: require('../assets/img/structures/mindMap.png'),
+  organizationStructure: require('../assets/img/structures/organizationStructure.png'),
+  catalogOrganization: require('../assets/img/structures/catalogOrganization.png'),
+  timeline: require('../assets/img/structures/timeline.png'),
+  timeline2: require('../assets/img/structures/timeline2.png'),
+  fishbone: require('../assets/img/structures/fishbone.png'),
+  verticalTimeline: require('../assets/img/structures/verticalTimeline.png')
 }
 
 //  主题图片映射
 export const themeMap = {
-    default: require('../assets/img/themes/default.jpg'),
-    classic: require('../assets/img/themes/classic.jpg'),
-    minions: require('../assets/img/themes/minions.jpg'),
-    pinkGrape: require('../assets/img/themes/pinkGrape.jpg'),
-    mint: require('../assets/img/themes/mint.jpg'),
-    gold: require('../assets/img/themes/gold.jpg'),
-    vitalityOrange: require('../assets/img/themes/vitalityOrange.jpg'),
-    greenLeaf: require('../assets/img/themes/greenLeaf.jpg'),
-    dark2: require('../assets/img/themes/dark2.jpg'),
-    skyGreen: require('../assets/img/themes/skyGreen.jpg'),
-    classic2: require('../assets/img/themes/classic2.jpg'),
-    classic3: require('../assets/img/themes/classic3.jpg'),
-    classic4: require('../assets/img/themes/classic4.jpg'),
-    classicGreen: require('../assets/img/themes/classicGreen.jpg'),
-    classicBlue: require('../assets/img/themes/classicBlue.jpg'),
-    blueSky: require('../assets/img/themes/blueSky.jpg'),
-    brainImpairedPink: require('../assets/img/themes/brainImpairedPink.jpg'),
-    dark: require('../assets/img/themes/dark.jpg'),
-    earthYellow: require('../assets/img/themes/earthYellow.jpg'),
-    freshGreen: require('../assets/img/themes/freshGreen.jpg'),
-    freshRed: require('../assets/img/themes/freshRed.jpg'),
-    romanticPurple: require('../assets/img/themes/romanticPurple.jpg'),
-    simpleBlack: require('../assets/img/themes/simpleBlack.jpg'),
-    courseGreen: require('../assets/img/themes/courseGreen.jpg'),
-    coffee: require('../assets/img/themes/coffee.jpg'),
-    redSpirit: require('../assets/img/themes/redSpirit.jpg'),
-    blackHumour: require('../assets/img/themes/blackHumour.jpg'),
-    lateNightOffice: require('../assets/img/themes/lateNightOffice.jpg'),
-    blackGold: require('../assets/img/themes/blackGold.jpg'),
-    autumn: require('../assets/img/themes/autumn.jpg'),
-    avocado: require('../assets/img/themes/avocado.jpg'),
-    orangeJuice: require('../assets/img/themes/orangeJuice.jpg'),
-    oreo: require('../assets/img/themes/oreo.jpg'),
-    shallowSea: require('../assets/img/themes/shallowSea.jpg'),
-    lemonBubbles: require('../assets/img/themes/lemonBubbles.jpg'),
-    rose: require('../assets/img/themes/rose.jpg'),
-    seaBlueLine: require('../assets/img/themes/seaBlueLine.jpg'),
-    neonLamp: require('../assets/img/themes/neonLamp.jpg'),
-    darkNightLceBlade: require('../assets/img/themes/darkNightLceBlade.jpg'),
-    morandi: require('../assets/img/themes/morandi.jpg'),
-    classic5: require('../assets/img/themes/classic5.jpg'),
-    dark3: require('../assets/img/themes/dark3.jpg'),
-    dark4: require('../assets/img/themes/dark4.jpg'),
-    cactus: require('../assets/img/themes/cactus.jpg'),
+  default: require('../assets/img/themes/default.jpg'),
+  classic: require('../assets/img/themes/classic.jpg'),
+  minions: require('../assets/img/themes/minions.jpg'),
+  pinkGrape: require('../assets/img/themes/pinkGrape.jpg'),
+  mint: require('../assets/img/themes/mint.jpg'),
+  gold: require('../assets/img/themes/gold.jpg'),
+  vitalityOrange: require('../assets/img/themes/vitalityOrange.jpg'),
+  greenLeaf: require('../assets/img/themes/greenLeaf.jpg'),
+  dark2: require('../assets/img/themes/dark2.jpg'),
+  skyGreen: require('../assets/img/themes/skyGreen.jpg'),
+  classic2: require('../assets/img/themes/classic2.jpg'),
+  classic3: require('../assets/img/themes/classic3.jpg'),
+  classic4: require('../assets/img/themes/classic4.jpg'),
+  classicGreen: require('../assets/img/themes/classicGreen.jpg'),
+  classicBlue: require('../assets/img/themes/classicBlue.jpg'),
+  blueSky: require('../assets/img/themes/blueSky.jpg'),
+  brainImpairedPink: require('../assets/img/themes/brainImpairedPink.jpg'),
+  dark: require('../assets/img/themes/dark.jpg'),
+  earthYellow: require('../assets/img/themes/earthYellow.jpg'),
+  freshGreen: require('../assets/img/themes/freshGreen.jpg'),
+  freshRed: require('../assets/img/themes/freshRed.jpg'),
+  romanticPurple: require('../assets/img/themes/romanticPurple.jpg'),
+  simpleBlack: require('../assets/img/themes/simpleBlack.jpg'),
+  courseGreen: require('../assets/img/themes/courseGreen.jpg'),
+  coffee: require('../assets/img/themes/coffee.jpg'),
+  redSpirit: require('../assets/img/themes/redSpirit.jpg'),
+  blackHumour: require('../assets/img/themes/blackHumour.jpg'),
+  lateNightOffice: require('../assets/img/themes/lateNightOffice.jpg'),
+  blackGold: require('../assets/img/themes/blackGold.jpg'),
+  autumn: require('../assets/img/themes/autumn.jpg'),
+  avocado: require('../assets/img/themes/avocado.jpg'),
+  orangeJuice: require('../assets/img/themes/orangeJuice.jpg'),
+  oreo: require('../assets/img/themes/oreo.jpg'),
+  shallowSea: require('../assets/img/themes/shallowSea.jpg'),
+  lemonBubbles: require('../assets/img/themes/lemonBubbles.jpg'),
+  rose: require('../assets/img/themes/rose.jpg'),
+  seaBlueLine: require('../assets/img/themes/seaBlueLine.jpg'),
+  neonLamp: require('../assets/img/themes/neonLamp.jpg'),
+  darkNightLceBlade: require('../assets/img/themes/darkNightLceBlade.jpg'),
+  morandi: require('../assets/img/themes/morandi.jpg'),
+  classic5: require('../assets/img/themes/classic5.jpg'),
+  dark3: require('../assets/img/themes/dark3.jpg'),
+  dark4: require('../assets/img/themes/dark4.jpg'),
+  cactus: require('../assets/img/themes/cactus.jpg')
 }
-  
+
+// 公式列表
+export const formulaList = [
+  'a^2',
+  'a_2',
+  'a^{2+2}',
+  'a_{i,j}',
+  'x_2^3',
+  '\\overbrace{1+2+\\cdots+100}',
+  '\\sum_{k=1}^N k^2',
+  '\\lim_{n \\to \\infty}x_n',
+  '\\int_{-N}^{N} e^x\\, dx',
+  '\\sqrt{3}',
+  '\\sqrt[n]{3}',
+  '\\sin\\theta',
+  '\\log X',
+  '\\log_{10}',
+  '\\log_\\alpha X',
+  '\\lim_{t\\to n}T',
+  '\\frac{1}{2}=0.5',
+  '\\binom{n}{k}',
+  '\\begin{matrix}x & y \\\\z & v\\end{matrix}',
+  '\\begin{cases}3x + 5y +  z \\\\7x - 2y + 4z \\\\-6x + 3y + 2z\\end{cases}'
+]

web/src/lang/en_us.js

@@ -103,11 +103,13 @@ export default {
     markdownFile: 'markdown file',
     tips: 'tips: .smm and .json file can be import',
     isTransparent: 'Background is transparent',
-    pngTips: 'tips: Exporting pictures in rich text mode is time-consuming. It is recommended to export to svg format',
+    pngTips:
+      'tips: Exporting pictures in rich text mode is time-consuming. It is recommended to export to svg format',
     svgTips: 'tips: Exporting pictures in rich text mode is time-consuming',
     transformingDomToImages: 'Converting nodes: ',
     notifyTitle: 'Info',
-    notifyMessage: 'If the download is not triggered, check whether it is blocked by the browser',
+    notifyMessage:
+      'If the download is not triggered, check whether it is blocked by the browser',
     paddingX: 'Padding x',
     paddingY: 'Padding y',
     useMultiPageExport: 'Export multi page'
@@ -213,15 +215,19 @@ export default {
     export: 'Export',
     shortcutKey: 'Shortcut key',
     associativeLine: 'Associative line',
-    painter: 'Painter'
+    painter: 'Painter',
+    formula: 'Formula'
   },
   edit: {
     newFeatureNoticeTitle: 'New feature reminder',
-    newFeatureNoticeMessage: 'This update supports node rich text editing, But there are some defects, The most important impact is that the time to export the image is proportional to the number of nodes, Therefore, if you are more dependent on export requirements, you can use【Base style】-【Other config】-【Enable node rich text editing】Set to turn off rich text editing mode.'
+    newFeatureNoticeMessage:
+      'This update supports node rich text editing, But there are some defects, The most important impact is that the time to export the image is proportional to the number of nodes, Therefore, if you are more dependent on export requirements, you can use【Base style】-【Other config】-【Enable node rich text editing】Set to turn off rich text editing mode.'
   },
   mouseAction: {
-    tip1: 'Current: Left click to drag the canvas, right click to box select nodes',
-    tip2: 'Current: Left click to box select nodes, right click to drag the canvas',
+    tip1:
+      'Current: Left click to drag the canvas, right click to box select nodes',
+    tip2:
+      'Current: Left click to box select nodes, right click to drag the canvas'
   },
   search: {
     searchPlaceholder: 'Please enter the search content',
@@ -229,5 +235,16 @@ export default {
     replace: 'Replace',
     replaceAll: 'Replace all',
     cancel: 'Cancel'
+  },
+  nodeIconSidebar: {
+    title: 'Icon/Sticker',
+    icon: 'Icon',
+    sticker: 'Sticker'
+  },
+  formulaSidebar: {
+    title: 'Formula',
+    placeholder: 'Please enter LaText syntax',
+    confirm: 'Confirm',
+    common: 'Common formulas'
   }
 }

web/src/lang/zh_cn.js

@@ -213,15 +213,17 @@ export default {
     export: '导出',
     shortcutKey: '快捷键',
     associativeLine: '关联线',
-    painter: '格式刷'
+    painter: '格式刷',
+    formula: '公式'
   },
   edit: {
     newFeatureNoticeTitle: '新特性提醒',
-    newFeatureNoticeMessage: '本次更新支持了节点富文本编辑，但是存在一定缺陷，最主要的影响是导出为图片的时间和节点数量成正比，所以对导出需求比较依赖的话可以通过【基础样式】-【其他配置】-【是否开启节点富文本编辑】设置关掉富文本编辑模式。'
+    newFeatureNoticeMessage:
+      '本次更新支持了节点富文本编辑，但是存在一定缺陷，最主要的影响是导出为图片的时间和节点数量成正比，所以对导出需求比较依赖的话可以通过【基础样式】-【其他配置】-【是否开启节点富文本编辑】设置关掉富文本编辑模式。'
   },
   mouseAction: {
     tip1: '当前：左键拖动画布，右键框选节点',
-    tip2: '当前：左键框选节点，右键拖动画布',
+    tip2: '当前：左键框选节点，右键拖动画布'
   },
   search: {
     searchPlaceholder: '请输入查找内容',
@@ -229,5 +231,16 @@ export default {
     replace: '替换',
     replaceAll: '全部替换',
     cancel: '取消'
+  },
+  nodeIconSidebar: {
+    title: '图标/贴纸',
+    icon: '图标',
+    sticker: '贴纸'
+  },
+  formulaSidebar: {
+    title: '公式',
+    placeholder: '请输入 LaText 语法',
+    confirm: '完成',
+    common: '常用公式'
   }
 }

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

@@ -23,6 +23,7 @@
     <NodeIconToolbar v-if="mindMap" :mindMap="mindMap"></NodeIconToolbar>
     <OutlineEdit v-if="mindMap" :mindMap="mindMap"></OutlineEdit>
     <Scrollbar v-if="isShowScrollbar && mindMap" :mindMap="mindMap"></Scrollbar>
+    <FormulaSidebar v-if="mindMap" :mindMap="mindMap"></FormulaSidebar>
   </div>
 </template>
 
@@ -43,6 +44,7 @@ import NodeImgAdjust from 'simple-mind-map/src/plugins/NodeImgAdjust.js'
 import SearchPlugin from 'simple-mind-map/src/plugins/Search.js'
 import Painter from 'simple-mind-map/src/plugins/Painter.js'
 import ScrollbarPlugin from 'simple-mind-map/src/plugins/Scrollbar.js'
+import Formula from 'simple-mind-map/src/plugins/Formula.js'
 import OutlineSidebar from './OutlineSidebar'
 import Style from './Style'
 import BaseStyle from './BaseStyle'
@@ -75,6 +77,7 @@ import { showLoading, hideLoading } from '@/utils/loading'
 import handleClipboardText from '@/utils/handleClipboardText'
 import Scrollbar from './Scrollbar.vue'
 import exampleData from 'simple-mind-map/example/exampleData'
+import FormulaSidebar from './FormulaSidebar.vue'
 
 // 注册插件
 MindMap.usePlugin(MiniMap)
@@ -91,6 +94,7 @@ MindMap.usePlugin(MiniMap)
   .usePlugin(SearchPlugin)
   .usePlugin(Painter)
   .usePlugin(ScrollbarPlugin)
+  .usePlugin(Formula)
 
 // 注册自定义主题
 customThemeList.forEach(item => {
@@ -123,7 +127,8 @@ export default {
     NodeIconSidebar,
     NodeIconToolbar,
     OutlineEdit,
-    Scrollbar
+    Scrollbar,
+    FormulaSidebar
   },
   data() {
     return {
@@ -489,7 +494,6 @@ export default {
         //     }
         //   ]
         // )
-
         // 动态给指定节点添加同级节点
         // this.mindMap.execCommand(
         //   'INSERT_NODE',
@@ -514,7 +518,6 @@ export default {
         //     }
         //   ]
         // )
-
         // 动态插入多个子节点
         // this.mindMap.execCommand('INSERT_MULTI_CHILD_NODE', null, [
         //   {
@@ -544,7 +547,6 @@ export default {
         //     ]
         //   }
         // ])
-
         // 动态插入多个同级节点
         // this.mindMap.execCommand('INSERT_MULTI_NODE', null, [
         //   {
@@ -574,7 +576,6 @@ export default {
         //     ]
         //   }
         // ])
-
         // 动态删除指定节点
         // this.mindMap.execCommand('REMOVE_NODE', this.mindMap.renderer.root.children[0])
       }, 5000)

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

@@ -0,0 +1,201 @@
+<template>
+  <Sidebar ref="sidebar" :title="$t('formulaSidebar.title')">
+    <div class="box" :class="{ isDark: isDark }">
+      <div class="formulaInputBox">
+        <el-input
+          v-model="formulaText"
+          :rows="4"
+          resize="none"
+          type="textarea"
+          :placeholder="$t('formulaSidebar.placeholder')"
+          @keydown.native.stop
+        />
+        <el-button
+          size="small"
+          style="width: 100%; margin-top: 20px;"
+          @click="confirm"
+          >{{ $t('formulaSidebar.confirm') }}</el-button
+        >
+      </div>
+      <div class="title">{{ $t('formulaSidebar.common') }}</div>
+      <div class="formulaList">
+        <div class="formulaItem" v-for="(item, index) in list" :key="index">
+          <div class="overview" v-html="item.overview"></div>
+          <div class="text" @click="formulaText = item.text">
+            {{ item.text }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </Sidebar>
+</template>
+
+<script>
+import Sidebar from './Sidebar'
+import { mapState, mapMutations } from 'vuex'
+import { formulaList } from '@/config/constant'
+
+export default {
+  name: 'FormulaSidebar',
+  components: {
+    Sidebar
+  },
+  props: {
+    mindMap: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      formulaText: '',
+      list: []
+    }
+  },
+  computed: {
+    ...mapState(['activeSidebar', 'isDark', 'localConfig'])
+  },
+  watch: {
+    activeSidebar(val) {
+      if (val === 'formulaSidebar') {
+        this.$refs.sidebar.show = true
+      } else {
+        this.$refs.sidebar.show = false
+      }
+    }
+  },
+  created() {
+    this.$bus.$on('node_active', this.handleNodeActive)
+  },
+  beforeDestroy() {
+    this.$bus.$off('node_active', this.handleNodeActive)
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    ...mapMutations(['setActiveSidebar']),
+
+    init() {
+      this.list = formulaList.map(item => {
+        return {
+          overview: window.katex.renderToString(item, {
+            throwOnError: false,
+            output: 'mathml'
+          }),
+          text: item
+        }
+      })
+    },
+
+    handleNodeActive(...args) {
+      this.activeNodes = [...args[1]]
+      if (this.activeNodes.length <= 0) {
+        this.setActiveSidebar(null)
+      }
+    },
+
+    confirm() {
+      if (!this.localConfig.openNodeRichText) {
+        return this.$message.warning('非富文本模式下不支持插入公式')
+      }
+      let str = this.formulaText.trim()
+      if (!str) return
+      this.mindMap.execCommand('INSERT_FORMULA', str)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.box {
+  padding: 10px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  &.isDark {
+    .title {
+      color: #fff;
+    }
+
+    .formulaList {
+      .formulaItem {
+        .overview,
+        .text {
+          color: #fff;
+        }
+
+        .text {
+          background-color: #363b3f;
+        }
+      }
+    }
+
+    /deep/ .el-textarea__inner {
+      background-color: transparent;
+      color: #fff;
+    }
+  }
+
+  .title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+    margin: 10px 0;
+    flex-shrink: 0;
+  }
+
+  .formulaInputBox {
+    flex-shrink: 0;
+  }
+
+  .formulaList {
+    height: 100%;
+    overflow-y: auto;
+
+    .formulaItem {
+      position: relative;
+      display: flex;
+      overflow: hidden;
+      align-items: center;
+      border: 1px solid #dcdfe6;
+      border-bottom: none;
+
+      &:last-of-type {
+        border-bottom: 1px solid #dcdfe6;
+      }
+
+      .overview,
+      .text {
+        width: 50%;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+      }
+
+      .overview {
+        padding: 10px 0;
+        border-right: none;
+      }
+
+      .text {
+        cursor: pointer;
+        font-size: 14px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        height: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+        border-left: 1px solid #dcdfe6;
+        background-color: #fafafa;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,9 +1,15 @@
 <template>
-  <Sidebar ref="sidebar" title="图标/贴纸">
+  <Sidebar ref="sidebar" :title="$t('nodeIconSidebar.title')">
     <div class="box" :class="{ isDark: isDark }">
       <el-tabs v-model="activeName">
-        <el-tab-pane label="图标" name="icon"></el-tab-pane>
-        <el-tab-pane label="贴纸" name="image"></el-tab-pane>
+        <el-tab-pane
+          :label="$t('nodeIconSidebar.icon')"
+          name="icon"
+        ></el-tab-pane>
+        <el-tab-pane
+          :label="$t('nodeIconSidebar.sticker')"
+          name="image"
+        ></el-tab-pane>
       </el-tabs>
       <div class="boxContent">
         <!-- 图标 -->

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

@@ -134,6 +134,16 @@
           <span class="icon iconfont iconlianjiexian"></span>
           <span class="text">{{ $t('toolbar.associativeLine') }}</span>
         </div>
+        <div
+          class="toolbarBtn"
+          :class="{
+            disabled: activeNodes.length <= 0 || hasGeneralization
+          }"
+          @click="showFormula"
+        >
+          <span class="icon iconfont icongongshi"></span>
+          <span class="text">{{ $t('toolbar.formula') }}</span>
+        </div>
       </div>
       <!-- 导出 -->
       <div class="toolbarBlock">
@@ -259,6 +269,11 @@ export default {
       this.setActiveSidebar('nodeIconSidebar')
     },
 
+    // 打开公式侧边栏
+    showFormula() {
+      this.setActiveSidebar('formulaSidebar')
+    },
+
     /**
      * @Author: 王林25
      * @Date: 2022-11-14 19:17:40