feat: 增强磁贴拖拽能力to #34464969

packages/designer/src/builtin-simulator/host.ts

@@ -545,71 +545,20 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
         if (!node) {
           return;
         }
-        const isRGLNode = node?.getParent()?.isRGLContainer;
         const rglNode = node?.getParent();
+        const isRGLNode = rglNode?.isRGLContainer;
         if (isRGLNode) {
           // 如果拖拽的是磁铁块的右下角handle，则直接跳过
           if (downEvent.target.classList.contains('react-resizable-handle')) return;
+          // 禁止多选
           isMulti = false;
           designer.dragon.emitter.emit('rgl.switch', {
             action: 'start',
             rglNode,
           });
-          const judgeEnterOtherRGL = (e: MouseEvent) => {
-            const _nodeInst = this.getNodeInstanceFromElement(e.target as Element);
-            const _node = _nodeInst?.node;
-            if (!_node) return { status: false };
-            const { isRGL: _isRGL, rglNode: _rglNode } = _node.getRGL();
-            const status = !!(
-              _isRGL &&
-              _rglNode?.id !== rglNode?.id &&
-              _rglNode?.getParent() !== node &&
-              _node !== nodeInst?.node
-            );
-            return { status, rglNode: _rglNode };
-          };
-          const move = (e: MouseEvent) => {
-            if (!isShaken(downEvent, e)) {
-              if (nodeInst.instance && nodeInst.instance.style) {
-                nodeInst.instance.style.pointerEvents = 'none';
-              }
-            }
-            const { status, rglNode: _rglNode } = judgeEnterOtherRGL(e);
-            if (status) {
-              designer.dragon.emitter.emit('rgl.add.placeholder', {
-                rglNode: _rglNode,
-                node,
-                event: e,
-                fromRglNode: rglNode,
-              });
-            } else {
-              designer.dragon.emitter.emit('rgl.remove.placeholder');
-            }
-          };
-          const over = (e: MouseEvent) => {
-            const { status, rglNode: _rglNode } = judgeEnterOtherRGL(e);
-            if (status) {
-              designer.dragon.emitter.emit('rgl.drop', {
-                rglNode: _rglNode,
-                node,
-                fromRglNode: rglNode,
-              });
-            }
-            designer.dragon.emitter.emit('rgl.remove.placeholder');
-            if (nodeInst.instance && nodeInst.instance.style) {
-              nodeInst.instance.style.pointerEvents = '';
-            }
-            designer.dragon.emitter.emit('rgl.switch', {
-              action: 'end',
-              rglNode,
-            });
-            doc.removeEventListener('mouseup', over, true);
-            doc.removeEventListener('mousemove', move, true);
-          };
-          doc.addEventListener('mouseup', over, true);
-          doc.addEventListener('mousemove', move, true);
         } else {
           // stop response document focus event
+          // 禁止原生拖拽
           downEvent.stopPropagation();
           downEvent.preventDefault();
         }
@@ -620,6 +569,11 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
         const isLeftButton = downEvent.which === 1 || downEvent.button === 0;
         const checkSelect = (e: MouseEvent) => {
           doc.removeEventListener('mouseup', checkSelect, true);
+          // 取消移动;
+          designer.dragon.emitter.emit('rgl.switch', {
+            action: 'end',
+            rglNode,
+          });
           // 鼠标是否移动 ? - 鼠标抖动应该也需要支持选中事件，偶尔点击不能选中，磁帖块移除shaken检测
           if (!isShaken(downEvent, e) || isRGLNode) {
             let { id } = node;
@@ -665,16 +619,14 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
           } else {
             // will clear current selection & select dragment in dragstart
           }
-          if (!isRGLNode) {
+          designer.dragon.boost(
-            designer.dragon.boost(
+            {
-              {
+              type: DragObjectType.Node,
-                type: DragObjectType.Node,
+              nodes,
-                nodes,
+            },
-              },
+            downEvent,
-              downEvent,
+            isRGLNode ? rglNode : undefined,
-              true,
+          );
-            );
-          }
           if (ignoreUpSelected) {
             // multi select mode has add selected, should return
             return;

packages/designer/src/designer/dragon.ts

@@ -247,7 +247,7 @@ export class Dragon {
    * @param dragObject 拖拽对象
    * @param boostEvent 拖拽初始时事件
    */
-  boost(dragObject: DragObject, boostEvent: MouseEvent | DragEvent, isFromRGLNode?: boolean) {
+  boost(dragObject: DragObject, boostEvent: MouseEvent | DragEvent, fromRglNode?: Node) {
     const { designer } = this;
     const masterSensors = this.getMasterSensors();
     const handleEvents = makeEventsHandler(boostEvent, masterSensors);
@@ -318,14 +318,31 @@ export class Dragon {
         return;
       }
       lastArrive = e;
+
+      const { isRGL, rglNode } = getRGL(e);
       const locateEvent = createLocateEvent(e);
       const sensor = chooseSensor(locateEvent);
-      const { isRGL, rglNode } = getRGL(e);
+
       if (isRGL) {
+        // 禁止被拖拽元素的阻断
+        const nodeInst = dragObject.nodes[0].getDOMNode();
+        if (nodeInst && nodeInst.style) {
+          this.nodeInstPointerEvents = true;
+          nodeInst.style.pointerEvents = 'none';
+        }
+        // 原生拖拽
+        this.emitter.emit('rgl.sleeping', false);
+        if (fromRglNode && fromRglNode.id === rglNode.id) {
+          designer.clearLocation();
+          this.clearState();
+          this.emitter.emit('drag', locateEvent);
+          return;
+        }
         this._canDrop = !!sensor?.locate(locateEvent);
         if (this._canDrop) {
           this.emitter.emit('rgl.add.placeholder', {
             rglNode,
+            fromRglNode,
             node: locateEvent.dragObject.nodes[0],
             event: e,
           });
@@ -337,6 +354,7 @@ export class Dragon {
       } else {
         this._canDrop = false;
         this.emitter.emit('rgl.remove.placeholder');
+        this.emitter.emit('rgl.sleeping', true);
       }
       if (sensor) {
         sensor.fixEvent(locateEvent);
@@ -397,6 +415,15 @@ export class Dragon {
 
     // end-tail drag process
     const over = (e?: any) => {
+      // 禁止被拖拽元素的阻断
+      if (this.nodeInstPointerEvents) {
+        const nodeInst = dragObject.nodes[0].getDOMNode();
+        if (nodeInst && nodeInst.style) {
+          nodeInst.style.pointerEvents = '';
+        }
+        this.nodeInstPointerEvents = false;
+      }
+
       // 发送drop事件
       if (e) {
         const { isRGL, rglNode } = getRGL(e);
@@ -414,6 +441,9 @@ export class Dragon {
         }
       }
 
+      // 移除磁帖占位消息
+      this.emitter.emit('rgl.remove.placeholder');
+
       /* istanbul ignore next */
       if (e && isDragEvent(e)) {
         e.preventDefault();