diff --git a/packages/explorable-explanations/src/components/branches.js b/packages/explorable-explanations/src/components/branches.js index dab0b7b9b..9fdcc4060 100644 --- a/packages/explorable-explanations/src/components/branches.js +++ b/packages/explorable-explanations/src/components/branches.js @@ -152,6 +152,10 @@ const drawAnimatedTimeline = (x, y, branches) => { const branchX = x + i * spacing; const branch = branches[i]; let endpoint; + if (app.cancelPromise) { + resolve(); + return; + } if (app.cancelPromise) { resolve(); diff --git a/packages/explorable-explanations/src/lib/utils.js b/packages/explorable-explanations/src/lib/utils.js index 0607e4e76..fc09b1452 100644 --- a/packages/explorable-explanations/src/lib/utils.js +++ b/packages/explorable-explanations/src/lib/utils.js @@ -320,52 +320,4 @@ utils.markVisitedValue = (index, value) => { }); }; -utils.setButtonsDisabilityState = () => { - const prevButton = document.getElementById('prevButton') ?? app.prevButton; - const nextButton = document.getElementById('nextButton') ?? app.nextButton; - // Exit early if buttons are not found - if (!prevButton || !nextButton) { - return; - } - - if (!app.isInteractiveMode) { - document.getElementById('prevButton').disabled = - app.timeline.currentIndex > 0 ? false : true; - - // Helper function to set button state - const setButtonState = (button, isDisabled) => { - button.disabled = isDisabled; - button.classList.toggle('disabled:pointer-events-none', isDisabled); - }; - - if (!isInteractiveMode) { - setButtonState(prevButton, currentIndex <= 0); - setButtonState(nextButton, currentIndex >= circles.length - 1); - } - - // Additional state when the currentIndex exceeds the total circles - if (currentIndex >= circles.length) { - setButtonState(prevButton, true); - setButtonState(nextButton, true); - } - } - // eslint-disable-next-line no-undef - if (process.env.IS_RUNNING_STANDALONE) { - utils.disableButtons(); - } -}; -// This is only called in the standalone canvas. -utils.disableButtons = () => { - app.prevButton.style.cursor = - app.timeline.currentIndex > 0 ? 'pointer' : 'default'; - app.prevButton.disabled = app.timeline.currentIndex > 0 ? false : true; - app.nextButton.disabled = - app.timeline.currentIndex === config.timeline.circles.length - 1 - ? true - : false; - app.nextButton.style.cursor = - app.timeline.currentIndex >= config.timeline.circles.length - 1 - ? 'default' - : 'pointer'; -}; export default utils; diff --git a/packages/explorable-explanations/src/modules/auctions.js b/packages/explorable-explanations/src/modules/auctions.js index ca055a8a1..9ebf952f8 100644 --- a/packages/explorable-explanations/src/modules/auctions.js +++ b/packages/explorable-explanations/src/modules/auctions.js @@ -270,12 +270,6 @@ auction.setUp = (index) => { { title: 'DSP 2', }, - { - title: 'DSP 1', - }, - { - title: 'DSP 2', - }, { title: 'Key/Value Trusted', description: 'SSP Server', @@ -470,16 +464,13 @@ auction.draw = (index) => { if (props?.showBarrageAnimation) { await bubbles.barrageAnimation(index); // eslint-disable-line no-await-in-loop - const returnValue = await component(props); // eslint-disable-line no-await-in-loop + if (app.cancelPromise) { + return; + } - const delay = component === Box ? 1000 : 0; + await utils.delay(500); // eslint-disable-line no-await-in-loop - if (props?.showBarrageAnimation) { - if ( - app.isInteractiveMode && - config.timeline.circles[index].visited === true - ) { - return; + utils.wipeAndRecreateInterestCanvas(); // eslint-disable-line no-await-in-loop } if (props?.showRippleEffect) { diff --git a/packages/explorable-explanations/src/modules/bubbles.js b/packages/explorable-explanations/src/modules/bubbles.js index 76f8f151c..8dc2f7f71 100644 --- a/packages/explorable-explanations/src/modules/bubbles.js +++ b/packages/explorable-explanations/src/modules/bubbles.js @@ -490,10 +490,6 @@ bubbles.bubbleChart = ( .attr('stroke-opacity', strokeOpacity) .attr('class', 'svg overflowing-text circle-svg') .attr('style', `${!app.bubbles.isExpanded ? 'pointer-events: none;' : ''}`) - .attr( - 'style', - `${!config.bubbles.isExpanded ? 'pointer-events: none;' : ''}` - ) .attr( 'fill', groups diff --git a/packages/explorable-explanations/src/modules/timeline.js b/packages/explorable-explanations/src/modules/timeline.js index dea248cdb..6f0b99667 100644 --- a/packages/explorable-explanations/src/modules/timeline.js +++ b/packages/explorable-explanations/src/modules/timeline.js @@ -85,10 +85,27 @@ timeline.init = () => { } }); + expandIconPositions.forEach((positions) => { + if ( + utils.isInsideCircle( + app.mouseX, + app.mouseY, + positions.x + config.timeline.circleProps.diameter / 2, + positions.y, + 20 + ) + ) { + app.isRevisitingNodeInInteractiveMode = true; + clickedIndex = positions.index; + } + }); + if ( clickedIndex !== undefined && - !config.timeline.circles[clickedIndex].visited + !app.isRevisitingNodeInInteractiveMode ) { + PromiseQueue.clear(); + flow.clearBelowTimelineCircles(); app.shouldRespondToClick = false; app.timeline.currentIndex = clickedIndex; utils.wipeAndRecreateUserCanvas(); diff --git a/packages/explorable-explanations/src/protectedAudience.js b/packages/explorable-explanations/src/protectedAudience.js index 83e5768ef..0ced98339 100644 --- a/packages/explorable-explanations/src/protectedAudience.js +++ b/packages/explorable-explanations/src/protectedAudience.js @@ -32,37 +32,6 @@ import bubbles from './modules/bubbles.js'; import app from './app.js'; import PromiseQueue from './lib/PromiseQueue.js'; -const app = { - timeline: { - isPaused: false, - circlePositions: [], - smallCirclePositions: [], - circlePublisherIndices: [], - currentIndex: 0, - }, - auction: { - auctions: [], - nextTipCoordinates: { x: 0, y: 0 }, - }, - joinInterestGroup: { - joinings: [], - nextTipCoordinates: { x: 0, y: 0 }, - }, - flow: { - intervals: {}, - }, - bubbles: { - positions: [], - minifiedSVG: null, - expandedSVG: null, - }, - utils: {}, - p: null, - igp: null, - up: null, - isMultiSeller: false, -}; - app.setUpTimeLine = () => { app.auction.auctions = []; app.joinInterestGroup.joinings = []; @@ -328,10 +297,6 @@ app.handleNonInteravtiveNext = () => { return; } - if (app.timeline.currentIndex > config.timeline.circles.length - 1) { - return; - } - app.timeline.isPaused = true; app.cancelPromise = true; app.timeline.currentIndex += 1; @@ -458,7 +423,7 @@ app.handleControls = () => { }; app.toggleInteractiveMode = async () => { - PromiseQueue.stop(); + PromiseQueue.clear(); app.cancelPromise = true; app.timeline.isPaused = true; @@ -471,11 +436,6 @@ app.toggleInteractiveMode = async () => { app.shouldRespondToClick = true; app.startTrackingMouse = true; - if (!config.isInteractiveMode) { - config.shouldRespondToClick = true; - config.startTrackingMouse = true; - } - utils.markVisitedValue(config.timeline.circles.length, false); timeline.eraseAndRedraw(); await utils.delay(100);