310 lines
9.1 KiB
TypeScript
310 lines
9.1 KiB
TypeScript
import go from "gojs";
|
|
|
|
export function transitionTemplate() {
|
|
const $ = go.GraphObject.make; // for conciseness in defining templates
|
|
|
|
// some constants that will be reused within templates
|
|
const mtb8 = new go.Margin(8, 0, 8, 0);
|
|
const mr8 = new go.Margin(0, 8, 0, 0);
|
|
const ml8 = new go.Margin(0, 0, 0, 8);
|
|
const mrl8 = new go.Margin(0, 8, 0, 8);
|
|
|
|
const roundedRectangleParams = {
|
|
parameter1: 2, // set the rounded corner
|
|
spot1: go.Spot.TopLeft,
|
|
spot2: go.Spot.BottomRight // make content go all the way to inside edges of rounded corners
|
|
};
|
|
|
|
// define Converters to be used for Bindings
|
|
function iconConverter(value) {
|
|
return value;
|
|
}
|
|
|
|
// Create a Vertical Panel.
|
|
function makeVerticalPanel(
|
|
binding: string,
|
|
side: "left" | "right",
|
|
portSize = new go.Size(8, 8)
|
|
) {
|
|
let order: any = [];
|
|
if (side === "left") {
|
|
order = [
|
|
$(
|
|
go.Shape,
|
|
"RoundedRectangle",
|
|
{
|
|
stroke: null,
|
|
strokeWidth: 0,
|
|
desiredSize: portSize,
|
|
margin: new go.Margin(1, 0)
|
|
},
|
|
new go.Binding("fill", "portColor")
|
|
),
|
|
$(
|
|
go.TextBlock,
|
|
{
|
|
row: 0,
|
|
alignment: go.Spot.Left,
|
|
font: "16px Roboto, sans-serif",
|
|
stroke: "rgba(0, 0, 0, .87)",
|
|
margin: mrl8
|
|
},
|
|
new go.Binding("text", "label")
|
|
)
|
|
];
|
|
} else {
|
|
order = [
|
|
$(
|
|
go.TextBlock,
|
|
{
|
|
row: 0,
|
|
alignment: go.Spot.Left,
|
|
font: "16px Roboto, sans-serif",
|
|
stroke: "rgba(0, 0, 0, .87)",
|
|
maxSize: new go.Size(160, NaN),
|
|
margin: mrl8
|
|
},
|
|
new go.Binding("text", "label")
|
|
),
|
|
$(
|
|
go.Shape,
|
|
"RoundedRectangle",
|
|
{
|
|
stroke: null,
|
|
strokeWidth: 0,
|
|
desiredSize: portSize,
|
|
margin: new go.Margin(1, 0)
|
|
},
|
|
new go.Binding("fill", "portColor")
|
|
)
|
|
];
|
|
}
|
|
|
|
return $(go.Panel, "Vertical", new go.Binding("itemArray", binding), {
|
|
alignment: side === "left" ? go.Spot.Left : go.Spot.Right,
|
|
itemTemplate: $(
|
|
go.Panel,
|
|
"Horizontal",
|
|
{
|
|
_side: side, // internal property to make it easier to tell which side it's on
|
|
toSpot: go.Spot.Left,
|
|
fromSpot: go.Spot.RightSide,
|
|
fromLinkable: side !== "left",
|
|
toLinkable: side === "left",
|
|
cursor: "pointer",
|
|
alignment: side === "left" ? go.Spot.Left : go.Spot.Right
|
|
},
|
|
new go.Binding("portId", "portId"),
|
|
...order
|
|
) // end itemTemplate
|
|
}); // end Vertical Panel
|
|
}
|
|
|
|
// This function provides a common style for most of the TextBlocks.
|
|
// Some of these values may be overridden in a particular TextBlock.
|
|
function textStyle(field) {
|
|
return [
|
|
{
|
|
font: "12px Roboto, sans-serif",
|
|
stroke: "rgba(0, 0, 0, .60)",
|
|
visible: false // only show textblocks when there is corresponding data for them
|
|
},
|
|
new go.Binding("visible", field, function (val) {
|
|
return val !== undefined;
|
|
})
|
|
];
|
|
}
|
|
|
|
// Define a function for creating a "port" that is normally transparent.
|
|
// The "name" is used as the GraphObject.portId,
|
|
// the "align" is used to determine where to position the port relative to the body of the node,
|
|
// the "spot" is used to control how links connect with the port and whether the port
|
|
// stretches along the side of the node,
|
|
// and the boolean "output" and "input" arguments control whether the user can draw links from or to the port.
|
|
function makePort(name, align, spot, output, input) {
|
|
const horizontal =
|
|
align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
|
|
// the port is basically just a transparent rectangle that stretches along the side of the node,
|
|
// and becomes colored when the mouse passes over it
|
|
return $(go.Shape, {
|
|
fill: "transparent", // changed to a color in the mouseEnter event handler
|
|
strokeWidth: 0, // no stroke
|
|
width: horizontal ? NaN : 8, // if not stretching horizontally, just 8 wide
|
|
height: !horizontal ? NaN : 8, // if not stretching vertically, just 8 tall
|
|
alignment: align, // align the port on the main Shape
|
|
stretch: horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical,
|
|
portId: name, // declare this object to be a "port"
|
|
fromSpot: spot, // declare where links may connect at this port
|
|
fromLinkable: output, // declare whether the user may draw links from here
|
|
toSpot: spot, // declare where links may connect at this port
|
|
toLinkable: input, // declare whether the user may draw links to here
|
|
cursor: "pointer", // show a different cursor to indicate potential link point
|
|
mouseEnter: function (e, port) {
|
|
// the PORT argument will be this Shape
|
|
if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
|
|
},
|
|
mouseLeave: function (e, port) {
|
|
port.fill = "transparent";
|
|
}
|
|
});
|
|
}
|
|
|
|
return $(
|
|
go.Node,
|
|
"Auto",
|
|
{
|
|
locationSpot: go.Spot.Top,
|
|
isShadowed: true,
|
|
shadowBlur: 1,
|
|
shadowOffset: new go.Point(0, 1),
|
|
shadowColor: "rgba(0, 0, 0, .14)",
|
|
// selection adornment to match shape of nodes
|
|
selectionAdornmentTemplate: $(
|
|
go.Adornment,
|
|
"Auto",
|
|
$(go.Shape, "RoundedRectangle", roundedRectangleParams, {
|
|
fill: null,
|
|
stroke: "#7986cb",
|
|
strokeWidth: 3
|
|
}),
|
|
$(go.Placeholder)
|
|
) // end Adornment
|
|
},
|
|
$(
|
|
go.Shape,
|
|
"RoundedRectangle",
|
|
roundedRectangleParams,
|
|
{ name: "SHAPE", fill: "#ffffff", strokeWidth: 1 },
|
|
// gold if highlighted, white otherwise
|
|
new go.Binding("fill", "isHighlighted", function (h) {
|
|
return h ? "gold" : "#ffffff";
|
|
}).ofObject()
|
|
),
|
|
$(
|
|
go.Panel,
|
|
"Vertical",
|
|
{
|
|
stretch: go.GraphObject.Fill
|
|
},
|
|
$(
|
|
go.Panel,
|
|
"Horizontal",
|
|
{ margin: 8 },
|
|
$(
|
|
go.Picture, // flag image, only visible if a nation is specified
|
|
{ margin: mr8, visible: false, desiredSize: new go.Size(50, 50) },
|
|
new go.Binding("source", "icon", iconConverter),
|
|
new go.Binding("visible", "icon", function (nat) {
|
|
return nat !== undefined;
|
|
})
|
|
),
|
|
$(
|
|
go.Panel,
|
|
"Table",
|
|
{
|
|
stretch: go.GraphObject.Horizontal
|
|
},
|
|
$(
|
|
go.TextBlock,
|
|
{
|
|
row: 0,
|
|
alignment: go.Spot.Left,
|
|
font: "16px Roboto, sans-serif",
|
|
stroke: "rgba(0, 0, 0, .87)"
|
|
},
|
|
new go.Binding("text", "label")
|
|
),
|
|
$(
|
|
go.TextBlock,
|
|
textStyle("description"),
|
|
{
|
|
row: 1,
|
|
alignment: go.Spot.Left
|
|
},
|
|
new go.Binding("text", "description")
|
|
),
|
|
$("PanelExpanderButton", "GUARD", {
|
|
row: 0,
|
|
column: 1,
|
|
rowSpan: 2,
|
|
margin: ml8
|
|
}),
|
|
$("PanelExpanderButton", "SERVICE", {
|
|
row: 1,
|
|
column: 1,
|
|
rowSpan: 2,
|
|
margin: ml8
|
|
})
|
|
)
|
|
),
|
|
// Horizontal Lane as devider:
|
|
$(
|
|
go.Shape,
|
|
"LineH",
|
|
{
|
|
stroke: "rgba(0, 0, 0, .60)",
|
|
strokeWidth: 1,
|
|
height: 1,
|
|
stretch: go.GraphObject.Horizontal
|
|
},
|
|
new go.Binding("visible").ofObject("GUARD") // only visible when info is expanded
|
|
),
|
|
// Vertiacal Layout Holding the Guard
|
|
$(
|
|
go.Panel,
|
|
"Auto",
|
|
{
|
|
margin: mtb8,
|
|
stretch: go.GraphObject.Fill,
|
|
name: "GUARD"
|
|
},
|
|
makeVerticalPanel("guardInputs", "left"),
|
|
$(
|
|
go.TextBlock,
|
|
{
|
|
row: 0,
|
|
alignment: go.Spot.Center,
|
|
font: "16px Roboto, sans-serif",
|
|
stroke: "rgba(0, 0, 0, .87)",
|
|
margin: mrl8
|
|
},
|
|
new go.Binding("text", "guard")
|
|
),
|
|
makeVerticalPanel("guardOutputs", "right")
|
|
),
|
|
$(
|
|
go.Shape,
|
|
"LineH",
|
|
{
|
|
stroke: "rgba(0, 0, 0, .60)",
|
|
strokeWidth: 1,
|
|
height: 1,
|
|
stretch: go.GraphObject.Horizontal
|
|
},
|
|
new go.Binding("visible").ofObject("SERVICE") // only visible when info is expanded
|
|
),
|
|
|
|
$(
|
|
go.Panel,
|
|
"Auto",
|
|
{ margin: mtb8, stretch: go.GraphObject.Fill, name: "SERVICE" },
|
|
makeVerticalPanel("serviceInputs", "left"),
|
|
$(
|
|
go.TextBlock,
|
|
{
|
|
row: 0,
|
|
alignment: go.Spot.Center,
|
|
font: "16px Roboto, sans-serif",
|
|
stroke: "rgba(0, 0, 0, .87)",
|
|
margin: mrl8
|
|
},
|
|
new go.Binding("text", "serviceName")
|
|
),
|
|
makeVerticalPanel("serviceOutputs", "right")
|
|
)
|
|
),
|
|
makePort("T", go.Spot.Top, go.Spot.Top, false, true),
|
|
makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
|
|
);
|
|
}
|