From 702ec2337217c869e8a7e5afc42cf0dcf5e53512 Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Fri, 28 Dec 2018 00:51:40 +0100 Subject: [PATCH] Full screen canvas --- docs/frontend.js | 59 ++++++++++++++++++++++++++++++--------------- docs/frontend.ts | 63 +++++++++++++++++++++++++++++++++--------------- docs/index.html | 9 +++---- src/app.rs | 6 +++++ 4 files changed, 93 insertions(+), 44 deletions(-) diff --git a/docs/frontend.js b/docs/frontend.js index 56f66a3d..95b35564 100644 --- a/docs/frontend.js +++ b/docs/frontend.js @@ -111,38 +111,59 @@ function paint_gui(canvas, input) { var g_mouse_pos = { x: -1000.0, y: -1000.0 }; var g_mouse_down = false; function get_input(canvas) { + var pixels_per_point = window.devicePixelRatio || 1; + var ctx = canvas.getContext("2d"); + ctx.scale(pixels_per_point, pixels_per_point); + // Resize based on screen size: + canvas.setAttribute("width", window.innerWidth * pixels_per_point); + canvas.setAttribute("height", window.innerHeight * pixels_per_point); return { mouse_down: g_mouse_down, mouse_pos: g_mouse_pos, screen_size: { x: canvas.width, y: canvas.height } }; } -function mouse_pos_from_event(canvas, evt) { +function mouse_pos_from_event(canvas, event) { var rect = canvas.getBoundingClientRect(); return { - x: evt.clientX - rect.left, - y: evt.clientY - rect.top + x: event.clientX - rect.left, + y: event.clientY - rect.top }; } function initialize() { + console.log("window.devicePixelRatio: " + window.devicePixelRatio); var canvas = document.getElementById("canvas"); - canvas.addEventListener("mousemove", function (evt) { - g_mouse_pos = mouse_pos_from_event(canvas, evt); - paint_gui(canvas, get_input(canvas)); - }, false); - canvas.addEventListener("mouseleave", function (evt) { + var repaint = function () { return paint_gui(canvas, get_input(canvas)); }; + canvas.addEventListener("mousemove", function (event) { + g_mouse_pos = mouse_pos_from_event(canvas, event); + repaint(); + event.stopPropagation(); + event.preventDefault(); + }); + canvas.addEventListener("mouseleave", function (event) { g_mouse_pos = { x: -1000.0, y: -1000.0 }; - paint_gui(canvas, get_input(canvas)); - }, false); - canvas.addEventListener("mousedown", function (evt) { - g_mouse_pos = mouse_pos_from_event(canvas, evt); + repaint(); + event.stopPropagation(); + event.preventDefault(); + }); + canvas.addEventListener("mousedown", function (event) { + g_mouse_pos = mouse_pos_from_event(canvas, event); g_mouse_down = true; - paint_gui(canvas, get_input(canvas)); - }, false); - canvas.addEventListener("mouseup", function (evt) { - g_mouse_pos = mouse_pos_from_event(canvas, evt); + repaint(); + event.stopPropagation(); + event.preventDefault(); + }); + canvas.addEventListener("mouseup", function (event) { + g_mouse_pos = mouse_pos_from_event(canvas, event); g_mouse_down = false; - paint_gui(canvas, get_input(canvas)); - }, false); - paint_gui(canvas, get_input(canvas)); + repaint(); + event.stopPropagation(); + event.preventDefault(); + }); + window.addEventListener("load", repaint); + window.addEventListener("pagehide", repaint); + window.addEventListener("pageshow", repaint); + window.addEventListener("resize", repaint); + // setInterval(repaint, 16); + repaint(); } diff --git a/docs/frontend.ts b/docs/frontend.ts index 86169fa0..75f3e268 100644 --- a/docs/frontend.ts +++ b/docs/frontend.ts @@ -52,7 +52,7 @@ interface Text { kind: "text"; fill_color: Color | null; font_name: string; // e.g. "Palatino" - font_size: number, // Height in pixels, e.g. 12 + font_size: number; // Height in pixels, e.g. 12 pos: Vec2; stroke_color: Color | null; text: string; @@ -211,6 +211,15 @@ let g_mouse_pos = { x: -1000.0, y: -1000.0 }; let g_mouse_down = false; function get_input(canvas): RawInput { + const pixels_per_point = window.devicePixelRatio || 1; + + const ctx = canvas.getContext("2d"); + ctx.scale(pixels_per_point, pixels_per_point); + + // Resize based on screen size: + canvas.setAttribute("width", window.innerWidth * pixels_per_point); + canvas.setAttribute("height", window.innerHeight * pixels_per_point); + return { mouse_down: g_mouse_down, mouse_pos: g_mouse_pos, @@ -218,54 +227,68 @@ function get_input(canvas): RawInput { }; } -function mouse_pos_from_event(canvas, evt): Vec2 { +function mouse_pos_from_event(canvas, event): Vec2 { const rect = canvas.getBoundingClientRect(); return { - x: evt.clientX - rect.left, - y: evt.clientY - rect.top, + x: event.clientX - rect.left, + y: event.clientY - rect.top, }; } function initialize() { + console.log(`window.devicePixelRatio: ${window.devicePixelRatio}`); + const canvas = document.getElementById("canvas"); + const repaint = () => paint_gui(canvas, get_input(canvas)); canvas.addEventListener( "mousemove", - (evt) => { - g_mouse_pos = mouse_pos_from_event(canvas, evt); - paint_gui(canvas, get_input(canvas)); + (event) => { + g_mouse_pos = mouse_pos_from_event(canvas, event); + repaint(); + event.stopPropagation(); + event.preventDefault(); }, - false, ); canvas.addEventListener( "mouseleave", - (evt) => { + (event) => { g_mouse_pos = { x: -1000.0, y: -1000.0 }; - paint_gui(canvas, get_input(canvas)); + repaint(); + event.stopPropagation(); + event.preventDefault(); }, - false, ); canvas.addEventListener( "mousedown", - (evt) => { - g_mouse_pos = mouse_pos_from_event(canvas, evt); + (event) => { + g_mouse_pos = mouse_pos_from_event(canvas, event); g_mouse_down = true; - paint_gui(canvas, get_input(canvas)); + repaint(); + event.stopPropagation(); + event.preventDefault(); }, - false, ); canvas.addEventListener( "mouseup", - (evt) => { - g_mouse_pos = mouse_pos_from_event(canvas, evt); + (event) => { + g_mouse_pos = mouse_pos_from_event(canvas, event); g_mouse_down = false; - paint_gui(canvas, get_input(canvas)); + repaint(); + event.stopPropagation(); + event.preventDefault(); }, - false, ); - paint_gui(canvas, get_input(canvas)); + window.addEventListener("load", repaint); + window.addEventListener("pagehide", repaint); + window.addEventListener("pageshow", repaint); + window.addEventListener("resize", repaint); + + // setInterval(repaint, 16); + + repaint(); } diff --git a/docs/index.html b/docs/index.html index 2308071f..31720ec9 100644 --- a/docs/index.html +++ b/docs/index.html @@ -9,12 +9,11 @@ /* Remove touch delay: */ touch-action: manipulation; } - body { background: #000000; - color: #bbbbbb; - max-width: 1024px; - margin: auto; + } + html, body { + overflow: hidden; } @@ -38,6 +37,6 @@ - + diff --git a/src/app.rs b/src/app.rs index 8598697f..567bf69b 100644 --- a/src/app.rs +++ b/src/app.rs @@ -31,6 +31,12 @@ impl Default for App { impl GuiSettings for App { fn show_gui(&mut self, gui: &mut Layout) { + gui.label(format!( + "Screen size: {} x {}", + gui.input().screen_size.x, + gui.input().screen_size.y, + )); + gui.checkbox("checkbox", &mut self.checked); if gui