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: add special cases for flipping text & images

Browse source
This commit is contained in:
Alex Kim 2022-12-20 16:43:44 +03:00
parent 0949e060b5
commit 69e30b372b
No known key found for this signature in database
GPG key ID: CEE74CFA44D238D7
1 changed files with 40 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/element/resizeElements.ts
View file

@ -25,6 +25,7 @@ import {
isArrowElement, isArrowElement,
isBoundToContainer, isBoundToContainer,
isFreeDrawElement, isFreeDrawElement,
isImageElement,
isLinearElement, isLinearElement,
isTextElement, isTextElement,
} from "./typeChecks"; } from "./typeChecks";
@ -666,27 +667,24 @@ export const resizeMultipleElements = (
const isFlippedByX = flipFactorX < 0; const isFlippedByX = flipFactorX < 0;
const isFlippedByY = flipFactorY < 0; const isFlippedByY = flipFactorY < 0;
targetElements.forEach((element) => { targetElements.forEach(({ orig: element, latest: latestElement }) => {
const width = element.orig.width * scale; const width = element.width * scale;
const height = element.orig.height * scale; const height = element.height * scale;
const angle = normalizeAngle( const angle = normalizeAngle(element.angle * flipFactorX * flipFactorY);
(isFlippedByY ? Math.PI - element.orig.angle : element.orig.angle) *
flipFactorX,
);
const hasPoints = const isLinearOrFreeDraw =
isLinearElement(element.orig) || isFreeDrawElement(element.orig); isLinearElement(element) || isFreeDrawElement(element);
const offsetX = element.orig.x - anchorX; const offsetX = element.x - anchorX;
const offsetY = element.orig.y - anchorY; const offsetY = element.y - anchorY;
const flipAdjustX = isFlippedByX && !hasPoints ? width : 0; const flipAdjustX = isFlippedByX && !isLinearOrFreeDraw ? width : 0;
const flipAdjustY = isFlippedByY && !hasPoints ? height : 0; const flipAdjustY = isFlippedByY && !isLinearOrFreeDraw ? height : 0;
const x = anchorX + flipFactorX * (offsetX * scale + flipAdjustX); const x = anchorX + flipFactorX * (offsetX * scale + flipAdjustX);
const y = anchorY + flipFactorY * (offsetY * scale + flipAdjustY); const y = anchorY + flipFactorY * (offsetY * scale + flipAdjustY);
// TODO curved lines adjustment // TODO curved lines adjustment
// readjust points for linear & free draw elements // readjust points for linear & free draw elements
const rescaledPoints = rescalePointsInElement( const rescaledPoints = rescalePointsInElement(
element.orig, element,
width * flipFactorX, width * flipFactorX,
height * flipFactorY, height * flipFactorY,
false, false,
@ -701,6 +699,7 @@ export const resizeMultipleElements = (
points?: Point[]; points?: Point[];
fontSize?: number; fontSize?: number;
baseline?: number; baseline?: number;
scale?: [-1 | 1, -1 | 1];
} = { } = {
width, width,
height, height,
@ -710,18 +709,38 @@ export const resizeMultipleElements = (
...rescaledPoints, ...rescaledPoints,
}; };
// don't flip text vertically
// flip a single image horizontally & vertically (angle & content)
// flip images in a multiple selection - only horizontally (angle)
// currently linear & free draw elements are not rotated
if (
isFlippedByY &&
!isTextElement(element) &&
!(isImageElement(element) && targetElements.length > 1) &&
!isLinearOrFreeDraw
) {
update.angle = normalizeAngle(Math.PI + angle);
}
if (isImageElement(element) && targetElements.length === 1) {
update.scale = [
(element.scale[0] * flipFactorX * flipFactorY) as -1 | 1,
1,
];
}
let boundTextUpdates: { let boundTextUpdates: {
angle: number; angle: number;
fontSize: number; fontSize: number;
baseline: number; baseline: number;
} | null = null; } | null = null;
const boundTextElement = getBoundTextElement(element.latest); const boundTextElement = getBoundTextElement(element);
if (boundTextElement || isTextElement(element.orig)) { if (boundTextElement || isTextElement(element)) {
const optionalPadding = getBoundTextElementOffset(boundTextElement) * 2; const optionalPadding = getBoundTextElementOffset(boundTextElement) * 2;
const textMeasurements = measureFontSizeFromWH( const textMeasurements = measureFontSizeFromWH(
boundTextElement ?? (element.orig as ExcalidrawTextElement), boundTextElement ?? (element as ExcalidrawTextElement),
width - optionalPadding, width - optionalPadding,
height - optionalPadding, height - optionalPadding,
); );
@ -730,7 +749,7 @@ export const resizeMultipleElements = (
return; return;
} }
if (isTextElement(element.orig)) { if (isTextElement(element)) {
update.fontSize = textMeasurements.size; update.fontSize = textMeasurements.size;
update.baseline = textMeasurements.baseline; update.baseline = textMeasurements.baseline;
} }
@ -744,14 +763,13 @@ export const resizeMultipleElements = (
} }
} }
updateBoundElements(element.latest, { newSize: { width, height } }); updateBoundElements(latestElement, { newSize: { width, height } });
mutateElement(element.latest, update); mutateElement(latestElement, update);
if (boundTextElement && boundTextUpdates) { if (boundTextElement && boundTextUpdates) {
mutateElement(boundTextElement, boundTextUpdates); mutateElement(boundTextElement, boundTextUpdates);
handleBindTextResize(latestElement, transformHandleType);
handleBindTextResize(element.latest, transformHandleType);
} }
}); });
}; };