Merge branch 'master' into ff/camera

GLMakie/assets/shader/lines.geom

@@ -49,16 +49,21 @@ vec3 screen_space(vec4 vertex)
 // Manual uv calculation
 // - position in screen space (double resolution as generally used)
 // - uv with uv.u normalized (0..1), uv.v unnormalized (0..pattern_length)
-void emit_vertex(vec3 position, vec2 uv, int index)
+void emit_vertex(vec3 position, vec2 uv, int index, float thickness)
 {
     f_uv        = uv;
     f_color     = g_color[index];
     gl_Position = vec4((position.xy / resolution), position.z, 1.0);
     f_id        = g_id[index];
     // linewidth scaling may shrink the effective linewidth
-    f_thickness = abs(uv.y) - AA_THICKNESS; 
+    f_thickness = thickness; 
     EmitVertex();
 }
+// default for miter joins
+void emit_vertex(vec3 position, vec2 uv, int index)
+{
+    emit_vertex(position, uv, index, g_thickness[index]);
+}
 
 // For center point
 void emit_vertex(vec3 position, vec2 uv)
@@ -72,15 +77,20 @@ void emit_vertex(vec3 position, vec2 uv)
 }
 
 // Debug
-void emit_vertex(vec3 position, vec2 uv, int index, vec4 color)
+void emit_vertex(vec3 position, vec2 uv, int index, vec4 color, float thickness)
 {
     f_uv        = uv;
     f_color     = color;
     gl_Position = vec4((position.xy / resolution), position.z, 1.0);
     f_id        = g_id[index];
-    f_thickness = abs(uv.y) - AA_THICKNESS;
+    f_thickness = thickness;
     EmitVertex();
 }
+// default for miter joins
+void emit_vertex(vec3 position, vec2 uv , int index, vec4 color)
+{
+    emit_vertex(position, uv , index, color, g_thickness[index]);
+}
 void emit_vertex(vec3 position, vec2 uv, vec4 color)
 {
     f_uv        = uv;
@@ -98,8 +108,11 @@ void emit_vertex(vec3 position, vec2 offset, vec2 line_dir, vec2 uv, int index)
     emit_vertex(
         position + vec3(offset, 0),
         vec2(uv.x + px2uv * dot(line_dir, offset), uv.y),
-        index
+        index,
+        abs(uv.y) - AA_THICKNESS
     );
+    // `abs(uv.y) - AA_THICKNESS` corrects for enlarged AA padding between
+    // segments of different linewidth, see #2953
 }
 
 void emit_vertex(vec3 position, vec2 offset, vec2 line_dir, vec2 uv)

GLMakie/src/screen.jl

@@ -106,7 +106,7 @@ mutable struct ScreenConfig
     end
 end
 
-const LAST_INLINE = Ref{Union{Makie.Automatic, Bool}}(Makie.automatic)
+const LAST_INLINE = Ref{Union{Makie.Automatic, Bool}}(false)
 
 """
     GLMakie.activate!(; screen_config...)

NEWS.md

@@ -4,11 +4,14 @@
 
 - Improved 3D camera handling, hotkeys and functionality [#2746](https://github.com/MakieOrg/Makie.jl/pull/2746)
 - 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
 

README.md

@@ -3,7 +3,7 @@
       <source media="(prefers-color-scheme: dark)" 
         srcset="/assets/makie_logo_canvas_dark.svg" >
       <img alt="Makie.jl logo" 
-        src="/assets/makie_logo_canvas.svg" >
+        src="/assets/makie_logo_canvas.svg" width="400">
     </picture>
 </div>
 

ReferenceTests/src/tests/figures_and_makielayout.jl

@@ -121,3 +121,18 @@ end
         f
     end
 end
+
+@reference_test "LaTeXStrings in Axis3 plots" begin
+    xs = LinRange(-10, 10, 100)
+    ys = LinRange(0, 15, 100)
+    zs = [cos(x) * sin(y) for x in xs, y in ys]
+
+
+    fig = Figure()
+    ax = Axis3(fig[1, 1]; xtickformat = xs -> [L"%$x" for x in xs])
+    # check that switching to latex later also works
+    ax.ytickformat = xs -> [L"%$x" for x in xs]
+
+    surface!(ax, xs, ys, zs)
+    fig
+end

WGLMakie/README.md

@@ -1,11 +1,9 @@
 WGLMakie is a WebGL backend for the [Makie.jl](https://www.github.com/MakieOrg/Makie.jl) plotting package, implemented using Three.js.
 
-Read the docs for Makie and it's backends [here](http://docs.makie.org/dev)
+Read the docs for Makie and it's backends [here](http://docs.makie.org)
 
 # Usage
 
-Now, it should just work like Makie:
-
 ```julia
 using WGLMakie
 scatter(rand(4))
@@ -16,7 +14,8 @@ In VSCode, this should open in the plotpane.
 You can also embed plots in a JSServe webpage:
 
 ```julia
-function dom_handler(session, request)
+using JSServe
+app = App(session, request)
     return DOM.div(
         DOM.h1("Some Makie Plots:"),
         meshscatter(1:4, color=1:4),
@@ -27,8 +26,8 @@ function dom_handler(session, request)
         meshscatter(rand(Point3f, 10), marker=Pyramid(Point3f(0), 1f0, 1f0)),
     )
 end
-isdefined(Main, :app) && close(app)
-app = JSServe.Server(dom_handler, "127.0.0.1", 8082)
+isdefined(Main, :server) && close(server)
+server = JSServe.Server(app, "127.0.0.1", 8082)
 ```
 
 ## Sponsors

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)
     })
     """)