Drag Creating Tool (Extend to Include go.Picture)

GoJS
1

Is there a way to extend the DragCreatingTool to draw a picture box and ensure that the picture box consumes the entire bounding rectangle?

2

You don’t have to customize the tool. All you have to do is create a new node template that uses a Picture instead of its current template (an auto panel that has a shape and a textblock)

        nodeTemplate:
          $(go.Node, "Position",
            { resizable: true, resizeObjectName: 'pic' },
            new go.Binding("position", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
            // temporarily put selected nodes in Foreground layer
            new go.Binding("layerName", "isSelected", function(s) { return s ? "Foreground" : ""; }).ofObject(),
            $(go.Picture,
              {
                // TODO: Specify an image source either here or via data binding
                minSize: new go.Size(60, 20),
                desiredSize: new go.Size(60, 20),
                name: 'pic',
                background: 'red'
              },
              new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)
            )
          ),
3

Here’s an example: http://codepen.io/simonsarris/pen/ORJbyz?editors=1010

4

The binding on desiredSize was what I was missing. I will give that a try. Thanks

5

Note that, for Picture, you have to set a binding on desiredSize and also set some default desired size, even though it will get a new value right away. This is a necessary workaround in 1.6 (and is fixed in the current Alpha and is not an issue in 1.7).

6

Simon,

Many thanks for the feedback. I am able to load an image into an image control now. But for some reason when I save my diagram model and then reload, my picture control does not contain the image. I looked at the JSON string and I can see the image data saved as Base64 encoded. Any ideas.

7

BTW. Here is the JSON representation of my Diagram.model.

{ “class”: “go.GraphLinksModel”,
“nodeDataArray”: [ {“category”:“picture”, “color”:"#99ccff", “key”:-1, “pos”:"-716.03125 -234.515625", “loc”:"-716.03125 -234.515625", “element”:{“src”:“data:image/png;base64,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”}} ],
“linkDataArray”: []}

8

Instead of data-binding the Picture.element, data bind the source.

This example loads that data: http://codepen.io/simonsarris/pen/mAdWVy?editors=1010

But I changed the data to use “src” directly and put a data binding on Picture:

new go.Binding("source", "src"),

Instead of using element.