Cards in Scrollbox not getting click events

[gischer]

I have an app with a bunch of sprites representing cards, in a horizontally scrolling tray representing a hand. I have implemented the tray using Scrollbox. In spite of my setting `stopPropagation' to false, the "click" events aren't getting through to the cards, though the Scrollbox is seeing them. If I change from Scrollbox to Viewport (and add the sprites directly to cardScroller rather than to cardScroller.content) they do get through.

I'm at a loss. This was working, and has just recently stopped working, and there's no obvious change I've made that seems related. I've updated to the latest Scrollbox with no effect.

Here's my code. It's long, but I don't know what is relevant. Definitely looking over my shoulder on this one.

export function createCardScroller(player, resources) {
  const cardScroller = new Scrollbox({
    boxWidth: resources.cardScroller.width,
    boxHeight: resources.cardScroller.height,
    stopPropagation: false,
    dragScroll: true,
    overflowY: 'hidden',
    fade: true,
  });

  function fetchCard(cardId) {
    return Cards.findOne(cardId);
  };
  const hand = R.map(fetchCard, player.combatant.hand);

  function isInUse(card) {
    return (player.playedCard.get() && card._id === player.playedCard.get()._id)
          || (player.enhanceCard.get() && card._id === player.enhanceCard.get()._id);
  }
  var currentHand = R.reject(isInUse, hand);

  function createCS(card) {
    const cardSprite = createCardSprite(player, card, resources);
    return cardSprite;
  }

  const cardSprites = R.map(createCS, currentHand);

  const desiredHeight = resources.cardScroller.height;
  function setScale(sprite) {
    const scale = desiredHeight / sprite.height;
    sprite.scale.x = sprite.scale.y = scale;
    return sprite;
  }
  R.map(setScale, cardSprites);

  const cardStride = cardSprites.length > 0 ? cardSprites[0].width*1.1 : 50;

  function setPositionAndAdd(accum, cardSprite) {
    cardSprite.position.set(accum, 0);
    //cardScroller.addChild(cardSprite);
    cardScroller.content.addChild(cardSprite);
    return accum + cardStride;
  }
  R.reduce(setPositionAndAdd, 0, cardSprites);

  cardScroller.update();
  cardScroller.on('click', function(e) {console.log('clicked cardScroller'); console.log(e)});
  return cardScroller;
}

[davidfig]

That is weird. I checked the scrollbox code and stopPropagation does follow the option. Hmm...can you set up a quick jsfiddle to show this issue is broken so I can debug it?

[gischer]

I'm relieved that you think it's weird. I looked at the scrollbox code myself and it all seemed good. And yet it doesn't work. I will work on setting up the simplest failing example I can, but I won't be able to get to it for a day or two.

…

------ Original Message ------ From: "David Figatner" ***@***.***> To: "davidfig/pixi-scrollbox" ***@***.***> Cc: "gischer" ***@***.***>; "Author" ***@***.***> Sent: 6/13/2021 2:50:35 PM Subject: Re: [davidfig/pixi-scrollbox] Cards in Scrollbox not getting click events (#40)

That is weird. I checked the scrollbox code and stopPropagation does follow the option. Hmm...can you set up a quick jsfiddle to show this issue is broken so I can debug it? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#40 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAM6NXG7S56Z7ZYBISL7L4LTSUR2XANCNFSM46RRMZHA>.

[gischer]

Can you tell me, or point to an example, how to import pixi-scrollbox into jsfiddle? I'm getting "TypeError: PIXI.Scrollbox is not a constructor" errors, even though I've linked the cdn. I'm a complete noob as regards jsfiddle. My stuff is normally embedded in Meteor/Node.

[gischer]

Well, I have a jsfiddle going at https://jsfiddle.net/gischer/5cjzksur/88/ It doesn't work because it gives the error "Scrollbox is not a construtor" I've put the cdn into jsfiddle, but it doesn't seem to help.

[slyduda]

having this issue as well. i'll put together a jsfiddle for you tomorrow, as the one provided above did not work for me at all.

[slyduda]

https://jsfiddle.net/slyduda/p3Ljc0ht/173/

I also had trouble importing Scrollbox as a CDN so I attached the whole script in there. My code is at the bottom. The demo should demonstrate two things:

• When you mouse leaves (mouseout) an object immediately outside of the scrollbox the event is not triggered. Put the mouse on the red square and then position the pointer up in the Black Applicatino
• When you mouseout of an object while the mouse is still inside the scrollbox the event IS triggered. Put the mouse on the red square and then position the pointer down in the gray scrollbox.

My issue is actually worse because in this demo it appears that upon reentry of the scrollbox, the mouse event will fire, but for some reason mine doesn't and I have to reenter the object with the event itself. That's okay though because the main issue is the blocking of the event outside of the scrollbox.

I know its not a click event but I thought this thread may be relevant.