diff --git a/web/src/pages/Edit/components/Contextmenu.vue b/web/src/pages/Edit/components/Contextmenu.vue index 803c07e0..c0643792 100644 --- a/web/src/pages/Edit/components/Contextmenu.vue +++ b/web/src/pages/Edit/components/Contextmenu.vue @@ -2,6 +2,7 @@
@@ -239,24 +240,31 @@ export default { methods: { ...mapMutations(['setLocalConfig']), - /** - * @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 + // 计算右键菜单元素的显示位置 + getShowPosition(x, y) { + const rect = this.$refs.contextmenuRef.getBoundingClientRect() + if (x + rect.width > window.innerWidth) { + x = x - rect.width - 20 + } + if (y + rect.height > window.innerHeight) { + y = window.innerHeight - rect.height - 10 + } + return { x, y } }, - /** - * @Author: 王林 - * @Date: 2021-07-16 13:27:48 - * @Desc: 鼠标按下事件 - */ + // 节点右键显示 + show(e, node) { + this.type = 'node' + this.isShow = true + this.node = node + this.$nextTick(() => { + const { x, y } = this.getShowPosition(e.clientX + 10, e.clientY + 10) + this.left = x + this.top = y + }) + }, + + // 鼠标按下事件 onMousedown(e) { if (e.which !== 3) { return @@ -266,11 +274,7 @@ export default { this.isMousedown = true }, - /** - * @Author: 王林 - * @Date: 2021-07-16 13:27:53 - * @Desc: 鼠标松开事件 - */ + // 鼠标松开事件 onMouseup(e) { if (!this.isMousedown) { return @@ -286,35 +290,26 @@ export default { 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 + this.$nextTick(() => { + const { x, y } = this.getShowPosition(e.clientX + 10, e.clientY + 10) + this.left = x + this.top = y + }) }, - /** - * @Author: 王林 - * @Date: 2021-07-14 21:37:55 - * @Desc: 隐藏 - */ + // 隐藏 hide() { this.isShow = false - this.left = 0 - this.top = 0 + this.left = -9999 + this.top = -9999 this.type = '' }, - /** - * @Author: 王林 - * @Date: 2021-07-14 23:27:54 - * @Desc: 执行命令 - */ + // 执行命令 exec(key, disabled, ...args) { if (disabled) { return