Можно ли изменить порты с круга на прямоугольник?

Question

Я работаю с портами JointJS.По умолчанию порты отображаются в виде кружков:

https://resources.jointjs.com/tutorial/ports

Можно ли отформатировать стиль от круга к прямоугольнику?Пожалуйста, предложите любые имена классов, где я могу переопределить это.

Answer 1

Учебное пособие использует фигуры devs.Model, и оно несколько устарело ...

В конфигурации порта есть опция markup, подробнее см. https://resources.jointjs.com/docs/jointjs/v2.1/joint.html#dia.Element.ports

Я бы порекомендовал демо порта (https://github.com/clientIO/joint/tree/master/demo/ports). Существует даже фигура, которую вы можете искать:

var g6 = new joint.shapes.basic.Circle({
    position: { x: 50, y: 50 },
    size: { width: 500, height: 300 },
    attrs: {
        text: { text: 'compensateRotation: true', fill: '#6a6c8a' },
        circle: { stroke: '#31d0c6', 'stroke-width': 2 }
    },
    ports: {
        groups: {
            'a': {
                position: {
                    name: 'ellipseSpread',
                    args: { startAngle: 0, dr: 0, compensateRotation: true }
                },
                label: {
                    position: 'radial'
                },
                attrs: {
                    rect: {
                        stroke: '#31d0c6',
                        'stroke-width': 2,
                        width: 20,
                        height: 20,
                        x: -10,
                        y: -10
                    },
                    '.dot': {
                        fill: '#fe854f',
                        r: 2
                    },
                    text: {
                        fill: '#6a6c8a'
                    }
                },
                markup: '<g><rect/><circle class="dot"/></g>'
            }
        }
    }
});