migrations/egui
1
0
Fork 0
mirror of https://github.com/emilk/egui.git synced 2026-06-26 22:53:14 -04:00
Code Activity

Refactor with some better types

Browse Source
This commit is contained in:
Emil Ernerfeldt
2018-12-23 20:06:40 +01:00
parent 856bbf4dae
commit 2e2e7a7839
8 changed files with 176 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/emgui.d.ts vendored
View File

@@ -1,11 +1,3 @@
/* tslint:disable */
export function show_gui(arg0: string): string;
export class Input {
free(): void;
screen_width: number
screen_height: number
mouse_x: number
mouse_y: number
}

53
docs/emgui.js
View File

@@ -67,59 +67,6 @@
};
function freeInput(ptr) {
wasm.__wbg_input_free(ptr);
}
/**
*/
class Input {
free() {
const ptr = this.ptr;
this.ptr = 0;
freeInput(ptr);
}
/**
* @returns {number}
*/
get screen_width() {
return wasm.__wbg_get_input_screen_width(this.ptr);
}
set screen_width(arg0) {
return wasm.__wbg_set_input_screen_width(this.ptr, arg0);
}
/**
* @returns {number}
*/
get screen_height() {
return wasm.__wbg_get_input_screen_height(this.ptr);
}
set screen_height(arg0) {
return wasm.__wbg_set_input_screen_height(this.ptr, arg0);
}
/**
* @returns {number}
*/
get mouse_x() {
return wasm.__wbg_get_input_mouse_x(this.ptr);
}
set mouse_x(arg0) {
return wasm.__wbg_set_input_mouse_x(this.ptr, arg0);
}
/**
* @returns {number}
*/
get mouse_y() {
return wasm.__wbg_get_input_mouse_y(this.ptr);
}
set mouse_y(arg0) {
return wasm.__wbg_set_input_mouse_y(this.ptr, arg0);
}
}
__exports.Input = Input;
__exports.__wbindgen_throw = function(ptr, len) {
throw new Error(getStringFromWasm(ptr, len));
};

BIN
docs/emgui_bg.wasm
View File

Binary file not shown.

49
docs/frontend.js
View File

@@ -1,7 +1,6 @@
// ----------------------------------------------------------------------------
// Paint module:
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;
@@ -11,33 +10,33 @@ function paintCommand(canvas, cmd) {
ctx.beginPath();
ctx.lineWidth = cmd.line_width;
ctx.strokeStyle = cmd.stroke_style;
ctx.moveTo(cmd.from[0], cmd.from[1]);
ctx.lineTo(cmd.to[0], cmd.to[1]);
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[0], cmd.center[1], cmd.radius, 0, 2 * Math.PI, false);
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[0];
var y = cmd.pos[1];
var width = cmd.size[0];
var height = cmd.size[1];
var radius = cmd.radius;
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 + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
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;
@@ -45,7 +44,7 @@ function paintCommand(canvas, cmd) {
ctx.font = cmd.font;
ctx.fillStyle = cmd.fill_style;
ctx.textAlign = cmd.text_align;
ctx.fillText(cmd.text, cmd.pos[0], cmd.pos[1]);
ctx.fillText(cmd.text, cmd.pos.x, cmd.pos.y);
return;
}
}
@@ -71,18 +70,16 @@ function js_gui(input) {
commands.push({
fillStyle: "#ff1111",
kind: "rounded_rect",
pos: [100, 100],
pos: { x: 100, y: 100 },
radius: 20,
size: [200, 100]
size: { x: 200, y: 100 }
});
return commands;
}
function paint_gui(canvas, mouse_pos) {
var input = {
mouse_x: mouse_pos.x,
mouse_y: mouse_pos.y,
screen_height: canvas.height,
screen_width: canvas.width
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++) {

85
docs/frontend.ts
View File

@@ -1,3 +1,8 @@
interface Vec2 {
x: number;
y: number;
}
// ----------------------------------------------------------------------------
// Paint module:
@@ -8,15 +13,15 @@ interface Clear {
interface Line {
kind: "line";
from: [number, number];
from: Vec2;
line_width: number;
stroke_style: string;
to: [number, number];
to: Vec2;
}
interface Circle {
kind: "circle";
center: [number, number];
center: Vec2;
fill_style: string;
radius: number;
}
@@ -24,16 +29,16 @@ interface Circle {
interface RoundedRect {
kind: "rounded_rect";
fill_style: string;
pos: [number, number];
radius: number;
size: [number, number];
pos: Vec2;
corner_radius: number;
size: Vec2;
}
interface Text {
kind: "text";
fill_style: string;
font: string;
pos: [number, number];
pos: Vec2;
text: string;
text_align: "start" | "center" | "end";
}
@@ -43,6 +48,8 @@ type PaintCmd = Clear | Line | Circle | RoundedRect | Text;
function paintCommand(canvas, cmd: PaintCmd) {
const ctx = canvas.getContext("2d");
// console.log(`cmd: ${JSON.stringify(cmd)}`);
switch (cmd.kind) {
case "clear":
ctx.fillStyle = cmd.fill_style;
@@ -53,40 +60,35 @@ function paintCommand(canvas, cmd: PaintCmd) {
ctx.beginPath();
ctx.lineWidth = cmd.line_width;
ctx.strokeStyle = cmd.stroke_style;
ctx.moveTo(cmd.from[0], cmd.from[1]);
ctx.lineTo(cmd.to[0], cmd.to[1]);
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[0], cmd.center[1], cmd.radius, 0, 2 * Math.PI, false);
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;
const x = cmd.pos[0];
const y = cmd.pos[1];
const width = cmd.size[0];
const height = cmd.size[1];
const radius = cmd.radius;
const x = cmd.pos.x;
const y = cmd.pos.y;
const width = cmd.size.x;
const height = cmd.size.y;
const r = cmd.corner_radius;
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(
x + width,
y + height,
x + width - radius,
y + height,
);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
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;
@@ -95,23 +97,16 @@ function paintCommand(canvas, cmd: PaintCmd) {
ctx.font = cmd.font;
ctx.fillStyle = cmd.fill_style;
ctx.textAlign = cmd.text_align;
ctx.fillText(cmd.text, cmd.pos[0], cmd.pos[1]);
ctx.fillText(cmd.text, cmd.pos.x, cmd.pos.y);
return;
}
}
// ----------------------------------------------------------------------------
interface Coord {
x: number;
y: number;
}
interface Input {
mouse_x: number;
mouse_y: number;
screen_height: number;
screen_width: number;
mouse_pos: Vec2;
screen_size: Vec2;
// TODO: mouse down etc
}
@@ -149,9 +144,9 @@ function js_gui(input: Input): PaintCmd[] {
commands.push({
fillStyle: "#ff1111",
kind: "rounded_rect",
pos: [100, 100],
pos: { x: 100, y: 100 },
radius: 20,
size: [200, 100],
size: { x: 200, y: 100 },
});
return commands;
@@ -159,10 +154,8 @@ function js_gui(input: Input): PaintCmd[] {
function paint_gui(canvas, mouse_pos) {
const input = {
mouse_x: mouse_pos.x,
mouse_y: mouse_pos.y,
screen_height: canvas.height,
screen_width: canvas.width,
mouse_pos,
screen_size: { x: canvas.width, y: canvas.height },
};
const commands = rust_gui(input);
@@ -173,7 +166,7 @@ function paint_gui(canvas, mouse_pos) {
// ----------------------------------------------------------------------------
function mouse_pos_from_event(canvas, evt): Coord {
function mouse_pos_from_event(canvas, evt): Vec2 {
const rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,