Giters

iced-rs / iced_web

A web runtime for iced that targets the DOM

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

When used with trunk, the UI only shows up after hovering the mouse over it

ISibboI opened this issue · comments

commented

Thanks for making iced_web, it is really helpful in making UI's that work both natively and in the browser!

I am using it together with trunk which handles building and serving the WASM part. When using the default configuration of trunk, it seems like I need to hover over the window first before the UI shows up. I am using trunk 0.16.0 and iced 0.4.2 with iced_web 0.4.0. My browser is Brave v1.42.97 (Aug 17th, 2022) based on Chromium 104.0.5112.102.

I am not sure what other information is needed to get behind this. Please just ask :)

commented

I have the same problem. I would like to help solve it.

I would like to support to show the initial screen without mouse over.

I know it is possible to make it work by using pointerover in JS, but can you implement it officially?

Thank you in advance.

commented

Watching DOMNodeInserted might be workaround...

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tour - Iced</title>
  </head>
  <body>
    <script type="module">
      import init from "./tour/tour.js";
      init('./tour/tour_bg.wasm');
      function ready(loaded) {
        if (['interactive', 'complete'].includes(document.readyState)) {
          loaded();
        } else {
          document.addEventListener('DOMContentLoaded', loaded);
        }
      }
      ready(() => {
        function eventListener() {
          const canvas = document.querySelector("canvas");
          if (canvas == null) {
            console.error("cannot find canvas");
            return;
          }
          canvas.dispatchEvent(new PointerEvent('pointerover'));
          document.body.removeEventListener('DOMNodeInserted', eventListener);
        };
        document.body.addEventListener('DOMNodeInserted', eventListener);
      });
    </script>
  </body>
</html>

ref: https://teratail.com/questions/enskivge5ttj1e

commented

I am not sure what other information is needed to get behind this. Please just ask :)

A git clone URL to reproduce the issue.