Function RectangleShapes

components/CanvasShapeRenderers.tsx:40–72

({
  rectangles,
  isPointerTool,
  onSelect,
  onDragEnd,
  onTransformEnd,
  registerRef,
  selectedShapeId,
}: RectangleShapesProps)

}

export const RectangleShapes = ({
  rectangles,
  isPointerTool,
  onSelect,
  onDragEnd,
  onTransformEnd,
  registerRef,
  selectedShapeId,
}: RectangleShapesProps) => (
  <>
    {rectangles.map((rect) => (
      <Rect
        key={rect.id}
        ref={(node) => registerRef(rect.id, node)}
        {...rect}
        stroke={selectedShapeId === rect.id ? "#1d4ed8" : rect.stroke}
        draggable={isPointerTool}
        onMouseDown={(e) => {
          if (!isPointerTool) return;
          e.cancelBubble = true;
          onSelect(rect.id, "rectangle");
        }}
        onTouchStart={(e) => {
          if (!isPointerTool) return;
          e.cancelBubble = true;
          onSelect(rect.id, "rectangle");
        }}
        onTransformEnd={(e) => onTransformEnd(rect.id, e)}
        onDragEnd={(e) => onDragEnd(rect.id, e)}
      />
    ))}
  </>
);

interface EllipseShapesProps {
  ellipses: (EllipseShape & EllipseProperties)[];