Function ShapeMagic

src/tools/shape-magic/ShapeMagic.jsx:41–509

({ toolSelector })

};

export default function ShapeMagic({ toolSelector }) {
  const isMobile = useBreakpointValue({ base: true, lg: false });
  const [mobileControlsOpen, setMobileControlsOpen] = useState(false);
  const canvasRef = useRef(null);

  const initialState = useMemo(() => createInitialState(), []);
  const { current: state, push: pushState, undo, redo } = useHistory(initialState);

  const [shapes, setShapes] = useState(state.shapes);
  const [selectedIds, setSelectedIds] = useState([]);
  const [style, setStyle] = useState(state.style);
  const [globalRadius, setGlobalRadius] = useState(state.globalRadius);
  const [smoothing, setSmoothing] = useState(state.smoothing);
  const [showBridgeDebug, setShowBridgeDebug] = useState(false);
  const [showGrid, setShowGrid] = useState(true);
  const [snapToGrid, setSnapToGrid] = useState(true);
  const [gridSize, setGridSize] = useState(10);

  const justPushedRef = useRef(false);

  const tolerance = 1;

  useEffect(() => {
    if (justPushedRef.current) {
      justPushedRef.current = false;
      return;
    }
    setShapes(state.shapes);
    setStyle(state.style);
    setGlobalRadius(state.globalRadius);
    setSmoothing(state.smoothing);
  }, [state]);

  const bridges = useMemo(() => {
    return computeBridges(shapes, globalRadius, tolerance);
  }, [shapes, globalRadius, tolerance]);

  const cornerRadii = useMemo(() => {
    return computeCornerRadii(shapes, globalRadius, tolerance);
  }, [shapes, globalRadius, tolerance]);

  const saveToHistory = useCallback(
    (newShapes, newStyle, newRadius, newSmoothing) => {
      justPushedRef.current = true;
      pushState({
        shapes: newShapes ?? shapes,
        style: newStyle ?? style,
        globalRadius: newRadius ?? globalRadius,
        smoothing: newSmoothing ?? smoothing
      });
    },
    [pushState, shapes, style, globalRadius, smoothing]
  );

  const handleApplyPreset = useCallback(
    presetId => {
      const preset = PRESETS.find(p => p.id === presetId);
      if (!preset) return;