Node Template Editor

Hi,
I’m trying to implement a Node Template editor for network elements.
In general, i would like to let the user the ability ability to drag some picture of network elements and to to locate its ports dynamically.
In the following picture :


I have implemented a simple Group Template with some Cisco router picture.
On click, somewhere on the picture, the applications adds a re-sizable rectangular red node.
The red nodes represents the device ports.
At some point, the diagram is saved to disk as JSON string.
When the user wants to add a node of this type, the JSON string is loaded from disk as a group node. The application rolls over the group member parts (the red nodes) and adds port “panel” to the template, for each node, as follows:

var nodeTemplate = diagram.nodeTemplateMap.get(“cisco2950”);
var group = diagram.findNodeForKey(1);
var i = 0;

    for (var it = group.memberParts.iterator; it.next();) {
        var node = it.value; 
        var s = node.findObject("SHAPE");
        var x = group.position.x + node.position.x;
        var y = group.position.y + node.position.y;
        var portId = "Eth";
        nodeTemplate.add(
                $(go.Panel,
                        {position: new go.Point(x, y)},
                        $(go.Shape,
                                {width: s.width, height: s.height, 
                                 portId: portId + i, fill: "green" })
                ));
        i++;
    };

The reason that i selected the group–>nodes relationship to be the source of my template is because the red nodes can be moved and located on the group surface, and because they are resize-able.
I couldn’t implement this solution with node–>ports relationship because the ports (itemarray) in the node are not movable nor resize-able.
My question is if there is a smarter way to implement a node template editor using other object type rather than group->nodes relationship.
Recall, that the ports should be able to be moved and resized.
Thanks
Tany

Yes, you can implement it either way. Consider the Draggable Ports sample, which does what you have done: https://gojs.net/latest/samples/draggablePorts.html

Note how the model is handled, and how selection is handled.

I see, the ports are movable but are they also re-sizable ?

Not in that sample, but you could modify it by setting Node.resizable and Node.resizeObjectName and adding a TwoWay Binding of “desiredSize” on the Shape.

I’m mot sure i’m clear.
If i use the node–>ports model,instead of group–>nodes model, namely, model the ports as “red” rectangles shapes, will i be able to resize the port objects ?

I was referring to that sample using the group-and-node-as-port design.

Yes, it should be possible to implement those behaviors, including resizing, in the node-and-simple-object-as-port design. Have you seen this sample? https://gojs.net/latest/extensions/PortShifting.html