Good Day,
I'm trying to control a mouseleave event. The goal is to continue the stroke of the <Drawing> element when it hits a <Label> and stop the stroke when it goes outside the <Stage>. The mouseLeaveHandler() on <Drawing> stops the stroke when a mouseleave event is fired via setState(). The problem is the mouseleave event is also fired when the stroke goes through the <Label> which causes it to stop.
I have tried logging the event objects and the event.currentTarget attribute seems to give me the info I need to differentiate a mouseleave from a <Label> Konva.Image and a mouseleave from the <Stage>Konva.Stage. However, since the property currentTarget is read-only I can't use it programmatically. The target property is no use since it would show up as the same class Konva.Image.
My question would be, How can I differentiate a konva <Label> from a <Stage> via the event object? Can I add additional attributes to the event target to make one different from the other?
What I have so far:
...
<Stage>
<Layer>
<Image />
</Layer>
<Layer onMouseMove={(e) => this.onMouseLayerMoveHandler(e)} onMouseEnter={this.onMouseLayerEnterHandler}>
{/* This is where the Drawing happens */}
<Drawing
mode={this.state.isErasing ? 'eraser' : 'brush'}
brushSize={this.state.brushSize}
canvasHeight={this.state.canvasHeight}
canvasWidth={this.state.canvasWidth}
brushColor={this.state.brushColor}
hasDrawnHandler={(status) => this.hasDrawnHandler(status)}
/>
{/* This is where the Label Starts */}
{this.state.isEditing ? portal : null}
{this.state.commentsArray.map(comment => {
let commentValue = comment.value;
let commentValueArray = commentValue.split(" ");
let formattedComment = "";
for (var i = 0; i < commentValueArray.length; i++) {
if (i > 0) {
if (i % 10 === 0 && i < commentValueArray.length) {
formattedComment += '\n';
}
}
formattedComment += " " + (commentValueArray[i] ? commentValueArray[i] : "");
}
return (
<Label
key={comment.uuid}
draggable={true}
x={comment.x}
y={comment.y}
width={comment.value.length}
onDragStart={this.onDragStartHandler}
onDragEnd={(e) => { this.onDragEndHandler(e, comment) }}
onMouseEnter={this.onMouseLabelEnterHandler}
onMouseLeave={this.onMouseLabelLeaveHandler}
>
<Tag />
<Text />
</Label>
)
})}
</Layer>
</Stage>
...
Drawing.js
mouseLeaveHandler = (e) => {
console.log(e);
this.setState({ isDrawing: false });
}
The first event is when the stroke hits the <Label>. Second Is when it leaves the <Stage>. As you can see currentTarget have more useful info than the target property
Any help is appreciated. Thanks!
