-2

I'm using jointJS for creating diagrams. The library creates links thats when hovering, arrows are displayed for moving/reconnecting them. I would like to change them to small circles with another color.

As the arrows are the default design, I don't know which code I should show - as exactly this is my problem: How can I change a default setting/SVG layout?

Endless
  • 34,080
  • 13
  • 108
  • 131
user3848987
  • 1,627
  • 1
  • 14
  • 31
  • 2
    This question is too broad. Please include some code to illustrate your problem – Oriol Nov 15 '15 at 21:22
  • As the arrows are the default design, I don't know which code I should show - as exactly this is my problem: How can I change a default setting/SVG layout? – user3848987 Nov 16 '15 at 16:52

2 Answers2

3

I have redefined the default link "arrowhead" in my current project. Here is the graph code:

var paper = new joint.dia.Paper({
    el: $('#paper'),
    perpendicularLinks: true,
    gridSize: 1,
    model: graph,
    //snapLinks: { radius: 5 },
    defaultLink: new joint.shapes.devs.Link({
        attrs: {
            '.marker-target': {
                d: arrowheadShape
            }
        }
    })
});

Then this is the variable that holds the actual shape definition:

var arrowheadShape = 'M 10 0 L 0 5 L 10 10 z';

In this case I merely sized up the default triangle. You could replace this with any arbitrary SVG path you wanted.

ON EDIT: I believe I've misread your question. My approach redefines the default shape of the link's head, not the other icon that appears when you're dragging the end of a link around. My bad, sorry.

Mark Dyson
  • 305
  • 1
  • 12
2

It seems that you have to work with joint.dia.Link class.

It has inner property called arrowheadMarkup which obviously is responsible for represnting arrowheads markup (line 5828 @ joint.js v0.9.5)

    arrowheadMarkup: [
      '<g class="marker-arrowhead-group marker-arrowhead-group-<%= end %>">',
      '<path class="marker-arrowhead" end="<%= end %>" d="M 26 0 L 0 13 L 26 26 z" />',
      '</g>'
    ].join('')

Try to replace path.marker-arrowhead with any SVG code you want to see as an arrowhead in your child class.

Probably resulting code will look smth like this:

var myPrettyLink = joint.dia.Link.extend({
    ...
    arrowheadMarkup: [
      '<g class="marker-arrowhead-group marker-arrowhead-group-<%= end %>">',
      '<circle class="marker-arrowhead" cx="20" cy="20" r="15"></circle>',
      '</g>'
    ].join('')
    ...
});
Oleksandr Tkalenko
  • 1,098
  • 11
  • 23
  • Where do I have to define this? I defined `defaultLink: new joint.dia.Link({})` in `var paper = new joint.dia.Paper()` – user3848987 Nov 20 '15 at 18:08
  • ok, so you need to create new custom link which inherits from `joint.dia.Link` somewhere in beginning of your code define new link `var customLink = joint.dia.Link.extend({ arrowheadMarkup: [ '', '', '' ].join('') })` – Oleksandr Tkalenko Nov 20 '15 at 18:18
  • Thanks. It works. Do you know how to avoid different sizes? If the link is very short, the icons get smaller. I need a fixed size. – user3848987 Nov 20 '15 at 18:19
  • I'm not sure, but I guess you should extend Link with an option `{ shortLinkLength: 0 }` – Oleksandr Tkalenko Nov 20 '15 at 18:31
  • This option shows the normal (non-short) link minimal length (100 by default). All links with length lesser than provided will be treated as a short links and thus their icons will be scaled. – Oleksandr Tkalenko Nov 20 '15 at 18:33