CalcLynx

​    

CalcLynx is a web-based interactive math board that lets you create, edit, and manage mathematical expressions using a graphical interface. Built using HTML, CSS, JavaScript, and MathQuill, it offers a versatile canvas for creating math groups, editing formulas, and organizing your work with intuitive navigation and file management features.

Core interactions

• Double-click on the canvas:
  • Regular double-click (left button) creates a new math group at the clicked canvas coordinates.
  • Shift + double-click creates a new text area.
• Selecting groups:
  • Click a math group or text group to select it. Clicking an empty area clears selection.
  • Shift + click toggles selection of the clicked group (multi-select).
• Box selection:
  • Click and drag on an empty area of the canvas (left mouse) to draw a dashed selection box.
• Dragging groups:
  • Click and drag a group (left mouse) to move it. If a clicked group is part of the current selection, all selected groups move together.
  • While dragging, hold Ctrl/Cmd (Windows/Linux) or Command (Mac) to snap movement to grid.
• Deleting selected groups (global keys):
  • When no MathQuill field or text editor is focused, pressing Backspace, Delete, or the character x will remove all selected groups.

Math field behavior

• Editable vs finalized fields:
  • Math fields start as editable and are finalized on Enter or blur.
• Creating and moving fields inside a math group:
  • Press Enter while editing a math field to finalize it. If it was the last math field in the group, a new editable math field is appended.
  • Backspace while editing an empty math field will remove that field and focus the previous field (if present).
• Keyboard delete behaviors while editing a math field:
  • Backspace in an empty math field removes the field and focuses the previous one.
  • Ctrl/Cmd + Backspace deletes the current math field.
  • Ctrl/Cmd + Shift + Backspace deletes the entire math group.
• Reordering math fields within a group:
  • Use the left dotted drag handle to drag a math field up/down inside its group. A placeholder shows the drop location; release to insert.

Text field behavior

• Single-field text areas:
  • Each TextGroup contains one editable. Text editing supports newlines.
• Inline math in text fields:
  • Press $ while focused in a text editor to insert an inline math field.
  • Inline math in text fields can be clicked to be edited.
• Auto vs. fixed width:
  • Press Ctrl/Cmd + D to toggle fixed vs. free width text fields. Alternatively, you can right click on the text field and select free/fixed width.
• Cursor and boundary handling (MathQuill inside text):
  • Arrow keys and the delete key behave intuitively at the boundaries between math and text.

Clipboard

• Keyboard shortcuts (only when not focused inside a MathQuill field nor a text editor):
  • Ctrl/Cmd + C: Copy selected groups (copies math and text groups, stores relative positions).
  • Ctrl/Cmd + X: Cut selected groups (copy + remove original).
  • Ctrl/Cmd + V: Paste groups at the current mouse position (uses internal mouse coordinates updated on mousemove).
• Context menu clipboard:
  • Right-click the canvas or a group to open the custom context menu. Menu items include: New Math Stack, New Text Stack, Cut, Copy, Paste, and Delete.

Context menu

• Right-click anywhere on the canvas to open a custom context menu with the following items:
  • New Math Stack: Creates a new math group at the clicked coordinates.
  • New Text Stack: Creates a new text group at the clicked coordinates.
  • Cut / Copy / Paste: Operates on the targeted or selected groups.
  • Delete: Removes the targeted group or all selected groups.

Panning, zooming and navigation

• Panning:
  • Middle mouse button drag pans the canvas.
  • Hold Space and drag with the left mouse button to pan.
  • Trackpad panning is supported.
• Zooming:
  • Use the mouse wheel to zoom in and out. The zoom is centered around the cursor position.
  • UI controls are available to zoom in, zoom out, reset the zoom, or use a slider for precise control.

Command palette and MathGene commands

• Open command palette:
  • Ctrl/Cmd + K opens the command palette.
• Command palette keyboard interactions:
  • Type to filter commands. Use ArrowUp / ArrowDown to change selection, Enter to execute, and Escape to close.
  • Available commands include: Simplify, Expand, Solve for, and Factor.
• Solve-for special case:
  • You can type Solve for x directly into the palette input. The command will be applied to the currently focused math field.
• Applying operations:
  • When a command is applied, a new math field is inserted below the current one. The result will appear in the new field.

Expression equivalence and indicators

• The application automatically detects when different math fields contain identical or equivalent expressions:
  • Colored indicators appear next to these expressions to show their relationship.
  • Clicking on an expression with an indicator will highlight all other expressions that are identical or equivalent.
  • Identical: The expressions are exactly the same.
  • Equivalent: The expressions are mathematically equivalent, like (x+1)(x-1) and x^2-1.

File management

• Save behavior:
  • The current state of the board is saved to the cloud automatically. If you are working on a new file, it will be saved locally until you create a file in the sidebar.
• Export / Import:
  • You can export the current board as a JSON file.
  • You can import a previously exported JSON file to load a board state.
• Sidebar file list and actions (authenticated users):
  • The sidebar lists all your saved files.
  • Each file has a menu with options to Rename, Download as JSON, and Delete.
• Creating a blank file (sidebar):
  • A "Create Blank File" option in the sidebar lets you create a new, empty file and saves it to your account.

Sidebar and hamburger

• The hamburger menu button toggles the sidebar, which can be resized.

Keyboard shortcuts

• Canvas / Groups / Clipboard:
  • Ctrl/Cmd + C: Copy selected groups.
  • Ctrl/Cmd + X: Cut selected groups.
  • Ctrl/Cmd + V: Paste groups.
  • Backspace / Delete / x: Remove selected groups.
• Command palette:
  • Ctrl/Cmd + K: Open command palette.
  • Escape: Close command palette.
  • ArrowUp / ArrowDown: Move selection inside the palette list.
  • Enter: Execute selected command.
• Panning / Zooming / Navigation:
  • Middle mouse drag: Pan the canvas.
  • Hold Space + left-drag: Pan the canvas.
  • Mouse wheel: Zoom.
• Math field editing:
  • Enter: Finalize the focused math field and create a new one below it.
  • Backspace (in an empty math field): Removes the field and focuses the one above it.
  • Ctrl/Cmd + Backspace: Deletes the current math field.
  • Ctrl/Cmd + Shift + Backspace: Deletes the entire math group.
• Text editor math insertion:
  • $: Insert an inline math field at the cursor.

Mathematical Engine (MathGene)

CalcLynx is powered by the MathGene mathematical computation engine, which provides comprehensive symbolic mathematics capabilities including:

Command Palette Integration

Both derivative and integral functions are accessible through the interactive command palette (Ctrl/Cmd + K):

• "Derivative with respect to [variable]" - Computes derivatives for any variable
• "Integrate with respect to [variable]" - Computes indefinite integrals for any variable
• "Integral" - Quick integration assuming variable x
• "Solve for [variable]" - Solves equations for specified variables
• "Simplify", "Expand", "Factor" - Standard algebraic operations