Text float over canvas

[sjkelly]

First, @rohitvarkey I can't express how great this package is for my work. Hopefully some cool demos will come out of this. Thanks again!

Here I am expecting the text to be in the foreground, but instead it is in the background. The widgets seem unaffected.

import ThreeJS 

main(window) =  begin
    push!(window.assets,("ThreeJS","threejs"))
    push!(window.assets,"widgets")
    w = Input(1.0)
    h = Input(1.0)
    d = Input(1.0)
    hbox(
        lift(w, h, d) do w, h, d
        ThreeJS.outerdiv() << 
            (ThreeJS.initscene() <<
                [
                    ThreeJS.mesh(0.0, 0.0, 0.0) << 
                    [
                        ThreeJS.sphere(w), ThreeJS.material(Dict(:kind=>"phong",:color=>"red"))
                    ],
                    ThreeJS.pointlight(10.0, 10.0, 10.0),
                    ThreeJS.camera(0.0, 0.0, 10.0)
                ]
            )
        end,
        vbox(
            hbox("width",slider(1.0:5.0) >>> w),
            hbox("height",slider(1.0:5.0) >>> h),
            hbox("depth",slider(1.0:5.0) >>> d),
        )
    ) |> pad(2em)
end

[rohitvarkey]

Hi @sjkelly! Can't wait to see the stuff you come up with. 😄

Anyway, I think this is a z-index issue. I quickly tried to solve this by setting the z-index of the canvas to -1 but that resulted in the controls not working. :(
I will look into trying to implement this without having the controls breaking. Would be quite useful to overlay text on top!

Setting the z-index of the text to 1 or a positive value solves this though. @shashi Is there a way to do this in Escher?

[shashi]

I quickly tried to solve this by setting the z-index of the canvas to -1 but that resulted in the controls not working. :(

??? weird

Strings are wrapped in a when they are representing a tile (e.g. in a hbox). It's possible to define a zindex(txt, idx) = Elem(:span, txt, style=[:zindex=>idx]) and use this. I think in general there should exist a zindex which works on any Escher tile. (should be easy to add)

[rohitvarkey]

Now that I look at the code again, the canvas should be displaying to the right of the text.
I swapped the order of the vbox with the sliders and the ThreeJS call and I got this. Which is what should happen when using hbox in Escher.
EDIT: This is after moving the sphere to the edge of the canvas. But as you can see, the canvas and the sliders don't overlap like in the above screenshot.

Seems like my CSS rule of width:100% isn't working there. One more thing to look into!