Update currentStep

src/packages/tour/disableInteraction.ts → src/packages/tour/components/DisableInteraction.ts

@@ -1,12 +1,12 @@
-import van, { State } from "../dom/van";
-import { disableInteractionClassName } from "./classNames";
-import { setPositionRelativeToStep } from "./position";
-import { TourStep } from "./steps";
+import van, { State } from "../../dom/van";
+import { disableInteractionClassName } from "../classNames";
+import { setPositionRelativeToStep } from "../position";
+import { TourStep } from "../steps";
 
 const { div } = van.tags;
 
 export type HelperLayerProps = {
- currentStep: State<number>;
+ currentStep: State<number | undefined>;
  steps: TourStep[];
  targetElement: HTMLElement;
  helperElementPadding: number;

src/packages/tour/helperLayer.ts → src/packages/tour/components/HelperLayer.ts

@@ -1,8 +1,8 @@
-import { style } from "../../util/style";
-import van, { State } from "../dom/van";
-import { helperLayerClassName } from "./classNames";
-import { setPositionRelativeToStep } from "./position";
-import { TourStep } from "./steps";
+import { style } from "../../../util/style";
+import van, { State } from "../../dom/van";
+import { helperLayerClassName } from "../classNames";
+import { setPositionRelativeToStep } from "../position";
+import { TourStep } from "../steps";
 
 const { div } = van.tags;
 
@@ -29,7 +29,7 @@ const getClassName = ({
 };
 
 export type HelperLayerProps = {
- currentStep: State<number>;
+ currentStep: State<number | undefined>;
  steps: TourStep[];
  targetElement: HTMLElement;
  tourHighlightClass: string;

src/packages/tour/overlayLayer.ts → src/packages/tour/components/OverlayLayer.ts

@@ -1,7 +1,7 @@
-import { style } from "../../util/style";
-import { overlayClassName } from "./classNames";
-import van from "../dom/van";
-import { Tour } from "./tour";
+import { style } from "../../../util/style";
+import { overlayClassName } from "../classNames";
+import van from "../../dom/van";
+import { Tour } from "../tour";
 
 const { div } = van.tags;
 

src/packages/tour/referenceLayer.ts → src/packages/tour/components/ReferenceLayer.ts

@@ -1,8 +1,8 @@
-import van from "../dom/van";
-import { tooltipReferenceLayerClassName } from "./classNames";
-import { setPositionRelativeToStep } from "./position";
-import { TourStep } from "./steps";
-import { TourTooltip, TourTooltipProps } from "./tourTooltip";
+import van from "../../dom/van";
+import { tooltipReferenceLayerClassName } from "../classNames";
+import { setPositionRelativeToStep } from "../position";
+import { TourStep } from "../steps";
+import { TourTooltip, TourTooltipProps } from "./TourTooltip";
 
 const { div } = van.tags;
 

src/packages/tour/tourRoot.ts → src/packages/tour/components/TourRoot.ts

@@ -1,11 +1,11 @@
-import van from "../dom/van";
-import { ReferenceLayer } from "./referenceLayer";
-import { HelperLayer } from "./helperLayer";
-import { Tour } from "./tour";
-import { DisableInteraction } from "./disableInteraction";
-import { OverlayLayer } from "./overlayLayer";
-import { nextStep, previousStep } from "./steps";
-import { doneButtonClassName } from "./classNames";
+import van from "../../dom/van";
+import { ReferenceLayer } from "./ReferenceLayer";
+import { HelperLayer } from "./HelperLayer";
+import { Tour } from "../tour";
+import { DisableInteraction } from "./DisableInteraction";
+import { OverlayLayer } from "./OverlayLayer";
+import { nextStep, previousStep } from "../steps";
+import { doneButtonClassName } from "../classNames";
 
 const { div } = van.tags;
 
@@ -14,7 +14,7 @@ export type TourRootProps = {
 };
 
 export const TourRoot = ({ tour }: TourRootProps) => {
- const currentStep = tour.currentStepSignal;
+ const currentStep = tour.getCurrentStepSignal();
  const steps = tour.getSteps();
 
  const helperLayer = HelperLayer({
@@ -63,7 +63,7 @@ export const TourRoot = ({ tour }: TourRootProps) => {
  showStepNumbers: tour.getOption("showStepNumbers"),
 
  steps: tour.getSteps(),
- currentStep: tour.currentStepSignal,
+ currentStep,
 
  onBulletClick: (stepNumber: number) => {
  tour.goToStep(stepNumber);
@@ -90,7 +90,8 @@ export const TourRoot = ({ tour }: TourRootProps) => {
  },
  prevLabel: tour.getOption("prevLabel"),
  onPrevClick: async () => {
- if (tour.getCurrentStep() > 0) {
+ const currentStep = tour.getCurrentStep();
+ if (currentStep !== undefined && currentStep > 0) {
  await previousStep(tour);
  }
  },
@@ -132,7 +133,7 @@ export const TourRoot = ({ tour }: TourRootProps) => {
 
  const disableInteraction = step.val.disableInteraction
  ? DisableInteraction({
- currentStep: tour.currentStepSignal,
+ currentStep,
  steps: tour.getSteps(),
  targetElement: tour.getTargetElement(),
  helperElementPadding: tour.getOption("helperElementPadding"),
@@ -145,7 +146,7 @@ export const TourRoot = ({ tour }: TourRootProps) => {
 
  van.derive(() => {
  // to clean up the root element when the tour is done
- if (currentStep.val === undefined || currentStep.val < 0) {
+ if (currentStep.val === undefined) {
  root.remove();
  }
  });

src/packages/tour/tourTooltip.ts → src/packages/tour/components/TourTooltip.ts

@@ -1,5 +1,5 @@
-import { Tooltip, type TooltipProps } from "../tooltip/tooltip";
-import van, { PropValueOrDerived, State } from "../dom/van";
+import { Tooltip, type TooltipProps } from "../../tooltip/tooltip";
+import van, { PropValueOrDerived, State } from "../../dom/van";
 import {
  activeClassName,
  bulletsClassName,
@@ -17,12 +17,12 @@ import {
  tooltipHeaderClassName,
  tooltipTextClassName,
  tooltipTitleClassName,
-} from "./classNames";
-import { TourStep } from "./steps";
-import { dataStepNumberAttribute } from "./dataAttributes";
-import getOffset from "../../util/getOffset";
-import scrollParentToElement from "../../util/scrollParentToElement";
-import scrollTo from "../../util/scrollTo";
+} from "../classNames";
+import { TourStep } from "../steps";
+import { dataStepNumberAttribute } from "../dataAttributes";
+import getOffset from "../../../util/getOffset";
+import scrollParentToElement from "../../../util/scrollParentToElement";
+import scrollTo from "../../../util/scrollTo";
 
 const { h1, div, input, label, ul, li, a, p } = van.tags;
 
@@ -52,7 +52,7 @@ const Bullets = ({
  onBulletClick,
 }: {
  steps: TourStep[];
- currentStep: State<number>;
+ currentStep: State<number | undefined>;
  onBulletClick: (stepNumber: number) => void;
 }): HTMLElement => {
 
@@ -96,7 +96,7 @@ const ProgressBar = ({
  progressBarAdditionalClass
 }: {
  steps: TourStep[];
- currentStep: State<number>;
+ currentStep: State<number | undefined>;
  progressBarAdditionalClass: string;
 }) => {
  const progress = van.derive(() => ((currentStep.val!) / steps.length) * 100);
@@ -164,7 +164,7 @@ const NextButton = ({
  buttonClass
 }: {
  steps: TourStep[];
- currentStep: State<number>;
+ currentStep: State<number | undefined>;
 
  nextLabel: string;
  doneLabel: string;
@@ -238,7 +238,7 @@ const PrevButton = ({
 }: {
  label: string;
  steps: TourStep[];
- currentStep: State<number>;
+ currentStep: State<number | undefined>;
  hidePrev: boolean;
  hideNext: boolean;
  onClick: (e: any) => void;
@@ -293,7 +293,7 @@ const Buttons = ({
  onPrevClick,
 }: {
  steps: TourStep[];
- currentStep: State<number>;
+ currentStep: State<number | undefined>;
 
  buttonClass: string;
 
@@ -393,7 +393,7 @@ const scroll = ({
 
 export type TourTooltipProps = Omit<TooltipProps, "hintMode" | "position" | "targetOffset"> & {
  steps: TourStep[];
- currentStep: State<number>;
+ currentStep: State<number | undefined>;
 
  bullets: boolean;
  onBulletClick: (stepNumber: number) => void;

src/packages/tour/tour.ts

@@ -22,15 +22,14 @@ import DOMEvent from "../../util/DOMEvent";
 import onKeyDown from "./onKeyDown";
 import onResize from "./onResize";
 import van from "../dom/van";
-import { TourRoot } from "./tourRoot";
+import { TourRoot } from "./components/TourRoot";
 
 /**
  * Intro.js Tour class
  */
 export class Tour implements Package<TourOptions> {
  private _steps: TourStep[] = [];
- private _currentStep: number = -1;
- public currentStepSignal = van.state<number>(-1);
+ private _currentStep = van.state<number | undefined>(undefined);
  private _direction: "forward" | "backward";
  private readonly _targetElement: HTMLElement;
  private _options: TourOptions;
@@ -165,43 +164,51 @@ export class Tour implements Package<TourOptions> {
  }
 
  /**
- * Get the current step of the tour
+ * Returns the underlying state of the current step
+ * This is an internal method and should not be used outside of the package.
  */
- getCurrentStep(): number {
+ getCurrentStepSignal() {
  return this._currentStep;
  }
 
+ /**
+ * Get the current step of the tour
+ */
+ getCurrentStep(): number | undefined {
+ return this._currentStep.val;
+ }
+
  /**
  * @deprecated `currentStep()` is deprecated, please use `getCurrentStep()` instead.
  */
- currentStep(): number {
- return this._currentStep;
+ currentStep(): number | undefined {
+ return this._currentStep.val;
  }
 
  /**
  * Set the current step of the tour and the direction of the tour
  * @param step
  */
  setCurrentStep(step: number): this {
- if (step >= this._currentStep) {
+ if (this._currentStep.val === undefined || step >= this._currentStep.val) {
  this._direction = "forward";
  } else {
  this._direction = "backward";
  }
 
- this.currentStepSignal.val = step;
- this._currentStep = step;
+ this._currentStep.val = step;
  return this;
  }
 
  /**
  * Increment the current step of the tour (does not start the tour step, must be called in conjunction with `nextStep`)
  */
  incrementCurrentStep(): this {
- if (this.getCurrentStep() === -1) {
+ const currentStep = this.getCurrentStep();
+ if (currentStep === undefined) {
  this.setCurrentStep(0);
  } else {
- this.setCurrentStep(this.getCurrentStep() + 1);
+ this.setCurrentStep(currentStep + 1);
  }
 
  return this;
@@ -211,8 +218,9 @@ export class Tour implements Package<TourOptions> {
  * Decrement the current step of the tour (does not start the tour step, must be in conjunction with `previousStep`)
  */
  decrementCurrentStep(): this {
- if (this.getCurrentStep() > 0) {
- this.setCurrentStep(this._currentStep - 1);
+ const currentStep = this.getCurrentStep();
+ if (currentStep !== undefined && currentStep > 0) {
+ this.setCurrentStep(currentStep - 1);
  }
 
  return this;
@@ -229,7 +237,6 @@ export class Tour implements Package<TourOptions> {
  * Go to the next step of the tour
  */
  async nextStep() {
- this.currentStepSignal.val! += 1;
  await nextStep(this);
  return this;
  }
@@ -246,7 +253,8 @@ export class Tour implements Package<TourOptions> {
  * Check if the current step is the last step
  */
  isEnd(): boolean {
- return this.getCurrentStep() >= this._steps.length;
+ const currentStep = this.getCurrentStep();
+ return currentStep !== undefined && currentStep >= this._steps.length;
  }
 
  /**
@@ -315,7 +323,7 @@ export class Tour implements Package<TourOptions> {
  * Returns true if the tour has started
  */
  hasStarted(): boolean {
- return this.getCurrentStep() > -1;
+ return this.getCurrentStep() !== undefined;
  }
 
  /**