Mxgraph - Как отключить верхнее / нижнее изменение размеров - оставив левый и правый? - PullRequest
Новая
       29

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

0 голосов
/ 30 мая 2019

Как в заголовке. Мне нужно отключить изменение размера сверху вниз или слева направо.

1 Ответ

0 голосов
/ 26 июня 2019

Я не думаю, что у 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

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

...