How to change background image

GoJS
1

Here’s how I’m adding my background image. Very similar to the example in Kitten Monitor

[code]
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, "http://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg")));
[/code]
Currently, when I want to change the background image, this is what I do: 
    function updateBackgroundImage(fullImageName) {       
        myDiagram.clear();
        myDiagram.add(
            $$(go.Node,
                { layerName: "Background", position: new go.Point(0, 0), selectable: false, pickable: false },
                $$(go.Picture, fullImageName)));
    }

However, this clears all the Nodes/Parts on the diagram as well. Given the function I have, how can I change the background image without having to clear the diagram?

Some code examples would be helpful :)

2

Oh, I tried this but it doesn’t work.

        myDiagram.removeLayer(myDiagram.findLayer("Background"));
        myDiagram.addLayerBefore(
            $$(go.Layer,
            { name: "Background" }), myDiagram.findLayer("Grid"));
            
        myDiagram.add(
            $$(go.Node,
                { layerName: "Background", position: new go.Point(0, 0), selectable: false, pickable: false },
                $$(go.Picture, fullImageName)));

If I were to delete the background layer, does it delete the Part(my background image) as well?

        myDiagram.removeLayer(myDiagram.findLayer("Background"));

The above code doesn’t seem to work as my background image still remains on my diagram

3

Removing a Layer causes its Parts to be put into the default Layer.

Assuming you have set up a background Part to hold your image, you can change the image by:
myDiagram.parts.first().elt(0).source = "http://…png"

This also assumes that you have not created any other simple Parts for other purposes – if you do you can keep a reference to that Part so that you do not need to do: myDiagram.parts.first().

And this assumes that your background Part consists only of a Picture. If you make that Part more complicated, you should give that Picture a name and use Panel.findObject to find it so that you can set its Picture.source property, rather than doing: elt(0).

Finally for a completely different implementation you could use a singleton template and data binding.

4

Related to the same topic, how do I clear away the background image? Not the whole layer, just the image.

I tried this, but it doesn’t work

myBackground.elt(0).source = ‘’;

5

If the clearing is meant to be temporary, I would set visible to false, either on the Picture or on the Part containing the Picture.

If the clearing is permanent, just Diagram.remove that Part.