JointJS — обработка щелчка по ссылке «Удалить»

Когда ссылка создана, при наведении на нее появляется красный значок (X), чтобы удалить ее.

При нажатии на нее будет запущена последовательность событий (собранных путем подписки на событие «все»):

  • ячейка: указатель вниз
  • ссылка: указатель вниз
  • cell:pointermove (x5, кажется сомнительным)
  • ячейка: указатель вверх

просмотрев документацию и потратив слишком много времени на изучение параметров этих событий, я не вижу ничего, что можно было бы использовать, чтобы эффективно узнать, будет ли ссылка удалена или нет.

Наверняка я упускаю что-то очевидное?

Я мог бы сравнить с набором ссылок графа между pointerdown и pointerup, но это довольно уродливо.


person JoeBrockhaus    schedule 07.05.2015    source источник


Ответы (3)


Если вы хотите прослушать событие удаления, которое запускается «X» в ссылке (JointJS называет эти элементы при наведении курсора «инструментом ссылки»):

Вы можете передать событие элементу SVG, которое будет запущено на вашемjoint.dia.Paper, например:

    let link = new joint.dia.Link({
        source: getLink(conn.source),
        target: getLink(conn.target),
        attr: {},
        router: {name: 'metro'},
        customAttr: {fullSource: conn.source, fullTarget: conn.target},
        toolMarkup: [
            '<g class="link-tool">',
            '<g class="tool-remove" event="tool:remove">',
            '<circle r="11" />',
            '<path transform="scale(.8) translate(-16, -16)" d="M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z"/>',
            '<title>Remove link.</title>',
            '</g>',
            '**<g event="link:options">**',
            '<circle r="11" transform="translate(25)"/>',
            '<path fill="white" transform="scale(.55) translate(29, -16)" d="M31.229,17.736c0.064-0.571,0.104-1.148,0.104-1.736s-0.04-1.166-0.104-1.737l-4.377-1.557c-0.218-0.716-0.504-1.401-0.851-2.05l1.993-4.192c-0.725-0.91-1.549-1.734-2.458-2.459l-4.193,1.994c-0.647-0.347-1.334-0.632-2.049-0.849l-1.558-4.378C17.165,0.708,16.588,0.667,16,0.667s-1.166,0.041-1.737,0.105L12.707,5.15c-0.716,0.217-1.401,0.502-2.05,0.849L6.464,4.005C5.554,4.73,4.73,5.554,4.005,6.464l1.994,4.192c-0.347,0.648-0.632,1.334-0.849,2.05l-4.378,1.557C0.708,14.834,0.667,15.412,0.667,16s0.041,1.165,0.105,1.736l4.378,1.558c0.217,0.715,0.502,1.401,0.849,2.049l-1.994,4.193c0.725,0.909,1.549,1.733,2.459,2.458l4.192-1.993c0.648,0.347,1.334,0.633,2.05,0.851l1.557,4.377c0.571,0.064,1.148,0.104,1.737,0.104c0.588,0,1.165-0.04,1.736-0.104l1.558-4.377c0.715-0.218,1.399-0.504,2.049-0.851l4.193,1.993c0.909-0.725,1.733-1.549,2.458-2.458l-1.993-4.193c0.347-0.647,0.633-1.334,0.851-2.049L31.229,17.736zM16,20.871c-2.69,0-4.872-2.182-4.872-4.871c0-2.69,2.182-4.872,4.872-4.872c2.689,0,4.871,2.182,4.871,4.872C20.871,18.689,18.689,20.871,16,20.871z"/>',
            '<title>Link options.</title>',
            '</g>',
            '</g>'
        ].join('')
    });

И тогда вы можете прослушать именно "tool:remove", или как вы его назвали, событие:

    paper.on('tool:remove', function(evt, linkView) {
        console.log("Removing link" + linkView.model.id);
        linkView.model.remove();
    })
person Shady    schedule 20.01.2016
comment
Я не пробовал (и не смогу), но, судя по всему, это, вероятно, то, что я хотел. - person JoeBrockhaus; 20.01.2016

Вы можете прослушать событие графа remove, чтобы узнать, была ли удалена ссылка:

graph.on('remove', function(cell, collection, opt) {
   if (cell.isLink()) {
      // a link was removed  (cell.id contains the ID of the removed link)
   }
})
person dave    schedule 07.05.2015
comment
Потрясающий. Спасибо Дэйв! Код, который я поддерживаю, был только документом для мониторинга - person JoeBrockhaus; 07.05.2015
comment
При перерисовке графика эти события также срабатывают. Если я не хочу обрабатывать эти события, лучшее решение для отмены/повторной подписки? - person JoeBrockhaus; 26.05.2015
comment
@dave sir Не могли бы вы помочь мне с этим вопросом SVG формы"> stackoverflow.com/questions/31671743/ - person ; 28.07.2015

person    schedule
comment
для удаления круга и ссылки в зависимости от того, связан ли круг с другими этапами или нет, отредактировав json, обновив элемент графика gph, вы также можете редактировать. - person Arka Bandyopadhyay; 16.02.2017
comment
Если вы рассмотрите диаграмму из 2 кругов и связь между ними. Если вы нажмете кнопку удаления ссылки на ссылке, это событие removeLink будет запущено. Затем оно спросит пользователя, следует ли удалить весь поток или единственную ссылку, если ссылка связана с одним узловым кругом без больше ссылки после удаления существующей ссылки в потоке эта ссылка с кругом или узлом будет удалена. NB. здесь шаг ссылается на ссылку. - person Arka Bandyopadhyay; 16.02.2017