The picture is not visible on the nodes in pallette which are already in diagram.
index.html is given below
<!DOCTYPE html>
<html>
<head>
<title>Sample go</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://gojs.net/latest/release/go.js"></script>
<script type="text/javascript" src="icons.js"></script>
<style type="text/css">
#contextMenu {
position: absolute;
left: 5px;
background-color: transparent;
font-size: 12px;
font-family: sans-serif;
font-weight:bold;
height: 278px;
display: block;
z-index: 3;
}
#paletteWrap{
border: 1px solid #444;
padding: 6px;
box-shadow: 0 0 10px rgba( 0, 0, 0, .4 );
background-color: #FFFFFF
}
#myPalette {
border: 1px solid #444;
box-shadow: 0 0 10px rgba( 0, 0, 0, .4 );
width:606px;
height:200px;
background-color: #FFFFFF;
}
.triangle {
width: 0;
height: 0;
border-top:9px solid #B6B6B6;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
margin-left: 303px;
}
</style>
</head>
<body style="background-color: #DDDDDD;">
<div id = "programWrap" style="display: inline-block;position: relative;">
<div id="myDiagram"
style="width:1190px; height:530px; "></div>
<div id="contextMenu">
<div id="paletteWrap">
<div id="myPalette"></div>
</div>
<div class = "triangle " ></div>
</div>
</div>
</body>
<script type="text/javascript" src="app.js"></script>
</html>
app,js is given below
var defaultDiagramData = '{ "class": "go.GraphLinksModel", "nodeDataArray": [{"category":"Start", "pic":"Start", "loc":"-201.78125762939453 178.5833282470703", "key":-1}, {"category":"End", "pic":"End", "loc":"786.2187423706055 178.5833282470703","key":-2}], "linkDataArray": [ {"from":-1, "to":-2, "points":[-151.28125762939453,178.5833282470703,-141.28125762939453,178.5833282470703, 292.21874237060547,178.5833282470703,292.21874237060547,178.5833282470703,725.7187423706055,178.5833282470703,735.7187423706055,178.5833282470703]} ]}';
var createNode = [];
var adornedPart;
var part;
var linkHoverAdornment
$(function() {
$("#contextMenu").hover(function() {
linkHoverAdornment.adornedObject = part;
part.addAdornment("mouseHover", linkHoverAdornment);
}, function() {
part.removeAdornment("mouseHover");
$("#contextMenu").hide();
});
init();
});
var colors = {
darkGreen: '#006400',
greenApple: '#4CC417',
darkBlue: '#0000A0',
purple: '#800080',
burgundy: '#8C001A',
blue: "#00B5CB",
orange: "#FFA500",
silver: "#C0C0C0",
white: "#FFFFFF",
dodgerblue: "dodgerblue",
firebrick: "#F62817",
chocolate: '#C85A17',
blueGray: '#98AFC7',
cobaltBlue: '#0020C2',
lightStateBlue: '#736AFF',
butterflyBlue: '#38ACEC',
venomGreen: '#728C00',
sandstone: '#786D5F',
green: '#00FF00',
yellow: '#FFFF00',
deepSkyBlue: '#3BB9FF',
red: '#FF0000'
}
function init() {
var gojs = go.GraphObject.make;
// This converter is used by the Picture.
function picFunc(pic) {
return pic + ".svg";
}
myDiagram = gojs(go.Diagram, "myDiagram", {
initialContentAlignment: go.Spot.Center,
"animationManager.duration": 800,
"undoManager.isEnabled": true,
hoverDelay: 0
});
function nodeStyle() {
return [
new go.Binding("location", "loc", go.Point.parse)
.makeTwoWay(go.Point.stringify), {
locationSpot: go.Spot.Center,
mouseEnter: function(e, obj) {
showPorts(obj.part, true);
},
mouseLeave: function(e, obj) {
showPorts(obj.part, false);
}
}
];
}
function makePort(name, spot, output, input) {
return gojs(go.Shape, "Circle", {
fill: "transparent",
strokeWidth: 2,
stroke: null,
desiredSize: new go.Size(8, 8),
alignment: spot,
alignmentFocus: spot,
portId: name,
fromSpot: spot,
toSpot: spot,
fromLinkable: output,
toLinkable: input,
cursor: "pointer"
});
}
myDiagram.nodeTemplateMap.add("Start",
gojs(go.Node, "Spot", nodeStyle(),
gojs(go.Panel, "Auto",
gojs(go.Shape, "Rectangle", {
fill: "transparent",
width: 100,
height: 81,
stroke: "black",
strokeWidth: 1
}),
gojs(go.Picture,
new go.Binding("source", "pic", picFunc)
)
),
makePort("R", go.Spot.Right, true, true)
)
);
myDiagram.nodeTemplateMap.add("End",
gojs(go.Node, "Spot", nodeStyle(),
gojs(go.Panel, "Auto",
gojs(go.Shape, "Rectangle", {
fill: colors['white'],
width: 100,
height: 81,
stroke: "black",
strokeWidth: 1
}),
gojs(go.Picture,
new go.Binding("source", "pic", picFunc)
)
),
makePort("T", go.Spot.Top, false, true),
makePort("L", go.Spot.Left, false, true),
makePort("B", go.Spot.Bottom, false, true)
)
);
myDiagram.nodeTemplateMap.add("Arrow",
gojs(go.Node, "Spot", nodeStyle(),
gojs(go.Panel, "Auto",
gojs(go.Shape, "Rectangle", {
fill: colors['white'],
width: 100,
height: 81,
stroke: "black",
strokeWidth: 1
}
),
gojs(go.Picture,
new go.Binding("source", "pic", picFunc)
)
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, true, false),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, false),
makePort("B", go.Spot.Bottom, true, false)
)
);
myDiagram.nodeTemplateMap.add("Unlike",
gojs(go.Node, "Auto", nodeStyle(),
gojs(go.Panel, "Auto",
gojs(go.Shape, "Rectangle", {
fill: colors['white'],
width: 100,
height: 81,
stroke: "black",
strokeWidth: 1
}),
gojs(go.Picture,
new go.Binding("source", "pic", picFunc)
)
),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("T", go.Spot.Top, true, true),
makePort("B", go.Spot.Bottom, true, true)
)
);
myDiagram.nodeTemplateMap.add("Comment",
gojs(go.Node, "Auto", nodeStyle(),
gojs(go.Panel, "Auto",
gojs(go.Shape, "Rectangle", {
fill: colors['white'],
width: 100,
height: 81,
stroke: "black",
strokeWidth: 1
}),
gojs(go.Picture,
new go.Binding("source", "pic", picFunc)
)
),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("T", go.Spot.Top, true, true),
makePort("B", go.Spot.Bottom, true, true)
)
);
myDiagram.linkTemplateMap.add("Comment",
gojs(go.Link, {
curve: go.Link.Bezier
},
new go.Binding("curviness"),
gojs(go.Shape, {
stroke: "brown"
}),
gojs(go.Shape, {
toArrow: "OpenTriangle",
stroke: "brown"
})
));
myDiagram.linkTemplate = gojs(go.Link, {
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5,
toShortLength: 4,
relinkableFrom: true,
relinkableTo: true,
reshapable: true
},
new go.Binding("points").makeTwoWay(),
gojs(go.Shape, {
isPanelMain: true,
stroke: "gray",
strokeWidth: 2
}), gojs(go.Shape, {
toArrow: "standard",
stroke: null,
fill: "gray"
}), gojs(go.Panel, "Auto", {
visible: false,
name: "LABEL",
segmentIndex: 2,
segmentFraction: 0.5
},
new go.Binding("visible", "visible").makeTwoWay(),
gojs(go.Shape, "RoundedRectangle", {
fill: "#F8F8F8",
stroke: null
}),
gojs(go.TextBlock, "Yes", {
textAlign: "center",
font: "10pt helvetica, arial, sans-serif",
stroke: "#333333",
editable: true
},
new go.Binding("text", "text")
)
), {
mouseHover: function(e, obj) {
$("#contextMenu").hide();
var link = obj.part;
part = link;
linkHoverAdornment.adornedObject = link;
link.addAdornment("mouseHover", linkHoverAdornment);
}
}
);
// temporary links used by LinkingTool and RelinkingTool are also
// orthogonal:
myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;
// initialize the Palette that is on the left side of the page
myPalette = gojs(go.Palette, "myPalette", {
"animationManager.duration": 800,
"undoManager.isEnabled": true,
nodeTemplateMap: myDiagram.nodeTemplateMap,
model: new go.GraphLinksModel([{
category: "Start",
pic: "Start"
}, {
category: "Arrow",
pic: "Arrow"
}, {
category: "Unlike",
pic: "Unlike",
}, {
category: "End",
pic: 'End'
}, {
category: "Comment",
pic: "Unlike",
}])
});
myPalette.addDiagramListener("ObjectDoubleClicked", onPalleteNodeSelected);
linkHoverAdornment =
gojs(go.Adornment, "Spot", {
background: "transparent",
mouseLeave: function(e, obj) {
adornedPart = obj.part.adornedPart;
adornedPart.removeAdornment("mouseHover");
adornedPart = undefined;
}
},
gojs(go.Placeholder, {
background: "transparent"
}),
gojs("Button", {
alignment: go.Spot.Center,
alignmentFocus: go.Spot.Center
}, {
click: addNodeAndLink
}, {
width: 30,
background: "transparent",
mouseEnter: function(e, obj) {
var shape = obj.findObject("SHAPE");
//shape.fill = "#6DAB80";
},
height: 30
},
gojs(go.TextBlock, "+", {
maxSize: new go.Size(160, NaN),
wrap: go.TextBlock.WrapFit
}))
);
$("#contextMenu").hide();
myDiagram.model = go.Model.fromJson(defaultDiagramData);
}
// Make link labels visible if coming out of a "conditional" node.
// This listener is called by the "LinkDrawn" and "LinkRelinked"
// DiagramEvents.
function showLinkLabel(e) {
var label = e.subject.findObject("LABEL");
if (label !== null)
label.visible = (e.subject.fromNode.data.figure === "Diamond");
}
// Make all ports on a node visible when the mouse is over the node
function showPorts(node, show) {
var diagram = node.diagram;
if (!diagram || diagram.isReadOnly || !diagram.allowLink)
return;
node.ports.each(function(port) {
port.stroke = (show ? "red" : null);
});
}
function onPalleteNodeSelected(e) {
var node = e.diagram.selection.first();
var nodeData = node.data;
delete nodeData["__gohashid"];
delete nodeData["gohashid"];
delete nodeData["key"];
createNewNode(nodeData);
}
function addNodeAndLink(e, obj) {
var cxElement = document.getElementById("contextMenu");
var mousePt = myDiagram.lastInput.viewPoint;
cxElement.style.display = "block";
var x = mousePt.x - 313;
var y = mousePt.y - 255;
cxElement.style.left = x + "px";
cxElement.style.top = y + "px";
var adorn = obj.part;
e.handled = true;
var diagram = adorn.diagram;
var lastInput = myDiagram.lastInput.documentPoint;
// get the node data for which the user clicked the button
var fromNode = adorn.adornedPart;
var link = fromNode.data;
var loc = (lastInput.x - 20) + " " + (lastInput.y - 23);
// create a new "State" data object, positioned off to the right of the adorned Node
toNode = fromNode.toNode.data;
fromNode = fromNode.fromNode.data;
createNode.toNode = toNode;
createNode.fromNode = fromNode;
createNode.location = loc
createNode.link = link;
}
function createNewNode(newNode) {
newNode.loc = createNode.location;
myDiagram.startTransaction("Add State");
myPalette.requestUpdate();
var model = myDiagram.model;
model.addNodeData(newNode);
model.removeLinkData(createNode.link);
// create a link data from the old node data to the new node data
var linkdata = {
from: model.getKeyForNodeData(createNode.fromNode), // or just: fromData.id
to: model.getKeyForNodeData(newNode)
};
var linkdatas = {
from: model.getKeyForNodeData(newNode), // or just: fromData.id
to: model.getKeyForNodeData(createNode.toNode)
};
// and add the link data to the model
model.addLinkData(linkdata);
model.addLinkData(linkdatas);
myDiagram.commitTransaction("Add State");
$("#contextMenu").hide();
if (adornedPart != undefined) {
adornedPart.removeAdornment("mouseHover");
adornedPart = undefined;
}
}
I am using svg image as picture.