You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
5.2 KiB
129 lines
5.2 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Icons GoJS Sample</title>
|
|
<meta name="description" content="Use SVG geometry path strings to create vector icons, rather than using images." />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
|
|
|
|
<script src="../release/go.js"></script>
|
|
<script src="../assets/js/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
|
|
|
|
// 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",
|
|
{
|
|
"undoManager.isEnabled": true,
|
|
layout: $(go.TreeLayout)
|
|
});
|
|
|
|
// "icons" is defined in icons.js
|
|
|
|
// A data binding conversion function. Given an icon name, return a Geometry.
|
|
// This assumes that all icons want to be filled.
|
|
// This caches the Geometry, because the Geometry may be shared by multiple Shapes.
|
|
function geoFunc(geoname) {
|
|
var geo = icons[geoname];
|
|
if (geo === undefined) geo = icons["heart"]; // use this for an unknown icon name
|
|
if (typeof geo === "string") {
|
|
geo = icons[geoname] = go.Geometry.parse(geo, true); // fill each geometry
|
|
}
|
|
return geo;
|
|
}
|
|
|
|
// 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("geometry", "geo", geoFunc)),
|
|
// Each node has a tooltip that reveals the name of its icon
|
|
{
|
|
toolTip:
|
|
$("ToolTip",
|
|
{ "Border.stroke": colors["gray"], "Border.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, "myDiagramDiv2",
|
|
{ // 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">
|
|
<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="myDiagramDiv2" 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="https://icomoon.io" target = "blank">icomoon.io</a></p>
|
|
</div>
|
|
</body>
|
|
</html> |