WIP. xarrows. add demo 2. fix refs

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

@@ -1,49 +1,57 @@
-import { HTMLAttributes, useRef } from "react";
+import { HTMLAttributes, forwardRef, useRef } from "react";
 import Xarrow, { Xwrapper, useXarrow } from "react-xarrows";
 import Draggable from 'react-draggable';
-
-export function XArrowsDemo1() {
-    const box1Ref = useRef(null);
-    return (
-        <div className="relative">
-            <div ref={box1Ref} className="inline-block m-12 p-4 border-muted-foreground border rounded">
-                hey1
-            </div>
-
-            <p id="elem2" className="inline-block m-24 p-4 border-muted-foreground border rounded">
-                hey2
-            </p>
-
-            <Xarrow
-                start={box1Ref}     // can be react ref
-                end="elem2"         // or an id
-            />
-        </div>
-    );
-}
-
-
-
-const boxStyle = { border: 'grey solid 2px', borderRadius: '10px', padding: '5px' };
-
-const DraggableBox = ({ id }: HTMLAttributes<HTMLDivElement>) => {
+import { mergeRefs } from "@/utils/merge-refs";
+
+const boxClasses = "inline-block m-12 p-4 border-muted-foreground border rounded select-none cursor-default";
+
+// function XArrowsDemo1() {
+//     const box1Ref = useRef(null);
+//     return (
+//         <div className="relative">
+//             <div ref={box1Ref} className={boxClasses}>
+//                 hey1
+//             </div>
+//             <p id="elem2" className={boxClasses}>
+//                 hey2
+//             </p>
+//             <Xarrow
+//                 start={box1Ref}     // can be react ref
+//                 end="elem2"         // or an id
+//             />
+//         </div>
+//     );
+// }
+
+const DraggableBox = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ id }: HTMLAttributes<HTMLDivElement>, ref) => {
     const updateXarrow = useXarrow();
+    const boxRef = useRef(null);
     return (
-        <Draggable onDrag={updateXarrow} onStop={updateXarrow}>
-            <div id={id} style={boxStyle}>
+        <Draggable
+            onDrag={updateXarrow}
+            onStop={updateXarrow}
+            nodeRef={boxRef}
+        >
+            <div ref={mergeRefs([ref, boxRef])} className={boxClasses}>
                 {id}
             </div>
         </Draggable>
     );
-};
+}
+);
 
 export function XArrowsDemo() {
+    const box1Ref = useRef(null);
+    const box2Ref = useRef(null);
     return (
         <div>
             <Xwrapper>
-                <DraggableBox id={'elem1'} />
-                <DraggableBox id={'elem2'} />
-                <Xarrow start={'elem1'} end="elem2" />
+                <DraggableBox ref={box1Ref} id={'elem1'} />
+                <DraggableBox ref={box2Ref} id={'elem2'} />
+                <Xarrow
+                    start={box1Ref}
+                    end={box2Ref}
+                />
             </Xwrapper>
         </div >
     );

src/utils/merge-refs.tsx

@@ -0,0 +1,13 @@
+import type { LegacyRef, MutableRefObject, RefCallback } from "react";
+
+export function mergeRefs<T = any>(refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined | null>): RefCallback<T> {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (typeof ref === "function") {
+                ref(value);
+            } else if (ref != null) {
+                (ref as MutableRefObject<T | null>).current = value;
+            }
+        });
+    };
+}

vite.config.ts

@@ -21,6 +21,20 @@ function manualChunks(id: string) { //https://rollupjs.org/configuration-options
     // }
 }
 
+/*
+import { createLogger, defineConfig } from 'vite';
+
+const logger = createLogger();
+const loggerInfo = logger.info;
+
+logger.info = (msg, options) => {
+    if (msg.includes('Could not Fast Refresh')) {
+        return;
+    }
+    loggerInfo(msg, options);
+};
+*/
+
 // https://vitejs.dev/config/
 export default defineConfig({
     base: '',
@@ -32,6 +46,7 @@ export default defineConfig({
             '@': path.resolve(__dirname, './src'),
         },
     },
+    //customLogger: logger,
     build: {
         // chunkSizeWarningLimit: 600,
         target: "esnext",