Separate pane and column grip hit areas from tagline text with a small gap

1 files changed, 6 insertions, 5 deletions

diff --git a/src/web/app.mjs b/src/web/app.mjs
index 65e1240d..477186a3 100644
--- a/src/web/app.mjs
+++ b/src/web/app.mjs
@@ -55,15 +55,16 @@ export class DomRenderer {
     const cursorBar = this.wasm.pardes_cursor_bar() !== 0;
     const raw = new Array(count);
     const tagCovered = new Uint8Array(count);
-    const tagGrips = new Map();
+    const tagPrefixBands = new Map();
     if (this.wasm.pardes_tag_layer_limit) {
       for (let i = 0; i < this.wasm.pardes_tag_layer_limit(); i++) {
         const val = field => this.wasm.pardes_tag_layer_value(i, field);
         if (!val(0)) continue;
         const gripCols = this.wasm.pardes_grip_columns?.() ?? 2;
-        if (val(1) !== 0 && val(4) >= gripCols && this.cellHeight) {
+        const textInset = this.wasm.pardes_tag_text_inset?.() ?? gripCols;
+        if (val(1) !== 0 && val(4) >= textInset && this.cellHeight) {
           const offset = this.wasm.pardes_tagline_band_offset(val(5),rows*this.cellHeight*256,Math.round(this.cellHeight*256),Math.round(this.taglineHeight*256))/256;
-          for (let x = val(4)-gripCols; x < val(4); x++) tagGrips.set(val(5)*cols+x,offset);
+          for (let x = val(4)-textInset; x < val(4); x++) tagPrefixBands.set(val(5)*cols+x,offset);
         }
         for (let x = val(4); x < Math.min(cols, val(4) + val(6)); x++) {
           if (val(5) < rows) tagCovered[val(5) * cols + x] = 1;
@@ -83,7 +84,7 @@ export class DomRenderer {
       const cursor = x === cursorX && y === cursorY;
       const cell = this.cells[index];
       cell.style.visibility = tagCovered[index] ? "hidden" : "";
-      const gripOffset = tagGrips.get(index);
+      const gripOffset = tagPrefixBands.get(index);
       cell.style.height = gripOffset === undefined ? "" : `${this.taglineHeight}px`;
       cell.style.lineHeight = gripOffset === undefined ? "" : `${this.taglineHeight}px`;
       cell.style.marginTop = gripOffset === undefined ? "" : `${gripOffset}px`;
@@ -121,7 +122,7 @@ export class DomRenderer {
       const bytes = new Uint8Array(this.wasm.memory.buffer,ptr,cols*CELL_SIZE);
       const offset = this.wasm.pardes_tagline_band_offset(values[5],this.rowCount*bh*256,Math.round(bh*256),Math.round(th*256))/256;
       const gripCols = this.wasm.pardes_grip_columns?.() ?? 2;
-      const gripX = values[4] - gripCols;
+      const gripX = values[4] - (this.wasm.pardes_tag_text_inset?.() ?? gripCols);
       const gripCell = canonical[values[5]*this.cols+gripX];
       const grip = values[1] === 2 && gripX >= 0 && gripCell?.text === " " && th >= 6 && tw >= 3;
       const geometry = [bw,bh,tw,th,offset,...values,grip,gripCell?.fg].join(":");