Hello,
Following up on my previous inquiry at Help with Node Design using PanelExpanderButton - GoJS - Northwoods Software, I am continuing to work on the design of a node using the PanelExpanderButton.
The code below is a sample based on the suggestions I received:
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
</head>
<body>
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>
<textarea id="mySavedModel" style="width:100%;height:250px"></textarea>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/release/go-debug.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/release/go.js"></script>
<script id="code">
const myDiagram =
new go.Diagram("myDiagramDiv", {
"undoManager.isEnabled": true,
"ModelChanged": e => { // just for demonstration purposes,
if (e.isTransactionFinished) { // show the model data in the page's TextArea
document.getElementById("mySavedModel").textContent = e.model.toJson();
}
}
});
const roundedRectangleParams = {
parameter1: 2, // set the rounded corner
spot1: go.Spot.TopLeft,
spot2: go.Spot.BottomRight // make content
};
myDiagram.nodeTemplate =
new go.Node("Auto", {
resizable: true,
locationSpot: go.Spot.Top,
selectionAdornmentTemplate:
new go.Adornment('Auto')
.add(
new go.Shape('RoundedRectangle', { fill: null, stroke: '#7986cb', strokeWidth: 3 })
.set(roundedRectangleParams),
new go.Placeholder()
) // end Adornment
}, new go.Binding("desiredSize", "size", go.Size.parse, go.Size.stringify)
)
.add(
new go.Shape("RoundedRectangle", {
parameter1: 2,
fill: "white", stroke: "gray", strokeWidth: 5
})
.set(roundedRectangleParams),
new go.Panel("Table", {
stretch: go.GraphObject.Fill,
margin: 2 })
.add(
new go.Panel("Auto", {
row: 0,
stretch: go.GraphObject.Fill
})
.add(
new go.Shape("RoundedRectangle", { fill: "red", strokeWidth: 0 })
.set(roundedRectangleParams)
.bind("fill", "color"),
new go.Panel("Horizontal", { margin: 4 })
.add(
new go.TextBlock({
editable: true,
overflow: go.TextBlock.OverflowEllipsis,
font: 'bold 14px sans-serif',
text: "node name",
alignment: go.Spot.Left,
margin: 2
},
new go.Binding("text", "text")),
go.GraphObject.build("PanelExpanderButton", {
background: "white", alignment: go.Spot.Right
})
)
),
new go.Panel("Vertical", {
row: 1,
name: "COLLAPSIBLE",
visible: false,
margin: 8,
defaultAlignment: go.Spot.Left,
//height: 100
})
.add(
new go.TextBlock("additional information 1"),
new go.TextBlock("additional information 2")
)
)
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "red" }
],
[
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 3, to: 4 },
{ from: 4, to: 1 }
]);
</script>
</body>
</html>
I am encountering an issue where the node turns white and I can no longer interact with the PanelExpanderButton after performing the following operations.
It seems that the white RoundedRectangle shown in the following code is displayed.
new go.Shape("RoundedRectangle", {
parameter1: 2,
fill: "white", stroke: "gray", strokeWidth: 5
})
.set(roundedRectangleParams),
How can I modify the code to resolve this problem?
Here are the steps to reproduce the issue:
- Click the PanelExpanderButton placed on top of the node to expand the lower panel.
- Click the PanelExpanderButton again to close the lower panel.
- Resize the node by reducing its height until it reaches a certain small size.
After performing these actions, the screen looks as follows:
I would appreciate your guidance on this matter.
Thank you.