Unable to drag 'Button' extension in Canvas or Palette

GoJS
1

I have use Shape ‘Button’ and used $(‘Button’) to get the button into palette and canvas, But when i try to drag it doActivate is not getting called.

2

Just to make sure I understand your situation, you have the same node template used in both your Palette and your main Diagram, and the node template has a “Button”. The user cannot drag the node when their mouse-down starts within the “Button”.

Yes, the user cannot drag starting from a “Button”, but that’s true in both the Palette and a regular Diagram. I assume that’s not an issue in your main Diagram, but it is an issue for the user to be able to drag the node out of a Palette.

One solution is to disable the ActionTool in the Palette. One way of doing that is shown in the code below in the initialization of the Palette.

However, this solution does not prevent the clicking of the “Button” invoking its click event handler. The easy solution is to customize that event handler to do nothing when the node is in a Palette.

Here’s a complete sample that demonstrates one way to handle the problem:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Editor</title>
  <!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
</head>
<body>
  <div style="width: 100%; display: flex; justify-content: space-between">
    <div style="display: flex; flex-direction: column; margin: 0 2px 0 0">
      <div id="myPaletteDiv" style="flex-grow: 1; width: 140px; background-color: floralwhite; border: solid 1px black"></div>
      <div id="myOverviewDiv" style="margin: 2px 0 0 0; width: 140px; height: 100px; background-color: whitesmoke; border: solid 1px black"></div>
    </div>
    <div id="myDiagramDiv" style="flex-grow: 1; height: 400px; border: solid 1px black"></div>
  </div>
  <div>
    <button id="myLoadButton">Load</button>
    <button id="mySaveButton">Save</button>
  </div>
  <textarea id="mySavedModel" style="width:100%;height:200px">
{ "class": "go.GraphLinksModel",
  "nodeDataArray": [
{"key":1, "text":"hello", "color":"green", "location":"0 0"},
{"key":2, "text":"world", "color":"red", "location":"70 0"}
  ],
  "linkDataArray": [
{"from":1, "to":2}
  ]}
  </textarea>

  <script src="https://cdn.jsdelivr.net/npm/gojs/release/go-debug.js"></script>
  <script id="code">
// initialize main Diagram
const myDiagram =
  new go.Diagram("myDiagramDiv", {
      "undoManager.isEnabled": true
    });

myDiagram.nodeTemplate =
  new go.Node("Vertical")
    .add(
      go.GraphObject.build("Button", {
          click: (e, button) => {
            if (button.diagram instanceof go.Palette) return;
            alert(button.part.data.text + " clicked");
          }
        })
        .bind("ButtonBorder.fill", "color")
        .add(
          new go.TextBlock("Drag me from Palette\nbut don't click me?")
            .bind("stroke", "color", c => go.Brush.isDark(c) ? "white" : "black")
        ),
      new go.TextBlock()
        .bind("text")
    );

// initialize Palette
myPalette =
  new go.Palette("myPaletteDiv", {
      "actionTool.isEnabled": false,
      nodeTemplateMap: myDiagram.nodeTemplateMap,
      model: new go.GraphLinksModel([
        { text: "red node", color: "red" },
        { text: "green node", color: "green" },
        { text: "blue node", color: "blue" },
        { text: "orange node", color: "orange" }
      ])
    });

// initialize Overview
myOverview =
  new go.Overview("myOverviewDiv", {
      observed: myDiagram,
      contentAlignment: go.Spot.Center
    });

// save a model to and load a model from Json text, displayed below the Diagram
function save() {
  const str = myDiagram.model.toJson();
  document.getElementById("mySavedModel").value = str;
}
document.getElementById("mySaveButton").addEventListener("click", save);

function load() {
  const str = document.getElementById("mySavedModel").value;
  myDiagram.model = go.Model.fromJson(str);
}
document.getElementById("myLoadButton").addEventListener("click", load);

load();
  </script>
</body>
</html>
3

Its also not moving in the main diagram. Point to note is I have a Top level with node auto inside it i have a button. If i have a bigger Panel i can move the panel but like you said if my click start from the button its not working even if its in the main diagram.

We are mainly introducing extensions to our project, Would really appreciate any precautions or tips to make sure they work as expected.

4

Normallly one does not want to support dragging with a “Button”, because then when intending to just click the mouse/finger might move a bit, causing the node to be moved rather than resulting in a click.