109 lines
3.7 KiB
JavaScript
109 lines
3.7 KiB
JavaScript
function paintCommand(canvas, cmd) {
|
|
var ctx = canvas.getContext("2d");
|
|
// console.log(`cmd: ${JSON.stringify(cmd)}`);
|
|
switch (cmd.kind) {
|
|
case "clear":
|
|
ctx.fillStyle = cmd.fill_style;
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
return;
|
|
case "line":
|
|
ctx.beginPath();
|
|
ctx.lineWidth = cmd.line_width;
|
|
ctx.strokeStyle = cmd.stroke_style;
|
|
ctx.moveTo(cmd.from.x, cmd.from.y);
|
|
ctx.lineTo(cmd.to.x, cmd.to.y);
|
|
ctx.stroke();
|
|
return;
|
|
case "circle":
|
|
ctx.fillStyle = cmd.fill_style;
|
|
ctx.beginPath();
|
|
ctx.arc(cmd.center.x, cmd.center.y, cmd.radius, 0, 2 * Math.PI, false);
|
|
ctx.fill();
|
|
return;
|
|
case "rounded_rect":
|
|
ctx.fillStyle = cmd.fill_style;
|
|
var x = cmd.pos.x;
|
|
var y = cmd.pos.y;
|
|
var width = cmd.size.x;
|
|
var height = cmd.size.y;
|
|
var r = cmd.corner_radius;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x + r, y);
|
|
ctx.lineTo(x + width - r, y);
|
|
ctx.quadraticCurveTo(x + width, y, x + width, y + r);
|
|
ctx.lineTo(x + width, y + height - r);
|
|
ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
|
|
ctx.lineTo(x + r, y + height);
|
|
ctx.quadraticCurveTo(x, y + height, x, y + height - r);
|
|
ctx.lineTo(x, y + r);
|
|
ctx.quadraticCurveTo(x, y, x + r, y);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
return;
|
|
case "text":
|
|
ctx.font = cmd.font;
|
|
ctx.fillStyle = cmd.fill_style;
|
|
ctx.textAlign = cmd.text_align;
|
|
ctx.fillText(cmd.text, cmd.pos.x, cmd.pos.y);
|
|
return;
|
|
}
|
|
}
|
|
// we'll defer our execution until the wasm is ready to go
|
|
function wasm_loaded() {
|
|
console.log("wasm loaded");
|
|
initialize();
|
|
}
|
|
// here we tell bindgen the path to the wasm file so it can start
|
|
// initialization and return to us a promise when it's done
|
|
wasm_bindgen("./emgui_bg.wasm")
|
|
.then(wasm_loaded)["catch"](console.error);
|
|
function rust_gui(input) {
|
|
return JSON.parse(wasm_bindgen.show_gui(JSON.stringify(input)));
|
|
}
|
|
// ----------------------------------------------------------------------------
|
|
function js_gui(input) {
|
|
var commands = [];
|
|
commands.push({
|
|
fillStyle: "#111111",
|
|
kind: "clear"
|
|
});
|
|
commands.push({
|
|
fillStyle: "#ff1111",
|
|
kind: "rounded_rect",
|
|
pos: { x: 100, y: 100 },
|
|
radius: 20,
|
|
size: { x: 200, y: 100 }
|
|
});
|
|
return commands;
|
|
}
|
|
function paint_gui(canvas, mouse_pos) {
|
|
var input = {
|
|
mouse_pos: mouse_pos,
|
|
screen_size: { x: canvas.width, y: canvas.height }
|
|
};
|
|
var commands = rust_gui(input);
|
|
for (var _i = 0, commands_1 = commands; _i < commands_1.length; _i++) {
|
|
var cmd = commands_1[_i];
|
|
paintCommand(canvas, cmd);
|
|
}
|
|
}
|
|
// ----------------------------------------------------------------------------
|
|
function mouse_pos_from_event(canvas, evt) {
|
|
var rect = canvas.getBoundingClientRect();
|
|
return {
|
|
x: evt.clientX - rect.left,
|
|
y: evt.clientY - rect.top
|
|
};
|
|
}
|
|
function initialize() {
|
|
var canvas = document.getElementById("canvas");
|
|
canvas.addEventListener("mousemove", function (evt) {
|
|
var mouse_pos = mouse_pos_from_event(canvas, evt);
|
|
paint_gui(canvas, mouse_pos);
|
|
}, false);
|
|
canvas.addEventListener("mousedown", function (evt) {
|
|
var mouse_pos = mouse_pos_from_event(canvas, evt);
|
|
paint_gui(canvas, mouse_pos);
|
|
}, false);
|
|
paint_gui(canvas, { x: 0, y: 0 });
|
|
}
|