gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
85 lines (77 loc) • 3.63 kB
HTML
<html>
<head>
<title>GoJS Shapes</title>
<meta name="description" content="All predefined GoJS Shape figures, displayed as Nodes with a name underneath." />
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<link href="../assets/css/goSamples.css" rel="stylesheet" type="text/css" /> <!-- you don't need to use this -->
<script src="goSamples.js"></script> <!-- this is only for the GoJS Samples framework -->
<script id="code">
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, "myDiagramDiv", // create the Diagram for the HTML DIV element
{
layout: $(go.GridLayout), // use a GridLayout
padding: new go.Margin(5,5,25,5) // to see the names of shapes on the bottom row
});
function mouseEnter(e, obj) {
obj.isHighlighted = true;
};
function mouseLeave(e, obj) {
obj.isHighlighted = false;
};
myDiagram.nodeTemplate =
$(go.Node, "Vertical",
{
mouseEnter: mouseEnter,
mouseLeave: mouseLeave,
locationSpot: go.Spot.Center, // the location is the center of the Shape
locationObjectName: "SHAPE",
selectionAdorned: false, // no selection handle when selected
resizable: true, resizeObjectName: "SHAPE", // user can resize the Shape
rotatable: true, rotateObjectName: "SHAPE", // rotate the Shape without rotating the label
// don't re-layout when node changes size
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized
},
new go.Binding("layerName", "isHighlighted", function(h) { return h ? "Foreground" : ""; }).ofObject(),
$(go.Shape,
{
name: "SHAPE", // named so that the above properties can refer to this GraphObject
width: 70, height: 70,
stroke: "#C2185B",
fill: "#F48FB1",
strokeWidth: 3
},
// bind the Shape.figure to the figure name, which automatically gives the Shape a Geometry
new go.Binding("figure", "key")),
$(go.TextBlock, // the label
{
margin: 4,
font: "bold 18px sans-serif",
background: 'white'
},
new go.Binding("visible", "isHighlighted").ofObject(),
new go.Binding("text", "key"))
);
// initialize the model
myDiagram.model.nodeDataArray = go.Shape.getFigureGenerators().toArray();
}
</script>
</head>
<body onload="init()">
<div id="sample">
<h3>GoJS Shapes</h3>
<div id="myDiagramDiv" style="border: solid 1px blue; height:600px"></div>
<p>This sample showcases all predefined <b>GoJS</b> figures.
This sample also makes use of <a href="../intro/highlighting.html">GoJS Highlighting</a> data-bindings: Mouse-hover over a shape to see its name.</p>
<p>You can specify a predefined geometry for a <a>Shape</a> by setting its <a>Shape.figure</a>.</p>
<p>With GoJS you can also define your own custom shapes with SVG-like path syntax, see the <a href="icons.html">SVG icons</a>
sample for examples or the <a href="../intro/geometry.html">Geometry Path Strings intro page</a> to learn more.</p>
<p>For predefined arrowheads, see the <a href="arrowheads.html">Arrowheads</a> sample.</p>
</div>
</body>
</html>