Hi,
We’ve modelled our implementation based off this BPMN implementation.
https://gojs.net/latest/projects/bpmn/BPMN.html
But we are facing an issue:
In this User Task node, the text and icon should not overlap.
We’re looking for a solution like this:
Alternatively, if text can wrap around the icon, that is also acceptable. Can you help achieve any of these ?
I do not understand. In your desired example, it appears as if the icon overlaps the text.
How have you changed the node template?
Hi Walter,
Sorry for the confusion, its text shouldn't overlap the icon.
OK. So what is your node template that exhibits that behavior?
$(
go.Node,
'Spot',
{
locationObjectName: 'SHAPE',
locationSpot: go.Spot.Center,
toolTip: tooltipTemplate,
contextMenu,
itemTemplate: boundaryEventItemTemplate(),
resizable: true,
resizeObjectName: 'PANEL',
resizeAdornmentTemplate: nodeResizeAdornmentTemplate,
selectionAdorned: true,
selectionAdornmentTemplate: resizableSelectionAdornmentTemplate(),
selectionChanged: onSelectionChanged,
},
// new go.Binding('itemArray', 'boundaryEventArray'),
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding('deletable', 'isEditable'),
// move a selected part into the Foreground layer, so it isn't obscured by any non-selected parts
new go.Binding('layerName', 'isSelected', s => (s ? 'Foreground' : '')).ofObject(),
$(
go.Panel,
'Auto',
{
name: 'PANEL',
minSize: new go.Size(ActivityNodeWidth, ActivityNodeHeight),
desiredSize: new go.Size(ActivityNodeWidth, ActivityNodeHeight),
},
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
$(
go.Panel,
'Spot',
$(
go.Shape,
'RoundedRectangle', // the outside rounded rectangle
{
name: 'SHAPE',
fill: ActivityNodeFill,
stroke: ActivityNodeStroke,
parameter1: 10,
portId: '',
fromLinkable: true,
toLinkable: true,
cursor: 'pointer',
fromSpot: go.Spot.RightSide,
toSpot: go.Spot.LeftSide,
fromMaxLinks: 1,
mouseEnter(e, obj) {
const type = getNodeType(obj.part.data);
if (type === 'serviceTask' || type === 'userTask') {
obj.cursor = obj.part.findLinksOutOf().count === 1 ? 'default' : 'pointer';
}
},
},
new go.Binding('fill', 'color'),
new go.Binding(
'strokeWidth', 'isCall', s => (s ? ActivityNodeStrokeWidthIsCall : ActivityNodeStrokeWidth),
),
),
$(
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: 14,
height: 14,
stroke: ActivityNodeStroke,
},
new go.Binding('fill', 'taskType', nodeActivityTaskTypeColorConverter),
new go.Binding('figure', 'taskType', nodeActivityTaskTypeConverter),
), // end Task Icon
makeMarkerPanel(false, 1), // sub-process, loop, parallel, sequential, ad doc and compensation markers
), // end main body rectangles spot panel
$(
go.TextBlock, // the center text
{
alignment: go.Spot.Center,
textAlign: 'center',
margin: 5,
editable: true,
font: customFont,
},
new go.Binding('text').makeTwoWay(),
),
), // end Auto Panel
);
It seems that in your node template you have the icon, implemented by a Shape, in a “Spot” Panel that has a “RoundedRectangle” Shape as the main element.
The whole point of a “Spot” Panel is to allow objects to overlap while being aligned with respect to the main object. GoJS Panels -- Northwoods Software
Similarly, the “Auto” Panel is supposed to wrap the main object around the other objects, so they may overlap, depending on their alignments and sizes. And the same is true for the “Position” Panel, depending on their positions and sizes.
So to make sure two objects do not overlap, no matter how large they are or how small their panel is, you will need to use a different panel type. The “Vertical” and “Horizontal” panel types do that naturally. The “Table” panel type will do that if you put them in different columns or different rows.
Thanks, that helps. But, is there a way to let the icon come on top ?
What do you mean by “on top”?
I’ve corrected the request title so that there is no confusion.
I mean it is okay for them to overlap and if they do overlap icon should be on top of the text and not the other way around.
We want something like this:
Is this possible ?
I’m very confused now. It is clear to me that in this last screenshot the icon is clearly overlapping the text. Yet the title of this topic says that is not what you want.
“Overlapping” means that the areas of two objects intersect. So for any two GraphObjects, a and b,
a.getDocumentBounds().intersectsRect(b.getDocumentBounds())
will return true if they overlap and false if they do not overlap.
No, the above screenshot is from a different diagram tool, not gojs. And we want the result to be like that. And the screenshot from gojs is posted at the very beginning. I’ll paste it here again to give clarity:
We want something like a css absolute positioning with zIndex.
Ah, so you do want overlapping, but you want to control the z-ordering.
The order in which the objects of a panel are drawn is sequential. You need to make sure the TextBlock comes before the Shape or Picture that is the icon. For example:
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ width: 100, height: 60 },
$(go.Shape, "RoundedRectangle",
{ fill: "bisque" }),
$(go.TextBlock,
new go.Binding("text")),
$(go.Shape, "BpmnTaskUser",
{ width: 16, height: 16, fill: "white", alignment: go.Spot.TopLeft })
);
produces:
