@aloudata/aloudata-design 2.13.11 → 2.13.12

package/dist/Icon/components/DragLightLine.js

@@ -15,7 +15,7 @@ var DragLightLine = function DragLightLine(_ref, ref) {
     width: props.width || props.size || 16,
     height: props.height || props.size || 16,
     fill: "none",
-    viewBox: "0 0 16 16",
+    viewBox: "0 0 24 24",
     ref: ref,
     "aria-labelledby": titleId,
     "aria-describedby": descId
@@ -24,9 +24,9 @@ var DragLightLine = function DragLightLine(_ref, ref) {
   }, desc) : null, title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: "#6B7280",
+    fill: props.color || 'currentColor',
     fillRule: "evenodd",
-    d: "M6 4a.667.667 0 1 0 0-1.334.667.667 0 0 0 0 1.333Zm0 4.666a.667.667 0 1 0 0-1.333.667.667 0 0 0 0 1.333Zm.667 4a.667.667 0 1 1-1.334 0 .667.667 0 0 1 1.334 0ZM10 3.999a.667.667 0 1 0 0-1.333A.667.667 0 0 0 10 4Zm0 4.667a.667.667 0 1 0 0-1.333.667.667 0 0 0 0 1.333Zm.667 4a.667.667 0 1 1-1.333 0 .667.667 0 0 1 1.333 0Z",
+    d: "M9 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm0 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm5-13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm0 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",
     clipRule: "evenodd"
   }));
 };

package/dist/Icon/components/TrashLightLine.d.ts

@@ -0,0 +1,11 @@
+import type { SVGProps } from 'react';
+import * as React from 'react';
+interface SVGRProps {
+    size?: number | string;
+    title?: string;
+    titleId?: string;
+    desc?: string;
+    descId?: string;
+}
+declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
+export default Memo;

package/dist/Icon/components/TrashLightLine.js

@@ -0,0 +1,38 @@
+var _excluded = ["title", "titleId", "desc", "descId"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import * as React from 'react';
+import { forwardRef, memo } from 'react';
+var TrashLightLine = function TrashLightLine(_ref, ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    desc = _ref.desc,
+    descId = _ref.descId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.width || props.size || 16,
+    height: props.height || props.size || 16,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ref: ref,
+    "aria-labelledby": titleId,
+    "aria-describedby": descId
+  }, props), desc ? /*#__PURE__*/React.createElement("desc", {
+    id: descId
+  }, desc) : null, title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("g", {
+    fill: props.color || 'currentColor'
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8.75 3.25a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M4 6.25a.75.75 0 0 0 0 1.5h1.25V18A2.75 2.75 0 0 0 8 20.75h8A2.75 2.75 0 0 0 18.75 18V7.75H20a.75.75 0 0 0 0-1.5H4ZM6.75 18V7.75h10.5V18c0 .69-.56 1.25-1.25 1.25H8c-.69 0-1.25-.56-1.25-1.25Z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef = /*#__PURE__*/forwardRef(TrashLightLine);
+var Memo = /*#__PURE__*/memo(ForwardRef);
+export default Memo;

package/dist/Icon/index.d.ts

@@ -44,6 +44,7 @@ export { default as SortAscendingOrderColor } from './components/SortAscendingOr
 export { default as SortColor } from './components/SortColor';
 export { default as SortDescendingOrderColor } from './components/SortDescendingOrderColor';
 export { default as TimesLightLine } from './components/TimesLightLine';
+export { default as TrashLightLine } from './components/TrashLightLine';
 export { default as TriangleLightLine } from './components/TriangleLightLine';
 export { default as User } from './components/User';
 export { default as UserGroup } from './components/UserGroup';

package/dist/Icon/index.js

@@ -44,6 +44,7 @@ export { default as SortAscendingOrderColor } from "./components/SortAscendingOr
 export { default as SortColor } from "./components/SortColor";
 export { default as SortDescendingOrderColor } from "./components/SortDescendingOrderColor";
 export { default as TimesLightLine } from "./components/TimesLightLine";
+export { default as TrashLightLine } from "./components/TrashLightLine";
 export { default as TriangleLightLine } from "./components/TriangleLightLine";
 export { default as User } from "./components/User";
 export { default as UserGroup } from "./components/UserGroup";

package/dist/Icon/svg/Trash-light-line.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id=" Icon / Light / General / Trash-light-line">
+<g id="Icon">
+<path d="M8.75 3.25C8.33579 3.25 8 3.58579 8 4C8 4.41421 8.33579 4.75 8.75 4.75H15.25C15.6642 4.75 16 4.41421 16 4C16 3.58579 15.6642 3.25 15.25 3.25H8.75Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.25C3.58579 6.25 3.25 6.58579 3.25 7C3.25 7.41421 3.58579 7.75 4 7.75H5.25V18C5.25 19.5188 6.48122 20.75 8 20.75H16C17.5188 20.75 18.75 19.5188 18.75 18V7.75H20C20.4142 7.75 20.75 7.41421 20.75 7C20.75 6.58579 20.4142 6.25 20 6.25H4ZM6.75 18V7.75H17.25V18C17.25 18.6904 16.6904 19.25 16 19.25H8C7.30964 19.25 6.75 18.6904 6.75 18Z" fill="black"/>
+</g>
+</g>
+</svg>

package/dist/Icon/svg/drag-light-line.svg

@@ -1,5 +1,5 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id=" Icon / Light / Interface / drag-light-line">
-<path id="Icon" fill-rule="evenodd" clip-rule="evenodd" d="M6.00016 3.99935C6.36835 3.99935 6.66683 3.70087 6.66683 3.33268C6.66683 2.96449 6.36835 2.66602 6.00016 2.66602C5.63197 2.66602 5.3335 2.96449 5.3335 3.33268C5.3335 3.70087 5.63197 3.99935 6.00016 3.99935ZM6.00016 8.66602C6.36835 8.66602 6.66683 8.36754 6.66683 7.99935C6.66683 7.63116 6.36835 7.33268 6.00016 7.33268C5.63197 7.33268 5.3335 7.63116 5.3335 7.99935C5.3335 8.36754 5.63197 8.66602 6.00016 8.66602ZM6.66683 12.666C6.66683 13.0342 6.36835 13.3327 6.00016 13.3327C5.63197 13.3327 5.3335 13.0342 5.3335 12.666C5.3335 12.2978 5.63197 11.9993 6.00016 11.9993C6.36835 11.9993 6.66683 12.2978 6.66683 12.666ZM10.0002 3.99935C10.3684 3.99935 10.6668 3.70087 10.6668 3.33268C10.6668 2.96449 10.3684 2.66602 10.0002 2.66602C9.63197 2.66602 9.3335 2.96449 9.3335 3.33268C9.3335 3.70087 9.63197 3.99935 10.0002 3.99935ZM10.0002 8.66602C10.3684 8.66602 10.6668 8.36754 10.6668 7.99935C10.6668 7.63116 10.3684 7.33268 10.0002 7.33268C9.63197 7.33268 9.3335 7.63116 9.3335 7.99935C9.3335 8.36754 9.63197 8.66602 10.0002 8.66602ZM10.6668 12.666C10.6668 13.0342 10.3684 13.3327 10.0002 13.3327C9.63197 13.3327 9.3335 13.0342 9.3335 12.666C9.3335 12.2978 9.63197 11.9993 10.0002 11.9993C10.3684 11.9993 10.6668 12.2978 10.6668 12.666Z" fill="#6B7280"/>
+<path id="Icon" fill-rule="evenodd" clip-rule="evenodd" d="M9 6C9.55229 6 10 5.55228 10 5C10 4.44772 9.55229 4 9 4C8.44771 4 8 4.44772 8 5C8 5.55228 8.44771 6 9 6ZM9 13C9.55229 13 10 12.5523 10 12C10 11.4477 9.55229 11 9 11C8.44771 11 8 11.4477 8 12C8 12.5523 8.44771 13 9 13ZM10 19C10 19.5523 9.55229 20 9 20C8.44771 20 8 19.5523 8 19C8 18.4477 8.44771 18 9 18C9.55229 18 10 18.4477 10 19ZM15 6C15.5523 6 16 5.55228 16 5C16 4.44772 15.5523 4 15 4C14.4477 4 14 4.44772 14 5C14 5.55228 14.4477 6 15 6ZM15 13C15.5523 13 16 12.5523 16 12C16 11.4477 15.5523 11 15 11C14.4477 11 14 11.4477 14 12C14 12.5523 14.4477 13 15 13ZM16 19C16 19.5523 15.5523 20 15 20C14.4477 20 14 19.5523 14 19C14 18.4477 14.4477 18 15 18C15.5523 18 16 18.4477 16 19Z" fill="black"/>
 </g>
 </svg>

package/dist/LogicTree/components/LogicItem/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TRenderCondition } from '../..';
+import { EPutPosition, TRenderCondition } from '../..';
 import { ELogicType, TNode } from '../../type';
 interface IProps<T> {
     value: TNode<T>;
@@ -9,10 +9,10 @@ interface IProps<T> {
     changeRecordData: (id: string, data: T) => void;
     changeRelation: (id: string, logicType: ELogicType) => void;
     renderCondition: TRenderCondition<T>;
-    onDragEnd: (dragId: string, hoverId: string) => void;
+    onDragEnd: (dragId: string, hoverId: string, dropPosition: EPutPosition) => void;
     hoverId: string;
     setHoverId: (id: string) => void;
     isRoot?: boolean;
 }
-export default function LogicItem<T>({ value, addCondition, addRelation, changeRecordData, remove, changeRelation, renderCondition, onDragEnd, isRoot, hoverId, setHoverId, }: IProps<T>): React.JSX.Element;
+export default function LogicItem<T>({ value, addCondition, addRelation, changeRecordData, remove, changeRelation, renderCondition, onDragEnd, hoverId, setHoverId, isRoot, }: IProps<T>): React.JSX.Element;
 export {};

package/dist/LogicTree/components/LogicItem/index.js

@@ -7,15 +7,17 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
 import _ from 'lodash';
 import React, { useContext, useRef, useState } from 'react';
-import { useDrag, useDrop } from 'react-dnd';
+import { DragPreviewImage, useDrag, useDrop } from 'react-dnd';
+import { EPutPosition } from "../..";
 import DragLightLine from "../../../Icon/components/DragLightLine";
 import PlusIcon from "../../../Icon/components/SignLightLine";
-import CloseIcon from "../../../Icon/components/TimesLightLine";
+import TrashLightLine from "../../../Icon/components/TrashLightLine";
 import IconButton from "../../../IconButton";
 import Select from "../../../Select";
 import TextLink from "../../../TextLink";
 import { LocaleContext, getTranslator } from "../../../locale/default";
 import { ELogicType, ENodeType } from "../../type";
+var dargPreviewImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAYSURBVHgB7cAxAQAAAMKg9U9tCU8oAPgYBlQAAX19SpgAAAAASUVORK5CYII=';
 var TWO = 2;
 export default function LogicItem(_ref) {
   var value = _ref.value,
@@ -26,18 +28,26 @@ export default function LogicItem(_ref) {
     changeRelation = _ref.changeRelation,
     renderCondition = _ref.renderCondition,
     onDragEnd = _ref.onDragEnd,
-    _ref$isRoot = _ref.isRoot,
-    isRoot = _ref$isRoot === void 0 ? false : _ref$isRoot,
     hoverId = _ref.hoverId,
-    setHoverId = _ref.setHoverId;
-  var _useState = useState(0),
+    setHoverId = _ref.setHoverId,
+    _ref$isRoot = _ref.isRoot,
+    isRoot = _ref$isRoot === void 0 ? false : _ref$isRoot;
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    firstNodeHight = _useState2[0],
-    setFirstNodeHight = _useState2[1];
+    isHoverDragBox = _useState2[0],
+    setIsHoverDragBox = _useState2[1];
   var _useState3 = useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
-    lastNodeHight = _useState4[0],
-    setLastNodeHight = _useState4[1];
+    firstNodeHight = _useState4[0],
+    setFirstNodeHight = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    lastNodeHight = _useState6[0],
+    setLastNodeHight = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    dropPosition = _useState8[0],
+    setDropPosition = _useState8[1];
   var _useContext = useContext(LocaleContext),
     locale = _useContext.locale;
   var t = getTranslator(locale);
@@ -60,13 +70,38 @@ export default function LogicItem(_ref) {
           isDragging: monitor.isDragging()
         };
       },
-      canDrag: !isRoot
+      canDrag: !isRoot && isHoverDragBox
     }),
-    _useDrag2 = _slicedToArray(_useDrag, 2),
+    _useDrag2 = _slicedToArray(_useDrag, 3),
     isDragging = _useDrag2[0].isDragging,
-    drag = _useDrag2[1];
+    drag = _useDrag2[1],
+    preview = _useDrag2[2];
   var _useDrop = useDrop({
       accept: 'LOGIC_ITEM',
+      hover: function hover(item, monitor) {
+        if (!ref.current) {
+          return;
+        }
+        var dragId = item.id;
+        var hoverId = value.id;
+        if (dragId === hoverId) {
+          return;
+        }
+        // 检查是否为最顶层的放置目标
+        if (monitor.didDrop()) {
+          return;
+        }
+
+        // 获取鼠标位置和目标元素位置
+        var hoverBoundingRect = ref.current.getBoundingClientRect();
+        var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+        var clientOffset = monitor.getClientOffset();
+        if (clientOffset) {
+          var hoverClientY = clientOffset.y - hoverBoundingRect.top;
+          var _dropPosition = hoverClientY < hoverMiddleY ? EPutPosition.TOP : EPutPosition.BOTTOM;
+          setDropPosition(_dropPosition);
+        } else setDropPosition(undefined);
+      },
       drop: function drop(item, monitor) {
         if (!ref.current) {
           return;
@@ -80,7 +115,18 @@ export default function LogicItem(_ref) {
         if (monitor.didDrop()) {
           return;
         }
-        onDragEnd(dragId, hoverId);
+
+        // 获取鼠标位置和目标元素位置
+        var hoverBoundingRect = ref.current.getBoundingClientRect();
+        var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+        var clientOffset = monitor.getClientOffset();
+        if (clientOffset) {
+          var hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+          // 确定放置位置
+          var _dropPosition2 = hoverClientY < hoverMiddleY ? EPutPosition.TOP : EPutPosition.BOTTOM;
+          onDragEnd(dragId, hoverId, _dropPosition2);
+        }
       },
       collect: function collect(monitor) {
         return {
@@ -134,22 +180,20 @@ export default function LogicItem(_ref) {
     var verticalLineHeight = nodes.length > 1 ? "calc(100% - ".concat(firstNodeHight / TWO, "px - ").concat(lastNodeHight / TWO, "px - 42px)") : "30px";
     return /*#__PURE__*/React.createElement("div", {
       className: classNames('ald-logic-tree-logic-node', {
-        'is-over': isDragOver,
-        'is-hover': hoverId === value.id,
-        'is-dragging': isDragging
+        'is-hover-drag-box': isHoverDragBox,
+        'is-dragging': isDragging,
+        'is-hover-top': isDragOver && dropPosition === EPutPosition.TOP,
+        'is-hover-bottom': isDragOver && dropPosition === EPutPosition.BOTTOM
       }),
-      ref: ref,
       onMouseMove: function onMouseMove(e) {
         e.stopPropagation();
         setHoverId(value.id);
       },
       onMouseOut: function onMouseOut(e) {
         e.stopPropagation();
-        setHoverId(value.id);
+        setHoverId('');
       },
-      style: {
-        opacity: isDragging ? 0.5 : 1
-      }
+      ref: ref
     }, _.map(nodes, function (node, index) {
       var ref = null;
       if (index === 0) {
@@ -196,24 +240,47 @@ export default function LogicItem(_ref) {
         height: verticalLineHeight,
         top: "".concat(firstNodeHight / TWO + 4, "px")
       }
-    }), !isRoot && (hoverId === value.id || isDragging) && /*#__PURE__*/React.createElement(DragLightLine, {
+    }), !isRoot && (hoverId === value.id || isDragging) && /*#__PURE__*/React.createElement("div", {
+      className: "ald-logic-tree-node-drag-icon-wrapper",
+      onMouseMove: function onMouseMove(e) {
+        e.stopPropagation();
+        setIsHoverDragBox(true);
+        setHoverId(value.id);
+      },
+      onMouseOut: function onMouseOut(e) {
+        e.stopPropagation();
+        setIsHoverDragBox(false);
+      }
+    }, /*#__PURE__*/React.createElement(DragLightLine, {
+      onMouseMove: function onMouseMove(e) {
+        e.stopPropagation();
+        setIsHoverDragBox(true);
+        setHoverId(value.id);
+      },
       size: 16,
-      color: "#6B7280",
+      color: "#374151",
       className: "ald-logic-tree-node-drag-icon"
-    }), /*#__PURE__*/React.createElement(Select, {
+    })), /*#__PURE__*/React.createElement(Select, {
       options: logicOptions,
       className: "ald-logic-tree-select-relation",
       size: "small",
       value: _logicType,
       onChange: onChangeRelation,
       disabled: nodes.length <= 1
+    }), /*#__PURE__*/React.createElement(DragPreviewImage, {
+      connect: preview,
+      src: dargPreviewImg
     }));
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DragPreviewImage, {
+    connect: preview,
+    src: dargPreviewImg
+  }), /*#__PURE__*/React.createElement("div", {
     className: classNames('ald-logic-tree-record-node', {
-      'is-over': isDragOver,
-      'is-hover': hoverId === value.id,
-      'is-dragging': isDragging
+      'is-hover-drag-box': isHoverDragBox,
+      'is-dragging': isDragging,
+      'is-hover-top': isDragOver && dropPosition === EPutPosition.TOP,
+      'is-hover-bottom': isDragOver && dropPosition === EPutPosition.BOTTOM
     }),
     ref: ref,
     onMouseMove: function onMouseMove(e) {
@@ -222,23 +289,40 @@ export default function LogicItem(_ref) {
     },
     onMouseOut: function onMouseOut(e) {
       e.stopPropagation();
+      setHoverId('');
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ald-logic-tree-node-drag-icon-preview",
+    ref: preview
+  }), (hoverId === value.id || isDragging) && /*#__PURE__*/React.createElement("div", {
+    className: "ald-logic-tree-record-node-drag-icon-wrapper",
+    onMouseMove: function onMouseMove(e) {
+      e.stopPropagation();
+      setIsHoverDragBox(true);
       setHoverId(value.id);
     },
-    style: {
-      opacity: isDragging ? 0.5 : 1
+    onMouseOut: function onMouseOut(e) {
+      e.stopPropagation();
+      setIsHoverDragBox(false);
     }
-  }, (hoverId === value.id || isDragging) && /*#__PURE__*/React.createElement(DragLightLine, {
+  }, /*#__PURE__*/React.createElement(DragLightLine, {
+    onMouseMove: function onMouseMove(e) {
+      e.stopPropagation();
+      setIsHoverDragBox(true);
+      setHoverId(value.id);
+    },
     size: 16,
-    color: "#6B7280",
+    color: "#374151",
     className: "ald-logic-tree-record-node-drag-icon"
-  }), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "ald-logic-tree-render-condition-wrap"
   }, renderCondition(value.data, {
     changeData: onChangeRecordData
   })), /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(CloseIcon, {
-      size: 24
+    icon: /*#__PURE__*/React.createElement(TrashLightLine, {
+      size: 16
     }),
+    size: 'small',
     onClick: onRemove
-  }));
+  })));
 }

package/dist/LogicTree/helper.d.ts

@@ -8,3 +8,4 @@ export declare function changeRelation<T>(id: string, logicType: ELogicType, roo
 export declare function changeRecordData<T>(id: string, newData: T, rootNode: TNode<T>): TNode<T>;
 export declare function getInitialLogicNode<T>(initialData: T[]): TNode<T>;
 export declare function logicTreeIterator<T, U>(rootNode: TNode<T>, callback: (node: TNode<T>, acc: U[]) => U): U;
+export declare function isDescendant<T>(hoverId: string, dragNode: TNode<T>): boolean;

package/dist/LogicTree/helper.js

@@ -180,4 +180,12 @@ export function logicTreeIterator(rootNode, callback) {
     return callback(rootNode, []);
   }
   return callback(rootNode, []);
+}
+export function isDescendant(hoverId, dragNode) {
+  if (!dragNode || dragNode.type === ENodeType.RECORD) {
+    return false;
+  }
+  return dragNode.nodes.some(function (childNode) {
+    return childNode.id === hoverId || isDescendant(hoverId, childNode);
+  });
 }

package/dist/LogicTree/index.d.ts

@@ -3,6 +3,10 @@ import DisplayLogicTree from './DisplayLogicTree';
 import { ELogicType, ENodeType, TNode } from './type';
 export type { TNode };
 export { DisplayLogicTree, ELogicType, ENodeType };
+export declare enum EPutPosition {
+    TOP = "TOP",
+    BOTTOM = "BOTTOM"
+}
 export type TRenderCondition<T> = (data: T, { changeData }: {
     changeData: (data: T) => void;
 }) => React.ReactNode;

package/dist/LogicTree/index.js

@@ -13,9 +13,14 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import { getUniqId } from "../_utils/getUniqId";
 import DisplayLogicTree from "./DisplayLogicTree";
 import LogicItem from "./components/LogicItem";
-import { addLogicNode, addRecordNode, changeRecordData, changeRelation, findNodeById, findParentNodeById, removeNode } from "./helper";
+import { addLogicNode, addRecordNode, changeRecordData, changeRelation, findNodeById, findParentNodeById, isDescendant, removeNode } from "./helper";
 import { ELogicType, ENodeType } from "./type";
 export { DisplayLogicTree, ELogicType, ENodeType };
+export var EPutPosition = /*#__PURE__*/function (EPutPosition) {
+  EPutPosition["TOP"] = "TOP";
+  EPutPosition["BOTTOM"] = "BOTTOM";
+  return EPutPosition;
+}({});
 export default function LogicTree(props) {
   var newInitializationData = props.newInitializationData,
     propsOnChange = props.onChange,
@@ -70,40 +75,42 @@ export default function LogicTree(props) {
     var newRootNode = changeRecordData(id, data, innerValue);
     changeInnerValue(newRootNode);
   };
-  var moveNode = useCallback(function (dragId, hoverId) {
+  var moveNode = useCallback(function (dragId, hoverId, dropPosition) {
     var newRootNode = _.cloneDeep(innerValue);
     var dragNode = findNodeById(dragId, newRootNode);
     var hoverNode = findNodeById(hoverId, newRootNode);
     if (dragNode && hoverNode) {
+      if (isDescendant(hoverId, dragNode)) {
+        return;
+      }
       var dragParent = findParentNodeById(dragId, newRootNode);
       var hoverParent = findParentNodeById(hoverId, newRootNode);
       if (dragParent && hoverParent) {
-        var tempDragParentNodes = dragParent.nodes.filter(function (node) {
+        // 从原位置移除节点
+        dragParent.nodes = dragParent.nodes.filter(function (node) {
           return node.id !== dragId;
         });
 
-        // 如果  tempDragParentNodes 为空的话，则删除dragParent结点
-        if (tempDragParentNodes.length === 0) {
+        // 如果拖拽父节点为空，处理删除逻辑
+        if (dragParent.nodes.length === 0) {
           var grandParent = findParentNodeById(dragParent.id, newRootNode);
           if (grandParent) {
             grandParent.nodes = grandParent.nodes.filter(function (node) {
               return node.id !== dragParent.id;
             });
           } else {
-            // 如果 dragParent 是根节点，则不删除，只清空其 nodes
             dragParent.nodes = [];
           }
-        } else {
-          dragParent.nodes = tempDragParentNodes;
         }
 
         // 插入到新位置
         var hoverIndex = hoverParent.nodes.findIndex(function (node) {
           return node.id === hoverId;
         });
-        hoverParent.nodes.splice(hoverIndex + 1, 0, dragNode);
+        var newIndex = dropPosition === EPutPosition.TOP ? hoverIndex : hoverIndex + 1;
+        hoverParent.nodes.splice(newIndex, 0, dragNode);
 
-        // 直接更新状态
+        // 更新状态
         changeInnerValue(newRootNode);
       }
     }

package/dist/LogicTree/style/LoginItem.less

@@ -13,24 +13,45 @@
   flex-direction: column;
   padding-left: calc(@recordLineWidth + @selectWidth / 2 + @dragIConWidth);
   position: relative;
-  cursor: pointer;
   border-radius: 6px;
   margin-left: -16px;
+  z-index: 10;
 
-  &.is-hover {
+  &:hover {
+    .ald-logic-tree-node-drag-icon,
+    .ald-logic-tree-record-node-drag-icon {
+      background: #fff !important;
+    }
+  }
+
+  &.is-hover-drag-box {
     background: rgba(244, 244, 245);
-    transition: background-color 0.3s ease-in-out;
+
+    .ald-logic-tree-node-drag-icon,
+    .ald-logic-tree-record-node-drag-icon {
+      background: rgba(244, 244, 245) !important;
+    }
   }
 
   &.is-dragging {
     background: var(--alias-colors-bg-selected-default, #e8f2fe);
+
+    .ald-logic-tree-node-drag-icon,
+    .ald-logic-tree-record-node-drag-icon {
+      background: var(--alias-colors-bg-selected-default, #e8f2fe) !important;
+    }
   }
 
-  .ald-logic-tree-node-drag-icon {
+  .ald-logic-tree-node-drag-icon-wrapper {
     position: absolute;
-    top: calc(50% + 5px);
+    cursor: pointer;
+    top: 0;
     left: 0;
-    transform: translateY(-50%);
+    height: 100%;
+    z-index: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .ald-logic-tree-node-wrap {
@@ -58,7 +79,7 @@
       border-left: 1px dashed #d1d5db;
       height: calc(50% - 16px);
       width: @recordLineWidth;
-      top: 50%;
+      top: calc(50% - 4px);
       left: calc(@selectWidth / 2 + @dragIConWidth);
     }
   }
@@ -71,7 +92,7 @@
 
   .ald-logic-tree-select-relation {
     position: absolute !important;
-    top: calc(50% - 10px);
+    top: calc(50% - 12px);
     left: 16px;
     z-index: 1;
     width: @selectWidth !important;
@@ -96,16 +117,20 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  cursor: pointer;
   padding-left: 16px;
   margin-left: -16px;
+  position: relative;
+  z-index: 10;
+  border-radius: 6px;
 
-  &.is-hover {
+  &.is-hover-drag-box {
     display: flex;
     align-items: center;
-    border-radius: 6px;
     background: rgba(244, 244, 245);
-    transition: background-color 0.3s ease-in-out;
+
+    .ald-logic-tree-record-node-drag-icon {
+      background: rgba(244, 244, 245) !important;
+    }
   }
 
   &.is-dragging {
@@ -113,13 +138,29 @@
     align-items: center;
     border-radius: 6px;
     background: var(--alias-colors-bg-selected-default, #e8f2fe);
+
+    .ald-logic-tree-record-node-drag-icon {
+      background: var(--alias-colors-bg-selected-default, #e8f2fe) !important;
+    }
   }
 
-  .ald-logic-tree-record-node-drag-icon {
+  .ald-logic-tree-record-node-drag-icon-wrapper {
     position: absolute;
+    cursor: pointer;
     top: calc(50%);
     left: 0;
     transform: translateY(-50%);
+    height: 100%;
+    width: 16px;
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+
+    .ald-logic-tree-record-node-drag-icon {
+      background-color: #fff;
+    }
   }
 
   .ald-logic-tree-render-condition-wrap {
@@ -136,8 +177,8 @@
   padding-bottom: 4px;
 }
 
-.ald-logic-tree-logic-node.is-over:last-child::after,
-.ald-logic-tree-record-node.is-over:last-child::after {
+.ald-logic-tree-logic-node.is-hover-bottom:last-child::after,
+.ald-logic-tree-record-node.is-hover-bottom:last-child::after {
   content: '';
   position: absolute;
   bottom: -1px;
@@ -146,3 +187,18 @@
   height: 2px;
   background-color: #126fdd;
 }
+
+.ald-logic-tree-logic-node.is-hover-top:last-child::after,
+.ald-logic-tree-record-node.is-hover-top:last-child::after {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: 16px;
+  width: calc(100% - 16px);
+  height: 2px;
+  background-color: #126fdd;
+}
+
+.ald-logic-tree-node-drag-icon-preview {
+  display: none;
+}