How to Add extra clickable area to links and group

Hi,
We are having a diagram which contains Nodes, links and groups (group with line border) which are clickable.
We observed that,
to click any link or group, user has to click on the exact vertical center position of the link or group border.
As link and border lines are thin, user need to put extra effort to place the mouse pointer on the exact clickable position.
Is there any way, that we can increase this clickable area of link and group border line.

Use a Shape with stroke: “transparent” and strokeWidth: 5 (or whatever width you like) as another isPanelMain: true element of your Link template. There are many examples of this throughout the samples.

For Groups, it is common to use either a transparent background or fill. If that is undesirable in your app, you could add a thick transparent border.

Hi, We tried above options but it didnt worked out for us.
Increasing Clickable area of group’s border:
We are having a Loop (A custom group with border green and arrow shapes) in our diagram, which contains some flow elements. We want the user to select the loop by clicking on the green border( Not on the body of the group).

We tried using extra transparent border, but it was not drawing over the green line. It is coming inside green border and it draws a square, even though the provided shape is rectangle.
If we add one more border its overlapping the red border. Is there any way that, we can draw a thick transparent border(s), which can provide extra clickable area for green border inside and outside.
Please find below code snippet of group template.


$(go.Group, “Spot”,

$(go.Shape, “RoundedRectangle”, {
<span =“Apple-tab-span” style=“white-space:pre”>
fill : null,
<span =“Apple-tab-span” style=“white-space:pre”> stroke : “green”,
<span =“Apple-tab-span” style=“white-space:pre”> strokeWidth : 3
}),

$(go.Shape, “RoundedRectangle”, {
<span =“Apple-tab-span” style=“white-space: pre;”> fill : null,
<span =“Apple-tab-span” style=“white-space: pre;”> stroke : “red”, // To make it visible used red instead of transparent
<span =“Apple-tab-span” style=“white-space: pre;”> strokeWidth : 5
}),
)

If the green lines are Links, then you should just do what I suggested: add a thick transparent Shape to the Link template.

If the green lines are part of your Group template, then you should just change your Group template to behave the way that you want. That might just be a matter of setting the Group’s background to “transparent”.

Yes, green lines are just a border of group.
I tried by setting background color to transparent, but its making all the white area inside group as clickable.
But that’s not our requirement, we are trying to increase the clickable area around green line(border) so that, it can reduce extra effort of placing mouse tip on the exact line(first image of attachment) Hope you got our req.
Thanks.

OK, just put another border around it that uses a stroke: “transparent” and a strokeWidth: 3 or whatever you want. And you could put another transparent border inside your current green one too.

Yeah, I tried in that way only and the transparent line is coming inside green line but as a square shape not as green line’s shape (check the second image of attach).
I added one more border for outside, but it overlaps the inside border.

Are you sure you are putting the border(s) just around or just inside of the green border?

I’m not specifying any options for inside and outside borders. Check the below code snippet of group template.

// Main border
$(go.Group, “Spot”,
$(go.Shape, “RoundedRectangle”, {
fill : null,
stroke : “green”,
strokeWidth : 3
}),
//Extra border for clickable area
$(go.Shape, “RoundedRectangle”, {
fill : null,
stroke : “red”, // To make it visible used red instead of transparent
strokeWidth : 5
}),
)

What are the options should be added to inside and outside borders.

That doesn’t make any sense – I don’t see any implementation of the green border that your screenshot shows.

If you don’t specify the desiredSize for a Shape, and if it’s containing Panel doesn’t give it a size, the size of a Shape will default to 100x100, which is what you are seeing.

The green border containing arrows is the one I am talking about, for which I didn’t specified any size. And its taking rectangle shape.
But the second border’s (red) shape is not coming as green.
The group size may vary, so don’t know how to use size.

Would be greatful, if you provide a code snippet.
That may correct our approach.

But the Group template that you quoted here cannot be it, because it has no arrowheads. And what you do quote as the definition for the Group template does not make sense. Delete the red shape and change the green, and you’ll see what I mean – that isn’t providing the green border with arrowheads that your screenshot showed.

It’s easy enough to find examples of Group templates, both with and without a Placeholder. Start off with: http://gojs.net/latest/intro/groups.html, http://gojs.net/latest/intro/subgraphs.html, and http://gojs.net/latest/intro/sizedGroups.html. Then you can also search for instances of “go.Group” in all of the samples.

Sorry I didn’t provided the extra code of arrows here, because with out arrows also the diagram is coming as same. And the same problem.
I will go through the links you provided, will try to make it work.
Thanks

Here is a replacement template for the last example in the Groups intro page:

