Sf/vscode resizing (#3044)

* [WGLMakie] Add automatic figure resizing

This implements basic resizing support for WGLMakie figures.  This has
primarily been tested in the VSCode plot pane and the JSServe
auto-launched browser window (using Chrome and Safari).

The implementation creates a new `resize` event that the javascript
frontend can send back to the Julia backend, with a computed size (in
pixels) that the backend should resize to.  Additionally, the javascript
`throttle()` function is altered to no longer drop the last few events
when throttled, it instead delays the last event until the end of the
throttling period, which is important when resizing quickly so that the
final size is faithfully recorded.

* `deno bundle wglmakie.js`

* make resizing to body themeable

* update bundle

* fix fallout from removing window.WGLMakie = ...

* fix aspect ratio of Cam3D

* add news entry

---------

Co-authored-by: Elliot Saba <[email protected]>

NEWS.md

@@ -2,12 +2,14 @@
 
 ## master
 
-- Fixed DataInspector interaction with transformations [#3002](https://github.com/MakieOrg/Makie.jl/pull/3002)
+- Added option `WGLMakie.activate!(resize_to_body=true)`, to make plots resize to the VSCode plotpane. Resizes to the HTML body element, so may work outside VSCode [#3044](https://github.com/MakieOrg/Makie.jl/pull/3044), [#3042](https://github.com/MakieOrg/Makie.jl/pull/3042).
+- Fixed DataInspector interaction with transformations [#3002](https://github.com/MakieOrg/Makie.jl/pull/3002).
 - Fix incomplete stroke with some Bezier markers in CairoMakie and blurry strokes in GLMakie [#2961](https://github.com/MakieOrg/Makie.jl/pull/2961)
 - Added the ability to use custom triangulations from DelaunayTriangulation.jl [#2896](https://github.com/MakieOrg/Makie.jl/pull/2896).
 - Adjusted scaling of scatter/text stroke, glow and anti-aliasing width under non-uniform 2D scaling (Vec2f markersize/fontsize) in GLMakie [#2950](https://github.com/MakieOrg/Makie.jl/pull/2950).
 - Scaled `errorbar` whiskers and `bracket` correctly with transformations [#3012](https://github.com/MakieOrg/Makie.jl/pull/3012).
 - Updated `bracket` when the screen is resized or transformations change [#3012](https://github.com/MakieOrg/Makie.jl/pull/3012).
+- Added auto-resizing functionality to WGLMakie plot figures [#3042](https://github.com/MakieOrg/Makie.jl/pull/3042)
 
 
 ## v0.19.6

WGLMakie/src/Camera.js

@@ -55,21 +55,23 @@ export function attach_3d_camera(canvas, makie_camera, cam3d, scene) {
     camera.up = new THREE.Vector3(...cam3d.upvector);
     camera.position.set(...cam3d.eyeposition);
     camera.lookAt(center);
-
     function update() {
-        camera.updateProjectionMatrix();
-        camera.updateWorldMatrix();
         const view = camera.matrixWorldInverse;
         const projection = camera.projectionMatrix;
-        const [width, height] = makie_camera.resolution.value;
+        const [width, height] = cam3d.resolution.value;
         const [x, y, z] = camera.position;
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+        camera.updateWorldMatrix();
+
         makie_camera.update_matrices(
             view.elements,
             projection.elements,
             [width, height],
             [x, y, z]
-        );
+            );
     }
+    cam3d.resolution.on(update);
 
     function addMouseHandler(domObject, drag, zoomIn, zoomOut) {
         let startDragX = null;

WGLMakie/src/display.jl

@@ -46,6 +46,7 @@ const WEB_MIMES = (
 """
 struct ScreenConfig
     framerate::Float64 # =30.0
+    resize_to_body::Bool # false
 end
 
 """
@@ -205,7 +206,7 @@ function session2image(session::Session, scene::Scene)
     to_data = js"""function (){
         return $(scene).then(scene => {
             const {renderer} = scene.screen
-            WGLMakie.render_scene(scene)
+            WGL.render_scene(scene)
             const img = renderer.domElement.toDataURL()
             return img
         })

WGLMakie/src/events.jl

@@ -102,6 +102,9 @@ function connect_scene_events!(scene::Scene, comm::Observable)
                     e.keyboardbutton[] = KeyEvent(code_to_keyboard(keyup), Keyboard.release)
                 end
             end
+            @handle msg.resize begin
+                resize!(scene, tuple(resize...))
+            end
         catch err
             @warn "Error in window event callback" exception=(err, Base.catch_backtrace())
         end

WGLMakie/src/picking.jl

@@ -93,7 +93,7 @@ App() do session
     }
     \"\"\"
 
-    tooltip = WGLMakie.ToolTip(f, on_click_callback; plots=pl)
+    tooltip = WGL.ToolTip(f, on_click_callback; plots=pl)
     return DOM.div(f, tooltip)
 end
 ```
@@ -107,7 +107,7 @@ struct ToolTip
         if isnothing(plots)
             plots = scene.plots
         end
-        all_plots = WGLMakie.js_uuid.(filter!(x-> x.inspectable[], Makie.flatten_plots(plots)))
+        all_plots = js_uuid.(filter!(x-> x.inspectable[], Makie.flatten_plots(plots)))
         new(scene, callback, all_plots)
     end
 end

WGLMakie/src/serialization.jl

@@ -264,7 +264,9 @@ function serialize_scene(scene::Scene)
 
     cam3d_state = if cam_controls isa Camera3D
         fields = (:lookat, :upvector, :eyeposition, :fov, :near, :far)
-        Dict((f => serialize_three(getfield(cam_controls, f)[]) for f in fields))
+        dict = Dict((f => serialize_three(getfield(cam_controls, f)[]) for f in fields))
+        dict[:resolution] = lift(res -> Int32[res...], scene.camera.resolution)
+        dict
     else
         nothing
     end

WGLMakie/src/three_plot.jl

@@ -45,17 +45,15 @@ function three_display(session::Session, scene::Scene; screen_config...)
     window_open = scene.events.window_open
     width, height = size(scene)
     canvas_width = lift(x -> [round.(Int, widths(x))...], pixelarea(scene))
-    canvas = DOM.um("canvas"; tabindex="0")
-    wrapper = DOM.div(canvas)
+    canvas = DOM.m("canvas"; tabindex="0", style="display: block")
+    wrapper = DOM.div(canvas; style="width: 100%; height: 100%")
     comm = Observable(Dict{String,Any}())
     done_init = Observable(false)
     # Keep texture atlas in parent session, so we don't need to send it over and over again
     ta = JSServe.Retain(TEXTURE_ATLAS)
     evaljs(session, js"""
     $(WGL).then(WGL => {
-        // well.... not nice, but can't deal with the `Promise` in all the other functions
-        window.WGLMakie = WGL
-        WGL.create_scene($wrapper, $canvas, $canvas_width, $scene_serialized, $comm, $width, $height, $(config.framerate), $(ta))
+        WGL.create_scene($wrapper, $canvas, $canvas_width, $scene_serialized, $comm, $width, $height, $(ta), $(config.framerate), $(config.resize_to_body))
         $(done_init).notify(true)
     })
     """)