sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 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 // calculate new x-coord for transformation
newNCoordsX = usingNWHandle ? element.x + 2 * width : element.x - 2 * width; newNCoordsX = usingNWHandle ? element.x + 2 * width : element.x - 2 * width;
resizeSingleElement( resizeSingleElement(
element, new Map().set(element.id, element),
true, true,
element, element,
usingNWHandle ? "nw" : "ne", usingNWHandle ? "nw" : "ne",

45
src/element/resizeElements.ts
View File

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