Как добавить порты в круг

Question

Я могу добавлять порты в прямоугольник, используя joint.shapes.devs.Model, но то же самое не работает для круга.

Вот что я пытался добавить порты в круг:

var circle1 = new joint.shapes.basic.Circle({ 
          position: {x: 100, y: 225}, 
          size: {width: 51, height: 51}, 
          outPorts: [''], 
          attrs: { 
           '.': {magnet: true}, 
           '.label': {text: '', 'ref-x': .4, 'ref-y': .2}, 
           '.inPorts circle': {type: 'input'}, 
           '.outPorts circle': {type: 'output'}, 
           '.port-body': {r: 4} 
          } 
         }); 
         graph.addCell(circle1); 

Я могу видеть, что круг создан, но с вне портов. Я не мог найти документацию по этому поводу. Любая помощь будет оценена по достоинству. Спасибо

Answer 1

В примере ниже показано, как определить элемент окружности с прямоугольными портами.

joint.shapes.devs.CircleModel = joint.shapes.devs.Model.extend({ 

    markup: '<g class="rotatable"><g class="scalable"><circle class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>', 
    portMarkup: '<g class="port port<%= id %>"><rect class="port-body"/><text class="port-label"/></g>', 

    defaults: joint.util.deepSupplement({ 

     type: 'devs.CircleModel', 
     attrs: { 
      '.body': { r: 50, cx: 50, stroke: 'blue', fill: 'lightblue' }, 
      '.label': { text: 'Circle Model', 'ref-y': 0.5, 'y-alignment': 'middle' }, 
      '.port-body': { width: 10, height: 10, x: -5, stroke: 'gray', fill: 'lightgray', magnet: 'active' } 
     } 

    }, joint.shapes.devs.Model.prototype.defaults) 
}); 

Это важно сказать бумаги не использовать по умолчанию dia.ElementView для рендеринга, но devs.ModelView вместо этого. Для этого просто определите представление в том же пространстве имен, что и соответствующая модель, и добавьте "View" в конце имени модели.

joint.shapes.devs.CircleModelView = joint.shapes.devs.ModelView; 

Пример использования:

var circleModel = new joint.shapes.devs.CircleModel({ 
    position: { x: 500, y: 100 }, 
    size: { width: 100, height: 100 }, 
    inPorts: ['a'], 
    outPorts: ['b'] 
}); 
graph.addCell(circleModel); 

JS Фидл:

http://jsfiddle.net/kumilingus/gpfu7o4f/1/