+ 
+
+
+# 请作者喝杯咖啡
+
+> 厚椰乳一盒 + 纯牛奶半盒 + 冰块 + 咖啡液 = 生椰拿铁 yyds
+
+> 转账请备注哦~你的头像和名称会出现在[文档页面](https://wanglin2.github.io/mind-map/#/doc/zh/introduction/%E8%AF%B7%E4%BD%9C%E8%80%85%E5%96%9D%E6%9D%AF%E5%92%96%E5%95%A1)
+
+
+
+
+
${text}
` } diff --git a/simple-mind-map/src/utils/nodeExpandBtn.js b/simple-mind-map/src/core/render/node/nodeExpandBtn.js similarity index 98% rename from simple-mind-map/src/utils/nodeExpandBtn.js rename to simple-mind-map/src/core/render/node/nodeExpandBtn.js index 650417b5..5b2675cd 100644 --- a/simple-mind-map/src/utils/nodeExpandBtn.js +++ b/simple-mind-map/src/core/render/node/nodeExpandBtn.js @@ -1,4 +1,4 @@ -import btnsSvg from '../svg/btns' +import btnsSvg from '../../../svg/btns' import { SVG, Circle, G } from '@svgdotjs/svg.js' // 创建展开收起按钮的内容节点 diff --git a/simple-mind-map/src/utils/nodeGeneralization.js b/simple-mind-map/src/core/render/node/nodeGeneralization.js similarity index 99% rename from simple-mind-map/src/utils/nodeGeneralization.js rename to simple-mind-map/src/core/render/node/nodeGeneralization.js index 6521de97..2a2a585d 100644 --- a/simple-mind-map/src/utils/nodeGeneralization.js +++ b/simple-mind-map/src/core/render/node/nodeGeneralization.js @@ -1,4 +1,4 @@ -import Node from '../Node' +import Node from './Node' // 检查是否存在概要 function checkHasGeneralization () { diff --git a/simple-mind-map/src/View.js b/simple-mind-map/src/core/view/View.js similarity index 65% rename from simple-mind-map/src/View.js rename to simple-mind-map/src/core/view/View.js index ffe2599f..98df7ee0 100644 --- a/simple-mind-map/src/View.js +++ b/simple-mind-map/src/core/view/View.js @@ -1,4 +1,4 @@ -import { CONSTANTS } from './utils/constant' +import { CONSTANTS } from '../../constants/constant' // 视图操作类 class View { @@ -28,6 +28,9 @@ class View { this.mindMap.keyCommand.addShortcut('Control+Enter', () => { this.reset() }) + this.mindMap.keyCommand.addShortcut('Control+i', () => { + this.fit() + }) this.mindMap.svg.on('dblclick', () => { this.reset() }) @@ -56,11 +59,16 @@ class View { this.firstDrag = true }) // 放大缩小视图 - this.mindMap.event.on('mousewheel', (e, dir) => { - if (this.mindMap.opt.customHandleMousewheel && typeof this.mindMap.opt.customHandleMousewheel === 'function') { + this.mindMap.event.on('mousewheel', (e, dir, event, isTouchPad) => { + if ( + this.mindMap.opt.customHandleMousewheel && + typeof this.mindMap.opt.customHandleMousewheel === 'function' + ) { return this.mindMap.opt.customHandleMousewheel(e) } - if (this.mindMap.opt.mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM) { + if ( + this.mindMap.opt.mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM + ) { switch (dir) { // 鼠标滚轮，向上和向左，都是缩小 case CONSTANTS.DIR.UP: @@ -74,22 +82,26 @@ class View { break } } else { - switch (dir){ + let step = this.mindMap.opt.mousewheelMoveStep + if (isTouchPad) { + step = 5 + } + switch (dir) { // 上移 case CONSTANTS.DIR.DOWN: - this.translateY(-this.mindMap.opt.mousewheelMoveStep) + this.translateY(-step) break // 下移 case CONSTANTS.DIR.UP: - this.translateY(this.mindMap.opt.mousewheelMoveStep) + this.translateY(step) break // 右移 case CONSTANTS.DIR.LEFT: - this.translateX(-this.mindMap.opt.mousewheelMoveStep) + this.translateX(-step) break // 左移 case CONSTANTS.DIR.RIGHT: - this.translateX(this.mindMap.opt.mousewheelMoveStep) + this.translateX(step) break } } @@ -201,6 +213,56 @@ class View { this.transform() this.mindMap.emit('scale', this.scale) } + + // 适应画布大小 + fit() { + let { fitPadding } = this.mindMap.opt + let draw = this.mindMap.draw + let origTransform = draw.transform() + let rect = draw.rbox() + let drawWidth = rect.width / origTransform.scaleX + let drawHeight = rect.height / origTransform.scaleY + let drawRatio = drawWidth / drawHeight + let { width: elWidth, height: elHeight } = + this.mindMap.el.getBoundingClientRect() + elWidth = elWidth - fitPadding * 2 + elHeight = elHeight - fitPadding * 2 + let elRatio = elWidth / elHeight + let newScale = 0 + let flag = '' + if (drawWidth <= elWidth && drawHeight <= elHeight) { + newScale = 1 + flag = 1 + } else { + let newWidth = 0 + let newHeight = 0 + if (drawRatio > elRatio) { + newWidth = elWidth + newHeight = elWidth / drawRatio + flag = 2 + } else { + newHeight = elHeight + newWidth = elHeight * drawRatio + flag = 3 + } + newScale = newWidth / drawWidth + } + this.setScale(newScale) + let newRect = draw.rbox() + let newX = 0 + let newY = 0 + if (flag === 1) { + newX = -newRect.x + fitPadding + (elWidth - newRect.width) / 2 + newY = -newRect.y + fitPadding + (elHeight - newRect.height) / 2 + } else if (flag === 2) { + newX = -newRect.x + fitPadding + newY = -newRect.y + fitPadding + (elHeight - newRect.height) / 2 + } else if (flag === 3) { + newX = -newRect.x + fitPadding + (elWidth - newRect.width) / 2 + newY = -newRect.y + fitPadding + } + this.translateXY(newX, newY) + } } export default View diff --git a/simple-mind-map/src/layouts/Base.js b/simple-mind-map/src/layouts/Base.js index e51b72d5..701fffbf 100644 --- a/simple-mind-map/src/layouts/Base.js +++ b/simple-mind-map/src/layouts/Base.js @@ -1,5 +1,5 @@ -import Node from '../Node' -import { CONSTANTS, initRootNodePositionMap } from '../utils/constant' +import Node from '../core/render/node/Node' +import { CONSTANTS, initRootNodePositionMap } from '../constants/constant' import Lru from '../utils/Lru' // 布局基类 diff --git a/simple-mind-map/src/layouts/Fishbone.js b/simple-mind-map/src/layouts/Fishbone.js index 58e70932..e8581852 100644 --- a/simple-mind-map/src/layouts/Fishbone.js +++ b/simple-mind-map/src/layouts/Fishbone.js @@ -1,6 +1,6 @@ import Base from './Base' import { walk, asyncRun, degToRad } from '../utils' -import { CONSTANTS } from '../utils/constant' +import { CONSTANTS } from '../constants/constant' import utils from './fishboneUtils' // 鱼骨图 diff --git a/simple-mind-map/src/layouts/Timeline.js b/simple-mind-map/src/layouts/Timeline.js index 0e426cf6..60a41db2 100644 --- a/simple-mind-map/src/layouts/Timeline.js +++ b/simple-mind-map/src/layouts/Timeline.js @@ -1,6 +1,6 @@ import Base from './Base' import { walk, asyncRun } from '../utils' -import { CONSTANTS } from '../utils/constant' +import { CONSTANTS } from '../constants/constant' // 时间轴 class Timeline extends Base { diff --git a/simple-mind-map/src/AssociativeLine.js b/simple-mind-map/src/plugins/AssociativeLine.js similarity index 96% rename from simple-mind-map/src/AssociativeLine.js rename to simple-mind-map/src/plugins/AssociativeLine.js index c365a8de..28223265 100644 --- a/simple-mind-map/src/AssociativeLine.js +++ b/simple-mind-map/src/plugins/AssociativeLine.js @@ -1,4 +1,4 @@ -import { walk, bfsWalk, throttle } from './utils/' +import { walk, bfsWalk, throttle } from '../utils' import { v4 as uuid } from 'uuid' import { getAssociativeLineTargetIndex, @@ -7,9 +7,9 @@ import { getNodePoint, computeNodePoints, getNodeLinePath -} from './utils/associativeLineUtils' -import associativeLineControlsMethods from './utils/associativeLineControls' -import associativeLineTextMethods from './utils/associativeLineText' +} from './associativeLine/associativeLineUtils' +import associativeLineControlsMethods from './associativeLine/associativeLineControls' +import associativeLineTextMethods from './associativeLine/associativeLineText' // 关联线类 class AssociativeLine { @@ -91,12 +91,7 @@ class AssociativeLine { this.mindMap.on('node_dragging', this.onNodeDragging.bind(this)) this.mindMap.on('node_dragend', this.onNodeDragend.bind(this)) // 拖拽控制点 - window.addEventListener('mousemove', e => { - this.onControlPointMousemove(e) - }) - window.addEventListener('mouseup', e => { - this.onControlPointMouseup(e) - }) + this.mindMap.on('mouseup', this.onControlPointMouseup.bind(this)) // 缩放事件 this.mindMap.on('scale', this.onScale) } @@ -266,12 +261,13 @@ class AssociativeLine { // 鼠标移动事件 onMousemove(e) { - if (!this.isCreatingLine) return + this.onControlPointMousemove(e) this.updateCreatingLine(e) } // 更新创建过程中的连接线 updateCreatingLine(e) { + if (!this.isCreatingLine) return let { x, y } = this.getTransformedEventPos(e) let startPoint = getNodePoint(this.creatingStartNode) let offsetX = x > startPoint.x ? -10 : 10 diff --git a/simple-mind-map/src/Drag.js b/simple-mind-map/src/plugins/Drag.js similarity index 99% rename from simple-mind-map/src/Drag.js rename to simple-mind-map/src/plugins/Drag.js index ffadf0c5..d85ea667 100644 --- a/simple-mind-map/src/Drag.js +++ b/simple-mind-map/src/plugins/Drag.js @@ -1,5 +1,5 @@ -import { bfsWalk, throttle } from './utils' -import Base from './layouts/Base' +import { bfsWalk, throttle } from '../utils' +import Base from '../layouts/Base' // 节点拖动类 diff --git a/simple-mind-map/src/Export.js b/simple-mind-map/src/plugins/Export.js similarity index 84% rename from simple-mind-map/src/Export.js rename to simple-mind-map/src/plugins/Export.js index cbf3a639..5186ffe8 100644 --- a/simple-mind-map/src/Export.js +++ b/simple-mind-map/src/plugins/Export.js @@ -1,9 +1,7 @@ -import { imgToDataUrl, downloadFile, readBlob } from './utils' -import JsPDF from 'jspdf' +import { imgToDataUrl, downloadFile, readBlob } from '../utils' import { SVG } from '@svgdotjs/svg.js' -import drawBackgroundImageToCanvas from './utils/simulateCSSBackgroundInCanvas' -import { transformToMarkdown } from './parse/toMarkdown' -const URL = window.URL || window.webkitURL || window +import drawBackgroundImageToCanvas from '../utils/simulateCSSBackgroundInCanvas' +import { transformToMarkdown } from '../parse/toMarkdown' // 导出类 class Export { @@ -175,34 +173,11 @@ class Export { // 导出为pdf async pdf(name) { - let img = await this.png() - let pdf = new JsPDF('', 'pt', 'a4') - let a4Width = 595 - let a4Height = 841 - let a4Ratio = a4Width / a4Height - let image = new Image() - image.onload = () => { - let imageWidth = image.width - let imageHeight = image.height - let imageRatio = imageWidth / imageHeight - let w, h - if (imageWidth <= a4Width && imageHeight <= a4Height) { - // 使用图片原始宽高 - w = imageWidth - h = imageHeight - } else if (a4Ratio > imageRatio) { - // 以a4Height为高度，缩放图片宽度 - w = imageRatio * a4Height - h = a4Height - } else { - // 以a4Width为宽度，缩放图片高度 - w = a4Width - h = a4Width / imageRatio - } - pdf.addImage(img, 'PNG', (a4Width - w) / 2, (a4Height - h) / 2, w, h) - pdf.save(name) + if (!this.mindMap.doExportPDF) { + throw new Error('请注册ExportPDF插件') } - image.src = img + let img = await this.png() + this.mindMap.doExportPDF.pdf(name, img) } // 导出为svg diff --git a/simple-mind-map/src/plugins/ExportPDF.js b/simple-mind-map/src/plugins/ExportPDF.js new file mode 100644 index 00000000..2fcc254d --- /dev/null +++ b/simple-mind-map/src/plugins/ExportPDF.js @@ -0,0 +1,44 @@ +import JsPDF from 'jspdf' + +// 导出PDF类，需要通过Export插件使用 +class ExportPDF { + // 构造函数 + constructor(opt) { + this.mindMap = opt.mindMap + } + + // 导出为pdf + pdf(name, img) { + let pdf = new JsPDF('', 'pt', 'a4') + let a4Width = 595 + let a4Height = 841 + let a4Ratio = a4Width / a4Height + let image = new Image() + image.onload = () => { + let imageWidth = image.width + let imageHeight = image.height + let imageRatio = imageWidth / imageHeight + let w, h + if (imageWidth <= a4Width && imageHeight <= a4Height) { + // 使用图片原始宽高 + w = imageWidth + h = imageHeight + } else if (a4Ratio > imageRatio) { + // 以a4Height为高度，缩放图片宽度 + w = imageRatio * a4Height + h = a4Height + } else { + // 以a4Width为宽度，缩放图片高度 + w = a4Width + h = a4Width / imageRatio + } + pdf.addImage(img, 'PNG', (a4Width - w) / 2, (a4Height - h) / 2, w, h) + pdf.save(name) + } + image.src = img + } +} + +ExportPDF.instanceName = 'doExportPDF' + +export default ExportPDF diff --git a/simple-mind-map/src/KeyboardNavigation.js b/simple-mind-map/src/plugins/KeyboardNavigation.js similarity index 98% rename from simple-mind-map/src/KeyboardNavigation.js rename to simple-mind-map/src/plugins/KeyboardNavigation.js index c5adf041..cdbf95f2 100644 --- a/simple-mind-map/src/KeyboardNavigation.js +++ b/simple-mind-map/src/plugins/KeyboardNavigation.js @@ -1,5 +1,5 @@ -import { bfsWalk } from './utils' -import { CONSTANTS } from './utils/constant' +import { bfsWalk } from '../utils' +import { CONSTANTS } from '../constants/constant' // 键盘导航类 class KeyboardNavigation { diff --git a/simple-mind-map/src/MiniMap.js b/simple-mind-map/src/plugins/MiniMap.js similarity index 100% rename from simple-mind-map/src/MiniMap.js rename to simple-mind-map/src/plugins/MiniMap.js diff --git a/simple-mind-map/src/RichText.js b/simple-mind-map/src/plugins/RichText.js similarity index 82% rename from simple-mind-map/src/RichText.js rename to simple-mind-map/src/plugins/RichText.js index 227f701e..47cc9ecd 100644 --- a/simple-mind-map/src/RichText.js +++ b/simple-mind-map/src/plugins/RichText.js @@ -1,8 +1,8 @@ import Quill from 'quill' import 'quill/dist/quill.snow.css' import html2canvas from 'html2canvas' -import { walk, getTextFromHtml } from './utils' -import { CONSTANTS } from './utils/constant' +import { walk, getTextFromHtml } from '../utils' +import { CONSTANTS } from '../constants/constant' let extended = false @@ -41,9 +41,12 @@ class RichText { this.node = null this.styleEl = null this.cacheEditingText = '' + this.lostStyle = false + this.isCompositing = false this.initOpt() this.extendQuill() this.appendCss() + this.bindEvent() // 处理数据，转成富文本格式 if (this.mindMap.opt.data) { @@ -51,6 +54,20 @@ class RichText { } } + // 绑定事件 + bindEvent() { + this.onCompositionStart = this.onCompositionStart.bind(this) + this.onCompositionEnd = this.onCompositionEnd.bind(this) + window.addEventListener('compositionstart', this.onCompositionStart) + window.addEventListener('compositionend', this.onCompositionEnd) + } + + // 解绑事件 + unbindEvent() { + window.removeEventListener('compositionstart', this.onCompositionStart) + window.removeEventListener('compositionend', this.onCompositionEnd) + } + // 插入样式 appendCss() { let cssText = ` @@ -59,6 +76,7 @@ class RichText { padding: 0; height: auto; line-height: normal; + -webkit-user-select: text; } .ql-container { @@ -159,13 +177,15 @@ class RichText { this.textEditNode.style.marginLeft = `-${paddingX * scaleX}px` this.textEditNode.style.marginTop = `-${paddingY * scaleY}px` this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex - this.textEditNode.style.backgroundColor = bgColor === 'transparent' ? '#fff' : bgColor + this.textEditNode.style.backgroundColor = + bgColor === 'transparent' ? '#fff' : bgColor this.textEditNode.style.minWidth = originWidth + paddingX * 2 + 'px' this.textEditNode.style.minHeight = originHeight + 'px' this.textEditNode.style.left = rect.left + 'px' this.textEditNode.style.top = rect.top + 'px' this.textEditNode.style.display = 'block' - this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + paddingX * 2 + 'px' + this.textEditNode.style.maxWidth = + this.mindMap.opt.textAutoWrapWidth + paddingX * 2 + 'px' this.textEditNode.style.transform = `scale(${scaleX}, ${scaleY})` this.textEditNode.style.transformOrigin = 'left top' if (!node.nodeData.data.richText) { @@ -174,7 +194,8 @@ class RichText { let html = `${text}
` this.textEditNode.innerHTML = this.cacheEditingText || html } else { - this.textEditNode.innerHTML = this.cacheEditingText || node.nodeData.data.text + this.textEditNode.innerHTML = + this.cacheEditingText || node.nodeData.data.text } this.initQuillEditor() document.querySelector('.ql-editor').style.minHeight = originHeight + 'px' @@ -198,7 +219,7 @@ class RichText { underline: node.style.merge('textDecoration') === 'underline', strike: node.style.merge('textDecoration') === 'line-through' } - this.formatAllText(style) + this.pureFormatAllText(style) } // 获取当前正在编辑的内容 @@ -214,7 +235,8 @@ class RichText { return } let html = this.getEditText() - let list = nodes && nodes.length > 0 ? nodes : this.mindMap.renderer.activeNodeList + let list = + nodes && nodes.length > 0 ? nodes : this.mindMap.renderer.activeNodeList list.forEach(node => { this.mindMap.execCommand('SET_NODE_TEXT', node, html, true) if (node.isGeneralization) { @@ -223,11 +245,7 @@ class RichText { } this.mindMap.render() }) - this.mindMap.emit( - 'hide_text_edit', - this.textEditNode, - list - ) + this.mindMap.emit('hide_text_edit', this.textEditNode, list) this.textEditNode.style.display = 'none' this.showTextEdit = false this.mindMap.emit('rich_text_selection_change', false) @@ -281,6 +299,37 @@ class RichText { ) } }) + this.quill.on('text-change', () => { + let contents = this.quill.getContents() + let len = contents.ops.length + // 如果编辑过程中删除所有字符，那么会丢失主题的样式 + if (len <= 0 || (len === 1 && contents.ops[0].insert === '\n')) { + this.lostStyle = true + // 需要删除节点的样式数据 + this.syncFormatToNodeConfig(null, true) + } else if (this.lostStyle && !this.isCompositing) { + // 如果处于样式丢失状态，那么需要进行格式化加回样式 + this.setTextStyleIfNotRichText(this.node) + this.lostStyle = false + } + }) + } + + // 正则输入中文 + onCompositionStart() { + if (!this.showTextEdit) { + return + } + this.isCompositing = true + } + + // 中文输入结束 + onCompositionEnd() { + if (!this.showTextEdit || !this.lostStyle) { + return + } + this.isCompositing = false + this.setTextStyleIfNotRichText(this.node) } // 选中全部 @@ -300,7 +349,9 @@ class RichText { this.syncFormatToNodeConfig(config, clear) let rangeLost = !this.range let range = rangeLost ? this.lastRange : this.range - clear ? this.quill.removeFormat(range.index, range.length) : this.quill.formatText(range.index, range.length, config) + clear + ? this.quill.removeFormat(range.index, range.length) + : this.quill.formatText(range.index, range.length, config) if (rangeLost) { this.quill.setSelection(this.lastRange.index, this.lastRange.length) } @@ -321,6 +372,11 @@ class RichText { // 格式化所有文本 formatAllText(config = {}) { this.syncFormatToNodeConfig(config) + this.pureFormatAllText(config) + } + + // 纯粹的格式化所有文本 + pureFormatAllText(config = {}) { this.quill.formatText(0, this.quill.getLength(), config) } @@ -329,7 +385,14 @@ class RichText { if (!this.node) return if (clear) { // 清除文本样式 - ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'textDecoration', 'color'].forEach((prop) => { + ;[ + 'fontFamily', + 'fontSize', + 'fontWeight', + 'fontStyle', + 'textDecoration', + 'color' + ].forEach(prop => { delete this.node.nodeData.data[prop] }) } else { @@ -412,11 +475,11 @@ class RichText { el.appendChild(node) this.mindMap.el.appendChild(el) // 遍历所有节点，将它们的margin和padding设为0 - let walk = (root) => { + let walk = root => { root.style.margin = 0 root.style.padding = 0 if (root.hasChildNodes()) { - Array.from(root.children).forEach((item) => { + Array.from(root.children).forEach(item => { walk(item) }) } @@ -454,13 +517,13 @@ class RichText { // 处理导入数据 handleSetData(data) { - let walk = (root) => { + let walk = root => { if (!root.data.richText) { root.data.richText = true root.data.resetRichText = true } if (root.children && root.children.length > 0) { - Array.from(root.children).forEach((item) => { + Array.from(root.children).forEach(item => { walk(item) }) } diff --git a/simple-mind-map/src/Select.js b/simple-mind-map/src/plugins/Select.js similarity index 83% rename from simple-mind-map/src/Select.js rename to simple-mind-map/src/plugins/Select.js index a8c847c9..b2a58c14 100644 --- a/simple-mind-map/src/Select.js +++ b/simple-mind-map/src/plugins/Select.js @@ -1,4 +1,4 @@ -import { bfsWalk, throttle } from './utils' +import { bfsWalk, throttle } from '../utils' // 选择节点类 @@ -22,9 +22,14 @@ class Select { if (this.mindMap.opt.readonly) { return } - if (!e.ctrlKey && e.which !== 3) { + let { useLeftKeySelectionRightKeyDrag } = this.mindMap.opt + if ( + !e.ctrlKey && + (useLeftKeySelectionRightKeyDrag ? e.which !== 1 : e.which !== 3) + ) { return } + e.preventDefault() this.isMousedown = true let { x, y } = this.mindMap.toPos(e.clientX, e.clientY) this.mouseDownX = x @@ -146,25 +151,24 @@ class Select { let bottom = (top + height) * scaleY + translateY left = left * scaleX + translateX top = top * scaleY + translateY - if ((left >= minx && left <= maxx || - right >= minx && right <= maxx) && - (top >= miny && top <= maxy || - bottom >= miny && bottom <= maxy) - ) { + if ( + ((left >= minx && left <= maxx) || (right >= minx && right <= maxx)) && + ((top >= miny && top <= maxy) || (bottom >= miny && bottom <= maxy)) + ) { // this.mindMap.batchExecution.push('activeNode' + node.uid, () => { - if (node.nodeData.data.isActive) { - return - } - this.mindMap.renderer.setNodeActive(node, true) - this.mindMap.renderer.addActiveNode(node) + if (node.nodeData.data.isActive) { + return + } + this.mindMap.renderer.setNodeActive(node, true) + this.mindMap.renderer.addActiveNode(node) // }) } else if (node.nodeData.data.isActive) { // this.mindMap.batchExecution.push('activeNode' + node.uid, () => { - if (!node.nodeData.data.isActive) { - return - } - this.mindMap.renderer.setNodeActive(node, false) - this.mindMap.renderer.removeActiveNode(node) + if (!node.nodeData.data.isActive) { + return + } + this.mindMap.renderer.setNodeActive(node, false) + this.mindMap.renderer.removeActiveNode(node) // }) } }) diff --git a/simple-mind-map/src/plugins/TouchEvent.js b/simple-mind-map/src/plugins/TouchEvent.js new file mode 100644 index 00000000..135d6ece --- /dev/null +++ b/simple-mind-map/src/plugins/TouchEvent.js @@ -0,0 +1,122 @@ +// 手势事件支持类 + +class TouchEvent { + // 构造函数 + constructor({ mindMap }) { + this.mindMap = mindMap + this.touchesNum = 0 + this.singleTouchstartEvent = null + this.clickNum = 0 + this.doubleTouchmoveDistance = 0 + this.bindEvent() + } + + // 绑定事件 + bindEvent() { + this.onTouchstart = this.onTouchstart.bind(this) + this.onTouchmove = this.onTouchmove.bind(this) + this.onTouchcancel = this.onTouchcancel.bind(this) + this.onTouchend = this.onTouchend.bind(this) + window.addEventListener('touchstart', this.onTouchstart) + window.addEventListener('touchmove', this.onTouchmove) + window.addEventListener('touchcancel', this.onTouchcancel) + window.addEventListener('touchend', this.onTouchend) + } + + // 解绑事件 + unBindEvent() { + window.removeEventListener('touchstart', this.onTouchstart) + window.removeEventListener('touchmove', this.onTouchmove) + window.removeEventListener('touchcancel', this.onTouchcancel) + window.removeEventListener('touchend', this.onTouchend) + } + + // 手指按下事件 + onTouchstart(e) { + this.touchesNum = e.touches.length + if (this.touchesNum === 1) { + let touch = e.touches[0] + this.singleTouchstartEvent = touch + this.dispatchMouseEvent('mousedown', touch.target, touch) + } + } + + // 手指移动事件 + onTouchmove(e) { + let len = e.touches.length + if (len === 1) { + let touch = e.touches[0] + this.dispatchMouseEvent('mousemove', touch.target, touch) + } else if (len === 2) { + let touch1 = e.touches[0] + let touch2 = e.touches[1] + let distance = Math.sqrt( + Math.pow(touch1.clientX - touch2.clientX, 2) + + Math.pow(touch1.clientY - touch2.clientY, 2) + ) + if (distance > this.doubleTouchmoveDistance) { + // 放大 + this.mindMap.view.enlarge() + } else { + // 缩小 + this.mindMap.view.narrow() + } + this.doubleTouchmoveDistance = distance + } + } + + // 手指取消事件 + onTouchcancel(e) {} + + // 手指松开事件 + onTouchend(e) { + this.dispatchMouseEvent('mouseup', e.target) + if (this.touchesNum === 1) { + // 模拟双击事件 + this.clickNum++ + setTimeout(() => { + this.clickNum = 0 + }, 300) + let ev = this.singleTouchstartEvent + if (this.clickNum > 1) { + this.clickNum = 0 + this.dispatchMouseEvent('dblclick', ev.target, ev) + } else { + this.dispatchMouseEvent('click', ev.target, ev) + } + } + this.touchesNum = 0 + this.singleTouchstartEvent = null + this.doubleTouchmoveDistance = 0 + } + + // 发送鼠标事件 + dispatchMouseEvent(eventName, target, e) { + let opt = {} + if (e) { + opt = { + screenX: e.screenX, + screenY: e.screenY, + clientX: e.clientX, + clientY: e.clientY, + which: 1 + } + } + let event = new MouseEvent(eventName, { + view: window, + bubbles: true, + cancelable: true, + ...opt + }) + target.dispatchEvent(event) + } + + // 插件被移除前做的事情 + beforePluginRemove() { + this.unBindEvent() + } +} + +TouchEvent.instanceName = 'touchEvent' + +export default TouchEvent diff --git a/simple-mind-map/src/Watermark.js b/simple-mind-map/src/plugins/Watermark.js similarity index 98% rename from simple-mind-map/src/Watermark.js rename to simple-mind-map/src/plugins/Watermark.js index 83bec10d..7d2ddaca 100644 --- a/simple-mind-map/src/Watermark.js +++ b/simple-mind-map/src/plugins/Watermark.js @@ -1,5 +1,5 @@ import { Text, G } from '@svgdotjs/svg.js' -import { degToRad, camelCaseToHyphen } from './utils' +import { degToRad, camelCaseToHyphen } from '../utils' import merge from 'deepmerge' // 水印类 diff --git a/simple-mind-map/src/utils/associativeLineControls.js b/simple-mind-map/src/plugins/associativeLine/associativeLineControls.js similarity index 100% rename from simple-mind-map/src/utils/associativeLineControls.js rename to simple-mind-map/src/plugins/associativeLine/associativeLineControls.js diff --git a/simple-mind-map/src/utils/associativeLineText.js b/simple-mind-map/src/plugins/associativeLine/associativeLineText.js similarity index 98% rename from simple-mind-map/src/utils/associativeLineText.js rename to simple-mind-map/src/plugins/associativeLine/associativeLineText.js index f761ab13..9d0722bb 100644 --- a/simple-mind-map/src/utils/associativeLineText.js +++ b/simple-mind-map/src/plugins/associativeLine/associativeLineText.js @@ -1,5 +1,5 @@ import { Text } from '@svgdotjs/svg.js' -import { getStrWithBrFromHtml } from './index' +import { getStrWithBrFromHtml } from '../../utils/index' // 创建文字节点 function createText(data) { diff --git a/simple-mind-map/src/utils/associativeLineUtils.js b/simple-mind-map/src/plugins/associativeLine/associativeLineUtils.js similarity index 100% rename from simple-mind-map/src/utils/associativeLineUtils.js rename to simple-mind-map/src/plugins/associativeLine/associativeLineUtils.js diff --git a/simple-mind-map/src/BatchExecution.js b/simple-mind-map/src/utils/BatchExecution.js similarity index 94% rename from simple-mind-map/src/BatchExecution.js rename to simple-mind-map/src/utils/BatchExecution.js index 4a92fbdc..fcdfb735 100644 --- a/simple-mind-map/src/BatchExecution.js +++ b/simple-mind-map/src/utils/BatchExecution.js @@ -1,4 +1,4 @@ -import { nextTick } from './utils' +import { nextTick } from '.' // 批量执行 class BatchExecution { diff --git a/web/package-lock.json b/web/package-lock.json index d5ed6629..763e71fb 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -40,6 +40,7 @@ "markdown-it": "^13.0.1", "markdown-it-checkbox": "^1.1.0", "prettier": "^1.19.1", + "vconsole": "^3.15.1", "vue-cli-plugin-electron-builder": "~2.1.1", "vue-template-compiler": "^2.6.11", "webpack": "^4.44.2" @@ -2018,9 +2019,9 @@ } }, "node_modules/@npmcli/fs/node_modules/semver": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz", - "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==", + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz", + "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -2248,9 +2249,9 @@ } }, "node_modules/@types/debug": { - "version": "4.1.7", - "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz", - "integrity": "sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==", + "version": "4.1.8", + "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.8.tgz", + "integrity": "sha512-/vPO1EPOs306Cvhwv7KfVfYvOJqA/S/AXjaHQiJboCZzcNDb+TIJFN9/2C9DZ//ijSKWioNyUxD792QmDJ+HKQ==", "dev": true, "dependencies": { "@types/ms": "*" @@ -3494,9 +3495,9 @@ } }, "node_modules/app-builder-lib/node_modules/semver": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz", - "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==", + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz", + "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -4847,9 +4848,9 @@ } }, "node_modules/cacheable-request": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.2.tgz", - "integrity": "sha512-pouW8/FmiPQbuGpkXQ9BAPv/Mo5xDGANgSNXzTzJ8DrKGuXOssM4wIQRjfanNRh3Yu5cfYPvcorqbhg2KIJtew==", + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.4.tgz", + "integrity": "sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==", "dev": true, "dependencies": { "clone-response": "^1.0.2", @@ -5690,6 +5691,18 @@ "node": ">=8" } }, + "node_modules/configstore/node_modules/write-file-atomic": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz", + "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==", + "dev": true, + "dependencies": { + "imurmurhash": "^0.1.4", + "is-typedarray": "^1.0.0", + "signal-exit": "^3.0.2", + "typedarray-to-buffer": "^3.1.5" + } + }, "node_modules/connect-history-api-fallback": { "version": "1.6.0", "dev": true, @@ -5806,6 +5819,17 @@ "node": ">=0.10.0" } }, + "node_modules/copy-text-to-clipboard": { + "version": "3.1.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/copy-webpack-plugin": { "version": "5.1.2", "dev": true, @@ -7157,9 +7181,9 @@ } }, "node_modules/electron": { - "version": "23.3.1", - "resolved": "https://registry.npmjs.org/electron/-/electron-23.3.1.tgz", - "integrity": "sha512-N+xGMPwK733BU6xn1qs2t/AE3wKEqhWYLvPqWEu6TRC8yQvf7PNNjtgBTPZ9R0GhtrRgu6kUTX3HSV3UG9r/Dw==", + "version": "23.3.7", + "resolved": "https://registry.npmjs.org/electron/-/electron-23.3.7.tgz", + "integrity": "sha512-irr5yfZQP6dLjIbti+2n82tfBafHC3Ejw+B0EKVY/mSjpgTZ0fNZmfjaRjBl53Y5Mz98++CaeeNJlamcIlP9/w==", "dev": true, "hasInstallScript": true, "dependencies": { @@ -7440,9 +7464,9 @@ } }, "node_modules/electron-devtools-installer/node_modules/semver": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz", - "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==", + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz", + "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -7455,9 +7479,9 @@ } }, "node_modules/electron-devtools-installer/node_modules/tslib": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", - "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==", + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz", + "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==", "dev": true }, "node_modules/electron-devtools-installer/node_modules/yallist": { @@ -7479,16 +7503,6 @@ "write-file-atomic": "^2.4.2" } }, - "node_modules/electron-json-storage/node_modules/write-file-atomic": { - "version": "2.4.3", - "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz", - "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==", - "dependencies": { - "graceful-fs": "^4.1.11", - "imurmurhash": "^0.1.4", - "signal-exit": "^3.0.2" - } - }, "node_modules/electron-osx-sign": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/electron-osx-sign/-/electron-osx-sign-0.5.0.tgz", @@ -7676,9 +7690,9 @@ "license": "ISC" }, "node_modules/electron/node_modules/@types/node": { - "version": "16.18.25", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.25.tgz", - "integrity": "sha512-rUDO6s9Q/El1R1I21HG4qw/LstTHCPO/oQNAwI/4b2f9EWvMnqt4d3HJwPMawfZ3UvodB8516Yg+VAq54YM+eA==", + "version": "16.18.36", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.36.tgz", + "integrity": "sha512-8egDX8dE50XyXWH6C6PRCNkTP106DuUrvdrednFouDSmCi7IOvrqr0frznfZaHifHH/3aq/7a7v9N4wdXMqhBQ==", "dev": true }, "node_modules/element-ui": { @@ -9352,9 +9366,9 @@ } }, "node_modules/global-agent/node_modules/semver": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz", - "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==", + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz", + "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==", "dev": true, "optional": true, "dependencies": { @@ -10964,15 +10978,15 @@ "license": "MIT" }, "node_modules/jake": { - "version": "10.8.5", - "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz", - "integrity": "sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==", + "version": "10.8.7", + "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz", + "integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==", "dev": true, "dependencies": { "async": "^3.2.3", "chalk": "^4.0.2", - "filelist": "^1.0.1", - "minimatch": "^3.0.4" + "filelist": "^1.0.4", + "minimatch": "^3.1.2" }, "bin": { "jake": "bin/cli.js" @@ -12077,6 +12091,10 @@ "dev": true, "license": "MIT" }, + "node_modules/mutation-observer": { + "version": "1.0.3", + "dev": true + }, "node_modules/mute-stream": { "version": "0.0.8", "dev": true, @@ -16045,9 +16063,9 @@ } }, "node_modules/tar": { - "version": "6.1.14", - "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.14.tgz", - "integrity": "sha512-piERznXu0U7/pW7cdSn7hjqySIVTYT6F76icmFk7ptU7dDYlXTm5r9A6K04R2vU3olYgoKeo1Cg3eeu5nhftAw==", + "version": "6.1.15", + "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.15.tgz", + "integrity": "sha512-/zKt9UyngnxIT/EAGYuxaMYgOIJiP81ab9ZfkILq4oNLPFX50qyYmu7jRj9qeXoxmJHjGlbH0+cm2uy1WCs10A==", "dev": true, "dependencies": { "chownr": "^2.0.0", @@ -17043,9 +17061,9 @@ } }, "node_modules/update-notifier/node_modules/semver": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz", - "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==", + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz", + "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -17296,6 +17314,17 @@ "node": ">= 0.8" } }, + "node_modules/vconsole": { + "version": "3.15.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.17.2", + "copy-text-to-clipboard": "^3.0.1", + "core-js": "^3.11.0", + "mutation-observer": "^1.0.3" + } + }, "node_modules/vendors": { "version": "1.0.4", "dev": true, @@ -17643,9 +17672,9 @@ } }, "node_modules/vue-cli-plugin-electron-builder/node_modules/semver": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz", - "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==", + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz", + "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -18860,15 +18889,13 @@ } }, "node_modules/write-file-atomic": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz", - "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==", - "dev": true, + "version": "2.4.3", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz", + "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==", "dependencies": { + "graceful-fs": "^4.1.11", "imurmurhash": "^0.1.4", - "is-typedarray": "^1.0.0", - "signal-exit": "^3.0.2", - "typedarray-to-buffer": "^3.1.5" + "signal-exit": "^3.0.2" } }, "node_modules/ws": { @@ -20367,9 +20394,9 @@ } }, "semver": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz", - "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==", + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz", + "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -20533,9 +20560,9 @@ } }, "@types/debug": { - "version": "4.1.7", - "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz", - "integrity": "sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==", + "version": "4.1.8", + "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.8.tgz", + "integrity": "sha512-/vPO1EPOs306Cvhwv7KfVfYvOJqA/S/AXjaHQiJboCZzcNDb+TIJFN9/2C9DZ//ijSKWioNyUxD792QmDJ+HKQ==", "dev": true, "requires": { "@types/ms": "*" @@ -20799,7 +20826,6 @@ "version": "4.5.19", "dev": true, "requires": { - "@babel/core": "^7.11.0", "@babel/helper-compilation-targets": "^7.9.6", "@babel/helper-module-imports": "^7.8.3", "@babel/plugin-proposal-class-properties": "^7.8.3", @@ -20812,7 +20838,6 @@ "@vue/babel-plugin-jsx": "^1.0.3", "@vue/babel-preset-jsx": "^1.2.4", "babel-plugin-dynamic-import-node": "^2.3.3", - "core-js": "^3.6.5", "core-js-compat": "^3.6.5", "semver": "^6.1.0" } @@ -21480,9 +21505,9 @@ } }, "semver": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz", - "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==", + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz", + "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -22453,9 +22478,9 @@ "dev": true }, "cacheable-request": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.2.tgz", - "integrity": "sha512-pouW8/FmiPQbuGpkXQ9BAPv/Mo5xDGANgSNXzTzJ8DrKGuXOssM4wIQRjfanNRh3Yu5cfYPvcorqbhg2KIJtew==", + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.4.tgz", + "integrity": "sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==", "dev": true, "requires": { "clone-response": "^1.0.2", @@ -23025,6 +23050,20 @@ "unique-string": "^2.0.0", "write-file-atomic": "^3.0.0", "xdg-basedir": "^4.0.0" + }, + "dependencies": { + "write-file-atomic": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz", + "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==", + "dev": true, + "requires": { + "imurmurhash": "^0.1.4", + "is-typedarray": "^1.0.0", + "signal-exit": "^3.0.2", + "typedarray-to-buffer": "^3.1.5" + } + } } }, "connect-history-api-fallback": { @@ -23098,6 +23137,10 @@ "version": "0.1.1", "dev": true }, + "copy-text-to-clipboard": { + "version": "3.1.0", + "dev": true + }, "copy-webpack-plugin": { "version": "5.1.2", "dev": true, @@ -24022,9 +24065,9 @@ "dev": true }, "electron": { - "version": "23.3.1", - "resolved": "https://registry.npmjs.org/electron/-/electron-23.3.1.tgz", - "integrity": "sha512-N+xGMPwK733BU6xn1qs2t/AE3wKEqhWYLvPqWEu6TRC8yQvf7PNNjtgBTPZ9R0GhtrRgu6kUTX3HSV3UG9r/Dw==", + "version": "23.3.7", + "resolved": "https://registry.npmjs.org/electron/-/electron-23.3.7.tgz", + "integrity": "sha512-irr5yfZQP6dLjIbti+2n82tfBafHC3Ejw+B0EKVY/mSjpgTZ0fNZmfjaRjBl53Y5Mz98++CaeeNJlamcIlP9/w==", "dev": true, "requires": { "@electron/get": "^2.0.0", @@ -24033,9 +24076,9 @@ }, "dependencies": { "@types/node": { - "version": "16.18.25", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.25.tgz", - "integrity": "sha512-rUDO6s9Q/El1R1I21HG4qw/LstTHCPO/oQNAwI/4b2f9EWvMnqt4d3HJwPMawfZ3UvodB8516Yg+VAq54YM+eA==", + "version": "16.18.36", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.36.tgz", + "integrity": "sha512-8egDX8dE50XyXWH6C6PRCNkTP106DuUrvdrednFouDSmCi7IOvrqr0frznfZaHifHH/3aq/7a7v9N4wdXMqhBQ==", "dev": true } } @@ -24233,18 +24276,18 @@ } }, "semver": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz", - "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==", + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz", + "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==", "dev": true, "requires": { "lru-cache": "^6.0.0" } }, "tslib": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", - "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==", + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz", + "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==", "dev": true }, "yallist": { @@ -24266,18 +24309,6 @@ "mkdirp": "^0.5.1", "rimraf": "^2.5.1", "write-file-atomic": "^2.4.2" - }, - "dependencies": { - "write-file-atomic": { - "version": "2.4.3", - "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz", - "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==", - "requires": { - "graceful-fs": "^4.1.11", - "imurmurhash": "^0.1.4", - "signal-exit": "^3.0.2" - } - } } }, "electron-osx-sign": { @@ -25587,9 +25618,9 @@ } }, "semver": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz", - "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==", + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz", + "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==", "dev": true, "optional": true, "requires": { @@ -26618,15 +26649,15 @@ "dev": true }, "jake": { - "version": "10.8.5", - "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz", - "integrity": "sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==", + "version": "10.8.7", + "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz", + "integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==", "dev": true, "requires": { "async": "^3.2.3", "chalk": "^4.0.2", - "filelist": "^1.0.1", - "minimatch": "^3.0.4" + "filelist": "^1.0.4", + "minimatch": "^3.1.2" }, "dependencies": { "ansi-styles": { @@ -27419,6 +27450,10 @@ "version": "1.1.0", "dev": true }, + "mutation-observer": { + "version": "1.0.3", + "dev": true + }, "mute-stream": { "version": "0.0.8", "dev": true @@ -30310,9 +30345,9 @@ "dev": true }, "tar": { - "version": "6.1.14", - "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.14.tgz", - "integrity": "sha512-piERznXu0U7/pW7cdSn7hjqySIVTYT6F76icmFk7ptU7dDYlXTm5r9A6K04R2vU3olYgoKeo1Cg3eeu5nhftAw==", + "version": "6.1.15", + "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.15.tgz", + "integrity": "sha512-/zKt9UyngnxIT/EAGYuxaMYgOIJiP81ab9ZfkILq4oNLPFX50qyYmu7jRj9qeXoxmJHjGlbH0+cm2uy1WCs10A==", "dev": true, "requires": { "chownr": "^2.0.0", @@ -31019,9 +31054,9 @@ } }, "semver": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz", - "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==", + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz", + "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -31203,6 +31238,16 @@ "version": "1.1.2", "dev": true }, + "vconsole": { + "version": "3.15.1", + "dev": true, + "requires": { + "@babel/runtime": "^7.17.2", + "copy-text-to-clipboard": "^3.0.1", + "core-js": "^3.11.0", + "mutation-observer": "^1.0.3" + } + }, "vendors": { "version": "1.0.4", "dev": true @@ -31462,9 +31507,9 @@ } }, "semver": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz", - "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==", + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz", + "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==", "dev": true, "requires": { "lru-cache": "^6.0.0" @@ -32316,15 +32361,13 @@ } }, "write-file-atomic": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz", - "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==", - "dev": true, + "version": "2.4.3", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz", + "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==", "requires": { + "graceful-fs": "^4.1.11", "imurmurhash": "^0.1.4", - "is-typedarray": "^1.0.0", - "signal-exit": "^3.0.2", - "typedarray-to-buffer": "^3.1.5" + "signal-exit": "^3.0.2" } }, "ws": { diff --git a/web/package.json b/web/package.json index 54fa1463..0f73b57e 100644 --- a/web/package.json +++ b/web/package.json @@ -58,6 +58,7 @@ "markdown-it": "^13.0.1", "markdown-it-checkbox": "^1.1.0", "prettier": "^1.19.1", + "vconsole": "^3.15.1", "vue-cli-plugin-electron-builder": "~2.1.1", "vue-template-compiler": "^2.6.11", "webpack": "^4.44.2" diff --git a/web/public/index.html b/web/public/index.html index 10932fe8..294e768a 100644 --- a/web/public/index.html +++ b/web/public/index.html @@ -3,7 +3,7 @@ - +This plugin is used to support the addition of associative lines.
import MindMap from 'simple-mind-map'
-import AssociativeLine from 'simple-mind-map/src/AssociativeLine.js'
+import AssociativeLine from 'simple-mind-map/src/plugins/AssociativeLine.js'
+// import AssociativeLine from 'simple-mind-map/src/AssociativeLine.js' Use this path for versions below v0.6.0
MindMap.usePlugin(AssociativeLine)
Fix: 1.Fixed the problem that the new node does not change with the theme in rich Text mode.
+Fix: 1.Fixed the issue of high movement sensitivity when using the touchpad when changing mouse scrolling to moving the canvas behavior.
+Fix: 1.Fixed the issue of destroying mind maps without setting a background style and reporting errors.
+Breaking change: Adjusted the directory structure of the simple-mind-map source code, Main impact: 1. The introduction path of the plugin needs to be modified. The constant file path needs to be modified.
+New: 1.Supports one click zoom to fit the canvas function. 2.Press and hold the Ctrl key to activate the multi selection function on demand through configuration. 3.Support setting to left click to select multiple nodes and right click to drag the canvas. 4. Support controlling whether nodes are allowed to be edited. 5.Add a method for destroying mind maps. 6.Added touch event support plugin.
+Fix: 1.Fix the issue where holding down the Ctrl key to select multiple nodes does not trigger the click event for the node. 2.Fixed the issue of node style loss when clearing a node and then entering text.
New: Supports associative text editing.
optimization: Optimizing theme configuration updates, changing configurations that do not involve node size does not trigger node recalculation.
diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md index 8d4da242..b2298eca 100644 --- a/web/src/pages/Doc/en/constructor/index.md +++ b/web/src/pages/Doc/en/constructor/index.md @@ -25,11 +25,11 @@ const mindMap = new MindMap({ | Field Name | Type | Default Value | Description | Required | | -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ | -------- | | el | Element | | Container element, must be a DOM element | Yes | -| data | Object | {} | Mind map data, refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js | | +| data | Object | {} | Mind map data, refer to: [exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) | | | layout | String | logicalStructure | Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram)、timeline（v0.5.4+, timeline）、timeline2（v0.5.4+, up down alternating timeline）、fishbone（v0.5.4+, fishbone diagram） | | | fishboneDeg（v0.5.4+） | Number | 45 | Set the diagonal angle of the fishbone structure diagram | | | theme | String | default | Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4(v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple, simpleBlack(v0.5.4+), courseGreen(v0.5.4+), coffee(v0.5.4+), redSpirit(v0.5.4+), blackHumour(v0.5.4+), lateNightOffice(v0.5.4+), blackGold(v0.5.4+)、、avocado(v.5.10-fix.2+)、autumn(v.5.10-fix.2+)、orangeJuice(v.5.10-fix.2+) | | -| themeConfig | Object | {} | Theme configuration, will be merged with the selected theme, available fields refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js | | +| themeConfig | Object | {} | Theme configuration, will be merged with the selected theme, available fields refer to: [default.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js) | | | scaleRatio | Number | 0.1 | The incremental scaling ratio | | | maxTag | Number | 5 | The maximum number of tags displayed in the node, any additional tags will be discarded | | | exportPadding | Number | 20 | The padding for exporting images | | @@ -62,6 +62,11 @@ const mindMap = new MindMap({ | alwaysShowExpandBtn（v0.5.8+） | Boolean | false | Whether to always display the expand and collapse buttons of nodes, which are only displayed when the mouse is moved up and activated by default | | | iconList（v0.5.8+） | Array | [] | The icons that can be inserted into the extension node, and each item in the array is an object. Please refer to the "Icon Configuration" table below for the detailed structure of the object | | | maxNodeCacheCount（v0.5.10+） | Number | 1000 | The maximum number of cached nodes. To optimize performance, an internal node cache pool is maintained to reuse nodes. This attribute allows you to specify the maximum number of caches in the pool | | +| defaultAssociativeLineText（v0.5.11+） | String | 关联 | Association Line Default Text | | +| fitPadding（v0.6.0+） | Number | 50 | The padding of mind mapping when adapting to canvas size, Unit: px | | +| enableCtrlKeyNodeSelection（v0.6.0+） | Boolean | true | Whether to enable the function of holding down the Ctrl key to select multiple nodes | | +| useLeftKeySelectionRightKeyDrag（v0.6.0+） | Boolean | false | Setting to left click to select multiple nodes and right click to drag the canvas. | | +| beforeTextEdit（v0.6.0+） | Function/null | null | The callback method before the node is about to enter editing. If the method returns a value other than true, the editing will be canceled. The function can return a value or a promise, and the callback parameter is the node instance | | ### Watermark config @@ -140,6 +145,12 @@ List of all currently registered plugins. ## Instance methods +### destroy() + +> v0.6.0+ + +Destroy mind maps. It will remove registered plugins, remove listening events, and delete all nodes on the canvas. + ### getSvgData({ paddingX = 0, paddingY = 0 }) > v0.3.0+ @@ -203,7 +214,7 @@ Listen to an event. Event list: | mousemove | el element mouse move event | e (event object), this (Event event class instance) | | drag | If it is a drag event while holding down the left button | e (event object), this (Event event class instance) | | mouseup | el element mouse up event | e (event object), this (Event event class instance) | -| mousewheel | Mouse scroll event | e (event object), dir (up or down scroll), this (Event event class instance) | +| mousewheel | Mouse scroll event | e (event object), dir (up or down scroll), this (Event event class instance) 、isTouchPad（v0.6.1+, Is it an event triggered by the touchpad） | | contextmenu | svg canvas right mouse button menu event | e (event object) | | node_click | Node click event | this (node instance), e (event object) | | node_mousedown | Node mouse down event | this (node instance), e (event object) | @@ -301,8 +312,8 @@ redo. All commands are as follows: | SELECT_ALL | Select all | | | BACK | Go back a specified number of steps | step (the number of steps to go back, default is 1) | | FORWARD | Go forward a specified number of steps | step (the number of steps to go forward, default is 1) | -| INSERT_NODE | Insert a sibling node, the active node or appoint node will be the operation node. If there are multiple active nodes, only the first one will be effective | openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is `true`） 、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to [https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) ） | -| INSERT_CHILD_NODE | Insert a child node, the active node or appoint node will be the operation node | openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is `true`）、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to [https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) ） | +| INSERT_NODE | Insert a sibling node, the active node or appoint node will be the operation node. If there are multiple active nodes, only the first one will be effective | openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is `true`） 、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to [exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) ） | +| INSERT_CHILD_NODE | Insert a child node, the active node or appoint node will be the operation node | openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is `true`）、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to [exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) ） | | UP_NODE | Move node up, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the first node in the list will be invalid | | | DOWN_NODE | Move node down, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the last node in the list will be invalid | | | REMOVE_NODE | Remove node, the active node or appoint node will be the operation node | appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array） | @@ -317,10 +328,10 @@ redo. All commands are as follows: | SET_NODE_DATA | Update node data, that is, update the data in the data object of the node data object | node (the node to set), data (object, the data to update, e.g. `{expand: true}`) | | SET_NODE_TEXT | Set node text | node (the node to set), text (the new text for the node), richText（v0.4.0+, If you want to set a rich text character, you need to set it to `true`） | | SET_NODE_IMAGE | Set Node Image | node (node to set), imgData (object, image information, structured as: `{url, title, width, height}`, the width and height of the image must be passed) | -| SET_NODE_ICON | Set Node Icon | node (node to set), icons (array, predefined image names array, available icons can be obtained in the nodeIconList list in the [https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js) file, icon name is type_name, such as ['priority_1']) | +| SET_NODE_ICON | Set Node Icon | node (node to set), icons (array, predefined image names array, available icons can be obtained in the nodeIconList list in the [icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js) file, icon name is type_name, such as ['priority_1']) | | SET_NODE_HYPERLINK | Set Node Hyperlink | node (node to set), link (hyperlink address), title (hyperlink name, optional) | | SET_NODE_NOTE | Set Node Note | node (node to set), note (note text) | -| SET_NODE_TAG | Set Node Tag | node (node to set), tag (string array, built-in color information can be obtained in [https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js)) | +| SET_NODE_TAG | Set Node Tag | node (node to set), tag (string array, built-in color information can be obtained in [constant.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js)) | | INSERT_AFTER (v0.1.5+) | Move Node to After Another Node | node (node to move), exist (target node) | | INSERT_BEFORE (v0.1.5+) | Move Node to Before Another Node | node (node to move), exist (target node) | | MOVE_NODE_TO (v0.1.5+) | Move a node as a child of another node | node (the node to move), toNode (the target node) | @@ -328,7 +339,7 @@ redo. All commands are as follows: | REMOVE_GENERALIZATION (v0.2.0+) | Remove a node summary | | | SET_NODE_CUSTOM_POSITION (v0.2.0+) | Set a custom position for a node | node (the node to set), left (custom x coordinate, default is undefined), top (custom y coordinate, default is undefined) | | RESET_LAYOUT (v0.2.0+) | Arrange layout with one click | | -| SET_NODE_SHAPE (v0.2.4+) | Set the shape of a node | node (the node to set), shape (the shape, all shapes: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/Shape.js) | +| SET_NODE_SHAPE (v0.2.4+) | Set the shape of a node | node (the node to set), shape (the shape, all shapes: [Shape.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/core/render/node/Shape.js)) | ### setData(data) diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue index 2edbc9f4..487b7608 100644 --- a/web/src/pages/Doc/en/constructor/index.vue +++ b/web/src/pages/Doc/en/constructor/index.vue @@ -39,7 +39,7 @@List of all currently registered plugins.
++v0.6.0+
+
Destroy mind maps. It will remove registered plugins, remove listening events, and delete all nodes on the canvas.
v0.3.0+
@@ -509,7 +549,7 @@ poor performance and should be used sparingly.mousewheel Mouse scroll event -e (event object), dir (up or down scroll), this (Event event class instance) +e (event object), dir (up or down scroll), this (Event event class instance) 、isTouchPad（v0.6.1+, Is it an event triggered by the touchpad） contextmenu @@ -700,12 +740,12 @@ redo. All commands are as follows:INSERT_NODE Insert a sibling node, the active node or appoint node will be the operation node. If there are multiple active nodes, only the first one will be effective -openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is +true） 、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js ）openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is true） 、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to exampleData.js ）INSERT_CHILD_NODE Insert a child node, the active node or appoint node will be the operation node -openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is +true）、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js ）openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is true）、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to exampleData.js ）UP_NODE @@ -780,7 +820,7 @@ redo. All commands are as follows:SET_NODE_ICON Set Node Icon -node (node to set), icons (array, predefined image names array, available icons can be obtained in the nodeIconList list in the https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js file, icon name is type_name, such as ['priority_1']) +node (node to set), icons (array, predefined image names array, available icons can be obtained in the nodeIconList list in the icons.js file, icon name is type_name, such as ['priority_1']) SET_NODE_HYPERLINK @@ -795,7 +835,7 @@ redo. All commands are as follows:SET_NODE_TAG Set Node Tag -node (node to set), tag (string array, built-in color information can be obtained in https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js) +node (node to set), tag (string array, built-in color information can be obtained in constant.js) INSERT_AFTER (v0.1.5+) @@ -835,7 +875,7 @@ redo. All commands are as follows:diff --git a/web/src/pages/Doc/en/doExport/index.md b/web/src/pages/Doc/en/doExport/index.md index a1226829..3d2c83b0 100644 --- a/web/src/pages/Doc/en/doExport/index.md +++ b/web/src/pages/Doc/en/doExport/index.md @@ -6,7 +6,8 @@ The `Export` plugin provides the export function. ```js import MindMap from 'simple-mind-map' -import Export from 'simple-mind-map/src/Export.js' +import Export from 'simple-mind-map/src/plugins/Export.js' +// import Export from 'simple-mind-map/src/Export.js' Use this path for versions below v0.6.0 MindMap.usePlugin(Export) ``` @@ -73,6 +74,13 @@ Exports as `svg`. Export as `pdf`. Unlike other export methods, this method does not return data and directly triggers the download. +> After v0.6.0, an additional ExportPDF plugin needs to be registered + +```js +import ExportPDF from 'simple-mind-map/src/plugins/ExportPDF.js' +MindMap.usePlugin(ExportPDF) +``` + ### json(name, withConfig) `name`：It is temporarily useless, just pass an empty string diff --git a/web/src/pages/Doc/en/doExport/index.vue b/web/src/pages/Doc/en/doExport/index.vue index 785e0525..a2d71e28 100644 --- a/web/src/pages/Doc/en/doExport/index.vue +++ b/web/src/pages/Doc/en/doExport/index.vue @@ -4,7 +4,8 @@ SET_NODE_SHAPE (v0.2.4+) Set the shape of a node -node (the node to set), shape (the shape, all shapes: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/Shape.js) +node (the node to set), shape (the shape, all shapes: Shape.js) The
Exportplugin provides the export function.Register
@@ -62,6 +63,12 @@ a.click()import MindMap from 'simple-mind-map' -import Export from 'simple-mind-map/src/Export.js' +import Export from 'simple-mind-map/src/plugins/Export.js' +// import Export from 'simple-mind-map/src/Export.js' Use this path for versions below v0.6.0 MindMap.usePlugin(Export)
name：File name
Export as pdf. Unlike other export methods, this method does not return data and directly triggers the download.
++After v0.6.0, an additional ExportPDF plugin needs to be registered
+
import ExportPDF from 'simple-mind-map/src/plugins/ExportPDF.js'
+MindMap.usePlugin(ExportPDF)
+name：It is temporarily useless, just pass an empty string
withConfig``：Boolean, default true, Whether the data contains configuration, otherwise it is pure mind map node data
Please refer to the Instantiation Options of the MindMap class for configuration.
import MindMap from 'simple-mind-map'
-import Drag from 'simple-mind-map/src/Drag.js'
+import Drag from 'simple-mind-map/src/plugins/Drag.js'
+// import Drag from 'simple-mind-map/src/Drag.js' Use this path for versions below v0.6.0
MindMap.usePlugin(Drag)
-
\ No newline at end of file
+
+
+
+ Think
+
+ 志斌
+simple-mind-map is a simple and powerful web mind map library, not dependent on any specific framework. Can help you quickly develop mind mapping products.
If you just want to use mind mapping, you can also use the demo of this project as a regular online mind mapping tool. Click on the 【Online Demo】 in the upper right corner to start using it.
+Additionally, a client is provided for download, support
Windows、MacandLinux, Click here to learn more。
1.simple-mind-map
This is an online mind map built using the simple-mind-map library and based
on Vue2.x and ElementUI. Features include:
When you press the direction key, how does the TV find the next focus
How to simulate the background image style of css in canvas
+This project can be used for learning and reference. Please deeply experience whether it can meet your needs when using it for actual projects.
This project may not have fully tested every function point, so there may be bugs. In addition, when the number of nodes is very large, there may be some performance issues. Because everyone can accept different levels of congestion, you can test the maximum number of nodes yourself.
@@ -84,6 +86,16 @@ full screen, support mini map
+
+ Think
+
+ 志斌
+Add a shortcut
key: Shortcut key, key values can be viewed at
-https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/keyMap.js
+keyMap.js
Example:
// Single key
mindMap.keyCommand.addShortcut("Enter", () => {});
diff --git a/web/src/pages/Doc/en/keyboardNavigation/index.md b/web/src/pages/Doc/en/keyboardNavigation/index.md
index 09bb5f2d..dae4cd05 100644
--- a/web/src/pages/Doc/en/keyboardNavigation/index.md
+++ b/web/src/pages/Doc/en/keyboardNavigation/index.md
@@ -8,7 +8,8 @@
```js
import MindMap from 'simple-mind-map'
-import KeyboardNavigation from 'simple-mind-map/src/KeyboardNavigation.js'
+import KeyboardNavigation from 'simple-mind-map/src/plugins/KeyboardNavigation.js'
+// import KeyboardNavigation from 'simple-mind-map/src/KeyboardNavigation.js' Use this path for versions below v0.6.0
MindMap.usePlugin(KeyboardNavigation)
```
diff --git a/web/src/pages/Doc/en/keyboardNavigation/index.vue b/web/src/pages/Doc/en/keyboardNavigation/index.vue
index c45ae94f..a3a918bb 100644
--- a/web/src/pages/Doc/en/keyboardNavigation/index.vue
+++ b/web/src/pages/Doc/en/keyboardNavigation/index.vue
@@ -7,7 +7,8 @@
KeyboardNavigation plugin provides keyboard navigation function, that is, when you press the direction key, it will automatically find the next node and activate it.
Register
import MindMap from 'simple-mind-map'
-import KeyboardNavigation from 'simple-mind-map/src/KeyboardNavigation.js'
+import KeyboardNavigation from 'simple-mind-map/src/plugins/KeyboardNavigation.js'
+// import KeyboardNavigation from 'simple-mind-map/src/KeyboardNavigation.js' Use this path for versions below v0.6.0
MindMap.usePlugin(KeyboardNavigation)
diff --git a/web/src/pages/Doc/en/miniMap/index.md b/web/src/pages/Doc/en/miniMap/index.md
index 495ab5f8..1c42d08d 100644
--- a/web/src/pages/Doc/en/miniMap/index.md
+++ b/web/src/pages/Doc/en/miniMap/index.md
@@ -12,7 +12,8 @@ viewport location, and can be quickly positioned by dragging on the small map.
```js
import MindMap from 'simple-mind-map'
-import MiniMap from 'simple-mind-map/src/MiniMap.js'
+import MiniMap from 'simple-mind-map/src/plugins/MiniMap.js'
+// import MiniMap from 'simple-mind-map/src/MiniMap.js' Use this path for versions below v0.6.0
MindMap.usePlugin(MiniMap)
```
diff --git a/web/src/pages/Doc/en/miniMap/index.vue b/web/src/pages/Doc/en/miniMap/index.vue
index 75b18097..c5946cb9 100644
--- a/web/src/pages/Doc/en/miniMap/index.vue
+++ b/web/src/pages/Doc/en/miniMap/index.vue
@@ -11,7 +11,8 @@ part of the mind map content. The viewport frame can be used to view the current
viewport location, and can be quickly positioned by dragging on the small map.
Register
import MindMap from 'simple-mind-map'
-import MiniMap from 'simple-mind-map/src/MiniMap.js'
+import MiniMap from 'simple-mind-map/src/plugins/MiniMap.js'
+// import MiniMap from 'simple-mind-map/src/MiniMap.js' Use this path for versions below v0.6.0
MindMap.usePlugin(MiniMap)
diff --git a/web/src/pages/Doc/en/node/index.md b/web/src/pages/Doc/en/node/index.md
index 9fb7aa24..809ae16b 100644
--- a/web/src/pages/Doc/en/node/index.md
+++ b/web/src/pages/Doc/en/node/index.md
@@ -56,6 +56,12 @@ Whether the node is currently being dragged
## Methods
+### hasCustomStyle()
+
+> v0.6.2+
+
+Gets whether a custom style has been set.
+
### getSize()
Update the width and height of the node by recreating the node content, and return a Boolean value indicating whether the width and height have changed
diff --git a/web/src/pages/Doc/en/node/index.vue b/web/src/pages/Doc/en/node/index.vue
index eaf4611d..bac896da 100644
--- a/web/src/pages/Doc/en/node/index.vue
+++ b/web/src/pages/Doc/en/node/index.vue
@@ -31,6 +31,11 @@
Whether the node is currently being dragged
Methods
+hasCustomStyle()
+
+v0.6.2+
+
+Gets whether a custom style has been set.
getSize()
Update the width and height of the node by recreating the node content, and return a Boolean value indicating whether the width and height have changed
render()
diff --git a/web/src/pages/Doc/en/richText/index.md b/web/src/pages/Doc/en/richText/index.md
index e4f09294..2223ce35 100644
--- a/web/src/pages/Doc/en/richText/index.md
+++ b/web/src/pages/Doc/en/richText/index.md
@@ -20,7 +20,8 @@ The version of `v0.5.7+` directly uses `html2canvas` to convert the entire `svg`
```js
import MindMap from 'simple-mind-map'
-import RichText from 'simple-mind-map/src/RichText.js'
+import RichText from 'simple-mind-map/src/plugins/RichText.js'
+// import RichText from 'simple-mind-map/src/RichText.js' Use this path for versions below v0.6.0
MindMap.usePlugin(RichText, opt?)
```
diff --git a/web/src/pages/Doc/en/richText/index.vue b/web/src/pages/Doc/en/richText/index.vue
index 43db5c80..7b645bd8 100644
--- a/web/src/pages/Doc/en/richText/index.vue
+++ b/web/src/pages/Doc/en/richText/index.vue
@@ -17,7 +17,8 @@
The version of v0.5.7+ directly uses html2canvas to convert the entire svg, which is no longer an issue with speed. However, there is currently a bug where the color of the node does not take effect after export.
Register
import MindMap from 'simple-mind-map'
-import RichText from 'simple-mind-map/src/RichText.js'
+import RichText from 'simple-mind-map/src/plugins/RichText.js'
+// import RichText from 'simple-mind-map/src/RichText.js' Use this path for versions below v0.6.0
MindMap.usePlugin(RichText, opt?)
diff --git a/web/src/pages/Doc/en/select/index.md b/web/src/pages/Doc/en/select/index.md
index 1761d1d5..6eb7a088 100644
--- a/web/src/pages/Doc/en/select/index.md
+++ b/web/src/pages/Doc/en/select/index.md
@@ -6,7 +6,8 @@ The `Select` plugin provides the function of right-clicking to select multiple n
```js
import MindMap from 'simple-mind-map'
-import Select from 'simple-mind-map/src/Select.js'
+import Select from 'simple-mind-map/src/plugins/Select.js'
+// import Select from 'simple-mind-map/src/Select.js' Use this path for versions below v0.6.0
MindMap.usePlugin(Select)
```
diff --git a/web/src/pages/Doc/en/select/index.vue b/web/src/pages/Doc/en/select/index.vue
index d174955d..aecb9235 100644
--- a/web/src/pages/Doc/en/select/index.vue
+++ b/web/src/pages/Doc/en/select/index.vue
@@ -4,7 +4,8 @@
The Select plugin provides the function of right-clicking to select multiple nodes.
Register
import MindMap from 'simple-mind-map'
-import Select from 'simple-mind-map/src/Select.js'
+import Select from 'simple-mind-map/src/plugins/Select.js'
+// import Select from 'simple-mind-map/src/Select.js' Use this path for versions below v0.6.0
MindMap.usePlugin(Select)
diff --git a/web/src/pages/Doc/en/start/index.md b/web/src/pages/Doc/en/start/index.md
index b89c6a41..cf7bf663 100644
--- a/web/src/pages/Doc/en/start/index.md
+++ b/web/src/pages/Doc/en/start/index.md
@@ -91,6 +91,7 @@ If you only use library, you don't need to read this section.
```bash
git clone https://github.com/wanglin2/mind-map.git
+cd mind-map
cd simple-mind-map
npm i
npm link
diff --git a/web/src/pages/Doc/en/start/index.vue b/web/src/pages/Doc/en/start/index.vue
index e91ada19..ae5c83d0 100644
--- a/web/src/pages/Doc/en/start/index.vue
+++ b/web/src/pages/Doc/en/start/index.vue
@@ -64,6 +64,7 @@ compile this dependency:
If you only use library, you don't need to read this section.
Local Development
git clone https://github.com/wanglin2/mind-map.git
+cd mind-map
cd simple-mind-map
npm i
npm link
diff --git a/web/src/pages/Doc/en/touchEvent/index.md b/web/src/pages/Doc/en/touchEvent/index.md
new file mode 100644
index 00000000..7b65cd6b
--- /dev/null
+++ b/web/src/pages/Doc/en/touchEvent/index.md
@@ -0,0 +1,18 @@
+# TouchEvent plugin
+
+> v0.6.0+
+
+This plugin supports mobile touch events for users. The principle is to listen for 'touchstart', 'touchmove', and 'touchend' events on the mobile end, and then dispatch corresponding mouse events.
+
+Currently, it supports single finger touch to move the canvas, click to activate nodes, double finger zoom the canvas, single finger double-click to reset and edit nodes.
+
+## Register
+
+```js
+import MindMap from 'simple-mind-map'
+import TouchEvent from 'simple-mind-map/src/plugins/TouchEvent.js'
+
+MindMap.usePlugin(TouchEvent)
+```
+
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.touchEvent`.
\ No newline at end of file
diff --git a/web/src/pages/Doc/en/touchEvent/index.vue b/web/src/pages/Doc/en/touchEvent/index.vue
new file mode 100644
index 00000000..e1fedd45
--- /dev/null
+++ b/web/src/pages/Doc/en/touchEvent/index.vue
@@ -0,0 +1,28 @@
+
+
+ TouchEvent plugin
+
+v0.6.0+
+
+This plugin supports mobile touch events for users. The principle is to listen for 'touchstart', 'touchmove', and 'touchend' events on the mobile end, and then dispatch corresponding mouse events.
+Currently, it supports single finger touch to move the canvas, click to activate nodes, double finger zoom the canvas, single finger double-click to reset and edit nodes.
+Register
+import MindMap from 'simple-mind-map'
+import TouchEvent from 'simple-mind-map/src/plugins/TouchEvent.js'
+
+MindMap.usePlugin(TouchEvent)
+
+After registration and instantiation of MindMap, the instance can be obtained through mindMap.touchEvent.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/en/view/index.md b/web/src/pages/Doc/en/view/index.md
index 4c77956c..f11130be 100644
--- a/web/src/pages/Doc/en/view/index.md
+++ b/web/src/pages/Doc/en/view/index.md
@@ -5,6 +5,12 @@ through `mindMap.view`
## Methods
+### fit()
+
+> v0.6.0+
+
+Zoom the mind map to fit the canvas.
+
### translateX(step)
Translate in the `x` direction, `step`: number of pixels to translate
diff --git a/web/src/pages/Doc/en/view/index.vue b/web/src/pages/Doc/en/view/index.vue
index 90f077fd..085f4f1e 100644
--- a/web/src/pages/Doc/en/view/index.vue
+++ b/web/src/pages/Doc/en/view/index.vue
@@ -4,6 +4,11 @@
The view instance is responsible for view operations, and can be obtained
through mindMap.view
Methods
+fit()
+
+v0.6.0+
+
+Zoom the mind map to fit the canvas.
translateX(step)
Translate in the x direction, step: number of pixels to translate
translateY(step)
diff --git a/web/src/pages/Doc/en/watermark/index.md b/web/src/pages/Doc/en/watermark/index.md
index 08e11aad..5c39043d 100644
--- a/web/src/pages/Doc/en/watermark/index.md
+++ b/web/src/pages/Doc/en/watermark/index.md
@@ -10,7 +10,8 @@ Please refer to the [Instantiation Options](/mind-map/#/doc/zh/constructor) of t
```js
import MindMap from 'simple-mind-map'
-import Watermark from 'simple-mind-map/src/Watermark.js'
+import Watermark from 'simple-mind-map/src/plugins/Watermark.js'
+// import Watermark from 'simple-mind-map/src/Watermark.js' Use this path for versions below v0.6.0
MindMap.usePlugin(Watermark)
```
diff --git a/web/src/pages/Doc/en/watermark/index.vue b/web/src/pages/Doc/en/watermark/index.vue
index 8daf838b..19c899ec 100644
--- a/web/src/pages/Doc/en/watermark/index.vue
+++ b/web/src/pages/Doc/en/watermark/index.vue
@@ -8,7 +8,8 @@
Please refer to the Instantiation Options of the MindMap class for configuration.
Register
import MindMap from 'simple-mind-map'
-import Watermark from 'simple-mind-map/src/Watermark.js'
+import Watermark from 'simple-mind-map/src/plugins/Watermark.js'
+// import Watermark from 'simple-mind-map/src/Watermark.js' Use this path for versions below v0.6.0
MindMap.usePlugin(Watermark)
diff --git a/web/src/pages/Doc/routerList.js b/web/src/pages/Doc/routerList.js
index 4ee8063a..d024d5e5 100644
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@@ -43,7 +43,9 @@ export default [
{ path: 'view', title: 'View实例' },
{ path: 'watermark', title: 'Watermark插件' },
{ path: 'xmind', title: 'XMind解析' },
- { path: 'deploy', title: '部署' }
+ { path: 'deploy', title: '部署' },
+ { path: 'client', title: '客户端' },
+ { path: 'touchEvent', title: 'TouchEvent插件' }
]
},
{
@@ -71,7 +73,8 @@ export default [
{ path: 'view', title: 'View instance' },
{ path: 'watermark', title: 'Watermark plugin' },
{ path: 'xmind', title: 'XMind parse' },
- { path: 'deploy', title: 'Deploy' }
+ { path: 'deploy', title: 'Deploy' },
+ { path: 'touchEvent', title: 'TouchEvent plugin' }
]
}
]
diff --git a/web/src/pages/Doc/zh/associativeLine/index.md b/web/src/pages/Doc/zh/associativeLine/index.md
index 72f692d3..1507e037 100644
--- a/web/src/pages/Doc/zh/associativeLine/index.md
+++ b/web/src/pages/Doc/zh/associativeLine/index.md
@@ -12,7 +12,8 @@
```js
import MindMap from 'simple-mind-map'
-import AssociativeLine from 'simple-mind-map/src/AssociativeLine.js'
+import AssociativeLine from 'simple-mind-map/src/plugins/AssociativeLine.js'
+// import AssociativeLine from 'simple-mind-map/src/AssociativeLine.js' v0.6.0以下版本使用该路径
MindMap.usePlugin(AssociativeLine)
```
diff --git a/web/src/pages/Doc/zh/associativeLine/index.vue b/web/src/pages/Doc/zh/associativeLine/index.vue
index 4e5cda2b..8f4b704b 100644
--- a/web/src/pages/Doc/zh/associativeLine/index.vue
+++ b/web/src/pages/Doc/zh/associativeLine/index.vue
@@ -13,7 +13,8 @@
该插件用于支持添加关联线。
注册
import MindMap from 'simple-mind-map'
-import AssociativeLine from 'simple-mind-map/src/AssociativeLine.js'
+import AssociativeLine from 'simple-mind-map/src/plugins/AssociativeLine.js'
+// import AssociativeLine from 'simple-mind-map/src/AssociativeLine.js' v0.6.0以下版本使用该路径
MindMap.usePlugin(AssociativeLine)
diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md
index 3fc6fc2d..40ce409c 100644
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,25 @@
# Changelog
+## 0.6.2
+
+修复：1.修复富文本模式下，新建节点不随主题变化而变化的问题。
+
+## 0.6.1
+
+修复：1.修复将鼠标滚动改为移动画布行为后，使用触控板操作时移动灵敏度过高的问题。
+
+## 0.6.0-fix.1
+
+修复：1.修复没有设置过背景样式的情况下销毁思维导图报错的问题。
+
+## 0.6.0
+
+破坏性更新：调整了simple-mind-map源码的目录结构，主要影响：1.插件的引入路径需要修改。2.constant文件路径需要修改。
+
+新增：1.支持一键缩放至适应画布功能。 2.按住Ctrl键多选功能可通过配置按需开启。 3.支持设置为左键多选节点，右键拖动画布。 4.支持控制节点是否允许编辑。 5.新增销毁思维导图的方法。 6.新增触摸事件支持插件。
+
+修复：1.修复按住ctrl键多选节点时不会触发节点的click事件的问题。 2.修复清空一个节点后再输入文字时节点样式丢失的问题。
+
## 0.5.11
新增：支持关联性文本编辑。
diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue
index e4e59f09..8ae12e9c 100644
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,16 @@
Changelog
+0.6.2
+修复：1.修复富文本模式下，新建节点不随主题变化而变化的问题。
+0.6.1
+修复：1.修复将鼠标滚动改为移动画布行为后，使用触控板操作时移动灵敏度过高的问题。
+0.6.0-fix.1
+修复：1.修复没有设置过背景样式的情况下销毁思维导图报错的问题。
+0.6.0
+破坏性更新：调整了simple-mind-map源码的目录结构，主要影响：1.插件的引入路径需要修改。2.constant文件路径需要修改。
+新增：1.支持一键缩放至适应画布功能。 2.按住Ctrl键多选功能可通过配置按需开启。 3.支持设置为左键多选节点，右键拖动画布。 4.支持控制节点是否允许编辑。 5.新增销毁思维导图的方法。 6.新增触摸事件支持插件。
+修复：1.修复按住ctrl键多选节点时不会触发节点的click事件的问题。 2.修复清空一个节点后再输入文字时节点样式丢失的问题。
0.5.11
新增：支持关联性文本编辑。
优化：优化主题配置更新，改变不涉及节点大小的配置不触发节点重新计算。
diff --git a/web/src/pages/Doc/zh/client/index.md b/web/src/pages/Doc/zh/client/index.md
new file mode 100644
index 00000000..c7ca8710
--- /dev/null
+++ b/web/src/pages/Doc/zh/client/index.md
@@ -0,0 +1,80 @@
+# 客户端
+
+本项目也提供了客户端版本，使用[Electron](https://www.electronjs.org/)开发。支持`Windows`、`Mac`及`Linux`。
+
+目前功能比较简单：
+
+1.支持新建、打开文件进行编辑；
+
+2.支持查看最近编辑文件列表；
+
+3.支持文件的复制、删除、重命名；
+
+## 下载
+
+你可以直接下载对应的客户端安装使用，提供了两个下载地址：
+
+Github：[releases](https://github.com/wanglin2/mind-map/releases)。
+
+百度云盘：[地址](https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3)。
+
+## 开发
+
+如果有需要，你也可以进行二次开发。
+
+### clone
+
+```bash
+git clone https://github.com/wanglin2/mind-map.git
+cd mind-map
+git checkout electron
+```
+
+### 启动服务
+
+在项目根目录下执行：
+
+```bash
+cd simple-mind-map
+npm i
+npm link
+cd ..
+cd web
+npm i
+npm link simple-mind-map
+npm run electron:serve
+```
+
+### 打包客户端
+
+你至少需要两台电脑，一台`Windows`和一台`Mac`。
+
+打包`Windows`应用：
+
+```bash
+npm run electron:build-win
+```
+
+打包`Mac`应用：
+
+```bash
+npm run electron:build-mac
+```
+
+打包`Linux`应用：
+
+```bash
+npm run electron:build-linux
+```
+
+打包全部应用：
+
+```bash
+npm run electron:build-all
+```
+
+根据你的电脑系统自动打包：
+
+```bash
+npm run electron:build
+```
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/client/index.vue b/web/src/pages/Doc/zh/client/index.vue
new file mode 100644
index 00000000..3e57e992
--- /dev/null
+++ b/web/src/pages/Doc/zh/client/index.vue
@@ -0,0 +1,60 @@
+
+
+ 客户端
+本项目也提供了客户端版本，使用Electron开发。支持Windows、Mac及Linux。
+目前功能比较简单：
+1.支持新建、打开文件进行编辑；
+2.支持查看最近编辑文件列表；
+3.支持文件的复制、删除、重命名；
+下载
+你可以直接下载对应的客户端安装使用，提供了两个下载地址：
+Github：releases。
+百度云盘：地址。
+开发
+如果有需要，你也可以进行二次开发。
+clone
+git clone https://github.com/wanglin2/mind-map.git
+cd mind-map
+git checkout electron
+
+启动服务
+在项目根目录下执行：
+cd simple-mind-map
+npm i
+npm link
+cd ..
+cd web
+npm i
+npm link simple-mind-map
+npm run electron:serve
+
+打包客户端
+你至少需要两台电脑，一台Windows和一台Mac。
+打包Windows应用：
+npm run electron:build-win
+
+打包Mac应用：
+npm run electron:build-mac
+
+打包Linux应用：
+npm run electron:build-linux
+
+打包全部应用：
+npm run electron:build-all
+
+根据你的电脑系统自动打包：
+npm run electron:build
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md
index 9b4240b7..b84b65b9 100644
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -25,11 +25,11 @@ const mindMap = new MindMap({
| 字段名称 | 类型 | 默认值 | 描述 | 是否必填 |
| -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ | -------- |
| el | Element | | 容器元素，必须为DOM元素 | 是 |
-| data | Object | {} | 思维导图数据，可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) | |
+| data | Object | {} | 思维导图数据，可参考：[exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) | |
| layout | String | logicalStructure | 布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图）、timeline（v0.5.4+，时间轴）、timeline2（v0.5.4+，上下交替型时间轴）、fishbone（v0.5.4+，鱼骨图） | |
| fishboneDeg（v0.5.4+） | Number | 45 | 设置鱼骨结构图的斜线角度 | |
| theme | String | default | 主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classic4（脑图经典4，v0.2.0+）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫）、simpleBlack（v0.5.4+简约黑）、courseGreen（v0.5.4+课程绿）、coffee（v0.5.4+咖啡）、redSpirit（v0.5.4+红色精神）、blackHumour（v0.5.4+黑色幽默）、lateNightOffice（v0.5.4+深夜办公室）、blackGold（v0.5.4+黑金）、avocado（v.5.10-fix.2+牛油果）、autumn（v.5.10-fix.2+秋天）、orangeJuice（v.5.10-fix.2+橙汁） | |
-| themeConfig | Object | {} | 主题配置，会和所选择的主题进行合并，可用字段可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js) | |
+| themeConfig | Object | {} | 主题配置，会和所选择的主题进行合并，可用字段可参考：[default.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js) | |
| scaleRatio | Number | 0.1 | 放大缩小的增量比例 | |
| maxTag | Number | 5 | 节点里最多显示的标签数量，多余的会被丢弃 | |
| exportPadding | Number | 20 | 导出图片时的内边距 | |
@@ -62,6 +62,11 @@ const mindMap = new MindMap({
| alwaysShowExpandBtn（v0.5.8+） | Boolean | false | 是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示 | |
| iconList（v0.5.8+） | Array | [] | 扩展节点可插入的图标，数组的每一项为一个对象，对象详细结构请参考下方【图标配置】表格 | |
| maxNodeCacheCount（v0.5.10+） | Number | 1000 | 节点最大缓存数量。为了优化性能，内部会维护一个节点缓存池，用来复用节点，通过该属性可以指定池的最大缓存数量 | |
+| defaultAssociativeLineText（v0.5.11+） | String | 关联 | 关联线默认文字 | |
+| fitPadding（v0.6.0+） | Number | 50 | 思维导图适应画布大小时的内边距，单位：px | |
+| enableCtrlKeyNodeSelection（v0.6.0+） | Boolean | true | 是否开启按住ctrl键多选节点的功能 | |
+| useLeftKeySelectionRightKeyDrag（v0.6.0+） | Boolean | false | 设置为左键多选节点，右键拖动画布 | |
+| beforeTextEdit（v0.6.0+） | Function/null | null | 节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例 | |
### 水印配置
@@ -138,6 +143,12 @@ mindMap.setTheme('主题名称')
## 实例方法
+### destroy()
+
+> v0.6.0+
+
+销毁思维导图。会移除注册的插件、移除监听的事件、删除画布的所有节点。
+
### getSvgData({ paddingX = 0, paddingY = 0 })
> v0.3.0+
@@ -199,7 +210,7 @@ mindMap.setTheme('主题名称')
| mousemove | el元素的鼠标移动事件 | e（事件对象）、this（Event事件类实例） |
| drag | 如果是按住左键拖动的话会触发拖动事件 | e（事件对象）、this（Event事件类实例） |
| mouseup | el元素的鼠标松开事件 | e（事件对象）、this（Event事件类实例） |
-| mousewheel | 鼠标滚动事件 | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例） |
+| mousewheel | 鼠标滚动事件 | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例）、isTouchPad（v0.6.1+，是否是触控板触发的事件） |
| contextmenu | svg画布的鼠标右键菜单事件 | e（事件对象） |
| node_click | 节点的单击事件 | this（节点实例）、e（事件对象） |
| node_mousedown | 节点的鼠标按下事件 | this（节点实例）、e（事件对象） |
@@ -293,8 +304,8 @@ mindMap.updateConfig({
| SELECT_ALL | 全选 | |
| BACK | 回退指定的步数 | step（要回退的步数，默认为1） |
| FORWARD | 前进指定的步数 | step（要前进的步数，默认为1） |
-| INSERT_NODE | 插入同级节点，操作节点为当前激活的节点或指定节点，如果有多个激活节点，只会对第一个有效 | openEdit（v0.4.6+，是否激活新插入的节点并进入编辑模式，默认为`true`）、 appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）、 appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js)） |
-| INSERT_CHILD_NODE | 插入子节点，操作节点为当前激活的节点或指定节点 | openEdit（v0.4.6+，是否激活新插入的节点并进入编辑模式，默认为`true`）、 appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）、 appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js)） |
+| INSERT_NODE | 插入同级节点，操作节点为当前激活的节点或指定节点，如果有多个激活节点，只会对第一个有效 | openEdit（v0.4.6+，是否激活新插入的节点并进入编辑模式，默认为`true`）、 appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）、 appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考[exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js)） |
+| INSERT_CHILD_NODE | 插入子节点，操作节点为当前激活的节点或指定节点 | openEdit（v0.4.6+，是否激活新插入的节点并进入编辑模式，默认为`true`）、 appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）、 appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考[exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js)） |
| UP_NODE | 上移节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的第一个节点使用无效 | |
| DOWN_NODE | 操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的最后一个节点使用无效 | |
| REMOVE_NODE | 删除节点，操作节点为当前激活的节点或指定节点 | appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组） |
@@ -310,10 +321,10 @@ mindMap.updateConfig({
| SET_NODE_DATA | 更新节点数据，即更新节点数据对象里`data`对象的数据 | node（要设置的节点）、data（对象，要更新的数据，如`{expand: true}`） |
| SET_NODE_TEXT | 设置节点文本 | node（要设置的节点）、text（要设置的文本字符串，换行可以使用`\n`）、richText（v0.4.0+，如果要设置的是富文本字符，需要设为`true`） |
| SET_NODE_IMAGE | 设置节点图片 | node（要设置的节点）、imgData（对象，图片信息，结构为：`{url, title, width, height}`，图片的宽高必须要传） |
-| SET_NODE_ICON | 设置节点图标 | node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js)文件里的`nodeIconList`列表里获取到，图标名称为`type_name`，如`['priority_1']`） |
+| SET_NODE_ICON | 设置节点图标 | node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在[icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js)文件里的`nodeIconList`列表里获取到，图标名称为`type_name`，如`['priority_1']`） |
| SET_NODE_HYPERLINK | 设置节点超链接 | node（要设置的节点）、link（超链接地址）、title（超链接名称，可选） |
| SET_NODE_NOTE | 设置节点备注 | node（要设置的节点）、note（备注文字） |
-| SET_NODE_TAG | 设置节点标签 | node（要设置的节点）、tag（字符串数组，内置颜色信息可在[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js)里获取到） |
+| SET_NODE_TAG | 设置节点标签 | node（要设置的节点）、tag（字符串数组，内置颜色信息可在[constant.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js)里获取到） |
| INSERT_AFTER（v0.1.5+） | 将节点移动到另一个节点的后面 | node（要移动的节点）、 exist（目标节点） |
| INSERT_BEFORE（v0.1.5+） | 将节点移动到另一个节点的前面 | node（要移动的节点）、 exist（目标节点） |
| MOVE_NODE_TO（v0.1.5+） | 移动一个节点作为另一个节点的子节点 | node（要移动的节点）、 toNode（目标节点） |
@@ -321,7 +332,7 @@ mindMap.updateConfig({
| REMOVE_GENERALIZATION（v0.2.0+） | 删除节点概要 | |
| SET_NODE_CUSTOM_POSITION（v0.2.0+） | 设置节点自定义位置 | node（要设置的节点）、 left（自定义的x坐标，默认为undefined）、 top（自定义的y坐标，默认为undefined） |
| RESET_LAYOUT（v0.2.0+） | 一键整理布局 | |
-| SET_NODE_SHAPE（v0.2.4+） | 设置节点形状 | node（要设置的节点）、shape（形状，全部形状：https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/Shape.js） |
+| SET_NODE_SHAPE（v0.2.4+） | 设置节点形状 | node（要设置的节点）、shape（形状，全部形状：[Shape.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/core/render/node/Shape.js)） |
### setData(data)
diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue
index 3ebd890d..21986e0e 100644
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -39,7 +39,7 @@
data
Object
{}
-思维导图数据，可参考：https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js
+思维导图数据，可参考：exampleData.js
@@ -67,7 +67,7 @@
themeConfig
Object
{}
-主题配置，会和所选择的主题进行合并，可用字段可参考：https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js
+主题配置，会和所选择的主题进行合并，可用字段可参考：default.js
@@ -294,6 +294,41 @@
节点最大缓存数量。为了优化性能，内部会维护一个节点缓存池，用来复用节点，通过该属性可以指定池的最大缓存数量
+
+defaultAssociativeLineText（v0.5.11+）
+String
+关联
+关联线默认文字
+
+
+fitPadding（v0.6.0+）
+Number
+50
+思维导图适应画布大小时的内边距，单位：px
+
+
+enableCtrlKeyNodeSelection（v0.6.0+）
+Boolean
+true
+是否开启按住ctrl键多选节点的功能
+
+
+useLeftKeySelectionRightKeyDrag（v0.6.0+）
+Boolean
+false
+设置为左键多选节点，右键拖动画布
+
+
+beforeTextEdit（v0.6.0+）
+Function/null
+null
+节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例
+
水印配置
@@ -413,6 +448,11 @@ mindMap.setTheme('主题名称')
当前注册的所有插件列表。
实例方法
+destroy()
+
+v0.6.0+
+
+销毁思维导图。会移除注册的插件、移除监听的事件、删除画布的所有节点。
getSvgData({ paddingX = 0, paddingY = 0 })
v0.3.0+
@@ -507,7 +547,7 @@ mindMap.setTheme('主题名称')
mousewheel
鼠标滚动事件
-e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例）
+e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例）、isTouchPad（v0.6.1+，是否是触控板触发的事件）
contextmenu
@@ -690,12 +730,12 @@ mindMap.setTheme('主题名称')
INSERT_NODE
插入同级节点，操作节点为当前激活的节点或指定节点，如果有多个激活节点，只会对第一个有效
-openEdit（v0.4.6+，是否激活新插入的节点并进入编辑模式，默认为true）、 appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）、 appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js）
+openEdit（v0.4.6+，是否激活新插入的节点并进入编辑模式，默认为true）、 appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）、 appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考exampleData.js）
INSERT_CHILD_NODE
插入子节点，操作节点为当前激活的节点或指定节点
-openEdit（v0.4.6+，是否激活新插入的节点并进入编辑模式，默认为true）、 appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）、 appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js）
+openEdit（v0.4.6+，是否激活新插入的节点并进入编辑模式，默认为true）、 appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）、 appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考exampleData.js）
UP_NODE
@@ -775,7 +815,7 @@ mindMap.setTheme('主题名称')
SET_NODE_ICON
设置节点图标
-node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js文件里的nodeIconList列表里获取到，图标名称为type_name，如['priority_1']）
+node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在icons.js文件里的nodeIconList列表里获取到，图标名称为type_name，如['priority_1']）
SET_NODE_HYPERLINK
@@ -790,7 +830,7 @@ mindMap.setTheme('主题名称')
SET_NODE_TAG
设置节点标签
-node（要设置的节点）、tag（字符串数组，内置颜色信息可在https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js里获取到）
+node（要设置的节点）、tag（字符串数组，内置颜色信息可在constant.js里获取到）
INSERT_AFTER（v0.1.5+）
@@ -830,7 +870,7 @@ mindMap.setTheme('主题名称')
SET_NODE_SHAPE（v0.2.4+）
设置节点形状
-node（要设置的节点）、shape（形状，全部形状：https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/Shape.js）
+node（要设置的节点）、shape（形状，全部形状：Shape.js）
diff --git a/web/src/pages/Doc/zh/course10/index.md b/web/src/pages/Doc/zh/course10/index.md
index 542350d1..9965345f 100644
--- a/web/src/pages/Doc/zh/course10/index.md
+++ b/web/src/pages/Doc/zh/course10/index.md
@@ -5,7 +5,8 @@
`simple-mind-map`内置了很多主题，可以通过如下方式获取到所有的内置主题列表：
```js
-import { themeList } from 'simple-mind-map/src/utils/constant'
+import { themeList } from 'simple-mind-map/src/constants/constant'
+// import { themeList } from 'simple-mind-map/src/utils/constant' v0.6.0以下版本使用该路径
```
可以在实例化`simple-mind-map`时指定使用的主题：
diff --git a/web/src/pages/Doc/zh/course10/index.vue b/web/src/pages/Doc/zh/course10/index.vue
index 99eae284..62efe472 100644
--- a/web/src/pages/Doc/zh/course10/index.vue
+++ b/web/src/pages/Doc/zh/course10/index.vue
@@ -3,7 +3,8 @@
主题
使用和切换主题
simple-mind-map内置了很多主题，可以通过如下方式获取到所有的内置主题列表：
-import { themeList } from 'simple-mind-map/src/utils/constant'
+import { themeList } from 'simple-mind-map/src/constants/constant'
+// import { themeList } from 'simple-mind-map/src/utils/constant' v0.6.0以下版本使用该路径
可以在实例化simple-mind-map时指定使用的主题：
new MindMap({
diff --git a/web/src/pages/Doc/zh/course17/index.md b/web/src/pages/Doc/zh/course17/index.md
index 551a863b..ffbfba7e 100644
--- a/web/src/pages/Doc/zh/course17/index.md
+++ b/web/src/pages/Doc/zh/course17/index.md
@@ -60,6 +60,8 @@ mindMap.export('png', true, '文件名')
mindMap.export('pdf', true, '文件名')
```
+> 从v0.6.0+，要导出pdf，需要额外注册一个ExportPDF插件。
+
### 导出为svg
导出为`svg`可以传递的参数如下：
diff --git a/web/src/pages/Doc/zh/course17/index.vue b/web/src/pages/Doc/zh/course17/index.vue
index 88b7ed21..92520b32 100644
--- a/web/src/pages/Doc/zh/course17/index.vue
+++ b/web/src/pages/Doc/zh/course17/index.vue
@@ -38,6 +38,9 @@ mindMap.export('json', mindMap.export('png', true, '文件名')
mindMap.export('pdf', true, '文件名')
+
+从v0.6.0+，要导出pdf，需要额外注册一个ExportPDF插件。
+
导出为svg
导出为svg可以传递的参数如下：
mindMap.export(type, isDownload, fileName, plusCssText = '')
diff --git a/web/src/pages/Doc/zh/course8/index.md b/web/src/pages/Doc/zh/course8/index.md
index b9c866ba..73fd1857 100644
--- a/web/src/pages/Doc/zh/course8/index.md
+++ b/web/src/pages/Doc/zh/course8/index.md
@@ -8,7 +8,8 @@
```js
import MindMap from 'simple-mind-map'
-import RichText from 'simple-mind-map/src/RichText.js'
+import RichText from 'simple-mind-map/src/plugins/RichText.js'
+// import RichText from 'simple-mind-map/src/RichText.js' v0.6.0以下版本使用该路径
// 动态开启富文本编辑
mindMap.addPlugin(RichText)
diff --git a/web/src/pages/Doc/zh/course8/index.vue b/web/src/pages/Doc/zh/course8/index.vue
index 89d9465d..5be90743 100644
--- a/web/src/pages/Doc/zh/course8/index.vue
+++ b/web/src/pages/Doc/zh/course8/index.vue
@@ -5,7 +5,8 @@
富文本编辑的优势就是可以对一个节点内的部分文本设置样式，所以通常来说还需要搭配一个悬浮的工具栏，这个功能默认也是没有的，涉及到UI的功能一般都不提供，所以也需要你自行开发，如何渲染这个悬浮工具栏可以阅读如何渲染富文本的悬浮工具栏。
如果也你需要动态切换是否开启富文本编辑的功能可以参考如下代码：
import MindMap from 'simple-mind-map'
-import RichText from 'simple-mind-map/src/RichText.js'
+import RichText from 'simple-mind-map/src/plugins/RichText.js'
+// import RichText from 'simple-mind-map/src/RichText.js' v0.6.0以下版本使用该路径
// 动态开启富文本编辑
mindMap.addPlugin(RichText)
diff --git a/web/src/pages/Doc/zh/doExport/index.md b/web/src/pages/Doc/zh/doExport/index.md
index 14e753fa..4ff7adff 100644
--- a/web/src/pages/Doc/zh/doExport/index.md
+++ b/web/src/pages/Doc/zh/doExport/index.md
@@ -6,7 +6,8 @@
```js
import MindMap from 'simple-mind-map'
-import Export from 'simple-mind-map/src/Export.js'
+import Export from 'simple-mind-map/src/plugins/Export.js'
+// import Export from 'simple-mind-map/src/Export.js' v0.6.0以下版本使用该路径
MindMap.usePlugin(Export)
```
@@ -73,6 +74,13 @@ svg(
导出为`pdf`，和其他导出方法不一样，这个方法不会返回数据，会直接触发下载。
+> v0.6.0版本以后，需要额外注册一个ExportPDF插件
+
+```js
+import ExportPDF from 'simple-mind-map/src/plugins/ExportPDF.js'
+MindMap.usePlugin(ExportPDF)
+```
+
### json(name, withConfig)
`name`：暂时没有用处，传空字符串即可
diff --git a/web/src/pages/Doc/zh/doExport/index.vue b/web/src/pages/Doc/zh/doExport/index.vue
index d3c0074b..155596d0 100644
--- a/web/src/pages/Doc/zh/doExport/index.vue
+++ b/web/src/pages/Doc/zh/doExport/index.vue
@@ -4,7 +4,8 @@
Export插件提供导出的功能。
注册
import MindMap from 'simple-mind-map'
-import Export from 'simple-mind-map/src/Export.js'
+import Export from 'simple-mind-map/src/plugins/Export.js'
+// import Export from 'simple-mind-map/src/Export.js' v0.6.0以下版本使用该路径
MindMap.usePlugin(Export)
@@ -62,6 +63,12 @@ a.click()
name：文件名称
导出为pdf，和其他导出方法不一样，这个方法不会返回数据，会直接触发下载。
+
+v0.6.0版本以后，需要额外注册一个ExportPDF插件
+
+import ExportPDF from 'simple-mind-map/src/plugins/ExportPDF.js'
+MindMap.usePlugin(ExportPDF)
+
json(name, withConfig)
name：暂时没有用处，传空字符串即可
withConfig``：Boolean, 默认为true，数据中是否包含配置，否则为纯思维导图节点数据
diff --git a/web/src/pages/Doc/zh/drag/index.md b/web/src/pages/Doc/zh/drag/index.md
index 6bfa1241..fe47d493 100644
--- a/web/src/pages/Doc/zh/drag/index.md
+++ b/web/src/pages/Doc/zh/drag/index.md
@@ -12,7 +12,8 @@
```js
import MindMap from 'simple-mind-map'
-import Drag from 'simple-mind-map/src/Drag.js'
+import Drag from 'simple-mind-map/src/plugins/Drag.js'
+// import Drag from 'simple-mind-map/src/Drag.js' v0.6.0以下版本使用该路径
MindMap.usePlugin(Drag)
```
diff --git a/web/src/pages/Doc/zh/drag/index.vue b/web/src/pages/Doc/zh/drag/index.vue
index c31f23d4..56932b8f 100644
--- a/web/src/pages/Doc/zh/drag/index.vue
+++ b/web/src/pages/Doc/zh/drag/index.vue
@@ -7,7 +7,8 @@
配置请参考MindMap类的实例化选项。
注册
import MindMap from 'simple-mind-map'
-import Drag from 'simple-mind-map/src/Drag.js'
+import Drag from 'simple-mind-map/src/plugins/Drag.js'
+// import Drag from 'simple-mind-map/src/Drag.js' v0.6.0以下版本使用该路径
MindMap.usePlugin(Drag)
diff --git a/web/src/pages/Doc/zh/introduction/index.md b/web/src/pages/Doc/zh/introduction/index.md
index 2331bb2f..ea1a5f09 100644
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@@ -3,6 +3,8 @@
`simple-mind-map`是一个简单&强大的Web思维导图库，不依赖任何特定框架。可以帮助你快速开发思维导图产品。
> 如果你只是想使用思维导图，你也完全可以把本项目的demo作为一个普通的在线思维导图工具使用。点击右上角的【在线示例】开始使用吧。
+>
+> 另外也提供了客户端可供下载，支持`Windows`、`Mac`及`Linux`，[点此了解更多](/mind-map/#/doc/zh/client)。
## 特性
@@ -52,6 +54,8 @@
[如何在canvas中模拟css的背景图片样式](https://juejin.cn/post/7204854015463538744)
+[我的第一个Electron应用](https://juejin.cn/post/7233012756314701884)
+
## 特别说明
本项目可用于学习和参考，用于实际项目时请先深度体验一下是否能满足您的需求。
@@ -117,4 +121,8 @@
Think
+
+
+ 志斌
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/introduction/index.vue b/web/src/pages/Doc/zh/introduction/index.vue
index 47ae9f16..07144ac3 100644
--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@@ -4,22 +4,23 @@
simple-mind-map是一个简单&强大的Web思维导图库，不依赖任何特定框架。可以帮助你快速开发思维导图产品。
如果你只是想使用思维导图，你也完全可以把本项目的demo作为一个普通的在线思维导图工具使用。点击右上角的【在线示例】开始使用吧。
+另外也提供了客户端可供下载，支持Windows、Mac及Linux，点此了解更多。
特性
-
-
-
-
-
-
-
-
-
-
-json、png、svg、pdf、markdown，支持从json、xmind、markdown导入json、png、svg、pdf、markdown，支持从json、xmind、markdown导入
仓库目录介绍
1.simple-mind-map
@@ -27,11 +28,11 @@
2.web
使用simple-mind-map库，基于vue2.x、ElementUI搭建的在线思维导图。特性：
-
-
-
-
-
+
+
+
+
+
提供文档页面服务。
3.dist
@@ -41,6 +42,7 @@
只需百来行代码，为你的Web页面增加本地文件操作能力，确定不试试吗？
+
特别说明
本项目可用于学习和参考，用于实际项目时请先深度体验一下是否能满足您的需求。
本项目可能没有完整测试到每一个功能点，所以可能存在bug，另外，当节点数量非常多的时候，性能也存在一些问题，因为每个人能接受的卡顿程度不一样，所以你可以自行测试节点数量上限。
@@ -78,6 +80,10 @@
Think
+
+
+ 志斌
+
diff --git a/web/src/pages/Doc/zh/keyCommand/index.md b/web/src/pages/Doc/zh/keyCommand/index.md
index 8de93543..c332bff0 100644
--- a/web/src/pages/Doc/zh/keyCommand/index.md
+++ b/web/src/pages/Doc/zh/keyCommand/index.md
@@ -8,7 +8,7 @@
添加快捷键
-`key`：快捷键按键，按键值可以通过[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/keyMap.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/keyMap.js)查看。示例：
+`key`：快捷键按键，按键值可以通过[keyMap.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/core/command/keyMap.js)查看。示例：
```js
// 单个按键
diff --git a/web/src/pages/Doc/zh/keyCommand/index.vue b/web/src/pages/Doc/zh/keyCommand/index.vue
index 7b6b7efd..163180d4 100644
--- a/web/src/pages/Doc/zh/keyCommand/index.vue
+++ b/web/src/pages/Doc/zh/keyCommand/index.vue
@@ -5,7 +5,7 @@
方法
addShortcut(key, fn)
添加快捷键
-key：快捷键按键，按键值可以通过https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/keyMap.js查看。示例：
+key：快捷键按键，按键值可以通过keyMap.js查看。示例：
// 单个按键
mindMap.keyCommand.addShortcut('Enter', () => {})
// 或
diff --git a/web/src/pages/Doc/zh/keyboardNavigation/index.md b/web/src/pages/Doc/zh/keyboardNavigation/index.md
index abe83fdd..5a7cd801 100644
--- a/web/src/pages/Doc/zh/keyboardNavigation/index.md
+++ b/web/src/pages/Doc/zh/keyboardNavigation/index.md
@@ -8,7 +8,8 @@
```js
import MindMap from 'simple-mind-map'
-import KeyboardNavigation from 'simple-mind-map/src/KeyboardNavigation.js'
+import KeyboardNavigation from 'simple-mind-map/src/plugins/KeyboardNavigation.js'
+// import KeyboardNavigation from 'simple-mind-map/src/KeyboardNavigation.js' v0.6.0以下版本使用该路径
MindMap.usePlugin(KeyboardNavigation)
```
diff --git a/web/src/pages/Doc/zh/keyboardNavigation/index.vue b/web/src/pages/Doc/zh/keyboardNavigation/index.vue
index ea38b890..b51a9964 100644
--- a/web/src/pages/Doc/zh/keyboardNavigation/index.vue
+++ b/web/src/pages/Doc/zh/keyboardNavigation/index.vue
@@ -7,7 +7,8 @@
KeyboardNavigation插件提供键盘导航的功能，也就是当你按下方向键时会自动寻找下一个节点并激活
注册
import MindMap from 'simple-mind-map'
-import KeyboardNavigation from 'simple-mind-map/src/KeyboardNavigation.js'
+import KeyboardNavigation from 'simple-mind-map/src/plugins/KeyboardNavigation.js'
+// import KeyboardNavigation from 'simple-mind-map/src/KeyboardNavigation.js' v0.6.0以下版本使用该路径
MindMap.usePlugin(KeyboardNavigation)
diff --git a/web/src/pages/Doc/zh/miniMap/index.md b/web/src/pages/Doc/zh/miniMap/index.md
index 3c6939d7..ebd00303 100644
--- a/web/src/pages/Doc/zh/miniMap/index.md
+++ b/web/src/pages/Doc/zh/miniMap/index.md
@@ -8,7 +8,8 @@
```js
import MindMap from 'simple-mind-map'
-import MiniMap from 'simple-mind-map/src/MiniMap.js'
+import MiniMap from 'simple-mind-map/src/plugins/MiniMap.js'
+// import MiniMap from 'simple-mind-map/src/MiniMap.js' v0.6.0以下版本使用该路径
MindMap.usePlugin(MiniMap)
```
diff --git a/web/src/pages/Doc/zh/miniMap/index.vue b/web/src/pages/Doc/zh/miniMap/index.vue
index ba3b686c..a5ed0271 100644
--- a/web/src/pages/Doc/zh/miniMap/index.vue
+++ b/web/src/pages/Doc/zh/miniMap/index.vue
@@ -7,7 +7,8 @@
用于帮助快速开发小地图功能，小地图由两部分组成，一个是当前的画布内容，一个是视口框，当缩放、移动、元素过多时画布上可能只显示了思维导图的部分内容，可以通过视口框来查看当前视口所在位置，以及可以通过在小地图上拖动来快速定位。
注册
import MindMap from 'simple-mind-map'
-import MiniMap from 'simple-mind-map/src/MiniMap.js'
+import MiniMap from 'simple-mind-map/src/plugins/MiniMap.js'
+// import MiniMap from 'simple-mind-map/src/MiniMap.js' v0.6.0以下版本使用该路径
MindMap.usePlugin(MiniMap)
diff --git a/web/src/pages/Doc/zh/node/index.md b/web/src/pages/Doc/zh/node/index.md
index 0c25c4de..851f5905 100644
--- a/web/src/pages/Doc/zh/node/index.md
+++ b/web/src/pages/Doc/zh/node/index.md
@@ -56,6 +56,12 @@
## 方法
+### hasCustomStyle()
+
+> v0.6.2+
+
+获取是否设置了自定义样式。
+
### getSize()
通过重新创建节点内容更新节点的宽高，返回一个布尔值，代表是否宽高发生了变化
diff --git a/web/src/pages/Doc/zh/node/index.vue b/web/src/pages/Doc/zh/node/index.vue
index bdc643fc..7d6e31ce 100644
--- a/web/src/pages/Doc/zh/node/index.vue
+++ b/web/src/pages/Doc/zh/node/index.vue
@@ -31,6 +31,11 @@
节点是否正在拖拽中
方法
+hasCustomStyle()
+
+v0.6.2+
+
+获取是否设置了自定义样式。
getSize()
通过重新创建节点内容更新节点的宽高，返回一个布尔值，代表是否宽高发生了变化
render()
diff --git a/web/src/pages/Doc/zh/richText/index.md b/web/src/pages/Doc/zh/richText/index.md
index fe1496c0..dcca3e9d 100644
--- a/web/src/pages/Doc/zh/richText/index.md
+++ b/web/src/pages/Doc/zh/richText/index.md
@@ -20,7 +20,8 @@
```js
import MindMap from 'simple-mind-map'
-import RichText from 'simple-mind-map/src/RichText.js'
+import RichText from 'simple-mind-map/src/plugins/RichText.js'
+// import RichText from 'simple-mind-map/src/RichText.js' v0.6.0以下版本使用该路径
MindMap.usePlugin(RichText, opt?)
```
diff --git a/web/src/pages/Doc/zh/richText/index.vue b/web/src/pages/Doc/zh/richText/index.vue
index 4fe77a03..510f1184 100644
--- a/web/src/pages/Doc/zh/richText/index.vue
+++ b/web/src/pages/Doc/zh/richText/index.vue
@@ -17,7 +17,8 @@
v0.5.7+的版本直接使用html2canvas转换整个svg，速度不再是问题，但是目前存在一个bug，就是节点的颜色导出后不生效。
注册
import MindMap from 'simple-mind-map'
-import RichText from 'simple-mind-map/src/RichText.js'
+import RichText from 'simple-mind-map/src/plugins/RichText.js'
+// import RichText from 'simple-mind-map/src/RichText.js' v0.6.0以下版本使用该路径
MindMap.usePlugin(RichText, opt?)
diff --git a/web/src/pages/Doc/zh/select/index.md b/web/src/pages/Doc/zh/select/index.md
index 1e725c67..a1767936 100644
--- a/web/src/pages/Doc/zh/select/index.md
+++ b/web/src/pages/Doc/zh/select/index.md
@@ -6,7 +6,8 @@
```js
import MindMap from 'simple-mind-map'
-import Select from 'simple-mind-map/src/Select.js'
+import Select from 'simple-mind-map/src/plugins/Select.js'
+// import Select from 'simple-mind-map/src/Select.js' v0.6.0以下版本使用该路径
MindMap.usePlugin(Select)
```
diff --git a/web/src/pages/Doc/zh/select/index.vue b/web/src/pages/Doc/zh/select/index.vue
index 4360db88..ddc0852e 100644
--- a/web/src/pages/Doc/zh/select/index.vue
+++ b/web/src/pages/Doc/zh/select/index.vue
@@ -4,7 +4,8 @@
Select插件提供鼠标右键多选节点的功能。
注册
import MindMap from 'simple-mind-map'
-import Select from 'simple-mind-map/src/Select.js'
+import Select from 'simple-mind-map/src/plugins/Select.js'
+// import Select from 'simple-mind-map/src/Select.js' v0.6.0以下版本使用该路径
MindMap.usePlugin(Select)
diff --git a/web/src/pages/Doc/zh/start/index.md b/web/src/pages/Doc/zh/start/index.md
index 8b0bc883..97087456 100644
--- a/web/src/pages/Doc/zh/start/index.md
+++ b/web/src/pages/Doc/zh/start/index.md
@@ -86,6 +86,7 @@ const mindMap = new MindMap({
```bash
git clone https://github.com/wanglin2/mind-map.git
+cd mind-map
cd simple-mind-map
npm i
npm link
diff --git a/web/src/pages/Doc/zh/start/index.vue b/web/src/pages/Doc/zh/start/index.vue
index 11e5cebd..826934db 100644
--- a/web/src/pages/Doc/zh/start/index.vue
+++ b/web/src/pages/Doc/zh/start/index.vue
@@ -58,6 +58,7 @@
如果你只是使用库的话可以不用阅读此小节。
本地开发
git clone https://github.com/wanglin2/mind-map.git
+cd mind-map
cd simple-mind-map
npm i
npm link
diff --git a/web/src/pages/Doc/zh/touchEvent/index.md b/web/src/pages/Doc/zh/touchEvent/index.md
new file mode 100644
index 00000000..cd0dabb5
--- /dev/null
+++ b/web/src/pages/Doc/zh/touchEvent/index.md
@@ -0,0 +1,18 @@
+# TouchEvent插件
+
+> v0.6.0+
+
+该插件用户支持移动端触摸事件。原理是监听移动端的`touchstart`、`touchmove`、`touchend`事件，然后派发对应的鼠标事件。
+
+目前支持单指触摸移动画布、点击激活节点，双指缩放画布，单指双击复位和编辑节点。
+
+## 注册
+
+```js
+import MindMap from 'simple-mind-map'
+import TouchEvent from 'simple-mind-map/src/plugins/TouchEvent.js'
+
+MindMap.usePlugin(TouchEvent)
+```
+
+注册完且实例化`MindMap`后可通过`mindMap.touchEvent`获取到该实例。
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/touchEvent/index.vue b/web/src/pages/Doc/zh/touchEvent/index.vue
new file mode 100644
index 00000000..02df092f
--- /dev/null
+++ b/web/src/pages/Doc/zh/touchEvent/index.vue
@@ -0,0 +1,28 @@
+
+
+ TouchEvent插件
+
+v0.6.0+
+
+该插件用户支持移动端触摸事件。原理是监听移动端的touchstart、touchmove、touchend事件，然后派发对应的鼠标事件。
+目前支持单指触摸移动画布、点击激活节点，双指缩放画布，单指双击复位和编辑节点。
+注册
+import MindMap from 'simple-mind-map'
+import TouchEvent from 'simple-mind-map/src/plugins/TouchEvent.js'
+
+MindMap.usePlugin(TouchEvent)
+
+注册完且实例化MindMap后可通过mindMap.touchEvent获取到该实例。
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/view/index.md b/web/src/pages/Doc/zh/view/index.md
index a53ecad9..218b318c 100644
--- a/web/src/pages/Doc/zh/view/index.md
+++ b/web/src/pages/Doc/zh/view/index.md
@@ -4,6 +4,12 @@
## 方法
+### fit()
+
+> v0.6.0+
+
+缩放思维导图至适应画布。
+
### translateX(step)
`x`方向进行平移，`step`：要平移的像素
diff --git a/web/src/pages/Doc/zh/view/index.vue b/web/src/pages/Doc/zh/view/index.vue
index 101af875..d994036a 100644
--- a/web/src/pages/Doc/zh/view/index.vue
+++ b/web/src/pages/Doc/zh/view/index.vue
@@ -3,6 +3,11 @@
View实例
view实例负责视图操作，可通过mindMap.view获取到该实例
方法
+fit()
+
+v0.6.0+
+
+缩放思维导图至适应画布。
translateX(step)
x方向进行平移，step：要平移的像素
translateY(step)
diff --git a/web/src/pages/Doc/zh/watermark/index.md b/web/src/pages/Doc/zh/watermark/index.md
index b4831109..46131553 100644
--- a/web/src/pages/Doc/zh/watermark/index.md
+++ b/web/src/pages/Doc/zh/watermark/index.md
@@ -10,7 +10,8 @@
```js
import MindMap from 'simple-mind-map'
-import Watermark from 'simple-mind-map/src/Watermark.js'
+import Watermark from 'simple-mind-map/src/plugins/Watermark.js'
+// import Watermark from 'simple-mind-map/src/Watermark.js' v0.6.0以下版本使用该路径
MindMap.usePlugin(Watermark)
```
diff --git a/web/src/pages/Doc/zh/watermark/index.vue b/web/src/pages/Doc/zh/watermark/index.vue
index a5bf7884..5b193f53 100644
--- a/web/src/pages/Doc/zh/watermark/index.vue
+++ b/web/src/pages/Doc/zh/watermark/index.vue
@@ -8,7 +8,8 @@
配置请参考MindMap类的实例化选项。
注册
import MindMap from 'simple-mind-map'
-import Watermark from 'simple-mind-map/src/Watermark.js'
+import Watermark from 'simple-mind-map/src/plugins/Watermark.js'
+// import Watermark from 'simple-mind-map/src/Watermark.js' v0.6.0以下版本使用该路径
MindMap.usePlugin(Watermark)
diff --git a/web/src/pages/Edit/components/Contextmenu.vue b/web/src/pages/Edit/components/Contextmenu.vue
index 552fb0d9..db045bf5 100644
--- a/web/src/pages/Edit/components/Contextmenu.vue
+++ b/web/src/pages/Edit/components/Contextmenu.vue
@@ -65,6 +65,7 @@
{{ $t('contextmenu.backCenter') }}
+ Ctrl + Enter
{{ $t('contextmenu.expandAll') }}
@@ -89,6 +90,10 @@
{{ $t('contextmenu.arrangeLayout') }}
Ctrl + L
+
+ {{ $t('contextmenu.fitCanvas') }}
+ Ctrl + i
+
{{ $t('contextmenu.zenMode') }}
{{ isZenMode ? '√' : '' }}
@@ -295,6 +300,9 @@ export default {
isZenMode: !this.isZenMode
})
break
+ case 'FIT_CANVAS':
+ this.mindMap.view.fit()
+ break
default:
this.$bus.$emit('execCommand', key, ...args)
break
diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue
index 862e2d77..21b10b04 100644
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -23,14 +23,15 @@
+
+
diff --git a/web/src/pages/Edit/components/NavigatorToolbar.vue b/web/src/pages/Edit/components/NavigatorToolbar.vue
index e9728d71..8157202f 100644
--- a/web/src/pages/Edit/components/NavigatorToolbar.vue
+++ b/web/src/pages/Edit/components/NavigatorToolbar.vue
@@ -15,6 +15,9 @@
/>
+
+ {{
$t('navigatorToolbar.openMiniMap')
@@ -44,6 +47,7 @@