Remove dropped txs from the visualization

client/src/controllers/TxController.js

@@ -105,7 +105,27 @@ export default class TxController {
   }
 
   dropTx (txid) {
-    // don't actually need to do anything, just let the tx expire
+    if (this.txs[txid] && this.poolScene.drop(txid)) {
+    console.log('dropping tx', txid)
+      this.txs[txid].view.update({
+        display: {
+          position: {
+            y: -100, //this.txs[txid].screenPosition.y - 100
+          },
+          // color: {
+          //   alpha: 0
+          // }
+        },
+        delay: 0,
+        duration: 2000
+      })
+      setTimeout(() => {
+        this.destroyTx(txid)
+      }, 2000)
+      // this.poolScene.layoutAll()
+    } else {
+      console.log('dropped unknown tx', txid)
+    }
   }
 
   addBlock (blockData, realtime=true) {

client/src/models/TxMondrianPoolScene.js

@@ -51,6 +51,15 @@ export default class TxMondrianPoolScene extends TxPoolScene {
       return this.layout.getTxInGridCell(gridPosition)
     } else return null
   }
+
+  drop (id) {
+    let tx = this.txs[id]
+    if (tx && tx.gridSquare) {
+      this.layout.remove(tx.gridSquare)
+    }
+    delete this.txs[id]
+    return !!tx
+  }
 }
 
 class MondrianLayout {
@@ -295,6 +304,9 @@ class MondrianLayout {
     }
 
     // update txMap
+
+    tx.gridSquare = square
+
     for (let x = 0; x < square.r; x++) {
       for (let y = 0; y < square.r; y++) {
         this.setTxMapCell({ x: square.x + x, y: square.y + y }, tx)
@@ -304,6 +316,16 @@ class MondrianLayout {
     return square
   }
 
+  remove (square) {
+    for (let x = 0; x < square.r; x++) {
+      for (let y = 0; y < square.r; y++) {
+        this.clearTxMapCell({ x: square.x + x, y: square.y + y })
+        if (x <= y) this.addSlot({ x: square.x + x, y: square.y + y, r: square.r - y })
+      }
+    }
+    // this.addSlot({ x: square.x, y: square.y, r: square.r })
+  }
+
   setTxMapCell (coord, tx) {
     const offsetY = coord.y - this.rowOffset
     while (this.txMap.length <= offsetY) {
@@ -312,6 +334,14 @@ class MondrianLayout {
     this.txMap[offsetY][coord.x] = tx
   }
 
+  clearTxMapCell (coord, tx) {
+    const offsetY = coord.y - this.rowOffset
+    while (this.txMap.length <= offsetY) {
+      this.txMap.push(new Array(this.width).fill(null))
+    }
+    this.txMap[offsetY][coord.x] = null
+  }
+
   getTxInGridCell(coord) {
     const offsetY = coord.y - this.rowOffset
     if (this.txMap[offsetY]) return this.txMap[offsetY][coord.x]
@@ -319,11 +349,14 @@ class MondrianLayout {
   }
 
   slotToSprite (slot) {
+    const pos = this.context.pixelsToScreen(this.context.gridToPixels(slot))
     return {
-      position: this.context.pixelsToScreen(this.context.gridToPixels(slot)),
+      x: pos.x,
-      palette: 3,
+      y: pos.y,
-      color: 0,
+      r: pos.r,
-      alpha: 0.1
+      h: 0.5,
+      l: 0.5,
+      alpha: 0.5
     }
   }
 

client/src/models/TxPoolScene.js

@@ -277,6 +277,10 @@ export default class TxPoolScene {
     return exists
   }
 
+  drop (id) {
+    return this.remove(id)
+  }
+
   getTxList () {
     return [
       ...this.getActiveTxList(),