Preserve Objects hierarchy scroll position and tighten shape hierarchy density in Object Vector Studio V2 - PR_26132_022-object-vector-studio-v2-objects-scroll-density

Author: DavidQ

docs/dev/reports/playwright_v8_coverage.txt

@@ -20,10 +20,8 @@ Exercised tool entry points detected:
 (0%) Workspace Manager - not exercised by this Playwright run
 
 Changed runtime JS files covered:
-(80%) tools/object-vector-studio-v2/js/bootstrap.js - executed lines 98/98; executed functions 4/5
-(90%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 3209/3209; executed functions 334/372
-(95%) tools/object-vector-studio-v2/js/services/ObjectVectorStudioV2SchemaService.js - executed lines 401/401; executed functions 52/55
-(98%) src/engine/rendering/ObjectVectorRuntimeAssetService.js - executed lines 914/914; executed functions 105/107
+(80%) tools/object-vector-studio-v2/js/bootstrap.js - executed lines 99/99; executed functions 4/5
+(90%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 3217/3217; executed functions 335/373
 
 Files with executed line/function counts where available:
 (2%) src/engine/input/ActionInputService.js - executed lines 397/397; executed functions 1/51
@@ -169,7 +167,7 @@ Files with executed line/function counts where available:
 (80%) src/engine/persistence/StorageService.js - executed lines 49/49; executed functions 4/5
 (80%) tools/asset-manager-v2/js/controls/AccordionSection.js - executed lines 27/27; executed functions 4/5
 (80%) tools/asset-manager-v2/js/controls/AssetFormControl.js - executed lines 563/563; executed functions 49/61
-(80%) tools/object-vector-studio-v2/js/bootstrap.js - executed lines 98/98; executed functions 4/5
+(80%) tools/object-vector-studio-v2/js/bootstrap.js - executed lines 99/99; executed functions 4/5
 (80%) tools/palette-manager-v2/modules/PaletteHistoryStack.js - executed lines 54/54; executed functions 8/10
 (80%) tools/preview-generator-v2/controls/AccordionSection.js - executed lines 31/31; executed functions 4/5
 (80%) tools/preview-generator-v2/PreviewGeneratorV2Logger.js - executed lines 19/19; executed functions 4/5
@@ -195,7 +193,7 @@ Files with executed line/function counts where available:
 (88%) tools/world-vector-studio-v2/js/controls/SourceInputControl.js - executed lines 33/33; executed functions 7/8
 (89%) tools/asset-manager-v2/js/services/AssetSchemaValidator.js - executed lines 295/295; executed functions 25/28
 (89%) tools/preview-generator-v2/controls/StatusLogControl.js - executed lines 32/32; executed functions 8/9
-(90%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 3209/3209; executed functions 334/372
+(90%) tools/object-vector-studio-v2/js/ToolStarterApp.js - executed lines 3217/3217; executed functions 335/373
 (90%) tools/palette-manager-v2/modules/PaletteValidationService.js - executed lines 88/88; executed functions 9/10
 (90%) tools/text2speech-V2/js/controls/ActionNavControl.js - executed lines 117/117; executed functions 19/21
 (90%) tools/text2speech-V2/js/TextToSpeechToolApp.js - executed lines 807/807; executed functions 62/69
@@ -295,8 +293,5 @@ Uncovered or low-coverage changed JS files:
 
 Changed JS files considered:
 (0%) tests/playwright/tools/WorkspaceManagerV2.spec.mjs - changed JS file not collected as browser runtime coverage
-(0%) tools/object-vector-studio-v2/tests/playwright/FirstClassToolStarter.spec.mjs - changed JS file not collected as browser runtime coverage
 (80%) tools/object-vector-studio-v2/js/bootstrap.js - changed JS file with browser V8 coverage
 (90%) tools/object-vector-studio-v2/js/ToolStarterApp.js - changed JS file with browser V8 coverage
-(95%) tools/object-vector-studio-v2/js/services/ObjectVectorStudioV2SchemaService.js - changed JS file with browser V8 coverage
-(98%) src/engine/rendering/ObjectVectorRuntimeAssetService.js - changed JS file with browser V8 coverage

docs/pr/PR_26132_022-object-vector-studio-v2-objects-scroll-density.md

@@ -0,0 +1,73 @@
+# PR_26132_022-object-vector-studio-v2-objects-scroll-density
+
+## Scope
+
+Updates Object Vector Studio V2 Objects hierarchy scrolling and row density only. No schema changes, no unrelated controls, and no sample JSON changes.
+
+## Changes
+
+- Preserved `objectVectorStudioV2ObjectsContent` scroll position across object and shape selection re-renders.
+- Added an explicit Objects content element binding so render code restores the correct scroll container.
+- Tightened object hierarchy spacing by reducing shape-list gaps, padding, row height, and metadata line height.
+- Reduced shape row font sizing while keeping labels readable.
+- Shortened shape hierarchy labels under selected objects to dense row labels such as `0. small-ufo-body` and `1. small-ufo-canopy`.
+- Kept the object-level label such as `objects > Small UFO` intact on the selected object tile.
+
+## Validation
+
+Playwright impacted: Yes.
+
+Commands run:
+
+- `node --check tools/object-vector-studio-v2/js/ToolStarterApp.js`
+- `node --check tools/object-vector-studio-v2/js/bootstrap.js`
+- `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs`
+- `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list --grep "shows Object Vector Studio V2 layout shell"`
+- `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list --grep "uses header lifecycle controls"`
+- `npm run test:workspace-v2`
+
+Result:
+
+- Focused Object Vector Studio V2 hierarchy coverage passed.
+- Focused Workspace Manager launch coverage passed.
+- Full Workspace Manager V2 suite passed: 45 passed.
+- Playwright V8 coverage refreshed at `docs/dev/reports/playwright_v8_coverage.txt`.
+- Full samples smoke test skipped per request.
+
+## Playwright Coverage
+
+Validates:
+
+- Objects scroll position persists when selecting a shape from the hierarchy.
+- Objects scroll position persists when selecting another object.
+- Shape hierarchy rows use reduced font sizing, line height, row height, and spacing.
+- Workspace-launched Asteroids Object Vector payload keeps `objects > Small UFO` and renders compact shape rows `0. small-ufo-body` and `1. small-ufo-canopy`.
+
+Expected pass behavior:
+
+- Object Vector Studio V2 selection updates highlight state and details without jumping the Objects container scroll position.
+- Shape hierarchy rows are visibly denser while staying readable.
+
+Expected fail behavior:
+
+- Invalid payloads and blocked actions continue using existing visible Status Log WARN/FAIL behavior without partial render or silent fallback.
+
+## Manual Validation
+
+1. Open `tools/object-vector-studio-v2/index.html`.
+2. Load a valid Object Vector payload with enough objects to scroll the Objects accordion.
+3. Scroll the Objects accordion downward, then select a visible object or shape.
+4. Confirm the scroll position remains stable after the selected state updates.
+5. Select an object with multiple shapes, such as Small UFO from the Asteroids workspace payload.
+6. Confirm the object label remains readable and shape rows are compact, for example `0. small-ufo-body` and `1. small-ufo-canopy`.
+
+Expected outcome:
+
+- The Objects hierarchy remains stable during selection and displays more rows in the same vertical space.
+
+## Out Of Scope
+
+- No schema changes.
+- No unrelated controls.
+- No sample JSON changes.
+- No full samples smoke test.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1469,7 +1469,24 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-id='circle-2']")).toHaveClass(/is-selected/);
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object-1']")).toHaveClass(/is-selected/);
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object-1'] [data-object-tile-shape-id]")).toHaveCount(2);
+      await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object-1'] [data-object-tile-shape-id] .object-vector-studio-v2__shape-select-label")).toHaveText(["1. rectangle-1", "2. circle-2"]);
       await expect(page.locator(".object-vector-studio-v2__object-tile-shape-row.is-selected [data-object-tile-shape-id='circle-2']")).toHaveCount(1);
+      const shapeHierarchyDensity = await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object-1']").evaluate((tile) => {
+        const shapeList = tile.querySelector(".object-vector-studio-v2__object-tile-shapes");
+        const shapeRow = tile.querySelector(".object-vector-studio-v2__object-tile-shape-row");
+        const shapeButton = tile.querySelector("[data-object-tile-shape-id]");
+        const shapeLabel = tile.querySelector(".object-vector-studio-v2__shape-select-label");
+        return {
+          fontSize: Number.parseFloat(getComputedStyle(shapeRow).fontSize),
+          gap: Number.parseFloat(getComputedStyle(shapeList).gap),
+          labelLineHeight: Number.parseFloat(getComputedStyle(shapeLabel).lineHeight),
+          rowHeight: Math.round(shapeButton.getBoundingClientRect().height)
+        };
+      });
+      expect(shapeHierarchyDensity.fontSize).toBeLessThanOrEqual(12);
+      expect(shapeHierarchyDensity.gap).toBeLessThanOrEqual(3);
+      expect(shapeHierarchyDensity.labelLineHeight).toBeLessThanOrEqual(14);
+      expect(shapeHierarchyDensity.rowHeight).toBeLessThanOrEqual(28);
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object-1'] [data-object-control='visibility']")).toHaveText("");
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object-1'] [data-object-control='lock']")).toHaveText("");
       await expect(page.locator(".object-vector-studio-v2__object-tile[data-object-id='object-1'] [data-object-control='visibility'] .object-vector-studio-v2__tile-icon--eye")).toHaveCount(1);
