fix: points not being normalized on single-elem resize (#5581)

This commit is contained in:
David Luzar 2022-08-16 21:51:43 +02:00 committed by GitHub
parent 27cf5ed17e
commit ad0c4c4c78
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 45 additions and 4 deletions

View File

@ -495,6 +495,7 @@ export const getResizedElementAbsoluteCoords = (
element: ExcalidrawElement, element: ExcalidrawElement,
nextWidth: number, nextWidth: number,
nextHeight: number, nextHeight: number,
normalizePoints: boolean,
): [number, number, number, number] => { ): [number, number, number, number] => {
if (!(isLinearElement(element) || isFreeDrawElement(element))) { if (!(isLinearElement(element) || isFreeDrawElement(element))) {
return [ return [
@ -508,7 +509,8 @@ export const getResizedElementAbsoluteCoords = (
const points = rescalePoints( const points = rescalePoints(
0, 0,
nextWidth, nextWidth,
rescalePoints(1, nextHeight, element.points), rescalePoints(1, nextHeight, element.points, normalizePoints),
normalizePoints,
); );
let bounds: [number, number, number, number]; let bounds: [number, number, number, number];

View File

@ -198,6 +198,7 @@ const getAdjustedDimensions = (
element, element,
nextWidth, nextWidth,
nextHeight, nextHeight,
false,
); );
const deltaX1 = (x1 - nextX1) / 2; const deltaX1 = (x1 - nextX1) / 2;
const deltaY1 = (y1 - nextY1) / 2; const deltaY1 = (y1 - nextY1) / 2;

View File

@ -264,13 +264,15 @@ const rescalePointsInElement = (
element: NonDeletedExcalidrawElement, element: NonDeletedExcalidrawElement,
width: number, width: number,
height: number, height: number,
normalizePoints: boolean,
) => ) =>
isLinearElement(element) || isFreeDrawElement(element) isLinearElement(element) || isFreeDrawElement(element)
? { ? {
points: rescalePoints( points: rescalePoints(
0, 0,
width, width,
rescalePoints(1, height, element.points), rescalePoints(1, height, element.points, normalizePoints),
normalizePoints,
), ),
} }
: {}; : {};
@ -374,6 +376,7 @@ const resizeSingleTextElement = (
element, element,
nextWidth, nextWidth,
nextHeight, nextHeight,
false,
); );
const deltaX1 = (x1 - nextX1) / 2; const deltaX1 = (x1 - nextX1) / 2;
const deltaY1 = (y1 - nextY1) / 2; const deltaY1 = (y1 - nextY1) / 2;
@ -415,6 +418,7 @@ export const resizeSingleElement = (
stateAtResizeStart, stateAtResizeStart,
stateAtResizeStart.width, stateAtResizeStart.width,
stateAtResizeStart.height, stateAtResizeStart.height,
true,
); );
const startTopLeft: Point = [x1, y1]; const startTopLeft: Point = [x1, y1];
const startBottomRight: Point = [x2, y2]; const startBottomRight: Point = [x2, y2];
@ -432,6 +436,7 @@ export const resizeSingleElement = (
element, element,
element.width, element.width,
element.height, element.height,
true,
); );
const boundsCurrentWidth = esx2 - esx1; const boundsCurrentWidth = esx2 - esx1;
@ -525,6 +530,7 @@ export const resizeSingleElement = (
stateAtResizeStart, stateAtResizeStart,
eleNewWidth, eleNewWidth,
eleNewHeight, eleNewHeight,
true,
); );
const newBoundsWidth = newBoundsX2 - newBoundsX1; const newBoundsWidth = newBoundsX2 - newBoundsX1;
const newBoundsHeight = newBoundsY2 - newBoundsY1; const newBoundsHeight = newBoundsY2 - newBoundsY1;
@ -595,6 +601,7 @@ export const resizeSingleElement = (
stateAtResizeStart, stateAtResizeStart,
eleNewWidth, eleNewWidth,
eleNewHeight, eleNewHeight,
true,
); );
// For linear elements (x,y) are the coordinates of the first drawn point not the top-left corner // For linear elements (x,y) are the coordinates of the first drawn point not the top-left corner
// So we need to readjust (x,y) to be where the first point should be // So we need to readjust (x,y) to be where the first point should be
@ -725,7 +732,12 @@ const resizeMultipleElements = (
const y = anchorY + (element.orig.y - anchorY) * scale; const y = anchorY + (element.orig.y - anchorY) * scale;
// readjust points for linear & free draw elements // readjust points for linear & free draw elements
const rescaledPoints = rescalePointsInElement(element.orig, width, height); const rescaledPoints = rescalePointsInElement(
element.orig,
width,
height,
false,
);
const update: { const update: {
width: number; width: number;

View File

@ -14,6 +14,7 @@ export const rescalePoints = (
dimension: 0 | 1, dimension: 0 | 1,
newSize: number, newSize: number,
points: readonly Point[], points: readonly Point[],
normalize: boolean,
): Point[] => { ): Point[] => {
const coordinates = points.map((point) => point[dimension]); const coordinates = points.map((point) => point[dimension]);
const maxCoordinate = Math.max(...coordinates); const maxCoordinate = Math.max(...coordinates);
@ -21,10 +22,35 @@ export const rescalePoints = (
const size = maxCoordinate - minCoordinate; const size = maxCoordinate - minCoordinate;
const scale = size === 0 ? 1 : newSize / size; const scale = size === 0 ? 1 : newSize / size;
return points.map((point): Point => { let nextMinCoordinate = Infinity;
const scaledPoints = points.map((point): Point => {
const newCoordinate = point[dimension] * scale; const newCoordinate = point[dimension] * scale;
const newPoint = [...point]; const newPoint = [...point];
newPoint[dimension] = newCoordinate; newPoint[dimension] = newCoordinate;
if (newCoordinate < nextMinCoordinate) {
nextMinCoordinate = newCoordinate;
}
return newPoint as unknown as Point; return newPoint as unknown as Point;
}); });
if (!normalize) {
return scaledPoints;
}
if (scaledPoints.length === 2) {
// we don't translate two-point lines
return scaledPoints;
}
const translation = minCoordinate - nextMinCoordinate;
const nextPoints = scaledPoints.map(
(scaledPoint) =>
scaledPoint.map((value, currentDimension) => {
return currentDimension === dimension ? value + translation : value;
}) as [number, number],
);
return nextPoints;
}; };