Mxgraph - Как отключить изменение размера сверху/снизу - оставляя слева и справа?

Я не думаю, что у mxgraph есть готовый способ добиться этого, но вы можете легко настроить библиотеку mxgraph для достижения этого, введя 2 новые переменные-члены в объект mxgraph и при установке значения для графика соответственно отключив изменение размера (сверху-вниз или слева-справа). Ниже я приведу пример того, как вы могли бы реализовать следующий сценарий.

Сначала добавьте в объект mxGraph два новых свойства

mxGraph.js

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

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

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

Затем все, что вам нужно сделать, это перейти к js/handler/mxVertexHandler.js и применить свою логику, чтобы создать перетаскиваемые границы вокруг ячейки в соответствии с вашими предпочтениями (в зависимости от того, какой из вышеупомянутых новые введенные свойства, для которых вы установили значение true).

mxVertexHandler.js

Замените следующий фрагмент кода

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);
        }

с этим

         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);
        }

Таким образом, изменяемые размеры границ слева-справа и сверху-снизу будут отключены в соответствии с типом созданного вами графика.

Создайте объект mxgraph следующим образом

        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

Надеюсь, это поможет вам или любому другому члену сообщества, так как вопрос был задан несколько недель назад :)