Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | import { type CSSProperties, type ReactNode, useRef } from "react";
import { CanvasComponentView } from "@/components/CanvasComponent/componentView";
import { getComponentMinSize } from "@/components/CanvasComponent/minSizes";
import { renderComponentPreview } from "@/components/CanvasComponent/previewRenderers";
import { useDragInteraction } from "@/hooks/useDragInteraction";
import type { CanvasComponent as CanvasComponentModel } from "@/types/canvas";
interface CanvasComponentProps {
component: CanvasComponentModel;
zoom: number;
isSelected: boolean;
onSelect: (id: string) => void;
onMove: (id: string, nextX: number, nextY: number) => void;
onResize: (
id: string,
updates: Pick<CanvasComponentModel, "x" | "y" | "width" | "height">,
) => void;
onInteractionStart?: (id: string, mode: "move" | "resize") => void;
onInteractionEnd?: (id: string, mode: "move" | "resize") => void;
children?: ReactNode;
}
export function CanvasComponent({
component,
zoom,
isSelected,
onSelect,
onMove,
onResize,
onInteractionStart,
onInteractionEnd,
children,
}: CanvasComponentProps) {
const rootRef = useRef<HTMLDivElement | null>(null);
const minSize = getComponentMinSize(component);
const textStyle: CSSProperties = {
color: component.textColor,
fontFamily: component.fontFamily,
fontSize: `${component.fontSize}px`,
};
const { isDragging, isResizing, handleMouseDown, handleMouseMove, handleMouseUp } =
useDragInteraction({
component,
zoom,
onSelect,
onMove,
onResize,
minWidth: minSize.minWidth,
minHeight: minSize.minHeight,
onInteractionStart,
onInteractionEnd,
});
return (
<CanvasComponentView
rootRef={rootRef}
component={component}
isSelected={isSelected}
isDragging={isDragging}
isResizing={isResizing}
preview={renderComponentPreview(component, textStyle)}
onMovePointerDown={(event) => handleMouseDown(event, { mode: "move" })}
onPointerMove={handleMouseMove}
onPointerFinish={handleMouseUp}
onResizeHandlePointerDown={(event, handle) =>
handleMouseDown(event, { mode: "resize", handle })
}
onSelect={onSelect}
>
{children}
</CanvasComponentView>
);
}
|