plain-design 1.0.0-beta.3 → 1.0.0-beta.5

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

@@ -1,262 +1,267 @@
-import {getComponentCls, iMouseEvent, reactive} from "plain-design-composition";
-import {useAutoScroll} from "../../../Scroll/useAutoScroll";
-import {createEffects} from "plain-utils/utils/createEffects";
-import VirtualTable from "../../../VirtualTable";
-import {iTableHooks} from "../utils/createTableHooks";
-import {iTableNode} from "../utils/table.utils";
-import {findParentElement} from "../../../../utils/findParentElement";
-import {hasClass} from "plain-utils/dom/hasClass";
-import {addClass} from "plain-utils/dom/addClass";
-import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
-import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
-
-export function useTableDraggierRow(
-  {
-    refs,
-    hooks,
-    bodyNodes,
-    numberState,
-    model,
-  }: {
-    refs: {
-      el: HTMLDivElement | null | undefined,
-      virtual: typeof VirtualTable.use.class | null | undefined
-    },
-    hooks: iTableHooks,
-    bodyNodes: { value: iTableNode[] },
-    numberState: { bodyRowHeight: number }
-    model: { value: any[] | null | undefined }
-  }
-) {
-  /*自动滚动*/
-  const autoScroll = useAutoScroll({ getScroll: () => refs.virtual?.refs.scroll, vertical: true, });
-
-  /*拖拽结束之后要清除的副作用*/
-  const { effects: draggierEffects } = createEffects();
-
-  /*移动平移节点*/
-  const move = (() => {
-    const state = reactive({ index: 0 });
-    let staticState = null as null | {
-      /*表头el对象*/
-      headTableEl: HTMLElement | null,
-      /*scroll的host节点*/
-      bodyHostEl: HTMLElement,
-      /*拖拽开始时行的索引*/
-      startIndex: number,
-    };
-    const start = (startNode: iTableNode) => {
-      state.index = startNode.state.index;
-      staticState = {
-        headTableEl: refs.el!.querySelector('.virtual-table-head-table'),
-        bodyHostEl: refs.virtual!.refs.scroll!.refs.host!,
-        startIndex: startNode.state.index,
-      };
-      /*令拖拽的行透明*/
-      draggierEffects.push(hooks.onRowClass.use(({ classList, node }) => {staticState?.startIndex === node.state.index && classList.push('plt-row-dragging');}));
-      /*令拖拽之间的行平移*/
-      draggierEffects.push(hooks.onRowClass.use(({ classList, node: { isSummary, state: { index: rowIndex } } }) => {
-        if (isSummary || !move.staticState) {return;}
-        classList.push('plt-row-dragging-moving');
-        if (move.state.index >= rowIndex && rowIndex > move.staticState.startIndex) {
-          classList.push('plt-row-dragging-moving-up');
-        } else if (move.state.index <= rowIndex && rowIndex < move.staticState.startIndex) {
-          classList.push('plt-row-dragging-moving-down');
-        }
-      }));
-      draggierEffects.push(() => {
-        /*移动节点*/
-        const moveIndex = move.state.index;
-        const startIndex = move.staticState!.startIndex;
-        if (moveIndex !== startIndex) {
-          const value = [...model.value || []];
-          if (moveIndex > startIndex) {
-            value.splice(moveIndex + 1, 0, value[startIndex]);
-            value.splice(startIndex, 1);
-          } else {
-            value.splice(moveIndex, 0, value[startIndex]);
-            value.splice(startIndex + 1, 1);
-          }
-          model.value = value;
-        }
-      });
-      /*清理状态*/
-      draggierEffects.push(() => staticState = null);
-    };
-    let prevClientY = 0;
-    const update = (e?: MouseEvent) => {
-      const moveIndex = (() => {
-        const hostRect = staticState!.bodyHostEl.getBoundingClientRect();
-        let index = Math.floor((((e?.clientY || prevClientY) - hostRect.top + refs.virtual!.refs.scroll!.freezeState.wrapperScrollTop - (staticState!.headTableEl?.clientHeight || 0)) / numberState.bodyRowHeight));
-        if (index < 0) {index = 0;}
-        if (index > bodyNodes.value.length - 1) {
-          index = bodyNodes.value.length - 1;
-        }
-        return index;
-      })();
-      if (moveIndex !== move.state.index) {move.state.index = moveIndex;}
-      if (!!e) {prevClientY = e.clientY;}
-    };
-    return { state, update, start, get staticState() {return staticState;} };
-  })();
-
-  /*克隆拖拽的节点*/
-  const cloneRow = (() => {
-    let staticState = null as null | {
-      /*拖拽开始时鼠标y轴位置*/
-      startY: number;
-      /*拖拽开始时行的top值*/
-      startTop: number,
-      /*tr对象*/
-      rowEl: HTMLTableRowElement,
-      /*table node*/
-      node: iTableNode,
-
-      data: null | {
-        /*scroll wrapper节点*/
-        cloneRowEl: HTMLElement,
-        /*合计行表格*/
-        summaryTable: HTMLElement | null,
-      }
-    };
-
-    const initDraggierState = () => {
-      if (!staticState) {return;}
-
-      /*---------------------------------------初始化cloneRow-------------------------------------------*/
-
-      /*原始信息*/
-      const rowEl = staticState.rowEl;
-      const rowRect = rowEl.getBoundingClientRect();
-      const sourceBodyTableEl = findParentElement(rowEl, el => hasClass(el, 'virtual-table-body-table'))!;
-      const tableRect = refs.el!.getBoundingClientRect();
-
-      /*拖拽的模拟节点*/
-      const cloneRowEl = document.createElement('div');
-      cloneRowEl.style.width = `${refs.el!.offsetWidth}px`;
-      cloneRowEl.style.overflow = 'hidden';
-      cloneRowEl.style.position = 'fixed';
-      cloneRowEl.style.top = `${rowRect.top}px`;
-      cloneRowEl.style.left = `${tableRect.left}px`;
-      cloneRowEl.style.boxShadow = `0 0px 5px var(--${getComponentCls('gray-3')})`;
-      cloneRowEl.style.backgroundColor = `var(--${getComponentCls('background-color')})`;
-      cloneRowEl.style.pointerEvents = `none`;
-      cloneRowEl.style.zIndex = `10`;
-      cloneRowEl.style.height = `initial`;
-      addClass(cloneRowEl, `${getComponentCls('scroll-table')} ${getComponentCls('virtual-table')}`);
-      const bodyTableEl = document.createElement('table');
-      sourceBodyTableEl.getAttributeNames().forEach(attrName => {bodyTableEl.setAttribute(attrName, sourceBodyTableEl.getAttribute(attrName)!);});
-      bodyTableEl.appendChild(sourceBodyTableEl.querySelector('colgroup')!.cloneNode(true));
-      const tbodyEl = document.createElement('tbody');
-      tbodyEl.appendChild(rowEl.cloneNode(true));
-      bodyTableEl.appendChild(tbodyEl);
-      cloneRowEl.appendChild(bodyTableEl);
-      refs.el!.appendChild(cloneRowEl);
-      cloneRowEl.scrollLeft = refs.virtual!.refs.scroll!.refs.wrapper!.scrollLeft;
-      draggierEffects.push(() => {refs.el!.removeChild(cloneRowEl);});
-
-      staticState.data = {
-        cloneRowEl,
-        summaryTable: refs.el!.querySelector('.virtual-table-summary-table'),
-      };
-
-      /*---------------------------------------禁用页面选择-------------------------------------------*/
-      /*禁用选中页面文本*/
-      disabledUserSelect();
-      draggierEffects.push(() => {enableUserSelect();});
-
-      /*---------------------------------------初始化move-------------------------------------------*/
-
-      /*开始move*/
-      move.start(staticState.node);
-
-      /*---------------------------------------初始化scroll，父节点滚动的时候也刷新拖拽信息-------------------------------------------*/
-      /*监听容器滚动事件*/
-      const onScroll = () => cloneRow.update();
-      refs.virtual!.refs.scroll!.on.onScroll(onScroll);
-      draggierEffects.push(() => {refs.virtual!.refs.scroll!.off.onScroll(onScroll);});
-
-      /*---------------------------------------初始化auto scroll-------------------------------------------*/
-      /*自动滚动*/
-      if (refs.virtual?.refs.scroll?.refs.wrapper) {
-        const { scrollHeight, offsetHeight } = refs.virtual.refs.scroll.refs.wrapper;
-        if (scrollHeight > offsetHeight) {
-          autoScroll.showHover();
-          draggierEffects.push(() => {autoScroll.hideHover();});
-        }
-      }
-    };
-
-    const start = (e: iMouseEvent, node: iTableNode) => {
-      const rowEl = (Array.from(refs.el!.querySelectorAll(`.plt-row`)) as HTMLTableRowElement[]).find(i => i.dataset.vid == node.state.index.toString())!;
-      const rowRect = rowEl.getBoundingClientRect();
-      staticState = { startY: e.clientY, startTop: rowRect.top, node, rowEl, data: null, };
-      /*清理状态*/
-      draggierEffects.push(() => {staticState = null;});
-    };
-
-    let prevClientY = 0;
-    const update = (e?: MouseEvent) => {
-      if (!staticState) {return;}
-
-      let isDragging = !!staticState.data;
-
-      if (!isDragging) {
-        /*拖拽超过一定距离的时候才开始拖拽，避免与点击事件冲突*/
-        if (!!e && Math.abs(e.clientY - staticState.startY) > 5) {
-          isDragging = true;
-          initDraggierState();
-        }
-      }
-
-      if (!isDragging) {
-        /*还没哟开始拖拽，不往下走了*/
-        return;
-      }
-
-      const durY = (e?.clientY || prevClientY) - staticState.startY;
-      let top = staticState.startTop + durY;
-      const minTop = move.staticState!.bodyHostEl.getBoundingClientRect().top + (move.staticState!.headTableEl?.clientHeight || 0);
-      if (top < minTop) {
-        top = minTop;
-      } else {
-        const hostRect = move.staticState!.bodyHostEl.getBoundingClientRect();
-        const maxTop = hostRect.top + hostRect.height - numberState.bodyRowHeight - (staticState.data!.summaryTable?.clientHeight || 0);
-        if (top > maxTop) {
-          top = maxTop;
-        }
-      }
-
-      staticState.data!.cloneRowEl.style.top = `${top}px`;
-      if (!!e) {
-        prevClientY = e.clientY;
-      }
-
-      /*更细move index信息*/
-      move.update(e);
-    };
-
-    /*判断当前是否正在拖拽*/
-    const isDragging = () => !!staticState;
-
-    return { start, update, isDragging };
-  })();
-
-  const handler = {
-    onMousedown: (e: iMouseEvent, node: iTableNode) => {
-      if (e.button === 2) {return;}
-      /*复制用来拖拽的行节点*/
-      cloneRow.start(e, node);
-
-      /*移动以及放置动作*/
-      document.documentElement.addEventListener('mouseup', draggierEffects.clear);
-      document.documentElement.addEventListener('mousemove', cloneRow.update);
-      draggierEffects.push(() => {
-        document.documentElement.removeEventListener('mouseup', draggierEffects.clear);
-        document.documentElement.removeEventListener('mousemove', cloneRow.update);
-      });
-    },
-  };
-
-  return { handler, isDragging: cloneRow.isDragging };
-}
+import {getComponentCls, iMouseEvent, reactive} from "plain-design-composition";
+import {useAutoScroll} from "../../../Scroll/useAutoScroll";
+import {createEffects} from "plain-utils/utils/createEffects";
+import VirtualTable from "../../../VirtualTable";
+import {iTableHooks} from "../utils/createTableHooks";
+import {iTableNode} from "../utils/table.utils";
+import {findParentElement} from "../../../../utils/findParentElement";
+import {hasClass} from "plain-utils/dom/hasClass";
+import {addClass} from "plain-utils/dom/addClass";
+import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
+import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import {ClientZoom} from "../../../ClientZoom";
+
+export function useTableDraggierRow(
+  {
+    refs,
+    hooks,
+    bodyNodes,
+    numberState,
+    model,
+  }: {
+    refs: {
+      el: HTMLDivElement | null | undefined,
+      virtual: typeof VirtualTable.use.class | null | undefined
+    },
+    hooks: iTableHooks,
+    bodyNodes: { value: iTableNode[] },
+    numberState: { bodyRowHeight: number }
+    model: { value: any[] | null | undefined }
+  }
+) {
+  /*自动滚动*/
+  const autoScroll = useAutoScroll({ getScroll: () => refs.virtual?.refs.scroll, vertical: true, });
+
+  /*拖拽结束之后要清除的副作用*/
+  const { effects: draggierEffects } = createEffects();
+
+  /*移动平移节点*/
+  const move = (() => {
+    const state = reactive({ index: 0 });
+    let staticState = null as null | {
+      /*表头el对象*/
+      headTableEl: HTMLElement | null,
+      /*scroll的host节点*/
+      bodyHostEl: HTMLElement,
+      /*拖拽开始时行的索引*/
+      startIndex: number,
+    };
+    const start = (startNode: iTableNode) => {
+      state.index = startNode.state.index;
+      staticState = {
+        headTableEl: refs.el!.querySelector('.virtual-table-head-table'),
+        bodyHostEl: refs.virtual!.refs.scroll!.refs.host!,
+        startIndex: startNode.state.index,
+      };
+      /*令拖拽的行透明*/
+      draggierEffects.push(hooks.onRowClass.use(({ classList, node }) => {staticState?.startIndex === node.state.index && classList.push('plt-row-dragging');}));
+      /*令拖拽之间的行平移*/
+      draggierEffects.push(hooks.onRowClass.use(({ classList, node: { isSummary, state: { index: rowIndex } } }) => {
+        if (isSummary || !move.staticState) {return;}
+        classList.push('plt-row-dragging-moving');
+        if (move.state.index >= rowIndex && rowIndex > move.staticState.startIndex) {
+          classList.push('plt-row-dragging-moving-up');
+        } else if (move.state.index <= rowIndex && rowIndex < move.staticState.startIndex) {
+          classList.push('plt-row-dragging-moving-down');
+        }
+      }));
+      draggierEffects.push(() => {
+        /*移动节点*/
+        const moveIndex = move.state.index;
+        const startIndex = move.staticState!.startIndex;
+        if (moveIndex !== startIndex) {
+          const value = [...model.value || []];
+          if (moveIndex > startIndex) {
+            value.splice(moveIndex + 1, 0, value[startIndex]);
+            value.splice(startIndex, 1);
+          } else {
+            value.splice(moveIndex, 0, value[startIndex]);
+            value.splice(startIndex + 1, 1);
+          }
+          model.value = value;
+        }
+      });
+      /*清理状态*/
+      draggierEffects.push(() => staticState = null);
+    };
+    let prevClientY = 0;
+    const update = (e?: MouseEvent) => {
+      const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
+      const moveIndex = (() => {
+        const hostRect = staticState!.bodyHostEl.getBoundingClientRect();
+        let index = Math.floor(((clientY - hostRect.top + refs.virtual!.refs.scroll!.freezeState.wrapperScrollTop - (staticState!.headTableEl?.clientHeight || 0)) / numberState.bodyRowHeight));
+        if (index < 0) {index = 0;}
+        if (index > bodyNodes.value.length - 1) {
+          index = bodyNodes.value.length - 1;
+        }
+        return index;
+      })();
+      if (moveIndex !== move.state.index) {move.state.index = moveIndex;}
+      if (!!e) {prevClientY = clientY;}
+    };
+    return { state, update, start, get staticState() {return staticState;} };
+  })();
+
+  /*克隆拖拽的节点*/
+  const cloneRow = (() => {
+    let staticState = null as null | {
+      /*拖拽开始时鼠标y轴位置*/
+      startY: number;
+      /*拖拽开始时行的top值*/
+      startTop: number,
+      /*tr对象*/
+      rowEl: HTMLTableRowElement,
+      /*table node*/
+      node: iTableNode,
+
+      data: null | {
+        /*scroll wrapper节点*/
+        cloneRowEl: HTMLElement,
+        /*合计行表格*/
+        summaryTable: HTMLElement | null,
+      }
+    };
+
+    const initDraggierState = () => {
+      if (!staticState) {return;}
+
+      /*---------------------------------------初始化cloneRow-------------------------------------------*/
+
+      /*原始信息*/
+      const rowEl = staticState.rowEl;
+      const rowRect = rowEl.getBoundingClientRect();
+      const sourceBodyTableEl = findParentElement(rowEl, el => hasClass(el, 'virtual-table-body-table'))!;
+      const tableRect = refs.el!.getBoundingClientRect();
+
+      /*拖拽的模拟节点*/
+      const cloneRowEl = document.createElement('div');
+      cloneRowEl.style.width = `${refs.el!.offsetWidth}px`;
+      cloneRowEl.style.overflow = 'hidden';
+      cloneRowEl.style.position = 'fixed';
+      cloneRowEl.style.top = `${rowRect.top}px`;
+      cloneRowEl.style.left = `${tableRect.left}px`;
+      cloneRowEl.style.boxShadow = `0 0px 5px var(--${getComponentCls('gray-3')})`;
+      cloneRowEl.style.backgroundColor = `var(--${getComponentCls('background-color')})`;
+      cloneRowEl.style.pointerEvents = `none`;
+      cloneRowEl.style.zIndex = `10`;
+      cloneRowEl.style.height = `initial`;
+      addClass(cloneRowEl, `${getComponentCls('scroll-table')} ${getComponentCls('virtual-table')}`);
+      const bodyTableEl = document.createElement('table');
+      sourceBodyTableEl.getAttributeNames().forEach(attrName => {bodyTableEl.setAttribute(attrName, sourceBodyTableEl.getAttribute(attrName)!);});
+      bodyTableEl.appendChild(sourceBodyTableEl.querySelector('colgroup')!.cloneNode(true));
+      const tbodyEl = document.createElement('tbody');
+      tbodyEl.appendChild(rowEl.cloneNode(true));
+      bodyTableEl.appendChild(tbodyEl);
+      cloneRowEl.appendChild(bodyTableEl);
+      refs.el!.appendChild(cloneRowEl);
+      cloneRowEl.scrollLeft = refs.virtual!.refs.scroll!.refs.wrapper!.scrollLeft;
+      draggierEffects.push(() => {refs.el!.removeChild(cloneRowEl);});
+
+      staticState.data = {
+        cloneRowEl,
+        summaryTable: refs.el!.querySelector('.virtual-table-summary-table'),
+      };
+
+      /*---------------------------------------禁用页面选择-------------------------------------------*/
+      /*禁用选中页面文本*/
+      disabledUserSelect();
+      draggierEffects.push(() => {enableUserSelect();});
+
+      /*---------------------------------------初始化move-------------------------------------------*/
+
+      /*开始move*/
+      move.start(staticState.node);
+
+      /*---------------------------------------初始化scroll，父节点滚动的时候也刷新拖拽信息-------------------------------------------*/
+      /*监听容器滚动事件*/
+      const onScroll = () => cloneRow.update();
+      refs.virtual!.refs.scroll!.on.onScroll(onScroll);
+      draggierEffects.push(() => {refs.virtual!.refs.scroll!.off.onScroll(onScroll);});
+
+      /*---------------------------------------初始化auto scroll-------------------------------------------*/
+      /*自动滚动*/
+      if (refs.virtual?.refs.scroll?.refs.wrapper) {
+        const { scrollHeight, offsetHeight } = refs.virtual.refs.scroll.refs.wrapper;
+        if (scrollHeight > offsetHeight) {
+          autoScroll.showHover();
+          draggierEffects.push(() => {autoScroll.hideHover();});
+        }
+      }
+    };
+
+    const start = (e: iMouseEvent, node: iTableNode) => {
+      const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
+      const rowEl = (Array.from(refs.el!.querySelectorAll(`.plt-row`)) as HTMLTableRowElement[]).find(i => i.dataset.vid == node.state.index.toString())!;
+      const rowRect = rowEl.getBoundingClientRect();
+      staticState = { startY: clientY, startTop: rowRect.top, node, rowEl, data: null, };
+      /*清理状态*/
+      draggierEffects.push(() => {staticState = null;});
+    };
+
+    let prevClientY = 0;
+    const update = (e?: MouseEvent) => {
+      if (!staticState) {return;}
+
+      const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
+
+      let isDragging = !!staticState.data;
+
+      if (!isDragging) {
+        /*拖拽超过一定距离的时候才开始拖拽，避免与点击事件冲突*/
+        if (!!e && Math.abs(clientY - staticState.startY) > 5) {
+          isDragging = true;
+          initDraggierState();
+        }
+      }
+
+      if (!isDragging) {
+        /*还没哟开始拖拽，不往下走了*/
+        return;
+      }
+
+      const durY = clientY - staticState.startY;
+      let top = staticState.startTop + durY;
+      const minTop = move.staticState!.bodyHostEl.getBoundingClientRect().top + (move.staticState!.headTableEl?.clientHeight || 0);
+      if (top < minTop) {
+        top = minTop;
+      } else {
+        const hostRect = move.staticState!.bodyHostEl.getBoundingClientRect();
+        const maxTop = hostRect.top + hostRect.height - numberState.bodyRowHeight - (staticState.data!.summaryTable?.clientHeight || 0);
+        if (top > maxTop) {
+          top = maxTop;
+        }
+      }
+
+      staticState.data!.cloneRowEl.style.top = `${top}px`;
+      if (!!e) {
+        prevClientY = clientY;
+      }
+
+      /*更细move index信息*/
+      move.update(e);
+    };
+
+    /*判断当前是否正在拖拽*/
+    const isDragging = () => !!staticState;
+
+    return { start, update, isDragging };
+  })();
+
+  const handler = {
+    onMousedown: (e: iMouseEvent, node: iTableNode) => {
+      if (e.button === 2) {return;}
+      /*复制用来拖拽的行节点*/
+      cloneRow.start(e, node);
+
+      /*移动以及放置动作*/
+      document.documentElement.addEventListener('mouseup', draggierEffects.clear);
+      document.documentElement.addEventListener('mousemove', cloneRow.update);
+      draggierEffects.push(() => {
+        document.documentElement.removeEventListener('mouseup', draggierEffects.clear);
+        document.documentElement.removeEventListener('mousemove', cloneRow.update);
+      });
+    },
+  };
+
+  return { handler, isDragging: cloneRow.isDragging };
+}