SVG borders: Respond to dynamic changes in selection border col…

[warpech]

Context

This PR is a response to the comment #6467 (comment). It the selection borders, selection corner (desktop) and selection handles (mobile) to respond to the dynamic changes of width and color setting.

For example, use the below code in Handsontable to set border of the currently selected cell to be "1px green":

hot.selection.highlight.cell.settings.border.width = 1;
hot.selection.highlight.cell.settings.border.color = 'green';
hot.render();

Default selection settings:

hot.selection.highlight.cell.settings.border.width = 2;
hot.selection.highlight.cell.settings.border.color = '#4b89ff';
hot.selection.highlight.fill.settings.border.width = 1;
hot.selection.highlight.fill.settings.border.color = '#ff0000';
hot.selection.highlight.areas.forEach((selection) => {
  selection.settings.border.width = 1;
  selection.settings.border.color = '#4b89ff';
});
hot.render();

☢️ However, there is one serious pitfall: selection.highlight.areas objects are instantiated only after they are used for the first time. So you can only set them after the end user made an area selection (multiple area selections) for the first time.

How has this been tested?

I added an automated test for desktop and mobile.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature or improvement (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Additional language file or change to the existing one (translations)

Related issue(s):

1. Rewrite custom borders to use SVGs insead of DIVs #6467 (comment)
2. Allow to change styling for selected areas by introducing currentSelectionClassName  #6538
3. Changing rectangle cursor color for different cells #2487

Checklist:

• My code follows the code style of this project,
• My change requires a change to the documentation.

[aninde]

I didn't find regression and other bugs, but I had a problem reproducing a new feature. With the help of @warpech I was able to write it in the function and only in this way it worked in my environment. I need to debug those to make a demo. Right now I can show on gif working of selection.highlight.areas

function changeSelection() {
        hot.selection.highlight.cell.settings.border.width = 2;
        hot.selection.highlight.cell.settings.border.color = 'red';
        hot.selection.highlight.fill.settings.border.width = 2;
        hot.selection.highlight.fill.settings.border.color = 'pink';

        hot.selection.highlight.cell.settings.border.cornerVisible = false; //example from #6538
        hot.selection.highlight.cell.settings.border.lineStyle = true; //example from #6538

        hot.selection.highlight.areas.forEach((selection) => {
            selection.settings.border.width = 2;
            selection.settings.border.color = 'green';
        });
        hot.render()
    }
    window.changeSelection = changeSelection;
    window.hot = hot;

You can change style of selection.areas only for number if instances that were created. On the gif, changed style have only two instances, the thirt one has default style.

[aninde]

New issue explaining a problem discovered in this PR: #6627 (colors order on fixed borders)

[aninde]

New issue explaining a problem discovered in this PR: #6628 (selection, fill and autoFill covers fixedBorder or frozen-border)

[warpech]

As discussed on the today's status meeting, I will merge this PR without review to the "master" PR #6157, because having a single source-of-truth PR is easier both for code reviewer and the tester.