JointJS 필요부분 정리

링크 Arrow 모양 변경 

https://jsfiddle.net/vtalas/4copge0m/

링크 양방향 화살표 없애기

defaultLink: new joint.shapes.app.Link({
    markup: [
        '<path class="connection" stroke="black" d="M 0 0 0"/>',
        '<path class="marker-source" fill="black" stroke="black" d="M 0 0 0"/>',
        '<path class="marker-target" fill="black" stroke="black" d="M 0 0 0"/>',
        '<path class="connection-wrap" d="M 0 0 0"/>',
        '<g class="marker-vertices"/>',
        //'<g class="marker-arrowheads"/>'
    ].join(''),
}),

Object 간 Link연결시 이벤트 모니터링

graph.on('change:source change:target', function(link) {
    if (link.get('source').id && link.get('target').id) {
        // both ends of the link are connected.
    }
})

스텐실 

Custom Object 생성

{
    type: 'devs.Model',
    attrs: {
        body : {
            width: 50,
            height: 30,
        },
        rect: {
            stroke: '#d1d1d1',
            fill : '#08439f',
            // 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: 'MME',
            'ref-y': 25,
            fill: '#ffffff',
            fontSize: 15,
            strokeWidth: 0
        },
        '.inPorts circle': {
            fill: '#c8c8c8'
        },
        '.outPorts circle': {
            fill: '#262626'
        },
    },
    ports: {items: [{group: 'in'}, {group: 'out'}, {group: 'out'}, {group: 'out'}]},
    size: { width: 5, height: 3 },
    inPorts: ['cp1', 'cp2'],
    outPorts: ['cp3', 'cp4'],
},

결과

Inspector 

Data 내용 접근

$selectedCell.attributes["attrName"]

Paper내 Cell Data 변경

$selectedCell.attr('text/text', "attrName");

키값으로 얻어오고 attr 로 저장