Moveable nodes in multiple layers

GoJS
1

Hello,

I would like to be able to move nodes I create outside of the default layer. According to the api all I should have to do is set to allow movement in the layer and the nodeTemplate but that doesnt seem to work. I have attached sections of relevant code below to give an example of creating the layer with moveable properties along with creating a node that I would like to be movable in the second layer:

var graphObjectMake = go.GraphObject.make;

/* Create the second layer */
var forelayer = parametricDiagram.findLayer(“Foreground”);

Diagram.addLayerBefore(graphObjectMake(go.Layer, { name: “SecondLayer” }), forelayer);

/* get second layer and set some properties for it */

var myLayer = Diagram.findLayer(“SecondLayer”);
myLayer.allowDelete = true;
myLayer.allowGroup = true;
myLayer.allowLink = true;
myLayer.allowMove = true;
myLayer.allowRelink = true;
myLayer.allowReshape = true;
myLayer.allowResize = true;
myLayer.allowRotate = true;
myLayer.allowSelect = true;
myLayer.pickable = true;

/* Part of the node template code */
Diagram.nodeTemplate = graphObjectMake(go.Node, “Table”,

    new go.Binding("layerName", "layerName"),

{
locationObjectName: “BODY”,
locationSpot: go.Spot.Center,
selectionObjectName: “BODY”,
selectable: true,
movable: true,
<span =“apple-tab-span”="" style=“white-space:pre”> … … …

/* Creating the node */
var node = new Object();

node.name = "myName;
node.key = “the key”;
node.color = “red”;
node.layerName = “SecondLayer”;

/* add the node to the diagram */
Diagram.model.addNodeData(node);

///////////////////////////////////////////////

2

Nodes are selectable and movable by default. As you can see in the Minimal sample, it should just work.

Adding and using Layers does not affect anything. See for example the parts in the Layers introduction.

3

I wish this were true but the node i create in the second layer is definitely not movable. Is there an example of creating a node in a different layer that is moveable?

4

OK, since the State Chart sample already has a mechanism to create new nodes programmatically, I’ll modify that.

First, I add a new Layer named “Second”:

    myDiagram.addLayerAfter($(go.Layer, { name: "Second" }), myDiagram.findLayer(""));

Second, I’ll add a Binding on Part.layerName to the same named property on the node data:

        new go.Binding("layerName"),

Third, I’ll modify the newly created node data in the addNodeAndLink function to specify the layerName:

      var toData = { text: "new", layerName: "Second" };

Fourth, I’ll add an HTML button to toggle the visibility of the “Second” Layer:

function toggleLayer() { myDiagram.startTransaction("toggle layer visibility"); var lay = myDiagram.findLayer("Second"); lay.visible = !lay.visible; myDiagram.commitTransaction("toggle layer visibility"); }
This is invoked by:

<button onclick="toggleLayer()">Toggle Layer</button>

Now when I run this modified StateChart sample and click on some node buttons in order to create new nodes and links dynamically in the diagram, you can see that they are always in front of the predefined nodes or even copies of the predefined nodes. And when you click on the “Toggle Layer” button, all of those addNodeAndLink nodes (and links connecting with them) disappear and reappear.

5

k ill give this a shot and post my results soon. Thanks walter!

6

Well after trying what you suggested walter and nodes still not moving I decided to do a close inspection of of the properties my diagram, nodes, and links. I found a isreadonly attached to my diagram. I had put it in there for a default diagram I was generating but had forgotten that I had put it there. After removing the isreadonly from the diagram, all default functionality was there including moveable nodes.

Thanks again walter, your insight helped me find where to look for my self-created problem!

“Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it’s worth it in the end because once you get there, you can move mountains.”
― Steve Jobs

7

Ah, so the clue there was that nodes in the regular layer(s) were not movable either!