We have two types of links on the diagram and I can’t get those two types to have an independent routing. In my mind one is interrupting other. What I’m trying to achieve is like they would be on a separate level (layers) although setting layerName doesn’t help.
Here is the result of adding second type of links between nodes and what happens to the first type of links (parent-child) – they get moved a bit which we’d like to avoid.
Templates for those links are below.
If you have any idea what I might be doing wrong, I would appreciate.
parent-child
{
routing: Link.Orthogonal,
corner: 5,
deletable: false,
selectionAdorned: false,
fromShortLength: -nodeTemplateConfig.linksDragBorderWidth - 10,
toShortLength: -nodeTemplateConfig.linksDragBorderWidth - 10,
layerName: "Frontground",
},
$(Shape, {
strokeWidth: 2,
stroke: '#B7BCCD',
}),
$(Panel, 'Auto',
{
segmentIndex: -1,
segmentFraction: 1,
},
createFiltersBinding('shareholding'),
$(Shape, 'Capsule', {
name: 'shareRectangle',
width: 45,
height: 20,
fill: '#838899',
stroke: '#838899',
strokeWidth: 1,
//margin: new Margin(0, 0, 20, 0),
}),
$(Panel, 'Horizontal',
$(TextBlock,
{
name: 'share',
font: '9pt Inter, sans-serif',
stroke: '#ffffff',
alignment: Spot.Center,
margin: new Margin(2, 0, 0, 0),
isMultiline: false,
textValidation(textBlock: TextBlock, oldString: string, newString: string): boolean {
const value = parseInt(newString);
return /^\d+$/.test(newString) && value >= 0 && value <= 100;
},
},
createRoleBinding('editable', 'admin'),
new Binding('text', 'share').makeTwoWay(),
),
$(TextBlock, {
name: 'sharePercent',
text: '%',
font: '9pt sans-serif',
stroke: '#ffffff',
alignment: Spot.Center,
margin: new Margin(2, 0, 0, 0),
}),
),
),
);
Additional links:
$(Link,
{
background: "pink",
contextMenu: $(HTMLInfo, {
show: loansContextMenu.showContextMenu,
hide: loansContextMenu.hideContextMenu,
}),
layerName: 'Background',
curve: Link.Bezier,
fromShortLength: -nodeTemplateConfig.linksDragBorderWidth,
toShortLength: nodeTemplateConfig.linksDragBorderWidth - 5,
fromEndSegmentLength: 32,
toEndSegmentLength: 30,
relinkableFrom: false,
relinkableTo: false,
resegmentable: false,
isLayoutPositioned: false,
isTreeLink: false,
selectionAdorned: false,
deletable: false,
mouseEnter: (event: InputEvent, link: GraphObject): void => {
const highlight = (link as Link).findObject('highlight') as Shape;
highlight.stroke = '#55ACEB';
highlight.strokeWidth = 7;
},
mouseLeave: (event: InputEvent, link: GraphObject): void => {
const highlight = (link as Link).findObject('highlight') as Shape;
highlight.stroke = 'transparent';
},
},
createRoleBinding('reshapable', 'admin'),
createFiltersBinding('loans'),
new Binding('curviness', 'curviness').makeTwoWay(),
// Highlight
$(Shape, {
name: 'highlight',
isPanelMain: true,
strokeWidth: 8,
stroke: 'transparent',
}),
// Path
$(Shape,
{
isPanelMain: true,
stroke: 'gray',
strokeWidth: 2,
strokeCap: 'round',
},
new Binding('stroke', '', (object) => object.data.color).ofObject(),
),
// $(Shape,
// {
// isPanelMain: true,
// stroke: 'pink',
// strokeWidth: 8,
// strokeDashArray: [8, 4],
// },
// new Binding('visibility', '', (object) => object.data.glow).ofObject(),
// ),
// Arrowhead
$(Shape,
{
name: 'arrowhead',
toArrow: 'Triangle',
strokeWidth: 0,
scale: 1.2,
},
new Binding('fill', '', (object) => object.data.color).ofObject(),
),
// Balance label
$(Panel, 'Auto',
{
name: 'loanToken',
segmentIndex: NaN,
cursor: 'pointer',
},
new Binding('segmentFraction', '', (model) => model.view === 'constellation' ? 0.5 : 0.55).ofModel(),
new Binding('visible', '', (object) => object.data.status !== 'draft').ofObject(),
$(Shape, 'Circle',
{
width: 12, height: 12,
margin: 0,
},
new Binding('stroke', '', (object) => object.data.color).ofObject(),
new Binding('fill', '', (object) => object.data.color).ofObject(),
),
$(Shape, 'PlusLine', {
stroke: '#ffffff',
width: 8,
height: 8,
margin: 2,
}),
),
);