ReactJS Pen events

Question

I just want to get some basic events which works perfectly with the mouse, but has crazy results with my surface pencil. ReactJS does not support the pointer type so I thought of using the Mouse event type. The Move and the Down and Up wont be called anymore after some clicks with the pencil.

Not full code here:

onDownCanvasEvent(e){
    e.preventDefault();
    console.log("DOWN");
}

onUpCanvasEvent(e){
    e.preventDefault();
    console.log("UP");
}

onMoveCanvasEvent(e){
    e.preventDefault();
    console.log("Move");
}

onLeaveCanvasEvent(e){
    e.preventDefault();
    console.log("Leave");
}

onDragCanvasEvent(e){
    e.preventDefault();
    console.log("Drag");
}

onTouchCanvasEvent(e){
    e.preventDefault();
    console.log(e);
    console.log("TouchMove");
}

constructor(props){
    super(props);
}

render() {
    return (    <canvas 
                    onMouseMove={this.onMoveCanvasEvent.bind(this)} 
                    onMouseUp={this.onUpCanvasEvent.bind(this)} 
                    onMouseDown={this.onDownCanvasEvent.bind(this)} 
                    onMouseLeave={this.onLeaveCanvasEvent.bind(this)}
                    onDrag={this.onDragCanvasEvent.bind(this)}
                    onTouchMove={this.onTouchCanvasEvent.bind(this)}

Is this a known bug or does someone has a work around?

Thanks in advance! :)

Okay after fiddling around I found out that if I reload the pen and start pressing and move. The "Move" is called fine, but when I lift with an "UP" the "Move" of the pen wont be called again. — rufreakde, Aug 01 '17 at 13:50

score 2 · Answer 1 · answered Aug 01 '17 at 14:48

Okay I found a really easy solution for that problem just run this in your project:

npm install --save react-pointable

source: https://www.npmjs.com/package/react-pointable

<div className="App">
            <Pointable className="container"
                    onPointerUp={this.onUpPointer} 
                    onPointerDown={this.onDownPointer} 
                    onPointerLeave={this.onLeavePointer}
                    onPointerMove={this.onMovePointer}> 
                <canvas  id="CanvasID"

ReactJS Pen events

1 Answers1