Merge branch 'main' of http://github.com/ideal-world/task-table

Author: akfdwjx

src/components/common/Menu.vue

@@ -12,7 +12,8 @@ const contextmenuMathRandom = computed(() =>
   Math.floor(Math.random() * 1000000),
 )
 
-async function showContextMenu(attachObj: HTMLElement | MouseEvent, offset: MenuOffsetKind = MenuOffsetKind.MEDIUM_TOP, size: MenuSizeKind = MenuSizeKind.MEDIUM, force: boolean = false) {
+async function showContextMenu(attachObj: HTMLElement | MouseEvent, offset: MenuOffsetKind = MenuOffsetKind.MEDIUM_TOP, size: MenuSizeKind | MenuCustomSize = MenuSizeKind.MEDIUM, force: boolean = false, boundaryEle?: HTMLElement,
+) {
   const contextmenuEle = contextmenuRef.value!
   if (!is_init.value && EVENTS.init[contextmenuEle.id]) {
     EVENTS.init[contextmenuEle.id].callback(contextmenuEle)
@@ -55,6 +56,12 @@ async function showContextMenu(attachObj: HTMLElement | MouseEvent, offset: Menu
       padding = 4
       break
     }
+    default: {
+      minHeight = size.height ?? 80
+      minWidth = size.width ?? 160
+      padding = 3
+      break
+    }
   }
 
   const contextMenuEle = contextmenuRef.value as HTMLElement
@@ -115,7 +122,12 @@ async function showContextMenu(attachObj: HTMLElement | MouseEvent, offset: Menu
       }
     }
     contextMenuEle.style.left = `${left}px`
+    contextMenuEle.dataset.left = `${left + window.scrollX}`
     contextMenuEle.style.top = `${top}px`
+    contextMenuEle.dataset.top = `${top + window.scrollY}`
+
+    addBoundaryAdjustment(contextMenuEle, boundaryEle)
+
     contextMenuEle.style.visibility = 'visible'
 
     contextMenuEle.querySelectorAll('.iw-contextmenu__item').forEach((node) => {
@@ -136,6 +148,35 @@ async function showContextMenu(attachObj: HTMLElement | MouseEvent, offset: Menu
   })
 }
 
+function addBoundaryAdjustment(contextMenuEle: HTMLElement, boundaryEle?: HTMLElement) {
+  if (boundaryEle) {
+    const observer = new ResizeObserver((_) => {
+      let left = contextMenuEle.offsetLeft
+      let top = contextMenuEle.offsetTop
+
+      const boundaryEleRect = boundaryEle.getBoundingClientRect()
+      if (left < boundaryEleRect.left) {
+        left = boundaryEleRect.left
+      }
+      if (top < boundaryEleRect.top) {
+        top = boundaryEleRect.top
+      }
+      if ((left + contextMenuEle.offsetWidth) > boundaryEleRect.right) {
+        left = boundaryEleRect.right - contextMenuEle.offsetWidth
+      }
+
+      if ((top + contextMenuEle.offsetHeight) > boundaryEleRect.bottom) {
+        top = boundaryEleRect.bottom - contextMenuEle.offsetHeight
+      }
+      contextMenuEle.style.left = `${left}px`
+      contextMenuEle.dataset.left = `${left + window.scrollX}`
+      contextMenuEle.style.top = `${top}px`
+      contextMenuEle.dataset.top = `${top + window.scrollY}`
+    })
+    observer.observe(contextMenuEle)
+  }
+}
+
 function hideUnActiveContextMenus(event: MouseEvent) {
   const contextmenuEles = Array.from(document.querySelectorAll('.iw-contextmenu'))
     .filter(ele => ele instanceof HTMLElement && (ele as HTMLElement).style.display !== 'none')
@@ -178,9 +219,12 @@ onMounted(() => {
   window.addEventListener('scroll', () => {
     const contextmenuEles = document.querySelectorAll('.iw-contextmenu')
     for (const i in contextmenuEles) {
-      if (!(contextmenuEles[i] instanceof HTMLElement) || (contextmenuEles[i] as HTMLElement).style.display === 'none')
+      if (!(contextmenuEles[i] instanceof HTMLElement) || (contextmenuEles[i] as HTMLElement).style.display === 'none') {
         continue
-      doCloseContextMenu(contextmenuEles[i] as HTMLElement)
+      }
+      const contextMenuEle = contextmenuEles[i] as HTMLElement
+      contextMenuEle.style.top = `${Number.parseInt(contextMenuEle.dataset.top!) - window.scrollY}px`
+      contextMenuEle.style.left = `${Number.parseInt(contextMenuEle.dataset.left!) - window.scrollX}px`
     }
   })
 })
@@ -230,6 +274,11 @@ export enum MenuSizeKind {
   LARGE,
 }
 
+export interface MenuCustomSize {
+  width?: number
+  height?: number
+}
+
 export const FUN_CLOSE_CONTEXT_MENU_TYPE = Symbol('FUN_CLOSE_CONTEXT_MENU_TYPE') as InjectionKey<() => void>
 
 const EVENTS: {

src/components/common/Scrollable.vue

@@ -29,12 +29,12 @@ onMounted(() => {
 
 function offsetLeft() {
   const mainEle = scrollableMainRef.value!
-  mainEle.scrollLeft = Math.min(mainEle.scrollLeft + 200, mainEle.offsetWidth)
+  mainEle.scrollLeft = Math.max(mainEle.scrollLeft - 200, 0)
 }
 
 function offsetRight() {
   const mainEle = scrollableMainRef.value!
-  mainEle.scrollLeft = Math.max(mainEle.scrollLeft - 200, 0)
+  mainEle.scrollLeft = Math.min(mainEle.scrollLeft + 200, mainEle.offsetWidth)
 }
 </script>
 

src/components/function/FilterSetting.vue

@@ -76,7 +76,7 @@ async function showFilterGroupContainer(e: Event, filterGroupIdx?: number) {
   else {
     selectedFilterGroup.value = []
   }
-  filterGroupContainerCompRef.value?.show(targetEle, undefined, MenuSizeKind.LARGE, false)
+  filterGroupContainerCompRef.value?.show(targetEle, undefined, MenuSizeKind.LARGE, false, targetEle.closest('.iw-tt') as HTMLElement)
 }
 
 async function deleteFilterGroup(filterGroupIdx: number) {

src/components/function/TableSetting.vue

@@ -30,7 +30,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <a class="cursor-pointer"><i :class="iconSvg.MORE" @click="(e) => { tableSettingCompRef?.show(e, MenuOffsetKind.RIGHT_TOP) }" /></a>
+  <a class="cursor-pointer">
+    <i
+      :class="iconSvg.MORE"
+      @click="(e) => { tableSettingCompRef?.show(e, MenuOffsetKind.RIGHT_TOP, { width: 210 }, false, (e.target as HTMLElement).closest('.iw-tt') as HTMLElement) }"
+    /></a>
   <MenuComp ref="tableSettingCompRef">
     <BasicSettingComp :layout-conf="props.layoutConf" />
     <template v-if="props.basicConf.parentPkColumnName">