function borderStyle() { return { figure: "RoundedRectangle", fill: null, strokeWidth: 2, parameter1: 10, spot1: new go.Spot(0, 0, 0.5, 0.5), spot2: new go.Spot(1, 1, -0.5, -0.5) }; } diagram.groupTemplate = $(go.Group, "Vertical", $(go.Panel, "Auto", $(go.Shape, borderStyle(), { stroke: "orange" }), $(go.Panel, "Auto", $(go.Shape, borderStyle(), { stroke: "green" }), $(go.Panel, "Auto", $(go.Shape, borderStyle(), { stroke: "blue" }), $(go.Placeholder, // represents the area of all member parts, { padding: 5}) // with some extra padding around them ) ) ), $(go.TextBlock, // group title { alignment: go.Spot.Right, font: "Bold 12pt Sans-Serif" }, new go.Binding("text", "key")) );
Of course you’ll want to replace “orange” and “blue” with “transparent”.

Hi, Thanks for your help.
With above group template we are able to add extra transparent borders to our group.
To make it look like a LOOP, we are adding two pointer shapes to this group. Earlier it was aligned on green border(See earlier attached pic).
After adding extra transparent borders, these pointer shapes alignment got changed and it aligned on outer border.

Is there any way that we can place this pointers on the green line.
Below is my updated group template.

diagram.groupTemplate = $$(go.Group,
$$(go.Panel, “Auto”,
<span =“Apple-tab-span” style=“white-space: pre;”> $$(go.Shape, borderStyle(), {
<span =“Apple-tab-span” style=“white-space: pre;”> stroke : “red”
<span =“Apple-tab-span” style=“white-space: pre;”> }),

<span =“Apple-tab-span” style=“white-space: pre;”> $$(go.Panel, “Auto”,
<span =“Apple-tab-span” style=“white-space: pre;”> <span =“Apple-tab-span” style=“white-space: pre;”> $$(go.Shape, borderStyle(), {
<span =“Apple-tab-span” style=“white-space: pre;”> stroke : “green”
<span =“Apple-tab-span” style=“white-space: pre;”> }),<span =“Apple-tab-span” style=“white-space: pre;”>
<span =“Apple-tab-span” style=“white-space: pre;”>
<span =“Apple-tab-span” style=“white-space: pre;”> $$(go.Panel, “Auto”,
<span =“Apple-tab-span” style=“white-space: pre;”> <span =“Apple-tab-span” style=“white-space: pre;”> $$(go.Shape, borderStyle(), {
<span =“Apple-tab-span” style=“white-space: pre;”> stroke : “yellow”
<span =“Apple-tab-span” style=“white-space: pre;”> }),
<span =“Apple-tab-span” style=“white-space: pre;”> $$(go.Placeholder, {
<span =“Apple-tab-span” style=“white-space: pre;”> padding : _loopPadding
<span =“Apple-tab-span” style=“white-space: pre;”> }) // with some extra padding around them
<span =“Apple-tab-span” style=“white-space: pre;”> ))),
<span =“Apple-tab-span” style=“white-space: pre;”>
<span =“Apple-tab-span” style=“white-space: pre;”> //Top pointer
<span =“Apple-tab-span” style=“white-space: pre;”> $$(go.Shape, “Pointer”, {
<span =“Apple-tab-span” style=“white-space: pre;”> alignment : go.Spot.Top,
<span =“Apple-tab-span” style=“white-space: pre;”> width : 15,
<span =“Apple-tab-span” style=“white-space: pre;”> height : 15,
<span =“Apple-tab-span” style=“white-space: pre;”> fill : “green”,
<span =“Apple-tab-span” style=“white-space: pre;”> stroke : “green”
<span =“Apple-tab-span” style=“white-space: pre;”> }),
<span =“Apple-tab-span” style=“white-space: pre;”>
<span =“Apple-tab-span” style=“white-space: pre;”> // Bottom pointer
<span =“Apple-tab-span” style=“white-space: pre;”> $$(go.Shape, “Pointer”, {
<span =“Apple-tab-span” style=“white-space: pre;”> alignment : go.Spot.Bottom,
<span =“Apple-tab-span” style=“white-space: pre;”> width : 15,
<span =“Apple-tab-span” style=“white-space: pre;”> height : 15,
<span =“Apple-tab-span” style=“white-space: pre;”> fill : “green”,
<span =“Apple-tab-span” style=“white-space: pre;”> angle : 180,
<span =“Apple-tab-span” style=“white-space: pre;”> stroke : “green”
<span =“Apple-tab-span” style=“white-space: pre;”> })
<span =“Apple-tab-span” style=“white-space: pre;”> )

Change your Group to be of Panel.type “Spot”, and set the alignmentFocus on those arrow Shapes appropriately.

Intro to Panels

Changed panel type to “Spot” and applied alignmentFocus on pointer shapes.

alignmentFocus : go.Spot.TopCenter, // For top pointer
alignmentFocus : go.Spot.BottomCenter, //For bottom pointer.

Still not aligned with green line, Now they are coming inside borders.

Well then, use Spot values that work the way that you want them to.

I tried with other spot values too, but not able to place it on green line.

Hi Walter,
After several trials, I’m not able to solve above issue. Would be grateful if you provide any solution.

One clarification required:
We are adding extra transparent shapes to the Links and Loops(Groups) to increase clickable area,
Will it affect the performance of the diagram, if the diagram contains more of these kind Links and Loops.
If so, any other preferred solution ??