WIP. xarrows. add demo 2

package.json

@@ -50,6 +50,7 @@
         "react": "^18.2.0",
         "react-day-picker": "^8.10.0",
         "react-dom": "^18.2.0",
+        "react-draggable": "^4.4.6",
         "react-hook-form": "^7.49.2",
         "react-hot-toast": "^2.4.1",
         "react-resizable-panels": "^1.0.7",

src/components/2-main/2-demo/73-demo-xarrow/index.tsx

@@ -1,7 +1,8 @@
-import { useRef } from "react";
-import Xarrow from "react-xarrows";
+import { HTMLAttributes, useRef } from "react";
+import Xarrow, { Xwrapper, useXarrow } from "react-xarrows";
+import Draggable from 'react-draggable';
 
-export function XArrowsDemo() {
+export function XArrowsDemo1() {
     const box1Ref = useRef(null);
     return (
         <div className="relative">
@@ -20,3 +21,30 @@ export function XArrowsDemo() {
         </div>
     );
 }
+
+
+
+const boxStyle = { border: 'grey solid 2px', borderRadius: '10px', padding: '5px' };
+
+const DraggableBox = ({ id }: HTMLAttributes<HTMLDivElement>) => {
+    const updateXarrow = useXarrow();
+    return (
+        <Draggable onDrag={updateXarrow} onStop={updateXarrow}>
+            <div id={id} style={boxStyle}>
+                {id}
+            </div>
+        </Draggable>
+    );
+};
+
+export function XArrowsDemo() {
+    return (
+        <div>
+            <Xwrapper>
+                <DraggableBox id={'elem1'} />
+                <DraggableBox id={'elem2'} />
+                <Xarrow start={'elem1'} end="elem2" />
+            </Xwrapper>
+        </div >
+    );
+}