openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成多选操作

Browse Source
This commit is contained in:
wanglin 2021-07-11 13:33:06 +08:00
parent f3780baedc
commit 5c6fef71bd
12 changed files with 372 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
simple-mind-map/index.js
View File

@ -8,6 +8,7 @@ import KeyCommand from './src/KeyCommand'
import Command from './src/Command' import Command from './src/Command'
import BatchExecution from './src/BatchExecution' import BatchExecution from './src/BatchExecution'
import Export from './src/Export' import Export from './src/Export'
import Select from './src/Select'
import { import {
SVG SVG
} from '@svgdotjs/svg.js' } from '@svgdotjs/svg.js'
@ -47,17 +48,14 @@ class MindMap {
// 容器元素 // 容器元素
this.el = this.opt.el this.el = this.opt.el
let { this.elRect = this.el.getBoundingClientRect()
width,
height
} = this.el.getBoundingClientRect()
// 画布宽高 // 画布宽高
this.width = width this.width = this.elRect.width
this.height = height this.height = this.elRect.height
// 画布 // 画布
this.svg = SVG().addTo(this.el).size(width, height) this.svg = SVG().addTo(this.el).size(this.width, this.height)
this.draw = this.svg.group() this.draw = this.svg.group()
// 节点id // 节点id
@ -97,6 +95,11 @@ class MindMap {
mindMap: this mindMap: this
}) })
// 选择类
this.select = new Select({
mindMap: this
})
// 批量执行类 // 批量执行类
this.batchExecution = new BatchExecution() this.batchExecution = new BatchExecution()

14
simple-mind-map/src/Event.js
View File

@ -46,6 +46,7 @@ class Event extends EventEmitter {
this.onMousemove = this.onMousemove.bind(this) this.onMousemove = this.onMousemove.bind(this)
this.onMouseup = this.onMouseup.bind(this) this.onMouseup = this.onMouseup.bind(this)
this.onMousewheel = this.onMousewheel.bind(this) this.onMousewheel = this.onMousewheel.bind(this)
this.onContextmenu = this.onContextmenu.bind(this)
} }
/** /**
@ -65,6 +66,7 @@ class Event extends EventEmitter {
} else { } else {
this.mindMap.el.addEventListener('mousewheel', this.onMousewheel) this.mindMap.el.addEventListener('mousewheel', this.onMousewheel)
} }
this.mindMap.svg.on('contextmenu', this.onContextmenu)
} }
/** /**
@ -74,10 +76,12 @@ class Event extends EventEmitter {
* @Desc: 解绑事件 * @Desc: 解绑事件
*/ */
unbind() { unbind() {
this.mindMap.svg.off('click', this.onDrawClick)
this.mindMap.el.removeEventListener('mousedown', this.onMousedown) this.mindMap.el.removeEventListener('mousedown', this.onMousedown)
window.removeEventListener('mousemove', this.onMousemove) window.removeEventListener('mousemove', this.onMousemove)
window.removeEventListener('mouseup', this.onMouseup) window.removeEventListener('mouseup', this.onMouseup)
this.mindMap.el.removeEventListener('mousewheel', this.onMousewheel) this.mindMap.el.removeEventListener('mousewheel', this.onMousewheel)
this.mindMap.svg.off('contextmenu', this.onContextmenu)
} }
/** /**
@ -152,6 +156,16 @@ class Event extends EventEmitter {
} }
this.emit('mousewheel', e, dir, this) this.emit('mousewheel', e, dir, this)
} }
/**
* @Author: 王林
* @Date: 2021-07-10 22:34:13
* @Desc: 鼠标右键菜单事件
*/
onContextmenu(e) {
e.preventDefault()
this.emit('contextmenu', e)
}
} }
export default Event export default Event

39
simple-mind-map/src/Node.js
View File

