Created
April 7, 2020 11:19
-
-
Save drenther/c4551360cfb49cb5c17658757123a9af to your computer and use it in GitHub Desktop.
Example of Spot Panel Ports Example to show inconsistencies in Spot Panel ports // source https://jsbin.com/kixawuh
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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