Realign, arrange the position of the nodes

Dear Friends,

iam creating a chart with nodes and subnodes, when iam adding new node/subnode I have to rearrage the position and when I delete a node I have to reset the position and rearrage the position. when deleting iam getting some different lines (link line) extra… pls guide me is there any mistake iam doing in code:

// ------------------------------------------------ Object 4 ------------------------------------

diagram.nodeTemplateMap.add(“RightRectangle”,
$$(go.Node, “Spot”, nodeStyle(),
{
selectionAdornmentTemplate: // adornment when a group is selected
$$(go.Adornment, “Auto”,
$$(go.Placeholder),
$$(“Button”,
{
alignment: go.Spot.LeftCenter,
click: addRightSubNodeAndLink // this function is defined below
},
$$(go.Shape, “PlusLine”, { name: “left”, width: 6, height: 6 })
)
)
},
new go.Binding(“movable”, “movable”),
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding(“uid”, “uid”),
$$(go.Panel, “Auto”,
$$(go.Shape, “Rectangle”,
{
minSize: new go.Size(200, 90),
fill: new $$(go.Brush, “Linear”, { 0.0: “White”, 1.0: “red” }),
stroke: null
},
new go.Binding(“fill”)),
$$(go.TextBlock, “Rectangle”,
{ font: “bold 11pt Helvetica, Arial, sans-serif”, stroke: “#000000”, editable: false, width: 150, height: 60, background: “white”, textAlign: “center”, verticalAlignment: go.Spot.Center },
new go.Binding(“text”))
),
// three named ports, one on each side except the top, all output only:
makePort(“L”, go.Spot.Left, false, false),
{
click: function (e, obj) {
selectedNode(e, obj)
}
},
{ doubleClick: function (e, obj) { } }
));
//--------------------------------------------------------------------------------

// ------------------------------------------------ Object 6 ------------------------------------

diagram.nodeTemplateMap.add(“RightSubRectangle”,
$$(go.Node, “Spot”, nodeStyle(),

},
new go.Binding("movable", "movable"),
new go.Binding("subObject", "subObj"),
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("uid", "uid"),
$$(go.Panel, "Vertical",
  makePort("RSubR", go.Spot.Right, false, false),
  makePort("RSubL", go.Spot.Left, false, false)),
$$(go.Panel, "Auto",
  $$(go.Panel, "Auto",
    $$(go.Shape, "Rectangle", { fill: "white" }),
    $$(go.Panel, "Table",
      { defaultRowSeparatorStroke: "gray" },
      $$(go.RowColumnDefinition, { column: 0, width: 200 }),
      $$(go.Panel, "Vertical", { row: 0, column: 0 },
        $$(go.TextBlock, { width: 100, overflow: go.TextBlock.OverflowEllipsis, maxLines: 4, wrap: go.TextBlock.WrapDesiredSize, margin: 10, isMultiline: true, textAlign: "center", editable: false, },
          new go.Binding("text", "text"))
      ),
      $$(go.Panel, "Auto", { row: 1, column: 0, alignment: go.Spot.Center },
        $$(go.TextBlock, { margin: 5 }, new go.Binding("text", "statusTxt"))
      ),
      $$(go.Panel, "Auto", { row: 2, column: 0, alignment: go.Spot.Center },
        $$(go.TextBlock, { margin: 5 }, new go.Binding("text", "ownerTxt"))
      )
    ))),
// three named ports, one on each side except the top, all output only:     
{
  click: function (e, obj) {
    selectedNode(e, obj)
  }
},
{ doubleClick: function (e, obj) {  } }

));
//----------------------------------------------------------------------------------------
function addRightSubNodeAndLink(e, Obj) {
var rightMainNodeSubInc = 0;
var clickedObjKey = Obj.part.data.key;
var getObj = diagram.findNodeForKey(clickedObjKey);
if (getObj.data.subObj != undefined) {
rightMainNodeSubInc = getObj.data.subObj + 1
}
var x = Obj.part.adornedPart.location.x;
var y = Obj.part.adornedPart.location.y;

var w = Obj.actualBounds.width;
var h = Obj.actualBounds.height;

var tempLinkDataArray = diagram.model.linkDataArray;
for (var a = 0; a < tempLinkDataArray.length; a++) {
if (tempLinkDataArray[a].from == clickedObjKey || tempLinkDataArray[a].to == clickedObjKey) {
diagram.model.removeLinkData(tempLinkDataArray[a]);
}
}

diagram.model.addNodeData({ key: clickedObjKey + “" + rightMainNodeSubInc, category: “RightSubRectangle”, text: “RC” + rightMainNodeSubInc, ownerTxt: “Owner :”, statusTxt: “Status : Draft”, loc: go.Point.stringify({ x: x, y: y }), movable: false, uid: “0” })
diagram.model.addLinkData({ from: clickedObjKey + "
” + rightMainNodeSubInc, to: clickedObjKey, fromSpot: go.Spot.Right, toSpot: go.Spot.Left, toArrow: “” })
if (rightMainNodeSubInc == 1) {
diagram.model.addLinkData({ from: clickedObjKey + “" + rightMainNodeSubInc, to: “e1”, fromSpot: go.Spot.Left, toSpot: go.Spot.Right, toArrow: “” })
}
else {
diagram.model.addLinkData({ from: clickedObjKey + "
” + rightMainNodeSubInc, to: clickedObjKey + “_” + (rightMainNodeSubInc - 1), portId: “RSubL”, fromSpot: go.Spot.Left, toSpot: go.Spot.Right, toArrow: “” })
}
diagram.model.setDataProperty(getObj, “location”, new go.Point(x + 300, y));

var data = diagram.model.findNodeDataForKey(clickedObjKey);
diagram.model.setDataProperty(data, “subObj”, rightMainNodeSubInc);
reArrangeNode(“right”, rightMainNodeInc, centerObjX, centerObjY)
}
//----------------------------------------------------------------------------------------
function resetNode(aNodeKey) {
//console.log(“aNodeKey “+aNodeKey);
var name = aNodeKey.split(”")
if (name.length == 2) {
var node = diagram.findNodeForKey(aNodeKey);
for (var a = 1; a <= node.data.subObj; a++) {
var deleteSubNode = diagram.findNodeForKey(aNodeKey + "
” + a);
if (deleteSubNode != null) {
diagram.remove(deleteSubNode);
}
}
diagram.remove(selectedNodeValue);
}
else if (name.length == 3) {
var parentNode = diagram.findNodeForKey(name[0] + “" + name[1]);
var getNodeArray = [centerObj.part.data.key]
diagram.remove(selectedNodeValue);
var checkSubObjCount = 0;
for (var a = 1; a <= parentNode.data.subObj; a++) {
var subNode = diagram.findNodeForKey(name[0] + "
” + name[1] + “" + a);
if (subNode != null) {
getNodeArray.push(subNode.data.key)
}
else {
checkSubObjCount++;
}
}
getNodeArray.push(parentNode.data.key)
//console.log("cc “+checkSubObjCount +” – "+parentNode.data.subObj)
if (checkSubObjCount == parentNode.data.subObj) {
var tempParentObj = diagram.model.findNodeDataForKey(name[0] + "
” + name[1]);
diagram.model.setDataProperty(tempParentObj, “subObj”, 0);
}
//-------- Delete link, if the link existing already----------------------
for (var b = 0, k = 1; b < getNodeArray.length - 1; b++ , k++) {
var tempLinkDataArray = diagram.model.linkDataArray;
for (var a = 0; a < tempLinkDataArray.length; a++) {
if (tempLinkDataArray[a].from == getNodeArray[b] && tempLinkDataArray[a].to == getNodeArray[k]) {
diagram.model.removeLinkData(tempLinkDataArray[a]);
break;
}
}

  if (name[0] == "L") {
    diagram.model.addLinkData({ from: getNodeArray[b], to: getNodeArray[k], fromSpot: go.Spot.Left, toSpot: go.Spot.Right, toArrow: "" })
  } else {
    diagram.model.addLinkData({ from: getNodeArray[b], to: getNodeArray[k], fromSpot: go.Spot.Right, toSpot: go.Spot.Left, toArrow: "" })
  }
}
//--------------------------------------------------------------------------- 

}
var setSide = ((name[0] == “L”) ? “left” : “right”);
var count = ((setSide == “left”) ? leftMainNodeInc : rightMainNodeInc)
reArrangeNode(setSide, count, centerObjX, centerObjY)
}

//--------------------------------------
function reArrangeNode(aValues, aInc, aCenterX, aCenterY) {
console.log(“reArrangeNode → start Function”)
var name = ((aValues == “left”) ? “L_” : “R_”);
var centerY = aCenterY;
var twoObjectGap = 10;
var xPos = ((aValues == “left”) ? (aCenterX - 300) : (aCenterX + 300));
var yPos = 0;
var getObjectHeight = 0;

var objHeight = 0;
if (aInc > 1) {
for (var a = 1; a <= aInc; a++) {
var data = diagram.findNodeForKey(name + a);
if (data != null) {
objHeight = data.actualBounds.height
//alert(a+“"+objHeight);
if (data.data.subObj == 0 || data.data.subObj == undefined) {
getObjectHeight += objHeight + twoObjectGap
}
else {
for (var a1 = 1; a1 <= data.data.subObj; a1++) {
var tempdata1 = diagram.findNodeForKey(name + a + "" + a1);
if (tempdata1 != null) {
getObjectHeight += tempdata1.actualBounds.height + twoObjectGap;
break;
}
}
}
}
}
yPos = ((diagram.grid.height + 81) - getObjectHeight) / 2;
//yPos=((diagram.grid.height)-getObjectHeight)/2;
console.log(“Center :” + diagram.grid.height + "
” + getObjectHeight);
for (var b = 1; b <= aInc; b++) {
xPos = ((aValues == “left”) ? (aCenterX - 300) : (aCenterX + 300));
var getObj = diagram.findNodeForKey(name + b);
if (getObj != null) {
objHeight = getObj.actualBounds.height
if (getObj.data.subObj > 0 && getObj.data.subObj != undefined) {
var subObjLen = getObj.data.subObj
for (var c = 1; c <= subObjLen; c++) {
var getSubObj = diagram.findNodeForKey(name + b + “_” + c);

        var extraHeightSubNode = 0;

        if (getSubObj != null) {
          //extraHeightSubNode = (getSubObj.actualBounds.height/14)

          diagram.model.setDataProperty(getSubObj, "location", new go.Point(xPos, yPos + extraHeightSubNode))
          xPos = ((aValues == "left") ? (xPos - 300) : (xPos + 300));
          objHeight = (getSubObj.actualBounds.height);
        }
        diagram.model.setDataProperty(getObj, "location", new go.Point(xPos, yPos + extraHeightSubNode))
      }

    }
    else {
      diagram.model.setDataProperty(getObj, "location", new go.Point(xPos, yPos))
    }
    yPos += objHeight + twoObjectGap;
  }
}

}
console.log(“reArrangeNode → End Function”)
}

Normally that is the responsibility of the Diagram.layout.

You may want to define your own custom Layout. Please read GoJS Layouts -- Northwoods Software and Extending GoJS -- Northwoods Software.

I hope you understand that there isn’t anything we can do if you just dump a bunch of code here. The more specific and answerable the question is, the more likely it is that we can give you an answer.

oh sorry… iam new here… thats y. pls send me some sample how to do custom layout… for this.

Only you know the requirements for your layout – so you should be the one writing the layout.

I hope you have read GoJS Layouts -- Northwoods Software and Extending GoJS -- Northwoods Software, and have examined carefully the structure of many of the example layouts that you can find throughout our samples and extensions.

Dear Mr.Walter,

Greetings! whatever iam working in this gojs it opening in chrome… but not openign in ie11. Pls help me what should i do? pls refer above code… am i missing anything? specialy this file. other sample files are opeing…

Thanks and Regards,
Syed Abdul Rahim

Hey – you already asked that question: How to increase thickness of only one link in full diagram - #4 by walter

thks mr.walter,
i want to show u the what iam using… thats y placed it here… can u figure out anything from above code… what might be the reason?

You need to debug your code in IE11 and in every other browser that your users might use. We cannot do that for you.

i put f12 and debut… no error shows…:)

Reload with the debugger open.

As the GoJS Sample Diagrams for JavaScript and HTML, by Northwoods Software show, GoJS does work on IE11. It’s your responsibility to debug your app on each platform/browser/configuration.

Sure, thks mr.walter.