@ -152,7 +152,7 @@ class Node {
this._expandBtn.off(['mouseover', 'mouseout', 'click']) this._expandBtn.off(['mouseover', 'mouseout', 'click'])
} }
if (this.group) { if (this.group) {
this.group.off(['click', 'dblclick']) this.group.off(['click', 'dblclick', 'contextmenu'])
} }
} }
@ -471,7 +471,7 @@ class Node {
let { paddingY } = this.getPaddingVale() let { paddingY } = this.getPaddingVale()
// 创建组 // 创建组
this.group = new G() this.group = new G()
this.updatePos(false) this.update(false)
// 节点矩形 // 节点矩形
this.style.rect(this.group.rect(width, height)) this.style.rect(this.group.rect(width, height))
// 图片节点 // 图片节点
@ -540,6 +540,11 @@ class Node {
this.group.on('dblclick', () => { this.group.on('dblclick', () => {
this.mindMap.emit('node_dblclick', this) this.mindMap.emit('node_dblclick', this)
}) })
// 右键菜单事件
this.group.on('contextmenu', (e) => {
e.stopPropagation()
e.preventDefault()
})
} }
/** /**
@ -555,7 +560,7 @@ class Node {
this.mindMap.emit('before_node_active', this, this.renderer.activeNodeList) this.mindMap.emit('before_node_active', this, this.renderer.activeNodeList)
this.renderer.clearActive() this.renderer.clearActive()
this.mindMap.execCommand('SET_NODE_ACTIVE', this, !this.nodeData.data.isActive) this.mindMap.execCommand('SET_NODE_ACTIVE', this, !this.nodeData.data.isActive)
this.renderer.activeNodeList.push(this) this.renderer.addActiveNode(this)
this.mindMap.emit('node_active', this, this.renderer.activeNodeList) this.mindMap.emit('node_active', this, this.renderer.activeNodeList)
} }
@ -576,12 +581,18 @@ class Node {
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-07-04 22:47:01 * @Date: 2021-07-04 22:47:01
* @Desc: 更新节点位置 * @Desc: 更新节点
*/ */
updatePos(animate = true) { update(animate = true) {
if (!this.group) { if (!this.group) {
return; return;
} }
// 需要移除展开收缩按钮
if (this._expandBtn && this.nodeData.children.length <= 0) {
this.removeExpandBtn()
} else if (!this._expandBtn && this.nodeData.children.length > 0) {// 需要添加展开收缩按钮
this.renderExpandBtn()
}
let t = this.group.transform() let t = this.group.transform()
if (animate) { if (animate) {
this.group.animate(300).translate(this.left - t.translateX, this.top - t.translateY) this.group.animate(300).translate(this.left - t.translateX, this.top - t.translateY)
@ -604,7 +615,7 @@ class Node {
this._initRender = false this._initRender = false
this.renderNode() this.renderNode()
} else { } else {
this.updatePos() this.update()
} }
// 子节点 // 子节点
if (this.children && this.children.length && this.nodeData.data.expand !== false) { if (this.children && this.children.length && this.nodeData.data.expand !== false) {
@ -730,6 +741,22 @@ class Node {
this.renderer.layout.renderExpandBtn(this, this._expandBtn) this.renderer.layout.renderExpandBtn(this, this._expandBtn)
} }
/**
* @Author: 王林
* @Date: 2021-07-11 13:26:00
* @Desc: 移除展开收缩按钮
*/
removeExpandBtn() {
if (this._expandBtn) {
this._expandBtn.off(['mouseover', 'mouseout', 'click'])
}
// 展开收缩按钮
if (this._expandBtn) {
this._expandBtn.remove()
this._expandBtn = null
}
}
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-06-20 22:51:57 * @Date: 2021-06-20 22:51:57

84
simple-mind-map/src/Render.js
View File

@ -139,16 +139,37 @@ class Render {
this.activeNodeList = [] this.activeNodeList = []
} }
/**
* @Author: 王林
* @Date: 2021-07-11 10:54:00
* @Desc: 添加节点到激活列表里
*/
addActiveNode(node) {
let index = this.findActiveNodeIndex(node)
if (index === -1) {
this.activeNodeList.push(node)
}
}
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-07-10 10:04:04 * @Date: 2021-07-10 10:04:04
* @Desc: 在激活列表里移除某个节点 * @Desc: 在激活列表里移除某个节点
*/ */
removeActiveNode(node) { removeActiveNode(node) {
let index = this.activeNodeList.findIndex((item) => { let index = this.findActiveNodeIndex(node)
this.activeNodeList.splice(index, 1)
}
/**
* @Author: 王林
* @Date: 2021-07-11 10:55:23
* @Desc: 检索某个节点在激活列表里的索引
*/
findActiveNodeIndex(node) {
return this.activeNodeList.findIndex((item) => {
return item === node; return item === node;
}) })
this.activeNodeList.splice(index, 1)
} }
/** /**
@ -165,7 +186,7 @@ class Render {
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-05-04 13:19:54 * @Date: 2021-05-04 13:19:54
* @Desc: 插入同级节点 * @Desc: 插入同级节点，多个节点只会操作第一个节点
*/ */
insertNode() { insertNode() {
if (this.activeNodeList.length <= 0) { if (this.activeNodeList.length <= 0) {
@ -196,24 +217,24 @@ class Render {
if (this.activeNodeList.length <= 0) { if (this.activeNodeList.length <= 0) {
return; return;
} }
let node = this.activeNodeList[0] this.activeNodeList.forEach((node, index) => {
if (!node.nodeData.children) { if (!node.nodeData.children) {
node.nodeData.children = [] node.nodeData.children = []
} }
let len = node.nodeData.children.length node.nodeData.children.push({
node.nodeData.children.push({ "data": {
"data": { "text": "分支主题",
"text": "分支主题", "expand": true
"expand": true },
}, "children": []
"children": [] })
if (node.isRoot) {
this.mindMap.batchExecution.push('renderNode' + index, () => {
node.renderNode()
})
}
}) })
this.mindMap.render() this.mindMap.render()
if (node.isRoot || len <= 0) {
this.mindMap.batchExecution.push('renderNode', () => {
node.renderNode()
})
}
} }
/** /**
@ -225,21 +246,24 @@ class Render {
if (this.activeNodeList.length <= 0) { if (this.activeNodeList.length <= 0) {
return; return;
} }
this.activeNodeList.forEach((item) => { for (let i = 0; i < this.activeNodeList.length; i++) {
if (item.isRoot) { let node = this.activeNodeList[i]
item.children.forEach((child) => { if (node.isRoot) {
node.children.forEach((child) => {
child.remove() child.remove()
}) })
item.children = [] node.children = []
item.nodeData.children = [] node.nodeData.children = []
break
} else { } else {
this.removeActiveNode(item) this.removeActiveNode(node)
let index = this.getNodeIndex(item) let index = this.getNodeIndex(node)
item.remove() node.remove()
item.parent.children.splice(index, 1) node.parent.children.splice(index, 1)
item.parent.nodeData.children.splice(index, 1) node.parent.nodeData.children.splice(index, 1)
i--
} }
}) }
this.mindMap.render() this.mindMap.render()
} }

123
simple-mind-map/src/Select.js Normal file
View File

@ -0,0 +1,123 @@
import { bfsWalk, throttle } from './utils'
/**
* @Author: 王林
* @Date: 2021-07-10 22:34:51
* @Desc: 选择节点类
*/
class Select {
/**
* @Author: 王林
* @Date: 2021-07-10 22:35:16
* @Desc: 构造函数
*/
constructor({ mindMap }) {
this.mindMap = mindMap
this.rect = null
this.isMousedown = false
this.mouseDownX = 0
this.mouseDownY = 0
this.mouseMoveX = 0
this.mouseMoveY = 0
this.bindEvent()
}
/**
* @Author: 王林
* @Date: 2021-07-10 22:36:36
* @Desc: 绑定事件
*/
bindEvent() {
this.checkInNodes = throttle(this.checkInNodes, 500, this)
this.mindMap.on('contextmenu', (e) => {
this.isMousedown = true
let { x, y } = this.toPos(e.clientX, e.clientY)
this.mouseDownX = x
this.mouseDownY = y
this.createRect(x, y)
})
this.mindMap.on('mousemove', (e) => {
if (!this.isMousedown) {
return
}
this.mouseMoveX = e.clientX
this.mouseMoveY = e.clientY
this.rect.plot([
[this.mouseDownX, this.mouseDownY],
[this.mouseMoveX, this.mouseDownY],
[this.mouseMoveX, this.mouseMoveY],
[this.mouseDownX, this.mouseMoveY]
])
this.mindMap.batchExecution.push('checkInNodes', this.checkInNodes)
})
this.mindMap.on('mouseup', (e) => {
if (!this.isMousedown) {
return;
}
this.mindMap.emit('node_active', null, this.mindMap.renderer.activeNodeList)
this.isMousedown = false
if (this.rect) this.rect.remove()
this.rect = null
})
}
/**
* @Author: 王林
* @Date: 2021-07-11 10:19:37
* @Desc: 创建矩形
*/
createRect(x, y) {
this.rect = this.mindMap.svg.polygon().stroke({
color: '#0984e3'
}).fill({
color: 'rgba(9,132,227,0.3)'
}).plot([[x, y]])
}
/**
* @Author: 王林
* @Date: 2021-07-11 09:20:03
* @Desc: 转换位置
*/
toPos(x, y) {
return {
x: x - this.mindMap.elRect.left,
y: y - this.mindMap.elRect.top
}
}
/**
* @Author: 王林
* @Date: 2021-07-11 10:20:43
* @Desc: 检测在选区里的节点
*/
checkInNodes() {
let { scaleX, scaleY, translateX, translateY } = this.mindMap.draw.transform()
let minx = Math.min(this.mouseDownX, this.mouseMoveX)
let miny = Math.min(this.mouseDownY, this.mouseMoveY)
let maxx = Math.max(this.mouseDownX, this.mouseMoveX)
let maxy = Math.max(this.mouseDownY, this.mouseMoveY)
bfsWalk(this.mindMap.renderer.root, (node) => {
let { left, top, width, height } = node
let right = (left + width) * scaleX + translateX
let bottom = (top + height) * scaleY + translateY
left = left * scaleX + translateX
top = top * scaleY + translateY
if (
left >= minx &&
right <= maxx &&
top >= miny &&
bottom <= maxy
) {
this.mindMap.execCommand('SET_NODE_ACTIVE', node, true)
this.mindMap.renderer.addActiveNode(node)
} else if (node.nodeData.data.isActive) {
this.mindMap.execCommand('SET_NODE_ACTIVE', node, false)
this.mindMap.renderer.removeActiveNode(node)
}
})
}
}
export default Select

20
simple-mind-map/src/utils/index.js
View File

@ -8,7 +8,7 @@ export const walk = (root, parent, beforeCallback, afterCallback, isRoot, layerI
let stop = false let stop = false
if (beforeCallback) { if (beforeCallback) {
stop = beforeCallback(root, parent, isRoot, layerIndex, index) stop = beforeCallback(root, parent, isRoot, layerIndex, index)
} }
if (!stop && root.children && root.children.length > 0) { if (!stop && root.children && root.children.length > 0) {
let _layerIndex = layerIndex + 1 let _layerIndex = layerIndex + 1
root.children.forEach((node, nodeIndex) => { root.children.forEach((node, nodeIndex) => {
@ -176,4 +176,22 @@ export const downloadFile = (file, fileName) => {
a.href = file a.href = file
a.download = fileName a.download = fileName
a.click() a.click()
}
/**
* @Author: 王林
* @Date: 2021-07-11 10:36:47
* @Desc: 节流函数
*/
export const throttle = (fn, time = 300, ctx) => {
let timer = null
return () => {
if (timer) {
return
}
timer = setTimeout(() => {
fn.call(ctx)
timer = null
}, 300)
};
} }

60
web/src/pages/Edit/components/NodeHyperlink.vue
View File

@ -6,13 +6,17 @@
width="500" width="500"
> >
<div class="item"> <div class="item">
<span class="name">链接</span> <span class="name">链接</span>
<el-input v-model="link" size="mini" placeholder="http://xxxx.com/"></el-input> <el-input
</div> v-model="link"
size="mini"
placeholder="http://xxxx.com/"
></el-input>
</div>
<div class="item"> <div class="item">
<span class="name">名称</span> <span class="name">名称</span>
<el-input v-model="linkTitle" size="mini"></el-input> <el-input v-model="linkTitle" size="mini"></el-input>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button> <el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button> <el-button type="primary" @click="confirm">确 定</el-button>
@ -21,10 +25,10 @@
</template> </template>
<script> <script>
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-06-24 22:53:17 * @Date: 2021-06-24 22:53:17
* @Desc: 节点超链接内容设置 * @Desc: 节点超链接内容设置
*/ */
export default { export default {
name: "NodeHyperlink", name: "NodeHyperlink",
@ -33,16 +37,16 @@ export default {
dialogVisible: false, dialogVisible: false,
link: "", link: "",
linkTitle: "", linkTitle: "",
activeNode: null activeNodes: [],
}; };
}, },
created() { created() {
this.$bus.$on("node_active", (...args) => { this.$bus.$on("node_active", (...args) => {
let activeNodes = args[1]; this.activeNodes = args[1];
if (activeNodes.length > 0) { if (this.activeNodes.length > 0) {
this.activeNode = activeNodes[0]; let firstNode = this.activeNodes[0];
this.link = this.activeNode.getData("hyperlink"); this.link = firstNode.getData("hyperlink");
this.linkTitle = this.activeNode.getData("hyperlinkTitle"); this.linkTitle = firstNode.getData("hyperlinkTitle");
} else { } else {
this.link = ""; this.link = "";
this.linkTitle = ""; this.linkTitle = "";
@ -68,8 +72,10 @@ export default {
* @Desc: 确定 * @Desc: 确定
*/ */
confirm() { confirm() {
this.activeNode.setHyperlink(this.link, this.linkTitle); this.activeNodes.forEach((node) => {
this.cancel(); node.setHyperlink(this.link, this.linkTitle);
this.cancel();
});
}, },
}, },
}; };
@ -78,14 +84,14 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.nodeDialog { .nodeDialog {
.item { .item {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
.name { .name {
display: block; display: block;
width: 50px; width: 50px;
} }
} }
} }
</style> </style>

84
web/src/pages/Edit/components/NodeIcon.vue
View File

@ -13,7 +13,7 @@
v-for="icon in item.list" v-for="icon in item.list"
:key="icon.name" :key="icon.name"
v-html="icon.icon" v-html="icon.icon"
@click="setIcon(item.type, icon.name)" @click="setIcon(item.type, icon.name)"
></div> ></div>
</div> </div>
</div> </div>
@ -23,10 +23,10 @@
<script> <script>
import { nodeIconList } from "simple-mind-map/src/svg/icons"; import { nodeIconList } from "simple-mind-map/src/svg/icons";
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-06-24 22:53:33 * @Date: 2021-06-24 22:53:33
* @Desc: 节点图标内容设置 * @Desc: 节点图标内容设置
*/ */
export default { export default {
name: "NodeIcon", name: "NodeIcon",
@ -35,15 +35,15 @@ export default {
nodeIconList, nodeIconList,
dialogVisible: false, dialogVisible: false,
icon: [], icon: [],
activeNode: null, activeNodes: [],
}; };
}, },
created() { created() {
this.$bus.$on("node_active", (...args) => { this.$bus.$on("node_active", (...args) => {
let activeNodes = args[1]; this.activeNodes = args[1];
if (activeNodes.length > 0) { if (this.activeNodes.length > 0) {
this.activeNode = activeNodes[0]; let firstNode = this.activeNodes[0];
this.icon = this.activeNode.getData("icon") || []; this.icon = firstNode.getData("icon") || [];
} else { } else {
this.icon = []; this.icon = [];
} }
@ -53,52 +53,54 @@ export default {
}); });
}, },
methods: { methods: {
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-06-23 23:16:56 * @Date: 2021-06-23 23:16:56
* @Desc: 设置icon * @Desc: 设置icon
*/ */
setIcon(type, name) { setIcon(type, name) {
let index = this.icon.findIndex((item) => { let index = this.icon.findIndex((item) => {
return item.split('_')[0] === type; return item.split("_")[0] === type;
}) });
if (index !== -1) { if (index !== -1) {
this.icon.splice(index, 1, type + '_' + name) this.icon.splice(index, 1, type + "_" + name);
} else { } else {
this.icon.push(type + '_' + name) this.icon.push(type + "_" + name);
} }
this.activeNode.setIcon([...this.icon]) this.activeNodes.forEach((node) => {
} node.setIcon([...this.icon]);
});
},
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.nodeDialog { .nodeDialog {
/deep/ .el-dialog__body { /deep/ .el-dialog__body {
padding: 0 20px; padding: 0 20px;
} }
.item { .item {
margin-bottom: 20px; margin-bottom: 20px;
font-weight: bold; font-weight: bold;
.title { .title {
margin-bottom: 10px; margin-bottom: 10px;
} }
.list { .list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.icon { .icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-right: 10px; margin-right: 10px;
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; cursor: pointer;
} }
} }
} }
} }
</style> </style>

25
web/src/pages/Edit/components/NodeImage.vue
View File

@ -35,20 +35,19 @@ export default {
dialogVisible: false, dialogVisible: false,
img: "", img: "",
imgTitle: "", imgTitle: "",
activeNode: null, activeNodes: null,
}; };
}, },
created() { created() {
this.$bus.$on("node_active", (...args) => { this.$bus.$on("node_active", (...args) => {
let activeNodes = args[1]; this.activeNodes = args[1];
if (activeNodes.length > 0) { if (this.activeNodes.length > 0) {
this.activeNode = activeNodes[0]; let firstNode = this.activeNodes[0];
this.img = this.activeNode.getData("image"); this.img = firstNode.getData("image");
this.imgTitle = this.activeNode.getData("imageTitle"); this.imgTitle = firstNode.getData("imageTitle");
} else { } else {
this.img = ""; this.img = "";
this.imgTitle = ""; this.imgTitle = "";
this.activeNode = null;
} }
}); });
this.$bus.$on("showNodeImage", () => { this.$bus.$on("showNodeImage", () => {
@ -73,11 +72,13 @@ export default {
async confirm() { async confirm() {
try { try {
let { width, height } = await this.$refs.ImgUpload.getSize(); let { width, height } = await this.$refs.ImgUpload.getSize();
this.activeNode.setImage({ this.activeNodes.forEach((node) => {
url: this.img || "none", node.setImage({
title: this.imgTitle, url: this.img || "none",
width, title: this.imgTitle,
height, width,
height,
});
}); });
this.cancel(); this.cancel();
} catch (error) { } catch (error) {

24
web/src/pages/Edit/components/NodeNote.vue
View File

@ -21,10 +21,10 @@
</template> </template>
<script> <script>
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-06-24 22:53:54 * @Date: 2021-06-24 22:53:54
* @Desc: 节点备注内容设置 * @Desc: 节点备注内容设置
*/ */
export default { export default {
name: "NodeNote", name: "NodeNote",
@ -32,15 +32,15 @@ export default {
return { return {
dialogVisible: false, dialogVisible: false,
note: "", note: "",
activeNode: null, activeNodes: [],
}; };
}, },
created() { created() {
this.$bus.$on("node_active", (...args) => { this.$bus.$on("node_active", (...args) => {
let activeNodes = args[1]; this.activeNodes = args[1];
if (activeNodes.length > 0) { if (this.activeNodes.length > 0) {
this.activeNode = activeNodes[0]; let firstNode = this.activeNodes[0];
this.note = this.activeNode.getData("note"); this.note = firstNode.getData("note");
} else { } else {
this.note = ""; this.note = "";
} }
@ -65,7 +65,9 @@ export default {
* @Desc: 确定 * @Desc: 确定
*/ */
confirm() { confirm() {
this.activeNode.setNote(this.note); this.activeNodes.forEach((node) => {
node.setNote(this.note);
});
this.cancel(); this.cancel();
}, },
}, },
@ -76,7 +78,7 @@ export default {
.nodeDialog { .nodeDialog {
.tip { .tip {
margin-top: 5px; margin-top: 5px;
color: #DCDFE6; color: #dcdfe6;
} }
} }
</style> </style>

14
web/src/pages/Edit/components/NodeTag.vue
View File

@ -51,16 +51,16 @@ export default {
tagColorList, tagColorList,
tagArr: [], tagArr: [],
tag: "", tag: "",
activeNode: null, activeNodes: [],
max: 5, max: 5,
}; };
}, },
created() { created() {
this.$bus.$on("node_active", (...args) => { this.$bus.$on("node_active", (...args) => {
let activeNodes = args[1]; this.activeNodes = args[1];
if (activeNodes.length > 0) { if (this.activeNodes.length > 0) {
this.activeNode = activeNodes[0]; let firstNode = this.activeNodes[0];
this.tagArr = this.activeNode.getData("tag") || []; this.tagArr = firstNode.getData("tag") || [];
} else { } else {
this.tagArr = []; this.tagArr = [];
this.tag = ""; this.tag = "";
@ -105,7 +105,9 @@ export default {
* @Desc: 确定 * @Desc: 确定
*/ */
confirm() { confirm() {
this.activeNode.setTag(this.tagArr); this.activeNodes.forEach((node) => {
node.setTag(this.tagArr);
});
this.cancel(); this.cancel();
}, },
}, },

21
web/src/pages/Edit/components/Style.vue
View File

@ -5,7 +5,7 @@
<el-tab-pane label="常态" name="normal"></el-tab-pane> <el-tab-pane label="常态" name="normal"></el-tab-pane>
<el-tab-pane label="选中状态" name="active"></el-tab-pane> <el-tab-pane label="选中状态" name="active"></el-tab-pane>
</el-tabs> </el-tabs>
<div class="sidebarContent" v-if="activeNode"> <div class="sidebarContent" v-if="activeNodes.length > 0">
<!-- 文字 --> <!-- 文字 -->
<div class="title noTop">文字</div> <div class="title noTop">文字</div>
<div class="row"> <div class="row">
@ -267,7 +267,7 @@ export default {
borderDasharrayList, borderDasharrayList,
borderRadiusList, borderRadiusList,
lineHeightList, lineHeightList,
activeNode: null, activeNodes: [],
activeTab: "normal", activeTab: "normal",
style: { style: {
paddingX: 0, paddingX: 0,
@ -292,9 +292,8 @@ export default {
this.$refs.sidebar.show = false; this.$refs.sidebar.show = false;
this.$nextTick(() => { this.$nextTick(() => {
this.activeTab = "normal"; this.activeTab = "normal";
let activeNodes = args[1]; this.activeNodes = args[1];
this.activeNode = activeNodes[0]; this.$refs.sidebar.show = this.activeNodes.length > 0;
this.$refs.sidebar.show = activeNodes.length > 0;
this.initNodeStyle(); this.initNodeStyle();
}); });
}); });
@ -315,7 +314,7 @@ export default {
* @Desc: 初始节点样式 * @Desc: 初始节点样式
*/ */
initNodeStyle() { initNodeStyle() {
if (!this.activeNode) { if (this.activeNodes.length <= 0) {
this.activeTab = "normal"; this.activeTab = "normal";
return; return;
} }
@ -335,7 +334,7 @@ export default {
"borderDasharray", "borderDasharray",
"borderRadius", "borderRadius",
].forEach((item) => { ].forEach((item) => {
this.style[item] = this.activeNode.getStyle( this.style[item] = this.activeNodes[0].getStyle(
item, item,
false, false,
this.activeTab === "active" this.activeTab === "active"
@ -349,11 +348,9 @@ export default {
* @Desc: 修改样式 * @Desc: 修改样式
*/ */
update(prop) { update(prop) {
this.activeNode.setStyle( this.activeNodes.forEach((node) => {
prop, node.setStyle(prop, this.style[prop], this.activeTab === "active");
this.style[prop], });
this.activeTab === "active"
);
}, },
/** /**