@@ -1487,7 +1504,12 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#statusLog")).toHaveValue(/WARN Create line blocked: object Asteroids Ship is locked for this runtime session\./);
       await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object-1'] [data-object-control='lock']").click();
       await expect(page.locator("#objectVectorStudioV2RenameObjectButton")).toBeEnabled();
-      await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object-1'] [data-object-tile-shape-id='rectangle-1']").click();
+      const shapeScrollBefore = await page.locator("#objectVectorStudioV2ObjectsContent").evaluate((element) => {
+        element.scrollTop = 32;
+        return element.scrollTop;
+      });
+      await page.locator(".object-vector-studio-v2__object-tile[data-object-id='object-1'] [data-object-tile-shape-id='rectangle-1']").evaluate((button) => button.click());
+      await expect.poll(async () => page.locator("#objectVectorStudioV2ObjectsContent").evaluate((element) => element.scrollTop)).toBe(shapeScrollBefore);
       await expect(page.locator("#objectVectorStudioV2RenderSurface [data-shape-id='rectangle-1']")).toHaveClass(/is-selected/);
       await expect(page.locator("#statusLog")).toHaveValue(/OK Selected shape from object tile shape list: rectangle-1 \(rectangle\)\./);
 
@@ -1681,7 +1703,12 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       const exportedSchemaValidation = await page.evaluate((payload) => window.__objectVectorStudioV2App.schemaService.validatePayload(payload), exportedPayload);
       expect(exportedSchemaValidation).toEqual({ errors: [], ok: true, payload: exportedPayload });
 
