diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index 9f373ebe..c5b6edc6 100644 --- 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) } // 获取当前主题 diff --git a/simple-mind-map/src/core/event/Event.js b/simple-mind-map/src/core/event/Event.js index 3eb36d51..f1313b37 100644 --- 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) } diff --git a/simple-mind-map/src/parse/xmind.js b/simple-mind-map/src/parse/xmind.js index ed8810c2..90cd5764 100644 --- 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 { // 节点备注 diff --git a/simple-mind-map/src/plugins/ExportXMind.js b/simple-mind-map/src/plugins/ExportXMind.js index 42ea665c..fe40d2aa 100644 --- 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' diff --git a/simple-mind-map/src/plugins/NodeImgAdjust.js b/simple-mind-map/src/plugins/NodeImgAdjust.js index a144c2af..0d6f7951 100644 --- a/simple-mind-map/src/plugins/NodeImgAdjust.js +++ b/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 - targetNode.appendChild(this.handleEl) + this.handleEl.style.display = 'block';// document.body.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 - targetNode.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 } // 设置自定义元素尺寸位置信息 @@ -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;//''; + 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() }) diff --git a/simple-mind-map/src/plugins/RichText.js b/simple-mind-map/src/plugins/RichText.js index 1a640b2e..7563c38b 100644 --- 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() }) @@ -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('
') @@ -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 // 如果是刚创建的节点，那么默认全选，否则普通激活不全选 diff --git a/simple-mind-map/src/svg/btns.js b/simple-mind-map/src/svg/btns.js index 9b132737..a4b67ed0 100644 --- a/simple-mind-map/src/svg/btns.js +++ b/simple-mind-map/src/svg/btns.js @@ -4,11 +4,15 @@ const open = `` +// 删除按钮 +const remove = `` + // 图片调整按钮 const imgAdjust = `` export default { open, close, + remove, imgAdjust } diff --git a/web/src/pages/Edit/Index.vue b/web/src/pages/Edit/Index.vue index bc81551a..685df178 100644 --- a/web/src/pages/Edit/Index.vue +++ b/web/src/pages/Edit/Index.vue @@ -1,5 +1,5 @@