github.com/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2024-11-10 11:35:52 +01:00
Code Releases Wiki Activity

feat: Scale font size when bound text containers resized with shift pressed (#4828)

Browse Source 
* feat: Scale font size when bound text containers resized with shift pressed

* revert fontsize once shift pressed/released after resize

* make slightly more typesafe

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Aakansha Doshi 2022-02-22 18:45:59 +05:30 committed by GitHub
parent 5cf7087754
commit 1acfaf6b6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/actions/actionFlip.ts
View File

@ -155,7 +155,7 @@ const flipElement = (
// calculate new x-coord for transformation
newNCoordsX = usingNWHandle ? element.x + 2 * width : element.x - 2 * width;
resizeSingleElement(
element,
new Map().set(element.id, element),
true,
element,
usingNWHandle ? "nw" : "ne",

45
src/element/resizeElements.ts
View File

@ -106,7 +106,7 @@ export const transformElements = (
updateBoundElements(element);
} else if (transformHandleType) {
resizeSingleElement(
pointerDownState.originalElements.get(element.id) as typeof element,
pointerDownState.originalElements,
shouldMaintainAspectRatio,
element,
transformHandleType,
@ -397,7 +397,7 @@ const resizeSingleTextElement = (
};
export const resizeSingleElement = (
stateAtResizeStart: NonDeletedExcalidrawElement,
originalElements: PointerDownState["originalElements"],
shouldMaintainAspectRatio: boolean,
element: NonDeletedExcalidrawElement,
transformHandleDirection: TransformHandleDirection,
@ -405,6 +405,7 @@ export const resizeSingleElement = (
pointerX: number,
pointerY: number,
) => {
const stateAtResizeStart = originalElements.get(element.id)!;
// Gets bounds corners
const [x1, y1, x2, y2] = getResizedElementAbsoluteCoords(
stateAtResizeStart,
@ -439,6 +440,9 @@ export const resizeSingleElement = (
let scaleX = atStartBoundsWidth / boundsCurrentWidth;
let scaleY = atStartBoundsHeight / boundsCurrentHeight;
let boundTextFont: { fontSize?: number; baseline?: number } = {};
const boundTextElement = getBoundTextElement(element);
if (transformHandleDirection.includes("e")) {
scaleX = (rotatedPointer[0] - startTopLeft[0]) / boundsCurrentWidth;
}
@ -452,8 +456,6 @@ export const resizeSingleElement = (
scaleY = (startBottomRight[1] - rotatedPointer[1]) / boundsCurrentHeight;
}
const boundTextElement = getBoundTextElement(element);
// Linear elements dimensions differ from bounds dimensions
const eleInitialWidth = stateAtResizeStart.width;
const eleInitialHeight = stateAtResizeStart.height;
@ -484,10 +486,34 @@ export const resizeSingleElement = (
}
if (boundTextElement) {
const minWidth = getApproxMinLineWidth(getFontString(boundTextElement));
const minHeight = getApproxMinLineHeight(getFontString(boundTextElement));
eleNewWidth = Math.ceil(Math.max(eleNewWidth, minWidth));
eleNewHeight = Math.ceil(Math.max(eleNewHeight, minHeight));
const stateOfBoundTextElementAtResize = originalElements.get(
boundTextElement.id,
) as typeof boundTextElement | undefined;
if (stateOfBoundTextElementAtResize) {
boundTextFont = {
fontSize: stateOfBoundTextElementAtResize.fontSize,
baseline: stateOfBoundTextElementAtResize.baseline,
};
}
if (shouldMaintainAspectRatio) {
const nextFont = measureFontSizeFromWH(
boundTextElement,
eleNewWidth - BOUND_TEXT_PADDING * 2,
eleNewHeight - BOUND_TEXT_PADDING * 2,
);
if (nextFont === null) {
return;
}
boundTextFont = {
fontSize: nextFont.size,
baseline: nextFont.baseline,
};
} else {
const minWidth = getApproxMinLineWidth(getFontString(boundTextElement));
const minHeight = getApproxMinLineHeight(getFontString(boundTextElement));
eleNewWidth = Math.ceil(Math.max(eleNewWidth, minWidth));
eleNewHeight = Math.ceil(Math.max(eleNewHeight, minHeight));
}
}
const [newBoundsX1, newBoundsY1, newBoundsX2, newBoundsY2] =
@ -602,6 +628,9 @@ export const resizeSingleElement = (
newSize: { width: resizedElement.width, height: resizedElement.height },
});
mutateElement(element, resizedElement);
if (boundTextElement && boundTextFont) {
mutateElement(boundTextElement, { fontSize: boundTextFont.fontSize });
}
handleBindTextResize(element, transformHandleDirection);
}
};