feat(STable): use resize indicator during column drag for better perf (#658)

Author: haoqunjiang

lib/components/STable.vue

@@ -22,6 +22,7 @@ const head = shallowRef<HTMLElement | null>(null)
 const body = shallowRef<HTMLElement | null>(null)
 const block = shallowRef<HTMLElement | null>(null)
 const row = shallowRef<HTMLElement | null>(null)
+const table = shallowRef<HTMLElement | null>(null)
 
 const ordersToShow = smartComputed(() => {
   const orders = unref(props.options.orders).filter((key) => {
@@ -61,6 +62,12 @@ const cellOfColToGrow = computed(() => {
 const colWidths = reactive<Record<string, string>>({})
 const blockWidth = ref<number | undefined>()
 
+const resizeState = ref<{
+  columnName: string
+  startX: number
+  indicatorX: number
+} | null>(null)
+
 watch(() => unref(props.options.columns), (columns) => {
   Object.keys(columns).forEach((key) => {
     const width = columns[key]?.width
@@ -386,6 +393,29 @@ function getStyles(key: string) {
     '--table-col-left': widthSum ? `calc(${widthSum})` : '0px'
   }
 }
+
+function handleResizeStart(data: { columnName: string; startX: number; initialX: number }) {
+  const tableRect = table.value?.getBoundingClientRect()
+  const tableLeft = tableRect?.left ?? 0
+  const indicatorX = data.initialX - tableLeft
+
+  resizeState.value = {
+    columnName: data.columnName,
+    startX: indicatorX,
+    indicatorX
+  }
+}
+
+function handleResizeMove(data: { deltaX: number }) {
+  if (resizeState.value) {
+    resizeState.value.indicatorX = resizeState.value.startX + data.deltaX
+  }
+}
+
+function handleResizeEnd(data: { columnName: string; finalWidth: string }) {
+  updateColWidth(data.columnName, data.finalWidth, true)
+  resizeState.value = null
+}
 </script>
 
 <template>
@@ -401,7 +431,13 @@ function getStyles(key: string) {
         :selected="Array.isArray(selected) ? selected : undefined"
       />
 
-      <div class="table" role="grid">
+      <div ref="table" class="table" role="grid">
+        <div
+          v-if="resizeState"
+          class="resize-indicator"
+          :style="{ left: `${resizeState.indicatorX}px` }"
+        />
+
         <div ref="head" class="container head" @scroll="syncHeadScroll">
           <div ref="block" class="block">
             <div ref="row" class="row">
@@ -420,7 +456,9 @@ function getStyles(key: string) {
                   :dropdown="unref(options.columns)[key]?.dropdown"
                   :has-header="showHeader"
                   :resizable="unref(options.columns)[key]?.resizable"
-                  @resize="(value) => updateColWidth(key, value, true)"
+                  @resize-start="handleResizeStart"
+                  @resize-move="handleResizeMove"
+                  @resize-end="handleResizeEnd"
                 >
                   <SInputCheckbox
                     v-if="
@@ -636,6 +674,16 @@ function getStyles(key: string) {
   color: var(--c-text-1);
 }
 
+.resize-indicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--c-border-info-1);
+  z-index: 200;
+  pointer-events: none;
+}
+
 .STable .col-__select {
   --table-col-width: calc(48px + var(--table-padding-left));
 

lib/components/STableColumn.vue

@@ -17,13 +17,16 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  resize: [value: string]
+  'resize-start': [data: { columnName: string; startX: number; initialX: number }]
+  'resize-move': [data: { deltaX: number }]
+  'resize-end': [data: { columnName: string; finalWidth: string }]
 }>()
 
 const { container, isOpen, toggle } = useFlyout()
 
 let startWidth = 0
 let startPoint = 0
+let originalUserSelect = ''; let originalPointerEvents = ''
 
 const column = ref<HTMLElement | null>(null)
 const dialog = ref<HTMLElement | null>(null)
@@ -67,24 +70,43 @@ watch(isOpen, (value) => {
   value ? adjustDialogPosition() : stopDialogPositionListener()
 })
 
-function grip(e: any) {
+function grip(e: MouseEvent) {
   startWidth = column.value?.offsetWidth ?? 0
   startPoint = e.pageX
 
+  emit('resize-start', {
+    columnName: props.name,
+    startX: e.pageX,
+    initialX: e.pageX
+  })
+
+  originalUserSelect = document.body.style.userSelect
+  originalPointerEvents = document.body.style.pointerEvents
+  document.body.style.userSelect = 'none'
+  document.body.style.pointerEvents = 'none'
   document.addEventListener('mousemove', resize)
   document.addEventListener('mouseup', stopResizeListener)
 }
 
 function resize(e: MouseEvent) {
-  const movedWidth = e.pageX - startPoint
-  const resized = startWidth + movedWidth
-
-  emit('resize', resized > -1 ? `${resized}px` : 'var(--table-col-width)')
+  const deltaX = e.pageX - startPoint
+  emit('resize-move', { deltaX })
 }
 
-function stopResizeListener() {
+function stopResizeListener(e: MouseEvent) {
   document.removeEventListener('mousemove', resize)
   document.removeEventListener('mouseup', stopResizeListener)
+  document.body.style.userSelect = originalUserSelect
+  document.body.style.pointerEvents = originalPointerEvents
+
+  const movedWidth = e.pageX - startPoint
+  const resized = startWidth + movedWidth
+  const finalWidth = resized > -1 ? `${resized}px` : 'var(--table-col-width)'
+
+  emit('resize-end', {
+    columnName: props.name,
+    finalWidth
+  })
 }
 
 async function adjustDialogPosition() {
@@ -138,6 +160,7 @@ function stopDialogPositionListener() {
         </div>
 
         <div v-if="resizable" class="grip" @mousedown="grip" />
+        <div v-if="resizable" class="resize-indicator" />
       </slot>
     </div>
   </div>