节点自由拖拽支持配置是否开启

simple-mind-map/example/exampleData.js

@@ -925,5 +925,6 @@ export default {
     "layout": "logicalStructure",
     // "layout": "mindMap",
     // "layout": "catalogOrganization"
-    // "layout": "organizationStructure"
+    // "layout": "organizationStructure",
+    "config": {}
 }

simple-mind-map/example/exportFullData.json

@@ -62,5 +62,6 @@
             "sx": 0,
             "sy": 0
         }
-    }
+    },
+    "config": {}
 }

simple-mind-map/index.js

@@ -45,13 +45,15 @@ const defaultOpt = {
   // 多选节点时鼠标移动距边缘多少距离时开始偏移
   selectTranslateLimit: 20,
   // 自定义节点备注内容显示
-  customNoteContentShow: null
+  customNoteContentShow: null,
   /*
         {
             show(){},
             hide(){}
         }
     */
+  // 是否开启节点自由拖拽
+  enableFreeDrag: false
 }
 
 //  思维导图
@@ -229,6 +231,16 @@ class MindMap {
     return prop === undefined ? this.themeConfig : this.themeConfig[prop]
   }
 
+  // 获取配置
+  getConfig(prop) {
+    return prop === undefined ? this.opt : this.opt[prop]
+  }
+
+  // 更新配置
+  updateConfig(opt = {}) {
+    this.opt = this.handleOpt(merge.all([defaultOpt, this.opt, opt]))
+  }
+
   //  获取当前布局结构
   getLayout() {
     return this.opt.layout

simple-mind-map/package.json

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

simple-mind-map/src/Drag.js

@@ -2,8 +2,10 @@ import { bfsWalk, throttle } from './utils'
 import Base from './layouts/Base'
 
 //  节点拖动类
+
 class Drag extends Base {
   //  构造函数
+
   constructor({ mindMap }) {
     super(mindMap.renderer)
     this.mindMap = mindMap
@@ -12,6 +14,7 @@ class Drag extends Base {
   }
 
   //  复位
+
   reset() {
     // 当前拖拽节点
     this.node = null
@@ -45,6 +48,7 @@ class Drag extends Base {
   }
 
   //  绑定事件
+
   bindEvent() {
     this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this)
     this.mindMap.on('node_mousedown', (node, e) => {
@@ -93,6 +97,7 @@ class Drag extends Base {
   }
 
   //  鼠标松开事件
+
   onMouseup(e) {
     if (!this.isMousedown) {
       return
@@ -114,7 +119,7 @@ class Drag extends Base {
       // 存在下一个相邻节点，作为其前一个兄弟节点
       this.mindMap.renderer.setNodeActive(this.nextNode, false)
       this.mindMap.execCommand('INSERT_BEFORE', this.node, this.nextNode)
-    } else if (_nodeIsDrag) {
+    } else if (_nodeIsDrag && this.mindMap.opt.enableFreeDrag) {
       // 自定义位置
       let { x, y } = this.mindMap.toPos(
         e.clientX - this.offsetX,
@@ -134,6 +139,7 @@ class Drag extends Base {
   }
 
   //  创建克隆节点
+
   createCloneNode() {
     if (!this.clone) {
       // 节点
@@ -155,6 +161,7 @@ class Drag extends Base {
   }
 
   //  移除克隆节点
+
   removeCloneNode() {
     if (!this.clone) {
       return
@@ -165,6 +172,7 @@ class Drag extends Base {
   }
 
   //  拖动中
+
   onMove(x, y) {
     if (!this.isMousedown) {
       return
@@ -191,6 +199,7 @@ class Drag extends Base {
   }
 
   //  检测重叠节点
+
   checkOverlapNode() {
     if (!this.drawTransform) {
       return

web/src/lang/en_us.js

@@ -20,7 +20,9 @@ export default {
     level2Node: 'Level2 node',
     belowLevel2Node: 'Below level2 node',
     nodeBorderType: 'Node border style',
-    nodeUseLineStyle: 'Use only has bottom border style'
+    nodeUseLineStyle: 'Use only has bottom border style',
+    otherConfig: 'Other config',
+    enableFreeDrag: 'Enable node free drag'
   },
   color: {
     moreColor: 'More color'

web/src/lang/zh_cn.js

@@ -20,7 +20,9 @@ export default {
     level2Node: '二级节点',
     belowLevel2Node: '三级及以下节点',
     nodeBorderType: '节点边框风格',
-    nodeUseLineStyle: '是否使用只有底边框的风格'
+    nodeUseLineStyle: '是否使用只有底边框的风格',
+    otherConfig: '其他配置',
+    enableFreeDrag: '是否开启节点自由拖拽'
   },
   color: {
     moreColor: '更多颜色'

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

@@ -67,7 +67,7 @@ package
 ## Instantiation options
 
 | Field Name                       | Type    | Default Value    | Description                                                  | Required |
-| -------------------------------- | ------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ | -------- |
 | el                               | Element |                  | Container element, must be a DOM element                     | Yes      |
 | data                             | Object  | {}               | Mind map data, refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js |          |
 | layout                           | String  | logicalStructure | Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram) |          |
@@ -82,6 +82,7 @@ package
 | selectTranslateLimit             | Number  | 20               | The distance from the edge when the canvas begins to offset during multi-select node |          |
 | customNoteContentShow（v0.1.6+） | Object  | null             | Custom node note content display, object type, structure: {show: (noteContent, left, top) => {// your display node note logic }, hide: () => {// your hide node note logic }} |          |
 | readonly（v0.1.7+）              | Boolean | false            | Whether it is read-only mode                                 |          |
+| enableFreeDrag（v0.2.4+）        | Boolean | false            | Enable node free drag                                        |          |
 
 ## Static methods
 
@@ -200,6 +201,30 @@ Gets the custom theme configuration.
 
 Gets the value of a specific theme configuration property.
 
+### getConfig(*prop*)
+
+> 0.2.24+
+
+`prop`：Get the value of the specified configuration, and return the entire configuration if not passed
+
+Get config, That is,  `opt` of `new MindMap (opt)`
+
+### updateConfig(*opt* = {})
+
+> 0.2.24+
+
+`opt`：Configuration to update
+
+Update config，That is update `opt` of `new MindMap(opt)`，You can only update some data, such as:
+
+```js
+mindMap.updateConfig({
+    enableFreeDrag: true// 开启节点自由拖拽
+})
+```
+
+This method only updates the configuration and has no other side effects, such as triggering canvas re-rendering
+
 ### getLayout()
 
 Gets the current layout structure.

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

@@ -57,7 +57,7 @@ console.log(MindMap.xmind)
 ## 实例化选项
 
 | 字段名称                         | 类型    | 默认值           | 描述                                                         | 是否必填 |
-| ------------------------------ | ------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
+| -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ | -------- |
 | el                               | Element |                  | 容器元素，必须为DOM元素                                      | 是       |
 | data                             | Object  | {}               | 思维导图数据，可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) |          |
 | layout                           | String  | logicalStructure | 布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图） |          |
@@ -72,6 +72,7 @@ console.log(MindMap.xmind)
 | selectTranslateLimit             | Number  | 20               | 多选节点时鼠标移动距边缘多少距离时开始偏移                   |          |
 | customNoteContentShow（v0.1.6+） | Object  | null             | 自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }} |          |
 | readonly（v0.1.7+）              | Boolean | false            | 是否是只读模式                                               |          |
+| enableFreeDrag（v0.2.4+）        | Boolean | false            | 是否开启节点自由拖拽                                         |          |
 
 ## 静态方法
 
@@ -186,6 +187,30 @@ mindMap.setTheme('主题名称')
 
 获取某个主题配置属性值
 
+### getConfig(*prop*)
+
+> 0.2.24+
+
+`prop`：获取指定配置的值，不传则返回整个配置
+
+获取配置，即`new MindMap(opt)`的`opt`
+
+### updateConfig(*opt* = {})
+
+> 0.2.24+
+
+`opt`：要更新的配置
+
+更新配置，即更新`new MindMap(opt)`的`opt`，可以只更新部分数据，比如：
+
+```js
+mindMap.updateConfig({
+    enableFreeDrag: true// 开启节点自由拖拽
+})
+```
+
+该方法只做更新配置的事情，没有其他副作用，比如触发画布重新渲染之类的
+
 ### getLayout()
 
 获取当前的布局结构

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

@@ -299,6 +299,17 @@
           ></el-slider>
         </div>
       </div>
+      <!-- 其他配置 -->
+      <div class="title noTop">{{ $t('baseStyle.otherConfig') }}</div>
+      <div class="row">
+        <div class="rowItem">
+          <el-checkbox v-model="config.enableFreeDrag" @change="
+              value => {
+                updateOtherConfig('enableFreeDrag', value)
+              }
+            ">{{ $t('baseStyle.enableFreeDrag') }}</el-checkbox>
+        </div>
+      </div>
     </div>
   </Sidebar>
 </template>
@@ -354,6 +365,9 @@ export default {
         marginX: 0,
         marginY: 0,
         nodeUseLineStyle: false
+      },
+      config: {
+        enableFreeDrag: false
       }
     }
   },
@@ -372,6 +386,7 @@ export default {
       if (val === 'baseStyle') {
         this.$refs.sidebar.show = true
         this.initStyle()
+        this.initConfig()
       } else {
         this.$refs.sidebar.show = false
       }
@@ -408,6 +423,13 @@ export default {
       this.initMarginStyle()
     },
 
+    // 初始化其他配置
+    initConfig() {
+      ;['enableFreeDrag'].forEach(key => {
+        this.config[key] = this.mindMap.getConfig(key)
+      })
+    },
+
     /**
      * @Author: 王林
      * @Date: 2021-07-03 22:27:32
@@ -442,6 +464,18 @@ export default {
       })
     },
 
+    // 更新其他配置
+    updateOtherConfig(key, value) {
+      this.mindMap.updateConfig({
+        [key]: value
+      })
+      this.data.config = this.data.config || {}
+      this.data.config[key] = value
+      storeConfig({
+        config: this.data.config
+      })
+    },
+
     /**
      * @Author: 王林
      * @Date: 2021-07-03 22:08:12

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

@@ -230,7 +230,7 @@ export default {
      * @Desc: 初始化
      */
     init() {
-      let { root, layout, theme, view } = this.mindMapData
+      let { root, layout, theme, view, config } = this.mindMapData
       this.mindMap = new MindMap({
         el: this.$refs.mindMapContainer,
         data: root,
@@ -245,7 +245,8 @@ export default {
           hide: () => {
             // this.$bus.$emit('hideNoteContent')
           }
-        }
+        },
+        ...(config || {})
       })
       this.mindMap.keyCommand.addShortcut('Control+s', () => {
         this.manualSave()