@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/src/SyncScroll/SyncScroll.tsx

@@ -0,0 +1,361 @@
+import { Slot } from "@radix-ui/react-slot";
+import React, { type HTMLProps, RefObject, useEffect, useRef, useState } from "react";
+
+import { useScrollSlave, useSyncDrag, useSyncScroll } from "./useSyncScroll";
+import { cn } from "../hooks";
+
+export type SyncScrollProps = HTMLProps<HTMLDivElement> & {
+  asChild?: boolean;
+};
+
+export const SyncScroll = ({ children, className, asChild = false, ...props }: SyncScrollProps) => {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp ref={useSyncScroll()} className={cn("overflow-y-auto", className)} {...props}>
+      {children}
+    </Comp>
+  );
+};
+
+export const SyncScrollSlave = ({
+  children,
+  className,
+  asChild = false,
+  ...props
+}: SyncScrollProps) => {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp ref={useScrollSlave()} className={cn("overflow-y-auto", className)} {...props}>
+      {children}
+    </Comp>
+  );
+};
+
+export const SyncDrag = ({
+  ref: extRef,
+  children,
+  className,
+  asChild = false,
+  ...props
+}: SyncScrollProps) => {
+  const ref = useSyncDrag({ ref: extRef as RefObject<HTMLDivElement>, axis: "both" });
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartX = useRef(0);
+  const dragStartY = useRef(0);
+  const scrollStartLeft = useRef(0);
+  const scrollStartTop = useRef(0);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const handleMouseDown = (e: MouseEvent) => {
+      setIsDragging(true);
+      dragStartX.current = e.clientX;
+      dragStartY.current = e.clientY;
+      scrollStartLeft.current = element.scrollLeft;
+      scrollStartTop.current = element.scrollTop;
+      e.preventDefault();
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging || !element) return;
+      const deltaX = e.clientX - dragStartX.current;
+      const deltaY = e.clientY - dragStartY.current;
+      element.scrollLeft = scrollStartLeft.current - deltaX * 2;
+      element.scrollTop = scrollStartTop.current - deltaY * 2;
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    element.addEventListener("mousedown", handleMouseDown);
+
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("mouseleave", handleMouseUp);
+    }
+
+    return () => {
+      element.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("mouseleave", handleMouseUp);
+    };
+  }, [isDragging, ref]);
+
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("cursor-grab overflow-auto", isDragging && "cursor-grabbing", className)}
+      style={{ userSelect: isDragging ? "none" : "auto", ...props.style }}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+};
+
+export const SyncDragX = ({ children, className, asChild = false, ...props }: SyncScrollProps) => {
+  const ref = useSyncDrag({ axis: "horizontal" });
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartX = useRef(0);
+  const scrollStartLeft = useRef(0);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const handleMouseDown = (e: MouseEvent) => {
+      setIsDragging(true);
+      dragStartX.current = e.clientX;
+      scrollStartLeft.current = element.scrollLeft;
+      e.preventDefault();
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging || !element) return;
+      const deltaX = e.clientX - dragStartX.current;
+      element.scrollLeft = scrollStartLeft.current - deltaX * 2;
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    element.addEventListener("mousedown", handleMouseDown);
+
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("mouseleave", handleMouseUp);
+    }
+
+    return () => {
+      element.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("mouseleave", handleMouseUp);
+    };
+  }, [isDragging, ref]);
+
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("cursor-grab overflow-x-auto", isDragging ? "cursor-grabbing" : "", className)}
+      style={{ userSelect: isDragging ? "none" : "auto", ...props.style }}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+};
+
+export const SyncDragSlave = ({
+  ref: extRef,
+  children,
+  className,
+  asChild = false,
+  ...props
+}: SyncScrollProps) => {
+  const ref = useScrollSlave({ ref: extRef as RefObject<HTMLDivElement>, axis: "both" });
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartX = useRef(0);
+  const dragStartY = useRef(0);
+  const scrollStartLeft = useRef(0);
+  const scrollStartTop = useRef(0);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const handleMouseDown = (e: MouseEvent) => {
+      setIsDragging(true);
+      dragStartX.current = e.clientX;
+      dragStartY.current = e.clientY;
+      scrollStartLeft.current = element.scrollLeft;
+      scrollStartTop.current = element.scrollTop;
+      e.preventDefault();
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging || !element) return;
+      const deltaX = e.clientX - dragStartX.current;
+      const deltaY = e.clientY - dragStartY.current;
+      element.scrollLeft = scrollStartLeft.current - deltaX * 2;
+      element.scrollTop = scrollStartTop.current - deltaY * 2;
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    element.addEventListener("mousedown", handleMouseDown);
+
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("mouseleave", handleMouseUp);
+    }
+
+    return () => {
+      element.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("mouseleave", handleMouseUp);
+    };
+  }, [isDragging, ref]);
+
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("cursor-grab overflow-auto", isDragging && "cursor-grabbing", className)}
+      style={{ userSelect: isDragging ? "none" : "auto", ...props.style }}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+};
+
+export const SyncDragSlaveX = ({
+  ref: extRef,
+  children,
+  className,
+  asChild = false,
+  ...props
+}: SyncScrollProps) => {
+  const ref = useScrollSlave({ ref: extRef as RefObject<HTMLDivElement>, axis: "horizontal" });
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartX = useRef(0);
+  const scrollStartLeft = useRef(0);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const handleMouseDown = (e: MouseEvent) => {
+      setIsDragging(true);
+      dragStartX.current = e.clientX;
+      scrollStartLeft.current = element.scrollLeft;
+      e.preventDefault();
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging || !element) return;
+      const deltaX = e.clientX - dragStartX.current;
+      element.scrollLeft = scrollStartLeft.current - deltaX * 2;
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    element.addEventListener("mousedown", handleMouseDown);
+
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("mouseleave", handleMouseUp);
+    }
+
+    return () => {
+      element.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("mouseleave", handleMouseUp);
+    };
+  }, [isDragging, ref]);
+
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn(
+        "cursor-grab overflow-x-auto overflow-y-hidden",
+        isDragging && "cursor-grabbing",
+        className,
+      )}
+      style={{ userSelect: isDragging ? "none" : "auto", ...props.style }}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+};
+
+export const SyncDragY = ({
+  ref: extRef,
+  children,
+  className,
+  asChild = false,
+  ...props
+}: SyncScrollProps) => {
+  const ref = useSyncDrag({ ref: extRef as RefObject<HTMLDivElement>, axis: "vertical" });
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartY = useRef(0);
+  const scrollStartTop = useRef(0);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const handleMouseDown = (e: MouseEvent) => {
+      setIsDragging(true);
+      dragStartY.current = e.clientY;
+      scrollStartTop.current = element.scrollTop;
+      e.preventDefault();
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging || !element) return;
+      const deltaY = e.clientY - dragStartY.current;
+      element.scrollTop = scrollStartTop.current - deltaY * 2;
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    element.addEventListener("mousedown", handleMouseDown);
+
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("mouseleave", handleMouseUp);
+    }
+
+    return () => {
+      element.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("mouseleave", handleMouseUp);
+    };
+  }, [isDragging, ref]);
+
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn(
+        "cursor-grab overflow-x-hidden overflow-y-auto",
+        isDragging && "cursor-grabbing",
+        className,
+      )}
+      style={{ userSelect: isDragging ? "none" : "auto", ...props.style }}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+};

