@mx-sose-front/mx-sose-graph 1.1.8 → 1.2.1

package/src/hooks/useChartRowSelection.ts

@@ -0,0 +1,456 @@
+import { computed, ref, watch, type Ref } from 'vue'
+
+import { eventBus } from '../store/eventBus'
+
+/**
+ * 行数据的最小结构约束
+ */
+interface ChartRowItem {
+  id: string
+  modelId: string
+  type: string
+  [key: string]: any
+}
+
+/**
+ * 移除操作的上下文
+ * 用于在接口成功后按原位置恢复选中状态
+ */
+interface RemoveContext {
+  removedIds: string[]
+  selectedIndices: number[]
+}
+
+/**
+ * 行选择 Hook 配置项
+ */
+interface UseChartRowSelectionOptions<T extends ChartRowItem> {
+  /**
+   * 当前表格或甘特图的行数据
+   */
+  items: Ref<T[]>
+
+  /**
+   * 行选中状态变化后向外抛出的事件名
+   */
+  rowSelectedEvent: string
+
+  /**
+   * 切换选中前触发
+   * 组件通常用它来关闭行内编辑器或日期选择器
+   */
+  onBeforeSelect?: () => void
+
+  /**
+   * 点击空白区域、清空选中时触发
+   */
+  onClearSelection?: () => void
+
+  /**
+   * 删除选中行并重置本地选中态后触发
+   */
+  onDeleteRows?: () => void
+
+  /**
+   * 移除成功并完成本地数据对齐后触发
+   */
+  onAfterRemoveSuccess?: () => void
+}
+
+/**
+ * 表格/甘特图行交互 Hook
+ *
+ * @description
+ * 抽离 Table 与 Gantt 共用的行交互逻辑，统一处理：
+ * 1. 单选、Ctrl 多选、Shift 连续选择
+ * 2. 右键菜单定位与菜单动作
+ * 3. 上移、下移、删除、移除
+ * 4. 移除成功后的按原位置回选
+ * 5. 工具栏依赖的选中状态通知
+ */
+export function useChartRowSelection<T extends ChartRowItem>({
+  items,
+  rowSelectedEvent,
+  onBeforeSelect,
+  onClearSelection,
+  onDeleteRows,
+  onAfterRemoveSuccess,
+}: UseChartRowSelectionOptions<T>) {
+  // 状态变量
+  const selectedRowIds = ref<Set<string>>(new Set())
+  const lastSelectedId = ref<string | null>(null)
+  const showContextMenu = ref(false)
+  const contextMenuPosition = ref({ x: 0, y: 0 })
+  const contextMenuTargetItem = ref<T | null>(null)
+
+  /**
+   * 缓存本次“移除”的上下文
+   * 后端确认移除成功后，再按原位置恢复选中
+   */
+  const pendingRemoveCtx = ref<RemoveContext | null>(null)
+
+  /**
+   * 处理行点击选中
+   * 支持单选、Ctrl 多选、Shift 连续选择
+   */
+  function selectRow(id: string, event?: MouseEvent) {
+    onBeforeSelect?.()
+
+    if (event?.ctrlKey || event?.metaKey) {
+      const nextSelected = new Set(selectedRowIds.value)
+      if (nextSelected.has(id)) {
+        nextSelected.delete(id)
+      } else {
+        nextSelected.add(id)
+      }
+      selectedRowIds.value = nextSelected
+      lastSelectedId.value = id
+      return
+    }
+
+    if (event?.shiftKey && lastSelectedId.value) {
+      const currentIndex = items.value.findIndex(item => item.id === id)
+      const lastIndex = items.value.findIndex(item => item.id === lastSelectedId.value)
+
+      if (currentIndex !== -1 && lastIndex !== -1) {
+        const start = Math.min(currentIndex, lastIndex)
+        const end = Math.max(currentIndex, lastIndex)
+        const nextSelected = new Set<string>()
+
+        for (let i = start; i <= end; i++) {
+          nextSelected.add(items.value[i].id)
+        }
+
+        selectedRowIds.value = nextSelected
+      }
+      return
+    }
+
+    const isSameRow = selectedRowIds.value.size === 1 && selectedRowIds.value.has(id)
+
+    selectedRowIds.value = new Set([id])
+    lastSelectedId.value = id
+
+    if (isSameRow) return
+
+    const selectedItem = items.value.find(item => item.id === id)
+    if (selectedItem) {
+      eventBus.emit('chart-row-click', selectedItem)
+    }
+  }
+
+  /**
+   * 清空选中状态
+   */
+  function clearSelection() {
+    selectedRowIds.value = new Set()
+    lastSelectedId.value = null
+    onClearSelection?.()
+  }
+
+  /**
+   * 向外同步当前选中状态
+   * 供工具栏判断上移 / 下移按钮是否可用
+   */
+  function emitRowSelected() {
+    if (selectedRowIds.value.size === 0) {
+      eventBus.emit(rowSelectedEvent, null, { isFirst: false, isLast: false })
+      return
+    }
+
+    const selectedIndices = getSelectedIndices()
+    let isContinuous = true
+
+    for (let i = 1; i < selectedIndices.length; i++) {
+      if (selectedIndices[i] - selectedIndices[i - 1] !== 1) {
+        isContinuous = false
+        break
+      }
+    }
+
+    const firstSelectedId = [...selectedRowIds.value][0]
+    if (!isContinuous) {
+      eventBus.emit(rowSelectedEvent, firstSelectedId, {
+        isFirst: true,
+        isLast: true,
+      })
+      return
+    }
+
+    const canMoveUp = selectedIndices.length > 0 && selectedIndices[0] > 0
+    const canMoveDown =
+      selectedIndices.length > 0 && selectedIndices[selectedIndices.length - 1] < items.value.length - 1
+
+    eventBus.emit(rowSelectedEvent, firstSelectedId, {
+      isFirst: !canMoveUp,
+      isLast: !canMoveDown,
+    })
+  }
+
+  /**
+   * 统一抛出行移动事件
+   */
+  function moveRows(direction: 'UP' | 'DOWN') {
+    if (selectedRowIds.value.size === 0) return
+
+    const selectedItems = items.value.filter(item => selectedRowIds.value.has(item.id))
+    eventBus.emit('gantt-move-rows', {
+      selectedItems,
+      allItems: items.value,
+      direction,
+    })
+  }
+
+  /**
+   * 上移选中行
+   */
+  function moveUp() {
+    moveRows('UP')
+  }
+
+  /**
+   * 下移选中行
+   */
+  function moveDown() {
+    moveRows('DOWN')
+  }
+
+  /**
+   * 删除选中行
+   */
+  function deleteRows() {
+    if (selectedRowIds.value.size === 0) return
+
+    const deletedRows = items.value.filter(item => selectedRowIds.value.has(item.id))
+    const deletePayload = deletedRows.map(item => ({
+      modelId: item.modelId,
+      shapeKey: item.type,
+    }))
+
+    eventBus.emit('chart-delete', deletePayload)
+    selectedRowIds.value = new Set()
+    lastSelectedId.value = null
+    onDeleteRows?.()
+  }
+
+  /**
+   * 打开右键菜单
+   */
+  function handleContextMenu(item: T, event: MouseEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const isSameRow = selectedRowIds.value.size === 1 && selectedRowIds.value.has(item.id)
+
+    selectedRowIds.value = new Set([item.id])
+    lastSelectedId.value = item.id
+
+    if (!isSameRow) {
+      eventBus.emit('chart-row-click', item)
+    }
+
+    contextMenuTargetItem.value = item
+    contextMenuPosition.value = {
+      x: event.clientX,
+      y: event.clientY,
+    }
+    showContextMenu.value = true
+  }
+
+  /**
+   * 计算右键菜单目标行的位置
+   * 供菜单判断是否允许上移 / 下移
+   */
+  const rowPosition = computed(() => {
+    if (!contextMenuTargetItem.value) {
+      return { isFirst: true, isLast: true }
+    }
+
+    const index = items.value.findIndex(item => item.id === contextMenuTargetItem.value?.id)
+    if (index === -1) {
+      return { isFirst: true, isLast: true }
+    }
+
+    return {
+      isFirst: index === 0,
+      isLast: index === items.value.length - 1,
+    }
+  })
+
+  const canMoveUp = computed(() => !rowPosition.value.isFirst)
+  const canMoveDown = computed(() => !rowPosition.value.isLast)
+
+  /**
+   * 打开属性配置
+   */
+  function handlePropertyConfig() {
+    if (!contextMenuTargetItem.value) return
+    eventBus.emit('chart-property-config', contextMenuTargetItem.value)
+  }
+
+  /**
+   * 在树上定位当前行
+   */
+  function handleTreeHighlight() {
+    if (!contextMenuTargetItem.value) return
+    eventBus.emit('chart-tree-highlight', contextMenuTargetItem.value)
+  }
+
+  /**
+   * 通过右键菜单执行上移
+   */
+  function handleMoveUpFromMenu() {
+    if (!canMoveUp.value || !contextMenuTargetItem.value) return
+    moveUp()
+  }
+
+  /**
+   * 通过右键菜单执行下移
+   */
+  function handleMoveDownFromMenu() {
+    if (!canMoveDown.value || !contextMenuTargetItem.value) return
+    moveDown()
+  }
+
+  /**
+   * 通过右键菜单执行删除
+   */
+  function handleDeleteFromMenu() {
+    if (!contextMenuTargetItem.value) return
+    deleteRows()
+  }
+
+  /**
+   * 通过右键菜单执行移除
+   */
+  function handleRemoveFromMenu() {
+    if (!contextMenuTargetItem.value) return
+    eventBus.emit('chart-remove', contextMenuTargetItem.value)
+  }
+
+  /**
+   * 获取当前选中行的索引列表
+   */
+  function getSelectedIndices(): number[] {
+    return items.value
+      .map((item, index) => (selectedRowIds.value.has(item.id) ? index : -1))
+      .filter(index => index !== -1)
+      .sort((a, b) => a - b)
+  }
+
+  /**
+   * 触发行移除
+   * 先缓存原始位置，等待接口成功后再做本地对齐
+   */
+  function removeRows() {
+    if (selectedRowIds.value.size === 0) return
+
+    const selectedIndices = getSelectedIndices()
+    if (selectedIndices.length === 0) return
+
+    const removedRows = items.value.filter(item => selectedRowIds.value.has(item.id))
+    const removedIds = removedRows.map(row => row.id)
+
+    pendingRemoveCtx.value = {
+      removedIds,
+      selectedIndices,
+    }
+    eventBus.emit('chart-remove-rows', removedIds)
+  }
+
+  /**
+   * 接口成功后执行本地移除与回选
+   */
+  function applyRemoveAfterSuccess(removedIds: string[], selectedIndices: number[]) {
+    const removedIdSet = new Set(removedIds)
+    items.value = items.value.filter(item => !removedIdSet.has(item.id))
+    onAfterRemoveSuccess?.()
+
+    const nextSelectedIds: string[] = []
+    selectedIndices.forEach(index => {
+      const nextItem = items.value[index]
+      if (nextItem) {
+        nextSelectedIds.push(nextItem.id)
+      }
+    })
+
+    selectedRowIds.value = new Set(nextSelectedIds)
+    lastSelectedId.value = nextSelectedIds.length > 0 ? nextSelectedIds[nextSelectedIds.length - 1] : null
+  }
+
+  /**
+   * 响应外部移除成功回执
+   */
+  function onRemoveSuccess() {
+    const ctx = pendingRemoveCtx.value
+    if (!ctx) return
+
+    applyRemoveAfterSuccess(ctx.removedIds, ctx.selectedIndices)
+    pendingRemoveCtx.value = null
+  }
+
+  /**
+   * 选中最后一行
+   * 用于新增成功后的默认回选
+   */
+  function selectLastRow() {
+    const list = items.value
+    if (!list.length) {
+      selectedRowIds.value = new Set()
+      lastSelectedId.value = null
+      return
+    }
+
+    const last = list[list.length - 1]
+    selectedRowIds.value = new Set([last.id])
+    lastSelectedId.value = last.id
+  }
+
+  /**
+   * 同步“单行选中”状态
+   * 供属性面板等只关心单选对象的模块使用
+   */
+  watch(
+    [selectedRowIds, items],
+    ([newSet]) => {
+      if (newSet.size !== 1) {
+        eventBus.emit('row-single-selected', null)
+        return
+      }
+
+      const selectedId = [...newSet][0]
+      const row = items.value.find(item => item.id === selectedId)
+      eventBus.emit('row-single-selected', row ?? null)
+    },
+    { deep: true }
+  )
+
+  /**
+   * 同步工具栏依赖的选中位置信息
+   */
+  watch([selectedRowIds, () => items.value.length], emitRowSelected, { deep: true })
+
+  return {
+    canMoveDown,
+    canMoveUp,
+    clearSelection,
+    contextMenuPosition,
+    contextMenuTargetItem,
+    deleteRows,
+    handleContextMenu,
+    handleDeleteFromMenu,
+    handleMoveDownFromMenu,
+    handleMoveUpFromMenu,
+    handlePropertyConfig,
+    handleRemoveFromMenu,
+    handleTreeHighlight,
+    moveDown,
+    moveUp,
+    onRemoveSuccess,
+    removeRows,
+    selectLastRow,
+    selectRow,
+    selectedRowIds,
+    showContextMenu,
+  }
+}

