shaack / cm-chessboard

A JavaScript chessboard without dependencies. Rendered in SVG, coded in ES6. Views FEN, handles move input, animated, responsive, expandable
MIT License
216 stars 68 forks source link

Feature request "flush queue" #89

Closed tbazelczuk closed 1 year ago

tbazelczuk commented 2 years ago

Hi,

I've found two bugs. Please see below description.

TypeError: Cannot read properties of null (reading 'parentNode')

PositionAnimationsQueue.js:145

case CHANGE_TYPE.move:
                    animatedItem.element = this.view.getPieceElement(Position.indexToSquare(change.atIndex))
                    animatedItem.element.parentNode.appendChild(animatedItem.element) // move element to top layer
                    animatedItem.atPoint = this.view.indexToPoint(change.atIndex)
                    animatedItem.toPoint = this.view.indexToPoint(change.toIndex)
                    break

... and sometimes removeElement has null element

static removeElement(element) {
    if (element.parentNode) {
      element.parentNode.removeChild(element)
    } else {
      console.warn(element, "without parentNode")
    }
  }
shaack commented 2 years ago

Under what circumstances does this occur?

tbazelczuk commented 2 years ago

It happens when you change position frequently with function setPosition

shaack commented 2 years ago

Unfortunately, I can't reproduce this without an example page where the error occurs.

tbazelczuk commented 2 years ago

It happens when you change position during animation.

tbazelczuk commented 2 years ago

I would be nice to setPosition without animation and queue, just reset the board with some initial fen

shaack commented 2 years ago

I can not help you, without an example page. This error does not exist in the demo page or any of my usages.

tbazelczuk commented 2 years ago

Hi, unfortunately I can't reproduce it. I suspect react setState overhead and async events may cause it.

I prepared example how animation queue works when you mouse over on buttons. When you mouse over very quickly and many time the animation is queued. It would be nice to have reset method and cancel queued animations. https://github.com/tbazelczuk/cm-chessboard/blob/example/examples/preview.html

shaack commented 2 years ago

If you can't reproduce it without react, then the failure seems to be in react. I can not give support for react because I don't use it. 🤷‍♂️ The animation queue is a core feature of cm-chessboard, it makes no sense to animate the figures without the queue. However you can switch off animations with a parameter of "setPosition".

tbazelczuk commented 2 years ago

Sure, but resetting the board without any delay would solve the issue. Even if you turn off animation with setPosition cause the problem with stacking animation because all transitions are still in the queue.

shaack commented 2 years ago

In that case this is a feature quest for a "flush queue" feature?

tbazelczuk commented 2 years ago

Right, I think that would solve the issue.

Many thanks :)

shaack commented 1 year ago

Does anyone needs this anymore?

tbazelczuk commented 1 year ago

yes :)

shaack commented 1 year ago

Do you need more a "flush queue", "reset queue" or "stop queue" feature? Is the state of the pieces important after resetting?

shaack commented 1 year ago

Does chessboard.positionAnimationsQueue.stop = true works?