Merge branch 'feature' into main

simple-mind-map/index.js

@@ -281,6 +281,7 @@ class MindMap {
       layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
     }
     this.opt.layout = layout
+    this.view.reset()
     this.renderer.setLayout()
     this.render()
   }
@@ -368,7 +369,7 @@ class MindMap {
   }
 
   // 获取svg数据
-  getSvgData({ paddingX = 0, paddingY = 0 }) {
+  getSvgData({ paddingX = 0, paddingY = 0 } = {}) {
     const svg = this.svg
     const draw = this.draw
     // 保存原始信息

simple-mind-map/package.json

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

simple-mind-map/src/Select.js

@@ -17,7 +17,7 @@ class Select {
 
   //  绑定事件
   bindEvent() {
-    this.checkInNodes = throttle(this.checkInNodes, 500, this)
+    this.checkInNodes = throttle(this.checkInNodes, 300, this)
     this.mindMap.on('mousedown', e => {
       if (this.mindMap.opt.readonly) {
         return
@@ -146,22 +146,26 @@ class Select {
       let bottom = (top + height) * scaleY + translateY
       left = left * scaleX + translateX
       top = top * scaleY + translateY
-      if (left >= minx && right <= maxx && top >= miny && bottom <= maxy) {
-        this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
+      if ((left >= minx && left <= maxx ||
+          right >= minx && right <= maxx) && 
+          (top >= miny && top <= maxy ||
+          bottom >= miny && bottom <= maxy)
+        ) {
+        // this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
           if (node.nodeData.data.isActive) {
             return
           }
           this.mindMap.renderer.setNodeActive(node, true)
           this.mindMap.renderer.addActiveNode(node)
-        })
+        // })
       } else if (node.nodeData.data.isActive) {
-        this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
+        // this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
           if (!node.nodeData.data.isActive) {
             return
           }
           this.mindMap.renderer.setNodeActive(node, false)
           this.mindMap.renderer.removeActiveNode(node)
-        })
+        // })
       }
     })
   }

simple-mind-map/src/TextEdit.js

@@ -1,4 +1,4 @@
-import { getStrWithBrFromHtml } from './utils'
+import { getStrWithBrFromHtml, checkNodeOuter } from './utils'
 
 //  节点文字编辑类
 export default class TextEdit {
@@ -60,6 +60,8 @@ export default class TextEdit {
 
   //  显示文本编辑框
   show(node) {
+    let { offsetLeft, offsetTop } = checkNodeOuter(this.mindMap, node)
+    this.mindMap.view.translateXY(offsetLeft, offsetTop)
     let rect = node._textData.node.node.getBoundingClientRect()
     if (this.mindMap.richText) {
       this.mindMap.richText.showEditText(node, rect)

simple-mind-map/src/View.js

@@ -124,6 +124,13 @@ class View {
     }
   }
 
+  //  平移x,y方向
+  translateXY(x, y) {
+    this.x += x
+    this.y += y
+    this.transform()
+  }
+
   //  平移x方向
   translateX(step) {
     this.x += step
@@ -160,10 +167,14 @@ class View {
 
   //  恢复
   reset() {
+    let scaleChange = this.scale !== 1
     this.scale = 1
     this.x = 0
     this.y = 0
     this.transform()
+    if (scaleChange) {
+      this.mindMap.emit('scale', this.scale)
+    }
   }
 
   //  缩小

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

@@ -302,4 +302,34 @@ export const nextTick = function (fn, ctx) {
     pending = true
     timerFunc(handle, 0)
   }
+}
+
+// 检查节点是否超出画布
+export const checkNodeOuter = (mindMap, node) => {
+  let elRect = mindMap.elRect
+  let { scaleX, scaleY, translateX, translateY } = mindMap.draw.transform()
+  let { left, top, width, height } = node
+  let right = (left + width) * scaleX + translateX
+  let bottom = (top + height) * scaleY + translateY
+  left = left * scaleX + translateX
+  top = top * scaleY + translateY
+  let offsetLeft = 0
+  let offsetTop = 0
+  if (left < 0) {
+    offsetLeft = -left
+  }
+  if (right > elRect.width) {
+    offsetLeft = -(right - elRect.width)
+  }
+  if (top < 0) {
+    offsetTop = -top
+  }
+  if (bottom > elRect.height) {
+    offsetTop = -(bottom - elRect.height)
+  }
+  return {
+    isOuter: offsetLeft !== 0 || offsetTop !== 0,
+    offsetLeft,
+    offsetTop
+  }
 }

web/src/pages/Doc/catalogList.js

@@ -10,7 +10,7 @@ let langList = [
     path: 'en'
   }
 ]
-let StartList = ['introduction', 'start', 'translate', 'changelog']
+let StartList = ['introduction', 'start', 'deploy', 'translate', 'changelog']
 let CourseList = new Array(18).fill(0).map((_, index) => {
   return 'course' + (index + 1)
 })

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

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.5.5-fix.1
+
+Fix: 1.Fix the issue where the edit box is also outside the canvas when editing nodes outside the canvas. 2.After modifying the structure, reset the transformation to prevent the problem of sudden position changes during the first drag after switching the structure during scaling.
+
+optimization: 1.When multiple nodes are selected, as long as there is a cross between the node and the selection area, it is considered selected.
+
 ## 0.5.5
 
 New: 1.Supports configuring the padding when exporting to PNG, SVG, or PDF. 2.Support the configuration of z-index for node text editing boxes and node comment floating layer elements. 3.Support clicking on areas outside the canvas to end node editing status.

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

@@ -1,6 +1,9 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.5.5-fix.1</h2>
+<p>Fix: 1.Fix the issue where the edit box is also outside the canvas when editing nodes outside the canvas. 2.After modifying the structure, reset the transformation to prevent the problem of sudden position changes during the first drag after switching the structure during scaling.</p>
+<p>optimization: 1.When multiple nodes are selected, as long as there is a cross between the node and the selection area, it is considered selected.</p>
 <h2>0.5.5</h2>
 <p>New: 1.Supports configuring the padding when exporting to PNG, SVG, or PDF. 2.Support the configuration of z-index for node text editing boxes and node comment floating layer elements. 3.Support clicking on areas outside the canvas to end node editing status.</p>
 <h2>0.5.4</h2>

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

@@ -0,0 +1 @@
+# Deploy

web/src/pages/Doc/routerList.js

@@ -41,7 +41,8 @@ export default [
       { path: 'utils', title: '内置工具方法' },
       { path: 'view', title: 'View实例' },
       { path: 'watermark', title: 'Watermark插件' },
-      { path: 'xmind', title: 'XMind解析' }
+      { path: 'xmind', title: 'XMind解析' },
+      { path: 'deploy', title: '部署' }
     ]
   },
   {
@@ -68,7 +69,8 @@ export default [
       { path: 'utils', title: 'Utility Methods' },
       { path: 'view', title: 'View instance' },
       { path: 'watermark', title: 'Watermark plugin' },
-      { path: 'xmind', title: 'XMind parse' }
+      { path: 'xmind', title: 'XMind parse' },
+      { path: 'deploy', title: 'Deploy' }
     ]
   }
 ]

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

@@ -4,6 +4,12 @@
 
 新增：1.支持配置导出为png、svg、pdf时的内边距。 2.支持配置节点文本编辑框、节点备注浮层元素的z-index。 3.支持点击画布外的区域结束节点编辑状态。
 
+## 0.5.5-fix.1
+
+修复：1.修复节点在画布外编辑时编辑框也在画布外的问题。 2.修改结构后复位变换，防止存在缩放时切换结构后第一次拖动时会发生位置突变的问题。
+
+优化：1.节点多选时只要节点和选区存在交叉即认为被选中。 
+
 ## 0.5.4
 
 新增：1.添加新主题。 2.新增时间轴和鱼骨结构。

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

@@ -3,6 +3,9 @@
     <h1>Changelog</h1>
 <h2>0.5.5</h2>
 <p>新增：1.支持配置导出为png、svg、pdf时的内边距。 2.支持配置节点文本编辑框、节点备注浮层元素的z-index。 3.支持点击画布外的区域结束节点编辑状态。</p>
+<h2>0.5.5-fix.1</h2>
+<p>修复：1.修复节点在画布外编辑时编辑框也在画布外的问题。 2.修改结构后复位变换，防止存在缩放时切换结构后第一次拖动时会发生位置突变的问题。</p>
+<p>优化：1.节点多选时只要节点和选区存在交叉即认为被选中。</p>
 <h2>0.5.4</h2>
 <p>新增：1.添加新主题。 2.新增时间轴和鱼骨结构。</p>
 <p>修复：1.修复节点右键和画布右键的冲突问题。 2.修复组织结构图、目录组织图等节点拖拽时存在线段未隐藏的bug。</p>

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

@@ -0,0 +1,66 @@
+# 部署
+
+本项目的`web`目录下提供了一个基于`simple-mind-map`库、`Vue2.x`、`ElementUI`开发的完整项目，数据默认存储在电脑本地，此外可以操作电脑本地文件，原意是作为一个线上`demo`，但是也完全可以直接把它当做一个在线版思维导图应用使用，在线地址：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-map/)。
+
+如果你的网络环境访问`GitHub`服务很慢，你也可以部署到你的服务器上。
+
+## 部署到静态文件服务器
+
+项目本身不依赖后端，所以完全可以部署到一个静态文件服务器上，可以依次执行如下命令：
+
+```bash
+git clone https://github.com/wanglin2/mind-map.git
+cd mind-map
+cd simple-mind-map
+npm i
+npm link
+cd ..
+cd web
+npm i
+npm link simple-mind-map
+```
+
+然后你可以选择启动本地服务：
+
+```bash
+npm run serve
+```
+
+也可以直接打包生成构建产物：
+
+```bash
+npm run build
+```
+
+打包完后的入口页面`index.html`可以在项目根目录找到，对应的静态资源在根目录下的`dist`目录，`html`文件中会通过相对路径访问`dist`目录的资源，比如`dist/xxx`。你可以直接把这两个文件或目录上传到你的静态文件服务器，事实上，本项目就是这样部署到`GitHub Pages`上的。
+
+如果你没有代码修改需求的话，直接从本仓库复制这些文件也是可以的。
+
+如果你想把`index.html`也打包进`dist`目录，可以修改`web/package.json`文件的`scripts.build`命令，把`vue-cli-service build && node ../copy.js`中的` && node ../copy.js`删除即可。
+
+如果你想修改打包输出的目录，可以修改`web/vue.config.js`文件的`outputDir`配置，改成你想要输出的路径即可。
+
+如果你想修改`index.html`文件引用静态资源的路径的话可以修改`web/vue.config.js`文件的`publicPath`配置。
+
+另外默认使用的是`hash`路由，也就是路径中会在`#`，如果你想使用`history`路由，可以修改`web/src/router.js`文件，将：
+
+```js
+const router = new VueRouter({
+  routes
+})
+```
+
+改成：
+
+```js
+const router = new VueRouter({
+  mode: 'history',
+  routes
+})
+```
+
+不过这需要后台支持，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问子路由时会返回404，所以呢你要在服务端增加一个覆盖所有情况的候选资源：如果`URL`匹配不到任何静态资源，则应该返回同一个`index.html`页面。
+
+## Docker
+
+编写中。。。

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

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <h1>部署</h1>
+<p>本项目的<code>web</code>目录下提供了一个基于<code>simple-mind-map</code>库、<code>Vue2.x</code>、<code>ElementUI</code>开发的完整项目，数据默认存储在电脑本地，此外可以操作电脑本地文件，原意是作为一个线上<code>demo</code>，但是也完全可以直接把它当做一个在线版思维导图应用使用，在线地址：<a href="https://wanglin2.github.io/mind-map/">https://wanglin2.github.io/mind-map/</a>。</p>
+<p>如果你的网络环境访问<code>GitHub</code>服务很慢，你也可以部署到你的服务器上。</p>
+<h2>部署到静态文件服务器</h2>
+<p>项目本身不依赖后端，所以完全可以部署到一个静态文件服务器上，可以依次执行如下命令：</p>
+<pre class="hljs"><code>git <span class="hljs-built_in">clone</span> https://github.com/wanglin2/mind-map.git
+<span class="hljs-built_in">cd</span> mind-map
+<span class="hljs-built_in">cd</span> simple-mind-map
+npm i
+npm link
+<span class="hljs-built_in">cd</span> ..
+<span class="hljs-built_in">cd</span> web
+npm i
+npm link simple-mind-map
+</code></pre>
+<p>然后你可以选择启动本地服务：</p>
+<pre class="hljs"><code>npm run serve
+</code></pre>
+<p>也可以直接打包生成构建产物：</p>
+<pre class="hljs"><code>npm run build
+</code></pre>
+<p>打包完后的入口页面<code>index.html</code>可以在项目根目录找到，对应的静态资源在根目录下的<code>dist</code>目录，<code>html</code>文件中会通过相对路径访问<code>dist</code>目录的资源，比如<code>dist/xxx</code>。你可以直接把这两个文件或目录上传到你的静态文件服务器，事实上，本项目就是这样部署到<code>GitHub Pages</code>上的。</p>
+<p>如果你没有代码修改需求的话，直接从本仓库复制这些文件也是可以的。</p>
+<p>如果你想把<code>index.html</code>也打包进<code>dist</code>目录，可以修改<code>web/package.json</code>文件的<code>scripts.build</code>命令，把<code>vue-cli-service build &amp;&amp; node ../copy.js</code>中的<code> &amp;&amp; node ../copy.js</code>删除即可。</p>
+<p>如果你想修改打包输出的目录，可以修改<code>web/vue.config.js</code>文件的<code>outputDir</code>配置，改成你想要输出的路径即可。</p>
+<p>如果你想修改<code>index.html</code>文件引用静态资源的路径的话可以修改<code>web/vue.config.js</code>文件的<code>publicPath</code>配置。</p>
+<p>另外默认使用的是<code>hash</code>路由，也就是路径中会在<code>#</code>，如果你想使用<code>history</code>路由，可以修改<code>web/src/router.js</code>文件，将：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter({
+  routes
+})
+</code></pre>
+<p>改成：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter({
+  <span class="hljs-attr">mode</span>: <span class="hljs-string">&#x27;history&#x27;</span>,
+  routes
+})
+</code></pre>
+<p>不过这需要后台支持，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问子路由时会返回404，所以呢你要在服务端增加一个覆盖所有情况的候选资源：如果<code>URL</code>匹配不到任何静态资源，则应该返回同一个<code>index.html</code>页面。</p>
+<h2>Docker</h2>
+<p>编写中。。。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

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

