JointJS - Как изменить цвет значка удаления ссылки - PullRequest
Новая
       32

JointJS - Как изменить цвет значка удаления ссылки

0 голосов
/ 05 ноября 2019

В JointJS ссылка SVG для удаления, которая появляется, представляет собой красный круг с белым X в нем. Я хотел бы изменить цвет красного круга для всех значков удаления ссылки. Кто-нибудь знает, как это сделать?

Спасибо!

Пробовал читать следующее, но не смог найти то, что хотел: https://resources.jointjs.com/demos/kitchensink

Я хочу сделать что-то подобное: 

defaultLink: new joint.shapes.app.Link({
    attrs: {
        remove: {
            circle: {
                fill: '#634ee9'
            }
        }
    }
}),

Я хочу, чтобы красный круг «удалить ссылку» изменился на синий / фиолетовый

1 Ответ

0 голосов
/ 08 ноября 2019

Вы можете реализовать свою собственную кнопку удаления 

this.paper.on({
        'link:mouseenter': function (linkView) {
            linkView.addTools(new joint.dia.ToolsView({
                tools: [
                    new joint.linkTools.Vertices({ snapRadius: 0 }),
                    new joint.linkTools.Remove({
                        distance: 20
                    }),
                    new joint.linkTools.Button({
                        markup: [{
                            tagName: 'circle',
                            selector: 'button',
                            attributes: {
                                'r': 15,
                                'stroke': '#fe854f',
                                'stroke-width': 1,
                                'fill': 'white',
                                'cursor': 'pointer'
                            }
                        }, {
                            tagName: 'text',
                            textContent: 'X',
                            selector: 'icon',
                            attributes: {
                                'fill': '#fe854f',
                                'font-size': 8,
                                'text-anchor': 'middle',
                                'font-weight': 'bold',
                                'pointer-events': 'none',
                                'y': '0.3em'
                            }
                        }],
                        distance: -50,
                        action: function () {
                            var link = this.model;
                            link.remove();
                        }
                    })
                ]
            }));
        }
  })
...