141 lines
4.3 KiB
TypeScript
141 lines
4.3 KiB
TypeScript
import type { UIElement } from "../../../../types/exportedTypes";
|
|
|
|
export const handleElementDragStart = (
|
|
elementId: string,
|
|
event: React.MouseEvent,
|
|
currentElement: UIElement | undefined,
|
|
setDraggingElement: (elementId: string | null) => void,
|
|
setElementDragOffset: (offset: Position) => void
|
|
): void => {
|
|
if (currentElement?.positionType === "absolute") {
|
|
setDraggingElement(elementId);
|
|
|
|
// Calculate offset relative to the element's current position
|
|
const element = event.currentTarget as HTMLElement;
|
|
const elementRect = element.getBoundingClientRect();
|
|
|
|
setElementDragOffset({
|
|
x: event.clientX - elementRect.left,
|
|
y: event.clientY - elementRect.top,
|
|
});
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation(); // Prevent event from bubbling to block
|
|
}
|
|
};
|
|
|
|
export const handleBlockDragStart = (
|
|
blockId: string,
|
|
event: React.MouseEvent,
|
|
setDraggingBlock: (blockId: string | null) => void,
|
|
setBlockDragOffset: (offset: Position) => void // Change to specific offset
|
|
): void => {
|
|
setDraggingBlock(blockId);
|
|
const element = event.currentTarget as HTMLElement;
|
|
const rect = element.getBoundingClientRect();
|
|
setBlockDragOffset({
|
|
x: event.clientX - rect.left,
|
|
y: event.clientY - rect.top,
|
|
});
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
};
|
|
|
|
export const handleElementResizeStart = (
|
|
elementId: string,
|
|
event: React.MouseEvent,
|
|
setResizingElement: (elementId: string | null) => void,
|
|
setResizeStart: (start: { x: number; y: number; width: number; height: number } | null) => void
|
|
): void => {
|
|
event.stopPropagation();
|
|
setResizingElement(elementId);
|
|
const element = event.currentTarget.closest("[data-element-id]") as HTMLElement;
|
|
if (element) {
|
|
const rect = element.getBoundingClientRect();
|
|
setResizeStart({
|
|
x: event.clientX,
|
|
y: event.clientY,
|
|
width: rect.width,
|
|
height: rect.height,
|
|
});
|
|
}
|
|
};
|
|
|
|
export const handleBlockResizeStart = (
|
|
blockId: string,
|
|
event: React.MouseEvent,
|
|
setResizingBlock: (blockId: string | null) => void,
|
|
setResizeStart: (start: { x: number; y: number; width: number; height: number } | null) => void
|
|
): void => {
|
|
event.stopPropagation();
|
|
setResizingBlock(blockId);
|
|
const block = event.currentTarget.closest("[data-block-id]") as HTMLElement;
|
|
if (block) {
|
|
const rect = block.getBoundingClientRect();
|
|
setResizeStart({
|
|
x: event.clientX,
|
|
y: event.clientY,
|
|
width: rect.width,
|
|
height: rect.height,
|
|
});
|
|
}
|
|
};
|
|
|
|
export const handleSwapStart = (elementId: string, event: React.MouseEvent, setSwapSource: (source: string | null) => void, setShowSwapUI: (show: boolean) => void): void => {
|
|
event.stopPropagation();
|
|
setSwapSource(elementId);
|
|
setShowSwapUI(true);
|
|
};
|
|
|
|
export const handleSwapTarget = (
|
|
elementId: string,
|
|
event: React.MouseEvent,
|
|
swapSource: string | null,
|
|
selectedBlock: string | null,
|
|
swapElements: (
|
|
blockId: string,
|
|
elementId1: string,
|
|
elementId2: string,
|
|
) => void,
|
|
): void => {
|
|
event.stopPropagation();
|
|
if (swapSource && swapSource !== elementId && selectedBlock) {
|
|
swapElements(selectedBlock, swapSource, elementId);
|
|
}
|
|
};
|
|
|
|
export const handleBlockClick = (
|
|
blockId: string,
|
|
event: React.MouseEvent,
|
|
editMode: boolean,
|
|
setSelectedBlock: (blockId: string | null) => void,
|
|
setSelectedElement: (elementId: string | null) => void,
|
|
setShowSwapUI: (show: boolean) => void
|
|
): void => {
|
|
event.stopPropagation();
|
|
if (editMode) {
|
|
setSelectedBlock(blockId);
|
|
setSelectedElement(null);
|
|
setShowSwapUI(false);
|
|
}
|
|
};
|
|
|
|
export const handleElementClick = (
|
|
blockId: string,
|
|
elementId: string,
|
|
event: React.MouseEvent,
|
|
editMode: boolean,
|
|
setSelectedElement: (elementId: string | null) => void,
|
|
setSelectedBlock: (blockId: string | null) => void,
|
|
setShowSwapUI: (show: boolean) => void,
|
|
setShowElementDropdown: (blockId: string | null) => void
|
|
): void => {
|
|
event.stopPropagation();
|
|
if (editMode) {
|
|
setSelectedElement(elementId);
|
|
setSelectedBlock(blockId);
|
|
setShowSwapUI(false);
|
|
setShowElementDropdown(null);
|
|
}
|
|
};
|