1 files changed, 25 insertions, 13 deletions
diff --git a/src/web/app.mjs b/src/web/app.mjs
index 280239d5..03829178 100644
--- a/src/web/app.mjs
+++ b/src/web/app.mjs
@@ -64,13 +64,16 @@ export class DomRenderer {
         if (!val(0)) continue;
         const gripCols = this.wasm.pardes_grip_columns?.() ?? 2;
         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)-textInset; x < val(4); x++) tagPrefixBands.set(val(5)*cols+x,offset);
-          if (val(1) === 2) paneIndicators.add(val(5)*cols+val(4)-textInset);
-        }
-        for (let x = val(4); x < Math.min(cols, val(4) + val(6)); x++) {
-          if (val(5) < rows) tagCovered[val(5) * cols + x] = 1;
+        // A row to each line of a taller tag.
+        for (let y = val(5); y < val(5) + Math.max(1, val(11)); y++) {
+          if (val(1) !== 0 && val(4) >= textInset && this.cellHeight) {
+            const offset = this.wasm.pardes_tagline_band_offset(y,rows*this.cellHeight*256,Math.round(this.cellHeight*256),Math.round(this.taglineHeight*256))/256;
+            for (let x = val(4)-textInset; x < val(4); x++) tagPrefixBands.set(y*cols+x,offset);
+            if (val(1) === 2) paneIndicators.add(y*cols+val(4)-textInset);
+          }
+          for (let x = val(4); x < Math.min(cols, val(4) + val(6)); x++) {
+            if (y < rows) tagCovered[y * cols + x] = 1;
+          }
         }
       }
     }
@@ -118,27 +121,35 @@ export class DomRenderer {
     const nodes = [];
     const bw = this.cellWidth, bh = this.cellHeight, tw = this.taglineWidth, th = this.taglineHeight;
     for (let i = 0; i < this.wasm.pardes_tag_layer_limit(); i++) {
-      const values = Array.from({length:11}, (_,field) => this.wasm.pardes_tag_layer_value(i,field));
-      const cols = values[0];
+      const layerValues = Array.from({length:13}, (_,field) => this.wasm.pardes_tag_layer_value(i,field));
+      const cols = layerValues[0];
       if (!cols) continue;
       const ptr = this.wasm.pardes_tag_layer_cells(i);
       if (!ptr) continue;
-      const bytes = new Uint8Array(this.wasm.memory.buffer,ptr,cols*CELL_SIZE);
+      // A row to each line of a taller tag, each drawn as a band of its own.
+      for (let line = 0; line < Math.max(1, layerValues[11]); line++) {
+      const key = i*64+line;
+      const values = layerValues.slice(0,11);
+      values[5] = layerValues[5] + line;
+      values[7] = 1;
+      values[8] = layerValues[12] === line ? layerValues[8] : 65535;
+      const bytes = new Uint8Array(this.wasm.memory.buffer,ptr+line*cols*CELL_SIZE,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] - (this.wasm.pardes_tag_text_inset?.() ?? gripCols);
       const gripCell = canonical[values[5]*this.cols+gripX];
       const grip = values[1] === 2 && gripX >= 0 && gripCell && th >= 1 && tw >= 1;
       const geometry = [bw,bh,tw,th,offset,...values,grip,gripCell?.fg,gripCell?.bg,gripCell?.attrs,gripCell?.text,globalThis.devicePixelRatio].join(":");
-      const cached = this.tagNodes.get(i);
+      const cached = this.tagNodes.get(key);
       if (cached && cached.geometry === geometry && cached.bytes.length === bytes.length && cached.bytes.every((byte,index)=>byte===bytes[index])) {
         nodes.push(cached.node);
         if (cached.grip) nodes.push(cached.grip);
         continue;
       }
-      const view = new DataView(this.wasm.memory.buffer,ptr,cols*CELL_SIZE);
+      const view = new DataView(this.wasm.memory.buffer,ptr+line*cols*CELL_SIZE,cols*CELL_SIZE);
       const layer = this.root.ownerDocument.createElement("div");
       layer.dataset.tagLayer = String(i);
+      layer.dataset.tagLine = String(line);
       layer.style.cssText = `position:absolute;overflow:hidden;white-space:pre;left:${values[4]*bw}px;top:${values[5]*bh+offset}px;width:${values[6]*bw}px;height:${th}px;background:${color(values[10],DEFAULT_BG)}`;
       for (let col = 0; col < cols; col++) {
         const off = col*CELL_SIZE;
@@ -171,9 +182,10 @@ export class DomRenderer {
           gripNode.append(mark);
         }
       }
-      this.tagNodes.set(i,{geometry,bytes:bytes.slice(),node:layer,grip:gripNode});
+      this.tagNodes.set(key,{geometry,bytes:bytes.slice(),node:layer,grip:gripNode});
       nodes.push(layer);
       if (gripNode) nodes.push(gripNode);
+      }
     }
     if (nodes.length !== this.tagRoot.childNodes.length || nodes.some((node,index)=>node!==this.tagRoot.childNodes[index])) this.tagRoot.replaceChildren(...nodes);
   }