How one can achieve the compound line Type like in power point with GOJS ?
Use two or three Shapes.
If you could provide an example of what you actually want, that would make it possible for us to provide a more specific answer.
We actually have the same request to have a compound type for Link. Link suppose to look like 2 parallel lines. See screenshot. What is the best way to implement it?
Our Link template is something like this:
protected getPart(): go.Link {
const link = makeGraphObject(go.Link);
link.bind(new go.Binding('routing', 'line', (line: IModelLineData) => this.getRouting(line.shape)));
link.bind(new go.Binding('curve', 'line', (line: IModelLineData) => this.getCurve(line.shape)));
link.bind(new go.Binding('resegmentable', 'line', (line: IModelLineData) => line.shape === LineShapes.Angled));
link.routing = go.Link.Orthogonal;
link.adjusting = go.Link.End;
link.relinkableFrom = true;
link.relinkableTo = true;
link.reshapable = true;
link.curve = go.Link.JumpOver;
link.bind(new go.Binding('movable', '', this.isMovable));
link.bind(new go.Binding('visible', 'visible').makeTwoWay());
link.bind(new go.Binding('key', 'key').makeTwoWay());
link.bind(new go.Binding('points').makeTwoWay());
link.bind(new go.Binding('zOrder').makeTwoWay());
link.mouseOver = this.onMouseOver;
link.mouseLeave = this.onMouseLeave;
link.bind(new go.Binding('fromShortLength', '', this.startShortLengthConverter));
link.bind(new go.Binding('toShortLength', '', this.endShortLengthConverter));
link.selectionChanged = this.onSelectionChanged;
link.containingGroupChanged = NodeEventHandlers.ContainingGroupChanged;
const highlightShape = makeGraphObject(go.Shape); // the highlight shape, normally transparent
highlightShape.isPanelMain = true;
highlightShape.strokeWidth = 8;
highlightShape.stroke = 'transparent';
highlightShape.name = 'HIGHLIGHT';
link.add(highlightShape);
const fromArrowShape = makeGraphObject(go.Shape);
fromArrowShape.bind(new go.Binding('fromArrow', 'line', (line: IModelLineData) => this.startShapeFigureConverter(line.startShape)));
fromArrowShape.bind(Bindings.LineColor);
fromArrowShape.bind(Bindings.LineWidth);
fromArrowShape.bind(new go.Binding('fill', 'line', (line: IModelLineData) => this.shapeFillConverter(line.startShape)));
fromArrowShape.bind(new go.Binding('segmentOffset', '', this.fromArrowSegmentOffset));
link.add(fromArrowShape);
const linkPathShape = makeGraphObject(go.Shape); // the link path shape
linkPathShape.isPanelMain = true;
linkPathShape.bind(Bindings.LineColor);
linkPathShape.bind(Bindings.LineWidth);
linkPathShape.bind(Bindings.LineStyle);
link.add(linkPathShape);
const toArrowShape = makeGraphObject(go.Shape); // the arrowhead
toArrowShape.bind(new go.Binding('toArrow', 'line', (line: IModelLineData) => this.endShapeFigureConverter(line.endShape)));
toArrowShape.bind(Bindings.LineColor);
toArrowShape.bind(Bindings.LineWidth);
toArrowShape.bind(new go.Binding('fill', 'line', (line: IModelLineData) => this.shapeFillConverter(line.endShape)));
toArrowShape.bind(new go.Binding('segmentOffset', '', this.toArrowSegmentOffset));
link.add(toArrowShape);
// Start Label
const startPanel = this.makeLabelPanel();
startPanel.bind(new go.Binding('segmentFraction', '', this.StartLabelSegmentFraction));
startPanel.bind(new go.Binding('segmentIndex', '', this.StartLabelSegmentIndex));
const startRectangle = this.makeRectangle();
startRectangle.name = 'STARTRECTANGLE';
startPanel.add(startRectangle);
const startLabel = this.makeTextBlock(); // start label text
startLabel.bind(new go.Binding('text', 'startLabel').makeTwoWay());
startLabel.name = 'STARTLABEL';
startPanel.add(startLabel);
link.add(startPanel);
// Middle Label
const midPanel = this.makeLabelPanel();
midPanel.segmentFraction = 0.5;
midPanel.bind(new go.Binding('segmentIndex', '', this.MidLabelSegmentIndex));
const midRectangle = this.makeRectangle();
midRectangle.name = 'MIDRECTANGLE';
midPanel.add(midRectangle);
const midLabel = this.makeTextBlock(); // main label text
midLabel.bind(new go.Binding('text', 'label').makeTwoWay());
midLabel.name = 'LABEL';
midPanel.add(midLabel);
link.add(midPanel);
// End Label
const endPanel = this.makeLabelPanel();
endPanel.bind(new go.Binding('segmentFraction', '', this.EndLabelSegmentFraction));
endPanel.bind(new go.Binding('segmentIndex', '', this.EndLabelSegmentIndex));
const endRectangle = this.makeRectangle();
endRectangle.name = 'ENDRECTANGLE';
endPanel.add(endRectangle);
const endLabel = this.makeTextBlock(); // end label text
endLabel.bind(new go.Binding('text', 'endLabel').makeTwoWay());
endLabel.name = 'ENDLABEL';
endPanel.add(endLabel);
link.add(endPanel);
return link;
}