mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-05-19 16:13:19 +00:00
564 lines
15 KiB
TypeScript
564 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useRef, useState } from "react";
|
|
import { GRAPH_SETTINGS } from "../constants";
|
|
import type { GraphNode } from "../types";
|
|
|
|
export function useGraphInteractions(
|
|
variant: "console" | "consumer" = "console",
|
|
) {
|
|
const settings = GRAPH_SETTINGS[variant];
|
|
|
|
const [panX, setPanX] = useState(settings.initialPanX);
|
|
const [panY, setPanY] = useState(settings.initialPanY);
|
|
const [zoom, setZoom] = useState(settings.initialZoom);
|
|
const [isPanning, setIsPanning] = useState(false);
|
|
const [panStart, setPanStart] = useState({ x: 0, y: 0 });
|
|
const [hoveredNode, setHoveredNode] = useState<string | null>(null);
|
|
const [selectedNode, setSelectedNode] = useState<string | null>(null);
|
|
const [draggingNodeId, setDraggingNodeId] = useState<string | null>(null);
|
|
const [dragStart, setDragStart] = useState({
|
|
x: 0,
|
|
y: 0,
|
|
nodeX: 0,
|
|
nodeY: 0,
|
|
});
|
|
const [nodePositions, setNodePositions] = useState<
|
|
Map<string, { x: number; y: number }>
|
|
>(new Map());
|
|
|
|
// Touch gesture state
|
|
const [touchState, setTouchState] = useState<{
|
|
touches: { id: number; x: number; y: number }[];
|
|
lastDistance: number;
|
|
lastCenter: { x: number; y: number };
|
|
isGesturing: boolean;
|
|
}>({
|
|
touches: [],
|
|
lastDistance: 0,
|
|
lastCenter: { x: 0, y: 0 },
|
|
isGesturing: false,
|
|
});
|
|
|
|
// Animation state for smooth transitions
|
|
const animationRef = useRef<number | null>(null);
|
|
const [isAnimating, setIsAnimating] = useState(false);
|
|
|
|
// Smooth animation helper
|
|
const animateToViewState = useCallback(
|
|
(
|
|
targetPanX: number,
|
|
targetPanY: number,
|
|
targetZoom: number,
|
|
duration = 300,
|
|
) => {
|
|
if (animationRef.current) {
|
|
cancelAnimationFrame(animationRef.current);
|
|
}
|
|
|
|
const startPanX = panX;
|
|
const startPanY = panY;
|
|
const startZoom = zoom;
|
|
const startTime = Date.now();
|
|
|
|
setIsAnimating(true);
|
|
|
|
const animate = () => {
|
|
const elapsed = Date.now() - startTime;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
|
|
// Ease out cubic function for smooth transitions
|
|
const easeOut = 1 - (1 - progress) ** 3;
|
|
|
|
const currentPanX = startPanX + (targetPanX - startPanX) * easeOut;
|
|
const currentPanY = startPanY + (targetPanY - startPanY) * easeOut;
|
|
const currentZoom = startZoom + (targetZoom - startZoom) * easeOut;
|
|
|
|
setPanX(currentPanX);
|
|
setPanY(currentPanY);
|
|
setZoom(currentZoom);
|
|
|
|
if (progress < 1) {
|
|
animationRef.current = requestAnimationFrame(animate);
|
|
} else {
|
|
setIsAnimating(false);
|
|
animationRef.current = null;
|
|
}
|
|
};
|
|
|
|
animate();
|
|
},
|
|
[panX, panY, zoom],
|
|
);
|
|
|
|
// Node drag handlers
|
|
const handleNodeDragStart = useCallback(
|
|
(nodeId: string, e: React.MouseEvent, nodes?: GraphNode[]) => {
|
|
const node = nodes?.find((n) => n.id === nodeId);
|
|
if (!node) return;
|
|
|
|
setDraggingNodeId(nodeId);
|
|
setDragStart({
|
|
x: e.clientX,
|
|
y: e.clientY,
|
|
nodeX: node.x,
|
|
nodeY: node.y,
|
|
});
|
|
},
|
|
[],
|
|
);
|
|
|
|
const handleNodeDragMove = useCallback(
|
|
(e: React.MouseEvent) => {
|
|
if (!draggingNodeId) return;
|
|
|
|
const deltaX = (e.clientX - dragStart.x) / zoom;
|
|
const deltaY = (e.clientY - dragStart.y) / zoom;
|
|
|
|
const newX = dragStart.nodeX + deltaX;
|
|
const newY = dragStart.nodeY + deltaY;
|
|
|
|
setNodePositions((prev) =>
|
|
new Map(prev).set(draggingNodeId, { x: newX, y: newY }),
|
|
);
|
|
},
|
|
[draggingNodeId, dragStart, zoom],
|
|
);
|
|
|
|
const handleNodeDragEnd = useCallback(() => {
|
|
setDraggingNodeId(null);
|
|
}, []);
|
|
|
|
// Pan handlers
|
|
const handlePanStart = useCallback(
|
|
(e: React.MouseEvent) => {
|
|
setIsPanning(true);
|
|
setPanStart({ x: e.clientX - panX, y: e.clientY - panY });
|
|
},
|
|
[panX, panY],
|
|
);
|
|
|
|
const handlePanMove = useCallback(
|
|
(e: React.MouseEvent) => {
|
|
if (!isPanning || draggingNodeId) return;
|
|
|
|
const newPanX = e.clientX - panStart.x;
|
|
const newPanY = e.clientY - panStart.y;
|
|
setPanX(newPanX);
|
|
setPanY(newPanY);
|
|
},
|
|
[isPanning, panStart, draggingNodeId],
|
|
);
|
|
|
|
const handlePanEnd = useCallback(() => {
|
|
setIsPanning(false);
|
|
}, []);
|
|
|
|
// Zoom handlers
|
|
const handleWheel = useCallback(
|
|
(e: React.WheelEvent) => {
|
|
// Always prevent default to stop browser navigation
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
// Handle horizontal scrolling (trackpad swipe) by converting to pan
|
|
if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
|
|
// Horizontal scroll - pan the graph instead of zooming
|
|
const panDelta = e.deltaX * 0.5;
|
|
setPanX((prev) => prev - panDelta);
|
|
return;
|
|
}
|
|
|
|
// Vertical scroll - zoom behavior
|
|
const delta = e.deltaY > 0 ? 0.97 : 1.03;
|
|
const newZoom = Math.max(0.05, Math.min(3, zoom * delta));
|
|
|
|
// Get mouse position relative to the viewport
|
|
let mouseX = e.clientX;
|
|
let mouseY = e.clientY;
|
|
|
|
// Try to get the container bounds to make coordinates relative to the graph container
|
|
const target = e.currentTarget;
|
|
if (target && "getBoundingClientRect" in target) {
|
|
const rect = target.getBoundingClientRect();
|
|
mouseX = e.clientX - rect.left;
|
|
mouseY = e.clientY - rect.top;
|
|
}
|
|
|
|
// Calculate the world position of the mouse cursor
|
|
const worldX = (mouseX - panX) / zoom;
|
|
const worldY = (mouseY - panY) / zoom;
|
|
|
|
// Calculate new pan to keep the mouse position stationary
|
|
const newPanX = mouseX - worldX * newZoom;
|
|
const newPanY = mouseY - worldY * newZoom;
|
|
|
|
setZoom(newZoom);
|
|
setPanX(newPanX);
|
|
setPanY(newPanY);
|
|
},
|
|
[zoom, panX, panY],
|
|
);
|
|
|
|
const zoomIn = useCallback(
|
|
(centerX?: number, centerY?: number, animate = true) => {
|
|
const zoomFactor = 1.2;
|
|
const newZoom = Math.min(3, zoom * zoomFactor); // Increased max zoom to 3x
|
|
|
|
if (centerX !== undefined && centerY !== undefined) {
|
|
// Mouse-centered zoom for programmatic zoom in
|
|
const worldX = (centerX - panX) / zoom;
|
|
const worldY = (centerY - panY) / zoom;
|
|
const newPanX = centerX - worldX * newZoom;
|
|
const newPanY = centerY - worldY * newZoom;
|
|
|
|
if (animate && !isAnimating) {
|
|
animateToViewState(newPanX, newPanY, newZoom, 200);
|
|
} else {
|
|
setZoom(newZoom);
|
|
setPanX(newPanX);
|
|
setPanY(newPanY);
|
|
}
|
|
} else {
|
|
if (animate && !isAnimating) {
|
|
animateToViewState(panX, panY, newZoom, 200);
|
|
} else {
|
|
setZoom(newZoom);
|
|
}
|
|
}
|
|
},
|
|
[zoom, panX, panY, isAnimating, animateToViewState],
|
|
);
|
|
|
|
const zoomOut = useCallback(
|
|
(centerX?: number, centerY?: number, animate = true) => {
|
|
const zoomFactor = 0.8;
|
|
const newZoom = Math.max(0.05, zoom * zoomFactor); // Decreased min zoom to 0.05x
|
|
|
|
if (centerX !== undefined && centerY !== undefined) {
|
|
// Mouse-centered zoom for programmatic zoom out
|
|
const worldX = (centerX - panX) / zoom;
|
|
const worldY = (centerY - panY) / zoom;
|
|
const newPanX = centerX - worldX * newZoom;
|
|
const newPanY = centerY - worldY * newZoom;
|
|
|
|
if (animate && !isAnimating) {
|
|
animateToViewState(newPanX, newPanY, newZoom, 200);
|
|
} else {
|
|
setZoom(newZoom);
|
|
setPanX(newPanX);
|
|
setPanY(newPanY);
|
|
}
|
|
} else {
|
|
if (animate && !isAnimating) {
|
|
animateToViewState(panX, panY, newZoom, 200);
|
|
} else {
|
|
setZoom(newZoom);
|
|
}
|
|
}
|
|
},
|
|
[zoom, panX, panY, isAnimating, animateToViewState],
|
|
);
|
|
|
|
const resetView = useCallback(() => {
|
|
setPanX(settings.initialPanX);
|
|
setPanY(settings.initialPanY);
|
|
setZoom(settings.initialZoom);
|
|
setNodePositions(new Map());
|
|
}, [settings]);
|
|
|
|
// Auto-fit graph to viewport
|
|
const autoFitToViewport = useCallback(
|
|
(
|
|
nodes: GraphNode[],
|
|
viewportWidth: number,
|
|
viewportHeight: number,
|
|
options?: { occludedRightPx?: number; animate?: boolean },
|
|
) => {
|
|
if (nodes.length === 0) return;
|
|
|
|
// Find the bounds of all nodes
|
|
let minX = Number.POSITIVE_INFINITY;
|
|
let maxX = Number.NEGATIVE_INFINITY;
|
|
let minY = Number.POSITIVE_INFINITY;
|
|
let maxY = Number.NEGATIVE_INFINITY;
|
|
|
|
nodes.forEach((node) => {
|
|
minX = Math.min(minX, node.x - node.size / 2);
|
|
maxX = Math.max(maxX, node.x + node.size / 2);
|
|
minY = Math.min(minY, node.y - node.size / 2);
|
|
maxY = Math.max(maxY, node.y + node.size / 2);
|
|
});
|
|
|
|
// Calculate the center of the content
|
|
const contentCenterX = (minX + maxX) / 2;
|
|
const contentCenterY = (minY + maxY) / 2;
|
|
|
|
// Calculate the size of the content
|
|
const contentWidth = maxX - minX;
|
|
const contentHeight = maxY - minY;
|
|
|
|
// Add padding (20% on each side)
|
|
const paddingFactor = 1.4;
|
|
const paddedWidth = contentWidth * paddingFactor;
|
|
const paddedHeight = contentHeight * paddingFactor;
|
|
|
|
// Account for occluded area on the right (e.g., chat panel)
|
|
const occludedRightPx = Math.max(0, options?.occludedRightPx ?? 0);
|
|
const availableWidth = Math.max(1, viewportWidth - occludedRightPx);
|
|
|
|
// Calculate the zoom needed to fit the content within available width
|
|
const zoomX = availableWidth / paddedWidth;
|
|
const zoomY = viewportHeight / paddedHeight;
|
|
const newZoom = Math.min(Math.max(0.05, Math.min(zoomX, zoomY)), 3);
|
|
|
|
// Calculate pan to center the content within available area
|
|
const availableCenterX = availableWidth / 2;
|
|
const newPanX = availableCenterX - contentCenterX * newZoom;
|
|
const newPanY = viewportHeight / 2 - contentCenterY * newZoom;
|
|
|
|
// Apply the new view (optional animation)
|
|
if (options?.animate) {
|
|
const steps = 8;
|
|
const durationMs = 160; // snappy
|
|
const intervalMs = Math.max(1, Math.floor(durationMs / steps));
|
|
const startZoom = zoom;
|
|
const startPanX = panX;
|
|
const startPanY = panY;
|
|
let i = 0;
|
|
const ease = (t: number) => 1 - (1 - t) ** 2; // ease-out quad
|
|
const timer = setInterval(() => {
|
|
i++;
|
|
const t = ease(i / steps);
|
|
setZoom(startZoom + (newZoom - startZoom) * t);
|
|
setPanX(startPanX + (newPanX - startPanX) * t);
|
|
setPanY(startPanY + (newPanY - startPanY) * t);
|
|
if (i >= steps) clearInterval(timer);
|
|
}, intervalMs);
|
|
} else {
|
|
setZoom(newZoom);
|
|
setPanX(newPanX);
|
|
setPanY(newPanY);
|
|
}
|
|
},
|
|
[zoom, panX, panY],
|
|
);
|
|
|
|
// Touch gesture handlers for mobile pinch-to-zoom
|
|
const handleTouchStart = useCallback((e: React.TouchEvent) => {
|
|
const touches = Array.from(e.touches).map((touch) => ({
|
|
id: touch.identifier,
|
|
x: touch.clientX,
|
|
y: touch.clientY,
|
|
}));
|
|
|
|
if (touches.length >= 2) {
|
|
// Start gesture with two or more fingers
|
|
const touch1 = touches[0]!;
|
|
const touch2 = touches[1]!;
|
|
|
|
const distance = Math.sqrt(
|
|
(touch2.x - touch1.x) ** 2 + (touch2.y - touch1.y) ** 2,
|
|
);
|
|
|
|
const center = {
|
|
x: (touch1.x + touch2.x) / 2,
|
|
y: (touch1.y + touch2.y) / 2,
|
|
};
|
|
|
|
setTouchState({
|
|
touches,
|
|
lastDistance: distance,
|
|
lastCenter: center,
|
|
isGesturing: true,
|
|
});
|
|
} else {
|
|
setTouchState((prev) => ({ ...prev, touches, isGesturing: false }));
|
|
}
|
|
}, []);
|
|
|
|
const handleTouchMove = useCallback(
|
|
(e: React.TouchEvent) => {
|
|
e.preventDefault();
|
|
|
|
const touches = Array.from(e.touches).map((touch) => ({
|
|
id: touch.identifier,
|
|
x: touch.clientX,
|
|
y: touch.clientY,
|
|
}));
|
|
|
|
if (touches.length >= 2 && touchState.isGesturing) {
|
|
const touch1 = touches[0]!;
|
|
const touch2 = touches[1]!;
|
|
|
|
const distance = Math.sqrt(
|
|
(touch2.x - touch1.x) ** 2 + (touch2.y - touch1.y) ** 2,
|
|
);
|
|
|
|
const center = {
|
|
x: (touch1.x + touch2.x) / 2,
|
|
y: (touch1.y + touch2.y) / 2,
|
|
};
|
|
|
|
// Calculate zoom change based on pinch distance change
|
|
const distanceChange = distance / touchState.lastDistance;
|
|
const newZoom = Math.max(0.05, Math.min(3, zoom * distanceChange));
|
|
|
|
// Get canvas bounds for center calculation
|
|
const canvas = e.currentTarget as HTMLElement;
|
|
const rect = canvas.getBoundingClientRect();
|
|
const centerX = center.x - rect.left;
|
|
const centerY = center.y - rect.top;
|
|
|
|
// Calculate the world position of the pinch center
|
|
const worldX = (centerX - panX) / zoom;
|
|
const worldY = (centerY - panY) / zoom;
|
|
|
|
// Calculate new pan to keep the pinch center stationary
|
|
const newPanX = centerX - worldX * newZoom;
|
|
const newPanY = centerY - worldY * newZoom;
|
|
|
|
// Calculate pan change based on center movement
|
|
const centerDx = center.x - touchState.lastCenter.x;
|
|
const centerDy = center.y - touchState.lastCenter.y;
|
|
|
|
setZoom(newZoom);
|
|
setPanX(newPanX + centerDx);
|
|
setPanY(newPanY + centerDy);
|
|
|
|
setTouchState({
|
|
touches,
|
|
lastDistance: distance,
|
|
lastCenter: center,
|
|
isGesturing: true,
|
|
});
|
|
} else if (touches.length === 1 && !touchState.isGesturing && isPanning) {
|
|
// Single finger pan (only if not in gesture mode)
|
|
const touch = touches[0]!;
|
|
const newPanX = touch.x - panStart.x;
|
|
const newPanY = touch.y - panStart.y;
|
|
setPanX(newPanX);
|
|
setPanY(newPanY);
|
|
}
|
|
},
|
|
[touchState, zoom, panX, panY, isPanning, panStart],
|
|
);
|
|
|
|
const handleTouchEnd = useCallback((e: React.TouchEvent) => {
|
|
const touches = Array.from(e.touches).map((touch) => ({
|
|
id: touch.identifier,
|
|
x: touch.clientX,
|
|
y: touch.clientY,
|
|
}));
|
|
|
|
if (touches.length < 2) {
|
|
setTouchState((prev) => ({ ...prev, touches, isGesturing: false }));
|
|
} else {
|
|
setTouchState((prev) => ({ ...prev, touches }));
|
|
}
|
|
|
|
if (touches.length === 0) {
|
|
setIsPanning(false);
|
|
}
|
|
}, []);
|
|
|
|
// Center viewport on a specific world position (with animation)
|
|
const centerViewportOn = useCallback(
|
|
(
|
|
worldX: number,
|
|
worldY: number,
|
|
viewportWidth: number,
|
|
viewportHeight: number,
|
|
animate = true,
|
|
) => {
|
|
const newPanX = viewportWidth / 2 - worldX * zoom;
|
|
const newPanY = viewportHeight / 2 - worldY * zoom;
|
|
|
|
if (animate && !isAnimating) {
|
|
animateToViewState(newPanX, newPanY, zoom, 400);
|
|
} else {
|
|
setPanX(newPanX);
|
|
setPanY(newPanY);
|
|
}
|
|
},
|
|
[zoom, isAnimating, animateToViewState],
|
|
);
|
|
|
|
// Node interaction handlers
|
|
const handleNodeHover = useCallback((nodeId: string | null) => {
|
|
setHoveredNode(nodeId);
|
|
}, []);
|
|
|
|
const handleNodeClick = useCallback(
|
|
(nodeId: string) => {
|
|
setSelectedNode(selectedNode === nodeId ? null : nodeId);
|
|
},
|
|
[selectedNode],
|
|
);
|
|
|
|
const handleDoubleClick = useCallback(
|
|
(e: React.MouseEvent) => {
|
|
// Calculate new zoom (zoom in by 1.5x)
|
|
const zoomFactor = 1.5;
|
|
const newZoom = Math.min(3, zoom * zoomFactor);
|
|
|
|
// Get mouse position relative to the container
|
|
let mouseX = e.clientX;
|
|
let mouseY = e.clientY;
|
|
|
|
// Try to get the container bounds to make coordinates relative to the graph container
|
|
const target = e.currentTarget;
|
|
if (target && "getBoundingClientRect" in target) {
|
|
const rect = target.getBoundingClientRect();
|
|
mouseX = e.clientX - rect.left;
|
|
mouseY = e.clientY - rect.top;
|
|
}
|
|
|
|
// Calculate the world position of the clicked point
|
|
const worldX = (mouseX - panX) / zoom;
|
|
const worldY = (mouseY - panY) / zoom;
|
|
|
|
// Calculate new pan to keep the clicked point in the same screen position
|
|
const newPanX = mouseX - worldX * newZoom;
|
|
const newPanY = mouseY - worldY * newZoom;
|
|
|
|
setZoom(newZoom);
|
|
setPanX(newPanX);
|
|
setPanY(newPanY);
|
|
},
|
|
[zoom, panX, panY],
|
|
);
|
|
|
|
return {
|
|
// State
|
|
panX,
|
|
panY,
|
|
zoom,
|
|
hoveredNode,
|
|
selectedNode,
|
|
draggingNodeId,
|
|
nodePositions,
|
|
// Handlers
|
|
handlePanStart,
|
|
handlePanMove,
|
|
handlePanEnd,
|
|
handleWheel,
|
|
handleNodeHover,
|
|
handleNodeClick,
|
|
handleNodeDragStart,
|
|
handleNodeDragMove,
|
|
handleNodeDragEnd,
|
|
handleDoubleClick,
|
|
// Touch handlers
|
|
handleTouchStart,
|
|
handleTouchMove,
|
|
handleTouchEnd,
|
|
// Controls
|
|
zoomIn,
|
|
zoomOut,
|
|
resetView,
|
|
autoFitToViewport,
|
|
centerViewportOn,
|
|
setSelectedNode,
|
|
};
|
|
}
|