plain-design 0.0.97 → 1.0.0-beta.10

package/src/packages/components/Table/table/use/useTableDraggier.col.tsx

@@ -0,0 +1,639 @@
+import {createEffects} from "plain-utils/utils/createEffects";
+import {useAutoScroll} from "../../../Scroll/useAutoScroll";
+import {PlainScroll} from "../../../Scroll";
+import {TablePlcFixedType, tPlc, tPlcType} from "../../plc/utils/plc.utils";
+import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
+import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import {IteratePlcHandleType, iteratePlcList} from "../../plc/utils/iteratePlcList";
+import VirtualTable from "../../../VirtualTable";
+import {customDeepClone} from "../../../../utils/customDeepClone";
+import {addClass} from "plain-utils/dom/addClass";
+import {getComponentCls, iMouseEvent, nextIndex, StyleProperties} from "plain-design-composition";
+import {iTableHooks} from "../utils/createTableHooks";
+import {iElementRect} from "../../../../utils/getRowEl";
+import {createEnum} from "plain-utils/utils/createEnum";
+import {ClientZoom} from "../../../ClientZoom";
+
+export function useTableDraggierCol(
+  {
+    refs,
+    hooks,
+    getScroll,
+    getHeadPlcListArray,
+    getBodyPlcListArray,
+    getPlcListArray,
+    onChange,
+  }: {
+    /*table对子节点/子组件的引用*/
+    refs: {
+      /*table根节点dom对象*/
+      el: HTMLDivElement | null | undefined,
+      /*virtual table组件实例*/
+      virtual: typeof VirtualTable.use.class | null | undefined
+    },
+    /*table内部钩子*/
+    hooks: iTableHooks,
+    /*获取scroll组件实例，实现自动滚动*/
+    getScroll: () => PlainScroll | null | undefined,
+    /*用于渲染表头的plc二维数组*/
+    getHeadPlcListArray: () => tPlcType[][],
+    /*用于渲染表体的plc数组，这个数组可能是virtual flat plc数组*/
+    getBodyPlcListArray: () => tPlcType[],
+    /*顶层的plc数组*/
+    getPlcListArray: () => tPlcType[],
+    /*拖拽位置变化动作*/
+    onChange: (broList: tPlcType[]) => void,
+  }
+) {
+
+  /*拖拽产生的副作用*/
+  const { effects: draggierEffects } = createEffects();
+
+  /*自动滚动*/
+  const autoScroll = useAutoScroll({ vertical: false, getScroll, });
+
+  const shadowTableHandler = (() => {
+
+    let staticState = null as null | {
+      plc: tPlcType,
+      start: {
+        x: number,
+        y: number,
+      },
+      data: null | {
+        left: number,
+        table: HTMLTableElement,
+        cloneTable: HTMLTableElement,
+        move: {
+          x: number,
+          y: number,
+        },
+      }
+    };
+
+    const initDraggierState = () => {
+      if (!staticState) {return;}
+
+      /*---------------------------------------初始化cloneTable-------------------------------------------*/
+      const { plc } = staticState;
+      /*点击的标题plc的level一定是顶层的level*/
+      let minLevel = plc.level;
+
+      /*找到这个plc的所有子plc*/
+      const allPlc = !plc.group ? [plc] : (() => {
+        const list: tPlcType[] = [plc];
+        iteratePlcList({
+          plcList: plc.children,
+          onPlc: (i) => {
+            list.push(i);
+            return IteratePlcHandleType.nothing;
+          },
+          onGroup: (i) => {
+            list.push(i);
+            return IteratePlcHandleType.nothing;
+          },
+        });
+        return list;
+      })();
+      /*通过plcKey映射到plc*/
+      const plcKey2plc = allPlc.reduce((prev, item) => {
+        prev[item.plcKey] = item;
+        return prev;
+      }, {} as Record<string, tPlcType | undefined>);
+
+      /*找到多级标题中，每一层需要保留的列的index*/
+      const headLevel2indexList = (() => {
+        const map = {} as Record<number, number[]>;
+        const headPlcListArray = getHeadPlcListArray();
+        allPlc.forEach(plc => {
+          const index = headPlcListArray[plc.level].findIndex(i => i.plcKey === plc.plcKey);
+          if (!map[plc.level]) {
+            map[plc.level] = [];
+          }
+          map[plc.level].push(index);
+          if (plc.level <= minLevel) {minLevel = plc.level;}
+        });
+        return map;
+      })();
+
+      /*找到body的列中，需要保留的列的index*/
+      const bodyIndexList = (() => {
+        let indexList = [] as number[];
+        getBodyPlcListArray().forEach((plc, index) => {if (allPlc.findIndex(i => i.plcKey === plc.plcKey) > -1) {indexList.push(index);}});
+        return indexList;
+      })();
+
+      /*当前thead中所有的tr，因为可能存在#text节点，这里提前查出来*/
+      const headTableTrList = Array.from(refs.virtual!.refs.head!.querySelectorAll('thead tr')) as HTMLTableRowElement[];
+      /*点击的td元素*/
+      let cell: HTMLTableCellElement | null = null;
+
+      /*最终克隆的table*/
+      const cloneTable = customDeepClone(refs.el!, (sourceEl) => {
+        if (sourceEl.tagName === 'TR') {
+          /*克隆tr，仅保留需要的td*/
+
+          const cloneTr = sourceEl.cloneNode(false) as HTMLTableRowElement;
+          const tdList = (Array.from(sourceEl.childNodes) as HTMLTableRowElement[]).filter(i => i.tagName === 'TD');
+          if (sourceEl.parentElement!.tagName === 'THEAD') {
+            const level = headTableTrList.indexOf(sourceEl as any);
+            if (!!headLevel2indexList[level]) {
+              tdList.forEach((td, index) => {
+                if (headLevel2indexList[level].indexOf(index) > -1) {
+                  cloneTr.appendChild(td.cloneNode(true));
+                  if (level === minLevel) {
+                    cell = td as any;
+                  }
+                }
+              });
+            }
+            return cloneTr;
+          } else {
+            bodyIndexList.forEach(index => {
+              cloneTr.appendChild(tdList[index].cloneNode(true));
+            });
+            return cloneTr;
+          }
+        } else if (sourceEl.tagName === 'COLGROUP') {
+          /*克隆colgorup，仅保留需要的col*/
+
+          const cloneColGroup = sourceEl.cloneNode(false) as HTMLDivElement;
+          bodyIndexList.forEach(index => {
+            cloneColGroup.appendChild(sourceEl.childNodes[index].cloneNode(true));
+          });
+          return cloneColGroup;
+        }
+        return undefined;
+      });
+
+      const cellRect = cell!.getBoundingClientRect();
+      const tableRect = refs.el!.getBoundingClientRect();
+
+      /*固定宽度*/
+      refs.el!.parentElement!.appendChild(cloneTable);
+      draggierEffects.push(() => refs.el!.parentElement!.removeChild(cloneTable));
+
+      cloneTable.style.width = cellRect.width + 'px';
+      addClass(cloneTable, 'shadow-draggier-table');
+      const outerPopperListEl = cloneTable.querySelector(`.${getComponentCls('outer-popper-list')}`);
+      if (!!outerPopperListEl) {outerPopperListEl.parentElement!.removeChild(outerPopperListEl);}
+      cloneTable.querySelector('.scroll-wrapper')!.scrollTop = refs.el!.querySelector('.scroll-wrapper')!.scrollTop;
+
+      cloneTable.style.top = tableRect.top + 'px';
+      cloneTable.style.left = cellRect.left + 'px';
+      cloneTable.style.opacity = '0.75';
+
+      staticState.data = {
+        cloneTable: cloneTable as any,
+        table: refs.el! as any,
+        left: cellRect.left,
+        move: {
+          x: staticState.start.x,
+          y: staticState.start.y,
+        },
+      };
+
+      /*隐藏原始的单元格*/
+      draggierEffects.push(
+        hooks.onCellStyle.use(({ plc, styles }) => {
+          if (!!plcKey2plc[plc.plcKey]) {
+            styles.opacity = '0';
+          }
+        })
+      );
+
+      /*---------------------------------------禁用页面选择-------------------------------------------*/
+      /*禁用选中页面文本*/
+      disabledUserSelect();
+      draggierEffects.push(() => {enableUserSelect();});
+
+      /*---------------------------------------初始化indicator-------------------------------------------*/
+
+      indicatorHandler.start(staticState.start.x, plc);
+
+      /*---------------------------------------自动滚动-------------------------------------------*/
+      /*自动滚动*/
+      if (refs.virtual?.refs.scroll?.refs.wrapper) {
+        const { scrollWidth, offsetWidth } = refs.virtual.refs.scroll.refs.wrapper;
+        if (scrollWidth > offsetWidth) {
+          autoScroll.showHover();
+          draggierEffects.push(() => {autoScroll.hideHover();});
+        }
+      }
+
+    };
+
+    const start = (e: iMouseEvent, plc: tPlcType) => {
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      staticState = {
+        plc,
+        start: {
+          x: clientX,
+          y: clientY,
+        },
+        data: null
+      };
+      draggierEffects.push(() => {staticState = null;});
+    };
+
+    const update = (e?: MouseEvent) => {
+      if (!staticState) {return;}
+
+      const { clientX, clientY } = !e ? { clientX: 0, clientY: 0 } : ClientZoom.getClientPosition(e);
+
+      let isDragging = !!staticState.data;
+
+      if (!isDragging) {
+        /*拖拽超过一定距离的时候才开始拖拽，避免与点击事件冲突*/
+        if (!!e && Math.abs(clientX - staticState.start.x) > 5) {
+          isDragging = true;
+          initDraggierState();
+        }
+      }
+
+      if (!isDragging || !staticState.data) {
+        /*还没哟开始拖拽，不往下走了*/
+        return;
+      }
+
+      if (!!e) {
+        staticState.data.move = { x: clientX, y: clientY };
+      }
+      const { data: { cloneTable, move, table, left }, start } = staticState;
+      cloneTable.style.top = table.getBoundingClientRect().top + 'px';
+      cloneTable.style.left = (left + (move.x - start.x)) + 'px';
+
+      indicatorHandler.update(e);
+    };
+
+    const isDragging = () => !!staticState;
+
+    return { start, update, isDragging };
+  })();
+
+  /*指示器*/
+  const indicatorHandler = (() => {
+    /*指示器大小*/
+    const indicatorSize = 1;
+
+    /*工具函数*/
+    const utils = {
+      /**
+       * 获取拖拽的数据
+       * @author  韦胜健
+       * @date    2022.11.28 21:11
+       */
+      getDragData: (left: number): { index: number, dragData: iIndicatorDragData, hover: typeof eIndicatorHoverPart.TYPE } | null => {
+        for (let i = 0; i < staticState!.dragData!.length; i++) {
+          const dd = staticState!.dragData![i];
+          if (left >= dd.left && left <= dd.left + (dd.width || Infinity)) {
+            return {
+              index: i,
+              dragData: dd,
+              hover: left - dd.left > dd.width / 2 ? eIndicatorHoverPart.right : eIndicatorHoverPart.left
+            };
+          }
+        }
+        // throw new Error(`Can not get dragData by left:${left}`);
+        return null;
+      },
+      /**
+       * 刷新indicator定位
+       * @author  韦胜健
+       * @date    2022.11.28 21:18
+       */
+      refresh() {
+        if (!staticState) {return;}
+
+        const left = (() => {
+          /*检查是否落入左固定列区域*/
+          const fixedLeftList = staticState.broList.filter(i => i.props.fixed === 'left');
+          if (fixedLeftList.length > 0) {
+            let fixedLeftWidth = fixedLeftList.reduce((prev, item) => prev + item.getWidth(), 0);
+            const moveOffsetX = staticState.moveClientX - staticState.scrollRect.left;
+            if (moveOffsetX <= fixedLeftWidth) {
+              /*调整为移动到左固定列中*/
+              return moveOffsetX;
+            }
+          }
+          /*检查是否落入右固定列区域*/
+          const fixedRightList = staticState.broList.filter(i => i.props.fixed == 'right');
+          if (fixedRightList.length > 0) {
+            let fixedRightWidth = fixedRightList.reduce((prev, item) => prev + item.getWidth(), 0);
+            const moveOffsetX = staticState.moveClientX - staticState.scrollRect.left;
+            if (moveOffsetX > staticState.scrollRect.width - fixedRightWidth) {
+              /*调整为移动到右固定列中*/
+              return refs.virtual!.refs.scroll!.refs.wrapper!.scrollWidth - (staticState.scrollRect.width - moveOffsetX);
+            }
+          }
+
+          /*无调整，按照移动的位置决定移动到哪里*/
+          return (staticState.moveClientX - staticState.scrollRect.left) + (staticState.moveScrollLeft);
+        })();
+
+        const refreshData = utils.getDragData(left);
+        if (!refreshData) {return;}
+
+        staticState.refreshData = refreshData;
+        const { dragData, hover } = staticState.refreshData;
+
+        let indicatorLeft = (hover === eIndicatorHoverPart.left ? dragData.left : dragData.left + dragData.width - indicatorSize) + staticState.scrollRect.left - staticState.moveScrollLeft;
+
+        if (dragData.plc.props.fixed === 'left') {
+          /*如果是左固定列，调整指示器的位置*/
+          indicatorLeft += staticState.moveScrollLeft;
+        } else if (dragData.plc.props.fixed === 'right') {
+          /*如果是右固定列，调整指示器的位置*/
+          const { scrollWidth, offsetWidth, scrollLeft } = refs.virtual!.refs.scroll!.refs.wrapper!;
+          indicatorLeft += scrollLeft - ((scrollWidth - offsetWidth)) - 17;
+        }
+
+        /*指示器不能越过host容器*/
+        indicatorLeft = Math.min(Math.max(staticState.scrollRect.left, indicatorLeft), staticState.scrollRect.left + staticState.scrollRect.width - indicatorSize);
+
+        Object.assign(staticState.indicator!.style, { left: `${indicatorLeft}px`, } as StyleProperties);
+        staticState.indicator!.setAttribute('droppable', dragData.droppable ? 'true' : 'false');
+      },
+    };
+
+    /*拖拽状态*/
+    let staticState = null as null | {
+      /*拖拽开始时的鼠标x轴坐标*/
+      startClientX: number,
+      /*拖拽时的鼠标x轴坐标*/
+      moveClientX: number,
+
+      /*拖拽开始时指示器left定位*/
+      startScrollLeft: number,
+      /*拖拽移动时指示器left定位*/
+      moveScrollLeft: number,
+
+      /*滚动的父节点*/
+      scrollParent: HTMLElement,
+      /*滚动容器位置信息*/
+      scrollRect: iElementRect,
+      /*拖拽的指示器节点*/
+      indicator: HTMLElement,
+      /*拖拽的数据*/
+      dragData: iIndicatorDragData[],
+      /*拖拽时的兄弟列信息*/
+      broList: tPlcType[],
+      /*用来刷新的数据*/
+      refreshData: null | {
+        /*拖拽放置的目标位置索引*/
+        index: number,
+        /*拖拽的数据*/
+        dragData: iIndicatorDragData,
+        /*放置的时候处于放置节点的那部分区域*/
+        hover: typeof eIndicatorHoverPart.TYPE,
+      }
+    };
+
+    const start = (startX: number, plc: tPlcType) => {
+      const { broList, broData } = getDragData(getPlcListArray(), plc);
+      const tableRect = refs.el!.getBoundingClientRect();
+
+      /*添加指示器*/
+      const indicator = document.createElement('div');
+      addClass(indicator, 'plt-col-draggier-indicator');
+      Object.assign(indicator.style, {
+        top: `${tableRect.top}px`,
+        left: `${0}px`,
+        height: `${tableRect.height}px`,
+        width: `${indicatorSize}px`,
+        position: 'fixed',
+        zIndex: `${nextIndex() + 100}`,  // 加100是为了不被 autoScroller 遮住；
+        pointerEvents: 'none',           // indicator只是一个指示的作用，这里设置none为了不挡住autoScroller的鼠标事件
+      } as StyleProperties);
+      refs.el!.appendChild(indicator);
+      draggierEffects.push(() => {refs.el!.removeChild(indicator);});
+
+      /*应用拖拽的位置*/
+      draggierEffects.push(() => {
+        if (!staticState?.refreshData) {return;}
+        const { dragData, hover } = staticState.refreshData;
+        if (!dragData.droppable) {return;}
+
+        const startPlc = plc;
+        const endPlc = dragData.plc;
+        const broList = staticState.broList!;
+
+        const startIndex = broList.indexOf(startPlc);
+        let endIndex = broList.indexOf(endPlc);
+        if (startIndex === endIndex) {return;}
+
+        if (startPlc.props.fixed != endPlc.props.fixed) {
+          startPlc.setPropsState({ fixed: endPlc.props.fixed });
+        } else {
+          if (startPlc.props.fixed === 'center') {
+            if (staticState.moveClientX < staticState.scrollRect.left) {
+              startPlc.setPropsState({ fixed: TablePlcFixedType.left });
+            } else if (staticState.moveClientX > staticState.scrollRect.left + staticState.scrollRect.width) {
+              startPlc.setPropsState({ fixed: TablePlcFixedType.right });
+            }
+          }
+        }
+
+        broList.splice(startIndex, 1);
+        endIndex = broList.indexOf(endPlc);
+        endIndex = hover === eIndicatorHoverPart.right ? endIndex + 1 : endIndex;
+        broList.splice(endIndex, 0, startPlc);
+
+        broList.forEach((plc, index) => plc.setPropsState({ order: index }));
+        onChange(broList);
+      });
+
+      /*监听父节点滚动动作*/
+      const scrollParent = refs.virtual!.refs.scroll!.refs.wrapper!;
+      const onScroll = () => shadowTableHandler.update();
+      scrollParent.addEventListener('mousemove', shadowTableHandler.update);
+      scrollParent.addEventListener('scroll', onScroll);
+      draggierEffects.push(() => {
+        scrollParent.removeEventListener('mousemove', shadowTableHandler.update);
+        scrollParent.removeEventListener('scroll', onScroll);
+      });
+
+      /*拖拽状态*/
+      staticState = {
+        dragData: broData,
+        broList: broList,
+        startClientX: startX,
+        moveClientX: startX,
+        scrollParent,
+        scrollRect: scrollParent.parentElement!.getBoundingClientRect(),
+        startScrollLeft: scrollParent.scrollLeft,
+        moveScrollLeft: scrollParent.scrollLeft,
+        indicator,
+        refreshData: null,
+      };
+      /*最后才能销毁拖拽状态*/
+      draggierEffects.push(() => {staticState = null;});
+
+      /*刷新定位*/
+      utils.refresh();
+    };
+    const update = (e?: MouseEvent) => {
+      if (!!e) {
+        const { clientX } = ClientZoom.getClientPosition(e);
+        staticState!.moveClientX = clientX;
+      } else {
+        staticState!.moveScrollLeft = staticState!.scrollParent!.scrollLeft;
+      }
+      utils.refresh();
+    };
+
+    return { start, update, get staticState() {return staticState;} };
+  })();
+
+  const handler = {
+    onMousedown: (e: iMouseEvent, plc: tPlcType) => {
+      if (e.button === 2) {return;}
+      shadowTableHandler.start(e, plc);
+
+      document.addEventListener('mousemove', shadowTableHandler.update);
+      document.addEventListener('mouseup', draggierEffects.clear);
+      draggierEffects.push(() => {
+        document.removeEventListener('mousemove', shadowTableHandler.update);
+        document.removeEventListener('mouseup', draggierEffects.clear);
+      });
+    },
+  };
+
+  const isDragging = shadowTableHandler.isDragging;
+
+  return { handler, isDragging };
+}
+
+
+interface iIndicatorDragData {
+  left: number;
+  width: number;
+  plc: tPlcType;
+  droppable: boolean;
+}
+
+const eIndicatorHoverPart = createEnum(['left', 'right'] as const);
+
+
+/**
+ * 递归遍历plc数组数据
+ * @author  韦胜健
+ * @date    2020/9/6 11:24
+ */
+function iteratePlc(plcList: tPlcType[], handler: (plc: tPlcType) => 'stop' | void): void {
+
+  for (let i = 0; i < plcList.length; i++) {
+    const item = plcList[i];
+    const flag = handler(item);
+    if (flag === 'stop') {
+      return;
+    } else {
+      if (item.group) {
+        iteratePlc(item.children, handler);
+      }
+    }
+  }
+
+}
+
+/**
+ * 或者plc对象的兄弟节点
+ * @author  韦胜健
+ * @date    2020/9/6 11:24
+ */
+function getBroPlcList(plcList: tPlcType[], plc: tPlcType): tPlcType[] {
+
+  let broPlcList: tPlcType[] = [];
+
+  if (plcList.indexOf(plc) > -1) {
+    broPlcList = plcList;
+  } else {
+    iteratePlc(plcList, itarPlc => {
+      if (itarPlc.group) {
+        if (itarPlc.children.indexOf(plc) > -1) {
+          broPlcList = itarPlc.children;
+          return 'stop';
+        }
+      }
+    });
+  }
+
+  if (broPlcList.length === 0) {
+    /*内部错误，找不到兄弟节点*/
+    throw new Error('Internal error! sibling node not found.');
+  }
+
+  return broPlcList;
+}
+
+/**
+ * 获取plc的宽度
+ * @author  韦胜健
+ * @date    2020/9/6 12:09
+ */
+function getPlcWidth(plc: tPlcType) {
+  if (!plc.group) {
+    return Number(plc.props.width);
+  } else {
+    return plc.children.reduce((ret: number, item: tPlcType) => {
+      ret += getPlcWidth(item);
+      return ret;
+    }, 0);
+  }
+}
+
+/**
+ * 获取plcList中最底层的plc
+ * @author  韦胜健
+ * @date    2020/9/6 20:27
+ */
+function getLowestPlcList(plcList: tPlcType[]): tPlc[] {
+
+  return plcList.reduce((ret: tPlc[], plc: tPlcType) => {
+    if (plc.group) {
+      ret.push(...getLowestPlcList(plc.children));
+    } else {
+      ret.push(plc);
+    }
+    return ret;
+  }, [] as tPlc[]);
+
+}
+
+/**
+ * 获取拖拽所需要的数据
+ * @author  韦胜健
+ * @date    2020/9/6 20:41
+ */
+function getDragData(plcList: tPlcType[], plc: tPlcType): {
+  broData: iIndicatorDragData[],
+  broList: tPlcType[]
+} {
+
+  const broList = getBroPlcList(plcList, plc);
+
+  const broLowestList = getLowestPlcList(broList);
+  const allLowestList = getLowestPlcList(plcList) as tPlcType[];
+
+  allLowestList.splice(allLowestList.indexOf(broLowestList[0]), broLowestList.length, ...broList);
+
+  const broData: iIndicatorDragData[] = [];
+  let left = 0;
+
+  allLowestList.forEach(plc => {
+    const item = {
+      left,
+      width: getPlcWidth(plc),
+      plc,
+      droppable: broList.indexOf(plc) > -1
+    };
+    left += item.width;
+    broData.push(item);
+  });
+
+  return {
+    broList,
+    broData,
+  };
+
+}