I am trying to develop a diagram tool for which I need two kinds of links (dashed and solid). I am using Draggable Link as starting point. Most of the things are as I require but I cannot figure out how to put dashed links in the palette below solid links.
you can define a linktemplatemap
const templmap = new go.Map();
const dashedTemplate = $(
go.Link,
$(go.Shape, { name: 'dashedLink', stroke: '#000', strokeWidth: 1, strokeDashArray: [6, 3] }),
$(go.Shape, { toArrow: 'Standard', fill: '#000', stroke: '#000', strokeWidth: 1 })
)
templmap.add('dashed', dashedTemplate)
diagram.linkTemplateMap = templmap
{ from: "333", to: "444",category: 'dashed' },
the category is work for dashed
I hope it can help you!
@gunmo Thanks for the reply. The given code snippet works, but my issue is to use it in the Draggable Link example on the left palette.
In short, I don’t have access to linkDataArray if the user draws nodes and links dynamically from the palette. The code for palette looks like this,
linkTemplate: $(
go.Link,
{
locationSpot: go.Spot.Center,
selectionAdornmentTemplate: $(
go.Adornment,
"Link",
{ locationSpot: go.Spot.Center },
$(go.Shape, {
isPanelMain: true,
fill: null,
stroke: "deepskyblue",
strokeWidth: 0,
}),
$(
go.Shape, // the arrowhead
{ toArrow: "Standard", stroke: null }
)
),
},
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5,
toShortLength: 4,
},
new go.Binding("points"),
$(
go.Shape, // the link path shape
{ isPanelMain: true, strokeWidth: 2 }
),
$(
go.Shape, // the arrowhead
{ toArrow: "Standard", stroke: null }
),
),
I am new to gojs, I hope I am explaining myself.
I probably understand your needs,look like this?
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{ selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
{ relinkableFrom: true, relinkableTo: true, reshapable: true },
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5,
toShortLength: 4
},
new go.Binding("points").makeTwoWay(),
$(go.Shape, // the link path shape
{ isPanelMain: true, strokeWidth: 2 },new go.Binding('strokeDashArray', 'dash_array')),
$(go.Shape, // the arrowhead
{ toArrow: "Standard", stroke: null }),
$(go.Panel, "Auto",
new go.Binding("visible", "isSelected").ofObject(),
$(go.Shape, "RoundedRectangle", // the link shape
{ fill: "#F8F8F8", stroke: null }),
$(go.TextBlock,
{
textAlign: "center",
font: "10pt helvetica, arial, sans-serif",
stroke: "#919191",
margin: 2,
minSize: new go.Size(10, NaN),
editable: true
},
new go.Binding("text").makeTwoWay())
)
);
myPalette =
$(go.Palette, "myPaletteDiv", // must name or refer to the DIV HTML element
{
maxSelectionCount: 1,
nodeTemplateMap: myDiagram.nodeTemplateMap, // share the templates used by myDiagram
linkTemplate: // simplify the link template, just in this Palette
$(go.Link,
{ // because the GridLayout.alignment is Location and the nodes have locationSpot == Spot.Center,
// to line up the Link in the same manner we have to pretend the Link has the same location spot
locationSpot: go.Spot.Center,
selectionAdornmentTemplate:
$(go.Adornment, "Link",
{ locationSpot: go.Spot.Center },
$(go.Shape,
{ isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 }),
$(go.Shape, // the arrowhead
{ toArrow: "Standard", stroke: null })
)
},
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5,
toShortLength: 4
},
new go.Binding("points"),
$(go.Shape, // the link path shape
{ isPanelMain: true, strokeWidth: 2 },new go.Binding('strokeDashArray', 'dash_array')),
$(go.Shape, // the arrowhead
{ toArrow: "Standard", stroke: null }),
),
model: new go.GraphLinksModel([ // specify the contents of the Palette
{ text: "Start", figure: "Ellipse", "size":"75 75", fill: "#00AD5F" },
{ text: "Step" },
{ text: "DB", figure: "Database", fill: "lightgray" },
{ text: "???", figure: "Diamond", fill: "lightskyblue" },
{ text: "End", figure: "Ellipse", "size":"75 75", fill: "#CE0620" },
{ text: "Comment", figure: "RoundedRectangle", fill: "lightyellow" }
], [
// the Palette also has a disconnected Link, which the user can drag-and-drop
{ points: new go.List(/*go.Point*/).addAll([new go.Point(0, 0), new go.Point(30, 0), new go.Point(30, 40), new go.Point(60, 40)]) },
{ points: new go.List(/*go.Point*/).addAll([new go.Point(0, 0), new go.Point(30, 0), new go.Point(30, 40), new go.Point(60, 40)]),dash_array:[6, 3] }
])
});
}
the binding is important,while you can bind the style you want.
I hope it can help you !
Yes, you should either create 2 link templates or one template with a data binding on the stroke dash.
This works perfectly! Thank you. I was missing the “dash_array” part in the palette defination.