<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/[email protected]"></script>
<div id="allSampleContent" class="p-4 w-full">
<script src="https://unpkg.com/[email protected]/dist/extensions/SwimLaneLayout.js"></script>
<script id="code">
var DIRECTION = 0; // used to customize the layout and the templates, only upon first initialization
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram = new go.Diagram('myDiagramDiv', {
// automatically scale the diagram to fit the viewport's size
initialAutoScale: go.AutoScale.Uniform,
// disable user copying of parts
allowCopy: false,
initialContentAlignment: go.Spot.LeftCenter,
// position all of the nodes and route all of the links
layout: $(SwimLaneLayout, {
laneProperty: 'group', // needs to know how to assign vertexes/nodes into lanes/groups
direction: DIRECTION, // Group template also depends on DIRECTION
setsPortSpots: false,
layerSpacing: 20,
columnSpacing: 5,
commitLayers: function (layerRects, offset) {
// method override requires function, not =>
if (layerRects.length === 0) return;
var horiz = this.direction === 0 || this.direction === 180;
var forwards = this.direction === 0 || this.direction === 90;
var rect = layerRects[forwards ? layerRects.length - 1 : 0];
var totallength = horiz ? rect.right : rect.bottom;
for (var i = 0; i < this.laneNames.length; i++) {
var lane = this.laneNames[i];
// assume lane names do not conflict with node names
var group = this.diagram.findNodeForKey(lane);
if (group === null) {
this.diagram.model.addNodeData({ key: lane, isGroup: true });
group = this.diagram.findNodeForKey(lane);
}
if (horiz) {
group.location = new go.Point(-this.layerSpacing / 2, this.lanePositions.get(lane) * this.columnSpacing + offset.y);
} else {
group.location = new go.Point(this.lanePositions.get(lane) * this.columnSpacing + offset.x, -this.layerSpacing / 2);
}
var ph = group.findObject('PLACEHOLDER'); // won't be a go.Placeholder, but just a regular Shape
if (ph === null) ph = group;
if (horiz) {
ph.desiredSize = new go.Size(totallength, (this.laneBreadths.get(lane) * this.columnSpacing));
} else {
ph.desiredSize = new go.Size(this.laneBreadths.get(lane) * this.columnSpacing, (totallength));
}
}
},
}),
});
myDiagram.nodeTemplate = $(go.Node, "Auto",
{
selectionAdorned: false,
movable: true,
selectionChanged: (part) => {
console.log(part)
//part.findNodesOutOf().each(n => n.fill = '#116173');
// const shape = part.elt(0);
// shape.fill = '#116173';
}
},
new go.Binding('location', 'loc', go.Point.parse),
go.Panel.Horizontal,
{
portId: '',
// fromLinkable: true,
// toLinkable: true,
fromSpot: go.Spot.RightCenter, // coming out from right side
toSpot: go.Spot.LeftCenter, // g
click: (e, node) => {
//this.showHideNode(node)
console.log('ddd', e, node)
}
},
$(go.Panel,
go.Panel.Auto,
{
// click:(e, node) =>{
// console.log('ddd', e, node)
// }
},
$(go.Shape, 'RoundedRectangle',
{
fill: 'white',
minSize: new go.Size(150, 100),
desiredSize: new go.Size(150, 100),
strokeWidth: 1,
margin: new go.Margin(40, 0),
//stretch: go.GraphObject.Horizontal,
},
{ cursor: 'pointer' }, // indicate that linking may start here
new go.Binding('stroke', 'color'),
//new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
),
$(go.Panel,
'Horizontal',
$(go.TextBlock,
{
margin: 2,
stroke: '#4c525e',
cursor: 'pointer',
// stretch: go.GraphObject.Horizontal,
verticalAlignment: go.Spot.LeftCenter,
textAlign: 'left',
overflow: go.TextBlock.OverflowEllipsis,
wrap: go.TextBlock.None,
desiredSize: new go.Size(140, 25),
},
{ fromLinkable: false, toLinkable: false }, // don't start drawing a link from the text
new go.Binding('text', 'text'),
new go.Binding('stroke', 'color')
),
),
),
{ // Tooltip for showing full text on hover
toolTip: $(go.Adornment, "Auto",
$(go.Shape, { fill: "#ffffff" }),
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "text"))
)
},
);
// replace the default Node template in the nodeTemplateMap
// myDiagram.nodeTemplate = $(go.Node,
// 'Vertical', // the whole node panel
// {
// // when the DIRECTION is vertical, use the whole Node as the port
// fromSpot: go.Spot.TopBottomSides,
// toSpot: go.Spot.TopBottomSides,
// },
// $(go.TextBlock, // the text label
// new go.Binding('text', 'key')
// ),
// // $(go.Picture, // the icon showing the logo
// // // You should set the desiredSize (or width and height)
// // // whenever you know what size the Picture should be.
// // {
// // desiredSize: new go.Size(50, 50),
// // // when the DIRECTION is horizontal, use this icon as the port
// // portId: DIRECTION === 0 || DIRECTION === 180 ? '' : null,
// // fromSpot: go.Spot.LeftRightSides,
// // toSpot: go.Spot.LeftRightSides,
// // },
// // new go.Binding('source', 'key', convertKeyImage)
// // )
// );
myDiagram.nodeTemplateMap.add(
'ConditionStep',
$(go.Node,
'Auto',
{ selectable: false },
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, "Vertical",
// { margin: new go.Margin(40, 0) },
// { defaultAlignment: go.Spot.Left },
$(go.Panel, "Auto",
// { defaultAlignment: go.Spot.Top, defaultStretch: go.GraphObject.Vertical, },
$(go.Shape, 'Diamond', {
strokeWidth: .5,
// fill: "#F4B9B8",
fill: "#FFFFC2",
stroke: '#F79489',
desiredSize: new go.Size(80, 80),
// fromLinkable: false,
// toLinkable: false,
// fromLinkableDuplicates: false,
// toLinkableDuplicates: false,
// fromSpot: go.Spot.Right,
// toSpot: go.Spot.Left,
// portId: "",
// fromSpot: go.Spot.AllSides,
// toSpot: go.Spot.AllSides,
cursor: "pointer",
// minSize: new go.Size(150, 100),
// desiredSize: new go.Size(150, 100),
},
),
$(go.TextBlock, new go.Binding('text', 'text', (text) => {
console.log(text);
return text = "IF"
}),
),
{
toolTip: $(go.Adornment, "Auto",
$(go.Shape, { fill: "#FFFFCC" }),
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "key"))
)
},
),
// $(go.Panel, "Auto", { alignment: go.Spot.Center, desiredSize: new go.Size(180, 40), },
$(go.Panel, "Auto", { alignment: go.Spot.Center },
$(go.TextBlock,
{
maxLines: 3,
overflow: go.TextBlock.OverflowEllipsis,
// wrap: go.TextBlock.None,
alignment: go.Spot.Center,
font: '15px Inter, sans-serif',
maxSize: new go.Size(200, NaN), // Restrict the width
margin: 3,
cursor: "pointer",
},
new go.Binding('text', 'key')),
)
),
),
);
// replace the default Link template in the linkTemplateMap
myDiagram.linkTemplate = $(go.Link, // the whole link panel
{ routing: go.Routing.AvoidsNodes, corner: 10 },
$(go.Shape, // the link shape
{ strokeWidth: 1.5 }
),
$(go.Shape, // the arrowhead
{ toArrow: 'Standard', stroke: null }
)
);
myDiagram.groupTemplate = // assumes SwimLaneLayout.direction === 0
$(go.Group,
DIRECTION === 0 || DIRECTION === 180 ? 'Horizontal' : 'Vertical',
{
layerName: 'Background', // always behind all regular nodes and links
movable: false, // user cannot move or copy any lanes
copyable: false,
locationObjectName: 'PLACEHOLDER', // this object will be sized and located by SwimLaneLayout
layout: null, // no lane lays out its member nodes
avoidable: false, // don't affect any AvoidsNodes link routes,
},
$(go.TextBlock, { font: 'bold 12px sans-serif', angle: DIRECTION === 0 || DIRECTION === 180 ? 270 : 0 }, new go.Binding('text', 'text')),
$(go.Panel,
'Auto',
$(go.Shape, { fill: 'transparent', stroke: 'orange' }),
$(go.Shape, { name: 'PLACEHOLDER', fill: null, stroke: null, strokeWidth: 0, }),
// $(go.TextBlock, { font: 'bold 12pt sans-serif'}, new go.Binding('text', 'text')),
),
// $(go.TextBlock, { font: 'bold 12pt sans-serif', angle: DIRECTION === 0 || DIRECTION === 180 ? 90 : 0 }, new go.Binding('text', 'text'))
);
partitionBy('d');
}
// the array of node data describing each team, each division, and each conference
const newDataSet =
[
{
"key": "start_node",
"text": "Start",
"category": "start_node",
"group": "cp",
},
{
"key": "end_node",
"text": "End",
"category": "end_node",
"group": "hp",
},
{
"key": "A",
"text": "A",
"category": "BusinessStep",
"group": "hp",
},
{
"key": "B",
"text": "B",
"category": "BusinessStep",
"group": "cp",
},
{
"key": "C",
"text": "C",
"category": "BusinessStep",
"group": "hp",
},
{
"key": "D",
"text": "D",
"category": "ConditionStep",
"group": "a",
},
{
"key": "E",
"text": "E",
"category": "BusinessStep",
"group": "hp",
},
{
"key": "cp",
"text": "cp",
"category": "Lane",
"isGroup": true
},
{
"key": "a",
"text": "a",
"category": "Lane",
"isGroup": true
},
{
"key": "hp",
"text": "hp",
"category": "Lane",
"isGroup": true
}
];
const newLinkData =
[
{
"from": "start_node",
"to": "A"
},
{
"from": "E",
"to": "end_node"
},
{
"from": "A",
"to": "B"
},
{
"from": "B",
"to": "D",
},
{
"from": "D",
"to": "E",
"textnew":"No"
},
{
"from": "D",
"to": "C",
"textnew":"Yes"
},
{
"from": "C",
"to": "E"
}
]
// the array of link data objects: the relationships between the nodes
function partitionBy(a) {
// create the model and assign it to the Diagram
var model = new go.GraphLinksModel();
// depending on how we are partitioning the graph, each node belongs either
// to a conference group or to a division group
model.nodeGroupKey = a === 'c' ? 'conf' : 'group';
model.nodeDataArray = newDataSet;
model.linkDataArray = newLinkData;
// each node's lane information is the same as the group information
myDiagram.layout.laneProperty = model.nodeGroupKey;
// optionally, specify the order of known lane names, without setting laneComparer
//myDiagram.layout.laneNames = a === 'c' ? ['AFC', 'NFC'] : ['AFCE', 'AFCN', 'AFCS', 'AFCW', 'NFCE', 'NFCN', 'NFCS', 'NFCW'];
myDiagram.model = model;
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<!-- <p><b>Beat Paths</b>: The 2007 NFL Season, divided by conference or by division</p> -->
<div id="myDiagramDiv"
style="border: 1px solid gray; margin: 10px; height: 100vh; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);">
<canvas tabindex="0" width="1226" height="698"
style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; touch-action: none; width: 1226px; height: 698px;"></canvas>
<div style="position: absolute; overflow: auto; width: 1226px; height: 698px; z-index: 1;">
<div style="position: absolute; width: 1px; height: 1px;"></div>
</div>
</div>
<input type="radio" name="A" onclick="partitionBy('c')" id="conferenceButton">
<label for="conferenceButton">Conferences</label><br>
<input type="radio" name="A" onclick="partitionBy('d')" id="divisionButton" checked="">
<label for="divisionButton">Divisions</label><br>
</div>
</body>
</html>
This is my code in this ConditionStep is there and in this condiitonstep in link data one textnew property is there that is having yes and no and in this I want that in condition step means diamond box shape if textnew Yes is there then fromspot for link is from right and to spot is left
and if textnew is No then fromSpot is from bottom and tospot is also bottom
Means I am accordingly adjusts port dynamically
And in this you also visible that port is not connect in diamond corner do that also that from spot and tospot connect on diamond corner
I am provide you code Pls Execute this code and give the solution of my issue
