Implementing Icon (font awesome, etc) into Node

GoJS
1

It looks pretty straight forward when it comes to implementing a picture to bind to, or even adding a shape. I saw the SVG Icons example, is that the best/preferred way then to add something like font awesome or ionicons?

Is there a way to do something like this within the json, and then bind to that icon inside the node?

{key: "MARYLAND INDUSTRY", group: "FRUIT", icon: "fa fa-check"}

Something of that general idea? Or is the SVG Icon example the best way to go about getting an icon into the node?

2

You can implement any number of techniques for doing what you want. Given your data, I would implement something like the Icons sample, Icons GoJS Sample. It uses a Binding of Shape.geometryString to the data’s “icon” property with a conversion function that looks up the icon name in a table that finds the corresponding geometry string.

3

Why can’t I see the icon with this code (assuming I’m using the twitter strong from the icons example), also what’s the best way to go about moving the icon to the lower left corner:

  // A data binding conversion function. Given an icon name, return the icon's Path string.
       function geoFunc(geoname) {
     if(icons[geoname]) {
	return icons[geoname];
            }
    }



  graph(go.Node, "Auto",
	{margin: new go.Margin(0,30,0,30),
    fromSpot: go.Spot.Right,  // coming out from middle-right
    toSpot: go.Spot.Left},
	{	
		copyable: false,
		resizable: true, 
		resizeObjectName: "SHAPE",
		resizeAdornmentTemplate:
        	graph(go.Adornment, "Spot",
          		graph(go.Placeholder),
				 graph(go.Shape, { alignment: go.Spot.Left,  cursor: "e-resize", desiredSize: new go.Size(6, 16), fill: "#388E3C", stroke: "#388E3C" }),
				 graph(go.Shape, { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(6, 16), fill: "#388E3C", stroke: "#388E3C" }),
				 graph(go.Shape, { alignment: go.Spot.Bottom, cursor: "e-resize", desiredSize: new go.Size(16, 6), fill: "#388E3C", stroke: "#388E3C" })
			),
		selectionAdorned: false,
		mouseEnter: mouseEnter,
		mouseLeave: function (e, node) {mouseLeave(node); },
		// click: showConnections
	},
	// bind the Part.layerName to control the Node's layer depending on whether it isSelected
    new go.Binding("layerName", "isSelected", function(sel) { return sel ? "Foreground" : ""; }).ofObject(),
	graph(go.Shape, "RoundedRectangle",
		{name: "SHAPE", fill: "#FFF", minSize: new go.Size(200, 100), cursor: "pointer"},
		 new go.Binding("stroke", "isHighlighted", function(h) { return h ? "#388E3C" : "#009BE1"; })
        	.ofObject(),
		 new go.Binding("stroke", "isSelected", function(selected) {if (selected) return "#388E3C"; else return "#009BE1";})
			.ofObject(""),
		 new go.Binding("fill", "isHighlighted", function(h) { return h ? "#E9F9D7" : "#FFF"; })
        	.ofObject(),
		 new go.Binding("fill", "isSelected", function(selected) {if (selected) return "#E9F9D7"; else return "#FFF";})
			.ofObject("")),
	graph(go.TextBlock, "Default Text",
	 	{name: "TEXT", stroke: "black", font: "16px sans-serif", cursor: "pointer"},
		 new go.Binding("stroke", "isHighlighted", function(h) { return h ? "black" : "black"; })
        	.ofObject(),
		 new go.Binding("text", "key")),
	$(go.Shape, "Rectangle",
		{ fill: "lightcoral", strokeWidth: 1, stroke: "gray", width: 30, height: 30 }),
		$(go.Panel, "Vertical",
		{ margin: 3 },
			$(go.Shape,
				{ fill: "#FFF", strokeWidth: 0 },
				new go.Binding("geometryString", "geo", geoFunc))
		),
	 {
)

I’m getting the following:

Pasted image1920×1080 99.7 KB

4

I’m sorry, but I really cannot understand the visual tree structure of the code that you quoted. The indentation is messed up and there’s probably a lot of stuff which is unrelated to what you care about.

A general answer to your question is that you need to set the GraphObject.alignment and GraphObject.alignmentFocus, assuming the element is in an appropriate kind of Panel along with the element with which you want to align.

5

I assumed it would help for you to see the whole node structure but here is the code basically copy and pasted from the Icons example, why isn’t there a white icon fill on the icon:

 var icons = {
"twitter":
 "M26.667 0h-21.333c-2.934 0-5.334 2.4-5.334 5.334v21.332c0 2.936 2.4 5.334 5.334 5.334h21.333c2.934 0 5.333-2.398 5.333-5.334v-21.332c0-2.934-2.399-5.334-5.333-5.334zM26.189 10.682c0.010 0.229 0.015 0.46 0.015 0.692 0 7.069-5.288 15.221-14.958 15.221-2.969 0-5.732-0.886-8.059-2.404 0.411 0.050 0.83 0.075 1.254 0.075 2.463 0 4.73-0.855 6.529-2.29-2.3-0.043-4.242-1.59-4.911-3.715 0.321 0.063 0.65 0.096 0.989 0.096 0.479 0 0.944-0.066 1.385-0.188-2.405-0.492-4.217-2.654-4.217-5.245 0-0.023 0-0.045 0-0.067 0.709 0.401 1.519 0.641 2.381 0.669-1.411-0.959-2.339-2.597-2.339-4.453 0-0.98 0.259-1.899 0.712-2.689 2.593 3.237 6.467 5.366 10.836 5.589-0.090-0.392-0.136-0.8-0.136-1.219 0-2.954 2.354-5.349 5.257-5.349 1.512 0 2.879 0.65 3.838 1.689 1.198-0.24 2.323-0.685 3.338-1.298-0.393 1.249-1.226 2.298-2.311 2.96 1.063-0.129 2.077-0.417 3.019-0.842-0.705 1.073-1.596 2.015-2.623 2.769z"	
   }

      // A data binding conversion function. Given an icon name, return the icon's Path string.
       function geoFunc(geoname) {
         if(icons[geoname]) {
	        return icons[geoname];
            }
           }


   $(go.Shape, "Rectangle",
		{ fill: "lightcoral", width: 30, height: 30 }),
		$(go.Panel, "Vertical",
		{ margin: 3 },
			$(go.Shape,
				{ fill: "white", strokeWidth: 0 },
				new go.Binding("geometryString", "geo", geoFunc))
		),
6

I still can’t tell what’s going on. Your quoted structure seems to be:

    Shape "Rectangle"
    Panel "Vertical"
        Shape with geometryString

First, it’s odd to have a Vertical Panel with only one element in it. That’s not a big deal, but it’s wasteful at run-time, and it’s confusing for me.

Second, I don’t know what these two elements are in. So I can’t tell how they should be positioned relative to anything, not even to each other.

If you don’t know where something is, try setting its background color to some obvious value. You might still not see it if it’s zero-sized or hidden behind something opaque, but sometimes it helps.

You might want to try using an undocumented debug feature that prints out the visual tree structure. Select the Node or Link that you are curious about, and then evaluate this in the console:

go.Debug.dumpVisualTree(myDiagram.selection.first())
7

They sit inside my nodeTemplate, which is the code I posted before. I thought it would help you to see all the code of the node. Below is the exact code from your Icons example, which is what I am trying to use.

 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.Panel, "Vertical",
      { margin: 3 },
      $(go.Shape,
        { fill: colors["white"], strokeWidth: 0 },
        new go.Binding("geometryString", "geo", geoFunc))
    ),

I’ll keep messing around with it and see what I can come up with. Thanks

8

Hey – you’re right! That’s not very good code on our part. Sorry for the confusion. Here’s a better version that is equivalent:

    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")))
        }
      );

Note that the Icons sample depends on this structure:

    Panel "Auto"
        Shape "Circle"
        Shape geometryString

That provides a circle shape surrounding a shape with variable geometry.

Where the Panel goes inside its Panel depends on its alignment and alignmentFocus. Read GoJS Panels -- Northwoods Software and GoJS Table Panels -- Northwoods Software and GoJS Sizing of GraphObjects -- Northwoods Software for many examples and explanations.

9

Alright so from that code above I am using this with the $(go.Node, “Auto”, :

   graph(go.Shape, "Circle",
        	{ fill: "lightcoral", strokeWidth: 4, stroke: "gray", width: 30, height: 30 }),
    	graph(go.Shape,
      		{ margin: 3, fill: "white", strokeWidth: 0 },
      		new go.Binding("geometryString", "geo", geoFunc)),

The only thing that isn’t happening is that white fill isn’t taking place inside the circle, which I’m not really sure why. I don’t have any errors…do I need to have the colors array from that icons example?

10

I got the icon, just working on positioning it bottom left