Merge branch 'feature' into main

simple-mind-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.6.10",
+  "version": "0.6.11",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {

simple-mind-map/src/core/render/node/Node.js

@@ -266,6 +266,7 @@ class Node {
     paddingY += this.shapePadding.paddingY
     // 节点形状
     this.shapeNode = this.shapeInstance.createShape()
+    this.shapeNode.addClass('smm-node-shape')
     this.group.add(this.shapeNode)
     this.updateNodeShape()
     // 渲染一个隐藏的矩形区域，用来触发展开收起按钮的显示
@@ -531,6 +532,7 @@ class Node {
       isLayout = true
       // 创建组
       this.group = new G()
+      this.group.addClass('smm-node')
       this.group.css({
         cursor: 'default'
       })

simple-mind-map/src/plugins/MiniMap.js

@@ -1,3 +1,5 @@
+import { isWhite, isTransparent } from '../utils/index'
+
 // 小地图插件
 class MiniMap {
   //  构造函数
@@ -20,7 +22,7 @@ class MiniMap {
    * boxHeight：小地图容器的高度
    */
   calculationMiniMap(boxWidth, boxHeight) {
-    let { svgHTML, rect, origWidth, origHeight, scaleX, scaleY } =
+    let { svg, rect, origWidth, origHeight, scaleX, scaleY } =
       this.mindMap.getSvgData()
     // 计算数据
     let boxRatio = boxWidth / boxHeight
@@ -65,8 +67,10 @@ class MiniMap {
       Math.max(0, ((_rectY2 - origHeight) / _rectHeight) * actHeight) +
       miniMapBoxTop +
       'px'
+    
+    this.removeNodeContent(svg)
     return {
-      svgHTML, // 小地图html
+      svgHTML: svg.svg(), // 小地图html
       viewBoxStyle, // 视图框的位置信息
       miniMapBoxScale, // 视图框的缩放值
       miniMapBoxLeft, // 视图框的left值
@@ -74,6 +78,38 @@ class MiniMap {
     }
   }
 
+  // 移除节点的内容
+  removeNodeContent(svg) {
+    if (svg.hasClass('smm-node')) {
+      let shape = svg.findOne('.smm-node-shape')
+      let fill = shape.attr('fill')
+      if (isWhite(fill) || isTransparent(fill)) {
+        shape.attr('fill', this.getDefaultFill())
+      }
+      svg.clear()
+      svg.add(shape)
+      return
+    }
+    let children = svg.children()
+    if (children && children.length > 0) {
+      children.forEach((node) => {
+        this.removeNodeContent(node)
+      })
+    }
+  }
+
+  // 计算默认的填充颜色
+  getDefaultFill() {
+    let { lineColor, root, second, node } = this.mindMap.themeConfig
+    let list = [lineColor, root.fillColor, root.color, second.fillColor, second.color, node.fillColor, node.color, root.borderColor, second.borderColor, node.borderColor]
+    for(let i = 0; i < list.length; i++) {
+      let color = list[i]
+      if (!isTransparent(color) && !isWhite(color)) {
+        return color
+      }
+    }
+  }
+
   //  小地图鼠标按下事件
   onMousedown(e) {
     this.isMousedown = true

simple-mind-map/src/utils/index.js

@@ -516,3 +516,15 @@ export const replaceHtmlText = (html, searchText, replaceText) => {
   walk(replaceHtmlTextEl)
   return replaceHtmlTextEl.innerHTML
 }
+
+// 判断一个颜色是否是白色
+export const isWhite = (color) => {
+  color = String(color).replaceAll(/\s+/g, '')
+  return ['#fff', '#ffffff', '#FFF', '#FFFFFF', 'rgb(255,255,255)'].includes(color) || /rgba\(255,255,255,[^)]+\)/.test(color)
+}
+
+// 判断一个颜色是否是透明
+export const isTransparent = (color) => {
+  color = String(color).replaceAll(/\s+/g, '')
+  return ['', 'transparent'].includes(color) || /rgba\(\d+,\d+,\d+,0\)/.test(color)
+}

web/src/pages/Doc/en/changelog/index.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.6.11
+
+New: 1.Optimize the mini map, remove node content within the mini map, and optimize performance.
+
+Demo: 1.Add a new topic and add tab differentiation to the topic list. 2.Node image upload supports inputting network image addresses. 3.Node image upload supports inputting network images.
+
 ## 0.6.10
 
 Fix: 1.Fix the issue of deleting a node after searching for it and not updating the search results when searching again.  2.Fixed an issue where the button for adjusting image size did not update after node operation.  3.Fix the issue of incorrect internal data deep copy location.  4.Fix the issue of ineffective line wrapping in rich text nodes.  5. Fix the issue of node swapping and loss when switching themes and other scenarios.

web/src/pages/Doc/en/changelog/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.6.11</h2>
+<p>New: 1.Optimize the mini map, remove node content within the mini map, and optimize performance.</p>
+<p>Demo: 1.Add a new topic and add tab differentiation to the topic list. 2.Node image upload supports inputting network image addresses. 3.Node image upload supports inputting network images.</p>
 <h2>0.6.10</h2>
 <p>Fix: 1.Fix the issue of deleting a node after searching for it and not updating the search results when searching again.  2.Fixed an issue where the button for adjusting image size did not update after node operation.  3.Fix the issue of incorrect internal data deep copy location.  4.Fix the issue of ineffective line wrapping in rich text nodes.  5. Fix the issue of node swapping and loss when switching themes and other scenarios.</p>
 <p>New: 1.Search supports searching for white space characters and replacing them with white space characters.</p>

web/src/pages/Doc/en/utils/index.md

@@ -220,6 +220,16 @@ Add inline styles to the specified tags in the HTML tag.
 
 Check if a string is a rich text character.
 
+#### isWhite(color)
+
+> v0.6.11+
+
+Determine whether a color is white.
+
+#### isTransparent(color)
+
+Determine whether a color is transparent.
+
 ## Simulate CSS background in Canvas
 
 Import:

web/src/pages/Doc/en/utils/index.vue

@@ -154,6 +154,13 @@ and copying the <code>data</code> of the data object, example:</p>
 <p>v0.6.10+</p>
 </blockquote>
 <p>Check if a string is a rich text character.</p>
+<h4>isWhite(color)</h4>
+<blockquote>
+<p>v0.6.11+</p>
+</blockquote>
+<p>Determine whether a color is white.</p>
+<h4>isTransparent(color)</h4>
+<p>Determine whether a color is transparent.</p>
 <h2>Simulate CSS background in Canvas</h2>
 <p>Import:</p>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>

web/src/pages/Doc/zh/changelog/index.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.6.11
+
+新增：1.优化小地图,去除小地图内的节点内容,优化性能。
+
+Demo：1.新增主题、主题列表新增tab区分。 2.节点图片上传支持输入网络图片地址。 3.节点图片上传支持输入网络图片。
+
 ## 0.6.10
 
 修复：1.修复搜索定位到某个节点后删除该节点，再次搜索时搜索结果未更新的问题。 2.修复调整图片大小的按钮在节点操作后没有更新的问题。 3.修复内部数据深拷贝位置不正确的问题。 4.修复富文本节点换行不生效的问题。 5.修复切换主题等场景时节点换行会丢失的问题。

web/src/pages/Doc/zh/changelog/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.6.11</h2>
+<p>新增：1.优化小地图,去除小地图内的节点内容,优化性能。</p>
+<p>Demo：1.新增主题、主题列表新增tab区分。 2.节点图片上传支持输入网络图片地址。 3.节点图片上传支持输入网络图片。</p>
 <h2>0.6.10</h2>
 <p>修复：1.修复搜索定位到某个节点后删除该节点，再次搜索时搜索结果未更新的问题。 2.修复调整图片大小的按钮在节点操作后没有更新的问题。 3.修复内部数据深拷贝位置不正确的问题。 4.修复富文本节点换行不生效的问题。 5.修复切换主题等场景时节点换行会丢失的问题。</p>
 <p>新增：1.搜索支持搜索空白字符和替换为空白字符。</p>

web/src/pages/Doc/zh/utils/index.md

@@ -215,6 +215,18 @@ copyNodeTree({}, node)
 
 检查一个字符串是否是富文本字符。
 
+#### isWhite(color)
+
+> v0.6.11+
+
+判断一个颜色是否是白色。
+
+#### isTransparent(color)
+
+判断一个颜色是否是透明。
+
+> v0.6.11+
+
 ## 在canvas中模拟css的背景属性
 
 引入：

web/src/pages/Doc/zh/utils/index.vue

@@ -149,6 +149,16 @@
 <p>v0.6.10+</p>
 </blockquote>
 <p>检查一个字符串是否是富文本字符。</p>
+<h4>isWhite(color)</h4>
+<blockquote>
+<p>v0.6.11+</p>
+</blockquote>
+<p>判断一个颜色是否是白色。</p>
+<h4>isTransparent(color)</h4>
+<p>判断一个颜色是否是透明。</p>
+<blockquote>
+<p>v0.6.11+</p>
+</blockquote>
 <h2>在canvas中模拟css的背景属性</h2>
 <p>引入：</p>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>

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

@@ -5,9 +5,16 @@
     :visible.sync="dialogVisible"
     width="500"
   >
-    <ImgUpload ref="ImgUpload" v-model="img"></ImgUpload>
+    <div class="title">方式一</div>
-    <div class="imgTitleBox">
+    <ImgUpload ref="ImgUpload" v-model="img" style="margin-bottom: 12px;"></ImgUpload>
-      <span class="title">{{ $t('nodeImage.imgTitle') }}</span>
+    <div class="title">方式二</div>
+    <div class="inputBox">
+      <span class="label">请输入图片地址</span>
+      <el-input v-model="imgUrl" size="mini" placeholder="http://xxx.com/xx.jpg"></el-input>
+    </div>
+    <div class="title">可选</div>
+    <div class="inputBox">
+      <span class="label">{{ $t('nodeImage.imgTitle') }}</span>
       <el-input v-model="imgTitle" size="mini"></el-input>
     </div>
     <span slot="footer" class="dialog-footer">
@@ -21,6 +28,7 @@
 
 <script>
 import ImgUpload from '@/components/ImgUpload'
+import { getImageSize } from 'simple-mind-map/src/utils/index'
 
 /**
  * @Author: 王林
@@ -36,6 +44,7 @@ export default {
     return {
       dialogVisible: false,
       img: '',
+      imgUrl: '',
       imgTitle: '',
       activeNodes: null
     }
@@ -43,43 +52,54 @@ export default {
   created() {
     this.$bus.$on('node_active', (...args) => {
       this.activeNodes = args[1]
-      if (this.activeNodes.length > 0) {
-        let firstNode = this.activeNodes[0]
-        this.img = firstNode.getData('image')
-        this.imgTitle = firstNode.getData('imageTitle')
-      } else {
-        this.img = ''
-        this.imgTitle = ''
-      }
     })
     this.$bus.$on('showNodeImage', () => {
+      this.reset()
+      if (this.activeNodes.length > 0) {
+        let firstNode = this.activeNodes[0]
+        let img = firstNode.getData('image')
+        if (img) {
+          if (/^https?:\/\//.test(img)) {
+            this.imgUrl = img
+          } else {
+            this.img = img
+          }
+        }
+        this.imgTitle = firstNode.getData('imageTitle')
+      }
       this.dialogVisible = true
     })
   },
   methods: {
-    /**
-     * @Author: 王林
-     * @Date: 2021-06-22 22:08:11
-     * @Desc: 取消
-     */
     cancel() {
       this.dialogVisible = false
+      this.reset()
+    },
+
+    reset() {
+      this.img = ''
+      this.imgTitle = ''
+      this.imgUrl = ''
     },
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-06-06 22:28:20
-     * @Desc:  确定
-     */
     async confirm() {
       try {
-        let { width, height } = await this.$refs.ImgUpload.getSize()
+        if (!this.img && !this.imgUrl) return
+        let res = null
+        let img = ''
+        if (this.img) {
+          img = this.img
+          res = await this.$refs.ImgUpload.getSize()
+        } else if (this.imgUrl) {
+          img = this.imgUrl
+          res = await getImageSize(img)
+        }
         this.activeNodes.forEach(node => {
           node.setImage({
-            url: this.img || 'none',
+            url: img || 'none',
             title: this.imgTitle,
-            width,
+            width: res.width,
-            height
+            height: res.height
           })
         })
         this.cancel()
@@ -93,13 +113,18 @@ export default {
 
 <style lang="less" scoped>
 .nodeDialog {
-  .imgTitleBox {
+  .title {
+    font-size: 18px;
+    margin-bottom: 12px;
+  }
+
+  .inputBox {
     display: flex;
     align-items: center;
-    margin-top: 10px;
+    margin-bottom: 10px;
 
-    .title {
+    .label {
-      width: 100px;
+      width: 150px;
     }
   }
 }