326 lines
7.5 KiB
Vue
326 lines
7.5 KiB
Vue
<template>
|
|
<div
|
|
class="contextmenuContainer"
|
|
v-if="isShow"
|
|
:style="{ left: left + 'px', top: top + 'px' }"
|
|
>
|
|
<template v-if="type === 'node'">
|
|
<div
|
|
class="item"
|
|
@click="exec('INSERT_NODE', insertNodeBtnDisabled)"
|
|
:class="{ disabled: insertNodeBtnDisabled }"
|
|
>
|
|
插入同级节点
|
|
<span class="desc">Enter</span>
|
|
</div>
|
|
<div class="item" @click="exec('INSERT_CHILD_NODE')">
|
|
插入子级节点
|
|
<span class="desc">Tab</span>
|
|
</div>
|
|
<div class="item" @click="exec('ADD_GENERALIZATION')" :class="{ disabled: insertNodeBtnDisabled }">
|
|
插入概要
|
|
<span class="desc">Shift + S</span>
|
|
</div>
|
|
<div
|
|
class="item"
|
|
@click="exec('UP_NODE')"
|
|
:class="{ disabled: upNodeBtnDisabled }"
|
|
>
|
|
上移节点
|
|
<span class="desc">Ctrl + ↑</span>
|
|
</div>
|
|
<div
|
|
class="item"
|
|
@click="exec('DOWN_NODE')"
|
|
:class="{ disabled: downNodeBtnDisabled }"
|
|
>
|
|
下移节点
|
|
<span class="desc">Ctrl + ↓</span>
|
|
</div>
|
|
<div class="item danger" @click="exec('REMOVE_NODE')">
|
|
删除节点
|
|
<span class="desc">Delete</span>
|
|
</div>
|
|
<div class="item" @click="exec('COPY_NODE')">
|
|
复制节点
|
|
<span class="desc">Ctrl + C</span>
|
|
</div>
|
|
<div class="item" @click="exec('CUT_NODE')">
|
|
剪切节点
|
|
<span class="desc">Ctrl + X</span>
|
|
</div>
|
|
<div
|
|
class="item"
|
|
:class="{ disabled: copyData === null }"
|
|
@click="exec('PASTE_NODE')"
|
|
>
|
|
粘贴节点
|
|
<span class="desc">Ctrl + V</span>
|
|
</div>
|
|
</template>
|
|
<template v-if="type === 'svg'">
|
|
<div class="item" @click="exec('RETURN_CENTER')">回到中心</div>
|
|
<div class="item" @click="exec('EXPAND_ALL')">展开所有</div>
|
|
<div class="item" @click="exec('UNEXPAND_ALL')">收起所有</div>
|
|
<div class="item" @click="exec('RESET_LAYOUT')">
|
|
一键整理布局
|
|
<span class="desc">Shift + L</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
/**
|
|
* @Author: 王林
|
|
* @Date: 2021-06-24 22:53:10
|
|
* @Desc: 右键菜单
|
|
*/
|
|
export default {
|
|
name: "Contextmenu",
|
|
props: {
|
|
mindMap: {
|
|
type: Object,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
isShow: false,
|
|
left: 0,
|
|
top: 0,
|
|
node: null,
|
|
copyData: null,
|
|
type: "",
|
|
isMousedown: false,
|
|
mosuedownX: 0,
|
|
mosuedownY: 0
|
|
};
|
|
},
|
|
computed: {
|
|
insertNodeBtnDisabled() {
|
|
return !this.node || this.node.isRoot;
|
|
},
|
|
upNodeBtnDisabled() {
|
|
if (!this.node || this.node.isRoot) {
|
|
return true;
|
|
}
|
|
let isFirst =
|
|
this.node.parent.children.findIndex((item) => {
|
|
return item === this.node;
|
|
}) === 0;
|
|
return isFirst;
|
|
},
|
|
downNodeBtnDisabled() {
|
|
if (!this.node || this.node.isRoot) {
|
|
return true;
|
|
}
|
|
let children = this.node.parent.children;
|
|
let isLast =
|
|
children.findIndex((item) => {
|
|
return item === this.node;
|
|
}) ===
|
|
children.length - 1;
|
|
return isLast;
|
|
},
|
|
},
|
|
created() {
|
|
this.$bus.$on("node_contextmenu", this.show);
|
|
this.$bus.$on("node_click", this.hide);
|
|
this.$bus.$on("draw_click", this.hide);
|
|
this.$bus.$on("expand_btn_click", this.hide);
|
|
this.$bus.$on("svg_mousedown", this.onMousedown);
|
|
this.$bus.$on("mouseup", this.onMouseup);
|
|
// 注册快捷键
|
|
this.mindMap.keyCommand.addShortcut('Control+c', this.copy);
|
|
this.mindMap.keyCommand.addShortcut('Control+v', this.paste);
|
|
this.mindMap.keyCommand.addShortcut('Control+x', this.cut);
|
|
},
|
|
beforeDestroy() {
|
|
this.$bus.$off("node_contextmenu", this.show);
|
|
this.$bus.$off("node_click", this.hide);
|
|
this.$bus.$off("draw_click", this.hide);
|
|
this.$bus.$off("expand_btn_click", this.hide);
|
|
this.$bus.$on("svg_mousedown", this.onMousedown);
|
|
this.$bus.$on("mouseup", this.onMouseup);
|
|
// 移除快捷键
|
|
this.mindMap.keyCommand.removeShortcut('Control+c', this.copy);
|
|
this.mindMap.keyCommand.removeShortcut('Control+v', this.paste);
|
|
this.mindMap.keyCommand.removeShortcut('Control+x', this.cut);
|
|
},
|
|
methods: {
|
|
/**
|
|
* @Author: 王林
|
|
* @Date: 2021-07-14 21:38:50
|
|
* @Desc: 节点右键显示
|
|
*/
|
|
show(e, node) {
|
|
this.type = "node";
|
|
this.left = e.clientX + 10;
|
|
this.top = e.clientY + 10;
|
|
this.isShow = true;
|
|
this.node = node;
|
|
},
|
|
|
|
/**
|
|
* @Author: 王林
|
|
* @Date: 2021-07-16 13:27:48
|
|
* @Desc: 鼠标按下事件
|
|
*/
|
|
onMousedown(e) {
|
|
if (e.which !== 3) {
|
|
return;
|
|
}
|
|
this.mosuedownX = e.clientX
|
|
this.mosuedownY = e.clientY
|
|
this.isMousedown = true;
|
|
},
|
|
|
|
/**
|
|
* @Author: 王林
|
|
* @Date: 2021-07-16 13:27:53
|
|
* @Desc: 鼠标松开事件
|
|
*/
|
|
onMouseup(e) {
|
|
if (!this.isMousedown) {
|
|
return;
|
|
}
|
|
this.isMousedown = false
|
|
if (Math.abs(this.mosuedownX - e.clientX) > 3 || Math.abs(this.mosuedownY - e.clientY) > 3) {
|
|
this.hide()
|
|
return;
|
|
}
|
|
this.show2(e)
|
|
},
|
|
|
|
/**
|
|
* @Author: 王林
|
|
* @Date: 2021-07-15 22:54:08
|
|
* @Desc: 画布右键显示
|
|
*/
|
|
show2(e) {
|
|
this.type = "svg";
|
|
this.left = e.clientX + 10;
|
|
this.top = e.clientY + 10;
|
|
this.isShow = true;
|
|
},
|
|
|
|
/**
|
|
* @Author: 王林
|
|
* @Date: 2021-07-14 21:37:55
|
|
* @Desc: 隐藏
|
|
*/
|
|
hide() {
|
|
this.isShow = false;
|
|
this.left = 0;
|
|
this.top = 0;
|
|
this.type = "";
|
|
},
|
|
|
|
/**
|
|
* @Author: 王林
|
|
* @Date: 2021-07-14 23:27:54
|
|
* @Desc: 执行命令
|
|
*/
|
|
exec(key, disabled) {
|
|
if (disabled) {
|
|
return;
|
|
}
|
|
switch (key) {
|
|
case "COPY_NODE":
|
|
this.copyData = this.mindMap.renderer.copyNode();
|
|
break;
|
|
case "CUT_NODE":
|
|
this.$bus.$emit("execCommand", key, (copyData) => {
|
|
this.copyData = copyData;
|
|
});
|
|
break;
|
|
case "PASTE_NODE":
|
|
this.$bus.$emit("execCommand", key, this.copyData);
|
|
break;
|
|
case "RETURN_CENTER":
|
|
this.mindMap.view.reset();
|
|
break;
|
|
default:
|
|
this.$bus.$emit("execCommand", key);
|
|
break;
|
|
}
|
|
this.hide();
|
|
},
|
|
|
|
/**
|
|
* @Author: 王林25
|
|
* @Date: 2022-08-04 14:25:45
|
|
* @Desc: 复制
|
|
*/
|
|
copy() {
|
|
this.exec("COPY_NODE");
|
|
},
|
|
|
|
/**
|
|
* @Author: 王林25
|
|
* @Date: 2022-08-04 14:26:43
|
|
* @Desc: 粘贴
|
|
*/
|
|
paste() {
|
|
this.exec("PASTE_NODE");
|
|
},
|
|
|
|
/**
|
|
* @Author: 王林25
|
|
* @Date: 2022-08-04 14:27:32
|
|
* @Desc: 剪切
|
|
*/
|
|
cut() {
|
|
this.exec("CUT_NODE");
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.contextmenuContainer {
|
|
position: fixed;
|
|
width: 200px;
|
|
background: #fff;
|
|
box-shadow: 0 4px 12px 0 hsla(0, 0%, 69%, 0.5);
|
|
border-radius: 4px;
|
|
padding-top: 16px;
|
|
padding-bottom: 16px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #1a1a1a;
|
|
|
|
.item {
|
|
height: 28px;
|
|
line-height: 28px;
|
|
padding: 0 16px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
&.danger {
|
|
color: #f56c6c;
|
|
}
|
|
|
|
&:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
&.disabled {
|
|
color: grey;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
|
|
&:hover {
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
.desc {
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
</style>
|