onDblClick in react-konva not working

Question

I'm using react-konva to render canvas. I assign onDblClick for a Group, I also assign onClick, onDragEnd to this Group. In onDragEnd handler, I have an axios POST request to server. Whenever I double click the Group, the onDragEnd event is fired. Does anybody know what is the problem here ?

Here are my code

handleMoving(){

    var thisElement = this.refs[this.state.key];

    this.setState({
        x: thisElement.x(),
        y: thisElement.y(),
        width: thisElement.getWidth(),
        height: thisElement.getHeight()
    });

    this.focus();
}

handleDoubleClick(){
    console.log('dbclick');
    this.focus();
    const stage = this.refs[this.state.key+'_wrapper'].getParent().getParent().getParent();
    const pos = this.refs[this.state.key].getAbsolutePosition();
    document.getElementById('newText').addEventListener('keydown',this.handleTextChange);
    document.getElementById('newTextWrapper').style.position = "absolute";
    document.getElementById('newTextWrapper').style.left = pos.x+"px";
    document.getElementById('newTextWrapper').style.top = pos.y+20+"px";
    document.getElementById('newText').style.width = this.refs[this.state.key+'_wrapper'].getWidth()+"px";
    document.getElementById('newTextWrapper').style.display = 'block';

}

syncToServer(){
    axios.post('/api/element/text/update',{
        uid:this.state.uid,
        key:this.state.key,
        content:this.state.content,
        stage:{
            x:this.state.x + this.refs[this.state.key].getParent().x(),
            y:this.state.y + this.refs[this.state.key].getParent().y(),
            width:this.state.width,
            height:this.state.height,
            fontSize:this.state.fontSize
        }
    }).then(function(response){
        console.log(response.data);
    });
}

render(){
    return (
        <Layer>
            <Group  onDblClick = {this.handleDoubleClick}
                    onClick = {this.handleClick}
                    onDragMove = {this.handleMoving}
                    onDragEnd = {this.syncToServer}
                    draggable = "true">
                <Rect   ref = {this.state.key + '_wrapper'}
                        x = {this.state.x}
                        y = {this.state.y}
                        width = {this.state.width}
                        height = {this.state.height}
                        visible = {false}
                        fill = 'lightgrey'
                        cornerRadius = {3}> 
                </Rect>
                <Text   ref = {this.state.key} 
                        x = {this.state.x} 
                        y = {this.state.y} 
                        fontSize = {this.state.fontSize}
                        fontFamily = {this.state.fontFamily}
                        text = {this.state.content}
                        fill = {this.state.color}
                        padding = {20}
                        >
                </Text>
            </Group>
        </Layer>
    );
}

you need to provide code and links to the components in question. but it's not impossible as drag implementations and double clicks don't mix well.you may have to do an `onMouseDown` and kill the event if on a group. — Dimitar Christoff, Jul 25 '17 at 18:39
@DimitarChristoff I've tried remove onDrageEnd event, still the onDblClick event doesn't fire. — Phong Nhat, Jul 26 '17 at 03:31
@PhongNhat can you create small demo without ajax (it is not related here)? — lavrton, Jul 26 '17 at 12:10

score 2 · Answer 1 · answered Sep 26 '17 at 18:50

2

Try to use the node of the ref.

node.on('dblclick dbltap', () => {
  console.log('you clicked me!');
});

answered Sep 26 '17 at 18:50

Jeex Box

157
2
6

onDblClick in react-konva not working

1 Answers1