@@ -99,4 +99,11 @@
 
 <img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
 
-<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
+<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
+
+<div  style="display: flex;">
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/Think.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>Think</p>
+    </div>
+</div>

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

@@ -7,19 +7,19 @@
 </blockquote>
 <h2>特性</h2>
 <ul>
-<li><input type="checkbox" id="checkbox0" checked="true" /><label for="checkbox0">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积</label></li>
-<li><input type="checkbox" id="checkbox1" checked="true" /><label for="checkbox1">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴、鱼骨图六种结构</label></li>
-<li><input type="checkbox" id="checkbox2" checked="true" /><label for="checkbox2">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
-<li><input type="checkbox" id="checkbox3" checked="true" /><label for="checkbox3">支持快捷键</label></li>
-<li><input type="checkbox" id="checkbox4" checked="true" /><label for="checkbox4">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
-<li><input type="checkbox" id="checkbox5" checked="true" /><label for="checkbox5">支持前进后退</label></li>
-<li><input type="checkbox" id="checkbox6" checked="true" /><label for="checkbox6">支持拖动、缩放</label></li>
-<li><input type="checkbox" id="checkbox7" checked="true" /><label for="checkbox7">支持右键和Ctrl+左键两种多选方式</label></li>
-<li><input type="checkbox" id="checkbox8" checked="true" /><label for="checkbox8">支持节点自由拖拽、拖拽调整</label></li>
-<li><input type="checkbox" id="checkbox9" checked="true" /><label for="checkbox9">支持多种节点形状</label></li>
-<li><input type="checkbox" id="checkbox10" checked="true" /><label for="checkbox10">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
-<li><input type="checkbox" id="checkbox11" checked="true" /><label for="checkbox11">支持小地图、支持水印</label></li>
-<li><input type="checkbox" id="checkbox12" checked="true" /><label for="checkbox12">支持关联线</label></li>
+<li><input type="checkbox" id="checkbox216" checked="true" /><label for="checkbox216">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积</label></li>
+<li><input type="checkbox" id="checkbox217" checked="true" /><label for="checkbox217">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴、鱼骨图六种结构</label></li>
+<li><input type="checkbox" id="checkbox218" checked="true" /><label for="checkbox218">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
+<li><input type="checkbox" id="checkbox219" checked="true" /><label for="checkbox219">支持快捷键</label></li>
+<li><input type="checkbox" id="checkbox220" checked="true" /><label for="checkbox220">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
+<li><input type="checkbox" id="checkbox221" checked="true" /><label for="checkbox221">支持前进后退</label></li>
+<li><input type="checkbox" id="checkbox222" checked="true" /><label for="checkbox222">支持拖动、缩放</label></li>
+<li><input type="checkbox" id="checkbox223" checked="true" /><label for="checkbox223">支持右键和Ctrl+左键两种多选方式</label></li>
+<li><input type="checkbox" id="checkbox224" checked="true" /><label for="checkbox224">支持节点自由拖拽、拖拽调整</label></li>
+<li><input type="checkbox" id="checkbox225" checked="true" /><label for="checkbox225">支持多种节点形状</label></li>
+<li><input type="checkbox" id="checkbox226" checked="true" /><label for="checkbox226">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
+<li><input type="checkbox" id="checkbox227" checked="true" /><label for="checkbox227">支持小地图、支持水印</label></li>
+<li><input type="checkbox" id="checkbox228" checked="true" /><label for="checkbox228">支持关联线</label></li>
 </ul>
 <h2>仓库目录介绍</h2>
 <p>1.<code>simple-mind-map</code></p>
