Add overlay click to close

src/driver.ts

@@ -1,9 +1,10 @@
-import { initEvents, destroyEvents } from "./events";
-import { destroyHighlight, highlight } from "./highlight";
 import { destroyStage } from "./stage";
-import { configure, Config, getConfig } from "./config";
+import { destroyEvents, initEvents } from "./events";
+import { Config, configure, getConfig } from "./config";
+import { destroyHighlight, highlight } from "./highlight";
 
 import "./style.css";
+import { destroyHooks, register } from "./hooks";
 
 export type DriveStep = {
   element?: string | Element;
@@ -21,6 +22,8 @@ export function driver(options: Config = {}) {
     );
 
     initEvents();
+
+    register("overlayClick", destroy);
   }
 
   function destroy() {
@@ -32,6 +35,7 @@ export function driver(options: Config = {}) {
     destroyEvents();
     destroyHighlight();
     destroyStage();
+    destroyHooks();
   }
 
   return {

src/hooks.ts

@@ -0,0 +1,15 @@
+type allowedHooks = "overlayClick";
+
+let registeredHooks: Partial<{ [key in allowedHooks]: () => void }> = {};
+
+export function register(hook: allowedHooks, callback: () => void) {
+  registeredHooks[hook] = callback;
+}
+
+export function trigger(hook: allowedHooks) {
+  registeredHooks[hook]?.();
+}
+
+export function destroyHooks() {
+  registeredHooks = {};
+}

src/stage.ts

@@ -1,5 +1,6 @@
 import { easeInOutQuad } from "./math";
 import { onDriverClick } from "./events";
+import { trigger } from "./hooks";
 
 export type StageDefinition = {
   x: number;
@@ -98,7 +99,6 @@ export function refreshStage() {
 
 function mountStage(stagePosition: StageDefinition) {
   stageSvg = createStageSvg(stagePosition);
-
   document.body.appendChild(stageSvg);
 
   onDriverClick(stageSvg, e => {
@@ -107,7 +107,7 @@ function mountStage(stagePosition: StageDefinition) {
       return;
     }
 
-    console.log("Overlay clicked");
+    trigger("overlayClick");
   });
 }