Center GUI pane indicators using cached font ink bounds

1 files changed, 43 insertions, 0 deletions

diff --git a/test/web-snapshots/touch.mjs b/test/web-snapshots/touch.mjs
index 1351712e..69f8a4a5 100644
--- a/test/web-snapshots/touch.mjs
+++ b/test/web-snapshots/touch.mjs
@@ -105,6 +105,41 @@ export default async function ({ grid, touch, wait, stable, delay, evaluate, mou
         tagValues[1]=2;tagValues[5]=1;bytes[40]=32;data.setUint32(48,0x778899,true);
         renderer.render();
         result.paneMarks=marks(renderer.tagRoot.querySelector('[data-tag-grip]'));
+        const inkCenter=canvas=>{
+            const pixels=canvas.getContext('2d').getImageData(0,0,canvas.width,canvas.height).data;
+            let minX=canvas.width,minY=canvas.height,maxX=-1,maxY=-1;
+            for(let y=0;y<canvas.height;y++) for(let x=0;x<canvas.width;x++) if(pixels[(y*canvas.width+x)*4+3]>8) {
+                minX=Math.min(minX,x);maxX=Math.max(maxX,x);minY=Math.min(minY,y);maxY=Math.max(maxY,y);
+            }
+            return {x:(minX+maxX+1-canvas.width)/2,y:(minY+maxY+1-canvas.height)/2,visible:maxX>=0};
+        };
+        Object.assign(renderer,{cellWidth:20,cellHeight:40,taglineWidth:10,taglineHeight:28});
+        renderer.cells[2].style.font='18px serif';
+        renderer.resetGripMetrics();
+        result.modeGlyphs=[];
+        for(const glyph of ['^','$']) {
+            bytes[40]=glyph.charCodeAt(0);
+            renderer.render();
+            const canvas=renderer.tagRoot.querySelector('canvas[data-tag-grip]');
+            const center=inkCenter(canvas),size=renderer.gripMetrics.size;
+            renderer.render();
+            result.modeGlyphs.push({...center,suppressed:renderer.cells[2].textContent===' ',
+                reused:renderer.tagRoot.querySelector('canvas[data-tag-grip]')===canvas,
+                measuredOnce:renderer.gripMetrics.size===size});
+        }
+        const glyphCell=renderer.cells[2];
+        glyphCell.style.font='italic 24px serif';
+        renderer.resetGripMetrics();
+        const italic=renderer.drawGripGlyph(glyphCell,{text:'j',attrs:2},40,40);
+        result.italic=inkCenter(italic);
+        const saved=renderer.gripMetrics.values().next().value;
+        renderer.drawGripGlyph(glyphCell,{text:'j',attrs:2},40,40);
+        result.italic.cached=renderer.gripMetrics.size===1 && renderer.gripMetrics.values().next().value===saved;
+        document.fonts.dispatchEvent(new Event('loadingdone'));
+        result.fontInvalidation=renderer.gripMetrics.size===0 && renderer.gripFonts.size===0 && renderer.tagNodes.size===0;
+        glyphCell.style.font='italic 30px serif';
+        renderer.drawGripGlyph(glyphCell,{text:'j',attrs:2},40,40);
+        result.fontRemeasured=renderer.gripMetrics.values().next().value!==saved && [...renderer.gripFonts.values()][0].includes('30px');
         root.remove();return result;
     })()`);
     assert.deepEqual(compactGeometry.bands, [[0,10],[10,20],[30,20]], "compact headers release real height to additional body rows");
@@ -123,6 +158,14 @@ export default async function ({ grid, touch, wait, stable, delay, evaluate, mou
     assert.deepEqual(compactGeometry.columnMarks,[],"column handles have no mark");
     assert.deepEqual(compactGeometry.paneMarks,[[7,33,6],[7,36,6]],"pane handles keep their physical mark geometry");
 
+    for (const glyph of [...compactGeometry.modeGlyphs,compactGeometry.italic]) {
+        assert(glyph.visible,"mode indicator has visible rasterized ink");
+        assert(Math.abs(glyph.x)<=1 && Math.abs(glyph.y)<=1,`ink center offset ${glyph.x},${glyph.y}`);
+    }
+    for (const glyph of compactGeometry.modeGlyphs) assert(glyph.suppressed && glyph.reused && glyph.measuredOnce,"mode ink is drawn once and cached");
+    assert(compactGeometry.italic.cached,"asymmetric italic glyph reuses cached ink bounds");
+    assert(compactGeometry.fontInvalidation && compactGeometry.fontRemeasured,"font loading clears cached faces and bounds before remeasurement");
+
     let frame = await grid();
     assert.equal(tags(frame).length, 1);
     styled(frame);