Another one is with itemTemplate - which fails to compile.
import * as go from ‘gojs’;
import { Diagram, ToolManager } from ‘gojs’;
import { NodeModel } from ‘…/store/reducer/diagramReducer’;
import { UpdateNodeTextEvent } from ‘…/store/action/diagram’;
import { ReactDiagram } from ‘gojs-react’;
import { RadialLayout } from ‘./RadialLayout’;
require (‘./MyDiagram.css’);
interface MyDiagramProps {
nodeDataArray: Array<NodeModel>;
linkDataArray: Array<go.ObjectData>;
onNodeSelection: (key: string, isSelected: boolean) => void;
onModelChange: (event: go.IncrementalData) => void;
onTextChange: (event: UpdateNodeTextEvent) => void;
}
class MyDiagram extends React.PureComponent {
private diagramRef: React.RefObject<ReactDiagram>;
constructor(props: MyDiagramProps) {
super(props);
this.diagramRef = React.createRef();
this.initDiagram = this.initDiagram.bind(this);
this.onTextEdited = this.onTextEdited.bind(this);
this.nodeClicked = this.nodeClicked.bind(this);
}
render() {
return (
<ReactDiagram
ref={this.diagramRef}
divClassName="myDiagram"
initDiagram={this.initDiagram}
nodeDataArray={this.props.nodeDataArray}
linkDataArray={this.props.linkDataArray}
onModelChange={this.props.onModelChange}
skipsDiagramUpdate={false}
/>
);
}
private initDiagram(): Diagram {
const $ = go.GraphObject.make;
const myDiagram: Diagram = $(go.Diagram, // must be the ID or reference to div
{
initialAutoScale: go.Diagram.Uniform,
layout: $(RadialLayout, {
maxLayers:1,
layerThickness :400
}),
"animationManager.isEnabled": false,
model: $(go.GraphLinksModel, {
linkKeyProperty: 'key'
})
});
myDiagram.toolManager.panningTool.isEnabled = true;
myDiagram.toolManager.mouseWheelBehavior = ToolManager.WheelScroll;
var itemTemplateMap = new go.Map();
itemTemplateMap.add("",
$(go.Panel, "TableRow",
$(go.TextBlock, new go.Binding("text", "name"),
{ column: 0, margin: 2, font: "bold 10pt sans-serif" }),
$(go.TextBlock, new go.Binding("text", "description"),
{ column: 1, margin: 2 }),
$(go.TextBlock, new go.Binding("text", "name"),
{ column: 2, margin: 2 })
));
// define the Node template
myDiagram.nodeTemplate =
$(go.Node, "Spot",
{
locationSpot: go.Spot.Center,
locationObjectName: "SHAPE", // Node.location is the center of the Shape
selectionAdorned: false,
click: this.nodeClicked,
toolTip: // define a tooltip for each node that displays the color as text
$("ToolTip",
$(go.Panel, "Table",
{ stretch: go.GraphObject.Fill, margin: 0.5 },
$(go.RowColumnDefinition,
{ column: 0, sizing: go.RowColumnDefinition.None, background: "white", coversSeparators: true }),
$(go.RowColumnDefinition,
{ column: 1, minimum: 100, background: "white", separatorStroke: "black" }),
$(go.RowColumnDefinition,
{ row: 0, sizing: go.RowColumnDefinition.None }),
$(go.RowColumnDefinition,
{ row: 1, separatorStroke: "black" }),
$(go.TextBlock,
{ row: 0, column: 0, margin: 6, text : "Name" }),
$(go.TextBlock,
{ row: 1, column: 0, margin: 6, text : "Description" }),
$(go.TextBlock,
{ row: 0, column: 1, stretch: go.GraphObject.Horizontal, margin: 2, textAlign: "center" },
new go.Binding("text", "text")),
$(go.TextBlock,
{ row: 1, column: 1, stretch: go.GraphObject.Fill, margin: 2, textAlign: "center" },
new go.Binding("text", "description"))
),
) // end of Adornment
},
$(go.Shape, "Rectangle",
{
name: "SHAPE",
fill: "lightgreen", // default value, but also data-bound
stroke: "black",
strokeWidth: 2,
desiredSize: new go.Size(200, 30),
portId: "" // so links will go to the shape, not the whole node
}),
$(go.TextBlock,
{
name: "TEXTBLOCK",
},
new go.Binding("text"))
);
// this is the root node, at the center of the circular layers
myDiagram.nodeTemplateMap.add("Root",
$(go.Node, "Spot",
{
locationSpot: go.Spot.Center,
locationObjectName: "SHAPE", // Node.location is the center of the Shape
selectionAdorned: false,
click: this.nodeClicked,
toolTip: // define a tooltip for each node that displays the color as text
$("ToolTip",
$(go.Panel, "Table",
new go.Binding("itemArray", "info"),
{
defaultAlignment: go.Spot.Left,
defaultColumnSeparatorStroke: "black",
itemTemplateMap: itemTemplateMap
},
$(go.RowColumnDefinition,
{ row: 0, background: "lightgray" }),
$(go.RowColumnDefinition,
{ row: 1, separatorStroke: "black" })
)
) // end of Adornment
},
$(go.Shape, "Circle",
{
name: "SHAPE",
fill: "#aa33dd", // default value, but also data-bound
stroke: "red",
strokeWidth: 4,
desiredSize: new go.Size(150, 150),
portId: "" // so links will go to the shape, not the whole node
}),
$(go.TextBlock,
{
name: "TEXTBLOCK",
},
new go.Binding("text"))
));
// define the Link template
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
$(go.Shape) // the link shape, default black stroke
);
return myDiagram;
}
private nodeClicked(e : any, root:any) {
var diagram = root.diagram;
if (diagram === null) return;
// all other nodes should be visible and use the default category
diagram.nodes.each(function(n) {
n.visible = true;
if (n !== root) n.category = "";
})
// make this Node the root
root.category = "Root";
// tell the RadialLayout what the root node should be
diagram.layout.root = root;
if (diagram.layout.maxLayers == 0)
diagram.layout.maxLayers = 1;
//else if (diagram.layout.maxLayers == 1)
// diagram.layout.maxLayers = diagram.layout.maxLayers + 1;
diagram.layoutDiagram(true);
}
private onTextEdited(e: go.DiagramEvent) {
const tb = e.subject;
if (tb === null) {
return;
}
const node = tb.part;
if (node instanceof go.Node && this.props.onTextChange) {
this.props.onTextChange({ key: node.key as string, text: tb.text });
}
}
}
export default MyDiagram;
