how to fix the problem of the position when i type in searchbar for a view on the search

[LBouzac]

editor.translate_to = function(x, y) { var pos_x = x (this.precanvas.clientWidth / (this.precanvas.clientWidth this.zoom)) - (this.precanvas.getBoundingClientRect().x (this.precanvas.clientWidth / (this.precanvas.clientWidth this.zoom))); var pos_y = y (this.precanvas.clientHeight / (this.precanvas.clientHeight this.zoom)) - (this.precanvas.getBoundingClientRect().y (this.precanvas.clientHeight / (this.precanvas.clientHeight this.zoom)));

this.canvas_x = pos_x; this.canvas_y = pos_y; let storedZoom = this.zoom; this.zoom = 1; this.precanvas.style.transform = "translate(" + pos_x + "px, " + pos_y + "px) scale(" + this.zoom + ")"; this.zoom = storedZoom; this.zoom_last_value = 1; this.zoom_refresh(); }

var infonode = '';

$("#search").on('keyup', function(e) { e.preventDefault(); var value = $(this).val().toLowerCase(); $(".drawflow-node").filter(function() { var isFind = $(this).text().toLowerCase().indexOf(value) > -1; if (isFind) { $(this).addClass("isFind"); var idnode = $(this).attr('id').replace('node-', ''); infonode = editor.getNodeFromId(idnode); } else { $(this).removeClass("isFind"); } if (value == '') { infonode = ''; $(this).removeClass("isFind"); } });

if (infonode != '') { console.log('infonode -----'); console.log(infonode.pos_x + ' / ' + infonode.pos_y); editor.translate_to(infonode.pos_x, infonode.pos_y); } });

[jerosoler]

Is it a problem or is it a trick?

[LBouzac]

a problem because the position is not the good when i write in search bar

[jerosoler]

Can you detail your problem more?

What is that search? Where is? You are moving the canvas. Where do you want to move it exactly?

Can you provide an example?

[LBouzac]

The search bar in yellow find and fix the camera on the box but when i write the box in border red is not finds in the good positions

[jerosoler]

Have you tried the function here:

• https://github.com/jerosoler/Drawflow/issues/88

I see that it is similar but different

[LBouzac]

same problem i've try it

[jerosoler]

Could it be that it has a column on the left side?

If so, you may need to calculate the width of this column and apply the sum.

[LBouzac]

for the contested menu

1: I retrieve the x and y positions of the box

2: there is a column on the left

3: so what is the formula with trick 88 to arrive at the result of the capture

[jerosoler]

Tested on the demo:

editor.translate_to = function(x,y){
    this.canvas_x = x;
    this.canvas_y = y;
    let storedZoom = this.zoom;
    this.zoom = 1;
    this.precanvas.style.transform = "translate("+this.canvas_x+"px, "+this.canvas_y+"px) scale("+this.zoom+")";
    this.zoom = storedZoom;
    this.zoom_last_value = 1;
    this.zoom_refresh();
}

const nodeInfo = editor.getNodeFromId(5);

editor.translate_to(-1*nodeInfo.pos_x,-1*nodeInfo.pos_y);

Works with zoom is 1.

[LBouzac]

thanks, here is the code search : ` var infonode = ''; var node_x = node_y = 0;

$("#search").on('keyup', function(e) {
  e.preventDefault();
  var value = $(this).val().toLowerCase();
  $(".drawflow-node").filter(function() {
    var isFind = $(this).text().toLowerCase().indexOf(value) > -1;
    if (isFind) {
      $(this).addClass("isFind");
      var idnode = $(this).attr('id').replace('node-', '');
      infonode = editor.getNodeFromId(idnode);
    } else {
      $(this).removeClass("isFind");
    }
    if(value == '') {
      infonode = '';
      $(this).removeClass("isFind");
    }
  });

  if(infonode != '') {
    console.log('infonode -----');
    console.log('infonode possition : '+infonode.pos_x+' / '+ infonode.pos_y);
    editor.translate_to(-1*infonode.pos_x,-1*infonode.pos_y);
  }
});`