Plasma Wolf

A radial context menu library that appears on click and enables command selection by pointing in a direction. The project implements a dynamic menu system with any number of segments, easily integrable into web applications.

DEMO | Documentation (auto generated)

Features

• Radial Menu Interface: Commands are arranged in directions around a center point
• Direction-Based Navigation: Move your mouse in a specific direction to select commands
• Context-Aware Menus: Different menu states with different available commands
• Flexible Command System: Support for both action commands and navigation commands

Installation

npm i @wxn0brp/plasma-wolf

API Documentation (Manually, older but better)

Check out API documentation.

Architecture

The system consists of several key components:

• WolfMenu class: Core logic for handling mouse movements, command execution, and menu display
• Command system: Structured way to define actions and navigation commands
• Direction detection: Algorithm that determines which direction the mouse moved in
• HTML structure: Predefined div elements for each direction

Command Structure

Commands can be of two types:

• Action Commands: Execute a function when selected
• Navigation Commands: Switch to a different menu context

Example command definition:

{
    name: "Execute action",    // Display name
    action: () => console.log("Action executed")  // Execute function
}

or

{
    name: "Navigate",          // Display name
    go: "other_context"       // Navigate to different context
}

Contributing

Contributions are welcome! Please fork the repository and create a pull request.

License

MIT License - see the LICENSE file for details.