sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: sceneCoordsToViewportCoords, jumping text when there is an offset (#4413) (#4630)

Browse Source 
Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
Co-authored-by: David Luzar <luzar.david@gmail.com>
Co-authored-by: thxnder <tswwe@qq.com>
This commit is contained in:
zsviczian 2022-01-29 14:27:03 +01:00 committed by GitHub
parent ca89d47d4c
commit e4edda4555
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/element/textWysiwyg.tsx
View File

@ -45,17 +45,15 @@ const getTransform = (
maxWidth: number, maxWidth: number,
maxHeight: number, maxHeight: number,
) => { ) => {
const { zoom, offsetTop, offsetLeft } = appState; const { zoom } = appState;
const degree = (180 * angle) / Math.PI; const degree = (180 * angle) / Math.PI;
// offsets must be multiplied by 2 to account for the division by 2 of let translateX = (width * (zoom.value - 1)) / 2;
// the whole expression afterwards let translateY = (height * (zoom.value - 1)) / 2;
let translateX = ((width - offsetLeft * 2) * (zoom.value - 1)) / 2;
let translateY = ((height - offsetTop * 2) * (zoom.value - 1)) / 2;
if (width > maxWidth && zoom.value !== 1) { if (width > maxWidth && zoom.value !== 1) {
translateX = (maxWidth / 2) * (zoom.value - 1); translateX = (maxWidth * (zoom.value - 1)) / 2;
} }
if (height > maxHeight && zoom.value !== 1) { if (height > maxHeight && zoom.value !== 1) {
translateY = ((maxHeight - offsetTop * 2) * (zoom.value - 1)) / 2; translateY = (maxHeight * (zoom.value - 1)) / 2;
} }
return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`; return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
}; };
@ -173,29 +171,12 @@ export const textWysiwyg = ({
? approxLineHeight ? approxLineHeight
: updatedElement.height / lines.length; : updatedElement.height / lines.length;
if (!container) { if (!container) {
maxWidth = maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
(appState.offsetLeft + appState.width - viewportX - 8) /
appState.zoom.value -
// margin-right of parent if any
Number(
getComputedStyle(
excalidrawContainer?.parentNode as Element,
).marginRight.slice(0, -2),
);
} }
// Make sure text editor height doesn't go beyond viewport // Make sure text editor height doesn't go beyond viewport
const editorMaxHeight = const editorMaxHeight =
(appState.height - (appState.height - viewportY) / appState.zoom.value;
viewportY -
// There is a ~14px difference which keeps on increasing
// with every zoom step when offset present hence I am subtracting it here
// However this is not the best fix and breaks in
// few scenarios
(appState.offsetTop
? ((appState.zoom.value * 100 - 100) / 10) * 14
: 0)) /
appState.zoom.value;
const angle = container ? container.angle : updatedElement.angle; const angle = container ? container.angle : updatedElement.angle;
Object.assign(editable.style, { Object.assign(editable.style, {
font: getFontString(updatedElement), font: getFontString(updatedElement),

4
src/utils.ts
View File

@ -244,8 +244,8 @@ export const sceneCoordsToViewportCoords = (
scrollY: number; scrollY: number;
}, },
) => { ) => {
const x = (sceneX + scrollX + offsetLeft) * zoom.value + zoom.translation.x; const x = (sceneX + scrollX) * zoom.value + zoom.translation.x + offsetLeft;
const y = (sceneY + scrollY + offsetTop) * zoom.value + zoom.translation.y; const y = (sceneY + scrollY) * zoom.value + zoom.translation.y + offsetTop;
return { x, y }; return { x, y };
}; };