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 Minimal GoJS Sample
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>