PortShifting | Node table

GoJS
1

Hi All,
first, thank you for this wonderful library
every time I learned something!

I’m working on my End of study project, and I’m using gojs as my library to draw some diagrams :)
I’m struggling with PortShifting, I called PortShifting.js on my page and I add this code to handle the mouse + shift key event :

myDiagram.toolManager.mouseMoveTools.insertAt(0, new PortShiftingTool());

I’m using dynamic ports (https://gojs.net/latest/samples/dynamicPorts.html)

and I want to add PortShifting for example this is the left port for nodes :

myDiagram.nodeTemplate =
        $(go.Node, "Table",
            {
                dragComputation: stayInViewport,
                locationObjectName: "BODY",
                locationSpot: go.Spot.Center,
                selectionObjectName: "BODY",
                linkConnected: function(node, link, port) {
                    link.data.lead = leadcount();
                  //  port.visible = false;
                },
                linkDisconnected: function(node, link, port) {
                    link.data.lead = leadcount();
                    //port.visible = true;
                }

               // contextMenu: nodeMenu
            },
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            {selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate},
            {resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate},
            {rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate},



            // the Panel holding the left port elements, which are themselves Panels,
            // created for each item in the itemArray, bound to data.leftArray
            $(go.Panel, "Vertical",
                new go.Binding("itemArray", "leftArray"),
                {
                    row: 1, column: 0,alignment: go.Spot.Center,
                    itemTemplate:
                        $(go.Panel,
                            {
                                _side: "left",  // internal property to make it easier to tell which side it's on
                                fromSpot: go.Spot.Left, toSpot: go.Spot.Left,
                                fromLinkable: true, toLinkable: true, cursor: "pointer",
                                fromLinkableDuplicates: false,
                                toLinkableDuplicates:false,
                                toMaxLinks: 1,
                                fromMaxLinks:1
                            },
                            new go.Binding("margin", "portmargin"),
                            new go.Binding("portId", "portId"),
                            $(go.Shape, "Rectangle",
                                {
                                    stroke: null, strokeWidth: 0,
                                    desiredSize: portSize,
                                    margin: new go.Margin(0, 0,0,0)
                                },
                                new go.Binding("fill", "portColor"),
                                new go.Binding("desiredSize", "desiredSize")
                            ),
                            $(go.TextBlock, "",  // the label text
                                {
                                  /*  textAlign: "center",
                                    font: "9pt helvetica, arial, sans-serif",
                                    margin: 0,
                                    editable: false  // enable in-place editing*/

                                    margin: go.Margin.parse("5 0 0 0"),
                                    font: "bold 15px Segoe UI,sans-serif",
                                    editable: false
                                },
                                // editing the text automatically updates the model data
                                new go.Binding("text", "text"))
                        )  // end itemTemplate
                }
            ),  // end Vertical Panel

thanks in advance

2

The reason the ports aren’t moved by the PortShiftingTool is that the ports in the node template of the Dynamic Ports sample are in a “Vertical” or “Horizontal” Panel, not in a “Spot” Panel as documented at: PortShiftingTool | GoJS API

You’d have to change the panel holding the port elements to be of type “Spot” from its current type, and that will require your making sure the individual port elements each have the right alignment Spot. Or you’ll have to change the PortShiftingTool to work with “Vertical” or “Horizontal” Panels. It depends on what you want to accomplish. If you just want to re-order the ports in the list, then I suppose you could adapt the PortShiftingTool.updateAlignment method to change the position of the port in its panel’s list of elements and update the Array of port descriptors accordingly. That tool’s current focus on saving the original alignment and updating it as the port is moved isn’t what you would want – I think you just want to remember the original index in the List/Array.

3

my main objective is to drag/drop ports on the side of the node, I checked PortShiftingTool and now I’m trying to change the functions to work with “Vertical” or “Horizontal” Panels

thank you Walter for your reply

4

I found the solution:

I changed the Panel from vertical to Spot then I added a new panel with spot / Rectangle to manage port space :

 $(go.Panel, "Spot",
                $(go.Panel, "Spot",
                    $(go.Shape, "Rectangle", {stroke: null, width:0,background: "transparent", fill: null})
                 ),

this post helped me : POST

thanks!