Alignment changing after reopening the saved diagram

GoJS
1

Hi ,

All I am facing an issue regarding the alignment change of GOJS diagrams.I am creating a workflow in GOJS by using groups,nodes and links and after that saving it. But when I am reopening the diagram GOJS is showing that diagram with some other alignment not like the diagram I have saved. But I want to show it like the way I have saved it how to do this,may be some logic is missing in my code. I am attaching two screen shots one is while saving the data and another is after reopening the saved data.

Thanks and Regards
Utpal Maity

2

Are those three nodes actually collapsed Groups? If so, does their group template have a TwoWay Binding on their Part.location?

3

Thanks it is resolved now

4

Hi Walter,
Just noticed another problem inside the group. The nodes inside the groups are getting scattered . First image is before save and second image is when we are reopening the image after saving.

5

Are you saving the locations of the nodes?

6

yes in the node figure section data are saving

7

OK, so the problem is that the layout is happening again when you load? If that is the case and you desire that the layout not happen upon a load, set Layout.isInitial to false.

8

Walter this is will work except one problem . If i set this property in the GroupTemplate then when I am dropping a new group inside which there are three nodes then they are not arranging.But previously they are arranging.Now they are appearing one over another.So is there any way to overriding the grouptemplate layout property to true when defining a tempate with three nodes. The template defination is like this.