+      const objectScrollBefore = await page.locator("#objectVectorStudioV2ObjectsContent").evaluate((element) => {
+        element.scrollTop = 120;
+        return element.scrollTop;
+      });
       await page.locator('.object-vector-studio-v2__object-tile[data-object-id="object-2"]').evaluate((button) => button.click());
+      await expect.poll(async () => page.locator("#objectVectorStudioV2ObjectsContent").evaluate((element) => element.scrollTop)).toBe(objectScrollBefore);
       await expect(page.locator('[data-object-id="object-2"]')).toHaveAttribute("aria-pressed", "true");
       await expect(page.locator("#objectVectorStudioV2ObjectNameInput")).toHaveValue("Object 2");
       await expect(page.locator("#objectVectorStudioV2ObjectPreviewFooter")).toContainText("Object ID: object-2");
@@ -5334,6 +5361,11 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#objectVectorStudioV2ObjectTiles")).toContainText("Asteroids Ship");
       await expect(page.locator("#objectVectorStudioV2ObjectTiles")).toContainText("Large Asteroid");
       await expect(page.locator("#objectVectorStudioV2ObjectTiles")).toContainText("Large UFO");
+      const smallUfoTile = page.locator('.object-vector-studio-v2__object-tile[data-object-id="object.asteroids.ufo.small"]');
+      await smallUfoTile.scrollIntoViewIfNeeded();
+      await smallUfoTile.click();
+      await expect(smallUfoTile).toContainText("objects > Small UFO");
+      await expect(smallUfoTile.locator("[data-object-tile-shape-id] .object-vector-studio-v2__shape-select-label")).toHaveText(["0. small-ufo-body", "1. small-ufo-canopy"]);
       await page.locator('button[aria-controls="objectVectorStudioV2DependencyGraphContent"]').click();
       await expect(page.locator("#objectVectorStudioV2DependencyGraph")).toContainText("Deferred reusable library capability");
       await expect(page.locator("#objectVectorStudioV2DependencyGraph")).toContainText("asset.asteroids.ship");

tools/object-vector-studio-v2/js/ToolStarterApp.js

