Joints js connect to ports on a specified point alone

[sheiksh...@gmail.com]

Hi,

How can i allow a link to be connected to a port on a specified point alone , in the below diagram you can see the link connected to the port (circle place on the perimeter of a rectangle) . you can see how the link is connected below the center point along the perimeter of the circle , while i want the links to be connected only on the center point of the perimeter of a circle.

center point : for a circle with radius (r=3) the center points along the perimeter will be (3,0),(0,3),(-3,0),(0,-3).

[Vladimír Talaš]

hi, 

Could you please provide a code snippet ? which version of JointJS have you been using ? 

Regards, 

--

---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Vladimir Talas

Client IO

http://client.io

[sheiksh...@gmail.com]

its JointJS v0.9.6 and code snippet is as follows 

 var graph = new joint.dia.Graph({

    });

    var paper = new joint.dia.Paper({

        el: $('#myholder'),

        width: 1800,

        height: 800,

        model: graph,

        markAvailable: true,

        gridSize:10,

         snapLinks: true,

    linkPinning: false,

    validateConnection: function(vs, ms, vt, mt, e, vl) {

        console.log(e);

        if (e === 'target') {

            // target requires an input port to connect

            console.log(mt.getAttribute('class'));

            if (!mt || !mt.getAttribute('class') || mt.getAttribute('class').indexOf('port-body') < 0) return false;

            // check whether the port is being already used

            var portUsed = _.find(this.model.getLinks(), function(link) {

                return (link.id !== vl.model.id &&

                        link.get('target').id === vt.model.id &&

                        link.get('target').port === mt.getAttribute('port')); 

            });

            return !portUsed;

        } else { // e === 'source'

            // source requires an output port to connect

            return ms && ms.getAttribute('class') && ms.getAttribute('class').indexOf('port-body') >= 0; 

        }

    },     defaultLink: new joint.dia.Link({

                router: { name: 'manhattan' }, 

                connection : {name: 'orthogonal'},     

                attrs: {

                '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z', fill: '#fff', stroke: '#000' },

                '.link-tools .tool-remove circle, .marker-vertex': { r: 8 },

                    '.connection': {

                        stroke: '#000', 'stroke-width': 1

                        //filter: { name: 'dropShadow', args: { dx: 1, dy: 1, blur: 2 } }

                    }

                }

            })

        

    });

[sheiksh...@gmail.com]

when i use orthogonal routing , it gives me perpendicularlines , only on manhattan routing this happens

[sheiksh...@gmail.com]

using routers as 'oneside' may make the link start from the center point but how to configure seperately for each port ?

[Vladimír Talaš]

Hi, 

path calcualtions in the manhattan router is based on some approximations, it might result into situation you've described quite easily. Precission can be improved by setting the 'step' options in the router. However, decreasing the step will increase complexity. Note that it will affect performance. 

You can set the 'step' like this:

    defaultLink: new joint.dia.Link({

        router: { name: 'manhattan', args: { step: 5 } },

        connection: { name: 'orthogonal' },

        attrs: {

            '.link-tools .tool-remove circle, .marker-vertex': { r: 8 },

            '.connection': {

                stroke: '#000', 'stroke-width': 1

            }

        }

    })

There could be another possible solution (which is not implemented yet) based on some 'post processing' on the result path. Let me know if you're interested in a such solution.

[sheiksh...@gmail.com]

setting  router: { name: 'manhattan', args: { step: 5 } } makes my arrows lopsided ( its not either vertical / horizontal ) . my code 

defaultLink: new joint.dia.Link({

                router: { name: 'manhattan' ,args: { step: 1 }}, 

                connector : { name: 'jumpover'},

                z:'1', 

                attrs: {

                '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 ',fill:'#000', stroke: '#000' }            

                }

            })

[sheiksh...@gmail.com]

manhattan routing fails when step : 1 is added as well .  LInks doesnt avoid elements anymore as well , what exactly does step : 1 does , i am not able to find anything related to it in http://jointjs.com/api as well

[Vladimír Talaš]

Hi, 

step:1 may cause that the maximum 'attempts' of finding a route can exeed, than it stops searching and it returns a fallback route. You can increase the option maximumLoops (default is 2000).

Anyway we are going to fix issues on the manhattan router, we will inform you when this will be done.

Regards, 

 

 

[Achyut G Patil]

Hi Vladimir,

What are the set of parameters that can be passed as argument for router?

"step" and "maximumLoops" are also a set of arguments?

Regards,

Achyut

[Vladimír Talaš]

Hi Achyut, 

`step` and `maximumLoops` are part of the `args` options set. 

Complete list of options is documented here: http://resources.jointjs.com/docs/jointjs/v1.0/joint.html#dia.Paper.prototype.options.defaultRouter  in the `manhattan` section.

Regards, 

Disclaimer : Privileged and Confidential information is contained in this e mail and/or attachments and is subject to legal privilege. This e mail is intended solely for the recipient/s mentioned above. If you are not the intended recipient or responsible for delivery of the message to the intended recipient you may not use, copy, distribute or deliver to anyone this e mail and/or any attachments or any part of its contents or take any action in reliance on it. In such case, you should destroy this message, and notify us immediately. All reasonable precautions have been taken to ensure no viruses are present in this e-mail. Our company is not liable for any loss arising from unauthorized access to our company’s email account by any third party and/or any loss caused due to the transmission of any viruses. The views, opinions, conclusions and other information expressed in this electronic mail that do not relate to the company’s business shall be deemed to be the personal opinion of the sender and not endorsed by the company.

--

---
You received this message because you are subscribed to the Google Groups "JointJS" group.

To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Vladimir Talas

Client IO

http://www.jointjs.com

http://client.io