Resize ItemArrays

Hi, dear Developers.

I have problem with changing TextBlock size.

i use next code (from Intro):

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: "#3AA7A3" }),
      $(go.Panel, "Vertical",
        new go.Binding("itemArray", "items"),
        {
          itemTemplate:
            $(go.Panel, "Auto",
              { margin: 2 },
              $(go.Shape, "RoundedRectangle",
                { fill: "#91E3E0" },
                new go.Binding("fill", "c")),
              $(go.TextBlock, new go.Binding("text", "t"),
                { margin: 2 })
            )
        })
    );

and next data model:


  diagram.model =
    $(go.GraphLinksModel,
      {
        nodeDataArray: [
          {
            key: 1,
            items: [
              { t: "Alpha", c: "orange" },
              { t: "Beta" },
              { t: "Gamma", c: "green" },
              { t: "Delta", c: "yellow" }
            ]
          },
          {
            key: 2,
            items: [
              { t: "first", c: "red" },
              { t: "second", c: "cyan" },
              { t: "third" }
            ]
          }
        ],
        linkDataArray: [
          { from: 1, to: 2 }
        ]
      }
    );

I want change size of each TextBlock in the node and save It in the data model. Help me, please, resolve the problem.

I’m sorry, but I cannot tell what the problem is. Please explain more precisely what you want and what you have tried and how it did not achieve what you wanted.

I use next code to resize textBlock, but after click by TextBlock resizeAdornmet not showing

function shapeClick(e, obj){
  var node = obj.part;
  if (!node.isSelected) return;
  e.diagram.commit(function(d){
    node.resizeObjectName = obj.name;
    node.updateAdornmets();
  }, null);
}
  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: "#3AA7A3" }),
      $(go.Panel, "Vertical",
        new go.Binding("itemArray", "items"),
        {
          itemTemplate:
            $(go.Panel, "Auto",
              { margin: 2 },
              $(go.Shape, "RoundedRectangle",
                { fill: "#91E3E0" },
                new go.Binding("fill", "c")),
              $(go.TextBlock, {
                         name: 'sizeText',
                         click: shapeClicked,
                      },
                  new go.Binding("text", "t"),
                  new go.Binding("desireSize", "sizeText". go.Size.parse).makeTwoWay(go.Size.stringify),
                { margin: 2 })
            )
        })
    );

First, I hope you realize that you have a lot of typos. Alas, JavaScript is not going to help you fix them unless they are function/method names that you are calling.

Did you read Resizing objects in a node, independently - GoJS - Northwoods Software (nwoods.com) ?
It uses https://gojs.net/extras/resizingChooseObject.html

In your case you seem to be generalizing that code by having the resized objects be produced from an itemTemplate. That’s OK, but the problem is that that code depends on calling Node.findObject, but that method does not work to find names within panels created by copying the item template. See how each TextBlock will have the same name? How is findObject supposed to know which one you want?

So this is more complicated than the other sample. Let’s have the click event handler remember which item was clicked, and then we’ll override ResizingTool.updateAdornments to use that TextBlock instead of the usual Part.resizeObjectName to identify what should be resized by the user. Here’s the whole sample:

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

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          // a simplified override of the default behavior of ResizingTool.updateAdornments:
          "resizingTool.updateAdornments": function(part) {
            if (part === null || part instanceof go.Link) return;  // can't resize links
            if (part.isSelected && !this.diagram.isReadOnly) {
              let resizeObj = part.resizeObject;
              if (typeof part._clicked === "number") {
                var itemdata = part.data.items[part._clicked];
                if (itemdata) {
                  var panel = part.findObject("PANEL").findItemPanelForData(itemdata);
                  if (panel) {
                    var tb = panel.findObject("TB");
                    resizeObj = tb;
                  }
                }
              }
              let adornment = part.findAdornment(this.name);
              if (resizeObj !== null && part.canResize() && part.actualBounds.isReal() && part.isVisible() && resizeObj.actualBounds.isReal() && resizeObj.isVisibleObject()) {
                if (adornment === null || adornment.adornedObject !== resizeObj) {
                  adornment = this.makeAdornment(resizeObj);
                }
                if (adornment !== null) {
                  const angle = resizeObj.getDocumentAngle();
                  this.updateResizeHandles(adornment, angle);  // fix up any cursors to point the right way
                  part.addAdornment(this.name, adornment);
                  return;
                }
              }
            }
            part.removeAdornment(this.name);
          },

          "undoManager.isEnabled": true,
          "ModelChanged": function(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 =
    $(go.Node, "Auto",
      { resizable: true },
      $(go.Shape, "RoundedRectangle",
        { fill: "#3AA7A3" }),
      $(go.Panel, "Vertical",
        new go.Binding("itemArray", "items"),
        {
          name: "PANEL",
          itemTemplate:
            $(go.Panel, "Auto",
              { margin: 2 },
              $(go.Shape, "RoundedRectangle",
                { fill: "#91E3E0" },
                new go.Binding("fill", "c")),
              $(go.TextBlock,
                {
                  name: "TB",
                  margin: 2,
                  click: function(e, tb) {
                    tb.part._clicked = tb.panel.itemIndex;
                    tb.part.updateAdornments();
                  }
                },
                new go.Binding("text", "t"),
                new go.Binding("desiredSize", "sizeText", go.Size.parse).makeTwoWay(go.Size.stringify)
              )
            )
        })
    );

    myDiagram.model =
      $(go.GraphLinksModel,
      {
        nodeDataArray: [
          {
            key: 1,
            items: [
              { t: "Alpha", c: "orange" },
              { t: "Beta" },
              { t: "Gamma", c: "green" },
              { t: "Delta", c: "yellow" }
            ]
          },
          {
            key: 2,
            items: [
              { t: "first", c: "red" },
              { t: "second", c: "cyan" },
              { t: "third" }
            ]
          }
        ],
        linkDataArray: [
          { from: 1, to: 2 }
        ]
      }
    );
  }
  </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>

Thanks a lot