### 问题修复

- mindMap.setFullData设置文件内容,主题为深色时主界面没有自动切换到深色,要点击主题按钮才切换; - xmind 部分老版本文件解析报错;(xmind解析导出给外部可用) - 点击节点图片上的缩放按钮,点击后松开(没有拖拽缩放),后续图片缩放按钮都不显示问题; ### 细节优化 - 右侧边栏展开关闭添加css activeSidebar到container上,方便界面样式自适应调整; - 节点插入图片后无法删除图片(添加贴纸也如此) - 双击节点输入时,输入框样式边框覆盖到完整节点的话会更好; - 双击节点选中文字; - 鼠标中键按住拖拽画布支持(左键拖拽可能误操作在节点上,右键框选, 中键拖拽画布就很完善了);
2026-02-21 10:27:44 +08:00 · 2023-08-04 21:19:39 +08:00 · 2023-08-04 21:19:39 +08:00 · da5290e649
commit da5290e649
parent 516676b484
10 changed files with 79 additions and 13 deletions
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@ -164,6 +164,7 @@ class MindMap {
    this.renderer.clearAllActive()
    this.opt.theme = theme
    this.render(null, CONSTANTS.CHANGE_THEME)
+	this.emit('view_theme_change', theme)
  }

  //  获取当前主题