@@ -860,10 +860,12 @@ export class ToolStarterApp {
   }
 
   renderObjectTiles() {
+    const previousScrollTop = this.elements.objectsContent.scrollTop;
     this.updateObjectDetailsHeader(this.currentPayload.objects.length, this.selectedObject()?.shapes.length || 0);
     this.elements.objectTiles.replaceChildren();
     if (!this.currentPayload.objects.length) {
       this.elements.objectTiles.append(this.createEmptyObjectTile());
+      this.restoreObjectsScroll(previousScrollTop);
       return;
     }
 
@@ -872,6 +874,7 @@ export class ToolStarterApp {
       const tile = this.createEmptyObjectTile();
       tile.textContent = "No objects match the current tag or search filter.";
       this.elements.objectTiles.append(tile);
+      this.restoreObjectsScroll(previousScrollTop);
       return;
     }
 
@@ -925,6 +928,12 @@ export class ToolStarterApp {
       }
       this.elements.objectTiles.append(tile);
     });
+    this.restoreObjectsScroll(previousScrollTop);
+  }
+
+  restoreObjectsScroll(scrollTop) {
+    const maxScrollTop = Math.max(0, this.elements.objectsContent.scrollHeight - this.elements.objectsContent.clientHeight);
+    this.elements.objectsContent.scrollTop = Math.min(scrollTop, maxScrollTop);
   }
 
   createObjectTileControl(object, kind) {
@@ -972,7 +981,7 @@ export class ToolStarterApp {
       selectButton.setAttribute("aria-pressed", String(this.selectedShapeIds.has(shape.id)));
       const label = document.createElement("span");
       label.className = "object-vector-studio-v2__shape-select-label";
-      label.textContent = `objects > ${object.name} > ${shape.order}. ${shape.id}`;
+      label.textContent = `${shape.order}. ${shape.id}`;
       const eyeIcon = this.createIconSpan("eye", shape.visible);
       eyeIcon.classList.add("object-vector-studio-v2__shape-eye-inline");
       eyeIcon.dataset.shapeVisibilityId = shape.id;

tools/object-vector-studio-v2/js/bootstrap.js

@@ -59,6 +59,7 @@ window.addEventListener("DOMContentLoaded", () => {
       objectTagList: requireElement("#objectVectorStudioV2ObjectTagList"),
       objectTypeInput: requireElement("#objectVectorStudioV2ObjectTypeInput"),
       objectTypeOptions: requireElement("#objectVectorStudioV2ObjectTypeOptions"),
+      objectsContent: requireElement("#objectVectorStudioV2ObjectsContent"),
       objectTiles: requireElement("#objectVectorStudioV2ObjectTiles"),
       paintModeButton: requireElement("#objectVectorStudioV2PaintModeButton"),
       paletteSortButtons: Array.from(document.querySelectorAll("[data-palette-sort]")),

tools/object-vector-studio-v2/styles/toolStarter.css

@@ -856,7 +856,7 @@ textarea:hover {
 .object-vector-studio-v2__object-tile-copy {
   min-width: 0;
   display: grid;
-  gap: 4px;
+  gap: 2px;
 }
 
 .object-vector-studio-v2__object-select {
@@ -882,8 +882,7 @@ textarea:hover {
   gap: 4px;
 }
 
-.object-vector-studio-v2__object-tile-control,
-.object-vector-studio-v2__object-tile-shape-row button {
+.object-vector-studio-v2__object-tile-control {
   position: relative;
   z-index: 3;
   width: 34px;
@@ -895,21 +894,27 @@ textarea:hover {
 .object-vector-studio-v2__object-tile-shapes {
   grid-column: 1 / -1;
   display: grid;
-  gap: 6px;
+  gap: 2px;
   border-top: 1px solid var(--tool-starter-line);
-  padding-top: 8px;
+  padding-top: 5px;
 }
 
 .object-vector-studio-v2__object-tile-shape-row {
   display: block;
+  font-size: 0.74rem;
+  line-height: 1.12;
 }
 
 .object-vector-studio-v2__shape-select {
   width: 100% !important;
+  min-height: 24px;
+  position: relative;
+  z-index: 3;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
+  padding: 3px 6px !important;
   text-align: left;
 }
 
@@ -1006,11 +1011,13 @@ textarea:hover {
 
 .object-vector-studio-v2__object-tile-name {
   font-weight: 800;
+  line-height: 1.14;
 }
 
 .object-vector-studio-v2__object-tile-meta {
   color: var(--tool-starter-muted);
-  font-size: 0.88rem;
+  font-size: 0.78rem;
+  line-height: 1.16;
   overflow-wrap: anywhere;
 }