this.AddNodeGroupTemplate = function (key, id, val, cid) {
var key1 = generateUUID();
var key2 = generateUUID();
var key3 = generateUUID();
debugger;
var data = model.nodeDataArray[model.nodeDataArray.length - 1];

    model.startTransaction("changeName");
    model.setDataProperty(data, "text", "Get");
    model.commitTransaction("changeName");

    model.startTransaction("changeId");
    model.setDataProperty(data, "touchPointId", id);
    model.commitTransaction("changeId");

    model.startTransaction("changecId");
    model.setDataProperty(data, "connectionId", cid);
    model.commitTransaction("changecId");

    model.startTransaction("changeUid");
    model.setDataProperty(data, "key", key);
    model.commitTransaction("changeUid");

    model.startTransaction("changeType");
    model.setDataProperty(data, "type", 5);
    model.commitTransaction("changeType");

    model.startTransaction("changegeo");
    model.setDataProperty(data, "geometryString", "M13.922 5.626c-0.051-2.011-1.695-3.626-3.717-3.626-1.184 0-2.239 0.555-2.92 1.418-0.382-0.494-0.98-0.812-1.652-0.812-1.153 0-2.088 0.936-2.088 2.089 0 0.101 0.007 0.199 0.021 0.296-0.175-0.032-0.356-0.049-0.54-0.049-1.672-0-3.027 1.356-3.027 3.029s1.355 3.029 3.027 3.029h1.434l3.539 3.664 3.539-3.664 1.742-0c1.502-0.003 2.719-1.222 2.719-2.726 0-1.283-0.886-2.358-2.078-2.648zM8 13l-3-3h2v-3h2v3h2l-3 3z");
    model.commitTransaction("changegeo");

    model.startTransaction("changeStroke");
    model.setDataProperty(data, "stroke", "#888");
    model.commitTransaction("changeStroke");

    model.startTransaction("changeBackground");
    model.setDataProperty(data, "background", "#F7CA18");
    model.commitTransaction("changeBackground");

    model.startTransaction("changeColor");
    model.setDataProperty(data, "color", "#364150");
    model.commitTransaction("changeColor");

    model.startTransaction("changegrp");
    model.setDataProperty(data, "group", key1);
    model.commitTransaction("changegrp");

    model.startTransaction("changecategory");
    model.setDataProperty(data, "category", "Default");
    model.commitTransaction("changecategory");


    this.addDatas([{
        key: key2,
        text: "Process",
        stroke: "#888",
        background: "#E87E04",
        color: "#364150",
        category: "Default",
        touchPointId: id,
        connectionId: cid,
        geometryString: "M11.366 22.564l1.291-1.807-1.414-1.414-1.807 1.291c-0.335-0.187-0.694-0.337-1.071-0.444l-0.365-2.19h-2l-0.365 2.19c-0.377 0.107-0.736 0.256-1.071 0.444l-1.807-1.291-1.414 1.414 1.291 1.807c-0.187 0.335-0.337 0.694-0.443 1.071l-2.19 0.365v2l2.19 0.365c0.107 0.377 0.256 0.736 0.444 1.071l-1.291 1.807 1.414 1.414 1.807-1.291c0.335 0.187 0.694 0.337 1.071 0.444l0.365 2.19h2l0.365-2.19c0.377-0.107 0.736-0.256 1.071-0.444l1.807 1.291 1.414-1.414-1.291-1.807c0.187-0.335 0.337-0.694 0.444-1.071l2.19-0.365v-2l-2.19-0.365c-0.107-0.377-0.256-0.736-0.444-1.071zM7 27c-1.105 0-2-0.895-2-2s0.895-2 2-2 2 0.895 2 2-0.895 2-2 2zM32 12v-2l-2.106-0.383c-0.039-0.251-0.088-0.499-0.148-0.743l1.799-1.159-0.765-1.848-2.092 0.452c-0.132-0.216-0.273-0.426-0.422-0.629l1.219-1.761-1.414-1.414-1.761 1.219c-0.203-0.149-0.413-0.29-0.629-0.422l0.452-2.092-1.848-0.765-1.159 1.799c-0.244-0.059-0.492-0.109-0.743-0.148l-0.383-2.106h-2l-0.383 2.106c-0.251 0.039-0.499 0.088-0.743 0.148l-1.159-1.799-1.848 0.765 0.452 2.092c-0.216 0.132-0.426 0.273-0.629 0.422l-1.761-1.219-1.414 1.414 1.219 1.761c-0.149 0.203-0.29 0.413-0.422 0.629l-2.092-0.452-0.765 1.848 1.799 1.159c-0.059 0.244-0.109 0.492-0.148 0.743l-2.106 0.383v2l2.106 0.383c0.039 0.251 0.088 0.499 0.148 0.743l-1.799 1.159 0.765 1.848 2.092-0.452c0.132 0.216 0.273 0.426 0.422 0.629l-1.219 1.761 1.414 1.414 1.761-1.219c0.203 0.149 0.413 0.29 0.629 0.422l-0.452 2.092 1.848 0.765 1.159-1.799c0.244 0.059 0.492 0.109 0.743 0.148l0.383 2.106h2l0.383-2.106c0.251-0.039 0.499-0.088 0.743-0.148l1.159 1.799 1.848-0.765-0.452-2.092c0.216-0.132 0.426-0.273 0.629-0.422l1.761 1.219 1.414-1.414-1.219-1.761c0.149-0.203 0.29-0.413 0.422-0.629l2.092 0.452 0.765-1.848-1.799-1.159c0.059-0.244 0.109-0.492 0.148-0.743l2.106-0.383zM21 15.35c-2.402 0-4.35-1.948-4.35-4.35s1.948-4.35 4.35-4.35 4.35 1.948 4.35 4.35c0 2.402-1.948 4.35-4.35 4.35z",
        group: key1,
        type: 7//,
        

    }, {
        key: key3,
        text: "Post",
        stroke: "#888",
        background: "#F7CA18",
        color: "#364150",
        category: "Default",
        touchPointId: id,
        connectionId: cid,
        geometryString: "M13.942 6.039c0.038-0.174 0.058-0.354 0.058-0.539 0-1.381-1.119-2.5-2.5-2.5-0.222 0-0.438 0.029-0.643 0.084-0.387-1.209-1.52-2.084-2.857-2.084-1.365 0-2.516 0.911-2.88 2.159-0.355-0.103-0.731-0.159-1.12-0.159-2.209 0-4 1.791-4 4s1.791 4 4 4h2v3h4v-3h3.5c1.381 0 2.5-1.119 2.5-2.5 0-1.23-0.888-2.253-2.058-2.461zM9 10v3h-2v-3h-2.5l3.5-3.5 3.5 3.5h-2.5z",
        group: key1,
        type: 6
       

    }, {
        key: key1,
        touchPointId: id,
        connectionId: cid,
        isGroup: true,
        text: val,
        type: 1
    }]);



    this.addLinks([{ key: generateUUID(), from: key, to: key2 }, { key: generateUUID(), from: key2, to: key3 }]);
};
9

You should not have repeated calls to startTransaction - commitTransaction. Put all changes together into a single transaction.

Group templates cannot have any member nodes. Node or group templates cannot have any connected links.

10

yes I agree with you that I need to refactor code but as of now what is the way out to overcome the arranging issue inside the group. If I apply isinitial property then during adding the new group inside nodes are not arranging.

11

I do not understand the circumstances when you want to have a layout performed and when not.

12

In my code I have converted nodes as templates . The scenario is that when I drop that particular type of node in my graph then that node automatically created a group and three nodes inside it and those nodes are arranged inside that group vertically one after another and link is created between nodes. But if I apply that layout property then that arranging is not happening. One node is overlapping another node.

13

Maybe you should also set Layout.isOngoing to false, so that you can control exactly when layouts happen. That way you can just assign the initial locations of the three nodes.

I still cannot tell what you want to do. Please read GoJS Layouts -- Northwoods Software, especially the section about Layout invalidation.