Module: UI

Contains code to manage the UI (header interactions, buttons, infoText update, etc.).
Author:
  • Radim Brnka
Copyright:
  • Synaptory Fractal Traveler, 2025-2026
License:
  • MIT
Source:

Members

(static, constant) isAnimationActive

Source:

(inner, constant) FRACTAL_MODE_NAMES

Fractal mode display names
Source:

(inner) headerVisible :boolean

Type:
  • boolean
Source:

Methods

(static) cycleToNextDive()

Cycles to the next dive (wraps around). Julia mode only.
Source:

(static) cycleToNextFractalMode()

Cycles to the next fractal mode in order: Mandelbrot → Julia → Riemann → Rossler → Mandelbrot
Source:

(static) cycleToNextPreset()

Cycles to the next preset (wraps around). Uses travelingToPresetIndex if mid-travel for instant consecutive cycling.
Source:

(static) cycleToPreviousPreset()

Cycles to the previous preset (wraps around). Uses travelingToPresetIndex if mid-travel for instant consecutive cycling.
Source:

(static) enableMandelbrotMode()

Implemented in a way it's not needed to be called at the first render. Everything should be pre-initialized for Mandelbrot mode.
Source:

(static) getActivePresetIndex() → {number}

Gets the current active preset index
Source:
Returns:
Type
number

(static) getCurrentPaletteId() → {string|null}

Returns the current palette ID from the fractal renderer
Source:
Returns:
Type
string | null

(static) getUserPresets() → {Array.<PRESET>}

Gets user presets from localStorage for current fractal mode
Source:
Returns:
Type
Array.<PRESET>

(static) hideViewInfo()

Hides the view info overlay and all markers. Called when user interacts with the view (pan/zoom/etc) making preset info inaccurate.
Source:

(static) initUI(fractalRenderer)

Initializes the UI and registers UI event handlers
Parameters:
Name Type Description
fractalRenderer
Source:

(static) resetActivePresetIndex()

This needs to happen on any fractal change
Source:

(static) resetAppState()

Resets buttons, active presets and URL
Source:

(static) showEditCoordsDialog()

Shows the edit coordinates dialog
Source:

(static) showQuickInfo(title, descriptionopt, coloropt, durationopt)

Shows a quick info overlay for palette changes, mode switches, and dive starts. Auto-hides after the specified duration.
Parameters:
Name Type Attributes Default Description
title string The title to display (e.g., palette name, mode name)
description string <optional>
 Optional description
color string <optional>
 Optional accent color (hex)
duration number <optional>
 2000 Auto-hide delay in ms
Source:

(static) showSaveViewDialog()

Shows the save view dialog
Source:

(static) startJuliaDive(dives, index) → {Promise.<void>}

Starts the Julia dive infinite animation
Parameters:
Name Type Description
dives Array.<DIVE>
index number Index of the dive
Source:
Returns:
Type
Promise.<void>

(static) switchFractalMode(mode, presetopt)

Switches among fractal modes
Parameters:
Name Type Attributes Description
mode FRACTAL_TYPE
preset PRESET | MANDELBROT_PRESET | JULIA_PRESET <optional>
 If present, it's set as the default state through travelToPreset
Source:

(static) switchFractalTypeWithPersistence(targetType) → {Promise.<void>}

Switches among fractal modes but keeps the c/pan settings so the fractals match each other.
Parameters:
Name Type Description
targetType FRACTAL_TYPE
Source:
Returns:
Type
Promise.<void>

(static) syncRiemannControls()

Syncs all Riemann UI controls (sliders and toggles) with renderer state. Called after reset to update UI to match default values.
Source:

(static) syncRiemannToggleStates()

Syncs Riemann toggle button states with renderer state. Called from hotkeyController after hotkey toggles.
Source:

(static) syncRosslerControls()

Syncs Rossler control slider values with renderer state. Called after reset and palette changes.
Source:

(static) toggleAxes()

Toggles the axes overlay on/off
Source:

(static) toggleCenterLines()

Toggles x/y axes
Source:

(static) toggleDebugMode()

Inits debug bar with various information permanently shown on the screen
Source:

(static) toggleDemo() → {Promise.<void>}

Turns demo on/off and/or stops current animation
Source:
Returns:
Type
Promise.<void>

(static) toggleDoublePrecision()

