Plots.jl click fails

[schlichtanders]

Please check https://fonsp.com/disorganised-mess/plotclicktracker%20drag.html

breaks for me in very first cell with

MethodError: no method matching getindex(::Nothing, ::UnitRange{Int64})

linepoint(::Nothing)@Other: 3
macro [email protected]:1444[inlined]
top-level scope@Local: 34

[mmikhasenko]

I get the same error

The plot appears for a short moment with @initilize argument, then, disappears on the second update.

I suppose something in JS side is failing, but, frankly, I do not fully understand how the plotclicktracker works.

[mmikhasenko]

What could get wrong in this chunk of code?

	HTML("""<script id="hello">

		const body = $(PlutoRunner.publish_to_js(plot_render))
		const mime = "image/svg+xml"


		const img = this ?? document.createElement("img")


		let url = URL.createObjectURL(new Blob([body], { type: mime }))

		img.type = mime
		img.src = url
		img.draggable = false
		
		const clamp = (x,a,b) => Math.min(Math.max(x, a), b)
		img.transform = f => [
			clamp(f[0] * $(r.x_scale) + $(r.x_offset), $(r.x_min), $(r.x_max)),
			clamp(f[1] * $(r.y_scale) + $(r.y_offset), $(r.y_min), $(r.y_max)),
		]
		img.fired = false
		
		const val = {current: undefined }
		


		# if(this == null) {

		# Object.defineProperty(img, "value", {
		# 	get: () => val.current,
		# 	set: () => {},
		# })
		
		# const handle_mouse = (e) => {
		# 	const svgrect = img.getBoundingClientRect()
		# 	const f = [
		# 		(e.clientX - svgrect.left) / svgrect.width, 
		# 		(e.clientY - svgrect.top) / svgrect.height
		# 	]
		# console.log(f)
		# 	if(img.fired === false){
		# 		img.fired = true
		# 		val.current = img.transform(f)
		# 		img.dispatchEvent(new CustomEvent("input"), {})
		# 	}
		# }



		# img.addEventListener("click", onclick)

		# img.addEventListener("pointerdown", e => {
		# 	if($(draggable)){
		# 		img.addEventListener("pointermove", handle_mouse);
		# 	}
		# 	handle_mouse(e);
		# });
		# const mouseup = e => {
		# 	console.log(e)
		# 	img.removeEventListener("pointermove", handle_mouse);
		# };
		# document.addEventListener("pointerup", mouseup);
		# document.addEventListener("pointerleave", mouseup);
		# }



		return img
		</script>""")

somehow x0 gets nothing

[fonsp]

@mmikhasenko Did you get an error in the chrome dev tools? (Is it because you used # instead of //?)

[mmikhasenko]

I run Pluto in Chrome on Windows. I did not use dev tools for anything in this notebook.

What do you mean exactly?

[fonsp]

Take a look at https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools . Also make sure that you read through https://featured.plutojl.org/web/javascript , understanding this notebook will save you a lot of time!

[mmikhasenko]

Thanks for the links, I educated myself about JavaScript a little bit.
The exercises are very useful.

or in the chrome dev tools? (Is it because you used # instead

There are no errors in the DevTools, when JavaScript is executed.

A cell with

plotclicktracker(linepoint([5,5]))

works. The coordinate values [.., ..] are printed in devtools.

Btw, there are errors that are present in all notebooks

might be related to chrome.

[fonsp]

(Those extra errors are probably because of a chrome extension, click on the source (commons.js) to find out)

[fonsp]

@mmikhasenko Could you share a short notebook that demonstrates what works, and what doesn't work? You used Julia comments (#) in JavaScript, did this not cause an issue?

[mmikhasenko]

no, sorry, ignore the #. That was a failed attempt to debug. I just copied wrong code to the message.
Yes, the original notebook does not work. I can just insert url to the pluto open-file window..

Can try now with bing

[fonsp]

Okay! But could you please make a single notebook file that demonstrates what works (#4 (comment) ) and what doesn't?

[mmikhasenko]

Same Julia error with Microsoft Bing

no, sorry, ignore the #. That was a failed attempt to debug. I just copied wrong code to the message. Yes, the original notebook does not work. I can just insert url to the pluto open-file window..

Can try now with bing

[mmikhasenko]

Okay! But could you please make a single notebook file that demonstrates what works (#4 (comment) ) and what doesn't?

https://gist.github.com/mmikhasenko/9ab5fbe4e9abd28057b44a15e31e0b6e#file-plotclicktracker-drag-jl

[mmikhasenko]

Just made the code work by replacing

const val = {current: undefined}

by

const val = {current: [1,1] }

in the javascript.

[mmikhasenko]

@fonsp do you see the same twinkles?