Joint.js, yol sınıfı ile özel bağlantı noktaları ekleyin. özel öğeler için

Question

Yapmaya çalıştığım şey, özel yol ve bağlantı noktası için kendi işaretlemem olan bir öğe ekleyebilmem için bağlantı noktası ve yol için özel bir sınıf oluşturmaktır. Bir öğe oluşturduğumda bu yolu dinamik olarak geçireceğim yol sınıfının öğeleri gibi davranır ve PortsModelInterface'den de genişlediğim gibi, portlar için kendi işaretlememi de kullanırım. Bütün bu çaba svg zomming için ölçeklenebilir yapmaktır. Daha önce ben özel öğelerin ince ama html çalışıyordu benim özel bağlantı noktalarıyla html özel öğeyi kullanıyordum

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]) 

eleman grafikte eklenir ancak portları görünmüyor nasıl bazı yakınlaştırma üzerinde ölçekleme değildi. Sınıf ekleme konusunda uygun bir fikrim yok, bu nedenle lütfen herhangi bir yardım büyük takdir edilecektir. Teşekkürler. Fiddle example

Answer 1

Şekil ve bağlantı noktaları için özel işaretli bir öğe tanımlamayı öneririm. Her iki biçimlendirmenin bir SVG yolu içermesi gerekir, böylecenumaralı bir rasgele yol verisini model.attr() üzerinden ayarlayabilirsiniz.

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) 
}); 

işlemek için devs.ModelView kullanılacak kağıdı söyle.

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

Şimdi ayarlamak ya da her zaman arzu şekil ve portlar için d niteliğini değiştirebilir.

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/