gwhitney
commented
3 months ago I happened to wake up early and took a quick look and found one clue but not a solution: it has to do with the dropzone divs in the section of Scope.vue quoted at the bottom of this post. And it has to do with a tension between the render-layering order (which divs are on top, which are below) and the box-layout order and positioning (which divs go where when they are all placed into main. In particular, it turns out that still in ui2, the left dropzone is in the correct place, and its background is changing when you are about to drop, but it's hidden because in ui2 the visualizer canvas has ended up on top of the dropzone, rather than the other way around in the prior commit.
This seems to correspond to the fact that in this "main" div, the left dropzones occur first, then the canvas, then the right dropzones. If you move the canvas-container div first in main, before the "left-dropzone-container", then indeed, the dropzones highlight as desired, because it seems the render-layering order reflects the order of the divs within main. But, just after dropping something into one of the left dropzone, the left dropzone moves to the right of the canvas, between the canvas and the left dropzone, and gets stuck there (i.e., the dropzone positioning also comes to match the order of the divs within main).
So this suggests there should be a solution with CSS: either leave the html template as is, and adjust CSS properties of the dropzones and canvas that control the layering order (I think there is a "z" CSS property, or something like that), or move the canvas to the beginning so the natural layer stacking is correct and adjust the CSS positioning properties to keep the left dropzones on the left where we want them.
As before, no idea when I will be able to get back to this, so anyone should feel free to jump in.
<!--
The dropzone ids must remain like "[position]-dropzone"
where [position] is the same as the dropzone attribute.
This is because the dropzones are looked up by id in the
tab management code.
-->
<div id="main">
<div
id="left-dropzone-container"
class="dropzone-container empty">
<div class="dropzone-size-wrapper">
<div
id="top-left-dropzone"
class="dropzone empty"
dropzone="top-left"></div> [ .... ]
</div>
<div class="dropzone-size-wrapper">
<div
id="bottom-left-dropzone"
class="dropzone empty"
dropzone="bottom-left"></div>
</div>
</div>
<div id="canvas-container"></div>
<div id="right-dropzone-container" class="dropzone-container">
<div class="dropzone-size-wrapper">
<div
id="top-right-dropzone"
class="dropzone"
dropzone="top-right"></div> [...]
</div>
<div class="dropzone-size-wrapper">
<div
id="bottom-right-dropzone"
class="dropzone"
dropzone="bottom-right"></div>
</div>
</div>
The latest commit to ui2 has a behavior regression we didn't notice. In the prior commit to ui2, when you drag one of the tabs from the right to the left and it gets into the zone where it will dock to the left, a blue rectangle highlights where it will dock, before you release the mouse button to drop it. That behavior is gone in the current ui2.
I discovered this in trying to clean up the next PR (sequence and visualizer switchers), but I absolutely think we should resolve it before opening the cleaned version of that PR, since there are likely clues in the diffs between current ui2 and its predecessor 58ff5acc.
So I will work on tracking down this regression when I am next able to work on Numberscope, but it may be several days. So if either of you are able to start taking a look in the meantime, please post here. Thanks!