Изменение дизайна порта в JointJS

Question

Я пытаюсь создать граф, используя JointJS, где Link начинается с выходного порта od 1 и может быть соединен со всем другим элементом (или с самим текущим элементом) - не только с входным портом. Моя идея - изменить стиль входного порта, чтобы охватить элемент, к которому он принадлежит, но у меня есть проблемы с изменением формы порта в любом случае, это всегда маленький круг по левой стороне элемента, и ни один из моих css не работает. Может кто-нибудь дать совет?

Answer 1

вы можете обновить attrib0utes порта следующим образом:

var a = new joint.shapes.devs.Model({ 
    position: { x: 50, y: 50 }, 
    size: { width: 100, height: 100 }, 
    attrs: { 
     '.port-label': { 
      fill: 'red' 
     }, 
     // change position and size of the 'a' port 
     '.inPorts .port0 circle': { 
      r: 15, 
      'ref-x': -20, 
      'ref-y': 10, 
      stroke: 'red', 
      'stroke-width': 5 
     }, 
     // change color on a single port 
     '.inPorts .port0 .port-label': { 
      fill: 'blue', 
     } 
    }, 
    inPorts: ['a', 'aa', 'aaa'], 
    outPorts: ['b'] 

https://jsfiddle.net/vtalas/43sthc6g/

Однако, вам не нужно использовать порты для достижения этой цели, вы можете подключиться ко всему элементу непосредственно, как это:

var a = new joint.shapes.basic.Rect({ 
    size: { width: 100, height: 100 }, 
    position: { x: 300, y: 300 }, 
    attrs: { 
     'rect': { magnet: true } 
    } 

}).addTo(graph); 

var b = new joint.shapes.basic.Rect({ 
    size: { width: 100, height: 100 }, 
    position: { x: 100, y: 100 }, 
    attrs: { 
     'rect': { magnet: true } 
    } 
}).addTo(graph); 

new joint.dia.Link({ source: { id: b.id }, target: { id: a.id } }).addTo(graph); 

результат: https://jsfiddle.net/vtalas/davLzsng/