土曜日だが、朝から一日雨がℎぐり続く・・・まあ、梅雨だから当たり前だが、キクの散歩はみなと公園・・・一日中、施工計画の改修
施工計画書作成のエディタ分析（diagram-editor-script）
- 完全自作図面エディタエンジン
- 174関数 / 3,686行 / 166KB、→ 単一ファイルとしては限界に近いサイズ
- 外部ライブラリなし、SVGとdivだけでDrawio・Visioのような図形編集を自力実装
| 観点 | 評価 |
|---|---|
| コード品質 | セクション分けが明確で追いやすい |
| 機能完成度 | 商用ツールに近いレベル |
| CSP対応 | 95%完了・ページタブのみ残存 |
| データ設計 | JSON構造が明確で拡張しやすい |
| リスク箇所 | renderPageTabs()のinline onclick |
リファクタリングの優先順位
| 優先 | 内容 | 効果 |
|---|---|---|
| 🔴 高 | getTargetId()関数を1つ作りID取得を統一 | バグ防止 |
| 🔴 高 | setBg()をapplyBoxBg()に統合 | 重複解消 |
| 🔴 高 | toggleBorder()をapplyNodeBorderToggle()に統合 | 重複解消 |
| 🟡 中 | ctx系をコア関数に引数追加で統合 | コード削減 |
| 🟡 中 | tbl系を別ファイルに切り出し | 見通し改善 |
| 🟢 低 | snapshot()をラップして自動呼び出し化snapshot()をラップして自動呼び出し化 | 呼び忘れ防止 |
1.表操作の不具合修正・図形移動カーソル統一
1-1.表セルの背景色が不安定
原因
背景色を変更するルートが2つ存在し、挙動が異なる。
ルートA: RTBツールバーの「背景色」ピッカー
→ applyBoxBg(color) が呼ばれる
→ selCells があればセルに適用、なければノード全体に適用
→ saveTblNode() を呼ばない（HTMLが保存されない）
ルートB: 右クリックメニューの「セル背景色」
→ tblSetCellBg(color) が呼ばれる
→ saveTblNode() を呼ぶ（HTMLが保存される）
→ ルートAで変更した背景色は保存されずリロードで消える
1-2.表セルのテキスト色が変更できない
原因
テキスト色変更のルートが2つあり、表セルでは機能しない。
ルートA: RTBツールバーの「文字色」ピッカー（rb-txtcolor）
→ onchange=”rfmtColor(‘fore’,this.value)”（edit_section_blade.phpに記載）
→ rfmtColor は editCellEl または editId を使う
→ セルを「シングルクリックで選択」した状態では
editCellEl=null, editId=null になるため何も起こらない
→ ダブルクリックでセル編集中でないと動かない
ルートB: 右クリックメニューの「テキスト色」
→ tblSetCellTextColor(color) が呼ばれる
→ selCells に対して td.style.color を直接設定する
→ こちらは正常に動作する
→ ユーザーがRTBの文字色ピッカーを使っても変わらない
1-3.tblSetCellBg と tblSetCellTextColor に
closeCtxMenu() が入っている
原因
tblSetCellBg(color) と tblSetCellTextColor(color) の末尾に
closeCtxMenu() が入っている。
RTBツールバーから呼ばれた場合は右クリックメニューが
開いていないので問題ないが、将来的な混乱を避けるため整理する。
1-4.図形のドラッグ移動カーソルが不統一
現状
.nd-body に cursor: move が設定されている（CSS）
→ テキストボックス内にマウスを乗せると「十字矢印」になる
→ 表ノードのドラッグゾーン（nd-tbl-hdr）も cursor: move→ 線ノードのヒット領域も cursor: move→ ただし画像ノードはcursorが未設定でデフォルト
すべての移動可能な要素で cursor: move に統一されているが、表ノードだけ nd-tbl-hdr の6px帯でしか移動できないため
ユーザーには気づきにくい。
2.diagram-editor-script.blade.php の分割
2-1.分割の方針
分割後の構成:
diagram-editor-script.blade.php ← 親ファイル（@includeのみ）
diagram-editor-core.blade.php ← コア（変数・Undo/グリッド）
diagram-editor-nodes.blade.php ← ノード生成・移動・選択・編集
diagram-editor-table.blade.php ← 表・Excel貼付・xspreadsheet
diagram-editor-connect.blade.php ← 接続線・コネクタ
diagram-editor-ui.blade.php ← 保存・テンプレ・印刷・メニュー・イベント
2-2.親ファイルの最終形（diagram-editor-script.blade.php）
分割完了後、元ファイルの中身を全て削除し、以下の内容に置き換える:
{{– 図面エディタ JavaScript
diagram-editor-script.blade.php から @include で読み込む。
$project / $item 変数は親ビューから自動継承される。 –}}
{{– コア：状態変数・Undo/Redo・グリッド –}}
@include(‘components.diagram-editor-core’)
{{– ノード：生成・移動・リサイズ・選択・編集・RTB・コピー・画像 –}}
@include(‘components.diagram-editor-nodes’)
{{– 表：表ノード・Excel貼付・xspreadsheet・セル操作 –}}
@include(‘components.diagram-editor-table’)
{{– 接続線：かぎ型コネクタ・マウスイベント・接続線ダイアログ –}}
@include(‘components.diagram-editor-connect’)
{{– UI：保存・ページ管理・テンプレート・印刷・メニュー・イベント –}}
@include(‘components.diagram-editor-ui’)
2-3.分割後の作業がどう変わるか
表の不具合修正
→ diagram-editor-table.blade.php だけ開けばよい
（約1,000行）
接続線の不具合→ diagram-editor-connect.blade.php だけ（約600行）保存・テンプレートの問題→ diagram-editor-ui.blade.php だけ（約700行）
3.ダイアログUI統一
3-1.統一デザイン仕様一
共通CSS変数（@push(‘styles’)内の先頭に追加する）
/* ===== ダイアログ共通CSS変数 ===== */
:root {
–dlg-radius : 8px;
–dlg-shadow : 0 8px 24px rgba(0,0,0,.18);
–dlg-border : 1px solid #e2e8f0;
–dlg-bg : #ffffff;
–dlg-title-size: 13px;
–dlg-body-size : 12px;
–dlg-title-color: #1e293b;
–dlg-body-color : #374151;
3-2.ダイアログの種別と統一仕様
- 【種別1】センター配置モーダル（暗幕なし）
- 【種別2】右クリック系メニュー（CSS定義）
- 【種別3】オーバーレイ系モーダル（暗幕あり・CSSクラス定義）
- 【種別4】xs-modal（大型オーバーレイ）
- 【種別5】フローティングRTB
3-1.ボタンの統一仕様
ダイアログ内のボタンを以下3種類のCSSクラスに統一する。