Shape change for node dynamically

GoJS
1

Hello,

We are creating Organization Chart using GoJS. We have created shape for root node. In tool bar we have collection of images (see attachment). We need to change node shape based on what user selects from tool bar. Can you get us some code help.

Thanks,

2

First you’ll need a reference to the root node, presumably by knowing its key

var root = myDiagram.findNodeForKey('rootNodeKey');
Then you can change properties of this node or its children.
Suppose there is a shape in the root node's definition, and suppose you gave that shape the name: "SHAPE". You could then do:
root.findObject('SHAPE').figure = "Ellipse"; // or some other new shape
or
root.findObject('SHAPE').geometry = someNewGeometry;
3

While I am able find root node object using

var root = myDiagram.findNodeForKey(‘RShape’);

following is returning NULL

root.findObject(‘SHAPE’)

I have defined my root node as

key: “RShape”,
category: “RootNodeShape”,
color: “#ffffff”,
isGroup: false,
Shape: “Triangle”,
group: “RContainer”,
DisplayText: “Unified \n Command”,
isRootItem : true

4

.findObject(someName) looks for objects with the specified name in the element tree of the Node or Panel.

In order for it to work, you need to give your shape the name:

  $(go.Shape,
    {<b> <font color="#ff0000">name: "SHAPE",</font></b>
      figure: "RoundedRectangle",
      fill: "lime" // etc
    })
5

Hi,

Thanks for all this. Its working now.

However we have got another issue now…

As you can see in the image the links are being connected to the container node for case 1 and 5.
However, we need to implement it such that it touches the figure’s edges/boundary.

I am also attaching the code …

myDiagram.nodeTemplateMap.add(“RootNodeShape”,
GO(go.Node, “Auto”, {
mouseDrop: fnRootDrop,

     //selectionAdornmentTemplate:
     // GO(go.Adornment, "Auto",
     //   GO(go.Shape, "Rectangle",
     //   { fill: null, stroke: "white", strokeWidth: 0 }),
     //   GO(go.Placeholder)
     // ),

     movable:false
 }, 
        GO(go.Shape, {
            name: "rootNodeShapePart",
            width: 200,
            height: 200,
            strokeWidth: 1,
            stroke: "#000",
            //fromArrow:"OpenTriangle"
        },
        new go.Binding("figure", "Shape"),
        new go.Binding("fill", "color")
                    
        ),
         GO(go.TextBlock,
                {
                    font: "12pt helvetica, arial, sans-serif",
                    stroke: "black"
                },
                 new go.Binding("text", "DisplayText").makeTwoWay()),
                  new go.Binding("location", "loc",
                     function (l) { return new go.Point(scaleWidth(l.x), l.y); }),
         GO("TreeExpanderButton", {
                         alignment: go.Spot.Bottom,
                         alignmentFocus: go.Spot.Bottom
                     }, {
                         visible: true
             })

   ));

--------------------Link template --------------------------------------

myDiagram.linkTemplateMap.add(“RootInternal”,
GO(go.Link,
{ routing: go.Link.AvoidsNodes },

                GO(go.Shape,
                  { stroke: OrgChartConfig.RootInternalLinkColor, strokeWidth: 1, strokeDashArray: [6, 3] }),
                GO(go.Shape,
                  { toArrow: "OpenTriangle", stroke: OrgChartConfig.RootInternalLinkColor, strokeWidth: 1 })
                  )
      );

----------------------Link data array----------------------------

var getLinkDataArray = function () {
return [
{
category: “WeakLink”,
from: “F”,
text: “descriptive text”,
to: “B”
},
{
category: “RootInternal”,
from: “RData”,
to: OrgChartConfig.RootNodeShapeKey
},
{

---------------------------Layout of the group that contains the shape node , and green box node--------------------

myDiagram.groupTemplateMap.add(“RootContainer”,
GO(go.Group, “Auto”, {
ungroupable: false,
layout: GO(go.TreeLayout,
{
treeStyle: go.TreeLayout.StyleLayered,
arrangement: go.TreeLayout.ArrangementHorizontal,
// properties for most of the tree:
angle: 180,
layerSpacing: 65,
sorting: go.TreeLayout.SortingReverse
}
)
},
GO(go.Shape, {
width: OrgChartConfig.RootContainerWidth,
height: 300,
strokeWidth: 1,
stroke: “#fff”,
figure: “Rectangle”,
fill:"#fff"
})
));

6

Make the shapes themselves ports by giving them a portId and the links will connect to the shapes instead of the square node itself

Examples of this here: http://gojs.net/latest/intro/ports.html