Mxgraph - How to disable top/bottom resizing - leaving left and right?

Question

As in the title. I need to disable resizing top-bottom or left-right.

Answer 1

I don't think mxgraph has any out of the box way to achieve this, but you could easily customize the mxgraph library to achieve this by introducing 2 new member variables in the mxgraph object and when setting a value to the graph accordingly disable the resizing (top-bottom or left-right). I will provide an example of how you could implement the following scenario below.

First introduce into the mxGraph object the two new properties

mxGraph.js

mxGraph.prototype.disabledTopBottomResizing= false;
mxGraph.prototype.disabledLeftRightResizing= false;

mxGraph.prototype.isDisabledTopBottomResizing = function()
{
  return this.disabledTopBottomResizing;
};

mxGraph.prototype.isDisabledLeftRightResizing = function()
{
  return this.disabledLeftRightResizing;
};

Then all you have to do is go to the js/handler/mxVertexHandler.js and apply your logic so that you create the draggable bounds around the cell accordingly to your preferences ( according to which of the above mentioned newly introduced properties you set to true).

mxVertexHandler.js

Replace the following piece of code

if (this.sizers.length >= 8)
        {
            var crs = ['nw-resize', 'n-resize', 'ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize'];

            var alpha = mxUtils.toRadians(this.state.style[mxConstants.STYLE_ROTATION] || '0');
            var cos = Math.cos(alpha);
            var sin = Math.sin(alpha);

            var da = Math.round(alpha * 4 / Math.PI);

            var ct = new mxPoint(s.getCenterX(), s.getCenterY());
            var pt = mxUtils.getRotatedPoint(new mxPoint(s.x, s.y), cos, sin, ct);

            this.moveSizerTo(this.sizers[0], pt.x, pt.y);
            this.sizers[0].setCursor(crs[mxUtils.mod(0 + da, crs.length)]);

            pt.x = cx;
            pt.y = s.y;
            pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

            this.moveSizerTo(this.sizers[1], pt.x, pt.y);
            this.sizers[1].setCursor(crs[mxUtils.mod(1 + da, crs.length)]);

            pt.x = r;
            pt.y = s.y;
            pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

            this.moveSizerTo(this.sizers[2], pt.x, pt.y);
            this.sizers[2].setCursor(crs[mxUtils.mod(2 + da, crs.length)]);

            pt.x = s.x;
            pt.y = cy;
            pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

            this.moveSizerTo(this.sizers[3], pt.x, pt.y);
            this.sizers[3].setCursor(crs[mxUtils.mod(7 + da, crs.length)]);

            pt.x = r;
            pt.y = cy;
            pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

            this.moveSizerTo(this.sizers[4], pt.x, pt.y);
            this.sizers[4].setCursor(crs[mxUtils.mod(3 + da, crs.length)]);

            pt.x = s.x;
            pt.y = b;
            pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

            this.moveSizerTo(this.sizers[5], pt.x, pt.y);
            this.sizers[5].setCursor(crs[mxUtils.mod(6 + da, crs.length)]);

            pt.x = cx;
            pt.y = b;
            pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

            this.moveSizerTo(this.sizers[6], pt.x, pt.y);
            this.sizers[6].setCursor(crs[mxUtils.mod(5 + da, crs.length)]);

            pt.x = r;
            pt.y = b;
            pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

            this.moveSizerTo(this.sizers[7], pt.x, pt.y);
            this.sizers[7].setCursor(crs[mxUtils.mod(4 + da, crs.length)]);

            this.moveSizerTo(this.sizers[8], cx + this.state.absoluteOffset.x, cy + this.state.absoluteOffset.y);
        }

with this

         if (this.sizers.length >= 8)
        {
            var crs = ['nw-resize', 'n-resize', 'ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize'];

            var alpha = mxUtils.toRadians(this.state.style[mxConstants.STYLE_ROTATION] || '0');
            var cos = Math.cos(alpha);
            var sin = Math.sin(alpha);

            var da = Math.round(alpha * 4 / Math.PI);
            var ct = new mxPoint(s.getCenterX(), s.getCenterY());
            var pt = mxUtils.getRotatedPoint(new mxPoint(s.x, s.y), cos, sin, ct);

            if(this.graph.disabledLeftRightResizing){
                pt.x = cx;
                pt.y = s.y;
                pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

                this.moveSizerTo(this.sizers[1], pt.x, pt.y);
                this.sizers[1].setCursor(crs[mxUtils.mod(1 + da, crs.length)]);


                pt.x = cx;
                pt.y = b;
                pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

                this.moveSizerTo(this.sizers[6], pt.x, pt.y);
                this.sizers[6].setCursor(crs[mxUtils.mod(5 + da, crs.length)]);

            }


            else if(this.graph.disabledTopBottomResizing){
                pt.x = s.x;
                pt.y = cy;
                pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

                this.moveSizerTo(this.sizers[3], pt.x, pt.y);
                this.sizers[3].setCursor(crs[mxUtils.mod(7 + da, crs.length)]);


                pt.x = r;
                pt.y = cy;
                pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);

                this.moveSizerTo(this.sizers[4], pt.x, pt.y);
                this.sizers[4].setCursor(crs[mxUtils.mod(3 + da, crs.length)]);
            }


            this.moveSizerTo(this.sizers[8], cx + this.state.absoluteOffset.x, cy + this.state.absoluteOffset.y);
        }

This way, the left-right and top-bottom resizable bounds will be disabled according to the type of graph you created

Create the mxgraph object like this

        var model = new mxGraphModel();
        graph = new mxGraph(container, model);
        //to disable top-bottom resizing  
        graph.disabledTopBottomResizing = true;
        //or 
        graph.disabledLeftRightResizing = true; //to disable left-right resizing

Hope this will help you or any other member of the community since the question was made a few weeks ago:)

Answer 2

Extending the Vertex handlers lets you disable resizing.

mxVertexHandler.prototype.resizeVertex = function(me){
    return false;
  }

https://jgraph.github.io/mxgraph/docs/js-api/files/handler/mxVertexHandler-js.html#mxVertexHandler.resizeVertex