I would like to create my custom arrow similar to Message Flow 2
arrow of draw.io palette.
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.
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:
Edit Diagram
dialog.Edit Diagram
dialog or with Edit -> Edit Geometry
option.