From dc80a1e691eb49a5168ca8775aed57a34ac00590 Mon Sep 17 00:00:00 2001 From: Jose Buitron Date: Mon, 23 Sep 2024 11:28:42 -0500 Subject: [PATCH 1/3] fix: Filter layers that used on the current transition --- src/storyMap/components/StoryMap.js | 34 +++++++++++++++++++---------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/src/storyMap/components/StoryMap.js b/src/storyMap/components/StoryMap.js index ee8521f8a..9e9c323ab 100644 --- a/src/storyMap/components/StoryMap.js +++ b/src/storyMap/components/StoryMap.js @@ -201,7 +201,7 @@ const Title = props => { ); }; -const getTransition = (config, id) => { +const getTransition = ({ config, id, direction }) => { const isTitle = id === 'story-map-title'; if (isTitle) { return { @@ -211,8 +211,13 @@ const getTransition = (config, id) => { } const chapterIndex = config.chapters.findIndex(chapter => chapter.id === id); const chapter = config.chapters[chapterIndex]; + const next = + direction === 'up' + ? _.get(`chapters[${chapterIndex - 1}]`, config) + : _.get(`chapters[${chapterIndex + 1}]`, config); return { transition: chapter, + nextTransition: next, index: chapterIndex, }; }; @@ -427,14 +432,14 @@ const Scroller = props => { offset: 0.5, }) .onStepEnter(async response => { - const { index, transition } = getTransition( - { + const { index, transition } = getTransition({ + config: { titleTransition: config.titleTransition, chapters: config.chapters, }, - response.element.id - ); - + id: response.element.id, + direction: response.direction, + }); response.element.classList.add('active'); startTransition(transition); onStepChange?.(response.element.id); @@ -451,16 +456,23 @@ const Scroller = props => { } }) .onStepExit(response => { - const { transition } = getTransition( - { + const { transition, nextTransition } = getTransition({ + config: { titleTransition: config.titleTransition, chapters: config.chapters, }, - response.element.id - ); + id: response.element.id, + direction: response.direction, + }); response.element.classList.remove('active'); if (transition?.onChapterExit && transition.onChapterExit.length > 0) { - transition.onChapterExit.forEach(setLayerOpacity); + const onEnterLayers = nextTransition?.onChapterEnter?.map( + _.get('layer') + ); + const filtered = transition.onChapterExit.filter( + transition => !_.includes(transition.layer, onEnterLayers) + ); + filtered.forEach(setLayerOpacity); } }); From 45cfaaf3e217b6f24b401a64e71362019898d9ec Mon Sep 17 00:00:00 2001 From: Jose Buitron Date: Tue, 24 Sep 2024 15:22:43 -0500 Subject: [PATCH 2/3] test: Added test --- src/storyMap/components/StoryMapForm.test.js | 135 +++++++++++++++++++ 1 file changed, 135 insertions(+) diff --git a/src/storyMap/components/StoryMapForm.test.js b/src/storyMap/components/StoryMapForm.test.js index 72b3e49b4..a173b936a 100644 --- a/src/storyMap/components/StoryMapForm.test.js +++ b/src/storyMap/components/StoryMapForm.test.js @@ -182,6 +182,20 @@ const BASE_CONFIG = { title: 'Chapter 1', description: 'Chapter 1 description', media: { type: 'image/png', signedUrl: 'https://test.com/image.png' }, + onChapterEnter: [ + { + layer: 'layer1', + opacity: 1, + duration: 0, + }, + ], + onChapterExit: [ + { + layer: 'layer1', + opacity: 0, + duration: 0, + }, + ], }, { id: 'chapter-2', @@ -191,11 +205,41 @@ const BASE_CONFIG = { center: { lng: -79.89928261750599, lat: -2.423124847733348 }, zoom: 5, }, + dataLayerConfigId: 'ac0853a2-99e4-4794-93ca-aafc89f361b6', + onChapterEnter: [ + { + layer: 'layer1', + opacity: 1, + duration: 0, + }, + ], + onChapterExit: [ + { + layer: 'layer1', + opacity: 0, + duration: 0, + }, + ], }, { id: 'chapter-3', title: 'Chapter 3', description: 'Chapter 3 description', + dataLayerConfigId: 'ac0853a2-99e4-4794-93ca-aafc89f361b6', + onChapterEnter: [ + { + layer: 'layer1', + opacity: 1, + duration: 0, + }, + ], + onChapterExit: [ + { + layer: 'layer1', + opacity: 0, + duration: 0, + }, + ], }, ], }; @@ -1189,3 +1233,94 @@ test('StoryMapForm: Delete chapter', async () => { }) ); }); + +test('StoryMapForm: Keep map on chapter change', async () => { + const map = { + ...baseMapOptions(), + getCenter: () => ({ lng: -99.91122777353772, lat: 21.64458705609789 }), + getStyle: () => 'has style', + getLayer: () => ({ type: 'fill' }), + setLayoutProperty: jest.fn(), + setPaintProperty: jest.fn(), + }; + mapboxgl.Map.mockReturnValue(map); + const scroller = { + setup: function () { + return this; + }, + onStepEnter: function (cb) { + this.stepEnter = cb; + return this; + }, + onStepExit: function (cb) { + this.stepExit = cb; + return this; + }, + resize: jest.fn(), + destroy: jest.fn(), + }; + scrollama.mockImplementation(() => scroller); + + await setup(BASE_CONFIG); + + await waitFor(() => expect(scrollama).toHaveBeenCalled()); + + // Go to chapter 1 + await act(async () => + scroller.stepEnter({ + element: document.querySelector('#chapter-1'), + }) + ); + + // Go to chapter 2 + await act(async () => + scroller.stepEnter({ + element: document.querySelector('#chapter-2'), + direction: 'down', + }) + ); + await act(async () => + scroller.stepExit({ + element: document.querySelector('#chapter-1'), + direction: 'down', + }) + ); + await expect(map.setPaintProperty).toHaveBeenCalledWith( + 'layer1', + 'fill-opacity', + 1, + {} + ); + await expect(map.setPaintProperty).not.toHaveBeenCalledWith( + 'layer1', + 'fill-opacity', + 0, + {} + ); + + // Go to chapter 1 + await act(async () => + scroller.stepEnter({ + element: document.querySelector('#chapter-1'), + direction: 'up', + }) + ); + await act(async () => + scroller.stepExit({ + element: document.querySelector('#chapter-2'), + direction: 'up', + }) + ); + await expect(map.setPaintProperty).toHaveBeenCalledWith( + 'layer1', + 'fill-opacity', + 1, + {} + ); + await expect(map.setPaintProperty).not.toHaveBeenCalledWith( + 'layer1', + 'fill-opacity', + 0, + {} + ); +}); From 019d6c1cff226914b6b12a7b58d4f2d2148479fe Mon Sep 17 00:00:00 2001 From: Jose Buitron Date: Thu, 26 Sep 2024 11:20:41 -0500 Subject: [PATCH 3/3] fix: Check if next is title --- src/storyMap/components/StoryMap.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/storyMap/components/StoryMap.js b/src/storyMap/components/StoryMap.js index 9e9c323ab..bc5224375 100644 --- a/src/storyMap/components/StoryMap.js +++ b/src/storyMap/components/StoryMap.js @@ -207,14 +207,16 @@ const getTransition = ({ config, id, direction }) => { return { transition: config.titleTransition, index: -1, + nextTransition: _.get('chapters[0]', config), }; } const chapterIndex = config.chapters.findIndex(chapter => chapter.id === id); const chapter = config.chapters[chapterIndex]; - const next = - direction === 'up' - ? _.get(`chapters[${chapterIndex - 1}]`, config) - : _.get(`chapters[${chapterIndex + 1}]`, config); + const nextIndex = direction === 'up' ? chapterIndex - 1 : chapterIndex + 1; + const nextIsTitle = nextIndex === -1; + const next = nextIsTitle + ? config.titleTransition + : _.get(`chapters[${nextIndex}]`, config); return { transition: chapter, nextTransition: next,