テーブルコントロールの初回表示時にチラつくバグを修正

<lexxy-table-tools> 要素が表示される前に位置を確定させることで、テーブル挿入直後にコントロールが誤った位置に一瞬描画される問題を解消しました。

背景

<lexxy-table-tools> はテーブル操作用のカスタム要素で、行・列の追加削除などを行うコントロールUIを提供します。このコントロールは、テーブルが挿入されたタイミングで #show() メソッドを通じて表示されますが、特にハードリフレッシュ後の初回挿入時に、コントロールが一瞬だけ誤った位置に表示されるチラつき（フラッシュ）が発生していました。

原因はレンダリングのタイミングの問題でした。#show() は display: flex を設定した後に位置計算を行っていたため、ブラウザがCSSのデフォルト位置でコントロールを描画してから、JavaScriptが正しい位置に移動させるという1フレームのズレが生じていました。

技術的な変更

#show() メソッド内の処理順序を変更し、位置計算を display: flex の設定よりも前に移動しました。

変更前:

#show() {
  this.style.display = "flex"
  this.#update()
}

変更後:

#show() {
  this.#updateButtonsPosition()
  this.style.display = "flex"
  this.#updateRowColumnCount()
  this.#closeMoreMenu()
  this.#handleCommandButtonHover()
}

変更前は this.#update() という単一メソッドがすべての初期化処理を担っていました。変更後は #update() が担っていた処理を4つのメソッドに分解し、そのうち位置計算を担う #updateButtonsPosition() だけを display: flex の前に移動しています。残りの #updateRowColumnCount()・#closeMoreMenu()・#handleCommandButtonHover() は表示後に実行されます。

この修正により、コントロールが表示される時点では既に top/left が確定しているため、ブラウザはチラつきなしに正しい位置で初回描画を行います。

設計判断

「表示前に位置を確定させる」という原則を明示的にコードで表現する方向が採用されました。

単純な順序の入れ替えだけでなく、#update() を責務ごとに分割したことが重要です。位置計算（#updateButtonsPosition）とその他の初期化処理（行列数の更新、メニューの状態リセット、ホバーハンドラの設定）を分離することで、「表示前に実行すべき処理」と「表示後でよい処理」の意図がコードから直接読み取れるようになっています。モノリシックな #update() を維持したままでは、この順序の制御は困難でした。

まとめ

この修正は、ブラウザのレンダリングサイクルとJavaScriptの実行順序に起因するUIのチラつきを、メソッドの実行順序の整理と責務の分割という最小限のコード変更で解決しています。「表示を制御するメソッドは、表示前に完了すべき処理を明示的に先行させる」という設計原則を、コード構造そのもので表現した好例です。