gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
129 lines (113 loc) • 5.43 kB
HTML
<html>
<head>
<title>Icons GoJS Sample</title>
<meta name="description" content="Use SVG geometry path strings to create vector icons, rather than using images." />
<!-- 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 src="icons.js"></script> <!-- load SVG definitions for many icons in the "icons" variable -->
<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
// "icons" is defined in icons.js
// SVG paths have no flag for being filled or not, but GoJS Geometry paths do.
// We want to mark each SVG path as filled:
for (var k in icons) {
icons[k] = go.Geometry.fillPath(icons[k]);
}
// a collection of colors
var colors = {
blue: "#00B5CB",
orange: "#F47321",
green: "#C8DA2B",
gray: "#888",
white: "#F5F5F5"
}
// The first Diagram showcases what the Nodes might look like "in action"
myDiagram = $(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
"undoManager.isEnabled": true,
layout: $(go.TreeLayout)
});
// A data binding conversion function. Given an icon name, return the icon's Path string.
function geoFunc(geoname) {
if (icons[geoname]) return icons[geoname];
else return icons["heart"]; // default icon
}
// Define a simple template consisting of the icon surrounded by a filled circle
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "Circle",
{ fill: "lightcoral", strokeWidth: 4, stroke: colors["gray"], width: 60, height: 60 },
new go.Binding("fill", "color")),
$(go.Shape,
{ margin: 3, fill: colors["white"], strokeWidth: 0 },
new go.Binding("geometryString", "geo", geoFunc)),
// Each node has a tooltip that reveals the name of its icon
{ toolTip:
$(go.Adornment, "Auto",
$(go.Shape, { fill: "LightYellow", stroke: colors["gray"], strokeWidth: 2 }),
$(go.TextBlock, { margin: 8, stroke: colors["gray"], font: "bold 16px sans-serif" },
new go.Binding("text", "geo")))
}
);
// Define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal, corner: 5, toShortLength: -2, fromShortLength: -2 },
$(go.Shape, { strokeWidth: 5, stroke: colors["gray"] })); // the link shape
// Create the model data that will be represented by Nodes and Links
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, geo: "file" , color: colors["blue"] },
{ key: 2, geo: "alarm" , color: colors["orange"] },
{ key: 3, geo: "lab" , color: colors["blue"] },
{ key: 4, geo: "earth" , color: colors["blue"] },
{ key: 5, geo: "heart" , color: colors["green"] },
{ key: 6, geo: "arrow-up-right", color: colors["blue"] },
{ key: 7, geo: "html5" , color: colors["orange"] },
{ key: 8, geo: "twitter" , color: colors["orange"] }
],
[
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 3, to: 4 },
{ from: 4, to: 5 },
{ from: 4, to: 6 },
{ from: 3, to: 7 },
{ from: 3, to: 8 }
]);
// The second Diagram showcases every icon in icons.js
myDiagram2 = $(go.Diagram, "myDiagram2",
{ // share node templates between both Diagrams
nodeTemplate: myDiagram.nodeTemplate,
// simple grid layout
layout: $(go.GridLayout)
});
// Convert the icons collection into an Array of JavaScript objects
var nodeArray = [];
for (var k in icons) {
nodeArray.push({ geo: k, color: colors["blue"] });
}
myDiagram2.model.nodeDataArray = nodeArray;
}
</script>
</head>
<body onload="init()">
<div id="sample">
<h3>SVG Icons Sample</h3>
<div id="myDiagramDiv" style="border: solid 1px black; width:450px; height:300px"></div>
<p>This sample shows several "icons" that were originally SVG paths, used as Shapes in GoJS.</p>
<p>Above some icons are shown in a Tree-like Diagram, below a larger selection is shown.</p>
<p>You can easily add your own shapes to GoJS by writing your own geometry strings, or by copying SVG path strings, as is done in this sample. The icons for this sample are defined in <a href="icons.js">icons.js</a>.</p>
<p><a href="../intro/geometry.html">Read more about GoJS path syntax here.</a></p>
<div id="myDiagram2" style="border: solid 1px black; width:700px; height:500px"></div>
<p>The icons in this sample are from a selection of free icons at <a href="http://icomoon.io" target = "blank">icomoon.io</a></p>
</div>
</body>
</html>