scrollingissue.jl

### A Pluto.jl notebook ###
# v0.12.7

using Markdown
using InteractiveUtils

# This Pluto notebook uses @bind for interactivity. When running this notebook outside of Pluto, the following 'mock version' of @bind gives bound variables a default value (instead of an error).
macro bind(def, element)
    quote
        local el = $(esc(element))
        global $(esc(def)) = Core.applicable(Base.get, el) ? Base.get(el) : missing
        el
    end
end

# ╔═╡ e9eacfd0-20fd-11eb-0d0f-97a6fe34a16f
begin
	import Pkg
	Pkg.activate(mktempdir())
	Pkg.add([
			Pkg.PackageSpec(name="Plots", version="1.6-1"),
			])
	using Plots
end

# ╔═╡ 4e360478-20fe-11eb-3f6d-9111d385b33d
md"""
# Plots.jl click input

Click somewhere on this graph:
"""

# ╔═╡ 58349090-20fe-11eb-2344-a9895f29ce31
function linepoint(q0)
	p = plot(1:10)
	scatter!(p, q0[1:1], q0[2:2])
end

# ╔═╡ 607d58da-20ff-11eb-2a49-218d6307d7f2
md"""
# Template
"""

# ╔═╡ 8b129e70-20ff-11eb-1e52-4fed0031b63e
function COOL_PLOT(q0)
	p = plot(1:10)
	scatter!(p, q0[1:1], q0[2:2])
end

# ╔═╡ 15e0dc00-20ff-11eb-1a4d-71579b2970b7
md"""
## Necessary functions

You can copy these cells into your notebook by selecting them (start dragging a selection rectangle from inbetween two cells), and dragging them into another notebook. 
"""

# ╔═╡ 7238c198-20fe-11eb-07cb-531a0d0dcdf6
randid() = String(rand(('a':'z') ∪ ('A':'Z'), 12))

# ╔═╡ 61360a66-20fe-11eb-2690-83091d06da81
begin
	struct BondDefault
		element
		default
	end
	Base.show(io::IO, m::MIME"text/html", bd::BondDefault) = Base.show(io, m, bd.element)
	Base.get(bd::BondDefault) = bd.default
	BondDefault
end

# ╔═╡ 6a95ebb2-20fe-11eb-33c4-6d5c2c0af706
plotclicktracker_js(id, r) = """
const container = document.querySelector("#$(id)")
const graph = container.firstElementChild

const onclick = (e) => {
    const svgrect = graph.getBoundingClientRect()
    const f = [
		(e.clientX - svgrect.left) / svgrect.width, 
		(e.clientY - svgrect.top) / svgrect.height
	]
	container.value = [
		f[0] * $(r.x_scale) + $(r.x_offset),
		f[1] * $(r.y_scale) + $(r.y_offset),
	]
console.log(container.value)
	container.dispatchEvent(new CustomEvent("input"), {})
}

graph.addEventListener("click", onclick)

invalidation.then(() => {
graph.removeEventListener("click", onclick)
})
"""

# ╔═╡ 6a998f62-20fe-11eb-3104-5d96f4718ccb
plotclicktracker(p::Plots.Plot) = let
	id = randid()
	
	# we need to render the plot before its dimensions are available:
	plot_render = repr(MIME"text/html"(), p)
	
	big = bbox(p.layout)
	small = plotarea(p[1])
	
	xl = xlims(p)
	yl = ylims(p)
	r = (
	x_offset = xl[1] - (xl[2] - xl[1]) * small.x0[1] / small.a[1],
	x_scale = (big.a[1] / small.a[1]) * (xl[2] - xl[1]),
	y_offset = (yl[2] - yl[1]) + (small.x0[2] / small.a[2]) * (yl[2] - yl[1]) + yl[1],
	y_scale = -(big.a[2]/ small.a[2]) * (yl[2] - yl[1])
	)
	HTML("""<div id=$(id)>$(plot_render)<script>$(plotclicktracker_js(id, r))</script></div>""")
end

# ╔═╡ 5711a7d4-20fe-11eb-3058-69e4348b96e6
let
	if !@isdefined( x0 )
		global x0 = [5,5]
	end
	
	p = linepoint( x0 )
	
	@bind x0 BondDefault(plotclicktracker(p), x0 )
end

# ╔═╡ 5ce01c3a-20ff-11eb-26d6-57c07dfdc276
let
	# STEP 1: REPLACE 👀👀👀 with your variable name in 5 places (double click)
	
	if !@isdefined( 👀👀👀 )
		
		# STEP 2: set the initial 'click' location:
		global 👀👀👀 = [5,5]
	end
	
	# STEP 3: in another cell, write a function that takes the click position as 
	# argument returning a plot. REPLACE `COOL_PLOT` with the name of your function.
	p = COOL_PLOT( 👀👀👀 )
	
	@bind 👀👀👀 BondDefault(plotclicktracker(p), 👀👀👀 )
end

# ╔═╡ 119f2e96-20ff-11eb-1cc1-259f842a8cd8
md"""
## Packages
"""

# ╔═╡ Cell order:
# ╟─4e360478-20fe-11eb-3f6d-9111d385b33d
# ╟─5711a7d4-20fe-11eb-3058-69e4348b96e6
# ╠═58349090-20fe-11eb-2344-a9895f29ce31
# ╠═607d58da-20ff-11eb-2a49-218d6307d7f2
# ╠═5ce01c3a-20ff-11eb-26d6-57c07dfdc276
# ╠═8b129e70-20ff-11eb-1e52-4fed0031b63e
# ╟─15e0dc00-20ff-11eb-1a4d-71579b2970b7
# ╟─7238c198-20fe-11eb-07cb-531a0d0dcdf6
# ╟─61360a66-20fe-11eb-2690-83091d06da81
# ╟─6a95ebb2-20fe-11eb-33c4-6d5c2c0af706
# ╟─6a998f62-20fe-11eb-3104-5d96f4718ccb
# ╟─119f2e96-20ff-11eb-1cc1-259f842a8cd8
# ╠═e9eacfd0-20fd-11eb-0d0f-97a6fe34a16f