plain-design 1.0.0-beta.9 → 1.0.0-beta.91

package/src/packages/components/createScrollDraggier/index.ts

@@ -0,0 +1,337 @@
+import {getComponentCls, iMouseEvent, iTouchEvent, reactive, StyleProperties} from "plain-design-composition";
+import {doNothing} from "plain-utils/utils/doNothing";
+import {findParentElement} from "plain-utils/dom/findParentElement";
+import {hasClass} from "plain-utils/dom/hasClass";
+import {getElementRect} from "../../utils/getElementRect";
+import {createWebDraggier} from "../../utils/createDraggier";
+import {delay} from "plain-utils/utils/delay";
+import {PlainScroll} from "../Scroll";
+import {createDefaultDraggierReactiveState, createDefaultDraggierStaticState, iVirtualDraggierHandler} from "../VirtualList/createVirtualDraggier";
+import {iVirtualNode} from "../VirtualList/useVirtualList";
+import {createAutoScrollManager} from "../createAutoScrollManager";
+
+/**
+ * 创建虚拟列表的拖拽移动节点管理对象
+ * @author  韦胜健
+ * @date    2024/5/29 14:55
+ */
+export function createScrollDraggier(
+  {
+    props,
+    getScroll,
+    dataModel,
+    getItemElements,
+    onDraggierStart,
+    onDraggierMove,
+    onDraggierEnd,
+    onDraggierTap,
+  }: {
+    props: { horizontal: boolean },
+    getScroll: () => PlainScroll | undefined,
+    dataModel: { value: any[] | undefined | null },
+    getItemElements: () => HTMLElement[],
+
+    onDraggierStart?: iVirtualDraggierHandler,
+    onDraggierMove?: iVirtualDraggierHandler,
+    onDraggierEnd?: iVirtualDraggierHandler,
+    onDraggierTap?: iVirtualDraggierHandler,
+  }
+) {
+
+  /*管理自动滚动*/
+  const autoScrollManager = createAutoScrollManager(getScroll);
+
+  /*静态变量*/
+  const dragStaticState = {
+    ...createDefaultDraggierStaticState(),
+    nodes: [] as iVirtualNode[],
+  };
+
+  /*响应式变量*/
+  const dragReactiveState = reactive(createDefaultDraggierReactiveState());
+
+  const start = (e: iMouseEvent | iTouchEvent, startIndex: number) => {
+
+    const itemElements = getItemElements();
+
+    dragStaticState.nodes = (() => {
+      let tempStart = 0;
+      return itemElements.map((item, index) => {
+        const start = tempStart;
+        const size = item[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
+        const end = start + size;
+        tempStart += size;
+        return {
+          id: String(index),
+          size,
+          start,
+          end,
+          index,
+          item: dataModel.value?.[index],
+        };
+      });
+    })();
+
+    /*重置静态变量*/
+    Object.assign(dragReactiveState, createDefaultDraggierReactiveState());
+    /*重置响应式变量*/
+    Object.assign(dragReactiveState, createDefaultDraggierStaticState());
+
+    /*初始化部分静态变量*/
+    dragStaticState.dragElement = itemElements[startIndex];
+    if (!dragStaticState.dragElement) {
+      throw new Error(`Can't find [data-vid] elements!`);
+    }
+
+    dragStaticState.hostElement = findParentElement(dragStaticState.dragElement, el => hasClass(el, getComponentCls('scroll')))!;
+    if (!dragStaticState.hostElement) {
+      throw new Error(`Can't find host elements`);
+    }
+    dragStaticState.strutElement = findParentElement(dragStaticState.dragElement, el => hasClass(el, 'scroll-content'))!;
+    if (!dragStaticState.strutElement) {
+      throw new Error(`Can't find strut elements`);
+    }
+
+    dragStaticState.initDragElementRect = getElementRect(dragStaticState.dragElement);
+    dragStaticState.dragIndex = startIndex;
+    if (dragStaticState.dragIndex == -1) {
+      throw new Error(`Can't find index of drag elements`);
+    }
+
+    draggier.start(e);
+  };
+
+  const update = () => {
+
+    const { strutElement } = dragStaticState;
+
+    const offsetStart = props.horizontal ?
+      draggier.staticState.moveX - getElementRect(strutElement!).left :
+      draggier.staticState.moveY - getElementRect(strutElement!).top;
+
+    const newPointIndex = dragStaticState.nodes.findIndex(node => node.start <= offsetStart && node.end > offsetStart);
+
+    /*值有效的时候才更新值，新值无效的话，就用老的值，因为如果超出边界的话就会得到无效的新值，此时用老值即可*/
+    if (newPointIndex != null && newPointIndex != -1) {
+      dragReactiveState.pointIndex = newPointIndex || 0;
+    }
+  };
+
+  const getItemStyles = (index: number) => {
+    const { dragIndex, initDragElementRect } = dragStaticState;
+    if (dragReactiveState.pointIndex == null || dragIndex == null) {
+      return;
+    }
+    const styles: StyleProperties = {};
+    styles.transition = 'transform ease 300ms';
+    if (dragReactiveState.pointIndex >= index && index > dragIndex) {
+      styles.transform = props.horizontal ?
+        `translateX(-${initDragElementRect?.width || 0}px)` :
+        `translateY(-${initDragElementRect?.height || 0}px)`;
+    } else if (dragReactiveState.pointIndex <= index && index < dragIndex) {
+      styles.transform = props.horizontal ?
+        `translateX(${initDragElementRect?.width || 0}px)` :
+        `translateY(${initDragElementRect?.height || 0}px)`;
+    } else {
+      styles.transform = props.horizontal ?
+        `translateX(0px)` :
+        `translateY(0px)`;
+    }
+    return styles;
+  };
+
+  const draggier = createWebDraggier({
+    horizontal: props.horizontal,
+    vertical: !props.horizontal,
+    onInit: () => {
+    },
+    onStart: (draggierData) => {
+
+      const { draggierEffects } = draggierData;
+
+      const { dragElement, initDragElementRect, hostElement } = dragStaticState;
+
+      if (!dragElement || !initDragElementRect || !hostElement) {
+        return;
+      }
+
+      const dragElementShadow = dragStaticState.dragElementShadow = dragElement.cloneNode(true) as any;
+
+      if (!dragElementShadow) {
+        return;
+      }
+
+      /*强制启用动画，避免被Scroll禁用*/
+      dragElementShadow.setAttribute('data-force-transition', 'true');
+      dragElementShadow.style.height = initDragElementRect.height + 'px';
+      dragElementShadow.style.width = initDragElementRect.width + 'px';
+      dragElementShadow.style.position = 'fixed';
+      dragElementShadow.style.top = initDragElementRect.top + 'px';
+      dragElementShadow.style.left = initDragElementRect.left + 'px';
+      dragElementShadow.style.pointerEvents = 'none';
+      dragElementShadow.style.transition = 'none';
+
+      /*添加克隆节点*/
+      hostElement.appendChild(dragElementShadow);
+      draggierEffects.push(async () => {
+        if (!dragElementShadow || !hostElement) {
+          return;
+        }
+        await dragReactiveState.endingDefer.promise;
+        await delay(23);
+        hostElement.removeChild(dragElementShadow);
+        dragStaticState.dragElementShadow = null as any;
+      });
+
+      /*隐藏原始对象*/
+      dragStaticState.oldDragElementStyles.opacity = dragElement.style.opacity;
+      dragElement.style.opacity = "0";
+      draggierEffects.push(async () => {
+        if (!dragElement) {
+          return;
+        }
+        await dragReactiveState.endingDefer.promise;
+        await delay(23);
+        dragElement.style.opacity = dragStaticState.oldDragElementStyles.opacity;
+        dragStaticState.dragElement = null as any;
+      });
+
+      /*监听滚动*/
+      dragReactiveState.onScroll = (e: Event) => {
+        update();
+      };
+      const ejectOnScroll = getScroll()!.on.onScroll(dragReactiveState.onScroll);
+      draggierEffects.push(() => {
+        ejectOnScroll();
+        dragReactiveState.onScroll = doNothing;
+      });
+
+      /*拖拽结束的时候停止自动滚动*/
+      draggierEffects.push(() => getScroll()?.methods.stopAutoScroll());
+      draggierEffects.push(async () => {
+        await dragReactiveState.endingDefer.promise;
+        dragReactiveState.pointIndex = null;
+      });
+
+      /*标记拖拽中响应式变量*/
+      dragReactiveState.isDragging = true;
+      draggierEffects.push(async () => {
+        await dragReactiveState.endingDefer.promise;
+        dragReactiveState.isDragging = false;
+      });
+
+      /*操作结束之后的更新数据动作*/
+      draggierEffects.push(async () => {
+        const { strutElement, dragIndex } = dragStaticState;
+        if (!initDragElementRect || dragReactiveState.pointIndex == null || !dragElementShadow || !strutElement || dragIndex == null) {
+          return;
+        }
+        // console.log('==>>', dragReactiveState.pointIndex);
+        const pointNode = dragStaticState.nodes[dragReactiveState.pointIndex];
+        // console.log(pointNode, dragElementShadow);
+        const afterTransition = () => {
+          if (dragReactiveState && dragReactiveState.pointIndex != null && dragIndex != null && dragReactiveState.pointIndex != dragIndex) {
+            const insertIndex = dragReactiveState.pointIndex;
+            const newList = [...dataModel.value || []];
+            const spliceArr = newList.splice(dragIndex, 1);
+            newList.splice(insertIndex, 0, ...spliceArr);
+            dataModel.value = (newList);
+          }
+          dragReactiveState.endingDefer.resolve();
+        };
+
+        const newStart = Math.ceil((() => {
+          if (props.horizontal) {
+            return dragReactiveState.pointIndex < dragIndex ?
+              (getElementRect(strutElement).left + pointNode.start) :
+              (getElementRect(strutElement).left + pointNode.end - initDragElementRect.width);
+          } else {
+            return dragReactiveState.pointIndex < dragIndex ?
+              (getElementRect(strutElement).top + pointNode.start) :
+              (getElementRect(strutElement).top + pointNode.end - initDragElementRect.height);
+          }
+        })()) + 'px';
+
+        const styleName = props.horizontal ? 'left' : 'top';
+
+        // console.log(newStart, dragElementShadow.style[styleName]);
+
+        if (dragElementShadow.style[styleName] == newStart) {
+          /*位置没有变化，直接更新数据，因为值没有变化，导致就算复制也不会触发transition动画*/
+          afterTransition();
+        } else {
+          /*位置有变化，等transition动画结束之后再更新数据*/
+          dragElementShadow.style.transition = 'all ease 300ms';
+          dragElementShadow.addEventListener('transitionend', async () => {
+            afterTransition();
+          });
+        }
+        dragElementShadow.style[styleName] = newStart;
+      });
+
+      onDraggierStart?.({ ...draggierData, dragStaticState, dragReactiveState });
+    },
+    onMove: (draggierData) => {
+
+      const { staticState } = draggierData;
+
+      const { dragElementShadow, initDragElementRect, hostElement, strutElement } = dragStaticState;
+
+      if (!dragElementShadow || !initDragElementRect || !hostElement || !strutElement) {
+        return;
+      }
+
+      const strutRect = getElementRect(strutElement);
+      const hostRect = getElementRect(hostElement);
+
+      const newStart = props.horizontal ?
+        initDragElementRect.left + staticState.durX :
+        initDragElementRect.top + staticState.durY;
+      const minStart = props.horizontal ?
+        getElementRect(hostElement).left :
+        getElementRect(hostElement).top;
+      const maxStart1 = props.horizontal ?
+        strutRect.left + strutRect.width - initDragElementRect.width :
+        strutRect.top + strutRect.height - initDragElementRect.height;
+      const maxStart2 = props.horizontal ?
+        hostRect.left + hostRect.width - initDragElementRect.width :
+        hostRect.top + hostRect.height - initDragElementRect.height;
+      const maxStart = Math.min(maxStart1, maxStart2);
+
+      const resultStart = Math.max(minStart, Math.min(maxStart, newStart));
+
+      if (resultStart == minStart) {
+        autoScrollManager.set(props.horizontal ? 'left' : 'top');
+      } else if (resultStart == maxStart) {
+        autoScrollManager.set(props.horizontal ? 'right' : 'bottom');
+      } else {
+        autoScrollManager.set(null);
+      }
+
+      const styleName = props.horizontal ? 'left' : 'top';
+      dragElementShadow.style[styleName] = resultStart + 'px';
+
+      update();
+
+      onDraggierMove?.({ ...draggierData, dragStaticState, dragReactiveState });
+    },
+    onEnd: (draggierData) => {
+      onDraggierEnd?.({ ...draggierData, dragStaticState, dragReactiveState });
+    },
+    onTap: (draggierData) => {
+      onDraggierTap?.({ ...draggierData, dragStaticState, dragReactiveState });
+    },
+  });
+
+  const emitScroll = (e: any) => {
+    dragReactiveState.onScroll(e);
+  };
+
+  return {
+    dragStaticState,
+    dragReactiveState,
+    start,
+    getItemStyles,
+    emitScroll,
+  };
+}

package/src/packages/components/createScrollUtils/index.tsx

@@ -1,163 +1,163 @@
-import {delay} from "plain-utils/utils/delay";
-
-export function createScrollUtils(
-  {
-    getScrollElement, getAutoScrollSpeed, onStop,
-  }: {
-    getScrollElement: () => HTMLElement | null | undefined,
-    getAutoScrollSpeed?: () => number | null | undefined,
-    onStop?: () => void,
-  }
-) {
-
-  let cancelAnimate: number | null = null;
-
-  const _getAutoScrollSpeed = () => (getAutoScrollSpeed ? getAutoScrollSpeed() : 400) || 400;
-
-  const scroll = (
-    {
-      top,
-      left,
-      time,
-      onBegin,
-      onFinish,
-    }: {
-      top?: number,
-      left?: number,
-      time?: number,
-      onFinish?: () => void,
-      onBegin?: () => void,
-    }
-  ) => {
-
-    const scrollElement = getScrollElement();
-    if (!scrollElement) return;
-    if (top == null && left == null) {return;}
-
-    onBegin?.();
-
-    const done = () => {onFinish?.();};
-
-    if (!time) {
-      if (left != null) scrollElement.scrollLeft = left;
-      if (top != null) scrollElement.scrollTop = top;
-      delay(23).then(done);
-    } else {
-
-      if (!!cancelAnimate) {
-        cancelAnimationFrame(cancelAnimate);
-        cancelAnimate = null;
-      }
-
-      let ny = scrollElement.scrollTop;
-      let nx = scrollElement.scrollLeft;
-
-      let ky = top == null ? 0 : (top - ny) / time;
-      let kx = left == null ? 0 : (left - nx) / time;
-
-      let startTime = Date.now();
-
-      const run = () => {
-        let nowTime = Date.now();
-        let delta = nowTime - startTime;
-        let top;
-        let left;
-
-        if (delta >= time) {
-          cancelAnimate = null;
-          top = time * ky + ny;
-          left = time * kx + nx;
-
-          if (scrollElement) {
-            top != null && (scrollElement.scrollTop = top);
-            left != null && (scrollElement.scrollLeft = left);
-            delay(23).then(done);
-          }
-        } else {
-          top = delta * ky + ny;
-          left = delta * kx + nx;
-
-          if (!!scrollElement) {
-            top != null && (scrollElement.scrollTop = top);
-            left != null && (scrollElement.scrollLeft = left);
-          }
-          cancelAnimate = requestAnimationFrame(run);
-        }
-      };
-
-      run();
-    }
-
-  };
-
-  const scrollTop = (top: number, time?: number) => {
-    const scrollElement = getScrollElement();
-    if (!scrollElement || scrollElement.scrollTop === top) {return;}
-    scroll({ top, time });
-  };
-
-  const scrollLeft = (left: number, time?: number) => {
-    const scrollElement = getScrollElement();
-    if (!scrollElement || scrollElement.scrollLeft === left) {return;}
-    scroll({ left, time });
-  };
-
-  const scrollEnd = ({ top, left }: { top?: boolean, left?: boolean } = { top: true, left: true }) => {
-    const scrollElement = getScrollElement();
-    if (!scrollElement) {return;}
-    scroll({ top: top ? scrollElement.scrollHeight : undefined, left: left ? scrollElement.scrollWidth : undefined, });
-  };
-
-  const autoScrollTop = () => {
-    const scrollElement = getScrollElement();
-    if (!scrollElement) {return;}
-    const { scrollHeight, offsetHeight } = scrollElement;
-    if (scrollHeight <= offsetHeight) {return;}
-    const duration = (scrollElement.scrollTop / _getAutoScrollSpeed()) * 1000;
-    scrollTop(0, duration);
-  };
-
-  const autoScrollBottom = () => {
-    const scrollElement = getScrollElement();
-    if (!scrollElement) {return;}
-    const { scrollHeight, offsetHeight } = scrollElement;
-    if (scrollHeight <= offsetHeight) {return;}
-    const duration = ((scrollHeight - offsetHeight - scrollElement.scrollTop) / _getAutoScrollSpeed()) * 1000;
-    scrollTop(scrollHeight - offsetHeight + 17, duration);
-  };
-
-  const autoScrollLeft = () => {
-    const scrollElement = getScrollElement();
-    if (!scrollElement) {return;}
-    const { scrollWidth, offsetWidth } = scrollElement;
-    if (scrollWidth <= offsetWidth) {return;}
-    const duration = (scrollElement.scrollLeft / _getAutoScrollSpeed()) * 1000;
-    scrollLeft(0, duration);
-  };
-
-  const autoScrollRight = () => {
-    const scrollElement = getScrollElement();
-    if (!scrollElement) {return;}
-    const { scrollWidth, offsetWidth } = scrollElement;
-    if (scrollWidth <= offsetWidth) {return;}
-    const duration = ((scrollWidth - offsetWidth - scrollElement.scrollLeft) / _getAutoScrollSpeed()) * 1000;
-    scrollLeft(scrollWidth - offsetWidth + 17, duration);
-  };
-
-  const stopAutoScroll = () => {
-    if (!!cancelAnimate) {
-      cancelAnimationFrame(cancelAnimate);
-      cancelAnimate = null;
-      onStop?.();
-    }
-  };
-
-  return {
-    scroll, scrollTop, scrollLeft, autoScrollLeft, autoScrollRight, autoScrollTop, autoScrollBottom, stopAutoScroll, scrollEnd,
-    getScrollElement,
-  };
-}
-
-export type iScrollUtils = ReturnType<typeof createScrollUtils>
-
-export type iScrollUtilsParameter = Parameters<typeof createScrollUtils>[0]
+import {delay} from "plain-utils/utils/delay";
+
+export function createScrollUtils(
+  {
+    getScrollElement, getAutoScrollSpeed, onStop,
+  }: {
+    getScrollElement: () => HTMLElement | null | undefined,
+    getAutoScrollSpeed?: () => number | null | undefined,
+    onStop?: () => void,
+  }
+) {
+
+  let cancelAnimate: number | null = null;
+
+  const _getAutoScrollSpeed = () => (getAutoScrollSpeed ? getAutoScrollSpeed() : 400) || 400;
+
+  const scroll = (
+    {
+      top,
+      left,
+      time,
+      onBegin,
+      onFinish,
+    }: {
+      top?: number,
+      left?: number,
+      time?: number,
+      onFinish?: () => void,
+      onBegin?: () => void,
+    }
+  ) => {
+
+    const scrollElement = getScrollElement();
+    if (!scrollElement) return;
+    if (top == null && left == null) {return;}
+
+    onBegin?.();
+
+    const done = () => {onFinish?.();};
+
+    if (!time) {
+      if (left != null) scrollElement.scrollLeft = left;
+      if (top != null) scrollElement.scrollTop = top;
+      delay(23).then(done);
+    } else {
+
+      if (!!cancelAnimate) {
+        cancelAnimationFrame(cancelAnimate);
+        cancelAnimate = null;
+      }
+
+      let ny = scrollElement.scrollTop;
+      let nx = scrollElement.scrollLeft;
+
+      let ky = top == null ? 0 : (top - ny) / time;
+      let kx = left == null ? 0 : (left - nx) / time;
+
+      let startTime = Date.now();
+
+      const run = () => {
+        let nowTime = Date.now();
+        let delta = nowTime - startTime;
+        let top;
+        let left;
+
+        if (delta >= time) {
+          cancelAnimate = null;
+          top = time * ky + ny;
+          left = time * kx + nx;
+
+          if (scrollElement) {
+            top != null && (scrollElement.scrollTop = top);
+            left != null && (scrollElement.scrollLeft = left);
+            delay(23).then(done);
+          }
+        } else {
+          top = delta * ky + ny;
+          left = delta * kx + nx;
+
+          if (!!scrollElement) {
+            top != null && (scrollElement.scrollTop = top);
+            left != null && (scrollElement.scrollLeft = left);
+          }
+          cancelAnimate = requestAnimationFrame(run);
+        }
+      };
+
+      run();
+    }
+
+  };
+
+  const scrollTop = (top: number, time?: number) => {
+    const scrollElement = getScrollElement();
+    if (!scrollElement || scrollElement.scrollTop === top) {return;}
+    scroll({ top, time });
+  };
+
+  const scrollLeft = (left: number, time?: number) => {
+    const scrollElement = getScrollElement();
+    if (!scrollElement || scrollElement.scrollLeft === left) {return;}
+    scroll({ left, time });
+  };
+
+  const scrollEnd = ({ top, left }: { top?: boolean, left?: boolean } = { top: true, left: true }) => {
+    const scrollElement = getScrollElement();
+    if (!scrollElement) {return;}
+    scroll({ top: top ? scrollElement.scrollHeight : undefined, left: left ? scrollElement.scrollWidth : undefined, });
+  };
+
+  const autoScrollTop = () => {
+    const scrollElement = getScrollElement();
+    if (!scrollElement) {return;}
+    const { scrollHeight, offsetHeight } = scrollElement;
+    if (scrollHeight <= offsetHeight) {return;}
+    const duration = (scrollElement.scrollTop / _getAutoScrollSpeed()) * 1000;
+    scrollTop(0, duration);
+  };
+
+  const autoScrollBottom = () => {
+    const scrollElement = getScrollElement();
+    if (!scrollElement) {return;}
+    const { scrollHeight, offsetHeight } = scrollElement;
+    if (scrollHeight <= offsetHeight) {return;}
+    const duration = ((scrollHeight - offsetHeight - scrollElement.scrollTop) / _getAutoScrollSpeed()) * 1000;
+    scrollTop(scrollHeight - offsetHeight + 17, duration);
+  };
+
+  const autoScrollLeft = () => {
+    const scrollElement = getScrollElement();
+    if (!scrollElement) {return;}
+    const { scrollWidth, offsetWidth } = scrollElement;
+    if (scrollWidth <= offsetWidth) {return;}
+    const duration = (scrollElement.scrollLeft / _getAutoScrollSpeed()) * 1000;
+    scrollLeft(0, duration);
+  };
+
+  const autoScrollRight = () => {
+    const scrollElement = getScrollElement();
+    if (!scrollElement) {return;}
+    const { scrollWidth, offsetWidth } = scrollElement;
+    if (scrollWidth <= offsetWidth) {return;}
+    const duration = ((scrollWidth - offsetWidth - scrollElement.scrollLeft) / _getAutoScrollSpeed()) * 1000;
+    scrollLeft(scrollWidth - offsetWidth + 17, duration);
+  };
+
+  const stopAutoScroll = () => {
+    if (!!cancelAnimate) {
+      cancelAnimationFrame(cancelAnimate);
+      cancelAnimate = null;
+      onStop?.();
+    }
+  };
+
+  return {
+    scroll, scrollTop, scrollLeft, autoScrollLeft, autoScrollRight, autoScrollTop, autoScrollBottom, stopAutoScroll, scrollEnd,
+    getScrollElement,
+  };
+}
+
+export type iScrollUtils = ReturnType<typeof createScrollUtils>
+
+export type iScrollUtilsParameter = Parameters<typeof createScrollUtils>[0]

package/src/packages/components/createTableOptionUser/index.tsx

@@ -1,5 +1,5 @@
-import {createTableOptionUser} from "../AutoTable/createTableOptionUser";
-
-export default createTableOptionUser;
-
-export {createTableOptionUser};
+import {createTableOptionUser} from "../AutoTable/createTableOptionUser";
+
+export default createTableOptionUser;
+
+export {createTableOptionUser};