2020-08-08 21:04:15 -07:00
|
|
|
import { SHAPES } from "../shapes";
|
|
|
|
import { updateBoundElements } from "./binding";
|
2020-06-24 00:24:52 +09:00
|
|
|
import { getCommonBounds } from "./bounds";
|
|
|
|
import { mutateElement } from "./mutateElement";
|
|
|
|
import { getPerfectElementSize } from "./sizeHelpers";
|
2020-08-08 21:04:15 -07:00
|
|
|
import Scene from "../scene/Scene";
|
|
|
|
import { NonDeletedExcalidrawElement } from "./types";
|
2020-09-11 17:22:40 +02:00
|
|
|
import { PointerDownState } from "../components/App";
|
2020-06-24 00:24:52 +09:00
|
|
|
|
|
|
|
export const dragSelectedElements = (
|
2020-09-11 17:22:40 +02:00
|
|
|
pointerDownState: PointerDownState,
|
2020-06-24 00:24:52 +09:00
|
|
|
selectedElements: NonDeletedExcalidrawElement[],
|
|
|
|
pointerX: number,
|
|
|
|
pointerY: number,
|
2020-08-08 21:04:15 -07:00
|
|
|
scene: Scene,
|
2020-09-11 17:22:40 +02:00
|
|
|
lockDirection: boolean = false,
|
|
|
|
distanceX: number = 0,
|
|
|
|
distanceY: number = 0,
|
2020-06-24 00:24:52 +09:00
|
|
|
) => {
|
|
|
|
const [x1, y1] = getCommonBounds(selectedElements);
|
2020-08-08 21:04:15 -07:00
|
|
|
const offset = { x: pointerX - x1, y: pointerY - y1 };
|
2020-06-24 00:24:52 +09:00
|
|
|
selectedElements.forEach((element) => {
|
2020-11-06 22:06:30 +02:00
|
|
|
let x: number;
|
|
|
|
let y: number;
|
2020-09-11 17:22:40 +02:00
|
|
|
if (lockDirection) {
|
|
|
|
const lockX = lockDirection && distanceX < distanceY;
|
|
|
|
const lockY = lockDirection && distanceX > distanceY;
|
|
|
|
const original = pointerDownState.originalElements.get(element.id);
|
|
|
|
x = lockX && original ? original.x : element.x + offset.x;
|
|
|
|
y = lockY && original ? original.y : element.y + offset.y;
|
|
|
|
} else {
|
|
|
|
x = element.x + offset.x;
|
|
|
|
y = element.y + offset.y;
|
|
|
|
}
|
|
|
|
|
2020-06-24 00:24:52 +09:00
|
|
|
mutateElement(element, {
|
2020-09-11 17:22:40 +02:00
|
|
|
x,
|
|
|
|
y,
|
|
|
|
});
|
|
|
|
|
|
|
|
updateBoundElements(element, {
|
|
|
|
simultaneouslyUpdated: selectedElements,
|
2020-06-24 00:24:52 +09:00
|
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
export const getDragOffsetXY = (
|
|
|
|
selectedElements: NonDeletedExcalidrawElement[],
|
|
|
|
x: number,
|
|
|
|
y: number,
|
|
|
|
): [number, number] => {
|
|
|
|
const [x1, y1] = getCommonBounds(selectedElements);
|
|
|
|
return [x - x1, y - y1];
|
|
|
|
};
|
|
|
|
|
|
|
|
export const dragNewElement = (
|
|
|
|
draggingElement: NonDeletedExcalidrawElement,
|
|
|
|
elementType: typeof SHAPES[number]["value"],
|
|
|
|
originX: number,
|
|
|
|
originY: number,
|
|
|
|
x: number,
|
|
|
|
y: number,
|
|
|
|
width: number,
|
|
|
|
height: number,
|
|
|
|
isResizeWithSidesSameLength: boolean,
|
|
|
|
isResizeCenterPoint: boolean,
|
|
|
|
) => {
|
|
|
|
if (isResizeWithSidesSameLength) {
|
|
|
|
({ width, height } = getPerfectElementSize(
|
|
|
|
elementType,
|
|
|
|
width,
|
|
|
|
y < originY ? -height : height,
|
|
|
|
));
|
|
|
|
|
|
|
|
if (height < 0) {
|
|
|
|
height = -height;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
let newX = x < originX ? originX - width : originX;
|
|
|
|
let newY = y < originY ? originY - height : originY;
|
|
|
|
|
|
|
|
if (isResizeCenterPoint) {
|
|
|
|
width += width;
|
|
|
|
height += height;
|
|
|
|
newX = originX - width / 2;
|
|
|
|
newY = originY - height / 2;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (width !== 0 && height !== 0) {
|
|
|
|
mutateElement(draggingElement, {
|
|
|
|
x: newX,
|
|
|
|
y: newY,
|
|
|
|
width: width,
|
|
|
|
height: height,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
};
|