Merge pull request #240 from kalcaddle/main

部分问题修复及细节优化

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)
   }
 
   //  获取当前主题

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)
   }
 

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 {
       // 节点备注

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'

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

@@ -82,8 +82,7 @@ class NodeImgAdjust {
       this.createResizeBtnEl()
     }
     this.setHandleElRect()
-    const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body
+    this.handleEl.style.display = 'block';// document.body.appendChild(this.handleEl)
-    targetNode.appendChild(this.handleEl)
     this.isShowHandleEl = true
   }
 
@@ -91,13 +90,12 @@ class NodeImgAdjust {
   hideHandleEl() {
     if (!this.isShowHandleEl) return
     this.isShowHandleEl = false
-    const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body
+	this.handleEl.style.display = 'none';//document.body.removeChild(this.handleEl)
-    targetNode.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	
   }
 
   // 设置自定义元素尺寸位置信息
@@ -123,6 +121,7 @@ class NodeImgAdjust {
     this.handleEl.style.cssText = `
       pointer-events: none;
       position: fixed;
+	  display:none;
       background-size: cover;
     `
     // 调整按钮元素
@@ -155,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});
+	});
     btnEl.addEventListener('click', e => {
       e.stopPropagation()
     })

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()
       })
@@ -194,7 +194,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>')
@@ -205,6 +210,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
     // 如果是刚创建的节点，那么默认全选，否则普通激活不全选

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
 }

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: {

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.$off('svg_mousedown', this.onMousedown)
-    this.$bus.$on('mouseup', this.onMouseup)
+    this.$bus.$off('mouseup', this.onMouseup)
   },
   methods: {
     ...mapMutations(['setLocalConfig']),

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']),