Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ports lose styling when adding additional ports.

See original GitHub issue

Hello!

I’ve found an issue where adding ports to an Element seems to undo styling previously applied to other ports. Here’s an example:

elem.attr('[port="port_a"]/fill', 'rgb(200, 200, 0)')
elem.set('inPorts', [...elem.get('inPorts'), 'port_b'])

The styling on port_a will go away.

Thanks!

EDIT: updating ports after styling is import for the application I’m working on because we deal with a lot of dynamic ports.

Issue Analytics

State:
Created 7 years ago
Comments:11 (4 by maintainers)

Top GitHub Comments

1reaction

vtalascommented, Jul 26, 2016

you can pass ports directly throuht the constructor as well …

var rect = new joint.shapes.basic.Rect({
    position: { x: 425, y: 60 },
    size: { width: 200, height: 100 },
    attrs: {
        text: { text: 'left', fill: '#6a6c8a' },
        rect: { stroke: '#31d0c6', 'stroke-width': 2 }
    },
    ports: {
        groups: {
            // groups definition 
        },
        items: [
            { group: 'in', attrs: { text: { text: 'in1' } } },
            { group: 'in', attrs: { text: { text: 'in2' } } },

            { group: 'out', attrs: { text: { text: 'out1' } } }
        ]
    }
});

1reaction

vtalascommented, Jul 26, 2016

Good to hear it’s going well. You can define your own groups easily like this:

var rect = new joint.shapes.basic.Rect({
    position: { x: 425, y: 60 },
    size: { width: 200, height: 100 },
    attrs: {
        text: { text: 'left', fill: '#6a6c8a' },
        rect: { stroke: '#31d0c6', 'stroke-width': 2 }
    },
    ports: {
        groups: {
            'in': {
                position: 'left',
                label: {
                    position: 'left'
                },
                attrs: {
                    text: { fill: '#000000' },
                    circle: { fill: '#ffffff', stroke: 'green', 'stroke-width': 2, r: 10, magnet: 'passive' }
                }
            },
            'out': {
                position: 'right',
                label: {
                    position: 'right'
                },
                attrs: {
                    text: { fill: '#000000' },
                    circle: { fill: '#ffffff', stroke: 'red', 'stroke-width': 2, r: 10, magnet: true }
                }
            }
        }
    }
});

rect.addPort({ group: 'in', attrs: { text: { text: 'in1' } } });
rect.addPort({ group: 'in', attrs: { text: { text: 'in2' } } });

rect.addPort({ group: 'out', attrs: { text: { text: 'out1' } } });
rect.addPort({ group: 'out', attrs: { text: { text: 'out2' } } });
rect.addPort({ group: 'out', attrs: { text: { text: 'out3' } } });