Markers event return null for event.square

[djeetee]

Hey shaack,

Setup: 1) any position like below. Create a bunch of arrows from say h7-h6, g7-g6, etc. all good. 2) redraw the arrows (the idea is to remove the arrow when it is redrawn). for some random reason either the mousedown or mouseup event return null for event.square. 3) on mousedown i save the square and then check its value on mouseup to make a match and then remove the arrow. This gets messed up when I get a null :(

It doesn't happen in any specific order or patter.

Any reason why enableSquareSelect event would return null for the square?

Thank you,

[shaack]

Sometimes this happened to me, when I did not set the pointer-events: none css property to elements above the squares.

Does it help to

.arrows {
    pointer-events: none;
}

[djeetee]

Hi Stefan, that css one-liner seems to have fixed it. So far I have not been able to reproduce. I'm keeping my logging in the code for the next few days to see if pops up again.

That was excellent my friend.

cm-chessboard rocks!

thank you.

[djeetee]

Hi Stefan,

the code is very simple and it’s not related to how I assign the event.

.square is randomly returned as null even before doing anything. My event handler is this:

  markersHandler(event) {     if (event.type === SQUARE_SELECT_TYPE.primary) {       return // no interested in left clicks     }

    if (!event.square) {       // FIXME: this is a hack. sometimes the event.square is undefined       // this was fixed by adding: .arrows { pointer-events: none; } to the css       console.log('no square. event is ', event)       return     }

    const { pendingMarker } = storeToRefs(useBoardStore()) // holds the starting square of the pending marker

    const boardId = event.chessboard.id

    switch (event.mouseEvent.type) {       case 'mousedown':         pendingMarker.value.square = event.square

        // set the default marker and arrow types         pendingMarker.value.markerType = APP_MARKER_TYPE.primary // default color         pendingMarker.value.arrowType = APP_ARROW_TYPE.primary // default type/color

        // adjust based on the modifier keys         if (event.mouseEvent.ctrlKey) {           // ctrl + right-click           pendingMarker.value.markerType = APP_MARKER_TYPE.secondary           pendingMarker.value.arrowType = APP_ARROW_TYPE.secondary         } else if (event.mouseEvent.altKey) {           // alt + right-click           pendingMarker.value.markerType = APP_MARKER_TYPE.tertiary           pendingMarker.value.arrowType = APP_ARROW_TYPE.tertiary         }

        break

      case 'mouseup':         if (pendingMarker.value.square === event.square) {           this.addMarkerToCurrentMove(             boardId,             pendingMarker.value.markerType,             event.square           )         } else {           this.addArrowToCurrentMove(             boardId,             pendingMarker.value.arrowType,             pendingMarker.value.square, // from square             event.square // to square           )         }

        // either way, reset the pending marker         pendingMarker.value = {}

        break     }   }

-George On May 7, 2023 at 5:32 AM -0400, Stefan Haack @.***>, wrote:

How to you assign the event listener? Can you provide an online example-page? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

[shaack]

I made so many changes to the cm-chessboard in the last days. Did you try out the current version 7.6.4? I also changed the handling of drawings from extensions. I think you also should update the css "chessboard.css" to the newest version.

[djeetee]

I'm on version 7.3.7 and you're already on 7.6.5 :)

I will update (hopefully nothing breaks!). Thank you.

[shaack]

Yes, wish you the best :) . I frequently update the cm-chessboard, when I need new features for my own chess-server. If something breaks, like in "cm-pgn" I will help.