@@ -27,11 +27,11 @@
 <p>2.<code>web</code></p>
 <p>使用<code>simple-mind-map</code>库，基于<code>vue2.x</code>、<code>ElementUI</code>搭建的在线思维导图。特性：</p>
 <ul>
-<li><input type="checkbox" id="checkbox13" checked="true" /><label for="checkbox13">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
-<li><input type="checkbox" id="checkbox14" checked="true" /><label for="checkbox14">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
-<li><input type="checkbox" id="checkbox15" checked="true" /><label for="checkbox15">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
-<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">右键菜单，支持展开、收起、整理布局等操作</label></li>
-<li><input type="checkbox" id="checkbox17" checked="true" /><label for="checkbox17">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
+<li><input type="checkbox" id="checkbox229" checked="true" /><label for="checkbox229">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
+<li><input type="checkbox" id="checkbox230" checked="true" /><label for="checkbox230">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
+<li><input type="checkbox" id="checkbox231" checked="true" /><label for="checkbox231">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
+<li><input type="checkbox" id="checkbox232" checked="true" /><label for="checkbox232">右键菜单，支持展开、收起、整理布局等操作</label></li>
+<li><input type="checkbox" id="checkbox233" checked="true" /><label for="checkbox233">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
 </ul>
 <p>提供文档页面服务。</p>
 <p>3.<code>dist</code></p>
@@ -67,6 +67,12 @@
 </blockquote>
 <img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
 <img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
+<div  style="display: flex;">
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/Think.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>Think</p>
+    </div>
+</div>
   </div>
 </template>
 

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

@@ -277,6 +277,8 @@ export default {
         theme: theme.template,
         themeConfig: theme.config,
         viewData: view,
+        nodeTextEditZIndex: 1000,
+        nodeNoteTooltipZIndex: 1000,
         customNoteContentShow: {
           show: (content, left, top) => {
             this.$bus.$emit('showNoteContent', content, left, top)