rohitvarkey / ThreeJS.jl

Julia interface to WebGL using Three-js custom elements and Patchwork.jl
https://rohitvarkey.github.io/ThreeJS.jl
Other
56 stars 15 forks source link

ThreeJS.outerdiv does not respect width and height #37

Closed izaid closed 7 years ago

izaid commented 7 years ago

In the following code, the slider overlaps with the rendering window:

#Run this in Escher to see a rotating cube in the browser.

using Escher
import ThreeJS

main(window) =  begin
    push!(window.assets,("ThreeJS","threejs"))
    push!(window.assets,"widgets")
    push!(window.assets, "icons")
    push!(window.assets, "layout2")
    push!(window.assets, "animation")
    push!(window.assets,"nested-props")

    vbox(
        ThreeJS.outerdiv("100%", "200px") <<
            (ThreeJS.initscene() <<
                [
                    ThreeJS.mesh(0.0, 0.0, 0.0) <<
                    [
                        ThreeJS.box(5.0, 5.0, 5.0), ThreeJS.material(Dict(:kind=>"phong",:color=>"red"))
                    ],
                    ThreeJS.pointlight(10.0, 10.0, 10.0),
                    ThreeJS.pointlight(-10.0, -10.0, -10.0),
                    ThreeJS.camera(0.0, 0.0, 20.0)
                ]
            ),
        slider(1:10)
    )
end

Any leads on this? I'm looking to sort it out.

izaid commented 7 years ago

Actually, this isn't even a question of vbox. Just using ThreeJS.outerdiv alone does not respect sizes. Consider the following.

        ThreeJS.outerdiv("10px", "10px") <<
            (ThreeJS.initscene() <<
                [
                    ThreeJS.mesh(0.0, 0.0, 0.0) <<
                    [
                        ThreeJS.box(5.0, 5.0, 5.0), ThreeJS.material(Dict(:kind=>"phong",:color=>"red"))
                    ],
                    ThreeJS.pointlight(10.0, 10.0, 10.0),
                    ThreeJS.pointlight(-10.0, -10.0, -10.0),
                    ThreeJS.camera(0.0, 0.0, 20.0)
                ]
            )

I see no difference with that.

izaid commented 7 years ago

What I suspect we have to do, but am not sure, is set up something like https://github.com/wnr/element-resize-detector to resize the containing div if the renderer is resized. I have used this semi-successfully with widgets in Jupyter.

izaid commented 7 years ago

Fixed in https://github.com/rohitvarkey/ThreeJS.jl/pull/38