Drawing a palette by clicking on a grid

So, this is the question:
I have this grid:

Can i draw a square into grid’s cells by clicking on it?

This is the code of grid model:

This is the definition of palette:
myPalette = //modello dei quadrati
(go.Palette, "myPaletteSmall", { nodeTemplate: myDiagram.nodeTemplate, layout: (go.GridLayout)

Can i trigger in some way the click event on the grid and add a new palette on it?


Are you seeking to allow the user to add a Node at a particular place in the Diagram by having the user click there? If so, use the ClickCreatingTool. You can read its documentation and find examples of it in the sample apps.

Basically you need to set ClickCreatingTool.archetypeNodeData.

If you want to make sure the new node is aligned to the grid, you probably want to override ClickCreatingTool | GoJS API to create the part and then align it to the grid.

Ok, thanks! I’'l try this

Ok, i’ve tried to use it but i don’t understand some things…

In this example i can create a new node by clicking on my diagram but i can’t understand how i can bind the archetypeNodeData to myPalette.

This is, for now, my result

Can you help me?

Ok, i forgot to define the shape into diagram X°D
Now works properly… Ty @walter!

P.S if anyone ha my same problem this is the correct override of inserPart function:

And this is the nodeTemplate definition:

I hope that is useful :)

Perhaps you could use Point | GoJS API.

Uhm, with the nearest point there are some “bugs”, i try to expain this with an image:

If i click on the blue point, the nearest point on the grid coincide whit the square red filled, but i want to fill the square where i clicked.

OK, I misunderstood the purpose of what you are trying to accomplish. So indeed you don’t want the “nearest” grid point, but the one that is at the “floor”, always the top-left corner.

Exactily! If there is a property or function like snapToGridPoint is better than my solution, but atm this seems the best solution for the problem :)

Are you sure you should be calling parseInt? In general one should avoid unnecessary conversions from numbers to strings or vice-versa. Just call Math.floor.

Also, it might be easier if you didn’t set Node.locationSpot at all, so that the location would just be at the top-left corner, and so that the location and the position are the same value.

Oh, you’re right! Thanks!
I’ve used parseInt to convert the float to int because the division (/) usually return a float instead of int, and this give me wrong coordinates to set the point.