Below is your sample code which works fine until I add a background image. I need to be able to drag and drop the rounded rectangle shapes even with a background image. Is there a way to do this?
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",
{
initialContentAlignment: go.Spot.TopLeft,
isReadOnly: true, // allow selection but not moving or copying or deleting
"toolManager.hoverDelay": 100 // how quickly tooltips are shown
});
var $ = go.GraphObject.make;
// the node template describes how each Node should be constructed
myDiagram.nodeTemplate =
$(go.Node, "Auto", // the Shape automatically fits around the TextBlock
$(go.Shape, "RoundedRectangle", // use this kind of figure for the Shape
// bind Shape.fill to Node.data.color
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 3 }, // some room around the text
// bind TextBlock.text to Node.data.key
new go.Binding("text", "key"))
);
// the Model holds only the essential information describing the diagram
myDiagram.model = new go.GraphLinksModel(
[ // a JavaScript Array of JavaScript objects, one per node;
// the "color" property is added specifically for this app
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
],
[ // a JavaScript Array of JavaScript objects, one per link
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
]);
myDiagram.initialContentAlignment = go.Spot.Center;
// enable Ctrl-Z to undo and Ctrl-Y to redo
myDiagram.undoManager.isEnabled = true;
// the background image, a floor plan
myDiagram.add(
$(go.Part, // this Part is not bound to any model data
{
layerName: "Background", position: new go.Point(0, 0),
selectable: false, pickable: false
},
$(go.Picture, "/samples/myimg.png")
));