From da5290e649cc51f9dec457249eca70bf1f2ac2b4 Mon Sep 17 00:00:00 2001 From: warlee <824691958@qq.com> Date: Fri, 4 Aug 2023 21:19:39 +0800 Subject: [PATCH] =?UTF-8?q?###=20=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D=20-?= =?UTF-8?q?=20mindMap.setFullData=E8=AE=BE=E7=BD=AE=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E5=86=85=E5=AE=B9,=E4=B8=BB=E9=A2=98=E4=B8=BA=E6=B7=B1?= =?UTF-8?q?=E8=89=B2=E6=97=B6=E4=B8=BB=E7=95=8C=E9=9D=A2=E6=B2=A1=E6=9C=89?= =?UTF-8?q?=E8=87=AA=E5=8A=A8=E5=88=87=E6=8D=A2=E5=88=B0=E6=B7=B1=E8=89=B2?= =?UTF-8?q?,=E8=A6=81=E7=82=B9=E5=87=BB=E4=B8=BB=E9=A2=98=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E6=89=8D=E5=88=87=E6=8D=A2;=20-=20xmind=20=E9=83=A8?= =?UTF-8?q?=E5=88=86=E8=80=81=E7=89=88=E6=9C=AC=E6=96=87=E4=BB=B6=E8=A7=A3?= =?UTF-8?q?=E6=9E=90=E6=8A=A5=E9=94=99;(xmind=E8=A7=A3=E6=9E=90=E5=AF=BC?= =?UTF-8?q?=E5=87=BA=E7=BB=99=E5=A4=96=E9=83=A8=E5=8F=AF=E7=94=A8)=20-=20?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E8=8A=82=E7=82=B9=E5=9B=BE=E7=89=87=E4=B8=8A?= =?UTF-8?q?=E7=9A=84=E7=BC=A9=E6=94=BE=E6=8C=89=E9=92=AE,=E7=82=B9?= =?UTF-8?q?=E5=87=BB=E5=90=8E=E6=9D=BE=E5=BC=80(=E6=B2=A1=E6=9C=89?= =?UTF-8?q?=E6=8B=96=E6=8B=BD=E7=BC=A9=E6=94=BE),=E5=90=8E=E7=BB=AD?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E7=BC=A9=E6=94=BE=E6=8C=89=E9=92=AE=E9=83=BD?= =?UTF-8?q?=E4=B8=8D=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98;?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### 细节优化 - 右侧边栏展开关闭添加css activeSidebar到container上,方便界面样式自适应调整; - 节点插入图片后无法删除图片(添加贴纸也如此) - 双击节点输入时,输入框样式边框覆盖到完整节点的话会更好; - 双击节点选中文字; - 鼠标中键按住拖拽画布支持(左键拖拽可能误操作在节点上,右键框选, 中键拖拽画布就很完善了); --- simple-mind-map/index.js | 1 + simple-mind-map/src/core/event/Event.js | 9 +++- simple-mind-map/src/parse/xmind.js | 4 +- simple-mind-map/src/plugins/ExportXMind.js | 3 ++ simple-mind-map/src/plugins/NodeImgAdjust.js | 44 +++++++++++++++++-- simple-mind-map/src/plugins/RichText.js | 12 +++-- simple-mind-map/src/svg/btns.js | 4 ++ web/src/pages/Edit/Index.vue | 5 ++- web/src/pages/Edit/components/Contextmenu.vue | 4 +- web/src/pages/Edit/components/Theme.vue | 6 +++ 10 files changed, 79 insertions(+), 13 deletions(-) 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 37fce4b7..753d2ef2 100644 --- 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;//''; + 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}); + }); } // 鼠标按钮按下事件 diff --git a/simple-mind-map/src/plugins/RichText.js b/simple-mind-map/src/plugins/RichText.js index ef74be49..64c6bdcf 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() }) @@ -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('
') @@ -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 // 如果是刚创建的节点，那么默认全选，否则普通激活不全选 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 @@