diagram: select more nodes by drag rectangke

packages/web/src/utility/moveDrag.ts

@@ -1,17 +1,25 @@
 export default function moveDrag(node, dragEvents) {
   if (!dragEvents) return;
-  
+
   const [onStart, onMove, onEnd] = dragEvents;
   let startX = null;
   let startY = null;
 
+  let clientX = null;
+  let clientY = null;
+
   const handleMoveDown = e => {
     if (e.button != 0) return;
+
+    const clientRect = node.getBoundingClientRect();
+    clientX = clientRect.left;
+    clientY = clientRect.top;
+  
     startX = e.clientX;
     startY = e.clientY;
     document.addEventListener('mousemove', handleMoveMove, true);
     document.addEventListener('mouseup', handleMoveEnd, true);
-    onStart();
+    onStart(e.clientX - clientX, e.clientY - clientY);
   };
 
   const handleMoveMove = e => {
@@ -21,7 +29,7 @@ export default function moveDrag(node, dragEvents) {
     const diffY = e.clientY - startY;
     startY = e.clientY;
 
-    onMove(diffX, diffY);
+    onMove(diffX, diffY, e.clientX - clientX, e.clientY - clientY);
   };
   const handleMoveEnd = e => {
     e.preventDefault();
@@ -29,7 +37,7 @@ export default function moveDrag(node, dragEvents) {
     startY = null;
     document.removeEventListener('mousemove', handleMoveMove, true);
     document.removeEventListener('mouseup', handleMoveEnd, true);
-    onEnd();
+    onEnd(e.clientX - clientX, e.clientY - clientY);
   };
 
   node.addEventListener('mousedown', handleMoveDown);