img-mapper/react-img-mapper

[Feature] Add onMouseDown/Up and onTouchStart/End events

Closed this issue · 10 comments

Having these events will improve the expandability of this module and allow more people to use this for more use cases.

Hello @kholy87

onMouseDown => will fire when the user clicks any button of the mouse.

onMouseUp => will fire when the user releases the left click of the mouse.

onTouchStart => will fire when the user starts to touch the element

onTouchEnd => will fire when the user releases touch from the element

is it required, can you tell me one of the functionalities of it?

I am simulating a physical controller where you will press and hold buttons. What I was doing with just react buttons was onmouse down and ontouchstart (so it works with touchscreens) i send a command saying the button is being pressed. and then on mouseup or touchend i send a message saying the button is no longer being pressed. I tried using onMouseDown but it didnt do anything like onClick does for me

okay got it, let me add those with the same props as onClick

onClick?: ((area: CustomArea, index: number, e: AreaEvent) => void) | null;

So I forked the repo and was looking at adding these (first time modifying a node module) how do would I get it to compile/build? I tried to reference it into my project and have my project run a build on the module however, I received the following error when trying to build it

error TS18003: No inputs were found in config file 'D:/GIT/myproject/node_modules/react-img-mapper/tsconfig.json'. Specified 'include' paths were '["/*.ts","/*.tsx"]' and 'exclude' paths were '["node_modules","dist"]'.

I am thinking to release it today but if you want to test and build this project you need to clone example-master branch and install the all dependency via your package manager and run the start script.

I am using yarn on it so, the steps will be

yarn

yarn start

Perfect, appreciate it so much!

I am thinking to pass only props on that listeners because it's not right to pass all functionalities of onClick into those listeners.

onMouseEnter?: ((area: CustomArea, index: number, e: AreaEvent) => void) | null;

These are the changes I started but I haven't tested one thing yet

master...kholy87:master

I have already done the same thing you have done but nice if you want you can send me the PR of your changes and I will accept it if all changes might be right.

Please upgrade your version to v1.1.5

Thanks