Support for mouse element

[mcoms]

Is your feature request related to a problem? Please describe.
No, this is a pure feature request.

Describe the solution you'd like
I would like support for rendering a simple 2D mouse layout with forward/back buttons, left mouse, middle mouse, and right mouse buttons next to the keyboard. I understand that this may be out of the scope of simple-keyboard.

Describe alternatives you've considered
Creating my own custom rendered element for the mouse, outside of simple keyboard.

Additional context
I use simple keyboard at the moment to set keybinds for my web application. So that the user can assign specific actions to keys on their keyboard. I would like if this could extend to mouse buttons as well.

[Patchnote-v2]

So long as you're not expecting simple-keyboard to handle detection of the mouse inputs like it can with a physical keyboard, this is easily achievable in just like how the numpad works in the full keyboard demo. In my project I'm using react-simple-keyboard.
This is how I define the mouse:

let commonKeyboardOptions = {
    ...
    syncInstanceInputs: true,
}

const keyboardMouseExtraOptions = {
    ...commonKeyboardOptions,
    layout: {
        default: ["{mouseextra2}", "{mouseextra1}"],
    },
    display: {
        "{mouseextra2}": "Mouse Extra 2 ↑",
        "{mouseextra1}": "↓ Mouse Extra 1",
    }
};

const keyboardMousePrimaryOptions = {
    ...commonKeyboardOptions,
    layout: {
        default: ["{wheelup}", "{mouse1} {mousemiddle} {mouse2}", "{wheeldown}"];,
    },
    display: {
        "{mouse1}": "Mouse 1",
        "{mouse2}": "Mouse 2",
        "{wheelup}": "Wheel Up",
        "{mousemiddle}": "Middle",
        "{wheeldown}": "Wheel Down",
    }
};

---

The HTML:

<div className="mouse">
    <Keyboard baseClass={"simple-keyboard-mouse-extra"}
              {...keyboardMouseExtraOptions}
    />
    <Keyboard baseClass={"simple-keyboard-mouse-primary"}
              {...keyboardMousePrimaryOptions}
    />
</div>

---

Some SCSS that's passable. It's not pretty but it is functional:

.mouse {
  display: flex;
  display-items: flex-end;
  text-align: center;

    .simple-keyboard-mouse-extra {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100px;
        
        .hg-button-mouseextra1, .hg-button-mouseextra2 {
            height: 85px;
        }
    }
      
    .simple-keyboard-mouse-primary {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .hg-button-wheelup {
            flex: 0 0 100px;
        }
        .hg-button-wheeldown {
            flex: 0 0 100px;
        }
    }
}

---

Note that my project deals with external hotkey files for a different program, so the keycodes for mouse buttons are predetermined. When a mouse key is selected I look up the keycode and go from there.

let keycodes = {
    ...
    '{mouseextra2}': 251,
    '{mouseextra1}': 252,
    '{mousemiddle}': 253,
    '{wheeldown}': 254,
    '{wheelup}': 255,
}

---

How you handle storing of keybinds as well as detection of pressing hotkeys is up to you. For my use case it works great.

[Francisco Hodge]

I would also vouch for a custom solution as shown by @Patchnote-v2. I will track this as a Proposal in case we want to make this a built-in in a future version.