修复终端右键菜单位置异常 (#9)

* 1. 修复终端右键菜单位置异常 * 1. 优化终端左侧边距，防止togglebar遮挡vim下的文字 * 1. 优化终端右键菜单弹出位置计算逻辑 * 1. 优化终端右键菜单弹出位置计算逻辑
nxshell · Nov 24, 2022 · 6341c36 · 6341c36
1 parent 6d39ec1
commit 6341c36
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 92 deletions.
diff --git a/src/components/menu/contextmenu.js b/src/components/menu/contextmenu.js
@@ -1,105 +1,124 @@
-import Vue from "vue";
+import Vue from 'vue'
 
-import "./contextmenu.scss";
+import './contextmenu.scss'
 
 const PtContextMenu = Vue.extend({
-    data() {
-        return {
-            menuData: [],
-            sourceEvent: null,
-            selfRect: {
-                left: 0,
-                top: 0,
-                right: 0,
-                height: 0
-            },
-            visibility: false
-        };
-    },
+	data() {
+		return {
+			menuData: [],
+			sourceEvent: null,
+			selfRect: {
+				left: 0,
+				top: 0,
+				right: 0,
+				height: 0
+			},
+			visibility: false
+		}
+	},
 
-    computed: {
-        left() {
-            let left = this.sourceEvent.x;
-            if (left + this.selfRect.width > window.innerWidth) {
-                left -= this.selfRect.width;
-            }
-            return left;
-        },
+	computed: {
+		left() {
+			let left = this.sourceEvent.x
+			if (left + this.selfRect.width > window.innerWidth) {
+				left -= this.selfRect.width
+			}
+			return left
+		},
 
-        top() {
-            let top = this.sourceEvent.y;
-            if (top + this.selfRect.height > window.innerHeight) {
-                top -= this.selfRect.height;
-            }
-            return top;
-        }
-    },
+		top() {
+			// 需要减去的高度（当在终端中，需要减去标题栏 40 tab栏 40 工具栏 40 美化效果 10）
+			const subHeight = this.sourceEvent.target.getAttribute('class') === 'xterm-cursor-layer' ? 130 : 40
+			// 实际内容高度
+			const realHeight = window.innerHeight - subHeight
 
-    mounted() {
-        this.$nextTick(() => {
-            this.getRect();
-            this.visibility = true;
-        });
-    },
+			let top = this.sourceEvent.y
+			if (top + this.selfRect.height > window.innerHeight) {
+				// 当真实高度 - 当前鼠标Y坐标 小于等于真实高度 1/3时，使用当前鼠标位置-菜单栏自身高度计算菜单栏top 否则使用subHeight
+                // 如果计算后的高度小于subHeight 则使用苏北Height
+				const calcTop = top - this.selfRect.height
+				top = realHeight - top <= realHeight / 3 ? (calcTop < subHeight ? subHeight : calcTop) : subHeight
+			}
+			return top
+		}
+	},
 
-    beforeDestroy() {
-        this.$el.remove()
-    },
+	mounted() {
+		this.$nextTick(() => {
+			this.getRect()
+			this.visibility = true
+		})
+	},
 
-    methods: {
-        getRect() {
-            if (!this.$el) {
-                return { left: 0, top: 0, right: 0, height: 0 };
-            }
-            const rect = this.$el.getBoundingClientRect();
-            this.selfRect = {
-                left: rect.left, top: rect.top, width: rect.width, height: rect.height
-            };
-        }, handlePopStack() {
-            this.$destroy();
-        }
-    },
+	beforeDestroy() {
+		this.$el.remove()
+	},
 
-    render(h) {
-        const menu = h("pt-menu", {
-            props: {
-                menu: this.menuData,
-                translate: true
-            }, on: {
-                "pop-stack": this.handlePopStack
-            }
-        });
-        return h("div", {
-            'class': {
-                'context-menu': true
-            }, style: {
-                left: this.left + 'px', top: this.top + 'px',
-            }
-        }, [menu])
-    }
-});
+	methods: {
+		getRect() {
+			if (!this.$el) {
+				return { left: 0, top: 0, right: 0, height: 0 }
+			}
+			const rect = this.$el.getBoundingClientRect()
+			this.selfRect = {
+				left: rect.left,
+				top: rect.top,
+				width: rect.width,
+				height: rect.height
+			}
+		},
+		handlePopStack() {
+			this.$destroy()
+		}
+	},
+
+	render(h) {
+		const menu = h('pt-menu', {
+			props: {
+				menu: this.menuData,
+				translate: true
+			},
+			on: {
+				'pop-stack': this.handlePopStack
+			}
+		})
+		return h(
+			'div',
+			{
+				class: {
+					'context-menu': true
+				},
+				style: {
+					left: this.left + 'px',
+					top: this.top + 'px'
+				}
+			},
+			[menu]
+		)
+	}
+})
 
 export function showContextMenu(menu, evt) {
-    // 没有内容禁止打开
-    if (!menu || menu.length === 0) {
-        return
-    }
-    const contextMenuNode = document.createElement("div");
-    document.body.appendChild(contextMenuNode)
-    new PtContextMenu({
-        data: {
-            menuData: menu,
-            sourceEvent: evt
-        }
-    }).$mount(contextMenuNode);
+	// 没有内容禁止打开
+	if (!menu || menu.length === 0) {
+		return
+	}
+	const contextMenuNode = document.createElement('div')
+	document.body.appendChild(contextMenuNode)
+	new PtContextMenu({
+		data: {
+			menuData: menu,
+			sourceEvent: evt
+		}
+	}).$mount(contextMenuNode)
 }
 
 export default {
-    install() {
-        Object.defineProperty(Vue.prototype, "$showContextMenu", {
-            get() {
-                return showContextMenu;
-            }
-        })
-    }
-}
+	install() {
+		Object.defineProperty(Vue.prototype, '$showContextMenu', {
+			get() {
+				return showContextMenu
+			}
+		})
+	}
+}
diff --git a/src/components/xterm/xterm.vue b/src/components/xterm/xterm.vue
@@ -425,7 +425,7 @@ export default {
 	position: relative;
 	width: 100%;
 	height: 100%;
-	padding: 5px;
+	padding: 5px 5px 5px 10px;
 	box-sizing: border-box;
 
 	.xterm-container {