It would be useful to be able to style squares with custom classes dynamically with the .set() method. The motivation is to be able to do programmatic custom highlighting, but you could also do whatever else css allows like add a border. There is an api for custom drawing, but there isn't a way to do custom highlighting unless I'm missing something.
Proposed solution
Add a new optional property to the state state.highlight.custom which takes the SquareClasses = Map<Key, string> type. When this is set, computeSquareClasses will add a square to the board with the desired class for every square-class pair in the set. For multiple classes just pass a space delimited string like normal html. Below is an example of what it looks like after cg.set({highlight: {custom: new Map([["a1", "red"]])}}) and the class .red {background-color: red; border: 10px solid black'}. !important can be passed to override the selected or other styling:
Having this under highlight makes sense practically, but I can see if it is wanted to be put elsewhere since it does something more general than highlighting a square.
niklasf
commented
1 year ago
Problem
It would be useful to be able to style squares with custom classes dynamically with the
.set()method. The motivation is to be able to do programmatic custom highlighting, but you could also do whatever else css allows like add a border. There is an api for custom drawing, but there isn't a way to do custom highlighting unless I'm missing something.Proposed solution
Add a new optional property to the state
state.highlight.customwhich takes theSquareClasses = Map<Key, string>type. When this is set,computeSquareClasseswill add a square to the board with the desired class for every square-class pair in the set. For multiple classes just pass a space delimited string like normal html. Below is an example of what it looks like aftercg.set({highlight: {custom: new Map([["a1", "red"]])}})and the class.red {background-color: red; border: 10px solid black'}.!importantcan be passed to override theselectedor other styling:Having this under
highlightmakes sense practically, but I can see if it is wanted to be put elsewhere since it does something more general than highlighting a square.