Toggles between standard (borwein) and double precision shader in Riemann mode. Sets manual override to prevent auto-switching.
Source:

(static) toggleHeader(show)

Shows/hides/toggles header.
Parameters:
Name Type Description
show boolean | null Show header? If null, then toggles current state
Source:

(static) toggleRiemannDisplayDropdown()

Toggles the Riemann display dropdown menu
Source:

(static) toggleZetaPath()

Toggles the zeta path overlay on/off
Source:

(static) travelToPreset(presets, index) → {Promise.<void>}

Travels to preset at given index
Parameters:
Name Type Description
presets Array.<PRESET>
index number Preset array index
Source:
Returns:
Type
Promise.<void>

(static) updateAxes()

Updates axes when view changes
Source:

(static) updateColorTheme(paletteopt)

Updates color scheme
Parameters:
Name Type Attributes Description
palette PALETTE <optional>
 defaults to the fractal palette
Source:

(static) updateInfo(force)

Updates the bottom info bar. Throttled to avoid layout thrashing during animations (max ~10 updates/sec).
Parameters:
Name Type Description
force boolean If true, ensures an update is scheduled even if throttled (won't be dropped)
Source:

(static) updatePaletteCycleButtonState()

Updates the palette cycle button state to match the actual cycling state
Source:

(static) updatePaletteDropdownStateWithInfo()

Updates palette dropdown state and shows quick info overlay for palette cycling. Used as callback for startPaletteCycling.
Source:

(static) updateZetaPath()

Updates zeta path when view changes
Source:

(async, inner) applyEditedCoords()

Applies the edited coordinates and animates travel
Source:

(inner) applyHotkeyHints()

Highlights the first letter of all buttons in the header panel. Wraps the first letter in a span with the hotkey-hint class. Only runs if FF_HOTKEY_HINTS feature flag is enabled.
Source:

(inner) closeDivesDropdown()

Closes the dives dropdown menu
Source:

(inner) closeFractalDropdown()

Closes the fractal mode dropdown menu
Source:

(inner) closePaletteDropdown()

Closes the palette dropdown menu
Source:

(inner) closePresetsDropdown()

Closes the presets dropdown menu
Source:

(inner) closeRiemannDisplayDropdown()

Closes the Riemann display dropdown menu
Source:

(inner) closeRiemannShaderDropdown()

Closes the Riemann shader dropdown menu
Source:

(inner) deleteUserPreset(presetId)

Deletes a user preset by its id
Parameters:
Name Type Description
presetId string
Source:

(inner) destroyMandelbrotControls()

Destroys Mandelbrot-specific UI controls and hides them
Source:

(inner) destroyRiemannControls()

Destroys Riemann-specific UI controls and hides them
Source:

(inner) destroyRosslerControls()

Destroys Rossler-specific UI controls and hides them
Source:

(inner) exitAnimationMode()

Enables controls, resets demo button
Source:

(inner) formatButtonText(text) → {string}

Formats button text with hotkey hint styling on the first letter.
Parameters:
Name Type Description
text string The button text
Source:
Returns:
HTML string with hotkey hint markup, or plain text if FF_HOTKEY_HINTS is disabled
Type
string

(inner) getUserPresetsKey() → {string}

Gets the localStorage key for user presets based on current fractal mode
Source:
Returns:
Type
string

(inner) handleShaderChange()

Handles shader selection
Source:

(inner) hideAllMarkers()

Hides all marker types (point, line, region, segment, pair)
Source:

(inner) hideAxes()

Hides the axes overlay
Source:

(inner) hideEditCoordsDialog()

Hides the edit coordinates dialog
Source:

(inner) hideSaveViewDialog()

Hides the save view dialog
Source:

(inner) initAnimationMode()

Disables controls, activates demo button
Source:

(inner) initCommonButtonEvents()

Inits behavior common for all buttons
Source:

(inner) initEditCoordsDialog()

Initializes the edit coordinates dialog events
Source:

(inner) initFractalDropdown()

Initializes the fractal mode dropdown
Source:

(inner) initFractalModeButtons()

Initializes the fractal mode dropdown buttons
Source:

(inner) initMandelbrotControls()

Initializes Mandelbrot-specific UI controls
Source:

(inner) initRiemannControls()

Initializes Riemann-specific UI controls
Source:

(inner) initRosslerControls()

Initializes Rossler-specific UI controls
Source:

(inner) initSaveViewDialog()

Initializes the save view dialog events
Source:

(inner) onDemoPresetReached(preset, index, total, isRiemannopt)

Callback for demo to show view info overlay
Parameters:
Name Type Attributes Default Description
preset Object The preset object
index number Current index
total number Total presets
isRiemann boolean <optional>
 false Whether this is Riemann mode
Source:

(inner) parseEditCoordsInput() → {Object}

Parses user input from either JSON or individual fields Tries JSON first, then falls back to field-by-field parsing
Source:
Returns:
Parsed coordinates object or {error: string}
Type
Object

(inner) saveCurrentViewAsPreset(name)

Saves the current view as a user preset
Parameters:
Name Type Description
name string The name for the preset
Source:

(inner) saveUserPresets(presets)

Saves user presets to localStorage for current fractal mode
Parameters:
Name Type Description
presets Array.<PRESET>
Source:

(inner) setDivesToggleText()

Sets the dives toggle button text with optional hotkey hint
Source:

(inner) setFractalToggleText()

Sets the fractal toggle button text with optional hotkey hint
Source:

(inner) setPaletteToggleText()

Sets the palette toggle button text with optional hotkey hint
Source:

(inner) setPresetsToggleText()

Sets the presets toggle button text with optional hotkey hint
Source:

(inner) setRiemannDisplayToggleText()

Sets the Riemann display toggle button text with optional hotkey hint
Source:

(inner) setRiemannShaderToggleText()

Sets the Riemann shader toggle button text with optional hotkey hint
Source:

(inner) showAxes()

Shows the axes overlay and draws coordinate grid
Source:

(inner) showViewInfo(preset, index, total, isRiemannopt)

Shows the view info overlay with information about the current view/point Works for both Zeta Tour points (with descriptions) and Demo presets (just title)
Parameters:
Name Type Attributes Default Description
preset Object The preset/point with id or name, pan, and optional description
index number The current index (0-based)
total number Total number of items
isRiemann boolean <optional>
 false Whether this is Riemann mode (show coordinates differently)
Source:

(async, inner) startJuliaDemo()

Starts the Julia demo
Source:

(async, inner) startMandelbrotDemo()

Starts the Mandelbrot demo
Source:

(async, inner) startRiemannDemo()

Starts the Riemann tour (zero tour through significant points)
Source:

(async, inner) startRosslerDemo()

Starts the Rossler demo
Source:

(inner) syncMandelbrotControls()

Syncs Mandelbrot UI controls with renderer state. Called on every draw to reflect adaptive quality changes.
Source:

(inner) toggleDivesDropdown()

Toggles the dives dropdown menu
Source:

(inner) toggleFractalDropdown()

Toggles the fractal mode dropdown menu
Source:

(inner) togglePaletteDropdown()

Toggles the palette dropdown menu
Source:

(inner) togglePresetsDropdown()

Toggles the presets dropdown menu
Source:

(inner) toggleRiemannShaderDropdown()

Toggles the Riemann shader dropdown menu
Source:

(inner) updateFractalDropdownState(mode)

Updates the fractal dropdown toggle text and button active states
Parameters:
Name Type Description
mode FRACTAL_TYPE
Source:

(inner) updateHLineMarkerPosition()

Updates the horizontal line marker position to show the real axis (Im(s) = 0). The line spans the entire viewport width at the y-coordinate of the real axis.
Source:

(inner) updatePairMarkerPosition(preset)

Updates the pair marker to show two saddle points. Saddle points (zeros of ζ'(s)) come in pairs.
Parameters:
Name Type Description
preset Object The current preset containing pan coordinates and optional saddle point data
Source:

(inner) updateRegionMarkerPosition()

Updates the region marker position to wrap the critical strip (0 < Re(s) < 1). The marker spans from x=0 to x=1 in fractal coordinates, full height of viewport.
Source:

(inner) updateSegmentMarkerPosition(accentColor)

Updates the segment marker to show trivial zeros at -2, -4, -6, etc. Creates/updates multiple point markers along the negative real axis.
Parameters:
Name Type Description
accentColor string The accent color for the markers
Source:

(inner) validateEditCoordsInput() → {boolean}

Validates current input and updates UI accordingly
Source:
Returns:
True if valid
Type
boolean