smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-04-14 16:40:58 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor resizeElement with some renaming and comments

Browse source
This commit is contained in:
Ryan Di 2023-05-22 15:22:51 +08:00
parent 34d92fa852
commit 4752e2aeac
1 changed files with 45 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
src/element/resizeElements.ts
View file

@ -691,33 +691,36 @@ export const resizeMultipleElements = (
nw: [pointerX <= anchorX, pointerY <= anchorY], nw: [pointerX <= anchorX, pointerY <= anchorY],
}; };
// to flip an element: /**
// 1. mirror x,y relative to the anchor over the x/y/both axis (flipFactor) * to flip an element:
// 2. shift by the width/height/both (flipAdjust) or mirror points in case of * 1. determine over which axis is the element being flipped
// linear/free draw element * (could be x, y, or both) indicated by `flipFactorX` & `flipFactorY`
// 3. adjust the angle * 2. shift element's position by the amount of width or height (or both) or
* mirror points in the case of linear & freedraw elemenets
* 3. adjust element angle
*/
const [flipFactorX, flipFactorY] = mapDirectionsToPointerPositions[ const [flipFactorX, flipFactorY] = mapDirectionsToPointerPositions[
direction direction
].map((condition) => (condition ? 1 : -1)); ].map((condition) => (condition ? 1 : -1));
const isFlippedByX = flipFactorX < 0; const isFlippedByX = flipFactorX < 0;
const isFlippedByY = flipFactorY < 0; const isFlippedByY = flipFactorY < 0;
targetElements.forEach(({ orig: element, latest: latestElement }) => { targetElements.forEach(({ orig: origElement, latest: latestElement }) => {
const width = element.width * scale; const width = origElement.width * scale;
const height = element.height * scale; const height = origElement.height * scale;
const angle = normalizeAngle(element.angle * flipFactorX * flipFactorY); const angle = normalizeAngle(origElement.angle * flipFactorX * flipFactorY);
const isLinearOrFreeDraw = const isLinearOrFreeDraw =
isLinearElement(element) || isFreeDrawElement(element); isLinearElement(origElement) || isFreeDrawElement(origElement);
const offsetX = element.x - anchorX; const offsetX = origElement.x - anchorX;
const offsetY = element.y - anchorY; const offsetY = origElement.y - anchorY;
const flipAdjustX = isFlippedByX && !isLinearOrFreeDraw ? width : 0; const shiftX = isFlippedByX && !isLinearOrFreeDraw ? width : 0;
const flipAdjustY = isFlippedByY && !isLinearOrFreeDraw ? height : 0; const shiftY = isFlippedByY && !isLinearOrFreeDraw ? height : 0;
const x = anchorX + flipFactorX * (offsetX * scale + flipAdjustX); const x = anchorX + flipFactorX * (offsetX * scale + shiftX);
const y = anchorY + flipFactorY * (offsetY * scale + flipAdjustY); const y = anchorY + flipFactorY * (offsetY * scale + shiftY);
const rescaledPoints = rescalePointsInElement( const rescaledPoints = rescalePointsInElement(
element, origElement,
width * flipFactorX, width * flipFactorX,
height * flipFactorY, height * flipFactorY,
false, false,
@ -742,45 +745,49 @@ export const resizeMultipleElements = (
...rescaledPoints, ...rescaledPoints,
}; };
if (isImageElement(element) && targetElements.length === 1) { if (isImageElement(origElement) && targetElements.length === 1) {
update.scale = [ update.scale = [
element.scale[0] * flipFactorX, origElement.scale[0] * flipFactorX,
element.scale[1] * flipFactorY, origElement.scale[1] * flipFactorY,
]; ];
} }
if (isTextElement(element)) { if (isTextElement(origElement)) {
const metrics = measureFontSizeFromWidth(element, width, height); const metrics = measureFontSizeFromWidth(origElement, width, height);
update.fontSize = metrics?.size ?? element.fontSize; update.fontSize = metrics?.size ?? origElement.fontSize;
update.baseline = metrics?.baseline ?? element.baseline; update.baseline = metrics?.baseline ?? origElement.baseline;
} }
// TODO remove this after solving the issue with changing bounds of linear if (isLinearElement(origElement) && (isFlippedByX || isFlippedByY)) {
// elements with roughness > 0 const origBounds = getElementPointsCoords(
if (isLinearElement(element) && (isFlippedByX || isFlippedByY)) { origElement,
const origBounds = getElementPointsCoords(element, element.points); origElement.points,
);
const newBounds = getElementPointsCoords( const newBounds = getElementPointsCoords(
{ ...element, x, y }, { ...origElement, x, y },
rescaledPoints.points!, rescaledPoints.points!,
); );
const origXY = [element.x, element.y]; const origXY = [origElement.x, origElement.y];
const newXY = [x, y]; const newXY = [x, y];
const calculateCorrenction = (axis: "x" | "y") => { const linearShift = (axis: "x" | "y") => {
const i = axis === "x" ? 0 : 1; const i = axis === "x" ? 0 : 1;
const delta1 = return (
newBounds[i + 2] - newXY[i] - (origXY[i] - origBounds[i]) * scale; (newBounds[i + 2] -
const delta2 = newXY[i] -
(origBounds[i + 2] - origXY[i]) * scale - (newXY[i] - newBounds[i]); (origXY[i] - origBounds[i]) * scale +
return (delta1 + delta2) / 2; (origBounds[i + 2] - origXY[i]) * scale -
(newXY[i] - newBounds[i])) /
2
);
}; };
if (isFlippedByX) { if (isFlippedByX) {
update.x -= calculateCorrenction("x"); update.x -= linearShift("x");
} }
if (isFlippedByY) { if (isFlippedByY) {
update.y -= calculateCorrenction("y"); update.y -= linearShift("y");
} }
} }