I want to draw a table panel and put it inside a custom shape.
the problem is that the table data is shown outside the shape
how can I avoid the text getting out of the bounds of the shape?
here is the code for that.
<!DOCTYPE html>
<html>
<head>
<title>shape</title>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
<div style="width: 100%; display: flex; justify-content: space-between">
<div
style="display: flex; flex-direction: column; margin: 0 2px 0 0"
></div>
<div
id="myDiagramDiv"
style="flex-grow: 1; height: 400px; border: solid 1px black"
></div>
</div>
<div>
<button id="myLoadButton">Load</button>
<button id="mySaveButton">Save</button>
</div>
<textarea id="mySavedModel" style="width: 100%; height: 200px">
{ "class": "go.GraphLinksModel",
"nodeDataArray": [
{"key":1, "text":"hello", "color":"green", "location":"0 0"}
],
"linkDataArray": [
{"from":1, "to":2}
]}
</textarea
>
<script src="https://unpkg.com/gojs"></script>
<script id="code">
const $ = go.GraphObject.make;
// initialize main Diagram
const myDiagram = new go.Diagram('myDiagramDiv', {});
myDiagram.nodeTemplate = $(
go.Node,
'Auto',
$(
go.Shape,
{
fill: 'lightgray',
geometryString: 'FM 8 5 L 9 4 H 17 V 7 L 16 8 L 8 8 V 5',
stroke: 'gray',
strokeWidth: 2,
},
new go.Binding('stroke', 'color')
),
$(
go.Panel,
'Table',
$(go.TextBlock, 'row 0\ncol 0', {
row: 0,
column: 0,
margin: 2,
background: 'lightgray',
}),
$(
go.TextBlock,
'row 0 col 1\nyellow background',
// first object in the cell (row: 0, col: 1)
{
row: 0,
column: 1,
margin: 2,
background: 'yellow',
stroke: 'gray',
}
),
$(
go.TextBlock,
'row 0\ncol 1',
// second object in that cell overlaps the first one,
// the bigger yellow TextBlock
{
row: 0,
column: 1,
margin: 2,
background: 'transparent',
stroke: 'blue',
}
),
$(go.TextBlock, 'row 1\ncol 0', {
row: 1,
column: 0,
margin: 2,
background: 'lightgray',
}),
$(go.TextBlock, 'row 1\ncol 2', {
row: 1,
column: 2,
margin: 2,
background: 'lightgray',
})
)
);
// save a model to and load a model from Json text, displayed below the Diagram
function save() {
const str = myDiagram.model.toJson();
document.getElementById('mySavedModel').value = str;
}
function load() {
const str = document.getElementById('mySavedModel').value;
myDiagram.model = go.Model.fromJson(str);
}
document.getElementById('myLoadButton').addEventListener('click', load);
load();
</script>
</body>
</html>
