[L2Ork-dev] Excalibur Bug

Fri Jun 12 12:56:49 EDT 2020

On Fri, Jun 12, 2020 at 3:56 AM Ivica Bukvic <ico at vt.edu> wrote:
>
> To add to this, I had similar issues inside TCL/Tk and TkPath in the 1.x branch, although there it was in some ways worse because 1.x is not origin bound (0,0 coords inside the canvas). Instead, it tries to fit as much as it can without invoking or minimizing the use of scrollbars. I think these issues stem from the fact that the appearance of scrollbars messes with the HTML layout which in turn messes with the overall width and height, creating a vicious circle even throttling cannot fix (or, at best exchanges one problem for another).

But HTML5 has methods to measure the window dimensions which includes
scrollbars (as well as one which excludes them).

That breaks the vicious circle for the default nw.js demo in the Excalibur bug.

That even breaks the vicious cycle for default nw.js demo plus menubar
in the Excalibur bug.

I also tested creating a new "about:blank" window in Purr Data, and
scrollbars appear/disappear consistently and
predictably.

Same with any version of Chromium (and probably Firefox thought I
haven't checked).

The *only* places where Excalibur sticks are index.html and
pd_canvas.html. With those I can no longer get
the consistent, predictable behavior. Some evil state exists in those
two contexts and I cannot figure out
what it is.

-Jonathan

>
> Best,
>
> Ico
>
> --
> Ivica Ico Bukvic, D.M.A.
> Director, Creativity + Innovation
> Institute for Creativity, Arts, and Technology
>
> Virginia Tech
> Creative Technologies in Music
> School of Performing Arts – 0141
> Blacksburg, VA 24061
> (540) 231-6139
> ico at vt.edu
>
> www.icat.vt.edu
> www.performingarts.vt.edu
> l2ork.icat.vt.edu
> ico.bukvic.net
>
> On Fri, Jun 12, 2020, 03:20 Ivica Bukvic <ico at vt.edu> wrote:
>>
>> Check out the video I just posted. I think it solves it albeit in a completely different way. ;-)
>>
>> Best,
>>
>> Ico
>>
>> --
>> Ivica Ico Bukvic, D.M.A.
>> Director, Creativity + Innovation
>> Institute for Creativity, Arts, and Technology
>>
>> Virginia Tech
>> Creative Technologies in Music
>> School of Performing Arts – 0141
>> Blacksburg, VA 24061
>> (540) 231-6139
>> ico at vt.edu
>>
>> www.icat.vt.edu
>> www.performingarts.vt.edu
>> l2ork.icat.vt.edu
>> ico.bukvic.net
>>
>> On Fri, Jun 12, 2020, 01:19 Jonathan Wilkes <jon.w.wilkes at gmail.com> wrote:
>>>
>>> One addition-- I've tried whittling pd_canvas.html down to nothing but
>>> a single SVG, to no avail.
>>>
>>> -Jonathan
>>>
>>> On Fri, Jun 12, 2020 at 1:15 AM Jonathan Wilkes <jon.w.wilkes at gmail.com> wrote:
>>> >
>>> > Hi list,
>>> >
>>> > If anyone here can wrest the following bug from the guts of our
>>> > codebase I'll immediately add you as a maintainer of Purr Data.
>>> > (Careful, though-- there's some Tom Sawyer style mischief going on in
>>> > that offer... :)
>>> >
>>> > You start your quest armed with three snippets:
>>> >
>>> > 1. Trusty menu:
>>> >
>>> > // Create an empty menubar
>>> > var menu = new nw.Menu({type: 'menubar'});
>>> >
>>> > // Create a submenu as the 2nd level menu
>>> > var submenu = new nw.Menu();
>>> > submenu.append(new nw.MenuItem({ label: 'Item A' }));
>>> > submenu.append(new nw.MenuItem({ label: 'Item B' }));
>>> >
>>> > // Create and append the 1st level menu to the menubar
>>> > menu.append(new nw.MenuItem({
>>> >   label: 'First Menu',
>>> >   submenu: submenu
>>> > }));
>>> >
>>> > // Assign it to `window.menu` to get the menu displayed
>>> > nw.Window.get().menu = menu;
>>> >
>>> > End trusty menu
>>> >
>>> > 2. SVG-spawning potion
>>> >
>>> > var w = document.documentElement.clientWidth;
>>> > var h = document.documentElement.clientHeight;
>>> > document.body.style.padding = "0px";
>>> > document.body.style.margin = "0px";
>>> > var svg_string = ['<svg width="', w, '" height="', h, '"><rect
>>> > width="20" height="20"/></svg>'].join("");
>>> > document.body.innerHTML = svg_string;
>>> >
>>> > End SVG-spawning potion
>>> >
>>> > 3. Lightning bolt
>>> >
>>> > document.body.innerHTML = '';
>>> >
>>> > End lightning bolt
>>> >
>>> > Ok, let's go:
>>> >
>>> > 1. Run nw directly to get the demo app (~/purr-data/pd/nw/nw/nw)
>>> > 2. Right click and choose "Inspect"
>>> > 3. Click the "Console" tab
>>> > 4. Paste the lightning bolt to erase the demo
>>> > 5. Paste your SVG-spawning potion in the console and hit <Enter>
>>> >
>>> > Notice that the SVG fills the entire viewport of the document
>>> > *without* creating scrollbars. You can click the "Elements" tab and
>>> > make the SVG height/width one pixel larger and that will trigger the
>>> > scrollbars. Change them back and boom-- no scrollbars anymore. Simple,
>>> > deterministic behavior which works exactly the same in any version of
>>> > Chromium.
>>> >
>>> > Next:
>>> >
>>> > 1. Run nw directly to get the demo app
>>> > 2. Right click and choose "Inspect"
>>> > 3. Click the "Console" tab
>>> > 4. Paste the lightning bolt to erase the demo
>>> > 5. Paste the trusty menu
>>> > 6. Paste your SVG-spawning potion in the console
>>> >
>>> > Again-- notice that the viewport is is covered completely by the SVG
>>> > without spawning any scrollbars. Again you can change width/height
>>> > values to watch scrollbars appear/disappear.
>>> >
>>> > Okay, now some fun:
>>> >
>>> > 1. Run nw directly to get the demo app
>>> > 2. Right click and choose "Inspect"
>>> > 3. Click the "Console" tab
>>> > 4. Paste the lightning bolt to erase the demo
>>> > 5. Paste your SVG-spawning potion in the console
>>> > 6. Paste the trusty menu
>>> >
>>> > Ah, now we get some scrollbars because the menu takes up some of our
>>> > viewport and pushes the SVG down.
>>> >
>>> > But fear not-- we can go to the console and do this to get the new
>>> > height of the viewport minus that menubar:
>>> >
>>> > window.innerHeight;
>>> >
>>> > Now type that value into the height for the SVG in the "Elements" tab
>>> > and poof-- scrollbars disappear. Predictable, consistent behavior.
>>> >
>>> > And now, Excalibur:
>>> >
>>> > 1. Run Purr Data
>>> > 2. Open a new Patch
>>> > 3. Click "Help" then "Show DevTools" and click the "Console" tab
>>> > 4. Paste the lightning bolt
>>> > 5. Paste you SVG-spawning potion
>>> >
>>> > Oops, now we have scrollbars.
>>> >
>>> > Same GUI toolkit, but different behavior here.
>>> >
>>> > What is responsible for the difference, and how can we get the
>>> > predictable, consistent behavior we witnessed when running the nw
>>> > demo?
>>> >
>>> > Btw-- I'm on Debian Stretch on an older version of nw.js. But I've
>>> > tested the consistent, predictable behavior in a Chromium browser
>>> > and it works. Browsers obviously know how to fill a cavity with
>>> > content in 2020.
>>> >
>>> > That means that somewhere in our codebase we are setting
>>> > some state that causes the window to shift the content down,
>>> > but I don't know what it could be.
>>> >
>>> > Good luck on your quest,
>>> > Jonathan
>>> _______________________________________________
>>> L2Ork-dev mailing list
>>> L2Ork-dev at disis.music.vt.edu
>>> https://disis.music.vt.edu/listinfo/l2ork-dev
>
> _______________________________________________
> L2Ork-dev mailing list
> L2Ork-dev at disis.music.vt.edu
> https://disis.music.vt.edu/listinfo/l2ork-dev