[esp/bindinds_js] topdown: don't assume floor is at y=0

Replica models have a floor that is non-zero. We were assuming
a floor of zero. Also, made the top-down map generation more
dynamic in order to support going up and down floors.

src/esp/bindings_js/modules/navigate.js

@@ -54,7 +54,6 @@ class NavigateTask {
   reset() {
     this.sim.reset();
     this.setStatus("Ready");
-    this.topdown.start(this.sim.getAgentState().position);
     this.render();
   }
 
@@ -103,7 +102,6 @@ class NavigateTask {
 
   renderTopDown() {
     this.topdown.moveTo(this.sim.getAgentState().position);
-    this.topdown.draw();
   }
 
   renderRadar() {

src/esp/bindings_js/modules/topdown.js

@@ -17,30 +17,32 @@ class TopDownMap {
     this.widthComponent = 0;
     this.heightComponent = 2;
     this.scale = 1.0;
-    this.imageData = this.createMap();
     this.ctx.strokeStyle = "blue";
     this.ctx.lineWidth = 3;
-    this.drawn = false;
+    this.currentY = -Infinity;
   }
 
   /**
    * Draw the topdown map centered in the canvas.
    */
   draw() {
-    // We currently only draw the map once.
-    if (!this.drawn) {
-      let [x, y] = this.mapCenterInset();
-      this.ctx.putImageData(this.imageData, x, y);
-      this.drawn = true;
-    }
+    const ctx = this.ctx;
+    const canvas = this.canvas;
+    const [x, y] = this.mapCenterInset();
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.putImageData(this.imageData, x, y);
   }
 
   /**
    * Set the start position of the trajectory.
    * @param {vec3f} position - start position
    */
   start(position) {
-    let [x, y] = this.convertPosition(position);
+    this.currentY = position[1];
+    this.imageData = this.createMap();
+    this.draw();
+    const [x, y] = this.convertPosition(position);
+    this.ctx.beginPath();
     this.ctx.moveTo(x, y);
   }
 
@@ -49,9 +51,20 @@ class TopDownMap {
    * @param {vec3f} position - new position
    */
   moveTo(position) {
-    let [x, y] = this.convertPosition(position);
-    this.ctx.lineTo(x, y);
-    this.ctx.stroke();
+    /*
+     * If we've gone up or down a floor, we need to create a new map.
+     * A change in Y of 0.25 should be sufficient as a test.
+     */
+    if (
+      position[1] < this.currentY - 0.25 ||
+      position[1] > this.currentY + 0.25
+    ) {
+      this.start(position);
+    } else {
+      let [x, y] = this.convertPosition(position);
+      this.ctx.lineTo(x, y);
+      this.ctx.stroke();
+    }
   }
 
   // PRIVATE methods.
@@ -118,7 +131,7 @@ class TopDownMap {
     for (i = 0; i < heightInPixels; i++) {
       let x = this.bounds.min[this.widthComponent] + increment / 2;
       for (j = 0; j < widthInPixels; j++) {
-        let point = [0, 0, 0];
+        let point = [0, this.currentY, 0];
         point[this.widthComponent] = x;
         point[this.heightComponent] = y;
         let isNavigable = this.pathFinder.isNavigable(point, 0.5);