Kanban Board Modification

GoJS
1

Hi,

One quick question about the Kanban Board example. When you reorder nodes between lanes, the lane itself animates depending on where you drop the node. Is there anyway to lock the lanes in to place and have no animation on drop regardless of node positioning? I would like the lanes to be fixed in position unless I drag the lanes themselves to reorder them.

2

The Kanban sample no longer does that: Kanban Board

3

If you pick up and drop a node on the leftish side of the lane, where the cursor is still over the target lane but much of the node itself is not, it does animate. Not sure if you can replicate this exact behavior, let me know if you can.

Could you also point to the logic that is controlling this behavior. I assume it has to do with the positioning of lanes / nodes and not directly with the animation itself?

4

Well, an easy answer is to disable animations:

        new go.Diagram("myDiagramDiv",
          {
            "animationManager.isEnabled": false,
            . . .
5

I did try this and it worked but was curious if I could just turn off the animation of a lane moving when a node is placed. So I’d like to keep animations for the nodes themselves and lanes being reordered and the initial animation when it slides up. I didn’t see at first glance any support for turning off animation of more granular things.

I’m thinking that the actual solution would be not touch animation at all and figure out how to lock the lanes in place regardless of node reordering behavior. But, still allow for horizontal movement of the lanes when I reorder the lanes themselves so they aren’t necessarily entirely fixed.

6

It happens because of the Layout. The Group must be sized to contain all member nodes, but the nodes must also be moved in accordance with the particular layout, so you get this tension during a drop. We’ll see if we can improve it further, I do see the problem you are talking about.

You could disable all Layout animations:

myDiagram.animationManager.canStart = function(r) {
 if (r === 'Layout') return false;
    return true;
}

Though maybe there is a better way, in this case, to disable just those drag-and-drop layout animations.

7

Thanks for the quick replies! I’ll use that code as one potential solution. I’ll have to check with the rest of my team on which is preferred if a compromise must be made, no animation or the full thing. Hopefully something in the middle can be found. Thanks for looking further into it.