I have a simple “entity” node created using an Auto panel and a couple of Vertical panels as shown:
The surrounding rectangle has a thick border or width 5 and the
the light blue area is a vertical panel with a margin of 10 (revealing the light background of the surrounding rectangle).
I have two problems:
- the margin of 10, appears inconsistent . I have 5 at the top, 7.5 on the sides (I think) and 10 on the bottom.
- when a resize the node to make it smaller ( I may wish to to this if a have a long attribute list and dont want the node to be draw really long) the bottom margin and border disappear as follows which looks ugly as follows.
The behavior seems to be related to the Vertical Panel because I note the sample ER daigram that uses a table panel doesnt do this.
How can I preserve the border and margin when I resize the node?
Code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<script lang="javascript" src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script>
// Global variables
var myDiagram;
function init() {
var $$ = go.GraphObject.make; // for conciseness in defining templates
var myDiagram = $$(go.Diagram, "myDiagramDiv"
, {
allowDrop: true
, allowDelete: true
, allowCopy: true
, "grid.visible": true
}
);
var attributeTemplate =
$$(go.Panel, "Vertical",
{
name: "Inside Vertical Panel"
, background: "transparent"
, stretch: go.GraphObject.Horizontal
, alignment: go.Spot.TopLeft
, defaultAlignment: go.Spot.Left
},
$$(go.Panel, // This is meant to be "Horizontal" , however if you make it horizontal it seems to stuff up the margin to the right when you minimize
{
name: "Horizontal Panel"
, stretch: go.GraphObject.Horizontal
, background: "white"
},
$$(go.Shape,
{
desiredSize: new go.Size(15, 15)
, strokeJoin: "round", strokeWidth: 2
, margin: go.Margin.parse("2 4 2 2") // t,r,b,l
, stroke: null, cursor: "default"
},
),
$$(go.TextBlock,
{
stroke: "#333333"
, font: "bold 14px sans-serif"
, editable: true
, cursor: "default"
, margin: new go.Margin(2, 2, 2, 23) // t,r,b,l
, height: 18
, verticalAlignment: go.Spot.Center
, alignment: go.Spot.TopLeft
},
new go.Binding("text", "attributeName").makeTwoWay()
)
) // end of Horizontal Panel
// , attributeSeparator
); // end of vertical Panel
var entityTemplate =
$$(go.Node, "Auto"
, {
resizable: true
, height: 150
}
, $$(go.Shape
, {
name: "PORTSHAPE"
, figure: "Rectangle"
, strokeWidth: 5
, stretch: go.GraphObject.Fill
, fill: "lightgray"
}
)
, $$(go.Panel, "Vertical",
{
margin: 10
, background: "lightblue"
, stretch: go.GraphObject.Fill
, alignment: go.Spot.TopCenter
}
, $$(go.TextBlock,
{
name: "textBlockTitle"
, cursor: "default"
, alignment: go.Spot.Center
, textAlign: "center"
, margin: new go.Margin(5, 13, 5, 5) // t,r,b,l
, stretch: go.GraphObject.Horizontal
, font: "18px sans-serif"
, editable: true
, text: "Node Title"
, background: "transparent"
}
)
//, attributeSeparator
, $$(go.Shape, "LineH",
{
height: 1
, stretch: go.GraphObject.Horizontal
, cursor: "crosshair"
, margin: new go.Margin(0, 5, 0, 5) // t,r,b,l
, stroke: "transparent"
, strokeWidth: 1
, strokeCap: "square"
, name: "SEPARATOR"
}
)
, $$(go.Panel, "Vertical"
, {
name: "ATTRIBUTEPANEL"
, cursor: "default"
, alignment: go.Spot.TopCenter
, margin: new go.Margin(0, 5, 5, 5) // t,r,b,l
, stretch: go.GraphObject.Fill
, background: "transparent"
, itemTemplate: attributeTemplate
}
, new go.Binding("itemArray", "attributes")
)
) // end Vertical panel
);
var nodeDataArray = [
{ key: "Node 1", nodeTitle: "short title", loc: new go.Point(0, 200), attributes: [{attributeName: "One"},{attributeName: "Two"}, {attributeName: "Three"} ] },
];
myDiagram.nodeTemplate = entityTemplate;
myDiagram.model = new go.GraphLinksModel(nodeDataArray);
} // end init()
window.addEventListener('DOMContentLoaded', init);
</script>
</head>
<body>
<div id="myDiagramDiv" style="border: solid 1px blue; width:1000px; height:1000px"></div>
</body>
</html>