Need to Add Custom Icon in Node

@Yogesh.Mohan wrote:

Hi Team,
I need to add custom sprite Image icon in my node can you please tell me how could i implement this on my this bpmn node code given below

I need to show then look like this

and need any Implementation for select icon only to remove it. Because I am using contextMenu: $(go.Adornment), so i need specific selection for this icon item.

var activityNodeTemplate =

            $(go.Node, "Spot",
                {
                    locationObjectName: "SHAPE", locationSpot: go.Spot.Center,
                    resizable: false, resizeObjectName: "PANEL",
                    toolTip: tooltiptemplate,
                    selectionAdorned: true,  // use a Binding on the Shape.stroke to show selection
                    contextMenu: $(go.Adornment),
                    itemTemplate: boundaryEventItemTemplate
                },
                new go.Binding("itemArray", "boundaryEventArray"),
                new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                // move a selected part into the Foreground layer, so it isn"t obscured by any non-selected parts

                new go.Binding("layerName", "isSelected", function (s) { return 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, // corner size
                                portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer",
                                fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides,
                                fromLinkableDuplicates: false, toLinkableDuplicates: false,
                                fromLinkableSelfNode: false, toLinkableSelfNode: false, toMaxLinks: 1, fromMaxLinks: 1,
                            },
                            new go.Binding("fill", "color"),
                            new go.Binding("strokeWidth", "isCall",
                                function (s) { return s ? ActivityNodeStrokeWidthIsCall : ActivityNodeStrokeWidth; })
                        ),
                        //        $(go.Shape, "RoundedRectangle",  // the inner "Transaction" rounded rectangle
                        //          { margin: 3,
                        //            stretch: go.GraphObject.Fill,
                        //            stroke: ActivityNodeStroke,
                        //            parameter1: 8, fill: null, visible: false
                        //          },
                        //          new go.Binding("visible", "isTransaction")
                        //         ),
                        // task icon
                        $(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)
                        ),
                       
                        // 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: 12,
                            editable: true
                        },
                        new go.Binding("text").makeTwoWay()),
                    { // show the Adornment when a mouseHover event occurs
                        mouseHover: function (e, obj) {
                            debugger
                            var node = obj.part;
                            var shape = obj.findObject("LINK");
                            nodeHoverAdornment.adornedObject = node;
                            node.addAdornment("mouseHover", nodeHoverAdornment);
                        }
                    },
                ),  // end Auto Panel
                { dragComputation: stayInGroup } // limit dragging of Nodes to stay within the containing Group, defined above  
            );  // end go.Node, which is a Spot Panel with bound itemArray

Posts: 2

Participants: 2

Read full topic