retejs / connection-path-plugin

Home Page:https://retejs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Mix vertical and horizontal align for a node

Githamza opened this issue · comments

I have a node with a two sockets on bottom and right. I would like to know if it's possible to use vertical align with one socket and use horizontal align with the other ?

Capture d’écran 2020-02-13 à 00 32 59

Try to redefine a path for the specific connection

editor.on('connectionpath', data => {
  if (data.connection/*some condition*/) {
    data.d = /* */
});

I think that ideally for this you need to modify the PathFactory

I created a new function for transformation, the only thing it needs is the connection settings
my all Socket have param vertical (bool)

src/index.js

...
data.d = factory.getData(transformer || Transformer[type], options,data);
...

src/path-factory.js

...
return this.line(transformer(options,data));
...

src/transformers.js

...
VERTICAL_COMBO: ({ curvature = 0.4 },data) => ([x1, y1, x2, y2]) => {
       const p1 = [x1, y1];
       const p4 = [x2, y2];
       let vertical_l=false
       let vertical_r=false
       if(data.connection) {
           if(data.connection.input.vertical){
               vertical_r=true
           }
           if(data.connection.output.vertical){
               vertical_l=true
           }

       }
       if (vertical_l){
           [x1, y1] = [y1, x1];
       }
       if (vertical_r){
           [x2, y2] = [y2, x2];
       }
       const c1 = x1 + Math.abs(x2 - x1) * curvature;
       const c2 = x2 - Math.abs(x2 - x1) * curvature;
       const p2 = vertical_l ? [y1, c1] : [c1, y1];
       const p3 = vertical_r ? [y2, c2] : [c2, y2];

       return [p1, p2, p3, p4];
   }
...

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.