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