Multiple link styles (solid, dashed, colored) in the palette?

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
image

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 !

1 Like

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.