update hint API

src/packages/hint/components/HintIcon.ts

@@ -1,5 +1,5 @@
 import isFixed from "../../../util/isFixed";
-import van from "../../dom/van";
+import van, { State } from "../../dom/van";
 import {
   fixedHintClassName,
   hideHintClassName,
@@ -17,6 +17,7 @@ const { a, div } = van.tags;
 export type HintProps = {
   index: number;
   hintItem: HintItem;
+  refreshesSignal: State<number>;
   onClick: (e: any) => void;
 };
 
@@ -41,7 +42,12 @@ const className = (hintItem: HintItem) => {
 const HintDot = () => div({ className: hintDotClassName });
 const HintPulse = () => div({ className: hintPulseClassName });
 
-export const HintIcon = ({ index, hintItem, onClick }: HintProps) => {
+export const HintIcon = ({
+  index,
+  hintItem,
+  onClick,
+  refreshesSignal,
+}: HintProps) => {
   const hintElement = a(
     {
       [dataStepAttribute]: index.toString(),
@@ -54,11 +60,15 @@ export const HintIcon = ({ index, hintItem, onClick }: HintProps) => {
     HintPulse()
   );
 
-  alignHintPosition(
-    hintItem.hintPosition as HintPosition,
-    hintElement,
-    hintItem.element as HTMLElement
-  );
+  van.derive(() => {
+    if (refreshesSignal.val === undefined) return;
+
+    alignHintPosition(
+      hintItem.hintPosition as HintPosition,
+      hintElement,
+      hintItem.element as HTMLElement
+    );
+  });
 
   return hintElement;
 };

src/packages/hint/components/HintsRoot.ts

@@ -3,7 +3,6 @@ import { hintsClassName } from "../className";
 import { hideHint } from "../hide";
 import { Hint } from "../hint";
 import { HintItem } from "../hintItem";
-import { showHintDialog } from "../tooltip";
 import { HintIcon } from "./HintIcon";
 import { ReferenceLayer } from "./ReferenceLayer";
 
@@ -27,7 +26,7 @@ const getHintClick = (hint: Hint, i: number) => (e: Event) => {
     evt.cancelBubble = true;
   }
 
-  showHintDialog(hint, i);
+  hint.showHintDialog(i);
 };
 
 export const HintsRoot = ({ hint }: HintsRootProps) => {
@@ -38,6 +37,7 @@ export const HintsRoot = ({ hint }: HintsRootProps) => {
       index: i,
       hintItem,
       onClick: getHintClick(hint, i),
+      refreshesSignal: hint.getRefreshesSignal(),
     });
 
     // store the hint tooltip element in the hint item
@@ -55,20 +55,23 @@ export const HintsRoot = ({ hint }: HintsRootProps) => {
   );
 
   van.derive(() => {
-    if (hint._activeHintSignal.val === undefined) return;
+    const activeHintSignal = hint.getActiveHintSignal();
+    if (activeHintSignal.val === undefined) return;
 
-    const stepId = hint._activeHintSignal.val;
+    const stepId = activeHintSignal.val;
     const hints = hint.getHints();
     const hintItem = hints[stepId];
 
+    if (!hintItem) return;
+
     const referenceLayer = ReferenceLayer({
-      activeHintSignal: hint._activeHintSignal,
+      activeHintSignal,
       hintItem,
 
       helperElementPadding: hint.getOption("helperElementPadding"),
       targetElement: hint.getTargetElement(),
 
-      refreshes: hint._refreshes,
+      refreshes: hint.getRefreshesSignal(),
 
       // hints don't have step numbers
       showStepNumbers: false,

src/packages/hint/hide.ts

@@ -12,6 +12,9 @@ export async function hideHint(hint: Hint, hintItem: HintItem) {
   if (isActiveSignal) {
     isActiveSignal.val = false;
   }
+
+  hint.hideHintDialog();
+
   // call the callback function (if any)
   hint.callback("hintClose")?.call(hint, hintItem);
 }

src/packages/hint/hint.ts

@@ -4,14 +4,10 @@ import { fetchHintItems, HintItem } from "./hintItem";
 import { setOption, setOptions } from "../../option";
 import isFunction from "../../util/isFunction";
 import debounce from "../../util/debounce";
-import { reAlignHints } from "./position";
 import DOMEvent from "../../util/DOMEvent";
 import { getContainerElement } from "../../util/containerElement";
-import { renderHints } from "./render";
 import { hideHint, hideHints } from "./hide";
 import { showHint, showHints } from "./show";
-import { removeHint, removeHints } from "./remove";
-import { showHintDialog } from "./tooltip";
 import van from "../dom/van";
 import { HintsRoot } from "./components/HintsRoot";
 
@@ -24,11 +20,8 @@ export class Hint implements Package<HintOptions> {
   private _hints: HintItem[] = [];
   private readonly _targetElement: HTMLElement;
   private _options: HintOptions;
-  public _activeHintSignal = van.state<number | undefined>(undefined);
-  public _refreshes = van.state(0);
-
-  // The hint close function used when the user clicks outside the hint
-  private _windowClickHandler?: () => void;
+  private _activeHintSignal = van.state<number | undefined>(undefined);
+  private _refreshes = van.state(0);
 
   private readonly callbacks: {
     hintsAdded?: hintsAddedCallback;
@@ -38,6 +31,8 @@ export class Hint implements Package<HintOptions> {
 
   // Event handlers
   private _hintsAutoRefreshFunction?: () => void;
+  // The hint close function used when the user clicks outside the hint
+  private _windowClickFunction?: () => void;
 
   /**
    * Create a new Hint instance
@@ -110,7 +105,26 @@ export class Hint implements Package<HintOptions> {
     return this;
   }
 
-  public isRendered() {
+  /**
+   * Get the active hint signal
+   * This is meant to be used internally by the Hint package
+   */
+  getActiveHintSignal() {
+    return this._activeHintSignal;
+  }
+
+  /**
+   * Returns the underlying state of the refreshes
+   * This is an internal method and should not be used outside of the package.
+   */
+  getRefreshesSignal() {
+    return this._refreshes;
+  }
+
+  /**
+   * Returns true if the hints are rendered
+   */
+  isRendered() {
     return this._root !== undefined;
   }
 
@@ -119,6 +133,13 @@ export class Hint implements Package<HintOptions> {
     van.add(this._targetElement, this._root);
   }
 
+  private recreateRoot() {
+    if (this._root) {
+      this._root.remove();
+      this.createRoot();
+    }
+  }
+
   /**
    * Render hints on the page
    */
@@ -132,16 +153,34 @@ export class Hint implements Package<HintOptions> {
     }
 
     fetchHintItems(this);
-    await renderHints(this);
     this.createRoot();
 
-    this._windowClickHandler = () => {
+    this.callback("hintsAdded")?.call(this);
+
+    this.enableHintAutoRefresh();
+    this.enableCloseDialogOnWindowClick();
+
+    return this;
+  }
+
+  /**
+   * Enable closing the dialog when the user clicks outside the hint
+   */
+  enableCloseDialogOnWindowClick() {
+    this._windowClickFunction = () => {
       this._activeHintSignal.val = undefined;
     };
 
-    DOMEvent.on(document, "click", this._windowClickHandler, false);
+    DOMEvent.on(document, "click", this._windowClickFunction, false);
+  }
 
-    return this;
+  /**
+   * Disable closing the dialog when the user clicks outside the hint
+   */
+  disableCloseDialogOnWindowClick() {
+    if (this._windowClickFunction) {
+      DOMEvent.off(document, "click", this._windowClickFunction, false);
+    }
   }
 
   /**
@@ -205,11 +244,9 @@ export class Hint implements Package<HintOptions> {
       this._root = undefined;
     }
 
-    if (this._windowClickHandler) {
-      DOMEvent.off(document, "click", this._windowClickHandler, false);
-    }
+    this.disableHintAutoRefresh();
+    this.disableCloseDialogOnWindowClick();
 
-    removeHints(this);
     return this;
   }
 
@@ -229,7 +266,9 @@ export class Hint implements Package<HintOptions> {
    * @param stepId The hint step ID
    */
   removeHint(stepId: number) {
-    removeHint(stepId);
+    this._hints = this._hints.filter((_, i) => i !== stepId);
+    this.recreateRoot();
+
     return this;
   }
 
@@ -238,8 +277,38 @@ export class Hint implements Package<HintOptions> {
    * @param stepId The hint step ID
    */
   async showHintDialog(stepId: number) {
+    const item = this.getHint(stepId);
+
+    if (!item) return;
+
     this._activeHintSignal.val = stepId;
-    await showHintDialog(this, stepId);
+
+    // call the callback function (if any)
+    await this.callback("hintClick")?.call(this, item);
+
+    return this;
+  }
+
+  /**
+   * Hide hint dialog from the page
+   */
+  hideHintDialog() {
+    this._activeHintSignal.val = undefined;
+    return this;
+  }
+
+  /**
+   * Refresh the hints on the page
+   */
+  public refresh() {
+    if (!this.isRendered()) {
+      return this;
+    }
+
+    if (this._refreshes.val !== undefined) {
+      this._refreshes.val += 1;
+    }
+
     return this;
   }
 
@@ -250,7 +319,7 @@ export class Hint implements Package<HintOptions> {
     const hintAutoRefreshInterval = this.getOption("hintAutoRefreshInterval");
     if (hintAutoRefreshInterval >= 0) {
       this._hintsAutoRefreshFunction = debounce(
-        () => reAlignHints(this),
+        () => this.refresh(),
         hintAutoRefreshInterval
       );
 

src/packages/hint/position.ts

@@ -1,6 +1,5 @@
 import getOffset from "../../util/getOffset";
 import { HintPosition } from "./hintItem";
-import { Hint } from "./hint";
 
 /**
  * Aligns hint position
@@ -74,14 +73,3 @@ export const alignHintPosition = (
       break;
   }
 };
-
-/**
- * Re-aligns all hint elements
- *
- * @api private
- */
-export function reAlignHints(hint: Hint) {
-  for (const { hintTooltipElement, hintPosition, element } of hint.getHints()) {
-    alignHintPosition(hintPosition, element as HTMLElement, hintTooltipElement);
-  }
-}