Hi. I am working on a flowchart and I want to implement a colorpicker for the elements on the canvas.
Expected behavior: When selecting(clicking) a node a colorpicker will open next to the elements and the user can pick a color from there and change the background of the node.
My question: Is there such functionality in gojs? I know that you can change the background colors of elements, but is there an interface for a color picker in the library? Thank you.
Thank you for the quick response. I have meanwhile found the example you recomended and implemeted it without problems. The only thing that I didn’t found a way to do it yes is to “lock” the colorpicker to the selected node. My required behavior is that when I select a node the colorpicker shows next to the node and if I drag the element(node) around the canvas the colorpicker will follow it. I don’t know if this is possible to do with html colorpicker but if someone did it already or has a suggestion I would appreciate it. Thanks.
You will want to define a custom Part.selectionAdornmentTemplate to do that. There are several examples of this in the Intro and the samples, but I do not think any of them include an HTML element, which would tricky to implement. But it would be easy for the Adornment to include a “Button” that could bring up the color picker. Perhaps you should copy the selectionAdornmentTemplate that the node template uses in the State Chart sample and replace the button click behavior.
I have tried your suggestion with Part.selectionAdornmentTemplate but from what I can see there is no way to include HTML. Am I wrong? If it is possible, maybe in the future you could provide an example of how it’s done in the samples( just a suggestion :) ). As a person who just started with gojs I find this specific task kind of difficult.
If I use a button in the adornment as you suggested that will not constrain the colorpicker position to the node, I think.
I have thought about a canvas colorpicker instead of the HTML one that is provided in the examples. That way I think it would be easier to use it inside the adornment part and “lock” it to the node. Do you think it’s possible, and how could that be implemented(maybe an extension)?
Well, the button click event handler could position the color picker to be where you wanted it to be. If the color picker lost focus or the user picks a color, you would hide the color picker. FYI, the Data Visualization sample demonstrates having an HTML element follow the mouse.
The other reason for not having the color picker embedded in the selection adornment (whether implemented as HTML or not) is that when multiple nodes are selected you would not be showing multiple color pickers.