Catcrafts/Crafter.CppDOM
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improved bindings

Browse source
This commit is contained in:
Jorijn van der Graaf 2025-02-12 22:22:06 +01:00
commit aae349f803
8 changed files with 69 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -1,2 +1,4 @@
build/
bin/
samples/HelloWorld/bin
samples/HelloWorld/build

13
Crafter.CppDOM.cppm
View file

@ -22,6 +22,7 @@ module;
#include <cstddef>
#include <cstdint>
#include <cstdlib>
#include <string>
export module Crafter.CppDOM;
extern "C" {
@ -36,8 +37,16 @@ extern "C" {
export namespace Crafter::CppDOM {
__attribute__((import_module("env"), import_name("setInnerHTML"))) void SetInnerHTML(const char* id, std::size_t idLenght, const char* html, std::size_t htmlLenght);
export namespace Crafter::CppDOM::Bindings {
__attribute__((import_module("env"), import_name("getElementById"))) void* GetElementById(const char* id, std::size_t idLenght);
inline void* GetElementById(const std::string& id){
return GetElementById(id.c_str(), id.size());
}
__attribute__((import_module("env"), import_name("setInnerHTML"))) void SetInnerHTML(void* ptr, const char* html, std::size_t htmlLenght);
inline void SetInnerHTML(void* ptr, const std::string& html){
SetInnerHTML(ptr, html.c_str(), html.size());
}
__attribute__((import_module("env"), import_name("freeJs"))) void FreeJs(void* ptr);
// __attribute__((import_module("env"), import_name("strokeRect"))) void StrokeRect(std::uint64_t id, std::uint32_t x, std::uint32_t y, std::uint32_t width, std::uint32_t height, const char* color, std::size_t colorLenght);
// __attribute__((import_module("env"), import_name("putImageData"))) void PutImageData(std::uint64_t id, Crafter::Web::Pixel* buffer, std::uint32_t width, std::uint32_t height);
// __attribute__((import_module("env"), import_name("fetch"))) void Fetch(void* obj, const char* url, std::size_t urlCallback, char* buffer, void (*listener)(void* obj, std::uint32_t, char*));

85
Crafter.CppDOM.js
View file

@ -18,86 +18,29 @@ License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
*/
function setInnerHTML(id, idLenght, html, htmlLenght) {
const decoder = new TextDecoder();
document.getElementById(decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, id, idLenght))).innerHTML = decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, html, htmlLenght));
let memorycounter = -1;
const jsmemory = new Map();
function freeJs(ptr) {
jsmemory.delete(ptr);
}
function strokeRect(id, x, y, width, height, color, colorLenght) {
const decoder = new TextDecoder();
const canvas = document.getElementById(id.toString());
const ctx = canvas.getContext("2d");
ctx.strokeStyle = decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, color, colorLenght));
ctx.strokeRect(x, y, width, height);
function getElementById(id, idLenght) {
const obj = document.getElementById(decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, id, idLenght)));
jsmemory.set(++memorycounter, obj);
return memorycounter;
}
function putImageData(id, buffer, width, height) {
const decoder = new TextDecoder();
const canvas = document.getElementById(id.toString());
const ctx = canvas.getContext("2d");
const view = new Uint8ClampedArray(window.crafter_webbuild_wasi.instance.exports.memory.buffer, buffer, 640*360*4);
const imageData = new ImageData(view, 640, 360);
ctx.putImageData(imageData, 0, 0);
function setInnerHTML(ptr, html, htmlLenght) {
jsmemory.get(ptr).innerHTML = decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, html, htmlLenght));
}
function draw(id, x, y, text, textLenght){
const decoder = new TextDecoder();
const canvas = document.getElementById("1");
let ctx = canvas.getContext("2d")
ctx.fillStyle = "red";
ctx.font = '20px sans-serif';
var textString = decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, text, textLenght))
let textWidth = ctx.measureText(textString).width;
ctx.fillText(textString , x - (textWidth / 2), y);
}
function setTimeoutt(obj, time, callback) {
setTimeout(() => {
window.crafter_webbuild_wasi.instance.exports.__indirect_function_table.get(callback)(obj);
}, time);
}
function addEventListener(id, eventId, listener) {
}
function fetchh(obj, url, urlLenght, buffer, callback) {
const decoder = new TextDecoder();
const view = new Uint8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, buffer);
fetch(decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, url, urlLenght)), {
// Adding Get request
method: "GET",
// Setting headers
headers: {
'Content-Type': 'application/octet-stream',
},
// Setting response type to arraybuffer
responseType: "arraybuffer"
}).then(x => x.arrayBuffer()).then(
y => {
const outputBytes = new Uint8Array(y);
for(let i = 0; i < outputBytes.length; i++) {
view[i] = outputBytes[i]
}
window.crafter_webbuild_wasi.instance.exports.__indirect_function_table.get(callback)(obj, outputBytes.length, buffer);
}
);
return 1;
}
let env = {
freeJs:freeJs,
getElementById:getElementById,
setInnerHTML:setInnerHTML,
addEventListener:addEventListener,
strokeRect:strokeRect,
fetch:fetchh,
putImageData:putImageData,
setTimeout:setTimeoutt,
draw:draw
}
if(window.crafter_webbuild_env){

13
README.md
View file

@ -37,13 +37,14 @@ Create a basic project file, that describes your web project.
```
Save and close the file, create a ``main.cpp``
```cpp
import Crafter.Web;
using namespace Crafter::Web;
import Crafter.CppDOM;
int main(){
const char id[] = "body";
const char content = "<h1>Hello from C++!</h1>";
Crafter::CppDOM::SetInnerHTML(id, sizeof(id)-1, content.c_str(), content.size()-1);
void* body = Crafter::CppDOM::Bindings::GetElementById("body");
Crafter::CppDOM::Bindings::SetInnerHTML(body, "Hello World!");
Crafter::CppDOM::Bindings::FreeJs(body);
}
```
Save and close, then run ``crafter-webbuild serve -c debug``. Now you can open the browser at ``http://localhost:8080/`` and ``Hello from C++!`` will appear in the browser.
Save and close, then run ``crafter-webbuild serve -c debug``. 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 [Hello World sample](https://github.com/Catcrafts/Crafter.CppDOM/tree/master/samples/HelloWorld)

2
project.json
View file

@ -1,5 +1,5 @@
{
"name": "crafter-web",
"name": "crafter-cppdom",
"configurations": [
{
"name": "base",

2
samples/HelloWorld/README.md Normal file
View file

@ -0,0 +1,2 @@
This sample demonstrates a simple hello world.
Run ``crafter-webbuild serve -c debug`` and go to ``localhost:8080`` to view it.

7
samples/HelloWorld/main.cpp Normal file
View file

@ -0,0 +1,7 @@
import Crafter.CppDOM;
int main(){
void* body = Crafter::CppDOM::Bindings::GetElementById("body");
Crafter::CppDOM::Bindings::SetInnerHTML(body, "Hello World!");
Crafter::CppDOM::Bindings::FreeJs(body);
}

23
samples/HelloWorld/project.json Normal file
View file

@ -0,0 +1,23 @@
{
"name": "hello-world",
"configurations": [
{
"name": "debug",
"standard": "c++26",
"source_files": ["main"],
"module_files": [],
"additional_files": [],
"build_dir": "./build",
"output_dir": "./bin",
"optimization_level": "0",
"target": "wasm32-unknown-wasi",
"type": "executable",
"dependencies": [
{
"path":"/home/jorijn/repos/Crafter.CppDOM/project.json",
"configuration":"debug"
}
]
}
]
}