interact

@startuml

start

:Load MathJax;
:Get DOM elements;
:Set canvas parameters;
:Initialize global variables;
:Draw axes and grid;
:Add event listeners;

fork
        partition "Generate New Function" {
        :Click "Generate New Function" button;
        :Select difficulty level;
        if ("Difficulty level check") then (Beginner)
            :Generate a random function for beginner level;
        elseif (Intermediate) then
            :Generate a random function for intermediate level;
        elseif (Advanced) then
            :Generate a random function for advanced level;
        endif
        :Draw the target function curve;
        :Start the timer;
    }
fork again
        partition "Add/Edit Function" {
        :Select function type and parameters;
        :Click "Add" / "Confirm" button;
        if ("Is in edit state?") then (Yes)
            :Update the corresponding function information in the functions array;
        else (No)
            :Add a new function to the functions array;
        endif
        :Render LaTeX expression;
        :Update plot and error;
    }
fork again
        partition "Delete Function" {
        if ("Operation mode check") then (Double - click LaTeX expression)
            :Delete the corresponding function information;
        else (Click "Clear" / "Delete" button)
            if ("Is in edit state?") then (Yes)
                :Remove the currently edited function from the functions array;
            else (No)
                :Clear the functions array;
            endif
        endif
        :Render LaTeX expression;
        :Update plot and error;
    }
fork again
        partition "Save State" {
        :Click "Save" button;
        if ("Are there target and user functions?") then (Yes)
            :Calculate the error;
            :Save state information to the savedStates array;
            :Generate a thumbnail;
            :Display saved information;
        else (No)
            :Prompt that functions are not generated;
        endif
    }
fork again
        partition "Advanced Input Panel" {
        if ("Operation type check") then (Click insert button)
            :Insert symbol into the input box;
        else (Input expression)
            :Convert to LaTeX format;
        endif
        :Preview LaTeX in real - time;
    }
fork again
        partition "Load Saved State" {
        :Click the saved thumbnail;
        :Find the corresponding state information from the savedStates array;
        :Update the target function and user - input function;
        :Redraw the function curves;
        :Update error display;
    }

stop

@enduml