在JointJS中，如何用端口创建一个用户定义的元素

Question

我想在JointJS中创建a rectangle with 4 ports, one in each side作为用户定义的元素。

我需要创建一个用户定义的元素，因为我需要在鼠标启动时显示工具提示。所以我需要一个标记标记。但我有端口问题。这是我的实现：

var graph = new joint.dia.Graph; 
var paper = new joint.dia.Paper({ 
    el: $('#paper'), 
    width: 400, 
    height: 200, 
    gridSize: 20, 
    model: graph 
}); 

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

    markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/><title /></g>', 
/* 
portMarkup: '<g class="port port<%= id %>"><circle class="port-body"/><text class="port-label"/></g>', 
*/ 
    defaults: joint.util.deepSupplement({ 

    type: 'devs.CircleModel', 
    attrs: { 
      title: {text: 'Static Tooltip'}, 
     '.body': { 
     r: 50, 
     cx: 50, 
     stroke: 'blue', 
     fill: 'lightblue' 
     }, 
     '.label': { 
     text: '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) 
}); 

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

var rect = new joint.shapes.devs.CircleModel({ 
    position: { 
    x: 150, 
    y: 50 
    }, 
    size: { 
    width: 100, 
    height: 100 
    }, 
    ports: { 
     groups: { 
      'top': { 
       // port position definition 
       position: 'top', 
       label: { 
        // label layout definition: 
        position: { 
         name: 'manual', args: { 
          y: 5, 
          attrs: { '.': { 'text-anchor': 'middle' } } 
         } 
        } 
       } 
      }, 
      'down': { 
       position: 'bottom', 
       label: { 
        position: { 
         name: 'bottom', args: { y: -5 } 
        } 
       } 
      }, 
      'right': { 
       position: 'right', 
       label: { 
        position: { 
         name: 'bottom', args: { y: -5 } 
        } 
       } 
      }, 
      'left': { 
       position: 'left', 
       label: { 
        position: { 
         name: 'bottom', args: { y: -5 } 
        } 
       } 
      } 
     } 
    } 
}); 


rect.addPort({ group: 'top', attrs: { 'text': { text: 'T' } } }); 
rect.addPort({ group: 'down', attrs: { 'text': { text: 'D' } } }); 
rect.addPort({ group: 'right', attrs: { 'text': { text: 'R' } } }); 
rect.addPort({ group: 'left', attrs: { 'text': { text: 'L' } } }); 


graph.addCell(rect); 

所有的代码是在这里：https://jsfiddle.net/fraverta/ustp4tcj/2/

我不明白为什么不显示端口为圆。有人能帮助我吗？

Answer 1

作为@masterfan评论，问题是与创建var rect = joint.shapes.devs.Model。

要更具体您实施ports节的方式没有完全实施。

要正确，你可以实现端口：

1. 只是评论它，它会从上述JointJs模型继承。

2. 通过这个确切的例子实施：（你是缺少一些属性 - 这样的UI端口失踪的HTML属性：fill="#fff" stroke="#000" r="10"）

这是一个例子：

  groups: { 
       'myCustomPort': { 
        position: { 
         name: 'left' 
        }, 
        attrs: { 
         '.port-label': { 
          fill: '#000' 
         }, 
         '.port-body': { 
          fill: '#fff', 
          stroke: '#000', 
          r: 10, 
          magnet: true 
         } 
        }, 
        label: { 
         position: { 
          name: 'left', 
          args: { 
           y: 10 
          } 
         } 
        } 
       } 

rect.addPort({ group: 'myCustomPort', attrs: { 'text': { text: 'MyCustomText' } } }); 

Answer 2

这正是你所需要的。

这是Joint-JS Rappid开发人员之一的实现。

看看这里的jsfiddle现场示例。

jsfiddle live example

HTML：

<!-- JointJS Fiddle --> 

的Javascript：

var graph = new joint.dia.Graph; 
var paper = new joint.dia.Paper({ 
    el: $('#paper'), 
    width: 600, 
    height: 600, 
    gridSize: 20, 
    model: graph 
}); 

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

    markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><image/><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>', 

    defaults: joint.util.deepSupplement({ 

    type: 'devs.MyImageModel', 
    size: { 
     width: 80, 
     height: 80 
    }, 
    attrs: { 
     rect: { 
     stroke: '#d1d1d1', 
     fill: { 
      type: 'linearGradient', 
      stops: [{ 
      offset: '0%', 
      color: 'white' 
      }, { 
      offset: '50%', 
      color: '#d1d1d1' 
      }], 
      attrs: { 
      x1: '0%', 
      y1: '0%', 
      x2: '0%', 
      y2: '100%' 
      } 
     } 
     }, 
     circle: { 
     stroke: 'gray' 
     }, 
     '.label': { 
     text: 'My Shape', 
     'ref-y': -20 
     }, 
     '.inPorts circle': { 
     fill: '#c8c8c8' 
     }, 
     '.outPorts circle': { 
     fill: '#262626' 
     }, 
     image: { 
     'xlink:href': 'https://jointjs.com/images/logo.png', 
     width: 80, 
     height: 50, 
     'ref-x': .5, 
     'ref-y': .5, 
     ref: 'rect', 
     'x-alignment': 'middle', 
     'y-alignment': 'middle' 
     } 
    } 

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

joint.shapes.devs.MyImageModelView = joint.shapes.devs.ModelView; 

// Usage: 

var imageModel = new joint.shapes.devs.MyImageModel({ 
    position: { 
    x: 200, 
    y: 250 
    }, 
    size: { 
    width: 150, 
    height: 100 
    }, 
    inPorts: ['in1', 'in2'], 
    outPorts: ['out'] 
}); 

graph.addCell(imageModel); 

CSS：

#paper { 
    display: inline-block; 
    border: 1px solid gray; 
}