From a4eabe3691e05700ad5a8ff2de198d0c2f832434 Mon Sep 17 00:00:00 2001
From: EwdErna <ewderna@gmail.com>
Date: Fri, 23 Oct 2026 20:59:42 +0900
Subject: [PATCH] =?UTF-8?q?mock:=20=E3=82=AD=E3=83=A3=E3=83=B3=E3=83=90?=
 =?UTF-8?q?=E3=82=B9=E3=81=AE=20viewBox=20=E3=82=92=E3=80=81=E3=83=84?=
 =?UTF-8?q?=E3=83=BC=E3=83=AB=E3=83=90=E3=83=BC=E3=82=92=E9=99=A4=E3=81=84?=
 =?UTF-8?q?=E3=81=9F=20SVG=20=E3=81=AE=E5=A4=A7=E3=81=8D=E3=81=95=E3=81=AB?=
 =?UTF-8?q?=E5=90=88=E3=82=8F=E3=81=9B=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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              | 8 ++++++++
 mock/src/ui/phy/PhyEditor.vue     | 1 -
 mock/src/ui/phy/usePhyViewport.ts | 6 +++---
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/mock/e2e/phy.spec.ts b/mock/e2e/phy.spec.ts
index 320d971..018bba2 100644
--- a/mock/e2e/phy.spec.ts
+++ b/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);
+});
diff --git a/mock/src/ui/phy/PhyEditor.vue b/mock/src/ui/phy/PhyEditor.vue
index 65ef71a..546b7f0 100644
--- a/mock/src/ui/phy/PhyEditor.vue
+++ b/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,
diff --git a/mock/src/ui/phy/usePhyViewport.ts b/mock/src/ui/phy/usePhyViewport.ts
index 1253e78..8f2061e 100644
--- a/mock/src/ui/phy/usePhyViewport.ts
+++ b/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());