--- a/simple-mind-map/src/core/event/Event.js
+++ b/simple-mind-map/src/core/event/Event.js
@ -10,6 +10,7 @@ class Event extends EventEmitter {
    this.mindMap = opt.mindMap
    this.isLeftMousedown = false
    this.isRightMousedown = false
+    this.isMiddleMousedown = false
    this.mousedownPos = {
      x: 0,
      y: 0
@ -92,6 +93,8 @@ class Event extends EventEmitter {
      this.isLeftMousedown = true
    } else if (e.which === 3) {
      this.isRightMousedown = true
+    } else if (e.which === 2) {
+      this.isMiddleMousedown = true
    }
    this.mousedownPos.x = e.clientX
    this.mousedownPos.y = e.clientY
@ -107,9 +110,10 @@ class Event extends EventEmitter {
    this.mousemoveOffset.y = e.clientY - this.mousedownPos.y
    this.emit('mousemove', e, this)
    if (
-      useLeftKeySelectionRightKeyDrag
+      this.isMiddleMousedown ||
+      (useLeftKeySelectionRightKeyDrag
        ? this.isRightMousedown
-        : this.isLeftMousedown
+        : this.isLeftMousedown) 		
    ) {
      e.preventDefault()
      this.emit('drag', e, this)
@ -120,6 +124,7 @@ class Event extends EventEmitter {
  onMouseup(e) {
    this.isLeftMousedown = false
    this.isRightMousedown = false
+    this.isMiddleMousedown = false
    this.emit('mouseup', e, this)
  }

--- a/simple-mind-map/src/parse/xmind.js
+++ b/simple-mind-map/src/parse/xmind.js
@ -123,6 +123,7 @@ const transformOldXmind = content => {
  let elements = data.elements
  let root = null
  let getRoot = arr => {
+	if(!arr) return;
    for (let i = 0; i < arr.length; i++) {
      if (!root && arr[i].name === 'topic') {
        root = arr[i]
@ -142,9 +143,10 @@ const transformOldXmind = content => {
  }
  let walk = (node, newNode) => {
    let nodeElements = node.elements
+	let nodeTitle = getItemByName(nodeElements, 'title');
    newNode.data = {
      // 节点内容
-      text: getItemByName(nodeElements, 'title').elements[0].text
+      text: nodeTitle && nodeTitle.elements && nodeTitle.elements[0].text
    }
    try {
      // 节点备注
--- a/simple-mind-map/src/plugins/ExportXMind.js
+++ b/simple-mind-map/src/plugins/ExportXMind.js
@ -12,6 +12,9 @@ class ExportXMind {
    const zipData = await xmind.transformToXmind(data, name)
    return zipData
  }
+  getXmind(){
+	return xmind;
+  }
 }

 ExportXMind.instanceName = 'doExportXMind'
--- a/simple-mind-map/src/plugins/NodeImgAdjust.js
+++ b/simple-mind-map/src/plugins/NodeImgAdjust.js
@ -82,7 +82,7 @@ class NodeImgAdjust {
      this.createResizeBtnEl()
    }
    this.setHandleElRect()
-    document.body.appendChild(this.handleEl)
+    this.handleEl.style.display = 'block';// document.body.appendChild(this.handleEl)
    this.isShowHandleEl = true
  }

@ -90,12 +90,12 @@ class NodeImgAdjust {
  hideHandleEl() {
    if (!this.isShowHandleEl) return
    this.isShowHandleEl = false
-    document.body.removeChild(this.handleEl)
+	this.handleEl.style.display = 'none';//document.body.removeChild(this.handleEl)
    this.handleEl.style.backgroundImage = ``
    this.handleEl.style.width = 0
    this.handleEl.style.height = 0
    this.handleEl.style.left = 0
-    this.handleEl.style.top = 0
+    this.handleEl.style.top = 0	
  }

  // 设置自定义元素尺寸位置信息
@ -121,6 +121,7 @@ class NodeImgAdjust {
    this.handleEl.style.cssText = `
      pointer-events: none;
      position: fixed;
+	  display:none;
      background-size: cover;
    `
    // 调整按钮元素
@ -153,6 +154,43 @@ class NodeImgAdjust {
    btnEl.addEventListener('mousedown', e => {
      this.onMousedown(e)
    })
+	btnEl.addEventListener('mouseup', e => {
+		setTimeout(() => { //点击后直接松开异常处理; 其他事件响应之后处理
+			this.hideHandleEl()
+			this.isAdjusted = false;
+		},0);
+	})
+	
+	
+	document.body.appendChild(this.handleEl);
+	this.handleEl.className = 'node-img-handle';
+	btnEl.className = 'node-image-resize';
+	
+	const btnRemove = document.createElement('div');
+	this.handleEl.prepend(btnRemove);
+	btnRemove.className = 'node-image-remove';
+	btnRemove.innerHTML = btnsSvg.remove;//'<span class="image-remove el-icon-close"></span>';
+	btnRemove.style.cssText = `
+	position: absolute;
+	right: 0;top:0;color:#fff;
+	pointer-events: auto;
+	background-color: rgba(0, 0, 0, 0.3);
+	width: ${this.resizeBtnSize}px;
+	height: ${this.resizeBtnSize}px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;`;
+	btnRemove.addEventListener('mouseenter', e => {
+		this.showHandleEl()
+	})
+	btnRemove.addEventListener('mouseleave', e => {
+		if (this.isMousedown) return
+		this.hideHandleEl()
+	})
+	btnRemove.addEventListener('click', e => {
+		this.mindMap.execCommand('SET_NODE_IMAGE',this.node,{url:null});
+	});
  }

  // 鼠标按钮按下事件
--- a/simple-mind-map/src/plugins/RichText.js
+++ b/simple-mind-map/src/plugins/RichText.js
@ -163,12 +163,12 @@ class RichText {
    let scaleX = rect.width / originWidth
    let scaleY = rect.height / originHeight
    // 内边距
-    const paddingX = 6
+    const paddingX = 14;// 6=>14
    const paddingY = 4
    if (!this.textEditNode) {
      this.textEditNode = document.createElement('div')
      this.textEditNode.classList.add('smm-richtext-node-edit-wrap')
-      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;padding: ${paddingY}px ${paddingX}px;`
+      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;outline: none; word-break: break-all;padding: ${paddingY}px ${paddingX}px;`
      this.textEditNode.addEventListener('click', e => {
        e.stopPropagation()
      })
@ -190,7 +190,12 @@ class RichText {
    this.textEditNode.style.maxWidth =
      this.mindMap.opt.textAutoWrapWidth + paddingX * 2 + 'px'
    this.textEditNode.style.transform = `scale(${scaleX}, ${scaleY})`
-    this.textEditNode.style.transformOrigin = 'left top'
+    this.textEditNode.style.transformOrigin = 'left top'	
+	this.textEditNode.style.borderRadius = (node.style.merge('borderRadius') || 5) + 'px'
+	if(node.style.merge('shape') == 'roundedRectangle'){
+		this.textEditNode.style.borderRadius = '50px';
+	}
+	
    if (!node.nodeData.data.richText) {
      // 还不是富文本的情况
      let text = node.nodeData.data.text.split(/\n/gim).join('<br>')
@ -201,6 +206,7 @@ class RichText {
        this.cacheEditingText || node.nodeData.data.text
    }
    this.initQuillEditor()
+	setTimeout(() => {this.selectAll();}, 0); // 双击选中
    document.querySelector('.ql-editor').style.minHeight = originHeight + 'px'
    this.showTextEdit = true
    // 如果是刚创建的节点，那么默认全选，否则普通激活不全选
--- a/simple-mind-map/src/svg/btns.js
+++ b/simple-mind-map/src/svg/btns.js
@ -4,11 +4,15 @@ const open = `<svg t="1618141562310" class="icon" viewBox="0 0 1024 1024" versio
 //  收缩按钮
 const close = `<svg t="1618141589243" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13611" width="200" height="200"><path d="M512 105.472c225.28 0 407.04 181.76 407.04 407.04s-181.76 407.04-407.04 407.04-407.04-181.76-407.04-407.04 181.76-407.04 407.04-407.04z m0-74.24c-265.216 0-480.768 215.552-480.768 480.768s215.552 480.768 480.768 480.768 480.768-215.552 480.768-480.768-215.552-480.768-480.768-480.768z" p-id="13612"></path><path d="M252.928 474.624h518.144v74.24h-518.144z" p-id="13613"></path></svg>`

+// 删除按钮
+const remove = `<svg width="14px" height="14px" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13611" width="200" height="200"><path fill="#ffffff" d="M512 105.472c225.28 0 407.04 181.76 407.04 407.04s-181.76 407.04-407.04 407.04-407.04-181.76-407.04-407.04 181.76-407.04 407.04-407.04z m0-74.24c-265.216 0-480.768 215.552-480.768 480.768s215.552 480.768 480.768 480.768 480.768-215.552 480.768-480.768-215.552-480.768-480.768-480.768z" p-id="13612"></path><path fill="#ffffff" d="M252.928 474.624h518.144v74.24h-518.144z" p-id="13613"></path></svg>`
+
 // 图片调整按钮
 const imgAdjust = `<svg width="12px" height="12px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M1008.128 614.4a25.6 25.6 0 0 0-27.648 5.632l-142.848 142.848L259.072 186.88 401.92 43.52A25.6 25.6 0 0 0 384 0h-358.4a25.6 25.6 0 0 0-25.6 25.6v358.4a25.6 25.6 0 0 0 43.52 17.92l143.36-142.848 578.048 578.048-142.848 142.848a25.6 25.6 0 0 0 17.92 43.52h358.4a25.6 25.6 0 0 0 25.6-25.6v-358.4a25.6 25.6 0 0 0-15.872-25.088z"  /></svg>`

 export default {
  open,
  close,
+  remove,
  imgAdjust
 }
--- a/web/src/pages/Edit/Index.vue
+++ b/web/src/pages/Edit/Index.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="container" :class="{ isDark: isDark }">
+  <div class="container" :class="{ isDark: isDark,activeSidebar:activeSidebar}">
    <template v-if="show">
      <Toolbar v-if="!isZenMode"></Toolbar>
      <Edit></Edit>
@ -27,7 +27,8 @@ export default {
  computed: {
    ...mapState({
      isZenMode: state => state.localConfig.isZenMode,
-      isDark: state => state.isDark
+      isDark: state => state.isDark,
+	  activeSidebar: state => state.activeSidebar
    })
  },
  watch: {
--- a/web/src/pages/Edit/components/Contextmenu.vue
+++ b/web/src/pages/Edit/components/Contextmenu.vue
@ -184,8 +184,8 @@ export default {
    this.$bus.$off('node_click', this.hide)
    this.$bus.$off('draw_click', this.hide)
    this.$bus.$off('expand_btn_click', this.hide)
-    this.$bus.$on('svg_mousedown', this.onMousedown)
-    this.$bus.$on('mouseup', this.onMouseup)
+    this.$bus.$off('svg_mousedown', this.onMousedown)
+    this.$bus.$off('mouseup', this.onMouseup)
  },
  methods: {
    ...mapMutations(['setLocalConfig']),
--- a/web/src/pages/Edit/components/Theme.vue
+++ b/web/src/pages/Edit/components/Theme.vue
@ -76,6 +76,12 @@ export default {
    this.initGroup()
    this.theme = this.mindMap.getTheme()
    this.handleDark()
+  
+    var self = this;
+    this.mindMap.on('view_theme_change',function(){
+      self.theme = self.mindMap.getTheme()
+      self.handleDark()
+    });
  },
  methods: {
    ...mapMutations(['setIsDark']),