diff --git a/implementation-plan.md b/implementation-plan.md index e19d081..0a616b1 100644 --- a/implementation-plan.md +++ b/implementation-plan.md @@ -7,6 +7,7 @@ PHYの正本は相対座標の木だが、既存エディタ(KLE, kle-ng)の移 - ijprest/keyboard-layout-editor のコードは取り込まない。全権利留保で、作者はフォークを避けたい意向を明記している。ソースを読んで挙動を確かめるのは可 - adamws/kle-ng は MIT ライセンスで、参考実装として読める +- 過去の自作エディタ(Documents/Dev/kbd-editor)のコードも取り込まない。KLE本体を参考に書かれた部分が多く、どこが由来か切り分けられないため。プロファイルの定義項目など、概念を参考にするのは可 ## 検証用サンプル @@ -60,6 +61,7 @@ PHYの正本は相対座標の木だが、既存エディタ(KLE, kle-ng)の移 - ijprest/keyboard-layout-editor の改造 (journal/2026-09-18-editor-base.md) - adamws/kle-ng の改造 (journal/2026-09-18-editor-base.md) +- 過去の自作 kbd-editor を土台にする (journal/2026-09-19-kbd-editor-review.md) ## 未確認事項 @@ -73,7 +75,9 @@ PHYの正本は相対座標の木だが、既存エディタ(KLE, kle-ng)の移 - 位置づけ: 未解決の問い。言語、UIフレームワーク、描画方式、状態管理、テスト、KLE JSONの読み書きに使うライブラリ - 現状の認識: 旧計画はReact系の構成を挙げていたが、選定の根拠はない。Vueの案もNuxtに慣れているというだけ -- 格上げ条件: 過去の自作エディタ(Documents/Dev/kbd-editor)を振り返ったうえで、ユーザーが選ぶ +- 現状の認識: エディタはSSRもルーティングもほぼ使わないので、Nuxtは不要。素のVue/Reactを想定している(未決) +- 現状の認識: 描画はSVGが有力。`` の入れ子変換がPHYの `Translate · Rotate` と同じ定義で、クリック判定と画面→ローカル座標の逆変換(`getScreenCTM`)をブラウザに任せられる。文字の折り返しは自前になる。試作はしていない +- 格上げ条件: ユーザーが選ぶ。描画方式は、回転したクラスター内のキーのドラッグを試作して確かめる ### P-3 リポジトリ構成 diff --git a/journal/2026-09-19-kbd-editor-review.md b/journal/2026-09-19-kbd-editor-review.md new file mode 100644 index 0000000..b17c5b4 --- /dev/null +++ b/journal/2026-09-19-kbd-editor-review.md @@ -0,0 +1,49 @@ +# 過去の自作エディタ kbd-editor の振り返り + +## 結論 + +- kbd-editor は PHY Editor の土台にしない。コードも持ち込まない +- 理由1: データモデルがフラットな絶対座標の Key[] で、PHY の相対座標の木と逆向き。kle-ng を見送ったのと同じ理由 +- 理由2: 作者本人の記憶では、多くを KLE 本体(全権利留保)のコードを参考に書いた。どこが KLE 由来か切り分けられない +- 概念(プロファイルの定義項目、KLE属性の一覧)は読んで参考にしてよい +- P-2 への材料: SSR はほぼ使わないので Nuxt は不要、素の Vue/React を想定(ユーザー談、未決)。描画は SVG が有力 + +## 案の比較 + +| 案 | 評価 | +|---|---| +| kbd-editor を土台にする | データモデル・編集操作は作り直し。書き出しは未実装。残るのは描画と読み込みだが、どちらも出自に懸念 | +| 部品だけ流用 | deserializer は npm の kle-serial(MIT)で代替できる。Key.vue は KLE 由来の懸念。流用の利点が薄い | +| 持ち込まない(採用) | 失うのは約2,000行。概念だけ参考にする | + +## 検証ログ + +### kbd-editor の状態 (Documents/Dev/kbd-editor, 2026-09-19 確認) +- 初回コミット ef25631 のみ。ブランチ master / develop / feature/base-ui は同一内容 +- Nuxt 3.17 + Nuxt UI 3.2 + Pinia。テストなし(utils/test-deserializer.ts は手動実行用スクリプト) +- 規模: KeyPropEditor.vue 710, stores/keys.ts 305, deserializer.ts 277, Key.vue 262, types 355, LayoutEditor.vue 152 行ほか +- types/keyboard.ts: Key は x, y, rotation_x/y/angle の絶対座標。kle-serial と同じ形 +- stores/keys.ts: keys をフラット配列で保持。移動は keys[i].x = Math.max(0, x + dx) と直接書き換え(負座標を切り捨て) +- 回転は KeyPropEditor から rotation_angle / rotation_x / rotation_y を直接書き換えるだけ。ドラッグ・undo・グループなし +- utils/serializer.ts は `return []` のみ。KLE書き出し未実装 +- 描画: Key.vue が div + CSS mm 単位。outline / shadow / fill の3層、x2/y2 の第2矩形あり。回転は CSS transform + transform-origin +- stores/displayConfig.ts のプロファイル: pitch{w,h}, gap{x,y}, top{l,r,t,b,c}, cornerRadius。PHY のプロファイル(ユニットサイズ、内側オフセット、R)とほぼ同じ概念 + +### 出自 +- 作者本人: 「多くはkle本体のコードを参考にしていたと思います」(2026-09-19) +- deserializer.ts の LABEL_MAP 等は kle-serial(MIT)にも同じものがある。kle-serial 経由か KLE 本体経由かは不明 +- Key.vue の3層構造は KLE の keycap 描画と同じ形 + +### 描画方式: DOM(div) と SVG +- 当時 DOM を選んだ理由: クリック判定をブラウザに任せられる(ユーザー談) +- SVG 要素も DOM 要素なのでイベントを受けられ、判定もブラウザが行う。自前で判定が要るのは Canvas +- `` の入れ子は PHY の Translate(x,y)·Rotate(θ) と同じ定義。回転中心は g のローカル原点 +- ヒットテストは入れ子の変換を適用した後の形で行われる。非矩形キーは path か、rect 2つを1つの g にまとめる +- element.getScreenCTM().inverse() で画面座標 → ローカル座標の行列が取れる。ドラッグの逆変換がほぼこれで済む +- viewBox を U か mm で切れば単位をそのまま扱える +- 弱点: 文字の自動折り返しがない。必要なら foreignObject で部分的に HTML。ラベルは pointer-events="none" で本体にクリックを通す +- いずれも仕様上の挙動。本プロジェクトでの試作はしていない + +### フレームワーク +- エディタは SSR もルーティングもほぼ使わない。Nuxt の利点は小さい +- ユーザー: 「素のVue/Reactでいいのかなとは思っています」。未決