bi-sdk-react 0.0.1

package/src/components/dnd/DropContainer.tsx

@@ -0,0 +1,474 @@
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { PageItem, PageItemProps } from "../layout/PageItem";
+import { HtmlBaseProps, SchemaItemType } from "../typing";
+import styled from "styled-components";
+import { DesignerContext } from "../context/DesignerContext";
+
+type DropContainerProps = {
+  rootComponent?: React.ComponentType<any>;
+  rootData?: Record<string, any>;
+  list?: SchemaItemType[];
+  item?: any;
+  onListChange?: (list: any[]) => void;
+} & HtmlBaseProps;
+
+const DropIndicator = styled.div<{
+  $offset: number;
+  $visible: boolean;
+  $vertical?: boolean;
+}>`
+  position: absolute;
+  background: #1890ff;
+  pointer-events: none;
+  opacity: ${(props) => (props.$visible ? 1 : 0)};
+  transition: all 0.1s ease-out;
+
+  /* Horizontal bar (Vertical list) */
+  ${(props) =>
+    !props.$vertical &&
+    `
+    left: 8px;
+    right: 8px;
+    height: 2px;
+    top: ${props.$offset}px;
+  `}
+
+  /* Vertical bar (Horizontal list) */
+  ${(props) =>
+    props.$vertical &&
+    `
+    top: 8px;
+    bottom: 8px;
+    width: 2px;
+    left: ${props.$offset}px;
+  `}
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: #1890ff;
+    border-radius: 50%;
+  }
+
+  ${(props) =>
+    !props.$vertical &&
+    `
+    &::before { top: -3px; left: -4px; }
+    &::after { top: -3px; right: -4px; }
+  `}
+
+  ${(props) =>
+    props.$vertical &&
+    `
+    &::before { left: -3px; top: -4px; }
+    &::after { left: -3px; bottom: -4px; }
+  `}
+`;
+
+// 判断容器是否为水平布局
+const isHorizontalLayout = (el: HTMLElement) => {
+  const children = Array.from(el.children).filter(
+    (child) => 
+      !child.classList.contains("drop-indicator") &&
+      child.getBoundingClientRect().width > 0
+  ) as HTMLElement[];
+
+  if (children.length === 0) {
+    const style = window.getComputedStyle(el);
+    const { display, flexDirection } = style;
+    
+    if (display === 'flex' || display === 'inline-flex') {
+      return !flexDirection.includes('column');
+    }
+    if (display === 'grid') {
+      return !style.gridAutoFlow.includes('column');
+    }
+    return false;
+  }
+
+  if (children.length === 1) {
+    const childStyle = window.getComputedStyle(children[0]);
+    const elStyle = window.getComputedStyle(el);
+    
+    if (elStyle.display === 'flex' || elStyle.display === 'inline-flex') {
+        return !elStyle.flexDirection.includes('column');
+    }
+    if (['inline', 'inline-block', 'inline-flex'].includes(childStyle.display)) return true;
+    if (childStyle.float !== 'none') return true;
+    return false;
+  }
+
+  // 使用方差（标准差）判断主轴
+  let sumX = 0, sumY = 0;
+  const centers = children.map(c => {
+      const r = c.getBoundingClientRect();
+      const cx = r.left + r.width/2;
+      const cy = r.top + r.height/2;
+      sumX += cx;
+      sumY += cy;
+      return { cx, cy };
+  });
+
+  const avgX = sumX / children.length;
+  const avgY = sumY / children.length;
+
+  let varX = 0, varY = 0;
+  centers.forEach(c => {
+      varX += (c.cx - avgX) ** 2;
+      varY += (c.cy - avgY) ** 2;
+  });
+
+  return varX >= varY;
+};
+
+// 计算拖放位置的索引和指示器位置
+const getDropInfo = (
+  dropElement: HTMLElement,
+  clientX: number,
+  clientY: number,
+  list: any[]
+): { index: number; indicatorOffset: number; isHorizontal: boolean } => {
+  const containerRect = dropElement.getBoundingClientRect();
+  const children = Array.from(dropElement.children).filter(
+    (child) => 
+      !child.classList.contains("drop-indicator") &&
+      child.getBoundingClientRect().width > 0
+  ) as HTMLElement[];
+
+  const isHorizontal = isHorizontalLayout(dropElement);
+  const scrollLeft = dropElement.scrollLeft;
+  const scrollTop = dropElement.scrollTop;
+
+  if (children.length === 0) {
+    return { index: 0, indicatorOffset: 15, isHorizontal }; // padding offset
+  }
+
+  // 辅助函数：计算指示器位置
+  const getIndicatorOffset = (childRect: DOMRect, before: boolean) => {
+    if (isHorizontal) {
+      const visualOffset = before ? childRect.left : childRect.right;
+      return visualOffset - containerRect.left + scrollLeft + (before ? -4 : 4);
+    } else {
+      const visualOffset = before ? childRect.top : childRect.bottom;
+      return visualOffset - containerRect.top + scrollTop + (before ? -4 : 4);
+    }
+  };
+
+  // 辅助函数：获取元素在列表中的索引
+  const getElementIndex = (el: HTMLElement) => {
+    const id = el.getAttribute('data-item-id');
+    if (id) {
+      const idx = list.findIndex(i => i.id === id);
+      if (idx !== -1) return idx;
+    }
+    // 回退到 DOM 索引（可能不准确，但在找不到 ID 时作为备选）
+    return children.indexOf(el);
+  };
+
+  // 1. 尝试直接命中检测 (Hit Test)
+  for (let i = 0; i < children.length; i++) {
+    const rect = children[i].getBoundingClientRect();
+    // 增加一点 hit buffer，使得容易命中元素
+    const buffer = 5;
+    if (
+      clientX >= rect.left - buffer &&
+      clientX <= rect.right + buffer &&
+      clientY >= rect.top - buffer &&
+      clientY <= rect.bottom + buffer
+    ) {
+      // 命中了某个元素，根据中线判断前后
+      const isBefore = isHorizontal
+        ? clientX < rect.left + rect.width / 2
+        : clientY < rect.top + rect.height / 2;
+
+      const currentIdx = getElementIndex(children[i]);
+      return {
+        index: isBefore ? currentIdx : currentIdx + 1,
+        indicatorOffset: getIndicatorOffset(rect, isBefore),
+        isHorizontal,
+      };
+    }
+  }
+
+  // 2. 未命中任何元素，寻找最近的元素 (Nearest Neighbor)
+  let minDistance = Infinity;
+  let bestIndex = -1;
+  let isBeforeBest = false;
+  let bestRect: DOMRect | null = null;
+  let bestEl: HTMLElement | null = null;
+
+  for (let i = 0; i < children.length; i++) {
+    const rect = children[i].getBoundingClientRect();
+    // 计算中心点距离
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    const dist = (clientX - cx) ** 2 + (clientY - cy) ** 2;
+
+    if (dist < minDistance) {
+      minDistance = dist;
+      bestIndex = i; // 暂时存储 DOM index
+      bestRect = rect;
+      bestEl = children[i];
+      // 记录相对于该元素的方位
+      isBeforeBest = isHorizontal
+        ? clientX < cx
+        : clientY < cy;
+    }
+  }
+
+  if (bestEl && bestRect) {
+    const currentIdx = getElementIndex(bestEl);
+    return {
+      index: isBeforeBest ? currentIdx : currentIdx + 1,
+      indicatorOffset: getIndicatorOffset(bestRect, isBeforeBest),
+      isHorizontal,
+    };
+  }
+
+  // 3. 兜底：放在最后
+  const lastRect = children[children.length - 1].getBoundingClientRect();
+  return {
+    index: list.length,
+    indicatorOffset: getIndicatorOffset(lastRect, false),
+    isHorizontal,
+  };
+};
+
+/**
+ * DropContainer 组件
+ * 用途：容器级拖拽放置，合并父级 forwardedRef 与 react-dnd 的 drop 连接器
+ * 参数：
+ * - enabled：是否启用拖拽放置
+ * - rootComponent：容器根组件类型
+ * - rootData：根组件属性
+ * - list：容器内子项列表
+ * - 其余同 HtmlBaseProps
+ */
+export const DropContainer: React.FC<DropContainerProps> = ({
+  rootComponent: RootComponent = "div",
+  rootData = {},
+  list = [],
+  item,
+  onListChange,
+  className,
+}) => {
+  const {
+    designable,
+    selectedItem,
+    setSelectedItem: onSelect,
+    forceUpdate,
+  } = useContext(DesignerContext);
+  const localRef = useRef<any | null>(null);
+  const [isOver, setIsOver] = useState(false);
+  const [indicatorOffset, setIndicatorOffset] = useState(0);
+  const [isVertical, setIsVertical] = useState(false);
+  const [showIndicator, setShowIndicator] = useState(false);
+
+  const listRef = useRef(list);
+  const onListChangeRef = useRef(onListChange);
+
+  useEffect(() => {
+    listRef.current = list;
+    onListChangeRef.current = onListChange;
+  }, [list, onListChange]);
+
+  const memoList = useMemo(() => list || [], [list]);
+
+  useEffect(() => {
+    const el = localRef.current;
+    if (!el) return;
+    const cleanup = dropTargetForElements({
+      element: el,
+      canDrop: ({ source, element }) => {
+        if (!designable) {
+          return false;
+        }
+        const { data }: Record<string, any> = source.data || {};
+        if (element.classList.contains("ant-row") && data?.type !== "b-col") {
+          return false;
+        }
+        if (!element.classList.contains("ant-row") && data?.type === "b-col") {
+          return false;
+        }
+        return true;
+      },
+      getData: () => ({ localList: listRef.current }),
+      onDragEnter: (args) => {
+        if (!designable) {
+          return false;
+        }
+        const [closestTarget] = args.location.current.dropTargets;
+        if (closestTarget?.element !== el) return;
+
+        setIsOver(true);
+        setShowIndicator(true);
+        const clientY = args.location.current.input.clientY;
+        const clientX = args.location.current.input.clientX;
+        const { indicatorOffset, isHorizontal } = getDropInfo(el, clientX, clientY, listRef.current || []);
+        setIndicatorOffset(indicatorOffset);
+        setIsVertical(isHorizontal);
+      },
+      onDrag: (args) => {
+        if (!designable) {
+          return false;
+        }
+        const [closestTarget] = args.location.current.dropTargets;
+        if (closestTarget?.element !== el) {
+          setIsOver(false);
+          setShowIndicator(false);
+          return;
+        }
+
+        setIsOver(true);
+        setShowIndicator(true);
+        const clientY = args.location.current.input.clientY;
+        const clientX = args.location.current.input.clientX;
+        const { indicatorOffset, isHorizontal } = getDropInfo(el, clientX, clientY, listRef.current || []);
+        setIndicatorOffset(indicatorOffset);
+        setIsVertical(isHorizontal);
+      },
+      onDragLeave: () => {
+        if (!designable) {
+          return false;
+        }
+        setIsOver(false);
+        setShowIndicator(false);
+      },
+      onDrop(args) {
+        if (!designable) {
+          return false;
+        }
+        const [closestTarget] = args.location.current.dropTargets;
+        if (closestTarget?.element !== el) return;
+
+        setIsOver(false);
+        setShowIndicator(false);
+        const {
+          data: sourceItem,
+          list: sourceList,
+          onListChange: onSourceListChange,
+          index: sourceIndex,
+        } = args.source.data as {
+          data: any;
+          list?: any[];
+          index?: number;
+          onListChange?: React.Dispatch<React.SetStateAction<any[]>>;
+        };
+        onSelect?.(sourceItem);
+
+        const currentList = listRef.current || [];
+        const currentOnListChange = onListChangeRef.current;
+
+        // 判断是否为同一个列表（引用相同或包含该元素）
+        const isSameList =
+          sourceList === currentList ||
+          currentList.some((i: any) => i.id === sourceItem.id);
+
+        const clientY = args.location.current.input.clientY;
+        const clientX = args.location.current.input.clientX;
+        const { index: dropIndex } = getDropInfo(el, clientX, clientY, currentList);
+
+        if (!sourceList) {
+          // 情况1: !parentList - 从外部拖入，在指定位置插入
+          const newList = [...currentList];
+          newList.splice(dropIndex, 0, sourceItem);
+          currentOnListChange?.(newList);
+        } else if (isSameList) {
+          // 情况3: list === parentList - 同列表内排序
+          const newList = [...currentList];
+          // 重新查找索引，防止闭包过时
+          const currentSourceIndex = newList.findIndex(
+            (i: any) => i.id === sourceItem.id
+          );
+
+          if (currentSourceIndex !== -1) {
+            const [removed] = newList.splice(currentSourceIndex, 1);
+            // 如果目标位置在源位置之后，需要调整索引
+            const adjustedIndex =
+              dropIndex > currentSourceIndex ? dropIndex - 1 : dropIndex;
+            newList.splice(adjustedIndex, 0, removed);
+            currentOnListChange?.(newList);
+          } else {
+            // 异常情况：未找到元素，当作新插入
+            newList.splice(dropIndex, 0, sourceItem);
+            currentOnListChange?.(newList);
+          }
+        } else {
+          // 情况2: list !== parentList - 跨容器移动
+
+          // 1. 从源列表移除
+          if (onSourceListChange && sourceList) {
+            const newSourceList = sourceList.filter(
+              (i: any) => i.id !== sourceItem.id
+            );
+            onSourceListChange(newSourceList);
+          }
+
+          // 2. 添加到目标列表
+          const newList = [...currentList];
+          // 防重复检查
+          if (!newList.some((i: any) => i.id === sourceItem.id)) {
+            newList.splice(dropIndex, 0, sourceItem);
+            currentOnListChange?.(newList);
+          }
+
+          // forceUpdate?.();
+        }
+      },
+    });
+    return () => cleanup();
+  }, []);
+
+  // Determine classes
+  const classes = [
+    className,
+    "drag-container",
+    "page-item-component",
+    !list.length ? "empty-container" : "",
+    selectedItem === item ? "selected" : "",
+    designable ? "designable" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <RootComponent
+      {...(rootData || {})}
+      ref={localRef}
+      className={classes}
+      style={{
+        ...(rootData as any)?.style,
+        position: "relative",
+        minHeight: designable ? 24 : undefined,
+        outline: isOver ? "1px dashed #1890ff" : undefined,
+      }}
+    >
+      <DropIndicator
+        className="drop-indicator"
+        $offset={indicatorOffset}
+        $vertical={isVertical}
+        $visible={showIndicator}
+      />
+      {((Array.isArray(memoList) ? memoList : []) as any[])
+        .filter(Boolean)
+        .map((item: any, index: number) => (
+          <PageItem
+            key={item.id || index}
+            item={item}
+            parentList={memoList}
+            onListChange={onListChange}
+            index={index}
+            onDelete={() =>
+              onListChange?.(memoList.filter((i: any) => i.id !== item.id))
+            }
+          />
+        ))}
+    </RootComponent>
+  );
+};
+
+export default DropContainer;