Is it posible to have a picture node bound to a stream/byte array?

GoJS
1

Hi there,

I am trying to create custom picture nodes for my palettes and diagrams. When i read up i realize that most/all the samples for go.Picture point to a picture on the disc/domain/cdn. is there a way to bind to a stream/bytes?

Kind regards
Alpheus

2

Yes, you can use data URLs: Data URLs - HTTP | MDN

3

Thanks Walter,

It works like a charm.

Alpheus

4

Hi Walter,

Thanks for your help in getting the custom image to work. I just have one more issue on this. Which is that, I do not have the drag behavior on the custom image, and I cant figure it out. Desirably on the textblock portion. please see the code below:

var customPictureTemplate =
$(go.Node, “Vertical”,
{
fromLinkable: true, toLinkable: true,
selectionAdorned: true, resizable: false,
rotatable: true,
},

        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        new go.Binding("layerName", "isSelected", function (s) { return s ? "Foreground" : ""; }).ofObject(),
        $(go.Picture,  // the icon showing the logo
            { width: 55, height: 55 },
            new go.Binding("source").makeTwoWay(),
            new go.Binding("key").makeTwoWay(),
        ),

        $(go.TextBlock,  // the center text
            {
                alignment: go.Spot.Center, textAlign: "center", margin: 12,
                editable: true
            },
            new go.Binding("text").makeTwoWay())
    );
5

Sorted, I just had to add a panel to it and enable linkable to and from on it. and disable them from the node.

var customPictureTemplate =
$(go.Node, “Vertical”,
{
locationObjectName: “PANEL”, locationSpot: go.Spot.Center,
fromLinkable: false, toLinkable: false,
selectionAdorned: true, resizable: false,
rotatable: true,
},

        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),

        $(go.Panel,
            {
                name: "PANEL", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer",

            },
            $(go.Picture,  // the icon showing the logo
                { width: 55, height: 55 },
                new go.Binding("source").makeTwoWay(),
                new go.Binding("key").makeTwoWay(),
            ),
        ),

        $(go.TextBlock,  // the center text
            {
                alignment: go.Spot.Center, textAlign: "center", margin: 12,
                //editable: true
            },
            new go.Binding("text").makeTwoWay()),
    );