package/src/hooks/useResize.ts

@@ -64,7 +64,7 @@ export interface UseResizeReturn {
   groupGhost: Ref<Record<string, Rect>>;
   startResize: (e: MouseEvent, dir: "nw" | "ne" | "sw" | "se", target: Shape) => void;
   handleResize: (e: MouseEvent) => void;
-  stopResize: () => void;
+  stopResize: () => Promise<void> | void;
   cancelResize: () => void;
   getMinDimensions: (shape: Shape, baseMinW?: number, mode?: MinDimensionMode) => MinDimensions;
 }
@@ -254,7 +254,7 @@ export function useResize(
   /**
    * 停止缩放
    */
-  const stopResize = () => {
+  const stopResize = async () => {
     if (!isResizing.value || !resizingTarget.value) return;
 
     const id = resizingTarget.value.id;

package/src/hooks/useVirtualScroll.ts

@@ -0,0 +1,258 @@
+import { computed, ref, watch, nextTick, type Ref } from 'vue'
+
+/**
+ * 虚拟滚动配置选项
+ */
+export interface VirtualScrollOptions {
+  /**
+   * 每行的高度（px）
+   */
+  itemHeight: number
+
+  /**
+   * 表头高度（px），默认 0
+   */
+  headerHeight?: number
+
+  /**
+   * 缓冲区行数（上下各预渲染多少行），默认 8
+   */
+  overscan?: number
+
+  /**
+   * 容器元素的 ref（用于获取滚动位置和视口高度）
+   */
+  containerRef: Ref<HTMLElement | null | undefined>
+
+  /**
+   * 可选的额外容器 ref（用于多容器同步场景，如甘特图左右两侧）
+   */
+  extraContainerRefs?: Ref<HTMLElement | null | undefined>[]
+
+  /**
+   * 可见列数（用于 colspan），默认 1
+   */
+  columnCount?: Ref<number> | number
+}
+
+/**
+ * 虚拟滚动返回值
+ */
+export interface VirtualScrollReturn<T> {
+  /**
+   * 当前可见的虚拟行数据
+   */
+  virtualRows: Ref<Array<{ item: T; index: number }>>
+
+  /**
+   * 上方占位空间高度（px）
+   */
+  virtualTopSpacerHeight: Ref<number>
+
+  /**
+   * 下方占位空间高度（px）
+   */
+  virtualBottomSpacerHeight: Ref<number>
+
+  /**
+   * 起始索引
+   */
+  virtualStartIndex: Ref<number>
+
+  /**
+   * 结束索引
+   */
+  virtualEndIndex: Ref<number>
+
+  /**
+   * 可见行数
+   */
+  virtualVisibleRowCount: Ref<number>
+
+  /**
+   * 当前滚动位置
+   */
+  virtualScrollTop: Ref<number>
+
+  /**
+   * 视口高度
+   */
+  virtualViewportHeight: Ref<number>
+
+  /**
+   * 同步视口状态（手动调用，用于滚动事件或尺寸变化时）
+   */
+  syncVirtualViewportState: (preferredEl?: HTMLElement | null) => void
+
+  /**
+   * 可见列数（用于 colspan）
+   */
+  visibleColumnSpan: Ref<number>
+}
+
+/**
+ * 虚拟滚动 Hook
+ * 
+ * @description
+ * 用于大数据量列表的性能优化，只渲染可见区域的行，大幅减少 DOM 节点数量。
+ * 
+ * @example
+ * ```ts
+ * const containerRef = ref<HTMLElement>()
+ * const items = ref([...]) // 1000 条数据
+ * 
+ * const {
+ *   virtualRows,
+ *   virtualTopSpacerHeight,
+ *   virtualBottomSpacerHeight,
+ *   syncVirtualViewportState
+ * } = useVirtualScroll(items, {
+ *   itemHeight: 32,
+ *   headerHeight: 56,
+ *   overscan: 8,
+ *   containerRef
+ * })
+ * 
+ * // 在滚动事件中调用
+ * onScroll(() => {
+ *   syncVirtualViewportState()
+ * })
+ * ```
+ */
+export function useVirtualScroll<T = any>(
+  items: Ref<T[]>,
+  options: VirtualScrollOptions
+): VirtualScrollReturn<T> {
+  const {
+    itemHeight,
+    headerHeight = 0,
+    overscan = 8,
+    containerRef,
+    extraContainerRefs = [],
+    columnCount = 1,
+  } = options
+
+  // 状态变量
+  const virtualScrollTop = ref(0)
+  const virtualViewportHeight = ref(0)
+
+  /**
+   * 同步视口状态
+   * 从容器元素中读取当前滚动位置和视口高度
+   */
+  function syncVirtualViewportState(preferredEl?: HTMLElement | null) {
+    const allRefs = [containerRef, ...extraContainerRefs]
+    const sourceEl = preferredEl ?? allRefs.find(r => r.value)?.value
+
+    if (!sourceEl) return
+
+    // 更新滚动位置
+    virtualScrollTop.value = sourceEl.scrollTop
+
+    // 更新视口高度（取所有容器的最大值）
+    virtualViewportHeight.value = Math.max(
+      ...allRefs.map(r => r.value?.clientHeight ?? 0)
+    )
+  }
+
+  /**
+   * 计算可见行数
+   * 视口内容区高度 ÷ 行高 = 可见行数
+   */
+  const virtualVisibleRowCount = computed(() => {
+    const bodyViewportHeight = Math.max(
+      virtualViewportHeight.value - headerHeight,
+      itemHeight
+    )
+
+    return Math.max(1, Math.ceil(bodyViewportHeight / itemHeight))
+  })
+
+  /**
+   * 计算起始索引
+   * 当前滚动位置对应的行索引 - 缓冲区行数
+   */
+  const virtualStartIndex = computed(() => {
+    return Math.max(
+      0,
+      Math.floor(virtualScrollTop.value / itemHeight) - overscan
+    )
+  })
+
+  /**
+   * 计算结束索引
+   * 起始索引 + 可见行数 + 上下缓冲区行数
+   */
+  const virtualEndIndex = computed(() => {
+    return Math.min(
+      items.value.length,
+      virtualStartIndex.value + virtualVisibleRowCount.value + overscan * 2
+    )
+  })
+
+  /**
+   * 获取当前需要渲染的虚拟行数据
+   * 从原始数据中切片，并附加原始索引信息
+   */
+  const virtualRows = computed(() => {
+    return items.value
+      .slice(virtualStartIndex.value, virtualEndIndex.value)
+      .map((item, offset) => ({
+        item,
+        index: virtualStartIndex.value + offset,
+      }))
+  })
+
+  /**
+   * 上方占位空间高度
+   * 起始索引 × 行高 = 已滚过的行的总高度
+   */
+  const virtualTopSpacerHeight = computed(() => {
+    return virtualStartIndex.value * itemHeight
+  })
+
+  /**
+   * 下方占位空间高度
+   * (总行数 - 结束索引) × 行高 = 未滚到的行的总高度
+   */
+  const virtualBottomSpacerHeight = computed(() => {
+    return Math.max(
+      0,
+      (items.value.length - virtualEndIndex.value) * itemHeight
+    )
+  })
+
+  /**
+   * 可见列数（用于 colspan）
+   */
+  const visibleColumnSpan = computed(() => {
+    return typeof columnCount === 'number' ? columnCount : columnCount.value
+  })
+
+  /**
+   * 监听数据长度变化
+   * 当过滤结果变短时，浏览器会自动修正 scrollTop，需要重新读取
+   */
+  watch(
+    () => items.value.length,
+    () => {
+      nextTick(() => {
+        syncVirtualViewportState()
+      })
+    },
+    { immediate: true }
+  )
+
+  return {
+    virtualRows,
+    virtualTopSpacerHeight,
+    virtualBottomSpacerHeight,
+    virtualStartIndex,
+    virtualEndIndex,
+    virtualVisibleRowCount,
+    virtualScrollTop,
+    virtualViewportHeight,
+    syncVirtualViewportState,
+    visibleColumnSpan,
+  }
+}