From 11e998a14730fa4cb1b937df8181af59f0d8a5be Mon Sep 17 00:00:00 2001
From: SaarHV <dev16102@linx-info.com>
Date: Fri, 13 Jan 2023 18:27:08 +0800
Subject: [PATCH] Update the tagsview's context

---
 src/layout/navBars/tagsView/contextmenu.vue | 116 ++++++++++++++------
 1 file changed, 85 insertions(+), 31 deletions(-)

diff --git a/src/layout/navBars/tagsView/contextmenu.vue b/src/layout/navBars/tagsView/contextmenu.vue
index 7c4cc8e..3a3529b 100644
--- a/src/layout/navBars/tagsView/contextmenu.vue
+++ b/src/layout/navBars/tagsView/contextmenu.vue
@@ -1,53 +1,91 @@
 <template>
 	<transition name="el-zoom-in-center">
-		<div aria-hidden="true" class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu" role="tooltip"
-			data-popper-placement="bottom" :style="`top: ${dropdown.y + 5}px;left: ${dropdown.x}px;`" v-show="isShow">
+		<div
+			aria-hidden="true"
+			class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu"
+			role="tooltip"
+			data-popper-placement="bottom"
+			:style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;`"
+			:key="Math.random()"
+			v-show="isShow"
+		>
 			<ul class="el-dropdown-menu">
-				<li class="el-dropdown-menu__item" aria-disabled="false" tabindex="-1" v-for="(v,k) in dropdownList" :key="k">
-					<i :class="v.icon"></i>
-					<span>{{v.txt}}</span>
-				</li>
+				<template v-for="(v, k) in dropdownList">
+					<li
+						class="el-dropdown-menu__item"
+						aria-disabled="false"
+						tabindex="-1"
+						:key="k"
+						v-if="!v.affix"
+						@click="onCurrentContextmenuClick(v.contextMenuClickId)"
+					>
+						<SvgIcon :name="v.icon" />
+						<span>{{ v.txt }}</span>
+					</li>
+				</template>
 			</ul>
-			<div class="el-popper__arrow" style="left:10px"></div>
+			<div class="el-popper__arrow" :style="{ left: `${arrowLeft}px` }"></div>
 		</div>
 	</transition>
 </template>
 
 <script lang="ts">
-import {
-	computed,
-	defineComponent,
-	reactive,
-	toRefs,
-	onMounted,
-	onUnmounted,
-} from 'vue';
+import { computed, defineComponent, reactive, toRefs, onMounted, onUnmounted, watch } from 'vue';
+
 export default defineComponent({
 	name: 'layoutTagsViewContextmenu',
 	props: {
 		dropdown: {
 			type: Object,
+			default: () => {
+				return {
+					x: 0,
+					y: 0,
+				};
+			},
 		},
 	},
-	setup(props) {
+	setup(props, { emit }) {
 		const state = reactive({
 			isShow: false,
 			dropdownList: [
-				{ id: 0, txt: '刷新', affix: false, icon: 'el-icon-refresh-right' },
-				{ id: 1, txt: '关闭', affix: true, icon: 'el-icon-close' },
-				{ id: 2, txt: '关闭其它', affix: false, icon: 'el-icon-circle-close' },
-				{ id: 3, txt: '全部关闭', affix: false, icon: 'el-icon-folder-delete' },
+				{ contextMenuClickId: 0, txt: '刷新', affix: false, icon: 'ele-RefreshRight' },
+				{ contextMenuClickId: 1, txt: '关闭', affix: false, icon: 'ele-Close' },
+				{ contextMenuClickId: 2, txt: '关闭其它', affix: false, icon: 'ele-CircleClose' },
+				{ contextMenuClickId: 3, txt: '全部关闭', affix: false, icon: 'ele-FolderDelete' },
+				{
+					contextMenuClickId: 4,
+					txt: 'message.tagsView.fullscreen',
+					affix: false,
+					icon: 'iconfont icon-fullscreen',
+				},
 			],
+			item: {},
+			arrowLeft: 10,
 		});
-		const dropdown = computed(() => {
-			return props.dropdown;
+		const dropdowns = computed(() => {
+			if (props.dropdown.x + 117 > document.documentElement.clientWidth) {
+				return {
+					x: document.documentElement.clientWidth - 117 - 5,
+					y: props.dropdown.y,
+				};
+			} else {
+				return props.dropdown;
+			}
 		});
-		const openContextmenu = () => {
+		// Current item menu click
+		const onCurrentContextmenuClick = (contextMenuClickId: number) => {
+			emit('currentContextmenuClick', Object.assign({}, { contextMenuClickId }, state.item));
+		};
+		const openContextmenu = (item: any) => {
+			state.item = item;
+			item.meta.isAffix ? (state.dropdownList[1].affix = true) : (state.dropdownList[1].affix = false);
 			closeContextmenu();
 			setTimeout(() => {
 				state.isShow = true;
 			}, 10);
 		};
+		// Close the context menu
 		const closeContextmenu = () => {
 			state.isShow = false;
 		};
@@ -57,10 +95,22 @@ export default defineComponent({
 		onUnmounted(() => {
 			document.body.removeEventListener('click', closeContextmenu);
 		});
+		// Monitor drop-down menu position
+		watch(
+			() => props.dropdown,
+			({ x }) => {
+				if (x + 117 > document.documentElement.clientWidth) state.arrowLeft = 117 - (document.documentElement.clientWidth - x);
+				else state.arrowLeft = 10;
+			},
+			{
+				deep: true,
+			}
+		);
 		return {
-			dropdown,
+			dropdowns,
 			openContextmenu,
 			closeContextmenu,
+			onCurrentContextmenuClick,
 			...toRefs(state),
 		};
 	},
@@ -69,11 +119,15 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .custom-contextmenu {
-  transform-origin: center top;
-  z-index: 2190;
-  position: fixed;
-  .el-dropdown-menu__item {
-    font-size: 12px !important;
-  }
+	transform-origin: center top;
+	z-index: 2190;
+	position: fixed;
+	.el-dropdown-menu__item {
+		font-size: 12px !important;
+		white-space: nowrap;
+		i {
+			font-size: 12px !important;
+		}
+	}
 }
-</style>
\ No newline at end of file
+</style>
-- 
Gitee