About

Crafter.CppDOM is a C++ library that exposes the browser DOM api's to C++ WebAssembly.

How to use

Please view the examples folder, this is a snippit from the HelloElement example:

import Crafter.CppDOM;
using namespace Crafter::CppDOM;

int main(){
    HtmlElement body("body");
    body.SetInnerHTML("Hello World!");
}

You can also view the wiki for more detailed information.

It is highly recommended to use this with Crafter.Build, but it is not strictly required if the same way of injecting the env is followed. The following instructions will be for Crafter.Build.

Quickstart

create a project.json in an empty folder, open it in your preferred text editor. Create a basic project file, that describes your web project.

{
    "name": "main",
    "configurations": [
        {
            "name": "executable",
            "implementations": ["main"],
            "target": "wasm32-wasi",
            "debug" : true,
            "dependencies": [
                {
                    "path":"https://forgejo.catcrafts.net/Catcrafts/Crafter.CppDOM.git",
                    "configuration":"lib-debug"
                }
            ],
        }
    ]
}

Save and close the file, create a main.cpp

import Crafter.CppDOM;
using namespace Crafter::CppDOM;

int main(){
    HtmlElement body("body");
    body.SetInnerHTML("Hello World!");
}

Save and close, then run crafter-build build executable && caddy file-server --listen :8080 --root bin/executable. if you have caddy installed, if not use your favorite static file server instead. Now you can open the browser at http://localhost:8080 and Hello World! will appear in the browser.

This sample can also be viewed in the HelloElement example

Enhanced Event Handling Capabilities

The library now supports comprehensive event handling with rich event data for modern web applications:

Mouse Events

• AddClickListener() - Handles click events
• AddMouseOverListener() - Handles mouse over events
• AddMouseOutListener() - Handles mouse out events
• AddMouseMoveListener() - Handles mouse move events
• AddMouseDownListener() - Handles mouse down events
• AddMouseUpListener() - Handles mouse up events

Focus Events

• AddFocusListener() - Handles focus events
• AddBlurListener() - Handles blur events

Keyboard Events

• AddKeyDownListener() - Handles key down events with event data
• AddKeyUpListener() - Handles key up events with event data
• AddKeyPressListener() - Handles key press events with event data

Form Events

• AddChangeListener() - Handles change events with event data
• AddSubmitListener() - Handles form submit events
• AddInputListener() - Handles input events with event data

Window Events

• AddLoadListener() - Handles page load events
• AddErrorListener() - Handles error events with event data
• AddResizeListener() - Handles window resize events with event data
• AddScrollListener() - Handles scroll events with event data

Context Menu Events

• AddContextMenuListener() - Handles context menu events with event data

Drag and Drop Events

• AddDragStartListener() - Handles drag start events with event data
• AddDragEndListener() - Handles drag end events with event data
• AddDropListener() - Handles drop events with event data
• AddDragOverListener() - Handles drag over events with event data
• AddDragEnterListener() - Handles drag enter events with event data
• AddDragLeaveListener() - Handles drag leave events with event data

Wheel Events

• AddWheelListener() - Handles wheel events with event data

Example Usage with Event Data

import Crafter.CppDOM;
using namespace Crafter;

int main(){
    HtmlElement button("myButton");
    HtmlElement input("textInput");
    
    // Handle click event with position data
    button.AddClickListener([]() {
        // Simple click handler without event data
    });
    
    // Handle keyboard events with rich event data
    input.AddKeyDownListener([](Crafter::CppDOM::EventTypes::KeyboardEvent event) {
        // Access key information
        if (event.key == "Enter") {
            // Handle Enter key specifically
        }
        // Check modifier keys
        if (event.ctrlKey) {
            // Handle Ctrl+key combinations
        }
    });
    
    // Handle input changes with event data
    input.AddInputListener([](Crafter::CppDOM::EventTypes::InputEvent event) {
        // Access input data
        std::string data = event.data;
        bool isComposing = event.isComposing;
    });
    
    // Handle mouse movements with coordinates
    button.AddMouseMoveListener([](Crafter::CppDOM::EventTypes::MouseEvent event) {
        // Access mouse position
        double x = event.clientX;
        double y = event.clientY;
    });
    
    // Handle form changes with value
    input.AddChangeListener([](Crafter::CppDOM::EventTypes::ChangeEvent event) {
        // Access the new value
        std::string value = event.value;
    });
    
    // Handle window resize with dimensions
    button.AddResizeListener([](Crafter::CppDOM::EventTypes::ResizeEvent event) {
        // Access window dimensions
        unsigned int width = event.width;
        unsigned int height = event.height;
    });
}

Event Data Structures

The library provides specific event data structures for different event types:

KeyboardEvent

• std::string key - The key value
• std::string code - The physical key code
• int keyCode - Legacy key code
• bool altKey - Whether Alt key was pressed
• bool ctrlKey - Whether Ctrl key was pressed
• bool shiftKey - Whether Shift key was pressed
• bool metaKey - Whether Meta key was pressed

MouseEvent

• double clientX - X coordinate relative to viewport
• double clientY - Y coordinate relative to viewport
• double screenX - X coordinate relative to screen
• double screenY - Y coordinate relative to screen
• int button - Which mouse button was pressed
• int buttons - Which mouse buttons were pressed
• bool altKey - Whether Alt key was pressed
• bool ctrlKey - Whether Ctrl key was pressed
• bool shiftKey - Whether Shift key was pressed
• bool metaKey - Whether Meta key was pressed

InputEvent

• std::string data - The input data
• bool isComposing - Whether input is in composition mode

ChangeEvent

• std::string value - The new value

ResizeEvent

• unsigned int width - Window width
• unsigned int height - Window height

ScrollEvent

• double scrollX - Horizontal scroll position
• double scrollY - Vertical scroll position

ErrorEvent

• std::string message - Error message
• std::string filename - File where error occurred
• unsigned int lineno - Line number
• unsigned int colno - Column number

DragEvent

• All MouseEvent properties plus:
• double offsetX - X offset from drag start
• double offsetY - Y offset from drag start

WheelEvent

• All MouseEvent properties plus:
• double deltaX - Horizontal scroll amount
• double deltaY - Vertical scroll amount
• double deltaZ - Depth scroll amount
• int deltaMode - Scroll mode