I am provide you below code for group template add and get code with mypalette code and with all attached images
now my issue is that when click on mypalette data that add on this between links that break and add node inside that this is working fine but that’s I am added or clicked in palette data that added goes to outside the group template Not in group template , Give me write code for that I am added in between using paltte data click that also add in group template only not goes out of group template frame
Group template add lane
this.myDiagram.groupTemplateMap.add("Lane",
$(go.Group, "Horizontal", groupStyle(),
{
selectionObjectName: "SHAPE", // selecting a lane causes the body of the lane to be highlit, not the label
resizable: true, resizeObjectName: "SHAPE", // the custom resizeAdornmentTemplate only permits two kinds of resizing
layout: $(go.LayeredDigraphLayout, // automatically lay out the lane's subgraph
{
isInitial: false, // don't even do initial layout
isOngoing: false, // don't invalidate layout when nodes or links are added or removed
direction: 0,
columnSpacing: 10,
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
alignOption: go.LayeredDigraphLayout.AlignAll
}),
computesBoundsAfterDrag: true, // needed to prevent recomputing Group.placeholder bounds too soon
computesBoundsIncludingLinks: false, // to reduce occurrences of links going briefly outside the lane
computesBoundsIncludingLocation: true, // to support empty space at top-left corner of lane
handlesDragDropForMembers: true, // don't need to define handlers on member Nodes and Links
mouseDrop: (e, grp: any) => {
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(),
// the lane header consisting of a Shape and a TextBlock
$(go.Panel, "Horizontal",
{
name: "HEADER",
angle: 270, // maybe rotate the header to read sideways going up
alignment: go.Spot.Center
},
$(go.Panel, "Horizontal", // this is hidden when the swimlane is collapsed
new go.Binding("visible", "isSubGraphExpanded").ofObject(),
$(go.Shape, "Diamond",
{ width: 8, height: 8, fill: "white", stroke: "" },
new go.Binding("fill", "color")),
$(go.TextBlock, // the lane label
{ font: "bold 13pt sans-serif", editable: true, margin: new go.Margin(2, 0, 0, 0) },
new go.Binding("text", "name").makeTwoWay())
),
$("SubGraphExpanderButton", { margin: 5 }) // but this remains always visible!
), // end Horizontal Panel
$(go.Panel, "Auto", // the lane consisting of a background Shape and a Placeholder representing the subgraph
$(go.Shape, "Rectangle", // this is the resized object
// { name: "SHAPE", fill: "white", stroke: "black", strokeWidth: 2 },
{ name: "SHAPE", fill: "white", minSize: new go.Size(1460, 300), stroke: "black", strokeWidth: 2 },
// new go.Binding("fill", "color"),
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)),
$(go.Placeholder,
{ padding: 12, alignment: go.Spot.TopLeft }),
$(go.TextBlock, // this TextBlock is only seen when the swimlane is collapsed
{
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())
) // end Auto Panel
));
group template get lane
this.myDiagram.groupTemplateMap.get("Lane").resizeAdornmentTemplate =
$(go.Adornment, "Spot",
{ minSize: new go.Size(1460, 300) },
$(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 },
$("Button",
{ alignment: go.Spot.Bottom, click: (event, obj) => this.addGroup(event, obj), cursor: 'pointer' },
$(go.Shape, "PlusLine", { cursor: 'pointer', width: 8, height: 8, fill: "white", stroke: "black" })
)
)
);
myPAlette code
myPalette2.nodeTemplate.click = (e, obj: any) => {
// Access the data bound to the node
let data = obj.data;
console.log(e, 'paletediv2click_for_palette');
console.log(obj.part.data, 'paletediv2clickobject');
// this.clickPalette(obj.part.data)
this.clickPAletteForLAne(data, e, obj)
};
// myPalette2.model = new go.GraphLinksModel(activities)
// myPalette2.model.nodeDataArray = this.changeIconsForProcess;
myPalette2.model.nodeDataArray = [
{ text: "Start",name: "Start", figure: "Ellipse", "size": "75 75", fill: "#00AD5F",source: "assets/bpmn icon/web.png", },
{ text: "Step" ,name: "Step", figure: "Ellipse", "size": "75 75", fill: "#00AD5F",source: "assets/bpmn icon/web.png" },
{ text: "DB", name: "DB", figure: "Ellipse", "size": "75 75", fill: "#00AD5F",source: "assets/bpmn icon/web.png" },
{ text: "???", name: "???", figure: "Ellipse", "size": "75 75", fill: "#00AD5F",source: "assets/bpmn icon/web.png" },
{ text: "End", name: "End", figure: "Ellipse", "size": "75 75", fill: "#00AD5F",source: "assets/bpmn icon/web.png" },
{ text: "Comment", name: "Comment", figure: "Ellipse", "size": "75 75", fill: "#00AD5F",source: "assets/bpmn icon/web.png" }
];
clickPAletteForLAne(obj: any, e, obj_comp_data) {
console.log(obj);
let model = this.myDiagram.model;
const newKey = this.getUniqueKey()
// Check if a node with the same name already exists
const nodes = model.nodeDataArray;
const nodeWithSameName = nodes.find(node => node.name === obj.name);
if (nodeWithSameName) {
console.log('Node with the same name already exists.');
this.service_notification.notifier(NotificationType.error, "Same name activity already exist.");
return; // Exit the function without adding a duplicate node
}
// For instance we are taking first link and removing so that we can add newLink
model.startTransaction("remove-link");
model.removeLinkData(this.currentNodeLinkData);
model.commitTransaction("remove-link");
// Add new node
model.startTransaction("addNode");
const newNodeData = {
// group: "Lane1",
// isGroup: true,
id: 3,
key: newKey,
name: obj.name,
source: obj.source,
Associate: obj.name,
text: obj.name,
category: "Lane",
};
model.addNodeData(newNodeData);
if (this.currentNodeLinkData && (this.currentNodeLinkData.from || this.currentNodeLinkData.to)) {
model.addLinkData({
from: this.currentNodeLinkData.from,
to: newKey
});
model.addLinkData({
from: newKey,
to: this.currentNodeLinkData.to
});
}
model.commitTransaction("addNode");
let contextMenu = document.getElementById("myPaletteDiv2");
contextMenu.style.display = "none";
}
Without click on palette
after click on palette
