Ability to apply custom image as shape

GoJS
1

Hi,

I have a requirement where I need to display my own image as a shape in place of the gear/user icon in the task node in the BPMN example that you have provided. Could you please let me know the possibility and possibly an example will help!

2

Well, if the image can be expressed as a “figure”, i.e. a Geometry, then you can replace the definition of the gear – look for “gearStr”.

If you want to use a Picture instead, that gets more complicated, because the nodeActivityTypeTaskConverter assumes a Shape can show one of a number of named figures, including the “BpmnTaskService”, which is what uses the gear geometry. That conversion function is used in the binding of the “figure” property of two different Shapes. So you would need to have both a Picture and a Shape in the same space, and conditionally make just one of them visible.

3

Yes Walter, I’m looking to show an image.
So will the figure attribute only deals with geometry or a picture too?

4

No, they are completely separate types of GraphObjects. Shape.figure vs Picture.source.

5

Which means I need to use Go.picture instead of go.Shape there?

6

Got it Walter, did below change to make it work the way I expected with below change.

From
$(go.Shape, “BpmnTaskScript”, // will be None, Script, Manual, Service, etc via converter
{ alignment: new go.Spot(0, 0, 5, 5), alignmentFocus: go.Spot.TopLeft,
width: 22, height: 22
},
new go.Binding(“fill”, “taskType”, nodeActivityTaskTypeColorConverter),
new go.Binding(“figure”, “taskType”, nodeActivityTaskTypeConverter)
),

To$(go.Picture,
{
alignment: new go.Spot(0, 0, 5, 5),
alignmentFocus: go.Spot.TopLeft,
maxSize: new go.Size(30, 40),
},
new go.Binding(“source”, “key”, getTheKeyImage)),

Thanks for the hint