fix: tighten editor vertical bounds from glyphs vs line strips

Author: mlightcad

package.json

@@ -11,7 +11,10 @@
       "esbuild",
       "nx",
       "vue-demi"
-    ]
+    ],
+    "overrides": {
+      "@mlightcad/mtext-renderer": "../../../mtext-renderer/packages/mtext-renderer"
+    }
   },
   "scripts": {
     "build": "pnpm --filter @mlightcad/text-box-cursor build && pnpm --filter @mlightcad/mtext-input-box build && pnpm --filter @mlightcad/demo-canvas-cursor build && pnpm --filter @mlightcad/demo-three-cursor build && pnpm --filter @mlightcad/demo-mtext-input-box build",

packages/mtext-input-box/package.json

@@ -16,7 +16,7 @@
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
     "lint": "eslint src tests",
-    "test": "vitest run --config ./vitest.config.ts"
+    "test": "vitest run"
   },
   "dependencies": {
     "@mlightcad/text-box-cursor": "workspace:*"
@@ -33,6 +33,7 @@
     "@typescript-eslint/parser": "^8.41.0",
     "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.8",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.41.0",
     "vitest": "^3.2.4"

packages/mtext-input-box/src/viewer/viewer.ts

@@ -1468,6 +1468,97 @@ export class MTextInputBox {
     this.syncStateFromCursor();
   }
 
+  /**
+   * Editor vertical bounds for the selection box / bounding overlay.
+   * Renderer `layout.lines` strips are often taller than actual glyphs (leading
+   * above the first row, uniform line-height slots, etc.). When a line has
+   * glyph boxes, use those for that row; keep the strip only for empty lines.
+   */
+  private computeEditorVerticalBounds(
+    lineLayouts: LineLayoutInput[],
+    charBoxes: Box[],
+    objectLocal: Box
+  ): { minY: number; maxY: number } {
+    const fallback = (): { minY: number; maxY: number } => ({
+      minY: objectLocal.y - objectLocal.height / 2,
+      maxY: objectLocal.y + objectLocal.height / 2
+    });
+
+    const overlapY = (a0: number, a1: number, b0: number, b1: number): boolean =>
+      a0 < b1 + 1e-4 && a1 > b0 - 1e-4;
+
+    if (lineLayouts.length === 0 && charBoxes.length === 0) {
+      return fallback();
+    }
+
+    if (lineLayouts.length === 0) {
+      let minY = Number.POSITIVE_INFINITY;
+      let maxY = Number.NEGATIVE_INFINITY;
+      for (const b of charBoxes) {
+        minY = Math.min(minY, b.y - b.height / 2);
+        maxY = Math.max(maxY, b.y + b.height / 2);
+      }
+      return Number.isFinite(minY) && Number.isFinite(maxY) && maxY >= minY
+        ? { minY, maxY }
+        : fallback();
+    }
+
+    if (charBoxes.length === 0) {
+      let minY = Number.POSITIVE_INFINITY;
+      let maxY = Number.NEGATIVE_INFINITY;
+      for (const line of lineLayouts) {
+        const lo = line.y - line.height / 2;
+        const hi = line.y + line.height / 2;
+        minY = Math.min(minY, lo);
+        maxY = Math.max(maxY, hi);
+      }
+      return Number.isFinite(minY) && Number.isFinite(maxY) && maxY >= minY
+        ? { minY, maxY }
+        : fallback();
+    }
+
+    let minY = Number.POSITIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+
+    for (const line of lineLayouts) {
+      const lo = line.y - line.height / 2;
+      const hi = line.y + line.height / 2;
+      const onLine = charBoxes.filter((b) => {
+        const c0 = b.y - b.height / 2;
+        const c1 = b.y + b.height / 2;
+        return overlapY(c0, c1, lo, hi);
+      });
+      if (onLine.length === 0) {
+        minY = Math.min(minY, lo);
+        maxY = Math.max(maxY, hi);
+      } else {
+        for (const b of onLine) {
+          minY = Math.min(minY, b.y - b.height / 2);
+          maxY = Math.max(maxY, b.y + b.height / 2);
+        }
+      }
+    }
+
+    for (const b of charBoxes) {
+      const c0 = b.y - b.height / 2;
+      const c1 = b.y + b.height / 2;
+      const overlapsAnyLine = lineLayouts.some((line) => {
+        const lo = line.y - line.height / 2;
+        const hi = line.y + line.height / 2;
+        return overlapY(c0, c1, lo, hi);
+      });
+      if (!overlapsAnyLine) {
+        minY = Math.min(minY, c0);
+        maxY = Math.max(maxY, c1);
+      }
+    }
+
+    if (!Number.isFinite(minY) || !Number.isFinite(maxY) || maxY < minY) {
+      return fallback();
+    }
+    return { minY, maxY };
+  }
+
   private extractBoxesFromRenderedObject(object: MTextObject): CursorLayoutData {
     const layout = object.createLayoutData();
     const charBoxes: Box[] = [];
@@ -1495,17 +1586,11 @@ export class MTextInputBox {
       .filter((value) => value >= 0 && value <= charBoxes.length);
 
     const local = this.toLocalBox(object.box);
-    let containerTop = local.y - local.height / 2;
-    let containerBottom = local.y + local.height / 2;
-
-    if (lineLayouts.length > 0) {
-      for (const line of lineLayouts) {
-        const top = line.y - line.height / 2;
-        const bottom = line.y + line.height / 2;
-        containerTop = Math.min(containerTop, top);
-        containerBottom = Math.max(containerBottom, bottom);
-      }
-    }
+    const { minY: containerTop, maxY: containerBottom } = this.computeEditorVerticalBounds(
+      lineLayouts,
+      charBoxes,
+      local
+    );
 
     const containerBox = {
       x: local.x,
@@ -1515,7 +1600,12 @@ export class MTextInputBox {
     };
     containerBox.x = 0;
     containerBox.width = this.width;
-    containerBox.height = Math.max(containerBox.height, this.getFallbackLineAdvance());
+    const minHeight = this.getFallbackLineAdvance();
+    if (containerBox.height < minHeight) {
+      const delta = minHeight - containerBox.height;
+      containerBox.y -= delta;
+      containerBox.height = minHeight;
+    }
 
     return {
       containerBox,

packages/mtext-input-box/tests/viewer.mapping.test.ts

@@ -253,7 +253,8 @@ describe('MTextInputBox cursor/document index mapping', () => {
       position: { x: 10, y: 20 },
       width: 120,
       getFallbackLineAdvance: () => 16,
-      toLocalBox: proto.toLocalBox
+      toLocalBox: proto.toLocalBox,
+      computeEditorVerticalBounds: proto.computeEditorVerticalBounds
     };
 
     const object = {
@@ -306,6 +307,106 @@ describe('MTextInputBox cursor/document index mapping', () => {
     });
   });
 
+  test('vertical container ignores inflated object.box when layout lines/chars exist', () => {
+    const proto = MTextInputBox.prototype as unknown as Record<string, (...args: any[]) => any>;
+    const context = {
+      position: { x: 10, y: 20 },
+      width: 120,
+      getFallbackLineAdvance: () => 16,
+      toLocalBox: proto.toLocalBox,
+      computeEditorVerticalBounds: proto.computeEditorVerticalBounds
+    };
+
+    const object = {
+      // Taller than glyph + line union (extra space above first line).
+      box: new THREE.Box3(new THREE.Vector3(10, 10, 0), new THREE.Vector3(70, 40, 0)),
+      createLayoutData: () => ({
+        chars: [
+          {
+            type: 'CHAR',
+            box: new THREE.Box3(new THREE.Vector3(10, 20, 0), new THREE.Vector3(20, 30, 0)),
+            char: 'A',
+            children: []
+          },
+          {
+            type: 'CHAR',
+            box: new THREE.Box3(new THREE.Vector3(10, 6, 0), new THREE.Vector3(18, 16, 0)),
+            char: 'B',
+            children: []
+          }
+        ],
+        lines: [
+          { y: 25, height: 10, breakIndex: 1 },
+          { y: 11, height: 10, breakIndex: undefined }
+        ]
+      })
+    };
+
+    const extractBoxesFromRenderedObject = proto.extractBoxesFromRenderedObject as (
+      this: any,
+      obj: any
+    ) => { containerBox: { x: number; y: number; width: number; height: number } };
+
+    const result = extractBoxesFromRenderedObject.call(context, object);
+
+    expect(result.containerBox).toEqual({
+      x: 0,
+      y: -14,
+      width: 120,
+      height: 24
+    });
+  });
+
+  test('row bounds use glyph boxes when line strip is taller than glyphs on that row', () => {
+    const proto = MTextInputBox.prototype as unknown as Record<string, (...args: any[]) => any>;
+    const context = {
+      position: { x: 10, y: 20 },
+      width: 120,
+      getFallbackLineAdvance: () => 16,
+      toLocalBox: proto.toLocalBox,
+      computeEditorVerticalBounds: proto.computeEditorVerticalBounds
+    };
+
+    const object = {
+      box: new THREE.Box3(new THREE.Vector3(10, 14, 0), new THREE.Vector3(70, 30, 0)),
+      createLayoutData: () => ({
+        chars: [
+          {
+            type: 'CHAR',
+            box: new THREE.Box3(new THREE.Vector3(10, 20, 0), new THREE.Vector3(20, 30, 0)),
+            char: 'A',
+            children: []
+          },
+          {
+            type: 'CHAR',
+            box: new THREE.Box3(new THREE.Vector3(10, 6, 0), new THREE.Vector3(18, 16, 0)),
+            char: 'B',
+            children: []
+          }
+        ],
+        lines: [
+          // Same glyphs as the default test, but an oversized first-line strip (leading slot).
+          { y: 25, height: 40, breakIndex: 1 },
+          { y: 11, height: 10, breakIndex: undefined }
+        ]
+      })
+    };
+
+    const extractBoxesFromRenderedObject = proto.extractBoxesFromRenderedObject as (
+      this: any,
+      obj: any
+    ) => { containerBox: { x: number; y: number; width: number; height: number } };
+
+    const result = extractBoxesFromRenderedObject.call(context, object);
+
+    expect(result.containerBox).toEqual({
+      x: 0,
+      y: -14,
+      width: 120,
+      height: 24
+    });
+  });
+
   test('normalizes rendered content so position stays at the top-left edge', () => {
     const proto = MTextInputBox.prototype as unknown as Record<string, (...args: any[]) => any>;
     const normalizeRenderedTopAlignment = proto.normalizeRenderedTopAlignment as (