Подключить 2 элемента jointjs

Question

Я новичок в совместных проектах. Сегодня у меня есть маленький пример, как показано ниже:

1. У меня есть стартовая активность

   var startEndActivity = function (x, y, name, fillColor, textColor, size) { 
   fillColor = fillColor || '#007FBE'; 
   textColor = textColor || "#000"; 
   size = size || { width: 100, height: 40 }; 
   var rect = new joint.shapes.basic.Rect({ 
       position: { x: x, y: y }, 
       size: size, 
       attrs: { 
        rect: { fill: fillColor, rx: 5, ry: 5, 'stroke-width': 1, stroke: '#002F5D' }, 
        text: { 
         text: name, fill: textColor, 
         'font-size': 14, 'font-family': 'sans-serif' 
        } 
       } 
   }); 
   graph.addCell(rect); 
   return rect;} 
   

2. У меня есть условие, активность

   var activityDecision = function (x, y, name, fillColor, textColor, size{ 
   fillColor = fillColor || '#BF664C'; 
   textColor = textColor || "#080808"; 
   size = size || { width: 200, height: 60 }; 
   var node = new joint.shapes.basic.Rhombus({ 
       position: { x: x, y: y }, 
       size: size, 
   }); 
   node.attr({ 
       rect: { fill: fillColor, 'stroke-width': 1, stroke: 'white' }, 
       text: { 
        text: name, fill: textColor, 
       } 
   }); 
   graph.addCell(node); 
   return node;} 
   

Я хочу, чтобы нажать на старте и я могу нарисовать стрелку для соединения между двумя элементами. Большое вам спасибо

Answer 1

Самый распространенный подход, который я знаю, это использовать порты для ваших элементов. Эта ссылка поможет вам начать на этом маршруте:

WORKING WITH PORTS

Если вы предпочитаете, чтобы весь элемент вести себя в качестве порта вы должны смотреть в «магнитной» атрибута. Эта ссылка поможет вам начать исследовать то, что вам нужно (особенно первый ответ):

How to interactively create links in JointJS

Answer 2

Я нашел решение для этого. Огромное спасибо. Просто добавьте больше атрибута, как этого

el.attr('rect/magnet', true).attr('text/pointer-events', 'none'); 

Answer 3

function create(type) { 
var link = new joint.dia.Link({ 
      source: { x: 10, y: 20 }, 
      target: { x: 350, y: 20 }, 
      attrs: {} 
     }); 
     link.prop({...}); 
     link.addTo(graph) 
} 
//init connection: 
new joint.dia.Link({ 
    source: { id: 'source-id' }, 
    target: { id: 'target-id', port: 'port_id'} 
}); 

Answer 4

Для того, чтобы соединить два элемента, вы должны работать с портами (documentation):

Моим лучшим советом для вас, чтобы узнать, как реализовать порты по в исходном коде JointJS, в качестве эталонного объекта для взгляда: joint.shapes.devs.Model (live demo + исходный код внутри)

что-то вроде этого:

var myRect = joint.shapes.devs.Model.extend({ 
    portMarkup: '<circle class="port-body myCustomClass"/>', 
    defaults: _.defaultsDeep({  
     type: 'myRect', 
    }, joint.shapes.basic.Generic.prototype.defaults), 
}); 

и внутри функции startEndActivity изменить вар прямоугольник на:

var startRect = new myRect({ 
    position: { x: x, y: y }, 
    size: size, 
    attrs: { 
     rect: { fill: fillColor, rx: 5, ry: 5, 'stroke-width': 1, stroke: '#002F5D' }, 
     text: { 
      text: name, fill: textColor, 
      'font-size': 14, 'font-family': 'sans-serif' 
     } 
    }, 
    ports: { 
     groups: { 
      'out': { 
       position: { 
        name: 'right' 
       }, 
       attrs: { 
        '.port-label': { 
         fill: '#000' 
        }, 
        '.port-body': { 
         fill: '#fff', 
         stroke: '#000', 
         r: 10, 
         magnet: true 
        } 
       }, 
       label: { 
        position: { 
         name: 'right', 
         args: { 
          y: 10 
         } 
        } 
       } 
      } 
     } 
}); 

сделать то же самое для второго элемента.