Fix/step order

example/html-tooltip/index.html

@@ -70,8 +70,22 @@ <h4>Section Six</h4>
     </div>
     <script type="text/javascript" src="../../dist/intro.js"></script>
     <script type="text/javascript">
+      function onBeforeChange () {
+  const currentStep = this.getCurrentStep();
+
+  // اگر رسیدیم به استپ سوم (index = 2)
+  if (currentStep >= 2) {
+    return Promise.resolve(false); // نرو به استپ بعد
+  }
+
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(true), 5000);
+  });
+}
       function startIntro(){
         var intro = introJs.tour();
+        intro.onBeforeChange(onBeforeChange)
+
           intro.setOptions({
             hideNext: true,
             language: 'de_DE',

src/packages/tour/steps.ts

@@ -35,40 +35,17 @@ export type TourStep = {
  * @api private
  */
 export async function nextStep(tour: Tour) {
-  tour.incrementCurrentStep();
-
-  const currentStep = tour.getCurrentStep();
-
-  if (currentStep === undefined) {
-    return false;
-  }
-
-  const nextStep = tour.getStep(currentStep);
-  let continueStep: boolean | undefined = true;
-
-  continueStep = await tour
-    .callback("beforeChange")
-    ?.call(
-      tour,
-      nextStep && (nextStep.element as HTMLElement),
-      tour.getCurrentStep(),
-      tour.getDirection()
-    );
-
-  // if `onBeforeChange` returned `false`, stop displaying the element
-  if (continueStep === false) {
-    tour.decrementCurrentStep();
-    return false;
-  }
+  let currentStep = tour.getCurrentStep();
+  const nextStepIndex = currentStep !== undefined ? currentStep + 1 : 0;
 
   if (tour.isEnd()) {
-    // check if any callback is defined
     await tour.callback("complete")?.call(tour, tour.getCurrentStep(), "end");
     await tour.exit();
-
     return false;
   }
 
+  await tour.setCurrentStep(nextStepIndex);
+  const nextStep = tour.getStep(nextStepIndex);
   await showElement(tour, nextStep);
 
   return true;
@@ -80,39 +57,21 @@ export async function nextStep(tour: Tour) {
  * @api private
  */
 export async function previousStep(tour: Tour) {
-  let currentStep = tour.getCurrentStep();
+  const currentStep = tour.getCurrentStep();
 
   if (currentStep === undefined || currentStep <= 0) {
     return false;
   }
 
-  tour.decrementCurrentStep();
-  // update the current step after decrementing
-  currentStep = tour.getCurrentStep();
+  const prevStepIndex = currentStep - 1;
+  const prevStep = tour.getStep(prevStepIndex);
 
-  if (currentStep === undefined) {
+  if (!prevStep) {
     return false;
   }
 
-  const nextStep = tour.getStep(currentStep);
-  let continueStep: boolean | undefined = true;
-
-  continueStep = await tour
-    .callback("beforeChange")
-    ?.call(
-      tour,
-      nextStep && (nextStep.element as HTMLElement),
-      tour.getCurrentStep(),
-      tour.getDirection()
-    );
-
-  // if `onBeforeChange` returned `false`, stop displaying the element
-  if (continueStep === false) {
-    tour.incrementCurrentStep();
-    return false;
-  }
-
-  await showElement(tour, nextStep);
+  await tour.setCurrentStep(prevStepIndex);
+  await showElement(tour, prevStep);
 
   return true;
 }

src/packages/tour/tour.ts

@@ -203,18 +203,32 @@ export class Tour implements Package<TourOptions> {
    * Set the current step of the tour and the direction of the tour
    * @param step
    */
-  setCurrentStep(step: number): this {
+  async setCurrentStep(step: number): Promise<boolean> {
+    const currentStep = this._currentStepSignal.val;
+    const targetStep = this.getStep(step);
+    if (!targetStep) return false;
+
+    const direction =
+      currentStep === undefined || step >= currentStep ? "forward" : "backward";
+
+    const continueStep = await this.callback("beforeChange")?.call(
+      this,
+      targetStep.element as HTMLElement,
+      currentStep,
+      direction
+    );
+
     if (
-      this._currentStepSignal.val === undefined ||
-      step >= this._currentStepSignal.val
+      direction === "forward" &&
+      continueStep === false &&
+      currentStep !== undefined
     ) {
-      this._direction = "forward";
-    } else {
-      this._direction = "backward";
+      return false;
     }
 
+    this._direction = direction;
     this._currentStepSignal.val = step;
-    return this;
+    return true;
   }
 
   /**