This is not working , I am provide you the code ,
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/[email protected]/release/go.js"></script>
<div style="height: 100px; width: 100%; display: block;">
<style>
#myPaletteDiv2 {
visibility: hidden;
z-index: 10;
height: 355px;
width: 242px;
position: absolute;
background-color: #fff;
box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}
</style>
<script id="code">
function init() {
const $ = go.GraphObject.make;
let widthVar;
let heightVar;
var toNodeLocation;
var nodeValue;
var modified;
var hiddenMenu;
var plusPointLocation;
var plusPointLocation;
var toNodeLocation;
var locationGet;
var documentLocationGet;
var currentNodeLinkData;
var addCurrentNode;
var lane;
var myDiagram =
new go.Diagram("myDiagramDiv",
{
contentAlignment: go.Spot.TopLeft,
initialContentAlignment: go.Spot.TopLeft,
layout: $(go.LayeredDigraphLayout,
{
isInitial: false,
isOngoing: false,
isRealtime: false,
direction: 0,
columnSpacing: 10,
}),
mouseDragOver: e => {
if (!e.diagram.selection.all(n => n instanceof go.Group)) {
e.diagram.currentCursor = 'not-allowed';
}
},
"commandHandler.copiesGroupKey": true,
"animationManager.isEnabled": true,
"draggingTool.dragsLink": false,
"draggingTool.isGridSnapEnabled": true,
"linkingTool.isUnconnectedLinkValid": false,
"linkingTool.portGravity": 1,
"relinkingTool.isUnconnectedLinkValid": false,
"relinkingTool.portGravity": 1,
"relinkingTool.fromHandleArchetype":
$(go.Shape, "Diamond", { segmentIndex: 0, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "tomato", stroke: "darkred" }),
"relinkingTool.toHandleArchetype":
$(go.Shape, "Diamond", { segmentIndex: -1, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "darkred", stroke: "tomato" }),
"linkReshapingTool.handleArchetype":
$(go.Shape, "Diamond", { desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
"rotatingTool.handleAngle": 270,
"rotatingTool.handleDistance": 30,
"rotatingTool.snapAngleMultiple": 15,
"rotatingTool.snapAngleEpsilon": 15,
"undoManager.isEnabled": true,
allowDrop: true,
"ExternalObjectsDropped": function (e) {
e.subject.copy().each(function (n) {
console.log(n.data);
let matching = e.diagram.findNodesByExample({ name: n.data.name });
if (matching.count > 1) {
e.diagram.remove(n);
error();
}
})
},
"BackgroundSingleClicked": function (e) {
let contextMenu1 = document.getElementById("myPaletteDiv2");
contextMenu1.style.visibility = 'hidden';
},
"linkingTool.linkValidation": (fromNode, fromPort, toNode, toPort, link) => {
if (toNode === fromNode) {
return false; // Prevent connecting the node to itself
}
const existingLinks = toNode.findLinksConnected().filter(l => l.fromNode === fromNode).count;
if (existingLinks > 0) {
return false; // Prevent connecting the same source node again
}
if (toNode.data.name === "Start" || fromNode.data.name === "End") {
return false;
}
return true;
},
"DocumentBoundsChanged": e => {
widthVar = e.diagram.viewportBounds.width;
heightVar = e.diagram.viewportBounds.height;
console.log(e);
console.log(e.diagram.documentBounds.size.width);
},
click: () => {
hiddenMenu = true;
},
});
myDiagram.addModelChangedListener(evt => {
console.log(evt);
if (evt.modelChange == "nodeDataArray") {
if (evt.newValue) {
console.log(evt.newValue.name.length);
modified = true;
} else if (evt.oldValue) {
console.log(evt.oldValue.name.length);
modified = true;
}
}
});
function onNodeDataAdded(e) {
console.log('fafafa', e);
if (e.change === go.ChangedEvent.Insert && e.propertyName === "nodeDataArray" && !e.model.skipsUndoManager && e.newValue && e.newValue.name1 && e.newValue.name1.length) { // skip any temporary additions, such as during drag-and-drop
console.log("hello", e);
let data = e.newValue;
let cname = data.name;
if (!cname) cname = "none";
let counters = e.model.modelData;
let count = counters[cname] || 0;
count++;
console.log(cname);
console.log(counters);
console.log(data);
console.log(count);
e.model.set(counters, cname, count);
e.model.set(data, "name", cname + " " + count);
}
}
function error() {
notification.notifier(NotificationType.error, "Same name activity already exist.");
}
function getNextKey() {
let maxKey = -1;
myDiagram.model.nodeDataArray.forEach(node => {
if (node.key > maxKey) maxKey = node.key;
});
return maxKey + 1;
}
function addGroup(event, obj) {
console.log(obj.part.part.location);
// 13098
myDiagram.startTransaction();
lane: any = obj.part.part;
let selectedItem = myDiagram.selection.first().findObject('SHAPE')
let size = new go.Size(selectedItem.width, 300);//MINBREADTH
console.log(event);
console.log(obj);
const groupData = {
key: getNextKey(),
category: "Lane",
group: "Pool1",
isGroup: true,
text: "New Group",
name: "New Group",
color: "lightblue",
size: "1460 300",
expanded: true,
loc: go.Point.stringify(new go.Point(event.documentPoint.x, event.documentPoint.y + 1)),
};
myDiagram.model.addNodeData(groupData);
myDiagram.commitTransaction();
}
;
myDiagram.nodeTemplate =
$(go.Node, "Table",
$(go.Panel, "Auto",
{
click: (e, node) => {
// this.showSubMenu(e, node)
nodeValue = node;
console.log('e, node', e, node)
}
},
$(go.Shape, "RoundedRectangle",
{
strokeWidth: .5,
fill: "#E07800",
// stroke: 'white',
stroke: '#116173',
portId: "",
desiredSize: new go.Size(220, 40),
fromLinkable: true,
toLinkable: true,
fromLinkableDuplicates: true,
toLinkableDuplicates: true,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
click: (e, node) => {
// this.showSubMenu(e, node)
nodeValue = node;
console.log('e, node', e, node)
}
},
new go.Binding("desiredSize", "name", function (name) {
if (name == 'Start' || name == 'start') {
return new go.Size(80, 40); // Change width for START node
} else if (name == 'End' || name == 'end') {
return new go.Size(80, 40); // Change width for END node
} else {
return new go.Size(220, 40); // Default width for other nodes
}
}),
),
$(go.Picture,
{
alignment: go.Spot.Left,
source: "",
cursor: "move",
desiredSize: new go.Size(25, 25), // Adjust size as needed
margin: new go.Margin(0, -5, 0, 15),
},
),
$(go.TextBlock, {
height: 32,
// width: 32,
width: 202,
textAlign: 'center',
alignment: go.Spot.Left,
verticalAlignment: go.Spot.Center,
font: 'bold 12px calibri',
name: 'TEXTBLOCK_NAME',
cursor: "move",
stroke: 'black',
margin: new go.Margin(0, -8, 0, 5),
isMultiline: false,
click: function (e, obj) {
if (obj.part.data.name == 'Start') {
return;
} else {
// handleRename(obj, obj.part.data.name); // Use obj to access the old name
}
},
editable: false,
},
),
),
$(go.TextBlock, {
margin: 10,
wrap: go.TextBlock.WrapFit,
textAlign: "center",
}, {
maxSize: new go.Size(170, 40),
alignment: go.Spot.Left,
font: 'bold 11px Inter, sans-serif',
wrap: go.TextBlock.WrapFit,
stroke: 'black',
textAlign: 'left',
name: 'TEXTBLOCK_NAME',
cursor: "move",
verticalAlignment: go.Spot.Center,
}, new go.Binding("text", "name").makeTwoWay(),
new go.Binding("editable", 'name', (name) => {
console.log('text', name);
if (name == 'Start' || name == 'End') {
return false
} else {
return true
}
}).makeTwoWay(),
new go.Binding("margin", "name", t => {
if (t === 'Start') {
return new go.Margin(20, 20, 20, 20); // Set custom margins for START node
} else if (t === 'End') {
return new go.Margin(20, 20, 20, 30); // Set custom margins for END node
} else {
return new go.Margin(45, 45, 45, 45) // Default margins for other nodes
}
}
),
new go.Binding("font", "name", t => t.length > 35 ? 'bold 7px Inter, sans-serif' : 'bold 11px Inter, sans-serif'),
),
),
{
selectionAdornmentTemplate: $(go.Adornment, "Auto",
$(go.Shape, "RoundedRectangle",
{ fill: null, stroke: "dodgerblue", strokeWidth: 3 }),
$(go.Placeholder)
) // end Adornment
},
makePort("T", go.Spot.Top, true, true),
makePort("B", go.Spot.Bottom, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("L", go.Spot.Left, true, true),
{
mouseEnter: (e, node) => showSmallPorts(node, true),
mouseLeave: (e, node) => showSmallPorts(node, false)
}
myDiagram.nodeTemplate.contextMenu =
$(go.Adornment, "Vertical",
$("ContextMenuButton",
$(go.TextBlock, "Delete"),
{
background: "lightblue",
margin: new go.Margin(5, 10),
}
),
$("ContextMenuButton",
$(go.TextBlock, "Change icon"),
{
background: "lightblue",
margin: new go.Margin(5, 10),
}
),
);
myDiagram.nodeTemplate.click = (e, obj) => {
const linkData = obj;
};
function showSmallPorts(node, show) {
node.ports.each(port => {
if (port.portId !== "") {
port.fill = show ? "rgba(0,0,0,.3)" : null;
}
});
}
myDiagram.linkTemplate =
$(go.Link,
{
curve: go.Link.Bezier,
fromEndSegmentLength: 50,
toEndSegmentLength: 50,
fromShortLength: 4,
toShortLength: 4,
selectable: true,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
fromLinkableSelfNode: true,
fromLinkableDuplicates: true,
toLinkableSelfNode: true,
relinkableFrom: true, relinkableTo: true, reshapable: true, fromLinkable: true,
},
{ selectable: true },
$(go.Shape, { isPanelMain: true, strokeWidth: 6, stroke: "transparent" },
new go.Binding("stroke", "isHighlighted", h => h ? "red" : "transparent").ofObject()),
$(go.Shape, { isPanelMain: true, stroke: "#002f49", strokeWidth: 2, toLinkable: true, toLinkableSelfNode: true }), // the main path
$(go.Shape, { name: "AH", toArrow: "RoundedTriangle", scale: 1.2, fill: "#002f49", stroke: "#002f49", toLinkable: true, toLinkableSelfNode: true }), // the arrowhead
$(go.Panel, "Auto",
$(go.Shape,
{
fill: $(go.Brush, "Radial", { 0: "rgb(240, 240, 240)", 0.3: "rgb(240, 240, 240)", 1: "rgba(240, 240, 240, 0)" }),
stroke: null
}),
$(
go.Shape,
"PlusLine",
{
name: "PlusSign",
desiredSize: new go.Size(15, 15),
fill: "white",
stroke: "red",
strokeWidth: 4,
visible: false,
cursor: 'pointer'
}
),
),
// uncomment
{
selectionAdornmentTemplate:
$(go.Adornment,
$(go.Shape, { isPanelMain: true, stroke: "dodgerblue", strokeWidth: 2, }),
$(go.Shape, { toArrow: "RoundedTriangle", fill: "dodgerblue", scale: 0.9, stroke: "dodgerblue" })
) // end Adornment
},
{
mouseDragEnter: (e, link) => link.isHighlighted = true,
mouseDragLeave: (e, link) => link.isHighlighted = false,
mouseEnter: function (e, obj) {
obj.findObject("PlusSign").visible = true;
},
mouseLeave: function (e, obj) {
obj.findObject("PlusSign").visible = false;
},
click: (e, obj) => {
myDiagram.startTransaction();
plusPointLocation = JSON.stringify(e.diagram.lastInput.viewPoint);
toNodeLocation = obj.fromNode.location;
locationGet = JSON.stringify(obj.part.location);
var docloc = myDiagram.transformDocToView(obj.part.location);
documentLocationGet = JSON.stringify(docloc);
if (e.targetObject.name !== "PlusSign") {
return;
}
console.log(obj);
console.log(obj.part.data);
let currentNodeLinkData = obj.part.data;
if (currentNodeLinkData) {
currentNodeLinkData = currentNodeLinkData
}
let plusSign = obj.findObject("PlusSign");
let panelPoint = plusSign.getDocumentPoint(go.Spot.Top);
console.log("Doc Point x: " + panelPoint.x + " view point y: " + panelPoint.y)
let viewPoint = myDiagram.transformDocToView(panelPoint);
let contextMenu1 = document.getElementById("myPaletteDiv2");
contextMenu1.style.display = "block";
const boxOpenLocation = (e.event.clientY / 2)
const boxFreeLocation = boxOpenLocation - 195;
console.log(e.event.clientX, e.event.clientY, 'get event')
if (195 > boxOpenLocation) {
contextMenu1.style.top = e.event.clientY + 8 + 'px'
} else {
contextMenu1.style.top = (e.event.clientY) - 202 + 'px'
}
console.log(boxOpenLocation);
console.log(boxFreeLocation, viewPoint.y);
contextMenu1.style.left = e.event.clientX - 50 + 'px';
contextMenu1.style.visibility = 'visible';
console.log("open")
console.log("View Point x: " + viewPoint.x + " view point y: " + viewPoint.y)
myDiagram.requestUpdate();
myDiagram.commitTransaction();
},
mouseDrop: (e, link) => {
const oldto = link.toNode;
const newnode = e.diagram.selection.first();
if (!mayConnect(newnode, oldto)) return;
if (!mayConnect(link.fromNode, newnode)) return;
link.toNode = newnode;
const newdata = { ...newnode.data, group: link.fromNode.data.group };
e.diagram.model.addNodeData(newdata)
e.diagram.model.setToKeyForLinkData(newnode.data, newdata.key);
e.diagram.model.addLinkData({ from: newnode.key, to: oldto.key });
}
},
)
function mayConnect(node1, node2) {
return node1 !== node2;
}
function groupStyle() { // common settings for both Lane and Pool Groups
return [
{
layerName: "Background", // all pools and lanes are always behind all nodes and links
background: "transparent", // can grab anywhere in bounds
movable: false, // allows users to re-order by dragging
copyable: false, // can't copy lanes or pools
avoidable: false, // don't impede AvoidsNodes routed Links
},
];
}
function updateCrossLaneLinks(group) {
group.findExternalLinksConnected().each(l => {
l.visible = (l.fromNode.isVisible() && l.toNode.isVisible());
});
}
myDiagram.addDiagramListener("ObjectSingleClicked", function () {
let contextMenu = document.getElementById("myPaletteDiv2");
contextMenu.style.display = "none";
});
myDiagram.groupTemplateMap.add("Lane",
$(go.Group, "Horizontal", groupStyle(),
{
click: () => { hiddenMenu = true },
selectionObjectName: "SHAPE",
resizable: true, resizeObjectName: "SHAPE",
computesBoundsAfterDrag: true,
computesBoundsIncludingLinks: false,
computesBoundsIncludingLocation: true,
handlesDragDropForMembers: true,
mouseDrop: (e, grp) => {
var ok = grp.addMembers(grp.diagram.selection, true);
if (!ok) grp.diagram.currentTool.doCancel();
},
subGraphExpandedChanged: (grp) => {
const shp = grp.resizeObject;
if (grp.diagram.undoManager.isUndoingRedoing) return;
if (grp.isSubGraphExpanded) {
shp.height = grp.data.savedBreadth;
} else {
if (!isNaN(shp.height)) grp.diagram.model.set(grp.data, "savedBreadth", shp.height);
shp.height = NaN;
}
updateCrossLaneLinks(grp);
},
},
new go.Binding("isSubGraphExpanded", "expanded").makeTwoWay(),
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, "Horizontal",
{
name: "HEADER",
angle: 270,
alignment: go.Spot.Center
},
$(go.Panel, "Horizontal",
new go.Binding("visible", "isSubGraphExpanded").ofObject(),
$(go.Shape, "Diamond",
{ width: 8, height: 8, fill: "white", stroke: "" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ font: "bold 13pt sans-serif", editable: true, margin: new go.Margin(2, 0, 0, 0) },
new go.Binding("text", "name").makeTwoWay())
),
$("SubGraphExpanderButton", { margin: 5 })
),
$(go.Panel, "Auto", { alignment: go.Spot.Left },
$(go.Shape, "Rectangle",
{ name: "SHAPE", fill: "white", minSize: new go.Size(1460, NaN), stroke: "black", strokeWidth: 2, alignment: go.Spot.Left, desiredSize: new go.Size(NaN, 300) },
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)),
$(go.Placeholder,
{ padding: 12, alignment: go.Spot.TopLeft }),
$(go.TextBlock,
{
name: "LABEL",
font: "bold 13pt sans-serif", editable: true,
angle: 0, alignment: go.Spot.TopLeft, margin: new go.Margin(2, 0, 0, 4)
},
new go.Binding("visible", "isSubGraphExpanded", e => !e).ofObject(),
new go.Binding("text", "name").makeTwoWay())
)
));
myDiagram.groupTemplateMap.get("Lane").resizeAdornmentTemplate =
$(go.Adornment, "Spot",
{
minSize: new go.Size(1460, 300),
click: () => { hiddenMenu = true },
},
$(go.Placeholder),
$(go.Shape, // for changing the length of a lane
{
alignment: go.Spot.Right,
desiredSize: new go.Size(7, 50),
fill: "lightblue", stroke: "dodgerblue",
cursor: "col-resize"
},
new go.Binding("visible", "", ad => {
if (ad.adornedPart === null) return false;
return ad.adornedPart.isSubGraphExpanded;
}).ofObject()
),
$(go.Shape, // for changing the breadth of a lane
{
alignment: go.Spot.Bottom,
desiredSize: new go.Size(50, 7),
fill: "lightblue", stroke: "dodgerblue",
cursor: "row-resize"
},
new go.Binding("visible", "", ad => {
if (ad.adornedPart === null) return false;
return ad.adornedPart.isSubGraphExpanded;
}).ofObject()
),
$(go.Panel, "Vertical",
{ cursor: 'pointer', alignment: go.Spot.BottomLeft, alignmentFocus: new go.Spot(0, 1, -69, -8) },
$("Button",
{ click: (event, obj) => addGroup(event, obj), cursor: 'pointer' },
$(go.Shape, "PlusLine", { cursor: 'pointer', width: 12, height: 12, fill: "lightblue", stroke: "dodgerblue", strokeWidth: 4 })
)
)
);
myDiagram.groupTemplateMap.add("Pool",
$(go.Group, "Auto", groupStyle(),
{
computesBoundsIncludingLinks: false,
layout: $(go.LayeredDigraphLayout,
{
alignOption: go.LayeredDigraphLayout.AlignAll,
columnSpacing: 40,
layerSpacing: 80,
direction: 90,
setsPortSpots: false,
isRealtime: false
})
},
$(go.Shape,
{ fill: "white" },
new go.Binding("fill", "color")),
$(go.Panel, "Table",
{ defaultColumnSeparatorStroke: "black" },
$(go.Panel, "Horizontal",
{ column: 0, angle: 270 },
$(go.TextBlock,
{ font: "bold 16pt sans-serif", editable: true, margin: new go.Margin(2, 0, 0, 0) },
new go.Binding("text").makeTwoWay())
),
$(go.Placeholder,
{ column: 1 })
)
));
const dataSetPool = {
"class": "GraphLinksModel",
"nodeDataArray": [
{
"key": "Pool1",
// "text": "Pool",
"name": "Pool",
"isGroup": true,
"category": "Pool",
},
{
"key": "Lane1",
"text": "Lane1",
"name": "Lane1",
"isGroup": true,
"category": "Lane",
"group": "Pool1",
"size": "485.52000000000004 300",
"loc": "-492.25000000000006 17.75",
"expanded": true,
"savedBreadth": 300,
},
{
"key": "Start",
"name": "Start",
"group": "Lane1",
"loc": "-439.99999999999966 50",
},
{
"key": "End",
"name": "End",
"group": "Lane1",
"loc": "-79.99999999999977 50",
},
],
"linkDataArray": [
{
"from": "Start",
"to": 'End',
},
]
}
myDiagram.model = go.Model.fromJson(dataSetPool);
const myPalette2 = new go.Palette("myPaletteDiv2", { // customize the GridLayout to align the centers of the locationObjects
maxSelectionCount: 1,
});
myPalette2.nodeTemplate =
$(go.Node, "Spot",
{
locationSpot: go.Spot.Center,
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{ selectable: true },
new go.Binding("angle").makeTwoWay(),
$(go.Panel, "Horizontal",
$(go.Panel, "Spot",
$(go.TextBlock,
{
margin: 5, font: "14px FontAwesome", alignment: go.Spot.Center, stroke: "white",
},
),
),
$(go.Picture,
{
alignment: go.Spot.Left,
source: "",
desiredSize: new go.Size(30, 30), // Adjust size as needed
// margin: new go.Margin(16, 2, 80, 15) // Adjust margins as needed
},
),
$(go.TextBlock,
{
margin: 10,
font: "10pt sans-serif",
alignment: go.Spot.LeftCenter,
textAlign: "left",
verticalAlignment: go.Spot.MiddleLeft,
width: 200,
height: 30,
editable: false,
isMultiline: false,
click: (e, obj) => {
if (obj && obj.diagram && obj.diagram.div && obj.diagram.div.id && obj.diagram.div.id === "myDiagramDiv") {
console.log(e);
console.log(obj);
obj.diagram.commandHandler.editTextBlock();
}
}
},
new go.Binding("text", "name").makeTwoWay(),
new go.Binding("width", "name", function (name) {
return name ? 170 : 30; // Increase width based on text length
}),
)
)
);
myPalette2.nodeTemplate.click = (e, obj) => {
let data = obj.data;
clickPAletteForLAne(data, e, obj)
};
myPalette2.model.nodeDataArray = [
{
category: "activity",
text: "Node 1",
Associate: "AcceleratorPalette",
name: "Node 1",
source: "assets/bpmn icon/node1.png",
shape: "Square", color: "#116173", icon: "\uf390", id: 1
},
{
category: "activity",
text: "Node 2",
Associate: "AcceleratorPalette",
name: "Node 2",
source: "assets/bpmn icon/node1.png",
shape: "Square", color: "#116173", icon: "\uf390", id: 1
},{
category: "activity",
text: "Node 3",
Associate: "AcceleratorPalette",
name: "Node 3",
source: "assets/bpmn icon/node1.png",
shape: "Square", color: "#116173", icon: "\uf390", id: 1
},
{
category: "activity",
text: "Node 4",
Associate: "AcceleratorPalette",
name: "Node 4",
source: "assets/bpmn icon/node1.png",
shape: "Square", color: "#116173", icon: "\uf390", id: 1
},{
category: "activity",
text: "Node 5",
Associate: "AcceleratorPalette",
name: "Node 5",
source: "assets/bpmn icon/node1.png",
shape: "Square", color: "#116173", icon: "\uf390", id: 1
},
];
function getUniqueKey() {
let model = myDiagram.model;
let maxKey = 0;
model.nodeDataArray.forEach(function (nodeData) {
if (nodeData.key > maxKey) {
maxKey = nodeData.key;
}
});
let newKey = maxKey + 1;
return newKey;
}
function clickPAletteForLAne(obj, e, obj_comp_data) {
let model = myDiagram.model;
const newKey = getUniqueKey()
const nodes = model.nodeDataArray;
const nodeWithSameName = nodes.find(node => node.name === obj.name);
const json = myDiagram.model.toJson();
const dataSet = JSON.parse(json);
const nodeData = dataSet.nodeDataArray;
const selection = myDiagram.selection.first();
if (selection && selection instanceof go.Link) {
const fromnode = selection.fromNode.data.group;
let fromSubModual = nodeData.find((item) => item.key == fromnode);
const tonode = selection.toNode;
const tonodePos = tonode.position.copy();
const tonodeWidth = tonode.actualBounds.width;
addCurrentNode = tonode;
const parselocation3 = toNodeLocation;
const location3 = `${parselocation3.x + 150} ${parselocation3.y}`;
myDiagram.model.commit(m => {
const newdata = { ...obj, group: fromSubModual.key, loc: location3 };
m.addNodeData(newdata);
m.setToKeyForLinkData(selection.data, newdata.key);
m.addLinkData({ from: newdata.key, to: tonode.key });
});
}
let contextMenu = document.getElementById("myPaletteDiv2");
contextMenu.style.display = "none";
}
function makePort(name, spot, output, input) {
return $(go.Shape, "Circle",
{
fill: null,
stroke: null,
desiredSize: new go.Size(11, 11),
alignment: spot,
alignmentFocus: spot,
portId: name,
fromSpot: spot, toSpot: spot,
fromLinkable: output, toLinkable: input,
cursor: "pointer"
});
}
load();
}
function reexpand(e) {
myDiagram.commit(diag => {
var level = parseInt(document.getElementById("levelSlider").value);
diag.findTopLevelGroups().each(g => expandGroups(g, 0, level))
}, "reexpand");
}
function expandGroups(g, i, level) {
if (!(g instanceof go.Group)) return;
g.isSubGraphExpanded = i < level;
g.memberParts.each(m => expandGroups(m, i + 1, level))
}
function updateTotalGroupDepth() {
let d = 0;
myDiagram.findTopLevelGroups().each(g => d = Math.max(d, groupDepth(g)));
document.getElementById("levelSlider").max = Math.max(0, d);
}
function groupDepth(g) {
if (!(g instanceof go.Group)) return 0;
let d = 1;
g.memberParts.each(m => d = Math.max(d, groupDepth(m)+1));
return d;
}
const dataSet = {
"class": "go.GraphLinksModel",
"nodeDataArray": [
{"key":3, "isGroup":true, "text":"Group A"},
{"key":4, "isGroup":true, "text":"Group B"},
{"text":"First A", "group":3, "key":-7},
{"text":"Second A", "group":3, "key":-8},
{"text":"First B", "group":4, "key":-9},
{"text":"Second B", "group":4, "key":-10},
{"text":"Third B", "group":4, "key":-11}
],
"linkDataArray": [{from:-7, to:-8}]}
function load() {
myDiagram.model = go.Model.fromJson(dataSet);
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div style="width: 100%; display: flex; justify-content: space-between">
<div id="myPaletteDiv2"></div>
<div id="myDiagramDiv" style="flex-grow: 1; height: 500px; background-color: rgb(223, 235, 229); border: 1px solid black; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); cursor: auto;"><canvas tabindex="0" width="1114" height="498" style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; touch-action: none; width: 1114px; height: 498px; cursor: auto;"></canvas><div style="position: absolute; overflow: auto; width: 1114px; height: 498px; z-index: 1;"><div style="position: absolute; width: 1px; height: 1px;"></div></div></div>
</div>
</body>
</html>
