Mxgraph locates the blind zone image to the center of the drawing Area

There are often many images in a drawing area. It is annoying to right-drag the canvas or use a scroll bar to find them. Next I will provide a solution to this problem.

The premise is that there is a tree or DataGrid in the entire drawing area. We need to select the graphic cell to be located directly.

First, we need a global object of mxgraph, which is now defined as yleditor. ylcanvas.

Next, we need to define a method to search for the graphic cell. Only through this method can we find the cell we want in the canvas.

ylCommon.findCellById=function(id){    ylEditor.ylCanvas.selectAll();    var cells=ylEditor.ylCanvas.getSelectionCells();    ylEditor.ylCanvas.clearSelection();    for(var i=0;i<cells.length;i++){        if(cells[i].id==id){            return cells[i];        }        if(cells[i].children.length>0){            for(var j=0;j<cells[i].children.length;j++){                var child=cells[i].children[j];                if(child.id==id){                    return child;                }            }        }    }    return null;}

Then, locate the Cell Method of the graph and directly give the Cell ID to the graph. Find the graph first, select the graph, calculate the coordinates, and locate it.

Ylcommon. selectcell = function (ID) {var cell = ylcommon. findcellbyid ('cell-'+ id); If (cell) {yleditor. ylcanvas. setselectioncell (cell); var x =-cell. geometry. X + ($ ('# canvas '). width ()-cell. geometry. width)/2; var y =-cell. geometry. Y + ($ ('# canvas '). height ()-cell. geometry. height)/2; yleditor. ylcanvas. getview (). settranslate (x, y);} else {alert ('the image you selected is not in the canvas! ');}}

In the tree or DataGrid, select the object to be located and pass the Object ID to the selectcell method, provided that the ID matches the image ID in the canvas.