From 4b59bec01cf4a8c301354f69408c2a2ffabb4f09 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Mon, 7 Aug 2023 17:05:47 +0800 Subject: [PATCH] =?UTF-8?q?Demo=EF=BC=9A=E4=BC=98=E5=8C=96=E7=95=8C?= =?UTF-8?q?=E9=9D=A2=E6=9A=97=E9=BB=91=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/src/parse/xmind.js | 4 +- simple-mind-map/src/plugins/ExportXMind.js | 6 +- simple-mind-map/src/plugins/NodeImgAdjust.js | 88 +++++++++---------- simple-mind-map/src/plugins/RichText.js | 12 +-- web/src/lang/en_us.js | 5 +- web/src/lang/zh_cn.js | 5 +- web/src/pages/Edit/Index.vue | 35 ++++---- web/src/pages/Edit/components/BaseStyle.vue | 8 +- web/src/pages/Edit/components/Outline.vue | 26 ++++++ web/src/pages/Edit/components/OutlineEdit.vue | 13 ++- .../pages/Edit/components/OutlineSidebar.vue | 12 ++- web/src/pages/Edit/components/Theme.vue | 41 ++++++--- 12 files changed, 163 insertions(+), 92 deletions(-) diff --git a/simple-mind-map/src/parse/xmind.js b/simple-mind-map/src/parse/xmind.js index 90cd5764..cdb752d2 100644 --- a/simple-mind-map/src/parse/xmind.js +++ b/simple-mind-map/src/parse/xmind.js @@ -123,7 +123,7 @@ const transformOldXmind = content => { let elements = data.elements let root = null let getRoot = arr => { - if(!arr) return; + if (!arr) return for (let i = 0; i < arr.length; i++) { if (!root && arr[i].name === 'topic') { root = arr[i] @@ -143,7 +143,7 @@ const transformOldXmind = content => { } let walk = (node, newNode) => { let nodeElements = node.elements - let nodeTitle = getItemByName(nodeElements, 'title'); + let nodeTitle = getItemByName(nodeElements, 'title') newNode.data = { // 节点内容 text: nodeTitle && nodeTitle.elements && nodeTitle.elements[0].text diff --git a/simple-mind-map/src/plugins/ExportXMind.js b/simple-mind-map/src/plugins/ExportXMind.js index fe40d2aa..aeccf60c 100644 --- a/simple-mind-map/src/plugins/ExportXMind.js +++ b/simple-mind-map/src/plugins/ExportXMind.js @@ -12,8 +12,10 @@ class ExportXMind { const zipData = await xmind.transformToXmind(data, name) return zipData } - getXmind(){ - return xmind; + + // 获取解析器 + getXmind() { + return xmind } } diff --git a/simple-mind-map/src/plugins/NodeImgAdjust.js b/simple-mind-map/src/plugins/NodeImgAdjust.js index 0d6f7951..4999f4bc 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() - this.handleEl.style.display = 'block';// document.body.appendChild(this.handleEl) + this.handleEl.style.display = 'block' this.isShowHandleEl = true } @@ -90,12 +90,12 @@ class NodeImgAdjust { hideHandleEl() { if (!this.isShowHandleEl) return this.isShowHandleEl = false - this.handleEl.style.display = 'none';//document.body.removeChild(this.handleEl) + this.handleEl.style.display = 'none' 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,9 +121,10 @@ class NodeImgAdjust { this.handleEl.style.cssText = ` pointer-events: none; position: fixed; - display:none; + display:none; background-size: cover; ` + this.handleEl.className = 'node-img-handle' // 调整按钮元素 const btnEl = document.createElement('div') btnEl.innerHTML = btnsSvg.imgAdjust @@ -140,7 +141,7 @@ class NodeImgAdjust { align-items: center; cursor: nwse-resize; ` - this.handleEl.appendChild(btnEl) + btnEl.className = 'node-image-resize' // 给按钮元素绑定事件 btnEl.addEventListener('mouseenter', () => { // 移入按钮，会触发节点图片的移出事件，所以需要再次显示按钮 @@ -152,51 +153,50 @@ class NodeImgAdjust { this.hideHandleEl() }) btnEl.addEventListener('mousedown', e => { + e.stopPropagation() 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('mouseup', e => { + setTimeout(() => { + //点击后直接松开异常处理; 其他事件响应之后处理 + this.hideHandleEl() + this.isAdjusted = false + }, 0) + }) btnEl.addEventListener('click', e => { e.stopPropagation() }) - btnEl.addEventListener('mousedown', (e) => { - e.stopPropagation() + this.handleEl.appendChild(btnEl) + // 删除按钮 + 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 }) + }) + // 添加元素到页面 + const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body + targetNode.appendChild(this.handleEl) } // 鼠标按钮按下事件 diff --git a/simple-mind-map/src/plugins/RichText.js b/simple-mind-map/src/plugins/RichText.js index 7563c38b..1a640b2e 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 = 14;// 6=>14 + const paddingX = 6 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;outline: none; word-break: break-all;padding: ${paddingY}px ${paddingX}px;` + 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.addEventListener('click', e => { e.stopPropagation() }) @@ -194,12 +194,7 @@ 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.borderRadius = (node.style.merge('borderRadius') || 5) + 'px' - if(node.style.merge('shape') == 'roundedRectangle'){ - this.textEditNode.style.borderRadius = '50px'; - } - + this.textEditNode.style.transformOrigin = 'left top' if (!node.nodeData.data.richText) { // 还不是富文本的情况 let text = node.nodeData.data.text.split(/\n/gim).join('
') @@ -210,7 +205,6 @@ 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/web/src/lang/en_us.js b/web/src/lang/en_us.js index 6aa781d4..561ee635 100644 --- a/web/src/lang/en_us.js +++ b/web/src/lang/en_us.js @@ -47,7 +47,10 @@ export default { mousewheelZoomActionReverse: 'Mouse Wheel Zoom', mousewheelZoomActionReverse1: 'Zoom out forward and zoom in back', mousewheelZoomActionReverse2: 'Zoom in forward and zoom out back', - rootStyle: 'Root Node' + rootStyle: 'Root Node', + associativeLineText: 'Associative line text', + fontFamily: 'Font family', + fontSize: 'Font size' }, color: { moreColor: 'More color' diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js index 2abef680..1808366f 100644 --- a/web/src/lang/zh_cn.js +++ b/web/src/lang/zh_cn.js @@ -47,7 +47,10 @@ export default { mousewheelZoomActionReverse: '鼠标滚轮缩放', mousewheelZoomActionReverse1: '向前缩小向后放大', mousewheelZoomActionReverse2: '向前放大向后缩小', - rootStyle: '根节点' + rootStyle: '根节点', + associativeLineText: '关联线文字', + fontFamily: '字体', + fontSize: '字号' }, color: { moreColor: '更多颜色' diff --git a/web/src/pages/Edit/Index.vue b/web/src/pages/Edit/Index.vue index 685df178..60595d8f 100644 --- a/web/src/pages/Edit/Index.vue +++ b/web/src/pages/Edit/Index.vue @@ -1,5 +1,8 @@