Hi,
I try to implement ETL tool and one part should be detail transformation between source tables and destiny table.
Design should contains 3 columns, where:
- first has all source tables with fields,
- second has all operations, direct links and constants,
- last has one target table.
In my current solution, I use TableLayout where I put 3 groups with set width and height and GridLayout.
Problem that I’m facing is related to center elements in second column and move it to correct place.
You can see screen and code bellow.
Do you have any suggestion, how should I change my implementation?
Thx,
Artur
public genDiagram() {
if (this.diagram) {
this.diagram.div = null;
}
const me = this;
const $ = GraphObject.make;
this.diagram = $(go.Diagram, "TransformationDesignArea", {
isEnabled: !me.isReadOnly(),
scrollMode: go.Diagram.DocumentScroll,
initialContentAlignment: go.Spot.TopCenter,
validCycle: Diagram.CycleNotDirected, // don't allow loops
allowHorizontalScroll: false,
allowVerticalScroll: false,
});
this.diagram.groupTemplate = $(
go.Group,
"Vertical",
{
movable: false,
copyable: false,
deletable: false,
selectable: false,
computesBoundsAfterDrag: true,
handlesDragDropForMembers: false, // don't need to define handlers on member Nodes and Links
layout: $(go.GridLayout, {
wrappingColumn: 1,
alignment: GridLayout.Forward,
cellSize: new go.Size(this.diagram.viewportBounds.width / 3, NaN),
}),
},
new go.Binding("column", "column"),
new go.Binding("row", "row"),
$(
go.Shape,
{
name: "SHAPE",
desiredSize: new go.Size(this.WIDTH, this.groupHeight),
strokeWidth: 0,
},
new go.Binding("fill", "key", (key) =>
key === Const.SOURCE || key === Const.TARGET ? "#f5f5f5" : "white"
)
)
);
const cardtemplate = $(
go.Node,
"Auto",
{
deletable: true,
copyable: false,
movable: true,
resizable: true,
reshapable: false,
alignment: go.Spot.Center
},
$(
go.Shape,
"RoundedRectangle",
{
portId: "",
cursor: "pointer",
fromLinkable: true,
toLinkable: true,
fromSpot: go.Spot.Right,
toSpot: go.Spot.Left,
width: 150,
height: 30,
fill: "grey",
stroke: null,
},
new go.Binding("fill", "group", (group) =>
group === Const.JOIN ? "rgba(255,218,47,0.67)" : "#9dd7ff"
)
),
$(
go.TextBlock,
{
font: "bold 14px sans-serif",
},
new go.Binding("text", "name")
)
);
const tabletemplate = $(
go.Node,
"Auto",
{
movable: false,
copyable: false,
deletable: false,
selectable: false,
},
$(go.Shape, { fill: "white" }),
$(
go.Panel,
"Table",
{
defaultRowSeparatorStroke: "lightgray",
},
new go.Binding("desiredSize", "size"),
new go.Binding("itemArray", "items"),
{
defaultAlignment: go.Spot.Left,
itemTemplate: $(
go.Panel,
"TableRow",
{
fromSpot: go.Spot.Right,
toSpot: go.Spot.Left,
},
new go.Binding("portId", "name"),
new go.Binding(
"fromLinkable",
"group",
(group) => group === Const.SOURCE
),
new go.Binding(
"toLinkable",
"group",
(group) => group === Const.TARGET
),
$(go.TextBlock, new go.Binding("text", "name"), {
column: 0,
margin: new go.Margin(6, 4, 6, 8),
height: 20,
font: "12pt Allianz Neo",
}),
$(go.TextBlock, new go.Binding("text", "value"), {
column: 1,
margin: new go.Margin(2, 8, 0, 4),
height: 20,
opacity: 0.9,
font: "12pt Allianz Neo",
background: "lightblue",
alignment: go.Spot.Right,
})
),
},
$(
go.Panel,
"TableRow",
{ isPanelMain: true }, // needed to keep this element when itemArray gets an Array
$(go.TextBlock, new go.Binding("text", "name"), {
margin: new go.Margin(0, 2, 0, 8),
height: 32,
font: "bold 16pt Allianz Neo",
})
),
$(
go.RowColumnDefinition,
{ row: 0 },
new go.Binding("background", "group", (group) =>
group === Const.SOURCE ? "#7beeeb" : "#CCDD61"
)
),
$(go.RowColumnDefinition, { row: 1, separatorStroke: "black" })
)
);
const templmap = new go.Map<string, go.Part>();
templmap.add(Const.CARDS, cardtemplate);
templmap.add(Const.TABLES, tabletemplate);
templmap.add("", this.diagram.nodeTemplate);
this.diagram.nodeTemplateMap = templmap;
this.diagram.linkTemplate = $(
"Link",
{
copyable: false,
movable: true,
resizable: false,
reshapable: true,
deletable: true,
relinkableFrom: true,
relinkableTo: true,
},
{ cursor: "pointer" },
$(
"Shape",
{ strokeWidth: 2 },
new go.Binding("stroke", "hasOperation", (hasOperation) =>
hasOperation ? "#00B5CB" : "#b9b9b9"
)
),
$(
"Shape",
{ stroke: null, toArrow: "Standard" },
new go.Binding("fill", "hasOperation", (hasOperation) =>
hasOperation ? "#00B5CB" : "#b9b9b9"
)
)
);
// @ts-ignore
this.diagram.layout = $(this.loadTableLayout());
this.diagram.model = $(go.GraphLinksModel, {
linkFromPortIdProperty: "fromPort",
linkToPortIdProperty: "toPort",
nodeDataArray: this.dataAndDefinitions,
linkDataArray: this.linkArray,
});
}
