pts Delayed and inaccurate resizing

The problem I am facing has to do with the rate and accuracy at which a canvas is resized, whether with the resize: or manually handling resizing events.

Expected result:

User resizes window using mouse or by "maximizing" or "minimizing" window.
Canvas keeps the correct size while user drags to resize.

Actual result:

Canvas does not immediately resize and sometimes stays with previous size.

Side note: if resizing happens rapidly, the canvas does not resize correctly and requires another slow resizing action until it takes the right form.

Here is a CodePen illustrating the problem. (The relevant lines are 81 to 107 when lines don't wrap)

In my specific case I am using two gradient background with composition to create a masking effect in the bottom right corner. As you can see below, both layers resize with delay and don't always update, but what is more interesting is that the "mask" background sometimes does resize correctly but the solid background does not.

I tried:

Defining the gradient background as shown in the demo example here.
Creating an external function with JQuery (commented out in CodePen) and filling the background using width and height variables that get updated externally, I also tried pausing and playing the space and updating between those. Didn't pan out.

Here are a couple sample I recorded: (Each Gif is 15 seconds long max)

demo1

demo2

Here you can see how the "mask" background is resized correctly but the other one isn't:

demo3

Although I am only showing horizontal resizing, same goes for vertical.

Also, to make sure this isn't a problem only in my specific case, I checked it with the resize demo, the effect here is less critical but is present too.

demo4

Thank you in advance.

Sep 28 '20 10:09 JulianBroudy

Just stumbled upon another interesting behavior I think would be good to mention in the hopes it could help triangulate the problem.

When:

Setting resize: false.
Handling resize in external function with height and width vars.
Page is initially loaded in full screen. Then, hitting the minimize button minimizes it correctly and maximize maximizes it correctly.

But, once initially loading in minimized then maximizing doesn't work.

Sep 28 '20 10:09 JulianBroudy

Hi @JulianBroudy , I'm sorry about the late response -- so busy these days!

I haven't looked at your code in details, but looks like you didn't use the resize: function(bound, evt){ ... } callback in the player object.

Take a look at this example and see if it fixes the problem: https://ptsjs.org/demo/edit/?name=canvasspace.resize

Oct 10 '20 08:10 williamngan

Thank you for the reply @williamngan.

I haven't looked at your code in details, but looks like you didn't use the resize: function(bound, evt){ ... } callback in the player object.

As I mentioned previously:

Also, to make sure this isn't a problem only in my specific case, I checked it with the resize demo, the effect here is less critical but is present too.

What I didn't mention is that I tried that in my code too and got same delayed result more or less.

If needed, I can provide you with the code that implements this option.

Looking forward to hearing from you. Thank again.

Oct 11 '20 12:10 JulianBroudy

Apologies. I missed what you mentioned about the resize demo.

I tried the demo code as a separate html page but I still couldn't reproduce the issue. The lag was either little (Safari, Mozilla) or not noticeable (Chrome). I'm using a Macbook.

Can you try this as an .html page and see what you find? If there're still issues, please let me know your setup (Window/Mac + browser).

<html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pts/0.9.5/pts.min.js"></script>
  <body>

    <div id="pt" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: gray;"></div>

    <script>
      Pts.quickStart( "#pt", "#f00" );
      var currBound = new Bound();
  
      space.add({ 
        animate: (time, ftime) => {
          let quads = Rectangle.quadrants( [new Pt(), currBound.size] );
          form.strokeOnly( "#fff", 2).lines( quads );
          form.log( "Size: "+currBound.size.toString() );
        },
    
        resize: (bound, evt) => { currBound = bound; }
      });

      space.bindMouse().bindTouch().play();
    </script>
  </body>
</html>

Thank you for the detailed bug report!

Oct 12 '20 08:10 williamngan

pts pts copied to clipboard

Delayed and inaccurate resizing

pts
pts copied to clipboard