diff --git a/packages/builder/src/components/portal/onboarding/TourPopover.svelte b/packages/builder/src/components/portal/onboarding/TourPopover.svelte index 37ed0c6350..68e2e68a49 100644 --- a/packages/builder/src/components/portal/onboarding/TourPopover.svelte +++ b/packages/builder/src/components/portal/onboarding/TourPopover.svelte @@ -15,20 +15,12 @@ $: tourKey = $store.tourKey $: tourStepKey = $store.tourStepKey - const initTour = targetKey => { - if (!targetKey) { + const updateTourStep = (targetStepKey, tourKey) => { + if (!tourKey) { return } - tourSteps = [...TOURS[targetKey]] - tourStepIdx = 0 - tourStep = { ...tourSteps[tourStepIdx] } - } - - $: initTour(tourKey) - - const updateTourStep = targetStepKey => { if (!tourSteps?.length) { - return + tourSteps = [...TOURS[tourKey]] } tourStepIdx = getCurrentStepIdx(tourSteps, targetStepKey) lastStep = tourStepIdx + 1 == tourSteps.length @@ -36,7 +28,7 @@ tourStep.onLoad() } - $: updateTourStep(tourStepKey) + $: updateTourStep(tourStepKey, tourKey) const showPopover = (tourStep, tourNodes, popover) => { if (!tourStep) { diff --git a/packages/builder/src/components/portal/onboarding/TourWrap.svelte b/packages/builder/src/components/portal/onboarding/TourWrap.svelte index 2fff8507c5..fd47d7b48e 100644 --- a/packages/builder/src/components/portal/onboarding/TourWrap.svelte +++ b/packages/builder/src/components/portal/onboarding/TourWrap.svelte @@ -8,20 +8,28 @@ let currentTourStep let ready = false + let registered = false let handler + const registerTourNode = (tourKey, stepKey) => { + if (ready && !registered && tourKey) { + currentTourStep = TOURS[tourKey].find(step => step.id === stepKey) + if (!currentTourStep) { + return + } + const elem = document.querySelector(currentTourStep.query) + handler = tourHandler(elem, stepKey) + registered = true + } + } + + $: tourKeyWatch = $store.tourKey + $: registerTourNode(tourKeyWatch, tourStepKey, ready) + onMount(() => { - if (!$store.tourKey) return - - currentTourStep = TOURS[$store.tourKey].find( - step => step.id === tourStepKey - ) - if (!currentTourStep) return - - const elem = document.querySelector(currentTourStep.query) - handler = tourHandler(elem, tourStepKey) ready = true }) + onDestroy(() => { if (handler) { handler.destroy()