CODEWITHSUNDEEP
draw.io
Adam Horvath
Adam Horvath

Reputation: 1286

Draw.io - Custom arrow with object in middle

I would like to create my custom arrow similar to Message Flow 2 arrow of draw.io palette.

BPMN General -> Message Flow 2

The mentioned arrow has an object in the middle and they behave nicely; middle object not gets resized, it moves with the line, stays upright etc. When inspecting the style of this arrow I only see the individual elements but not any expression binding them.

Arrow:

startArrow=oval;startFill=0;startSize=7;endArrow=block;endFill=0;endSize=10;dashed=1;html=1;strokeWidth=2;align=center;

Object in middle:

shape=message;html=1;outlineConnect=0;

I tried grouping an arrow with an object but could not reach the same result; the group no longer behaves as an arrow.

Upvotes: 1

Views: 5460

Answers (3)

Nuno André
Nuno André

Reputation: 5339

The simplest method I know is just to change the symbol's style (not the arrow's one), which is by default:

shape=message;html=1;outlineConnect=0;

to the desired one. Say, an isometric cube:

shape=isoCube2;isoAngle=15;html=1;

enter image description here

The new object will retain the behavior you describe. Then simply move it to the scratchpad, from where you can export a bunch of them as a library.

Upvotes: 6

Godric
Godric

Reputation: 819

It's possible, but I don't know clean way of doing this. To understand how Message Flow 2 works you can either look at the code:

var edge = new mxCell('', new mxGeometry(0, 0, 0, 0), 'startArrow=oval;startFill=0;startSize=7;endArrow=block;endFill=0;endSize=10;dashed=1;html=1;');
edge.geometry.setTerminalPoint(new mxPoint(0, 0), true);
edge.geometry.setTerminalPoint(new mxPoint(100, 0), false);
edge.geometry.relative = true;
edge.edge = true;

var cell = new mxCell('', new mxGeometry(0, 0, 20, 14), 'shape=message;html=1;outlineConnect=0;');
cell.geometry.relative = true;
cell.vertex = true;
cell.geometry.offset = new mxPoint(-10, -7);
edge.insert(cell);

or at diagram's XML (which you can find in menu Extras -> Edit Diagram)

...
<mxCell id="YzitZNannA--EQJoASZJ-14" value="" style="startArrow=oval;startFill=0;startSize=7;endArrow=block;endFill=0;endSize=10;dashed=1;html=1;" edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="370" y="160" as="sourcePoint" />
    <mxPoint x="470" y="160" as="targetPoint" />
  </mxGeometry>
</mxCell>
<mxCell id="YzitZNannA--EQJoASZJ-15" value="" style="shape=message;html=1;outlineConnect=0;" vertex="1" parent="YzitZNannA--EQJoASZJ-14">
  <mxGeometry width="20" height="14" relative="1" as="geometry">
    <mxPoint x="-10" y="-7" as="offset" />
  </mxGeometry>
</mxCell>
...

From here you can see two things:

  1. Object inside must have arrow object set as its parent. I don't know any way to do that other then js code, or direct change in Edit Diagram dialog.
  2. Geometry must be relative. This can be set by Edit Diagram dialog or with Edit -> Edit Geometry option.

Upvotes: 2

Marija
Marija

Reputation: 394

this is something that cannot be changed using style only. Since draw.io is an open source project, I suggest to take a closer look at: https://github.com/jgraph/drawio It might help.

Regards,

Upvotes: 1

Related Questions