Window "restore" button from "maximise" causes mouseover, etc.. events to break

Questions
1

on chrome Version 85.0.4183.102 (Official Build) (64-bit) on windows 10

it seems that engine.resize() is being called before the window re-layout happens in the default code downloaded from the playground

// resize
window.addEventListener
( "resize", 
   () =>
   {
    engine.resize();
  }
);

interestingly, this works fine in the playground. but not in the downloaded code.

This is also an issue when loading the page in the latest version of Brave. The engine seems to pick a size of the canvas before the page is fully loaded. I suppose I can just load the scene later. I will look into it

2

OK, so just waiting a hundred milliseconds after the window resize event is enough. I assume it is to wait for the html re-layout.

I have made this (obvious) bit of code, which has the best of all worlds, in terms of visual continuity and ensuring that mouseover events do not break (which they do in the case given in the op)

// resize
let resizeTimeoutID = null;
window.addEventListener
    ( "resize", 
      () =>
      {
        if (resizeTimeoutID !== null)
        { //debounce
          clearTimeout(resizeTimeoutID) 
        }
        else
        { //ensure that maximise doesnt create a stretched canvas for 200 ms
          //my scene is very simple, so this is fine. Might not be suitable
          //  for some situations
          engine.resize();
        }
        resizeTimeoutID = 
            setTimeout
            ( () => 
              { resizeTimeoutID = null;
                engine.resize()
              },
              200
            ); 
        
      }
    );
3

(apologies, this obviously isnt an “engine” bug), I miss tagged it was tired

4

it seems the best way to achieve “perfect results” on all devices, is to poll the size of the actual canvas element.

There are various reasons why this is. The biggest issue is that there doesnt seem to be a native event for browser re-flow completion, which would solve it.

polling will work fine for me in this instance.

5

So this code works well.

// Resize

engine.listenForCanvasSizeChanges =
    (listenOrNot) =>
    {
      if (listenOrNot !== true)
      {
        clearTimeout(engine.listenForCanvasSizeChanges.listenTimeoutID);
        engine.listenForCanvasSizeChanges.listenTimeoutID = null;
      }
      else
      {
        engine.listenForCanvasSizeChanges.canvasHeight    = null;
        engine.listenForCanvasSizeChanges.canvasWidth     = null;
        engine.listenForCanvasSizeChanges.listenTimeoutID = 
            setTimeout
            ( engine.listenForCanvasSizeChanges.checkIfCanvasSizeChanged,
              200
            );
      }
    }
engine.listenForCanvasSizeChanges.checkIfCanvasSizeChanged = 
    () =>
    {
      let renderingCanvasClientRect = engine.getRenderingCanvasClientRect();
      if  (     engine.listenForCanvasSizeChanges.canvasHeight !== renderingCanvasClientRect.height
            ||  engine.listenForCanvasSizeChanges.canvasWidth  !== renderingCanvasClientRect.width
          )
      { engine.listenForCanvasSizeChanges.canvasHeight = renderingCanvasClientRect.height;
        engine.listenForCanvasSizeChanges.canvasWidth  = renderingCanvasClientRect.width;
        engine.resize();
      }
      engine.listenForCanvasSizeChanges.listenTimeoutID = 
          setTimeout
          ( engine.listenForCanvasSizeChanges.checkIfCanvasSizeChanged,
            200
          );
    }

engine.listenForCanvasSizeChanges(true);
6

repeatedly calling “engine.resize()” in some situations, causes other elements in the page to change size. I am investigating this.

I have done some more fiddling. It would appear that there is some interaction between flex-… and width, etc. It seems likely that engine.resize() somehow causes a reflow of the page. If I explicitly set the min-width of the other elements, then engine.resize() doesnt cause the elements to all shuffle. lol. browsers. Love them, hate them

more descriptively: if an element within a flex-column has explicitly set width or flex-basis, and the window is shrunk to cause that element’s width to shrink bellow that value, repeated calls to engine.resize() somehow “cause” the element to iteratively attain the width/flex-basis value. Setting the min-width to that value stops this issue, by stopping the element from shrinking below its basis in the first place.

1 Like