Function Controls

src/tools/shape-magic/Controls.jsx:264–873

({
  shapes,
  bridges,
  cornerRadii,
  selectedIds,
  style,
  globalRadius,
  smoothing = 0.6,
  snapToGrid,
  showGrid,
  gridSize,
  presets = [],
  onAddShape,
  onDeleteShapes,
  onDuplicateShapes,
  onStyleChange,
  onGlobalRadiusChange,
  onSmoothingChange,
  onShapeUpdate,
  onAlignShapes,
  onDistributeShapes,
  onApplyPreset,
  onToggleSnap,
  onToggleGrid,
  onGridSizeChange,
  toolSelector,
  disabled = false
})

);

export default function Controls({
  shapes,
  bridges,
  cornerRadii,
  selectedIds,
  style,
  globalRadius,
  smoothing = 0.6,
  snapToGrid,
  showGrid,
  gridSize,
  presets = [],
  onAddShape,
  onDeleteShapes,
  onDuplicateShapes,
  onStyleChange,
  onGlobalRadiusChange,
  onSmoothingChange,
  onShapeUpdate,
  onAlignShapes,
  onDistributeShapes,
  onApplyPreset,
  onToggleSnap,
  onToggleGrid,
  onGridSizeChange,
  toolSelector,
  disabled = false
}) {
  const [copyStatus, setCopyStatus] = useState(null);
  const [shortcutsHovered, setShortcutsHovered] = useState(false);
  const [pngScale, setPngScale] = useState('2');
  const [exportPad, setExportPad] = useState(16);
  const [includeBg, setIncludeBg] = useState(false);

  const selectedShape = shapes.find(s => s.id === selectedIds[0]);
  const hasMultiSelection = selectedIds.length > 1;
  const hasThreeOrMoreSelected = selectedIds.length >= 3;

  const setStyle = useCallback(patch => onStyleChange({ ...style, ...patch }), [onStyleChange, style]);

  const exportOpts = { padding: exportPad, forceBackground: includeBg };

  const flash = key => {
    setCopyStatus(key);
    setTimeout(() => setCopyStatus(null), 2000);
  };

  const handleCopySVG = useCallback(() => {
    navigator.clipboard.writeText(
      generateMergedSVG(shapes, bridges, cornerRadii || {}, style, globalRadius, smoothing, exportOpts)
    );
    flash('svg');
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [shapes, bridges, cornerRadii, globalRadius, style, smoothing, exportPad, includeBg]);

  const handleCopyReact = useCallback(() => {
    navigator.clipboard.writeText(
      generateReactComponent(shapes, bridges, cornerRadii || {}, style, globalRadius, smoothing)