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

fix grouped bounded text elements not being flipped correctly

Browse source
This commit is contained in:
Ryan Di 2023-05-23 20:30:34 +08:00
parent 4752e2aeac
commit 723180eb1e
1 changed files with 64 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
src/element/resizeElements.ts
View file

@ -705,22 +705,26 @@ export const resizeMultipleElements = (
const isFlippedByX = flipFactorX < 0; const isFlippedByX = flipFactorX < 0;
const isFlippedByY = flipFactorY < 0; const isFlippedByY = flipFactorY < 0;
targetElements.forEach(({ orig: origElement, latest: latestElement }) => { for (const { orig, latest } of targetElements) {
const width = origElement.width * scale; // bounded text elements are updated along with their container elements
const height = origElement.height * scale; if (isTextElement(orig) && isBoundToContainer(orig)) {
const angle = normalizeAngle(origElement.angle * flipFactorX * flipFactorY); continue;
}
const isLinearOrFreeDraw = const width = orig.width * scale;
isLinearElement(origElement) || isFreeDrawElement(origElement); const height = orig.height * scale;
const offsetX = origElement.x - anchorX; const angle = normalizeAngle(orig.angle * flipFactorX * flipFactorY);
const offsetY = origElement.y - anchorY;
const isLinearOrFreeDraw = isLinearElement(orig) || isFreeDrawElement(orig);
const offsetX = orig.x - anchorX;
const offsetY = orig.y - anchorY;
const shiftX = isFlippedByX && !isLinearOrFreeDraw ? width : 0; const shiftX = isFlippedByX && !isLinearOrFreeDraw ? width : 0;
const shiftY = isFlippedByY && !isLinearOrFreeDraw ? height : 0; const shiftY = isFlippedByY && !isLinearOrFreeDraw ? height : 0;
const x = anchorX + flipFactorX * (offsetX * scale + shiftX); const x = anchorX + flipFactorX * (offsetX * scale + shiftX);
const y = anchorY + flipFactorY * (offsetY * scale + shiftY); const y = anchorY + flipFactorY * (offsetY * scale + shiftY);
const rescaledPoints = rescalePointsInElement( const rescaledPoints = rescalePointsInElement(
origElement, orig,
width * flipFactorX, width * flipFactorX,
height * flipFactorY, height * flipFactorY,
false, false,
@ -745,29 +749,17 @@ export const resizeMultipleElements = (
...rescaledPoints, ...rescaledPoints,
}; };
if (isImageElement(origElement) && targetElements.length === 1) { if (isImageElement(orig) && targetElements.length === 1) {
update.scale = [ update.scale = [orig.scale[0] * flipFactorX, orig.scale[1] * flipFactorY];
origElement.scale[0] * flipFactorX,
origElement.scale[1] * flipFactorY,
];
} }
if (isTextElement(origElement)) { if (isLinearElement(orig) && (isFlippedByX || isFlippedByY)) {
const metrics = measureFontSizeFromWidth(origElement, width, height); const origBounds = getElementPointsCoords(orig, orig.points);
update.fontSize = metrics?.size ?? origElement.fontSize;
update.baseline = metrics?.baseline ?? origElement.baseline;
}
if (isLinearElement(origElement) && (isFlippedByX || isFlippedByY)) {
const origBounds = getElementPointsCoords(
origElement,
origElement.points,
);
const newBounds = getElementPointsCoords( const newBounds = getElementPointsCoords(
{ ...origElement, x, y }, { ...orig, x, y },
rescaledPoints.points!, rescaledPoints.points!,
); );
const origXY = [origElement.x, origElement.y]; const origXY = [orig.x, orig.y];
const newXY = [x, y]; const newXY = [x, y];
const linearShift = (axis: "x" | "y") => { const linearShift = (axis: "x" | "y") => {
@ -791,20 +783,58 @@ export const resizeMultipleElements = (
} }
} }
mutateElement(latestElement, update); let boundTextUpdates: { fontSize: number; baseline: number } | null = null;
updateBoundElements(latestElement, {
const boundTextElement = getBoundTextElement(latest);
if (boundTextElement || isTextElement(orig)) {
const updatedElement = {
...latest,
width,
height,
};
const metrics = measureFontSizeFromWidth(
boundTextElement ?? (orig as ExcalidrawTextElement),
boundTextElement
? getBoundTextMaxWidth(updatedElement)
: updatedElement.width,
boundTextElement
? getBoundTextMaxHeight(updatedElement, boundTextElement)
: updatedElement.height,
);
if (!metrics) {
return;
}
if (isTextElement(orig)) {
update.fontSize = metrics.size;
update.baseline = metrics.baseline;
}
if (boundTextElement) {
boundTextUpdates = {
fontSize: metrics.size,
baseline: metrics.baseline,
};
}
}
mutateElement(latest, update);
updateBoundElements(latest, {
simultaneouslyUpdated: targetElements.map(({ latest }) => latest), simultaneouslyUpdated: targetElements.map(({ latest }) => latest),
newSize: { width, height }, newSize: { width, height },
}); });
const boundTextElement = getBoundTextElement(latestElement); if (boundTextElement && boundTextUpdates) {
if (boundTextElement) { if (!isLinearElement(latest)) {
if (!isLinearElement(latestElement)) {
mutateElement(boundTextElement, { angle }); mutateElement(boundTextElement, { angle });
} }
handleBindTextResize(latestElement, transformHandleType); mutateElement(boundTextElement, boundTextUpdates);
handleBindTextResize(latest, transformHandleType);
} }
}); }
}; };
const rotateMultipleElements = ( const rotateMultipleElements = (