Skip to content

Instantly share code, notes, and snippets.

@drenther

drenther/index.html

Created April 7, 2020 11:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save drenther/c4551360cfb49cb5c17658757123a9af to your computer and use it in GitHub Desktop.
Save drenther/c4551360cfb49cb5c17658757123a9af to your computer and use it in GitHub Desktop.
Download ZIP
Example of Spot Panel Ports Example to show inconsistencies in Spot Panel ports // source https://jsbin.com/kixawuh
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Example to show inconsistencies in Spot Panel ports">
<title>Example of Spot Panel Ports</title>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.1.9/go.js"></script>
<script id="code">
function init() {
const $ = go.GraphObject.make;
function makePort(name, spot) {
return $(
go.Panel,
"Auto",
{
alignment: spot,
alignmentFocus: spot,
fromSpot: spot,
toSpot: spot,
cursor: "pointer",
fromLinkable: true,
toLinkable: true,
},
new go.Binding("portId", "key", (key) => `${name}::${key}`),
$(go.Shape, "Rectangle", {
fill: "crimson",
stroke: null,
desiredSize: new go.Size(10, 10),
}),
$(go.Shape, "XLine", {
name: "x",
fill: null,
alignment: go.Spot.Center,
stroke: "blue",
desiredSize: new go.Size(5, 5),
})
);
}
myDiagram = $(
go.Diagram,
"myDiagramDiv", // create a Diagram for the DIV HTML element
{
"grid.visible": true,
"undoManager.isEnabled": true,
}
);
const commonNodeOptions = {
resizable: true,
rotatable: true,
resizeObjectName: "Shape",
rotateObjectName: "Panel",
};
myDiagram.nodeTemplate = $(
go.Node,
"Auto",
commonNodeOptions,
$(
go.Panel,
"Auto",
{ name: "Panel", background: "lightgreen" },
$(
go.Shape,
{
fill: "lightblue",
strokeWidth: 1,
name: "Shape",
isPanelMain: true,
minSize: new go.Size(100, 100),
},
new go.Binding("figure").makeTwoWay()
),
makePort("Top", go.Spot.TopCenter),
makePort("Right", go.Spot.RightCenter),
makePort("Bottom", go.Spot.BottomCenter),
makePort("Left", go.Spot.LeftCenter),
)
);
myDiagram.model.nodeDataArray = [
{ figure: "Ellipse" },
{ figure: "Rectangle" },
];
}
</script>
</head>
<body onload="init()">
<div id="myDiagramDiv" style="border: solid 1px blue; width:100%; height:500px; min-width: 200px"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment