[feature][vx-brush] add Brush component

[geekplux]

Closes: #556

🚀 Enhancements

• add Brush component writing by typescript; fix [brush] add <BrushX /> and <BrushY /> components #14

Inspired and migrated from data-ui
Please check and review.

[geekplux]

Now the movement of BrushSelection in minimap is not smooth, I guess it is caused by the way update the main view here. I don't know if we change it to a new way e.g. using zoom or rescale might be better.

The code in docs would update once the demo code updated finally.

[williaster]

Thanks @geekplux for the migration/addition! I will take a look at the PR ASAP in the next day or two 🎉

[hshoff]

Woo! Thanks for the PR. Haven't had a chance to do an full review but a quick read through looks good.

Looks like this PR needs to update tests for vx-vx and vx-brush and that should make test CI happy. a few minor fixes for the lint check to pass as well. Not blockers as these are relatively minor things.

[williaster]

Did a quick pass, will try an get the @vx/drag re-write done so you can leverage the types.

[geekplux]

I saw the lint test is still failed, but there is no detail info to figure out which lines caused these errors.

[hshoff]

TypeError: Cannot set property 'hasAwait' of null
Occurred while linting ~/vx/packages/vx-responsive/test/ScaleSVG.test.tsx:12
     at Object.AwaitExpression (~/vx/node_modules/eslint/lib/rules/require-await.js:92:36)
     at ReturnStatement (~/vx/node_modules/@typescript-eslint/eslint-plugin/dist/rules/require-await.js:68:27)

https://github.com/hshoff/vx/blob/master/packages/vx-responsive/test/ScaleSVG.test.tsx

Can probably just disable the eslint rule for now:

  test('it should expose its ref via an innerRef prop', () => {
    // eslint-disable-next-line require-await
    return new Promise(done => {

[geekplux]

seems no --clean and --extensions in babel options which caused all checks failed
https://babeljs.io/docs/en/options

[williaster]

@geekplux thanks again for your work on this! I am going to try and wrap up the TS project over the next week and experiment with an alpha release which will include this. Will ping you when it's out! 🙌

[williaster]

Test coverage went down which is why the build is 🔴 . Going to merge and hope we can circle back on tests.

[geekplux]

No problem, feel free to contact me if any issues. Merry Christmas!

[williaster]

@geekplux playing with this locally I don't get the brush selection. I should have time to debug today but if you have thoughts lmk 👍

[williaster]

I think I figured it out. Will post a PR soon with a couple TS changes as well and tag you 👍

[geekplux]

Thanks a lot. It's LGTM on my local windows PC and I didn't test it on other machines. It might be a CSS error if only selection area is hidden. Anyway, sounds good the solution you have found.

[jskrt]

Is there any documentation on how to use this?