Joint.js добавить пользовательские порты с классом путей. для пользовательских элементов

Question

То, что я пытаюсь сделать, это создать элемент с пользовательским классом для портов и пути, чтобы я мог добавить элемент с настраиваемым путем и свою собственную разметку для портов. Этот способ, когда я создаю элемент, передам динамический путь для его формы, так же как и элементы класса пути, и, поскольку я также расширился с PortsModelInterface, у меня также будет своя собственная разметка для портов. Все это состоит в том, чтобы сделать svg масштабируемым для zomming. Раньше я использовал HTML пользовательский элемент со своими пользовательскими портами, который работает нормально, но HTML пользовательских элементов не масштабирование масштабирования

var graph = new joint.dia. 
var paper = new joint.dia.Paper({ 
    el: $('#paper'), 
    width: 800, 
    height: 600, 
    gridSize: 1, 
    model: graph, 
    snapLinks: true, 
    embeddingMode: true 
}); 
joint.shapes.custom1={}; 
joint.shapes.custom1.Element = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, { 
     markup: '<g class="rotatable"><g class="scalable"><rect class = "myrect"/></g><g class="inPorts"/><g class="outPorts"/></g>', 
     portMarkup: '<g class="port<%= id %>"><circle class="port-body"/></g>', 
     defaults: joint.util.deepSupplement({ 
      type: 'html.Element', 
      size: { width: 200, height: 110 }, 
      inPorts: [], 
      outPorts: [], 
      attrs: { 
       '.': { magnet: true}, 
       rect: { 
        stroke: 'none', 'fill-opacity': 0, width: 300, height: 210, 
       }, 
       circle: { 
        r: 6, //circle radius 
        magnet: true, 
      left:0, 
        stroke: 'gray' 
       }, 

       '.inPorts circle': { fill: 'gray', magnet: 'passive', type: 'input', y: 0}, 
       '.outPorts circle': { fill: 'gray', type: 'output' } 
      } 
     }, joint.shapes.basic.Generic.prototype.defaults), 
     getPortAttrs: function (portName, index, total, selector, type) { 

      var attrs = {}; 
      var portClass = 'port' + index; 
      var portSelector = selector + '>.' + portClass; 
      var portCircleSelector = portSelector + '>circle'; 
      attrs[portCircleSelector] = { port: { id: portName || _.uniqueId(type), type: type } }; 
      attrs[portSelector] = { ref: 'rect', 'ref-x': (index + 1) * (0.55/total)}; 
      if (selector === '.outPorts') { 
      attrs[portSelector]['ref-dy'] = 15; 
     } 
      return attrs; 
     } 
    })); 
joint.shapes.custom1.Atomic = joint.shapes.custom1.Element.extend({ 

    markup: '<g class="rotatable"><g class="scalable"><path/></g><text/></g>', 

    defaults: joint.util.deepSupplement({ 

     type: 'basic.Path', 
     size: { width: 60, height: 60 }, 
     attrs: { 
      'path': { fill: '#FFFFFF', stroke: 'black' }, 
      'text': { 'font-size': 14, text: '', 'text-anchor': 'middle', 'ref-x': .5, 'ref-dy': 20, ref: 'path', 'y-alignment': 'middle', fill: 'black', 'font-family': 'Arial, helvetica, sans-serif' } 
     } 
    }, joint.shapes.basic.Generic.prototype.defaults) 

}); 

var a2 = new joint.shapes.custom1.Atomic({ 
    position: { x: 50, y: 260 }, 
    size: { width: 100, height: 100 }, 
    attrs: { 
     path: { d: 'M 30 0 L 60 30 30 60 0 30 z' }, 
     text: { 
      text: 'Diamond', 
      'ref-y': .5 // basic.Path text is originally positioned under the element 
     } 
    }, 
    inPorts: ['in'], 
    outPorts: ['out'] 
}); 
graph.addCells([a2]) 

Элемент добавляется в графике, но некоторые, как порты не отображаются. У меня нет правильной концепции добавления классов, поэтому, пожалуйста, любая помощь будет принята с благодарностью. Благодарю. Fiddle example

Answer 1

Предлагаю определить элемент с пользовательской разметкой для формы и портов. Обе разметки должны содержать путь SVG, поэтому вы можете установить произвольные данные пути d через model.attr() на них.

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

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

    defaults: joint.util.deepSupplement({ 
     type: 'devs.GenericModel' 
    }, joint.shapes.devs.Model.prototype.defaults) 
}); 

Скажите бумагу использовать devs.ModelView для рендеринга.

joint.shapes.devs.GenericModelView = joint.shapes.devs.ModelView; 

Теперь вы можете установить или изменить d атрибут формы и портов в любое время вы хотите.

var model = new joint.shapes.devs.GenericModel({ 
    attrs: { 
     '.body': { d: 'M 0 0 0 50 50 50 z'}, 
     '.port-body': { d: 'M 0 0 10 0 10 10 0 10 z'} 
    } 
}); 

model.attr('.body/d', 'M 25 0 50 50 0 50 z'); 

JS Fiddle: http://jsfiddle.net/kumilingus/kge023bc/