Template map problem

GoJS
1

I am generating components dynamically on user input and using template map.
Problem is, whenever I generate a new component, all the other resized components revert to their original sizes. Is there a way I can avoid this?
Thanks

2

Are you using one or more than one node template?

What is your node template? I’m wondering if you do not have a TwoWay Binding on the desiredSize of the object that the user resizes. Please read GoJS Tools -- Northwoods Software and look at the Bindings in those examples.

3

Thanks Walter, it is working for pre-defined shapes now.
I am using multiple templates
The two way binding is not working though on custom shape that I defined. Are there any modifications required for shapes defined by geometry string?

4

How do you define your custom shape?

5

via geometryString property e g , “F M0 0 L150 0 Q200 50 150 100 L0 100 L0 0 M70 50 L160 50
M70 50 L50 10 M70 50 L50 90”

6

This works well for me:

<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          "ModelChanged": function(e) {
            if (e.isTransactionFinished) {
              document.getElementById("mySavedModel").textContent = myDiagram.model.toJson();
            }
          },
          "undoManager.isEnabled": true
        });

    myDiagram.nodeTemplate =
      $(go.Node, "Vertical",
        { resizable: true, resizeObjectName: "SHAPE", selectionObjectName: "SHAPE" },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Shape,
          { name: "SHAPE", fill: "white", portId: "" },
          { geometryString: "F M0 0 L150 0 Q200 50 150 100 L0 100 L0 0 M70 50 L160 50 M70 50 L50 10 M70 50 L50 90" },
          new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },
          new go.Binding("text"))
      );

    myDiagram.model = new go.GraphLinksModel([
        { key: 1, text: "Alpha", color: "lightblue" },
        { key: 2, text: "Beta", color: "orange" },
        { key: 3, text: "Gamma", color: "lightgreen", group: 5 },
        { key: 4, text: "Delta", color: "pink", group: 5 },
        { key: 5, text: "Epsilon", color: "green", isGroup: true }
      ],
      [
        { from: 1, to: 2, color: "blue" },
        { from: 2, to: 2 },
        { from: 3, to: 4, color: "green" },
        { from: 3, to: 1, color: "purple" }
      ]);
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>
</body>
</html>
7

Thanks Walter,
I had the ‘fill’ binding before the size binding. For that case, it was drawing a blank shape.It generates my shape now

8

But the order of the Bindings does not matter if the target properties are different, as they usually are. I just tried swapping the order in which they are defined, and the behavior was the same.

Just for fun I also added bindings for Shape.figure and Shape.geometryString, so that you can specify either a figure or a custom geometry:

        $(go.Shape,
          { name: "SHAPE", fill: "white", portId: "" },
          { geometryString: "F M0 0 L150 0 Q200 50 150 100 L0 100 L0 0 M70 50 L160 50 M70 50 L50 10 M70 50 L50 90" },
          new go.Binding("fill", "color"),
          new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
          new go.Binding("figure"),
          new go.Binding("geometryString", "geo")),

In this case if you specify both figure and geo on the node data, the order of the bindings and the order in which you set the data properties do matter. But depending on that is unwise.