diff --git a/src/simulator/src/sequential.js b/src/simulator/src/sequential.ts similarity index 51% rename from src/simulator/src/sequential.js rename to src/simulator/src/sequential.ts index 46dcd6932..72b23a923 100644 --- a/src/simulator/src/sequential.js +++ b/src/simulator/src/sequential.ts @@ -2,9 +2,10 @@ import { scheduleUpdate, play, updateCanvasSet } from './engine' import { simulationArea } from './simulationArea' /** - * a global function as a helper for simulationArea.changeClockEnable + * A global function as a helper for simulationArea.changeClockEnable + * @param val - Boolean value to enable/disable the clock * @category sequential */ -export function changeClockEnable(val) { +export function changeClockEnable(val: boolean): void { simulationArea.clockEnabled = val -} +} \ No newline at end of file diff --git a/src/simulator/src/tutorials.js b/src/simulator/src/tutorials.ts similarity index 57% rename from src/simulator/src/tutorials.js rename to src/simulator/src/tutorials.ts index dde6f52c6..cfc74514f 100644 --- a/src/simulator/src/tutorials.js +++ b/src/simulator/src/tutorials.ts @@ -1,6 +1,7 @@ import Driver from 'driver.js' +import { TourStep, DriverInstance } from './types/tutorials.types' -export const tour = [ +export const tour: TourStep[] = [ { element: '#guide_1', className: 'guide_1', @@ -79,7 +80,8 @@ export const tour = [ element: '.testbench-manual-panel', popover: { title: 'Test Bench Panel', - description: 'This panel helps you test your circuit correctness by observing how your circuit responds under different test cases, ensuring a thorough and effective validation process.', + description: + 'This panel helps you test your circuit correctness by observing how your circuit responds under different test cases, ensuring a thorough and effective validation process.', position: 'right', offset: 0, }, @@ -87,32 +89,47 @@ export const tour = [ ] // Not used currently -export const tutorialWrapper = () => { - const panelHighlight = new Driver() - document.querySelector('.panelHeader').addEventListener('click', (e) => { - if (localStorage.tutorials === 'next') { - panelHighlight.highlight({ - element: '#guide_1', - showButtons: false, - popover: { - title: 'Here are the elements', - description: - 'Select any element by clicking on it & then click anywhere on the grid to place the element.', - position: 'right', - offset: - e.target.nextElementSibling.offsetHeight + - e.target.offsetTop - - 45, - }, - }) - localStorage.setItem('tutorials', 'done') - } - }, { - once: true, - }) - document.querySelector('.icon').addEventListener('click', () => { - panelHighlight.reset(true) - }) +export const tutorialWrapper = (): void => { + const panelHighlight = new Driver() as unknown as DriverInstance + const panelHeader = document.querySelector('.panelHeader') + + if (panelHeader) { + panelHeader.addEventListener( + 'click', + (e: Event) => { + if (localStorage.getItem('tutorials') === 'next') { + const target = e.target as HTMLElement + const nextElement = target.nextElementSibling as HTMLElement + + panelHighlight.highlight({ + element: '#guide_1', + showButtons: false, + popover: { + title: 'Here are the elements', + description: + 'Select any element by clicking on it & then click anywhere on the grid to place the element.', + position: 'right', + offset: + nextElement.offsetHeight + + target.offsetTop - + 45, + }, + }) + localStorage.setItem('tutorials', 'done') + } + }, + { + once: true, + } + ) + } + + const iconElement = document.querySelector('.icon') + if (iconElement) { + iconElement.addEventListener('click', () => { + panelHighlight.reset(true) + }) + } } const animatedTourDriver = new Driver({ @@ -120,13 +137,16 @@ const animatedTourDriver = new Driver({ opacity: 0.8, padding: 5, showButtons: true, -}) +}) as unknown as DriverInstance -export function showTourGuide() { - document.querySelector('.draggable-panel .maximize').click(); +export function showTourGuide(): void { + const maximizeButton = document.querySelector('.draggable-panel .maximize') + if (maximizeButton && maximizeButton instanceof HTMLElement) { + maximizeButton.click() + } animatedTourDriver.defineSteps(tour) animatedTourDriver.start() - localStorage.setItem('tutorials_tour_done', true) + localStorage.setItem('tutorials_tour_done', 'true') } export default showTourGuide diff --git a/src/simulator/src/types/tutorials.types.ts b/src/simulator/src/types/tutorials.types.ts new file mode 100644 index 000000000..9057b7798 --- /dev/null +++ b/src/simulator/src/types/tutorials.types.ts @@ -0,0 +1,24 @@ +export interface TourStep { + element: string + className?: string + popover: Popover +} + +export interface Popover { + className?: string + title: string + description: string + position: 'top' | 'bottom' | 'left' | 'right' + offset?: number +} + +export interface DriverInstance { + start(): void + defineSteps(steps: TourStep[]): void + highlight(options: { + element: string + popover: Popover + showButtons?: boolean + }): void + reset(clearHighlighted?: boolean): void +}