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; svg: Ref; size: Ref<{ w: number; h: number }>; zoom: Ref; @@ -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());