Skip to content
This repository has been archived by the owner on Feb 15, 2024. It is now read-only.

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

Open
ISibboI opened this issue Aug 27, 2022 · 3 comments

Comments

@ISibboI
Copy link

ISibboI commented Aug 27, 2022

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 :)

@kano1101
Copy link

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.

@yumetodo
Copy link

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

@stappersg
Copy link

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

A git clone URL to reproduce the issue.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants