fix(composer): point the align toolbar at the anchor-clearing path

Two alignment implementations existed and the toolbar used the wrong one.

alignElement(dir) set el.x/el.y and stopped there. resolveAnchor turns
anchor='right' into `dim - val`, so with xAnchor='right' an "align left"
(el.x = 0) resolved to x = MATRIX_W and the element jumped to the far right
edge -- the opposite of what was asked. It also never touched el.x0/el.y0, so
a line's endpoints were left where they were.

_alignElement already did both correctly: it clears the anchor so the stored
value is absolute, and moves x0/y0 for lines. Its six wrappers -- alignLeft,
alignHCenter, alignRight, alignTop, alignVCenter, alignBottom -- existed and
had no callers at all.

All six toolbar buttons now call the wrappers, and the legacy method is
removed rather than left to drift back into use.

Tests: the toolbar calls each wrapper and no longer calls alignElement, the
legacy definition is gone, and _alignElement still clears the anchor and moves
line endpoints. Two of them fail against the previous markup.

Full suite 4062 passed, the one failure being test_install_lowmem
(pre-existing, awaiting #492).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01STMbQE4YctTacQXfbYqKuW
This commit is contained in:
ChuckBuilds
2026-08-22 15:13:27 -04:00
co-authored by Claude Opus 5
parent 37fc1b56b5
commit 2f42d179f6
3 changed files with 46 additions and 23 deletions
+6 -6
View File
@@ -667,13 +667,13 @@
<div>
<span class="prop-label">Align to Canvas</span>
<div class="flex gap-0.5 mt-0.5 flex-wrap">
<button class="align-btn" @click="alignElement('left')" title="Align left"> <i class="fas fa-align-left"></i></button>
<button class="align-btn" @click="alignElement('center')" title="Center horiz"><i class="fas fa-align-center"></i></button>
<button class="align-btn" @click="alignElement('right')" title="Align right"> <i class="fas fa-align-right"></i></button>
<button class="align-btn" @click="alignLeft()" title="Align left"> <i class="fas fa-align-left"></i></button>
<button class="align-btn" @click="alignHCenter()" title="Center horiz"><i class="fas fa-align-center"></i></button>
<button class="align-btn" @click="alignRight()" title="Align right"> <i class="fas fa-align-right"></i></button>
<div class="w-px h-5 bg-gray-200 mx-0.5"></div>
<button class="align-btn" @click="alignElement('top')" title="Align top"> <i class="fas fa-arrow-up"></i></button>
<button class="align-btn" @click="alignElement('middle')" title="Center vert"> <i class="fas fa-arrows-alt-v"></i></button>
<button class="align-btn" @click="alignElement('bottom')" title="Align bottom"><i class="fas fa-arrow-down"></i></button>
<button class="align-btn" @click="alignTop()" title="Align top"> <i class="fas fa-arrow-up"></i></button>
<button class="align-btn" @click="alignVCenter()" title="Center vert"> <i class="fas fa-arrows-alt-v"></i></button>
<button class="align-btn" @click="alignBottom()" title="Align bottom"><i class="fas fa-arrow-down"></i></button>
</div>
</div>