ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • JointJS 필요부분 정리
    Front-End 2018. 11. 2. 13:31

    링크 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 로 저장

    'Front-End' 카테고리의 다른 글

    React vs Angular vs Vue  (0) 2019.01.16
    Rappid / JointJS 프로젝트 완료  (0) 2018.12.21
    Intellij 코드 자동정렬 Ctrl + Shift + F  (1) 2018.11.06
    동적 CP 추가관련 참고 API  (0) 2018.11.01
    CSS 공부 추천  (0) 2018.04.24
    CSS position 속성  (0) 2018.03.28
    HTML 태그 정리  (0) 2018.03.28

    댓글

COPYRIGHT 2010 EpoNg. ALL RIGHTS RESERVED.