Separate discontinuous pinned source context with thin borders

1 files changed, 8 insertions, 4 deletions

diff --git a/src/web/app.mjs b/src/web/app.mjs
index 8e08c9d4..312627df 100644
--- a/src/web/app.mjs
+++ b/src/web/app.mjs
@@ -99,7 +99,7 @@ export class DomRenderer {
       if (!ptr) continue;
       const view = new DataView(this.wasm.memory.buffer, ptr, rows * cols * CELL_SIZE);
       const bytes = new Uint8Array(this.wasm.memory.buffer);
-      const geometry = [bw,bh,tw,th,...Array.from({length:11},(_,field)=>val(field))].join(":");
+      const geometry = [bw,bh,tw,th,...Array.from({length:11+contexts},(_,field)=>val(field))].join(":");
       const encoded = bytes.subarray(ptr,ptr+rows*cols*CELL_SIZE);
       const cached = this.layerNodes.get(i);
       if (cached && cached.geometry===geometry && cached.bytes.length===encoded.length && cached.bytes.every((byte,index)=>byte===encoded[index])) {
@@ -130,9 +130,13 @@ export class DomRenderer {
         }
         layer.append(line);
       }
-      const border = this.root.ownerDocument.createElement("div");
-      border.style.cssText = `position:absolute;left:0;right:0;top:${contexts*th}px;height:1px;background:currentColor;opacity:.45`;
-      layer.append(border);
+      for (let row = 0; row < contexts; row++) {
+        if (!val(11 + row)) continue;
+        const border = this.root.ownerDocument.createElement("div");
+        border.dataset.contextBorder = String(row);
+        border.style.cssText = `position:absolute;left:0;right:0;top:${(row+1)*th}px;height:1px;background:currentColor;opacity:.45`;
+        layer.append(border);
+      }
       this.layerNodes.set(i,{geometry,bytes:encoded.slice(),node:layer});
       nodes.push(layer);
     }