added event example

additional/env.js

@@ -59,7 +59,7 @@ function addClickListener(ptr, handlerID) {
     // Create a handler that will trigger a notification to C++
     const handler = function (event) {
         const { ExecuteClickHandler } = window.crafter_webbuild_wasi.instance.exports;
-        ExecuteClickHandler(handlerID);
+        ExecuteClickHandler(handlerID, event.clientX, event.clientY, event.screenX, event.screenY, event.button, event.buttons, event.altKey, event.ctrlKey, event.shiftKey, event.metaKey);
     };
 
     eventHandlers.set(`${ptr}-${handlerID}`, handler);

examples/AllEventHandling/README.md

@@ -0,0 +1,50 @@
+# All Event Handling Example
+
+This example demonstrates all available event types in Crafter.CppDOM:
+
+## Events Demonstrated
+
+### Mouse Events
+- Click
+- Mouse Over
+- Mouse Out
+- Mouse Move
+- Mouse Down
+- Mouse Up
+
+### Keyboard Events
+- Key Down
+- Key Up
+- Key Press
+
+### Focus Events
+- Focus
+- Blur
+
+### Form Events
+- Input
+- Change
+
+### Window Events
+- Resize
+- Scroll
+- Context Menu
+
+### Drag and Drop Events
+- Drag Start
+- Drag End
+- Drag Over
+- Drag Enter
+- Drag Leave
+- Drop
+
+### Wheel Events
+- Wheel (Mouse wheel scrolling)
+
+## How to Run
+
+1. Build the project using the build system
+2. Run the executable with `./run.sh`
+3. Open your browser to `http://localhost:8080`
+
+The demo will show various event handlers in action through interactive elements.

examples/AllEventHandling/main.cpp

@@ -0,0 +1,189 @@
+/*
+ * Enhanced Event Handling Demo
+ * This example showcases all available event types in Crafter.CppDOM
+ */
+
+import Crafter.CppDOM;
+using namespace Crafter;
+import std;
+
+// Create the main container element
+HtmlElement* body = new HtmlElement("body", "<div id='container'>"
+    "<h1>Enhanced Event Handling Demo</h1>"
+    "<div id='events-container'>"
+        "<div class='event-section'>"
+            "<h2>Mouse Events</h2>"
+            "<button id='mouseButton'>Click Me!</button>"
+            "<div id='mouseOutput'></div>"
+        "</div>"
+        "<div class='event-section'>"
+            "<h2>Keyboard Events</h2>"
+            "<input type='text' id='keyInput' placeholder='Press keys here'>"
+            "<div id='keyOutput'></div>"
+        "</div>"
+        "<div class='event-section'>"
+            "<h2>Focus Events</h2>"
+            "<input type='text' id='focusInput' placeholder='Focus me!'>"
+            "<div id='focusOutput'></div>"
+        "</div>"
+        "<div class='event-section'>"
+            "<h2>Form Events</h2>"
+            "<input type='text' id='formInput' placeholder='Type something'>"
+            "<select id='formSelect'>"
+                "<option value='option1'>Option 1</option>"
+                "<option value='option2'>Option 2</option>"
+                "<option value='option3'>Option 3</option>"
+            "</select>"
+            "<div id='formOutput'></div>"
+        "</div>"
+        "<div class='event-section'>"
+            "<h2>Window Events</h2>"
+            "<div id='windowOutput'></div>"
+        "</div>"
+        "<div class='event-section'>"
+            "<h2>Drag & Drop Events</h2>"
+            "<div id='dragSource' draggable='true'>Drag Me!</div>"
+            "<div id='dropTarget'>Drop Here</div>"
+            "<div id='dragOutput'></div>"
+        "</div>"
+        "<div class='event-section'>"
+            "<h2>Wheel Events</h2>"
+            "<div id='wheelContainer'>Scroll here</div>"
+            "<div id='wheelOutput'></div>"
+        "</div>"
+    "</div>"
+    "</div>");
+
+// Get references to elements
+HtmlElement* mouseButton = new HtmlElement("mouseButton");
+HtmlElement* mouseOutput = new HtmlElement("mouseOutput");
+HtmlElement* keyInput = new HtmlElement("keyInput");
+HtmlElement* keyOutput = new HtmlElement("keyOutput");
+HtmlElement* focusInput = new HtmlElement("focusInput");
+HtmlElement* focusOutput = new HtmlElement("focusOutput");
+HtmlElement* formInput = new HtmlElement("formInput");
+HtmlElement* formSelect = new HtmlElement("formSelect");
+HtmlElement* formOutput = new HtmlElement("formOutput");
+HtmlElement* windowOutput = new HtmlElement("windowOutput");
+HtmlElement* dragSource = new HtmlElement("dragSource");
+HtmlElement* dropTarget = new HtmlElement("dropTarget");
+HtmlElement* dragOutput = new HtmlElement("dragOutput");
+HtmlElement* wheelContainer = new HtmlElement("wheelContainer");
+HtmlElement* wheelOutput = new HtmlElement("wheelOutput");
+
+int main() {
+    // Mouse Events
+    mouseButton->AddClickListener([&](MouseEvent event) {
+        mouseOutput->SetInnerHTML(std::format("<p><strong>Click:</strong> X={}, Y={}</p>", event.clientX, event.clientY));
+    });
+
+    mouseButton->AddMouseOverListener([&](MouseEvent event) {
+        mouseOutput->SetInnerHTML(std::format("<p><strong>Mouse Over:</strong> X={}, Y={}</p>", event.clientX, event.clientY));
+    });
+
+    mouseButton->AddMouseOutListener([&](MouseEvent event) {
+        mouseOutput->SetInnerHTML(std::format("<p><strong>Mouse Out:</strong> X={}, Y={}</p>", event.clientX, event.clientY));
+    });
+
+    mouseButton->AddMouseMoveListener([&](MouseEvent event) {
+        mouseOutput->SetInnerHTML(std::format("<p><strong>Mouse Move:</strong> X={}, Y={}</p>", event.clientX, event.clientY));
+    });
+
+    mouseButton->AddMouseDownListener([&](MouseEvent event) {
+        mouseOutput->SetInnerHTML(std::format("<p><strong>Mouse Down:</strong> Button={}, X={}, Y={}</p>", event.button, event.clientX, event.clientY));
+    });
+
+    mouseButton->AddMouseUpListener([&](MouseEvent event) {
+        mouseOutput->SetInnerHTML(std::format("<p><strong>Mouse Up:</strong> Button={}, X={}, Y={}</p>", event.button, event.clientX, event.clientY));
+    });
+
+    // Keyboard Events
+    keyInput->AddKeyDownListener([&](KeyboardEvent event) {
+        std::string keyInfo = std::format("<p><strong>Key Down:</strong> Key='{}', Code={}, Ctrl={}, Shift={}, Alt={}</p>", 
+            event.key, event.keyCode, event.ctrlKey, event.shiftKey, event.altKey);
+        keyOutput->SetInnerHTML(keyInfo);
+    });
+
+    keyInput->AddKeyUpListener([&](KeyboardEvent event) {
+        std::string keyInfo = std::format("<p><strong>Key Up:</strong> Key='{}', Code={}, Ctrl={}, Shift={}, Alt={}</p>", 
+            event.key, event.keyCode, event.ctrlKey, event.shiftKey, event.altKey);
+        keyOutput->SetInnerHTML(keyInfo);
+    });
+
+    keyInput->AddKeyPressListener([&](KeyboardEvent event) {
+        std::string keyInfo = std::format("<p><strong>Key Press:</strong> Key='{}', Code={}, Ctrl={}, Shift={}, Alt={}</p>", 
+            event.key, event.keyCode, event.ctrlKey, event.shiftKey, event.altKey);
+        keyOutput->SetInnerHTML(keyInfo);
+    });
+
+    // Focus Events
+    focusInput->AddFocusListener([&](FocusEvent event) {
+        focusOutput->SetInnerHTML("<p><strong>Focus:</strong> Element gained focus</p>");
+    });
+
+    focusInput->AddBlurListener([&](FocusEvent event) {
+        focusOutput->SetInnerHTML("<p><strong>Blur:</strong> Element lost focus</p>");
+    });
+
+    // Form Events
+    formInput->AddInputListener([&](InputEvent event) {
+        formOutput->SetInnerHTML(std::format("<p><strong>Input:</strong> Value='{}'</p>", event.data));
+    });
+
+    formInput->AddChangeListener([&](ChangeEvent event) {
+        formOutput->SetInnerHTML(std::format("<p><strong>Change:</strong> Value='{}'</p>", event.value));
+    });
+
+    formSelect->AddChangeListener([&](ChangeEvent event) {
+        formOutput->SetInnerHTML(std::format("<p><strong>Select Change:</strong> Value='{}'</p>", event.value));
+    });
+
+    // Window Events
+    // Resize event
+    body->AddResizeListener([&](ResizeEvent event) {
+        windowOutput->SetInnerHTML(std::format("<p><strong>Resize:</strong> Width={}, Height={}</p>", event.width, event.height));
+    });
+
+    // Scroll event
+    body->AddScrollListener([&](ScrollEvent event) {
+        windowOutput->SetInnerHTML(std::format("<p><strong>Scroll:</strong> X={}, Y={}</p>", event.scrollX, event.scrollY));
+    });
+
+    // Context Menu Event
+    body->AddContextMenuListener([&](MouseEvent event) {
+        windowOutput->SetInnerHTML(std::format("<p><strong>Context Menu:</strong> X={}, Y={}</p>", event.clientX, event.clientY));
+    });
+
+    // Drag and Drop Events
+    dragSource->AddDragStartListener([&](MouseEvent event) {
+        dragOutput->SetInnerHTML("<p><strong>Drag Start:</strong> Dragging started</p>");
+    });
+
+    dragSource->AddDragEndListener([&](MouseEvent event) {
+        dragOutput->SetInnerHTML("<p><strong>Drag End:</strong> Dragging ended</p>");
+    });
+
+    dropTarget->AddDragOverListener([&](MouseEvent event) {
+        dragOutput->SetInnerHTML("<p><strong>Drag Over:</strong> Dragging over drop target</p>");
+    });
+
+    dropTarget->AddDragEnterListener([&](MouseEvent event) {
+        dragOutput->SetInnerHTML("<p><strong>Drag Enter:</strong> Drag entered drop target</p>");
+    });
+
+    dropTarget->AddDragLeaveListener([&](MouseEvent event) {
+        dragOutput->SetInnerHTML("<p><strong>Drag Leave:</strong> Drag left drop target</p>");
+    });
+
+    dropTarget->AddDropListener([&](MouseEvent event) {
+        dragOutput->SetInnerHTML("<p><strong>Drop:</strong> Item dropped</p>");
+    });
+
+    // Wheel Event
+    wheelContainer->AddWheelListener([&](WheelEvent event) {
+        wheelOutput->SetInnerHTML(std::format("<p><strong>Wheel:</strong> DeltaX={}, DeltaY={}, DeltaZ={}</p>", 
+            event.deltaX, event.deltaY, event.deltaZ));
+    });
+
+    return 0;
+}

examples/EnhancedEventHandling/main.cpp

@@ -1,21 +0,0 @@
-import Crafter.CppDOM;
-using namespace Crafter;
-import std;
-
-HtmlElement* body = new HtmlElement("body", "<div id='container'>"
-    "<h1>Enhanced Event Handling Demo</h1>"
-    "<input type='text' id='keyInput' placeholder='Press keys here'>"
-    "<div id='output'></div>"
-    "</div>");
-HtmlElement* keyInput = new HtmlElement("keyInput");
-HtmlElement* output = new HtmlElement("output");
-
-int main(){
-    keyInput->AddKeyDownListener([&](KeyboardEvent event) {
-        std::string keyInfo = std::format("<p>Key pressed: {}</p>", event.key);
-        if (event.ctrlKey) keyInfo += "<p>Ctrl key pressed</p>";
-        if (event.shiftKey) keyInfo += "<p>Shift key pressed</p>";
-        if (event.altKey) keyInfo += "<p>Alt key pressed</p>";
-        output->SetInnerHTML(keyInfo);
-    });
-}

examples/InteractiveElement/main.cpp

@@ -9,8 +9,8 @@ HtmlElement* button = new HtmlElement("myButton"); //prevent destruction
 
 
 int main() {
-    button->AddClickListener([](){
+    button->AddClickListener([](Crafter::MouseEvent event){
         auto output = HtmlElement("output");
-        output.SetInnerHTML("Button was clicked!");
+        output.SetInnerHTML("Button was clicked at (" + std::to_string(event.clientX) + ", " + std::to_string(event.clientY) + ")!");
     });
 }

interfaces/Crafter.CppDOM-BindingsExport.cppm

@@ -24,7 +24,7 @@ import :EventTypes;
 
 export namespace Crafter::CppDOMBindings {
     std::int32_t clickHandlerMaxId = 0;
-    std::unordered_map<int, std::function<void(void)>>* clickHandlers = new std::unordered_map<int, std::function<void(void)>>();
+    std::unordered_map<int, std::function<void(Crafter::MouseEvent)>>* clickHandlers = new std::unordered_map<int, std::function<void(Crafter::MouseEvent)>>();
     
     std::int32_t mouseOverHandlerMaxId = 0;
     std::unordered_map<int, std::function<void(Crafter::MouseEvent)>>* mouseOverHandlers = new std::unordered_map<int, std::function<void(Crafter::MouseEvent)>>();
@@ -106,8 +106,8 @@ extern "C" {
         std::free(ptr); 
     }
 
-    __attribute__((export_name("ExecuteClickHandler"))) void ExecuteClickHandler(std::int32_t handlerID) {
+    __attribute__((export_name("ExecuteClickHandler"))) void ExecuteClickHandler(std::int32_t handlerID, double clientX, double clientY, double screenX, double screenY, std::int32_t button, std::int32_t buttons, bool altKey, bool ctrlKey, bool shiftKey, bool metaKey) {
-        Crafter::CppDOMBindings::clickHandlers->find(handlerID)->second();
+        Crafter::CppDOMBindings::clickHandlers->find(handlerID)->second(Crafter::MouseEvent(clientX, clientY, screenX, screenY, button, buttons, altKey, ctrlKey, shiftKey, metaKey));
     }
     
     __attribute__((export_name("ExecuteMouseOverHandler"))) void ExecuteMouseOverHandler(std::int32_t handlerID, double clientX, double clientY, double screenX, double screenY, std::int32_t button, std::int32_t buttons, bool altKey, bool ctrlKey, bool shiftKey, bool metaKey) {

interfaces/Crafter.CppDOM-HtmlElement.cppm

@@ -63,7 +63,7 @@ namespace Crafter {
             CppDOMBindings::SetInnerHTML(ptr, html);
         }
         
-        std::int32_t AddClickListener(std::function<void(void)> callback) {
+        std::int32_t AddClickListener(std::function<void(Crafter::MouseEvent)> callback) {
             std::int32_t id = CppDOMBindings::clickHandlerMaxId++;
             clickHandlers.push_back(id);
             CppDOMBindings::clickHandlers->insert({id, callback});