fix: fix MTEXT top-left alignment and cursor anchoring (#7)

Author: mlightcad

packages/mtext-input-box/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlightcad/mtext-input-box",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

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

@@ -77,6 +77,7 @@ export class MTextInputBox {
 
   private width: number;
   private position: THREE.Vector3;
+  private mtextInsertionOffset = new THREE.Vector3(0, 0, 0);
   private enableWordWrap: boolean;
 
   private mtextString = '';
@@ -322,6 +323,9 @@ export class MTextInputBox {
     });
 
     const cursorStyle: Partial<CursorStyle> = { ...(options.cursorStyle ?? {}) };
+    if (cursorStyle.height === undefined && cursorStyle.heightMode !== 'fixed') {
+      cursorStyle.height = 0;
+    }
     cursorStyle.color ??= '#ffffff';
     cursorStyle.glowColor ??= '#ffffff';
 
@@ -886,14 +890,20 @@ export class MTextInputBox {
 
   /** Returns cursor world position for IME/caret anchoring. */
   public getCursorWorldPosition(): { x: number; y: number; z: number } {
-    const cursor = this.cursorLogic.getCursorState().position;
+    const cursorState = this.cursorLogic.getCursorState();
+    const cursor = this.getActiveCursorRenderState(cursorState.position, cursorState.lineInfo.height).position;
     return {
       x: this.position.x + cursor.x,
       y: this.position.y + cursor.y,
       z: this.position.z
     };
   }
 
+  /** Returns the MTEXT insertion point that preserves the editor's visual top-left placement. */
+  public getMTextInsertionPoint(): THREE.Vector3 {
+    return this.position.clone().add(this.mtextInsertionOffset);
+  }
+
   /** Returns current internal state snapshot. */
   public getState(): EditorState {
     return {
@@ -1179,6 +1189,7 @@ export class MTextInputBox {
 
   private relayout(): void {
     if (!this.rendererReady) {
+      this.mtextInsertionOffset.set(0, 0, 0);
       const fallback = this.createFallbackCharBoxes();
       this.layoutContainer = fallback.containerBox;
       this.updateCursorData(fallback.charBoxes, fallback.lineBreakIndices, fallback.lineLayouts);
@@ -1201,12 +1212,14 @@ export class MTextInputBox {
       this.replaceRenderedObject(object);
 
       const rendered = this.extractBoxesFromRenderedObject(object);
+      this.mtextInsertionOffset.set(0, 0, 0);
       this.normalizeRenderedTopAlignment(object, rendered);
       this.layoutContainer = rendered.containerBox;
       this.updateCursorData(rendered.charBoxes, rendered.lineBreakIndices, rendered.lineLayouts);
       this.updateBoundingBoxGeometry();
     } catch (error) {
       console.error('[mtext-input-box] Failed to sync render MTEXT', error);
+      this.mtextInsertionOffset.set(0, 0, 0);
       const fallback = this.createFallbackCharBoxes();
       this.layoutContainer = fallback.containerBox;
       this.updateCursorData(fallback.charBoxes, fallback.lineBreakIndices, fallback.lineLayouts);
@@ -1349,9 +1362,11 @@ export class MTextInputBox {
     object: MTextObject,
     rendered: CursorLayoutData
   ): void {
-    const dy = -rendered.containerBox.y;
+    const topY = rendered.containerBox.y + rendered.containerBox.height;
+    const dy = -topY;
     if (!Number.isFinite(dy) || Math.abs(dy) < 1e-8) return;
 
+    this.mtextInsertionOffset.set(0, dy, 0);
     object.position.y += dy;
     object.updateMatrixWorld(true);
 
@@ -1393,38 +1408,39 @@ export class MTextInputBox {
     const lineLayouts: LineLayoutInput[] = [];
 
     let x = 0;
-    let y = 0;
-    let maxY = lineHeight;
-    lineLayouts.push({ y: y + lineHeight / 2, height: lineHeight });
+    let lineTop = 0;
+    let minY = -lineHeight;
+    lineLayouts.push({ y: lineTop - lineHeight / 2, height: lineHeight });
 
     for (const char of this.getChars()) {
       if (char === '\n') {
         lineBreakIndices.push(charBoxes.length);
         x = 0;
-        y += lineHeight;
-        maxY = Math.max(maxY, y + lineHeight);
-        lineLayouts.push({ y: y + lineHeight / 2, height: lineHeight });
+        lineTop -= lineHeight;
+        minY = Math.min(minY, lineTop - lineHeight);
+        lineLayouts.push({ y: lineTop - lineHeight / 2, height: lineHeight });
         continue;
       }
 
       const width = Math.max(1, this.currentFormat.fontSize * 0.6);
       if (this.enableWordWrap && x > 0 && x + width > this.width) {
         lineBreakIndices.push(charBoxes.length);
         x = 0;
-        y += lineHeight;
+        lineTop -= lineHeight;
+        minY = Math.min(minY, lineTop - lineHeight);
+        lineLayouts.push({ y: lineTop - lineHeight / 2, height: lineHeight });
       }
 
-      charBoxes.push({ x, y: y + lineHeight / 2, width, height: lineHeight });
+      charBoxes.push({ x, y: lineTop - lineHeight / 2, width, height: lineHeight });
       x += width;
-      maxY = Math.max(maxY, y + lineHeight);
     }
 
     return {
       containerBox: {
         x: 0,
-        y: 0,
+        y: minY,
         width: this.width,
-        height: Math.max(1, maxY)
+        height: Math.max(1, -minY)
       },
       charBoxes,
       lineBreakIndices,
@@ -1763,7 +1779,7 @@ export class MTextInputBox {
           // Best source: renderer-provided line layout already represents
           // the actual first-line center in editor local coordinates.
           position: { x: fallbackPosition.x, y: firstLine.y },
-          height: Math.max(1, lineHeight * 0.8)
+          height: lineHeight
         };
       }
 
@@ -1772,12 +1788,12 @@ export class MTextInputBox {
         position: {
           x: fallbackPosition.x,
           // When explicit line layout is unavailable, infer first-line center
-          // from top-left container coordinates:
-          //   lineCenterY = containerTopY + lineHeight / 2
+          // from the container's lower edge in y-up coordinates:
+          //   lineCenterY = containerBottomY + lineHeight / 2
           // This keeps caret aligned with the top row for empty MTEXT.
           y: this.layoutContainer.y + inferredLineHeight / 2
         },
-        height: Math.max(1, inferredLineHeight * 0.8)
+        height: inferredLineHeight
       };
     }
 
@@ -1796,7 +1812,7 @@ export class MTextInputBox {
         }
       }
 
-      const emptyLineHeight = (line.height ?? fallbackHeight) * 0.8;
+      const emptyLineHeight = line.height ?? fallbackHeight;
       return {
         position: { x: fallbackPosition.x, y: line.y ?? fallbackPosition.y },
         height: Math.max(1, emptyLineHeight)

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

@@ -306,7 +306,69 @@ describe('MTextInputBox cursor/document index mapping', () => {
     });
   });
 
-  test('anchors empty-content cursor to first line center from container top', () => {
+  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 (this: any, obj: any, data: any) => void;
+    const object = {
+      position: new THREE.Vector3(0, 0, 0),
+      updateMatrixWorld: vi.fn()
+    };
+    const context = {
+      mtextInsertionOffset: new THREE.Vector3(0, 0, 0)
+    };
+    const rendered = {
+      containerBox: { x: 0, y: -14, width: 120, height: 24 },
+      charBoxes: [{ x: 0, y: 5, width: 10, height: 10 }],
+      lineLayouts: [{ y: 5, height: 10 }]
+    };
+
+    normalizeRenderedTopAlignment.call(context, object, rendered);
+
+    expect(object.position.y).toBe(-10);
+    expect(object.updateMatrixWorld).toHaveBeenCalledWith(true);
+    expect(context.mtextInsertionOffset.toArray()).toEqual([0, -10, 0]);
+    expect(rendered.containerBox).toEqual({ x: 0, y: -24, width: 120, height: 24 });
+    expect(rendered.charBoxes[0].y).toBe(-5);
+    expect(rendered.lineLayouts[0].y).toBe(-5);
+  });
+
+  test('returns persisted MTEXT insertion point with render alignment offset', () => {
+    const proto = MTextInputBox.prototype as unknown as Record<string, (...args: any[]) => any>;
+    const getMTextInsertionPoint = proto.getMTextInsertionPoint as (this: any) => THREE.Vector3;
+    const context = {
+      position: new THREE.Vector3(10, 20, 2),
+      mtextInsertionOffset: new THREE.Vector3(0, -10, 0)
+    };
+
+    const result = getMTextInsertionPoint.call(context);
+
+    expect(result.toArray()).toEqual([10, 10, 2]);
+    expect(result).not.toBe(context.position);
+  });
+
+  test('fallback layout extends below the top-left insertion point', () => {
+    const proto = MTextInputBox.prototype as unknown as Record<string, (...args: any[]) => any>;
+    const createFallbackCharBoxes = proto.createFallbackCharBoxes as (this: any) => {
+      containerBox: { x: number; y: number; width: number; height: number };
+      charBoxes: Array<{ x: number; y: number; width: number; height: number }>;
+      lineLayouts: Array<{ y: number; height: number }>;
+    };
+    const context = {
+      width: 120,
+      currentFormat: { fontSize: 10 },
+      enableWordWrap: true,
+      getChars: () => ['A'],
+      getFallbackLineAdvance: () => 15
+    };
+
+    const result = createFallbackCharBoxes.call(context);
+
+    expect(result.containerBox).toEqual({ x: 0, y: -15, width: 120, height: 15 });
+    expect(result.lineLayouts).toEqual([{ y: -7.5, height: 15 }]);
+    expect(result.charBoxes[0]).toMatchObject({ y: -7.5, height: 15 });
+  });
+
+  test('anchors empty-content cursor to first line center below container top', () => {
     const proto = MTextInputBox.prototype as unknown as Record<string, (...args: any[]) => any>;
     const getActiveCursorRenderState = proto.getActiveCursorRenderState as (
       this: any,
@@ -318,17 +380,17 @@ describe('MTextInputBox cursor/document index mapping', () => {
       cursorLogic: {
         getCharBoxes: () => [],
         getCurrentIndex: () => 0,
-        getCurrentLineInfo: () => ({ startIndex: 0, endIndex: -1, charCount: 0, y: 220, height: 220 })
+        getCurrentLineInfo: () => ({ startIndex: 0, endIndex: -1, charCount: 0, y: -24, height: 24 })
       },
-      latestCursorLayoutData: { containerBox: { x: 0, y: 200, width: 300, height: 220 }, charBoxes: [] },
-      layoutContainer: { x: 0, y: 200, width: 300, height: 220 },
+      latestCursorLayoutData: { containerBox: { x: 0, y: -24, width: 300, height: 24 }, charBoxes: [] },
+      layoutContainer: { x: 0, y: -24, width: 300, height: 24 },
       getFallbackLineAdvance: () => 24
     };
 
-    const result = getActiveCursorRenderState.call(context, { x: 0, y: 220 }, 220);
+    const result = getActiveCursorRenderState.call(context, { x: 0, y: -24 }, 24);
 
-    expect(result.position).toEqual({ x: 0, y: 212 });
-    expect(result.height).toBeCloseTo(19.2);
+    expect(result.position).toEqual({ x: 0, y: -12 });
+    expect(result.height).toBeCloseTo(24);
   });
 
   test('handleKeyDown closes editor on Escape', () => {