canvas-mindmap

Canvas Mindmap with Gestures

Interactive pan/zoom canvas using @use-gesture/react and @react-spring/web for smooth mindmap visualization.

When to Use This Skill

• Building canvas-based UIs with pan/zoom
• Implementing mindmap or graph visualizations
• Adding gesture-based interactions
• Laying out hierarchical data with dagre
• Animating node transitions
• Rendering connection lines between nodes

Canvas Architecture

Core Canvas Component

// src/renderer/components/canvas/Canvas.tsx
import { useRef, useMemo, useCallback } from 'react';
import { useGesture } from '@use-gesture/react';
import { useSpring, animated } from '@react-spring/web';
import { useAtom, useAtomValue } from 'jotai';
import { canvasViewStateAtom } from '@/state/ui-atoms';

interface CanvasProps {
  children: React.ReactNode;
  width?: number;
  height?: number;
  minZoom?: number;
  maxZoom?: number;
}

export function Canvas({
  children,
  width = 4000,
  height = 4000,
  minZoom = 0.1,
  maxZoom = 2,
}: CanvasProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [viewState, setViewState] = useAtom(canvasViewStateAtom);

  // Spring animation for smooth transitions
  const [springs, api] = useSpring(() => ({
    x: viewState.x,
    y: viewState.y,
    scale: viewState.zoom,
    config: { tension: 300, friction: 30 },
  }));

  // Clamp zoom value
  const clampZoom = useCallback(
    (zoom: number) => Math.min(maxZoom, Math.max(minZoom, zoom)),
    [minZoom, maxZoom]
  );

  // Gesture binding
  useGesture(
    {
      // Pan gesture
      onDrag: ({ offset: [x, y], memo, first, event }) => {
        // Ignore if dragging a node
        if ((event.target as HTMLElement).closest('[data-draggable]')) {
          return memo;
        }

        if (first) {
          return { startX: viewState.x, startY: viewState.y };
        }

        api.start({ x, y, immediate: true });
        return memo;
      },

      onDragEnd: ({ offset: [x, y] }) => {
        setViewState((prev) => ({ ...prev, x, y }));
      },

      // Pinch zoom (trackpad/touch)
      onPinch: ({ offset: [scale], origin: [ox, oy], memo, first }) => {
        if (first) {
          const rect = containerRef.current?.getBoundingClientRect();
          if (!rect) return;
          
          // Calculate origin relative to canvas
          return {
            originX: ox - rect.left,
            originY: oy - rect.top,
            startZoom: viewState.zoom,
            startX: viewState.x,
            startY: viewState.y,
          };
        }

        const newZoom = clampZoom(scale);
        
        // Zoom towards cursor position
        const zoomRatio = newZoom / memo.startZoom;
        const newX = memo.originX - (memo.originX - memo.startX) * zoomRatio;
        const newY = memo.originY - (memo.originY - memo.startY) * zoomRatio;

        api.start({ scale: newZoom, x: newX, y: newY });
        return memo;
      },

      onPinchEnd: () => {
        const { scale, x, y } = springs;
        setViewState({
          zoom: scale.get(),
          x: x.get(),
          y: y.get(),
        });
      },

      // Scroll wheel zoom
      onWheel: ({ delta: [, dy], event, ctrlKey }) => {
        event.preventDefault();

        // Only zoom with ctrl/cmd or pinch gesture
        if (!ctrlKey) return;

        const rect = containerRef.current?.getBoundingClientRect();
        if (!rect) return;

        const cursorX = event.clientX - rect.left;
        const cursorY = event.clientY - rect.top;

        setViewState((prev) => {
          const zoomDelta = -dy * 0.001;
          const newZoom = clampZoom(prev.zoom + prev.zoom * zoomDelta);
          const zoomRatio = newZoom / prev.zoom;

          return {
            zoom: newZoom,
            x: cursorX - (cursorX - prev.x) * zoomRatio,
            y: cursorY - (cursorY - prev.y) * zoomRatio,
          };
        });
      },
    },
    {
      target: containerRef,
      drag: {
        from: () => [springs.x.get(), springs.y.get()],
        filterTaps: true,
      },
      pinch: {
        scaleBounds: { min: minZoom, max: maxZoom },
        from: () => [springs.scale.get(), 0],
      },
      wheel: {
        preventDefault: true,
        eventOptions: { passive: false },
      },
    }
  );

  return (
    <div
      ref={containerRef}
      className="relative w-full h-full overflow-hidden touch-none"
      style={{ cursor: 'grab' }}
    >
      <animated.div
        style={{
          transform: springs.x.to(
            (x) =>
              `translate3d(${x}px, ${springs.y.get()}px, 0) scale(${springs.scale.get()})`
          ),
          transformOrigin: '0 0',
          width,
          height,
        }}
      >
        {children}
      </animated.div>
    </div>
  );
}