package/src/SyncScroll/index.ts

@@ -0,0 +1,22 @@
+// Main exports for the SyncScroll module
+export {
+  SyncScrollProvider,
+  // New primary API
+  useSyncScroll,
+  useScrollSlave,
+  useSyncDrag,
+} from "./useSyncScroll";
+
+// Component exports
+export {
+  SyncScroll,
+  SyncScrollSlave,
+  SyncDrag,
+  SyncDragX,
+  SyncDragY,
+  SyncDragSlave,
+  SyncDragSlaveX,
+} from "./SyncScroll";
+
+export type { SyncScrollProps } from "./SyncScroll";
+export type { UseSyncScrollOptions, BaseScrollOptions, ScrollRole } from "./useSyncScroll";

package/src/SyncScroll/useSyncScroll.tsx

@@ -0,0 +1,226 @@
+import React, {
+  createContext,
+  type RefObject,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+} from "react";
+
+type ScrollRole = "master" | "slave" | "drag";
+
+interface ScrollableElement {
+  ref: RefObject<HTMLElement>;
+  role: ScrollRole;
+}
+
+interface SyncScrollContextValue {
+  registerScrollable: (id: string, ref: RefObject<HTMLElement>, role: ScrollRole) => void;
+  unregisterScrollable: (id: string) => void;
+  syncScroll: (sourceId: string, scrollTop: number, scrollLeft: number) => void;
+}
+
+const SyncScrollContext = createContext<SyncScrollContextValue | null>(null);
+
+interface SyncScrollProviderProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Provider component that manages synchronized scrolling between multiple elements.
+ * Supports master-slave relationships where masters can control slaves but not vice versa.
+ */
+export function SyncScrollProvider({ children }: SyncScrollProviderProps) {
+  const scrollablesRef = useRef<Map<string, ScrollableElement>>(new Map());
+  const syncingRef = useRef<Set<string>>(new Set());
+
+  const registerScrollable = useCallback(
+    (id: string, ref: RefObject<HTMLElement>, role: ScrollRole) => {
+      scrollablesRef.current.set(id, { ref, role });
+    },
+    [],
+  );
+
+  const unregisterScrollable = useCallback((id: string) => {
+    scrollablesRef.current.delete(id);
+    syncingRef.current.delete(id);
+  }, []);
+
+  const syncScroll = useCallback((sourceId: string, scrollTop: number, scrollLeft: number) => {
+    // Prevent circular syncing
+    if (syncingRef.current.has(sourceId)) {
+      return;
+    }
+
+    const sourceElement = scrollablesRef.current.get(sourceId);
+    if (!sourceElement) return;
+
+    // Determine which elements should be synced based on source role
+    scrollablesRef.current.forEach((element, id) => {
+      if (id === sourceId) return;
+
+      // Master and drag can sync everyone
+      if (sourceElement.role === "master" || sourceElement.role === "drag") {
+        syncingRef.current.add(id);
+        if (element.ref.current) {
+          element.ref.current.scrollTop = scrollTop;
+          element.ref.current.scrollLeft = scrollLeft;
+        }
+      }
+      // // Slave can only sync other slaves (not masters or drag)
+      // else if (sourceElement.role === "slave" && element.role === "slave") {
+      //   syncingRef.current.add(id);
+      //   if (element.ref.current) {
+      //     element.ref.current.scrollTop = scrollTop;
+      //     element.ref.current.scrollLeft = scrollLeft;
+      //   }
+      // }
+    });
+
+    // Clear syncing flags after a short delay
+    requestAnimationFrame(() => {
+      syncingRef.current.clear();
+    });
+  }, []);
+
+  return (
+    <SyncScrollContext.Provider value={{ registerScrollable, unregisterScrollable, syncScroll }}>
+      {children}
+    </SyncScrollContext.Provider>
+  );
+}
+
+interface BaseScrollOptions {
+  /** Whether to enable scroll syncing (default: true) */
+  enabled?: boolean;
+  /** Axis to sync: 'vertical', 'horizontal', or 'both' (default: 'vertical') */
+  axis?: "vertical" | "horizontal" | "both";
+  /** Optional ref to use instead of creating a new one */
+  ref?: RefObject<HTMLDivElement>;
+}
+
+interface UseSyncScrollOptions extends BaseScrollOptions {
+  /** Unique identifier for this scrollable element */
+  id?: string;
+  /** Role: 'master' (controls others), 'slave' (controlled by master), 'drag' (like master but for drag interactions) */
+  role?: ScrollRole;
+}
+
+/**
+ * Base hook for synchronized scrolling functionality.
+ * Internal use - prefer useScroll, useScrollSlave, or useSyncDrag instead.
+ */
+function useSyncScrollBase({
+  id: providedId,
+  role,
+  enabled = true,
+  axis = "vertical",
+  ref: providedRef,
+}: UseSyncScrollOptions & { role: ScrollRole }) {
+  const context = useContext(SyncScrollContext);
+  const autoId = useId();
+  const id = providedId || autoId;
+  const internalRef = useRef<HTMLDivElement>(null);
+  const elementRef = providedRef || internalRef;
+  const lastScrollTop = useRef(0);
+  const lastScrollLeft = useRef(0);
+
+  if (!context) {
+    throw new Error("Sync scroll hooks must be used within a SyncScrollProvider");
+  }
+
+  const { registerScrollable, unregisterScrollable, syncScroll } = context;
+
+  useEffect(() => {
+    if (!enabled || !elementRef.current) return;
+
+    const element = elementRef.current;
+
+    // Register this element with its role
+    registerScrollable(id, elementRef as RefObject<HTMLElement>, role);
+
+    const handleScroll = (e: Event) => {
+      const target = e.target as HTMLElement;
+      let hasChanged = false;
+
+      if (axis === "vertical" || axis === "both") {
+        if (target.scrollTop !== lastScrollTop.current) {
+          lastScrollTop.current = target.scrollTop;
+          hasChanged = true;
+        }
+      }
+
+      if (axis === "horizontal" || axis === "both") {
+        if (target.scrollLeft !== lastScrollLeft.current) {
+          lastScrollLeft.current = target.scrollLeft;
+          hasChanged = true;
+        }
+      }
+
+      if (hasChanged) {
+        syncScroll(id, lastScrollTop.current, lastScrollLeft.current);
+      }
+    };
+
+    element.addEventListener("scroll", handleScroll, { passive: true });
+
+    return () => {
+      element.removeEventListener("scroll", handleScroll);
+      unregisterScrollable(id);
+    };
+  }, [id, role, enabled, axis, registerScrollable, unregisterScrollable, syncScroll, elementRef]);
+
+  return elementRef;
+}
+
+/**
+ * Hook for a master scroll element that controls all other elements.
+ *
+ * @example
+ * ```tsx
+ * function MasterPanel() {
+ *   const scrollRef = useSyncScroll();
+ *   return <div ref={scrollRef}>...</div>;
+ * }
+ * ```
+ */
+export function useSyncScroll(options: BaseScrollOptions = {}) {
+  return useSyncScrollBase({ ...options, role: "master" });
+}
+
+/**
+ * Hook for a slave scroll element that is controlled by masters.
+ * Slaves can sync with other slaves but cannot control masters.
+ *
+ * @example
+ * ```tsx
+ * function SlavePanel() {
+ *   const scrollRef = useScrollSlave();
+ *   return <div ref={scrollRef}>...</div>;
+ * }
+ * ```
+ */
+export function useScrollSlave(options: BaseScrollOptions = {}) {
+  return useSyncScrollBase({ ...options, role: "slave" });
+}
+
+/**
+ * Hook for drag-controlled scrolling that acts like a master.
+ * Typically used with custom drag handlers.
+ *
+ * @example
+ * ```tsx
+ * function DragPanel() {
+ *   const scrollRef = useSyncDrag();
+ *   // Add custom drag handling logic
+ *   return <div ref={scrollRef}>...</div>;
+ * }
+ * ```
+ */
+export function useSyncDrag(options: BaseScrollOptions = {}) {
+  return useSyncScrollBase({ ...options, role: "drag" });
+}
+
+// Export types
+export type { ScrollRole, UseSyncScrollOptions, BaseScrollOptions };