Slider and zoom rectangle with MakieLayout.jl

slider_zoom_rect.jl

using Makie
using MakieLayout

scene, layout = layoutscene(resolution = (1200, 800))
scene

ax = layout[1:2, 1] = [LAxis(scene) for i = 1:2]
xaxis_top!(ax[1])
ax[2].height = 100

x = randn(10000)
lines!(ax[1], x)
lines!(ax[2], x)
tightlimits!.(ax)
#tight_ticklabel_spacing!.(ax)
#hidedecorations!(ax[1])

##
rectnode = Node(BBox(10, 100, minimum(x), maximum(x)))
rectplot = Ref{Union{Nothing, Poly}}(poly!(ax[2], rectnode, color = (:blue, 0.05), strokecolor = (:blue, 0.5),
    strokewidth = 2, xautolimits = false, yautolimits = false, visible = true))

#limits!(ax[1], rectnode) # cannot assign Observable to limits
limits!(ax[1], rectnode[])

function rect2coord(r)
    x1 = r.origin[1]
    x2 = r.origin[1] + r.widths[1]
    y1 = r.origin[2]
    y2 = r.origin[2] + r.widths[2]
    return x1, x2, y1, y2
end

# rectangle states:
prev_pos = Ref(Point2f0(0, 0))
mode_xreshape = Ref((false,false)) # left, right

scenestate = MakieLayout.addmousestate!(ax[2].scene)

MakieLayout.onmouseleftdragstart(scenestate) do state
    prev_pos[] = state.pos # start_pos[] = state.pos
    x1, x2, y1, y2 = rect2coord(rectnode[])
    xbnd = (x2 - x1) / 8 # rect bound x-width
    mode_xreshape[] = (state.pos[1] < x1 + xbnd, x2 - xbnd < state.pos[1])
end

MakieLayout.onmouseleftdrag(scenestate) do state
    @async begin # increases performance greatly
        pos = state.pos
        dx = pos[1] - prev_pos[][1]
        prev_pos[] = pos

        mode_x = mode_xreshape[]
        x1, x2, y1, y2 = rect2coord(rectnode[])

        if !(mode_x[1] || mode_x[2]) # move mode
            x1 += dx
            x2 += dx
        else # reshape mode
            if mode_x[1]
                x1 += dx
                if x2 < x1 # flip bounds
                    mode_xreshape[] = (false, true)
                    x1, x2 = x2, x1
                end
            elseif mode_x[2]
                x2 += dx
                if x2 < x1 # flip bounds
                    mode_xreshape[] = (true, false)
                    x1, x2 = x2, x1
                end
            end
        end

        rectnode[] = let
            BBox(x1, x2, y1, y2)
        end

        xlims!(ax[1], x1, x2)
    end
end

record(scene, "slider_zoom_rect.mp4", 1:255, framerate=60) do i
    sleep(1/60)
end