mock: キャンバスの viewBox を、ツールバーを除いた SVG の大きさに合わせる

ResizeObserver がツールバーを含むペインを見ていたため、viewBox の高さが SVG の実寸より
ツールバーの分だけ大きく、描画が縮んでいた。ツールバーが折り返すとずれが広がる。SVG 自身を見る。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ShoEXYqi8PWTjB9E86Ltot

mock/e2e/phy.spec.ts

@@ -658,3 +658,11 @@ test("バリアントグループを選んでキーを足すと、表示中の
   expect(Math.abs(box.x - left!.x)).toBeLessThan(1);
   expect(Math.abs(box.y - (left!.y + unit))).toBeLessThan(1);
 });
+
+test("キャンバスのviewBoxはツールバーを除いたSVGの大きさに合う", async ({ page }) => {
+  const canvas = page.locator("svg.canvas");
+  const box = (await canvas.boundingBox())!;
+  const [, , w, h] = (await canvas.getAttribute("viewBox"))!.split(" ").map(Number);
+  expect(Math.abs(w! - box.width)).toBeLessThan(1);
+  expect(Math.abs(h! - box.height)).toBeLessThan(1);
+});

mock/src/ui/phy/PhyEditor.vue

@@ -76,7 +76,6 @@ const {
 } = usePhyTreeModel(() => props.project, focus);
 const { fit, fitSelected, localPoint, wheel } = usePhyViewport({
   project: () => props.project,
-  pane,
   svg,
   size,
   zoom,

mock/src/ui/phy/usePhyViewport.ts

@@ -6,7 +6,6 @@ import { localBounds } from "./logic";
 
 type Options = {
   project: () => ProjectFile;
-  pane: Ref<HTMLElement | undefined>;
   svg: Ref<SVGSVGElement | undefined>;
   size: Ref<{ w: number; h: number }>;
   zoom: Ref<number>;
@@ -58,13 +57,14 @@ export function usePhyViewport(options: Options) {
   }
 
   onMounted(() => {
-    if (!options.pane.value) return;
+    if (!options.svg.value) return;
+    // viewBox はSVG自身の大きさに合わせる。ペインにはツールバーも入り、折り返すと高さがずれる
     observer = new ResizeObserver((entries) => {
       const rect = entries[0]!.contentRect;
       options.size.value = { w: rect.width, h: rect.height };
       fit();
     });
-    observer.observe(options.pane.value);
+    observer.observe(options.svg.value);
     fit();
   });
   onUnmounted(() => observer?.disconnect());