How to zoom in and out without changing the position of a wall

Question

I was creating floorplan annotator with JS and wanted to put walls on top of grid so as to achieve preciseness of drawing. Also, I want to have an image of floorplan as a background of grid. So, to be more clear, here is the photo of grid and floorplan being as background

So, as you can see the photo above there is a grid and background image and a user can also put walls on top of grid like this

But the main problem concerns zoom in and out functionality, that is, what I want is when a user zooms in, the background image and location of wall on the grid SHOULD MATCH. But now if a user zooms in then the location of wall on grid moves to different place like this

Here is my code of zoom in and out functionality:

FloorplanUI.prototype.adjustScale = function (sign) {
  var floorplan = this.floorplan;
  var myImg = document.getElementById("backImg");
  var currWidth = myImg.clientWidth;
  var el = document.getElementById(this.state.scaleDisplayId);
  floorplan.startTransaction("Change Scale");
  switch (sign) {
    case "-":
      floorplan.style.width -= "10px";

      if (currWidth == 2500) return false;
      else {
        myImg.style.width = currWidth - 10 + "px";
      }
      break;
    case "+":
      floorplan.style.width += "10px";
      if (currWidth == 2500) return false;
      else {
        myImg.style.width = currWidth + 10 + "px";
      }
      break;
  }
  floorplan.scale = parseFloat(
    (Math.round(floorplan.scale / 0.1) * 0.1).toFixed(2)
  );
  var scale = (floorplan.scale * 100).toFixed(2);
  el.innerHTML = "Scale: " + scale + "%";
  floorplan.commitTransaction("Change Scale");
};

I assume maybe there is a way to zoom in without changing the scale so that grid and background image location always be consistent even if a user zooms in and out. I really need your help

Answer 1

You really don't want to manipulate HTML DOM in order to get the behavior that I think you want. Instead, do what the https://gojs.net/latest/samples/kittenMonitor.html sample does:

      // the background image, a floor plan
      myDiagram.add(
        $(go.Part,  // this Part is not bound to any model data
          {
            layerName: "Background", position: new go.Point(0, 0),
            selectable: false, pickable: false
          },
          $(go.Picture, "https://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg")
        ));