feat: Add Mask from ID Node + ColorField Component Improvements

[blessedcoolant]

Summary

Adds a Mask from ID node that lets you drop in an ID Mask to the node and create a mask based on the color you pick from the ID Map.

The color is currently set to color field (but we need to add an Color Picker) to make it easier to pick the color or can just replace it with hex. Either way works. There's support for both.

opera_PE2C5D4DkC.mp4

Updated ColorField Component

• Now also displays the hex code for the color value.
• Fixed up the UI for the Color Picker in the Nodes not filling up the entire space.

opera_gG6TeanBQO.mp4

Merge Plan

Can't think of anything to not merge it.

[psychedelicious]

@blessedcoolant Did you see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color that skunkworx found? It has a dropper!

[blessedcoolant]

@blessedcoolant Did you see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color that skunkworx found? It has a dropper!

Yep. Doesn't work. Even the example in the docs doesn't work for the eye dropper. At least not on Chrome. And the API is non-existent on Firefox.

[psychedelicious]

That's unfortunate. On macOS:

• Chrome uses a custom picker with dropper.
• FF uses the OS-provided picker, which also has a dropper.

[blessedcoolant]

That's unfortunate. On macOS:

• Chrome uses a custom picker with dropper.
• FF uses the OS-provided picker, which also has a dropper.

Actually it works. Sorry, there was no feedback from the click so I thought it wasn't working. But clicking outside actually picks a color. However this is only on Chromium browsers on my end.

On Windows, Firefox uses this: