Rotate Animation not working

GoJS
1

I am busy implementing a rotate animation for a button when it is clicked. This is an extract from the expandButtonClicked() method:

        // Rotates the expand/collapse button
        const button = obj.part.findObject('ExpandButton') as go.Panel;
        const targetAngle = expanded.visible ? 180 : 0;
        const rotateAnimation = new go.Animation();
        rotateAnimation.easing = go.Animation.EaseLinear;
        rotateAnimation.duration = 500; 
        rotateAnimation.add(button, 'angle', button.angle, targetAngle);
        rotateAnimation.start();

Currently the animation is not working (it is not doing anything). I have verified that the button is correctly obtained and the angles calculations work correctly. There are also no console errors.

What could possibly be a reason for the animation not working and am I possibly missing anything else? I have followed the GoJS Animation Class documentation for the implementation.

Any assistance would be appreciated.

2

When I try your code in a sample, it seems to work well:

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

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      "undoManager.isEnabled": true,
      "ModelChanged": e => {     // just for demonstration purposes,
        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
          document.getElementById("mySavedModel").textContent = e.model.toJson();
        }
      }
    });

myDiagram.nodeTemplate =
  new go.Node("Auto")
    .add(
      new go.Shape({ fill: "white" })
        .bind("fill", "color"),
      new go.Panel("Horizontal")
        .add(
          new go.TextBlock({ margin: new go.Margin(8, 8, 6, 8) })
            .bind("text"),
          go.GraphObject.build("Button", {
              click: (e, button) => {
                const targetAngle = button.angle + 180;
                const rotateAnimation = new go.Animation();
                rotateAnimation.easing = go.Animation.EaseLinear;
                rotateAnimation.duration = 500; 
                rotateAnimation.add(button, 'angle', button.angle, targetAngle);
                rotateAnimation.start();
              }
            })
            .add(
              new go.TextBlock("Click Me", { margin: new go.Margin(2, 2, 0, 2) })
            )
        )
    );

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>
3

Oh, I’m guessing what you’re trying to do. You have a “PanelExpanderButton” and you just want to rotate the icon inside the button based on whether the “COLLAPSIBLE” element is visible or not.

myDiagram.nodeTemplate =
  new go.Node("Auto")
    .add(
      new go.Shape({ fill: "white" })
        .bind("fill", "color"),
      new go.Panel("Table", { margin: 6 })
        .add(
          new go.TextBlock({ row: 0, column: 0, alignment: go.Spot.Left })
            .bind("text"),
          new go.Panel("Spot", {
              row: 0, column: 1, alignment: go.Spot.Right,
              click: (e, button) => {
                const content = button.part.findObject("COLLAPSIBLE");
                if (!content) return;
                const icon = button.findObject("ButtonIcon");
                e.handled = true;
                e.diagram.startTransaction('Collapse/Expand Panel');
                content.visible = !content.visible;
                if (icon) {
                  const targetAngle = content.visible ? 0 : 180;
                  const rotateAnimation = new go.Animation();
                  rotateAnimation.easing = go.Animation.EaseLinear;
                  rotateAnimation.duration = 500; 
                  rotateAnimation.add(icon, 'angle', icon.angle, targetAngle);
                  rotateAnimation.start();
                }
                e.diagram.commitTransaction('Collapse/Expand Panel');
              }
            })
            .add(
              new go.Shape({ fill: "transparent", strokeWidth: 0, width: 16, height: 16 }),
              new go.Shape({ name: "ButtonIcon", geometryString: 'M0 0 M0 6 L4 2 8 6 M8 8', strokeWidth: 2 })
            ),
          new go.Panel("Auto", { name: "COLLAPSIBLE", row: 1, columnSpan: 2 })
            .add(
              new go.Shape({ fill: "white" }),
              new go.TextBlock("STUFF", { margin: new go.Margin(8, 8, 6, 8) })
            )
        )
    );