Clickable hyperlink in selectionAdornmentTemplate

GoJS
1

I found that I can’t jump to the destination website through the hyperlink in the selectionAdornmentTemplate, after searching for related information, I learn about that adornment can’t click at default setting, then I made effort below

const inputAdornmentTemplate = 
    $(go.Adornment, "Spot",
    {isActionable:true},
      $(go.Panel, "Auto",
        $(go.Shape, { fill: null, stroke: '#ff00ff', strokeWidth: 3 }),
        $(go.Placeholder)
      ),
      $(go.Panel, "Vertical",
      {alignment: go.Spot.BottomRight},
      $(go.Panel, 'Auto',inputAdornmentMainTemplate),
      $(go.Panel,"Auto",inputBottomMore),),
      
    );

However it doesn’t work. So how can I make the hyperlink clickable in Adornment?

2

Things in Adornments aren’t normally directly interactive, to avoid having the user accidentally interact with the Adornment in unexpected ways at unexpected times. For this case you would set or bind isActionable to true.

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>

  <script src="https://unpkg.com/gojs"></script>
  <script src="https://unpkg.com/gojs/extensions/HyperlinkText.js"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    { "undoManager.isEnabled": true });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    {
      doubleClick: (e, node) => {
        if (node.findAdornment("DoubleClicked")) {
          node.removeAdornment("DoubleClicked");
        } else {
          const ad =
            $(go.Adornment, "Spot",
              $(go.Placeholder),
              $(go.Panel, "Auto",
                { alignment: go.Spot.TopRight, alignmentFocus: new go.Spot(0, 1, 10, -10) },
                $(go.Shape, "Circle", { fill: "yellow", strokeWidth: 0 }),
                $("HyperlinkText",
                  node => "https://gojs.net",
                  { isActionable: true },
                  $(go.TextBlock, { stroke: "blue" },
                    new go.Binding("text"))
                )
              )
            )
          ad.adornedObject = node;
          node.addAdornment("DoubleClicked", ad);
        }
      }
    },
    $(go.Shape, { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
      new go.Binding("fill", "color")),
    $(go.TextBlock, { margin: 8 },
      new go.Binding("text"))
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" }
],
[
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 2, to: 2 },
  { from: 3, to: 4 },
  { from: 4, to: 1 }
]);
  </script>
</body>
</html>

Although I wonder if we shouldn’t change “HypertextLink” so that that property is true by default.

1 Like