Skip to content

Commit 3d090ed

Browse files
author
DavidQ
committed
Normalize vector tool zoom controls to percent defaults - PR_26140_049-normalize-vector-tool-zoom-percent
1 parent 87716e0 commit 3d090ed

8 files changed

Lines changed: 90 additions & 62 deletions

File tree

‎tests/playwright/tools/CollisionInspectorV2.spec.mjs‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -283,6 +283,11 @@ test.describe("Collision Inspector V2", () => {
283283
await expect(page.locator("#manifestSummary")).toContainText("screen 960x720");
284284
await expect(page.locator("#collisionCanvas")).toHaveAttribute("width", "960");
285285
await expect(page.locator("#collisionCanvas")).toHaveAttribute("height", "720");
286+
await expect(page.locator("#collisionZoomInput")).toHaveAttribute("min", "10");
287+
await expect(page.locator("#collisionZoomInput")).toHaveAttribute("max", "1000");
288+
await expect(page.locator("#collisionZoomInput")).toHaveAttribute("step", "10");
289+
await expect(page.locator("#collisionZoomInput")).toHaveValue("100");
290+
await expect(page.locator("#zoomState")).toHaveText("100%");
286291
const aspectRatio = await page.locator("#collisionCanvas").evaluate((canvas) => {
287292
const rect = canvas.getBoundingClientRect();
288293
return rect.width / rect.height;
@@ -511,21 +516,20 @@ test.describe("Collision Inspector V2", () => {
511516
await expect(page.locator("#collisionSummary")).toContainText('"mode": "hybrid"');
512517
await expect(page.locator("#collisionResultBadge")).toHaveText("Collision");
513518

514-
await page.locator("#collisionZoomInput").fill("1.5");
515-
await expect(page.locator("#zoomState")).toHaveText("1.5x");
516-
await expect(page.locator("#collisionSummary")).toContainText('"zoom": 1.5');
517-
await expect(page.locator("#collisionZoomInput")).toHaveAttribute("max", "5");
518-
await page.locator("#collisionZoomInput").fill("5");
519-
await expect(page.locator("#zoomState")).toHaveText("5x");
520-
await expect(page.locator("#collisionSummary")).toContainText('"zoom": 5');
519+
await page.locator("#collisionZoomInput").fill("150");
520+
await expect(page.locator("#zoomState")).toHaveText("150%");
521+
await expect(page.locator("#collisionSummary")).toContainText('"zoom": "150%"');
522+
await page.locator("#collisionZoomInput").fill("1000");
523+
await expect(page.locator("#zoomState")).toHaveText("1000%");
524+
await expect(page.locator("#collisionSummary")).toContainText('"zoom": "1000%"');
521525
const zoomAspectRatio = await page.locator("#collisionCanvas").evaluate((canvas) => {
522526
const rect = canvas.getBoundingClientRect();
523527
return rect.width / rect.height;
524528
});
525529
expect(Math.abs(zoomAspectRatio - (960 / 720))).toBeLessThan(0.02);
526-
await page.evaluate(() => window.__collisionInspectorV2App.setZoom(8));
527-
await expect(page.locator("#zoomState")).toHaveText("5x");
528-
await expect(page.locator("#collisionSummary")).toContainText('"zoom": 5');
530+
await page.evaluate(() => window.__collisionInspectorV2App.setZoom(12));
531+
await expect(page.locator("#zoomState")).toHaveText("1000%");
532+
await expect(page.locator("#collisionSummary")).toContainText('"zoom": "1000%"');
529533

530534
await page.locator("#resetSimulationButton").click();
531535
await expect(page.locator("#collisionResultBadge")).toHaveText("No Collision");

‎tests/playwright/tools/WorkspaceManagerV2.spec.mjs‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2308,25 +2308,25 @@ test.describe("Workspace Manager V2 bootstrap", () => {
23082308
chipsSameRow: true,
23092309
inputAndAddInline: true
23102310
});
2311-
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1600 -1100 3200 2200");
2311+
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-160 -110 320 220");
23122312
await expect(page.locator("#objectVectorStudioV2RenderSurface [data-center-origin='0,0']")).toHaveCount(1);
23132313
await expect(page.locator("#objectVectorStudioV2RenderSurface [data-center-origin='0,0']")).toHaveAttribute("r", "9");
23142314
await expect(page.locator("#objectVectorStudioV2ViewportControls button")).toHaveText(["Out", "In", "Up", "Down", "Left", "Right", "View", "Center"]);
23152315
await expect(page.locator("#objectVectorStudioV2CenterDotButton")).toHaveAttribute("aria-pressed", "true");
23162316
await page.locator("#objectVectorStudioV2PanRightButton").click();
23172317
await page.locator("#objectVectorStudioV2PanDownButton").click();
23182318
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 2, 2 | Canvas origin -2,-2 from center | Zoom 100%");
2319-
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1580 -1080 3200 2200");
2319+
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-140 -90 320 220");
23202320
await page.locator("#objectVectorStudioV2RenderSurface").hover({ position: { x: 12, y: 12 } });
23212321
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toContainText("Pointer");
23222322
await page.locator("#objectVectorStudioV2CenterDotButton").click();
2323-
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1580 -1080 3200 2200");
2323+
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-140 -90 320 220");
23242324
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toContainText("Canvas origin -2,-2 from center | Zoom 100%");
23252325
await expect(page.locator("#objectVectorStudioV2RenderSurface [data-center-origin='0,0']")).toHaveCount(0);
23262326
await expect(page.locator("#objectVectorStudioV2CenterDotButton")).toHaveAttribute("aria-pressed", "false");
23272327
await expect(page.locator("#statusLog")).toHaveValue(/OK Center dot hidden\./);
23282328
await page.locator("#objectVectorStudioV2ResetViewButton").click();
2329-
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1600 -1100 3200 2200");
2329+
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-160 -110 320 220");
23302330
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas origin 0,0 centered | Zoom 100%");
23312331
await expect(page.locator("#objectVectorStudioV2RenderSurface [data-center-origin='0,0']")).toHaveCount(0);
23322332
await page.locator("#objectVectorStudioV2CenterDotButton").click();
@@ -3435,44 +3435,44 @@ test.describe("Workspace Manager V2 bootstrap", () => {
34353435
await expect(page.locator("#statusLog")).toHaveValue(/OK Tools mode selected from keyboard: select\./);
34363436

34373437
const zoomSource = await readFile("tools/object-vector-studio-v2/js/ToolStarterApp.js", "utf8");
3438-
expect(zoomSource).toContain("const DEFAULT_VIEWPORT = Object.freeze({ height: 220, width: 320, x: 0, y: 0, zoom: 0.1 });");
3439-
expect(zoomSource).toContain("const MAX_ZOOM = 1.0;");
3440-
expect(zoomSource).toContain("const MIN_ZOOM = 0.01;");
3441-
expect(zoomSource).toContain("const ZOOM_STEP = 0.01;");
3438+
expect(zoomSource).toContain("const DEFAULT_VIEWPORT = Object.freeze({ height: 220, width: 320, x: 0, y: 0, zoom: 1.0 });");
3439+
expect(zoomSource).toContain("const MAX_ZOOM = 10.0;");
3440+
expect(zoomSource).toContain("const MIN_ZOOM = 0.1;");
3441+
expect(zoomSource).toContain("const ZOOM_STEP = 0.1;");
34423442
expect(zoomSource).not.toContain("transformWithObjectScaleAroundPivot");
34433443
expect(zoomSource).not.toContain("objectScalePreviewValues");
34443444
expect(zoomSource).not.toContain("transformWithRelativeScaleAroundPivot");
34453445
expect(zoomSource).toMatch(/formatZoomPercentage\(\) \{\s+return Math\.round\(this\.viewport\.zoom \* 100\);\s+\}/);
3446-
expect(zoomSource.match(/formatZoomPercentage\(\) \* 10/g)?.length || 0).toBeGreaterThanOrEqual(4);
3446+
expect(zoomSource).not.toContain("formatZoomPercentage() * 10");
34473447
expect(zoomSource).not.toMatch(/viewport\.zoom\s*\*\s*100\s*\*\s*GRID_STEP|const MAX_ZOOM = 2/);
34483448

34493449
await page.locator("#objectVectorStudioV2ZoomInButton").click();
34503450
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toContainText("Zoom 110%");
3451-
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1454.545 -1000 2909.091 2000");
3451+
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-145.455 -100 290.909 200");
34523452
await page.locator("#objectVectorStudioV2PanRightButton").click();
3453-
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1434.545 -1000 2909.091 2000");
3453+
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-125.455 -100 290.909 200");
34543454
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 2, 0 | Canvas origin -2,0 from center | Zoom 110%");
34553455
await page.locator("#objectVectorStudioV2ResetViewButton").click();
3456-
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1600 -1100 3200 2200");
3456+
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-160 -110 320 220");
34573457
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas origin 0,0 centered | Zoom 100%");
34583458
await expect(page.locator("#statusLog")).toHaveValue(/OK Viewport reset to 100% at origin 0,0\./);
34593459
await page.evaluate(() => {
34603460
window.__objectVectorStudioV2App.viewport.zoom = 0.095;
34613461
window.__objectVectorStudioV2App.updateViewport();
34623462
});
3463-
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas origin 0,0 centered | Zoom 100%");
3463+
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas origin 0,0 centered | Zoom 10%");
34643464
await page.evaluate(() => {
34653465
window.__objectVectorStudioV2App.zoomViewport(2.5);
34663466
});
3467-
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas origin 0,0 centered | Zoom 1000%");
3468-
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-160 -110 320 220");
3467+
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas origin 0,0 centered | Zoom 250%");
3468+
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-64 -44 128 88");
34693469
await page.evaluate(() => {
34703470
window.__objectVectorStudioV2App.zoomViewport(0);
34713471
});
34723472
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas origin 0,0 centered | Zoom 10%");
3473-
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-16000 -11000 32000 22000");
3474-
await page.locator("#objectVectorStudioV2ResetViewButton").click();
34753473
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1600 -1100 3200 2200");
3474+
await page.locator("#objectVectorStudioV2ResetViewButton").click();
3475+
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-160 -110 320 220");
34763476
const wheelAnchor = await page.locator("#objectVectorStudioV2RenderSurface").evaluate((surface) => {
34773477
const rect = surface.getBoundingClientRect();
34783478
const clientX = Math.round(rect.left + rect.width * 0.75);
@@ -3508,14 +3508,14 @@ test.describe("Workspace Manager V2 bootstrap", () => {
35083508
expect(zoomedGridState.pointerDelta.y).toBeLessThan(0.001);
35093509
expect(Math.abs(zoomedGridState.viewport.x)).toBeGreaterThan(1);
35103510
expect(Math.abs(zoomedGridState.viewport.y)).toBeGreaterThan(1);
3511-
expect(zoomedGridState.viewBox).not.toBe("-1454.545 -1000 2909.091 2000");
3511+
expect(zoomedGridState.viewBox).not.toBe("-145.455 -100 290.909 200");
35123512
await page.mouse.wheel(0, 240);
35133513
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toContainText("Zoom 100%");
3514-
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1600 -1100 3200 2200");
3514+
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-160 -110 320 220");
35153515
await page.evaluate(() => {
35163516
window.__objectVectorStudioV2App.zoomViewport(0.25);
35173517
});
3518-
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toContainText("Zoom 250%");
3518+
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toContainText("Zoom 25%");
35193519
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-640 -440 1280 880");
35203520
await page.locator("#objectVectorStudioV2ResetViewButton").click();
35213521

@@ -3718,13 +3718,13 @@ test.describe("Workspace Manager V2 bootstrap", () => {
37183718
await expect(page.locator(".tool-starter__panel--right")).toHaveCSS("overflow-y", "auto");
37193719
const maxZoomState = await page.evaluate(() => {
37203720
const app = window.__objectVectorStudioV2App;
3721-
app.zoomViewport(2);
3721+
app.zoomViewport(20);
37223722
return {
37233723
display: document.querySelector("#objectVectorStudioV2CoordinateDisplay").textContent,
37243724
zoom: app.viewport.zoom
37253725
};
37263726
});
3727-
expect(maxZoomState.zoom).toBe(1);
3727+
expect(maxZoomState.zoom).toBe(10);
37283728
expect(maxZoomState.display).toContain("Zoom 1000%");
37293729
await page.locator("#objectVectorStudioV2ResetViewButton").click();
37303730

@@ -4001,8 +4001,8 @@ test.describe("Workspace Manager V2 bootstrap", () => {
40014001
zoom
40024002
};
40034003
};
4004-
const states = [collect(0.1), collect(0.3), collect(0.05)];
4005-
app.viewport.zoom = 0.1;
4004+
const states = [collect(1), collect(3), collect(0.5)];
4005+
app.viewport.zoom = 1;
40064006
app.updateViewport();
40074007
app.renderWorkSurface();
40084008
return states;
@@ -4724,11 +4724,11 @@ test.describe("Workspace Manager V2 bootstrap", () => {
47244724
await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-index='1'][data-polygon-point-axis='y']").fill("16");
47254725
await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-index='1'][data-polygon-point-axis='y']").dispatchEvent("change");
47264726
await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-index='0']")).toHaveAttribute("points", "0,-180 140,160 0,80 -140,160");
4727-
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1600 -1100 3200 2200");
4727+
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-160 -110 320 220");
47284728
await page.evaluate(() => {
47294729
window.__objectVectorStudioV2App.zoomViewport(0.25);
47304730
});
4731-
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toContainText("Zoom 250%");
4731+
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toContainText("Zoom 25%");
47324732
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-640 -440 1280 880");
47334733

47344734
const readPreviewScale = async () => page.locator("#objectVectorStudioV2RenderSurface").evaluate((surface) => {
@@ -4815,16 +4815,16 @@ test.describe("Workspace Manager V2 bootstrap", () => {
48154815
});
48164816
await page.locator("#objectVectorStudioV2PanRightButton").click();
48174817
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-620 -440 1280 880");
4818-
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 2, 0 | Canvas origin -2,0 from center | Zoom 250%");
4818+
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 2, 0 | Canvas origin -2,0 from center | Zoom 25%");
48194819
await page.locator("#objectVectorStudioV2PanLeftButton").click();
48204820
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-640 -440 1280 880");
4821-
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas origin 0,0 centered | Zoom 250%");
4821+
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas origin 0,0 centered | Zoom 25%");
48224822
await page.locator("#objectVectorStudioV2PanUpButton").click();
48234823
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-640 -460 1280 880");
4824-
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, -2 | Canvas origin 0,2 from center | Zoom 250%");
4824+
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, -2 | Canvas origin 0,2 from center | Zoom 25%");
48254825
await page.locator("#objectVectorStudioV2PanDownButton").click();
48264826
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-640 -440 1280 880");
4827-
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas origin 0,0 centered | Zoom 250%");
4827+
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Origin: 0, 0 | Canvas origin 0,0 centered | Zoom 25%");
48284828
const afterPanShapeState = await page.evaluate(() => {
48294829
const shape = window.__objectVectorStudioV2App.selectedShape();
48304830
return {
@@ -4845,7 +4845,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
48454845
clientX: examplePointerScreen.x,
48464846
clientY: examplePointerScreen.y
48474847
});
4848-
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Pointer -14, -16 | Canvas origin 0,0 centered | Zoom 250%");
4848+
await expect(page.locator("#objectVectorStudioV2CoordinateDisplay")).toHaveText("Pointer -14, -16 | Canvas origin 0,0 centered | Zoom 25%");
48494849
await page.setViewportSize({ width: 1040, height: 720 });
48504850
const resizedPreviewScale = await readPreviewScale();
48514851
expect(resizedPreviewScale.aspectRatioStable).toBe(true);
@@ -4855,7 +4855,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
48554855
expect(resizedPreviewScale.gridStepRestored).toBe(true);
48564856
expect(resizedPreviewScale.pointsOnVisibleGridLines).toBe(true);
48574857
await page.locator("#objectVectorStudioV2ResetViewButton").click();
4858-
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-1600 -1100 3200 2200");
4858+
await expect(page.locator("#objectVectorStudioV2RenderSurface")).toHaveAttribute("viewBox", "-160 -110 320 220");
48594859
await page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-delete='true'][data-polygon-point-index='0']").click();
48604860
await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails .object-vector-studio-v2__polygon-point-field")).toHaveCount(4);
48614861
await expect(page.locator("#objectVectorStudioV2ShapeGeometryDetails [data-polygon-point-delete='true'][data-polygon-point-index='0']")).toHaveAttribute("aria-invalid", "true");

‎tools/collision-inspector-v2/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,9 +108,9 @@ <h2 class="tools-platform-frame__eyebrow">Shared Manifest Collision Tool</h2>
108108
<div class="collision-inspector-v2__zoom-row">
109109
<label class="tool-starter__field tool-starter__field--compact collision-inspector-v2__field collision-inspector-v2__field--inline" for="collisionZoomInput">
110110
<span>Zoom</span>
111-
<input id="collisionZoomInput" type="range" min="0.5" max="5" step="0.1" value="1">
111+
<input id="collisionZoomInput" type="range" min="10" max="1000" step="10" value="100">
112112
</label>
113-
<output id="zoomState" for="collisionZoomInput">1x</output>
113+
<output id="zoomState" for="collisionZoomInput">100%</output>
114114
</div>
115115
<div class="collision-inspector-v2__canvas-viewport">
116116
<canvas id="collisionCanvas" width="1" height="1" aria-label="Collision movement simulation" aria-describedby="collisionGuideNote"></canvas>

0 commit comments

Comments
 (0)