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;
}
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.