mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-17 22:08:25 +08:00
Merge branch 'feature' into main
This commit is contained in:
wanglin2
@@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-0b4c0228.9a1b85ac.js" rel="prefetch"><link href="dist/js/chunk-2d0a3179.ecdc0449.js" rel="prefetch"><link href="dist/js/chunk-2d0a514a.6d16a18f.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.fcf43a73.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.4e43a508.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.2151bd9a.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.a1773017.js" rel="prefetch"><link href="dist/js/chunk-2d0ac5dc.434496ae.js" rel="prefetch"><link href="dist/js/chunk-2d0afe0d.106affda.js" rel="prefetch"><link href="dist/js/chunk-2d0b1c6f.40c3a4c6.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.bd367278.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.1d4a5492.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.1ed97f5c.js" rel="prefetch"><link href="dist/js/chunk-2d0b978a.e3dec256.js" rel="prefetch"><link href="dist/js/chunk-2d0b9b64.03e02abe.js" rel="prefetch"><link href="dist/js/chunk-2d0ba309.cad55829.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.bc2402de.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.8e142e17.js" rel="prefetch"><link href="dist/js/chunk-2d0c09f6.46dff9b5.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.5e69748f.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.2b0a3aa0.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.41f869ae.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.d27d7537.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.a826dbb3.js" rel="prefetch"><link href="dist/js/chunk-2d0c4a65.d6ccf037.js" rel="prefetch"><link href="dist/js/chunk-2d0c5538.480c6adf.js" rel="prefetch"><link href="dist/js/chunk-2d0d5cb9.53817128.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.ab7b8752.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.cfa871f6.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.6b307c90.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.10ad3333.js" rel="prefetch"><link href="dist/js/chunk-2d0dd3b1.a4748b26.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.d8e94894.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.2bb0ee69.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.f8eea9ae.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.5f8f761a.js" rel="prefetch"><link href="dist/js/chunk-2d0e4e1f.53e37fe0.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.25303766.js" rel="prefetch"><link href="dist/js/chunk-2d0e9726.588baf8d.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.428d2cf2.js" rel="prefetch"><link href="dist/js/chunk-2d0e9802.6c3450dd.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.37892dce.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.390e6ae8.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.613d8ec9.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.76d5e91c.js" rel="prefetch"><link href="dist/js/chunk-2d20ff53.c0447317.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.999247ea.js" rel="prefetch"><link href="dist/js/chunk-2d216004.6bc315a8.js" rel="prefetch"><link href="dist/js/chunk-2d216037.735c6ef2.js" rel="prefetch"><link href="dist/js/chunk-2d2160a3.667b0cef.js" rel="prefetch"><link href="dist/js/chunk-2d216642.43efb068.js" rel="prefetch"><link href="dist/js/chunk-2d217907.fcb88ac3.js" rel="prefetch"><link href="dist/js/chunk-2d221c76.0f835399.js" rel="prefetch"><link href="dist/js/chunk-2d2254a4.aba788ef.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.4ed5fff9.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.6c80e04d.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.20c08643.js" rel="prefetch"><link href="dist/js/chunk-2d230098.2901ec53.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.c6cec8ad.js" rel="prefetch"><link href="dist/js/chunk-2d2375fa.949e865a.js" rel="prefetch"><link href="dist/js/chunk-2d238428.816b9c47.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/js/chunk-a48508c0.755bad4a.js" rel="prefetch"><link href="dist/css/app.f08aba10.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.77a4e2b5.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d36f5bd6.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.f08aba10.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.d36f5bd6.js"></script><script src="dist/js/app.77a4e2b5.js"></script></body></html>
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-0b4c0228.d16bc076.js" rel="prefetch"><link href="dist/js/chunk-2d0a3179.09a9e943.js" rel="prefetch"><link href="dist/js/chunk-2d0a514a.1ed9e72b.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.6deaeca5.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.54a22da0.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.35d98938.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.e6f73d7a.js" rel="prefetch"><link href="dist/js/chunk-2d0ac5dc.60cca854.js" rel="prefetch"><link href="dist/js/chunk-2d0afe0d.9d477efa.js" rel="prefetch"><link href="dist/js/chunk-2d0b1c6f.2ce2efbe.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.fa8a1448.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.c69acfc6.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.e5fb004d.js" rel="prefetch"><link href="dist/js/chunk-2d0b978a.f8cf18a3.js" rel="prefetch"><link href="dist/js/chunk-2d0b9b64.74778ebe.js" rel="prefetch"><link href="dist/js/chunk-2d0ba309.90c10c16.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.317837bd.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.c7eb53c0.js" rel="prefetch"><link href="dist/js/chunk-2d0c09f6.11d06ad8.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.c796f5a9.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.a76580c3.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.1c42b5f8.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.5aac283d.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.957de630.js" rel="prefetch"><link href="dist/js/chunk-2d0c4a65.cd9f2135.js" rel="prefetch"><link href="dist/js/chunk-2d0c5538.88c61b8a.js" rel="prefetch"><link href="dist/js/chunk-2d0d5cb9.84b9239b.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.7a02f652.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.48b95a81.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.015541ec.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.cee455b8.js" rel="prefetch"><link href="dist/js/chunk-2d0dd3b1.131fde2d.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.bbe358e7.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.c5497b45.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.30c25366.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.2f357c47.js" rel="prefetch"><link href="dist/js/chunk-2d0e4e1f.9e5366fb.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.0eca5330.js" rel="prefetch"><link href="dist/js/chunk-2d0e9726.cb0b7af1.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.9792465b.js" rel="prefetch"><link href="dist/js/chunk-2d0e9802.7b2165cb.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.488ecfcd.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.ded9201c.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.79752ab7.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.33633e99.js" rel="prefetch"><link href="dist/js/chunk-2d20ff53.5a293f49.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.07e1e1c8.js" rel="prefetch"><link href="dist/js/chunk-2d216004.7800d5f8.js" rel="prefetch"><link href="dist/js/chunk-2d216037.f55e8a4f.js" rel="prefetch"><link href="dist/js/chunk-2d2160a3.907f6f9c.js" rel="prefetch"><link href="dist/js/chunk-2d216642.9e7e4c69.js" rel="prefetch"><link href="dist/js/chunk-2d217907.325d840d.js" rel="prefetch"><link href="dist/js/chunk-2d221c76.8f8c1623.js" rel="prefetch"><link href="dist/js/chunk-2d2254a4.8ebe1825.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.0d16e8ba.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.c1a94e96.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.c772670d.js" rel="prefetch"><link href="dist/js/chunk-2d230098.5927b8ca.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.d701f22e.js" rel="prefetch"><link href="dist/js/chunk-2d2375fa.3667bfcc.js" rel="prefetch"><link href="dist/js/chunk-2d238428.b57532b8.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/js/chunk-a48508c0.83e1648b.js" rel="prefetch"><link href="dist/css/app.c2a500f4.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.a2c9b092.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d36f5bd6.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.c2a500f4.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.d36f5bd6.js"></script><script src="dist/js/app.a2c9b092.js"></script></body></html>
|
||||
@@ -92,7 +92,16 @@ const defaultOpt = {
|
||||
// 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms
|
||||
nodeTransitionMoveDuration: 300,
|
||||
// 初始根节点的位置
|
||||
initRootNodePosition: null
|
||||
initRootNodePosition: null,
|
||||
// 导出png、svg、pdf时的图形内边距
|
||||
exportPaddingX: 10,
|
||||
exportPaddingY: 10,
|
||||
// 节点文本编辑框的z-index
|
||||
nodeTextEditZIndex: 3000,
|
||||
// 节点备注浮层的z-index
|
||||
nodeNoteTooltipZIndex: 3000,
|
||||
// 是否在点击了画布外的区域时结束节点文本的编辑状态
|
||||
isEndNodeTextEditOnClickOuter: true
|
||||
}
|
||||
|
||||
// 思维导图
|
||||
@@ -359,7 +368,7 @@ class MindMap {
|
||||
}
|
||||
|
||||
// 获取svg数据
|
||||
getSvgData() {
|
||||
getSvgData({ paddingX = 0, paddingY = 0 }) {
|
||||
const svg = this.svg
|
||||
const draw = this.draw
|
||||
// 保存原始信息
|
||||
@@ -371,6 +380,10 @@ class MindMap {
|
||||
draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
|
||||
// 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
|
||||
const rect = draw.rbox()
|
||||
// 内边距
|
||||
rect.width += paddingX
|
||||
rect.height += paddingY
|
||||
draw.translate(paddingX / 2, paddingY / 2)
|
||||
// 将svg设置为实际内容的宽高
|
||||
svg.size(rect.width, rect.height)
|
||||
// 把实际内容变换
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-mind-map",
|
||||
"version": "0.5.4-fix.1",
|
||||
"version": "0.5.5",
|
||||
"description": "一个简单的web在线思维导图",
|
||||
"authors": [
|
||||
{
|
||||
|
||||
@@ -27,6 +27,7 @@ class Event extends EventEmitter {
|
||||
|
||||
// 绑定函数上下文
|
||||
bindFn() {
|
||||
this.onBodyClick = this.onBodyClick.bind(this)
|
||||
this.onDrawClick = this.onDrawClick.bind(this)
|
||||
this.onMousedown = this.onMousedown.bind(this)
|
||||
this.onMousemove = this.onMousemove.bind(this)
|
||||
@@ -41,6 +42,7 @@ class Event extends EventEmitter {
|
||||
|
||||
// 绑定事件
|
||||
bind() {
|
||||
document.body.addEventListener('click', this.onBodyClick)
|
||||
this.mindMap.svg.on('click', this.onDrawClick)
|
||||
this.mindMap.el.addEventListener('mousedown', this.onMousedown)
|
||||
this.mindMap.svg.on('mousedown', this.onSvgMousedown)
|
||||
@@ -55,6 +57,7 @@ class Event extends EventEmitter {
|
||||
|
||||
// 解绑事件
|
||||
unbind() {
|
||||
document.body.removeEventListener('click', this.onBodyClick)
|
||||
this.mindMap.svg.off('click', this.onDrawClick)
|
||||
this.mindMap.el.removeEventListener('mousedown', this.onMousedown)
|
||||
window.removeEventListener('mousemove', this.onMousemove)
|
||||
@@ -71,6 +74,11 @@ class Event extends EventEmitter {
|
||||
this.emit('draw_click', e)
|
||||
}
|
||||
|
||||
// 页面的单击事件
|
||||
onBodyClick(e) {
|
||||
this.emit('body_click', e)
|
||||
}
|
||||
|
||||
// svg画布的鼠标按下事件
|
||||
onSvgMousedown(e) {
|
||||
this.emit('svg_mousedown', e)
|
||||
|
||||
@@ -28,7 +28,11 @@ class Export {
|
||||
|
||||
// 获取svg数据
|
||||
async getSvgData(domToImage) {
|
||||
let { svg, svgHTML } = this.mindMap.getSvgData()
|
||||
let { exportPaddingX, exportPaddingY } = this.mindMap.opt
|
||||
let { svg, svgHTML } = this.mindMap.getSvgData({
|
||||
paddingX: exportPaddingX,
|
||||
paddingY: exportPaddingY
|
||||
})
|
||||
// 把图片的url转换成data:url类型，否则导出会丢失图片
|
||||
let imageList = svg.find('image')
|
||||
let task = imageList.map(async item => {
|
||||
|
||||
@@ -99,6 +99,9 @@ class RichText {
|
||||
if (!this.textEditNode) {
|
||||
this.textEditNode = document.createElement('div')
|
||||
this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;padding: 3px 5px;margin-left: -5px;margin-top: -3px;`
|
||||
this.textEditNode.addEventListener('click', e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
document.body.appendChild(this.textEditNode)
|
||||
}
|
||||
// 原始宽高
|
||||
@@ -107,6 +110,7 @@ class RichText {
|
||||
let originHeight = g.attr('data-height')
|
||||
// 使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见
|
||||
let bgColor = node.style.merge('fillColor')
|
||||
this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
|
||||
this.textEditNode.style.backgroundColor = bgColor === 'transparent' ? '#fff' : bgColor
|
||||
this.textEditNode.style.minWidth = originWidth + 'px'
|
||||
this.textEditNode.style.minHeight = originHeight + 'px'
|
||||
|
||||
@@ -23,6 +23,12 @@ export default class TextEdit {
|
||||
// 隐藏文本编辑框
|
||||
this.hideEditTextBox()
|
||||
})
|
||||
this.mindMap.on('body_click', () => {
|
||||
// 隐藏文本编辑框
|
||||
if (this.mindMap.opt.isEndNodeTextEditOnClickOuter) {
|
||||
this.hideEditTextBox()
|
||||
}
|
||||
})
|
||||
this.mindMap.on('svg_mousedown', () => {
|
||||
// 隐藏文本编辑框
|
||||
this.hideEditTextBox()
|
||||
@@ -73,6 +79,9 @@ export default class TextEdit {
|
||||
this.textEditNode.addEventListener('keyup', e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
this.textEditNode.addEventListener('click', e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
document.body.appendChild(this.textEditNode)
|
||||
}
|
||||
let scale = this.mindMap.view.scale
|
||||
@@ -80,6 +89,7 @@ export default class TextEdit {
|
||||
let fontSize = node.style.merge('fontSize')
|
||||
let textLines = node.nodeData.data.text.split(/\n/gim)
|
||||
node.style.domText(this.textEditNode, scale, textLines.length)
|
||||
this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
|
||||
this.textEditNode.innerHTML = textLines.join('<br>')
|
||||
this.textEditNode.style.minWidth = rect.width + 10 + 'px'
|
||||
this.textEditNode.style.minHeight = rect.height + 6 + 'px'
|
||||
|
||||
@@ -205,13 +205,14 @@ function createNoteNode() {
|
||||
if (!this.noteEl) {
|
||||
this.noteEl = document.createElement('div')
|
||||
this.noteEl.style.cssText = `
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
|
||||
display: none;
|
||||
background-color: #fff;
|
||||
`
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
|
||||
display: none;
|
||||
background-color: #fff;
|
||||
z-index: ${ this.mindMap.opt.nodeNoteTooltipZIndex }
|
||||
`
|
||||
document.body.appendChild(this.noteEl)
|
||||
}
|
||||
this.noteEl.innerText = this.nodeData.data.note
|
||||
|
||||
2
web/package-lock.json
generated
2
web/package-lock.json
generated
@@ -18450,7 +18450,6 @@
|
||||
"integrity": "sha512-VCNRiAt2P/bLo09rYt3DLe6xXUMlhJwrvU18Ddd/lYJgC7s8+wvhgYs+MTx4OiAXdu58drGwSBO9SPx7C6J82Q==",
|
||||
"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",
|
||||
@@ -18463,7 +18462,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"
|
||||
}
|
||||
|
||||
@@ -95,7 +95,9 @@ export default {
|
||||
svgTips: 'tips: Exporting pictures in rich text mode is time-consuming',
|
||||
transformingDomToImages: 'Converting nodes: ',
|
||||
notifyTitle: 'Info',
|
||||
notifyMessage: 'If the download is not triggered, check whether it is blocked by the browser'
|
||||
notifyMessage: 'If the download is not triggered, check whether it is blocked by the browser',
|
||||
paddingX: 'Padding x',
|
||||
paddingY: 'Padding y'
|
||||
},
|
||||
fullscreen: {
|
||||
fullscreenShow: 'Full screen show',
|
||||
|
||||
@@ -95,7 +95,9 @@ export default {
|
||||
svgTips: 'tips：富文本模式导出图片非常耗时',
|
||||
transformingDomToImages: '正在转换节点：',
|
||||
notifyTitle: '消息',
|
||||
notifyMessage: '如果没有触发下载，请检查是否被浏览器拦截了'
|
||||
notifyMessage: '如果没有触发下载，请检查是否被浏览器拦截了',
|
||||
paddingX: '水平内边距',
|
||||
paddingY: '垂直内边距'
|
||||
},
|
||||
fullscreen: {
|
||||
fullscreenShow: '全屏查看',
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# Changelog
|
||||
|
||||
## 0.5.5
|
||||
|
||||
New: 1.Supports configuring the padding when exporting to PNG, SVG, or PDF. 2.Support the configuration of z-index for node text editing boxes and node comment floating layer elements. 3.Support clicking on areas outside the canvas to end node editing status.
|
||||
|
||||
## 0.5.4
|
||||
|
||||
New: 1.Add new themes. 2.Added timeline and fishbone structure.
|
||||
@@ -8,6 +12,10 @@ Fix: 1.Fix the conflict issue between node right-click and canvas right-click. 2
|
||||
|
||||
optimization: 1.Optimize the layout of organizational chart. 2.Optimize the layout of the directory organization chart.
|
||||
|
||||
## 0.5.4-fix.1
|
||||
|
||||
optimization: 1.Optimize fishbone layout.
|
||||
|
||||
## 0.5.3
|
||||
|
||||
Fix: 1.Fixed the issue of setting the text style when multiple nodes were selected in rich text mode, which would change the text of all selected nodes to the text of the last selected node.
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.5.5</h2>
|
||||
<p>New: 1.Supports configuring the padding when exporting to PNG, SVG, or PDF. 2.Support the configuration of z-index for node text editing boxes and node comment floating layer elements. 3.Support clicking on areas outside the canvas to end node editing status.</p>
|
||||
<h2>0.5.4</h2>
|
||||
<p>New: 1.Add new themes. 2.Added timeline and fishbone structure.</p>
|
||||
<p>Fix: 1.Fix the conflict issue between node right-click and canvas right-click. 2.Fix the bug that the line segment is not hidden when dragging nodes such as organizational chart and directory organization chart.</p>
|
||||
<p>optimization: 1.Optimize the layout of organizational chart. 2.Optimize the layout of the directory organization chart.</p>
|
||||
<h2>0.5.4-fix.1</h2>
|
||||
<p>optimization: 1.Optimize fishbone layout.</p>
|
||||
<h2>0.5.3</h2>
|
||||
<p>Fix: 1.Fixed the issue of setting the text style when multiple nodes were selected in rich text mode, which would change the text of all selected nodes to the text of the last selected node.</p>
|
||||
<p>New: 1.Support setting the position of the initial central node.</p>
|
||||
|
||||
@@ -53,6 +53,11 @@ const mindMap = new MindMap({
|
||||
| enableNodeTransitionMove（v0.5.1+） | Boolean | true | Whether to enable node animation transition | |
|
||||
| nodeTransitionMoveDuration（v0.5.1+） | Number | 300 | If node animation transition is enabled, the transition time can be set using this attribute, in milliseconds | |
|
||||
| initRootNodePosition（v0.5.3+） | Array | null | The position of the initial root node can be passed as an array, default is `['center', 'center']`, Represents the root node at the center of the canvas, In addition to `center`, keywords can also be set to `left`, `top`, `right`, and `bottom`, In addition to passing keywords, each item in the array can also pass a number representing a specific pixel, Can pass a percentage string, such as `['40%', '60%']`, Represents a horizontal position at `40%` of the canvas width, and a vertical position at `60%` of the canvas height | |
|
||||
| exportPaddingX（v0.5.5+） | Number | 10 | Horizontal padding of graphics when exporting PNG, SVG, and PDF | |
|
||||
| exportPaddingY（v0.5.5+） | Number | 10 | Vertical padding of graphics when exporting PNG, SVG, and PDF | |
|
||||
| nodeTextEditZIndex（v0.5.5+） | Number | 3000 | | z-index of node text edit box elements |
|
||||
| nodeNoteTooltipZIndex（v0.5.5+） | Number | 3000 | z-index of floating layer elements in node comments | |
|
||||
| isEndNodeTextEditOnClickOuter（v0.5.5+） | Boolean | true | Whether to end the editing status of node text when clicking on an area outside the canvas | |
|
||||
|
||||
### Watermark config
|
||||
|
||||
|
||||
@@ -231,6 +231,41 @@
|
||||
<td>The position of the initial root node can be passed as an array, default is <code>['center', 'center']</code>, Represents the root node at the center of the canvas, In addition to <code>center</code>, keywords can also be set to <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code>, In addition to passing keywords, each item in the array can also pass a number representing a specific pixel, Can pass a percentage string, such as <code>['40%', '60%']</code>, Represents a horizontal position at <code>40%</code> of the canvas width, and a vertical position at <code>60%</code> of the canvas height</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>exportPaddingX（v0.5.5+）</td>
|
||||
<td>Number</td>
|
||||
<td>10</td>
|
||||
<td>Horizontal padding of graphics when exporting PNG, SVG, and PDF</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>exportPaddingY（v0.5.5+）</td>
|
||||
<td>Number</td>
|
||||
<td>10</td>
|
||||
<td>Vertical padding of graphics when exporting PNG, SVG, and PDF</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>nodeTextEditZIndex（v0.5.5+）</td>
|
||||
<td>Number</td>
|
||||
<td>3000</td>
|
||||
<td></td>
|
||||
<td>z-index of node text edit box elements</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>nodeNoteTooltipZIndex（v0.5.5+）</td>
|
||||
<td>Number</td>
|
||||
<td>3000</td>
|
||||
<td>z-index of floating layer elements in node comments</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isEndNodeTextEditOnClickOuter（v0.5.5+）</td>
|
||||
<td>Boolean</td>
|
||||
<td>true</td>
|
||||
<td>Whether to end the editing status of node text when clicking on an area outside the canvas</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Watermark config</h3>
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# Changelog
|
||||
|
||||
## 0.5.5
|
||||
|
||||
新增：1.支持配置导出为png、svg、pdf时的内边距。 2.支持配置节点文本编辑框、节点备注浮层元素的z-index。 3.支持点击画布外的区域结束节点编辑状态。
|
||||
|
||||
## 0.5.4
|
||||
|
||||
新增：1.添加新主题。 2.新增时间轴和鱼骨结构。
|
||||
@@ -8,6 +12,10 @@
|
||||
|
||||
优化：1.优化组织结构图布局。2.优化目录组织图布局。
|
||||
|
||||
## 0.5.4-fix.1
|
||||
|
||||
优化：1.优化鱼骨图布局。
|
||||
|
||||
## 0.5.3
|
||||
|
||||
修复：1.修复富文本模式下，如果选择了多个节点时设置文本样式，会将所有多选节点的文本改成最后一个多选节点的文本的问题。
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.5.5</h2>
|
||||
<p>新增：1.支持配置导出为png、svg、pdf时的内边距。 2.支持配置节点文本编辑框、节点备注浮层元素的z-index。 3.支持点击画布外的区域结束节点编辑状态。</p>
|
||||
<h2>0.5.4</h2>
|
||||
<p>新增：1.添加新主题。 2.新增时间轴和鱼骨结构。</p>
|
||||
<p>修复：1.修复节点右键和画布右键的冲突问题。 2.修复组织结构图、目录组织图等节点拖拽时存在线段未隐藏的bug。</p>
|
||||
<p>优化：1.优化组织结构图布局。2.优化目录组织图布局。</p>
|
||||
<h2>0.5.4-fix.1</h2>
|
||||
<p>优化：1.优化鱼骨图布局。</p>
|
||||
<h2>0.5.3</h2>
|
||||
<p>修复：1.修复富文本模式下，如果选择了多个节点时设置文本样式，会将所有多选节点的文本改成最后一个多选节点的文本的问题。</p>
|
||||
<p>新增：1.支持设置初始中心节点的位置。</p>
|
||||
|
||||
@@ -53,6 +53,11 @@ const mindMap = new MindMap({
|
||||
| enableNodeTransitionMove（v0.5.1+） | Boolean | true | 是否开启节点动画过渡 | |
|
||||
| nodeTransitionMoveDuration（v0.5.1+） | Number | 300 | 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms | |
|
||||
| initRootNodePosition（v0.5.3+） | Array | null | 初始根节点的位置，可传一个数组，默认为`['center', 'center']`，代表根节点处于画布中心位置，除了`center`，关键词还可以设置`left`、`top`、`right`、`bottom`，除了可以传关键词，数组的每项还可以传递一个数字，代表具体的像素，可以传递一个百分比字符串，比如`['40%', '60%']`，代表水平位置在画布宽度的`40%`的位置，垂直位置在画布高度的`60%`的位置 | |
|
||||
| exportPaddingX（v0.5.5+） | Number | 10 | 导出png、svg、pdf时的图形水平内边距 | |
|
||||
| exportPaddingY（v0.5.5+） | Number | 10 | 导出png、svg、pdf时的图形垂直内边距 | |
|
||||
| nodeTextEditZIndex（v0.5.5+） | Number | 3000 | 节点文本编辑框元素的z-index | |
|
||||
| nodeNoteTooltipZIndex（v0.5.5+） | Number | 3000 | 节点备注浮层元素的z-index | |
|
||||
| isEndNodeTextEditOnClickOuter（v0.5.5+） | Boolean | true | 是否在点击了画布外的区域时结束节点文本的编辑状态 | |
|
||||
|
||||
### 水印配置
|
||||
|
||||
|
||||
@@ -231,6 +231,41 @@
|
||||
<td>初始根节点的位置，可传一个数组，默认为<code>['center', 'center']</code>，代表根节点处于画布中心位置，除了<code>center</code>，关键词还可以设置<code>left</code>、<code>top</code>、<code>right</code>、<code>bottom</code>，除了可以传关键词，数组的每项还可以传递一个数字，代表具体的像素，可以传递一个百分比字符串，比如<code>['40%', '60%']</code>，代表水平位置在画布宽度的<code>40%</code>的位置，垂直位置在画布高度的<code>60%</code>的位置</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>exportPaddingX（v0.5.5+）</td>
|
||||
<td>Number</td>
|
||||
<td>10</td>
|
||||
<td>导出png、svg、pdf时的图形水平内边距</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>exportPaddingY（v0.5.5+）</td>
|
||||
<td>Number</td>
|
||||
<td>10</td>
|
||||
<td>导出png、svg、pdf时的图形垂直内边距</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>nodeTextEditZIndex（v0.5.5+）</td>
|
||||
<td>Number</td>
|
||||
<td>3000</td>
|
||||
<td>节点文本编辑框元素的z-index</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>nodeNoteTooltipZIndex（v0.5.5+）</td>
|
||||
<td>Number</td>
|
||||
<td>3000</td>
|
||||
<td>节点备注浮层元素的z-index</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isEndNodeTextEditOnClickOuter（v0.5.5+）</td>
|
||||
<td>Boolean</td>
|
||||
<td>true</td>
|
||||
<td>是否在点击了画布外的区域时结束节点文本的编辑状态</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>水印配置</h3>
|
||||
|
||||
@@ -115,6 +115,7 @@ export default {
|
||||
this.getData()
|
||||
this.init()
|
||||
this.$bus.$on('execCommand', this.execCommand)
|
||||
this.$bus.$on('paddingChange', this.onPaddingChange)
|
||||
this.$bus.$on('export', this.export)
|
||||
this.$bus.$on('setData', this.setData)
|
||||
this.$bus.$on('startTextEdit', () => {
|
||||
@@ -374,6 +375,11 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
// 修改导出内边距
|
||||
onPaddingChange(data) {
|
||||
this.mindMap.updateConfig(data)
|
||||
},
|
||||
|
||||
// 显示新特性提示
|
||||
showNewFeatureInfo() {
|
||||
let showed = localStorage.getItem('SIMPLE_MIND_MAP_NEW_FEATURE_TIP_1')
|
||||
|
||||
@@ -30,6 +30,22 @@
|
||||
>{{ $t('export.domToImage') }}</el-checkbox
|
||||
>
|
||||
</div>
|
||||
<div class="paddingInputBox" v-show="['svg', 'png', 'pdf'].includes(exportType)">
|
||||
<span class="name">{{ $t('export.paddingX') }}</span>
|
||||
<el-input
|
||||
style="width: 100px"
|
||||
v-model="paddingX"
|
||||
size="mini"
|
||||
@change="onPaddingChange"
|
||||
></el-input>
|
||||
<span class="name" style="margin-left: 10px;">{{ $t('export.paddingY') }}</span>
|
||||
<el-input
|
||||
style="width: 100px"
|
||||
v-model="paddingY"
|
||||
size="mini"
|
||||
@change="onPaddingChange"
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="downloadTypeList">
|
||||
<div
|
||||
class="downloadTypeItem"
|
||||
@@ -77,7 +93,9 @@ export default {
|
||||
widthConfig: true,
|
||||
domToImage: false,
|
||||
loading: false,
|
||||
loadingText: ''
|
||||
loadingText: '',
|
||||
paddingX: 10,
|
||||
paddingY: 10
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -102,6 +120,13 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onPaddingChange() {
|
||||
this.$bus.$emit('paddingChange', {
|
||||
exportPaddingX: Number(this.paddingX),
|
||||
exportPaddingY: Number(this.paddingY)
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
* @Date: 2021-06-22 22:08:11
|
||||
@@ -163,6 +188,14 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.paddingInputBox {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.name {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
margin-top: 10px;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user