a2nr
/
velxio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(editor): editor/canvas split drag desyncs when the container is padded 

The drag handler computed the split percentage against
getBoundingClientRect().width (border box), but the panels' percentage
widths resolve against the content box. Overlays that reserve space by
padding .app-container (docked side panels) made the handle jump left on
click and track offset from the cursor. Measure against clientWidth minus
padding, with the origin shifted by border + left padding.
This commit is contained in:
David Montero Crespo 2026-08-14 16:34:22 +02:00
parent df19778a3c
commit b3ac180ace
1 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/pages/EditorPage.tsx
View File

@ -334,8 +334,20 @@ export const EditorPage: React.FC = () => {
const handleMouseMove = (ev: MouseEvent) => {
if (!resizingRef.current || !containerRef.current) return;
const rect = containerRef.current.getBoundingClientRect();
const pct = ((ev.clientX - rect.left) / rect.width) * 100;
const el = containerRef.current;
const rect = el.getBoundingClientRect();
// The panels' percentage widths resolve against the container's CONTENT
// box, but getBoundingClientRect() returns the border box — and overlays
// may reserve space by padding .app-container (e.g. a docked side panel).
// Measuring against the padded box makes the handle jump away from the
// cursor, so strip borders and padding first.
const cs = getComputedStyle(el);
const padLeft = parseFloat(cs.paddingLeft) || 0;
const padRight = parseFloat(cs.paddingRight) || 0;
const contentLeft = rect.left + el.clientLeft + padLeft;
const contentWidth = el.clientWidth - padLeft - padRight;
if (contentWidth <= 0) return;
const pct = ((ev.clientX - contentLeft) / contentWidth) * 100;
setEditorWidthPct(Math.max(20, Math.min(80, pct)));
};