clipboard_example.jl

### A Pluto.jl notebook ###
# v0.19.29

#> custom_attrs = ["hide-enabled"]

using Markdown
using InteractiveUtils

# ╔═╡ 9ce0ffe5-43da-4d2d-abde-37ff845fd019
begin
	using PlutoDevMacros
	using PlutoUI
	using BenchmarkTools
	using PlutoExtras
end

# ╔═╡ fe091a2b-a7cc-45a8-811b-efda254d0932
@fromparent begin
	import ^: *
	using >.HypertextLiteral
end

# ╔═╡ e14f2689-36bc-48bb-818c-500805c18523
default_plotly_template("none");

# ╔═╡ afca425d-c420-4e52-85d1-848a8b0897c3
md"""
# Plot Resizer
"""

# ╔═╡ 913bb641-af82-4b62-9cee-bde13c70c592
md"""
Since version 0.4.2 of PlutoPlotly, there is now a new feature that allows to pop-out the plot into a floating window in order to customize its size/scale before taking a snapshot.

In all PlutoPlotly plots, we now have two additional buttons in the modebar, one with the clipboard icon and one with the camera icon (The icon is the same as the usual snapshot button but the functionality is slightly different).

- The clipboard button allows to copy the current plot onto the clipboard as a PNG, only works under certain conditions, see below.
- The snapshot button will instead download the image as a file (similar to the standrd download button in plotly).

The main functionality that was added though, is the possibility of easily customizing the options to give Plotly by detaching the plot object in a separate container that can be resized to find the right size for the image.

To detach the plot object, double click either on the clipboard or on the snapshot button.
"""

# ╔═╡ 87d2b9ab-0868-4955-9f58-9a17ff5c3e70
plot(1:5; config = PlotConfig(;displayModeBar = true))

# ╔═╡ 987eeb12-85c5-43de-aaec-8684e1d397c8
md"""
## Clipboard Copy UI
"""

# ╔═╡ 541e19e4-0426-4ff8-82c0-98ea0137ba83
md"""
!!! note "Clipboard Working Conditons"
	The functionality to paste to the Clipboard does not work in Firefox (as clipboard access from JS is very limited in firefox). \
	It is also limited in Chrome (or Chromium/Edge) to either static html exports (so files), or connection to a Pluto running server either through **localhost** or **https**. \
	This is a mild limitations as most of the use cases in chrome should fall within those conditions. See the [relevant docs](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard) for more details.\
	\
	The package also provides a convenience widget to grab the image from the clipboard icon even on browser that do not support directly writing to the clipboard. This widget can be created using the `plutoplotly_paste_receiver` function that is exported by this package. See the heading below for more informations.
"""

# ╔═╡ 24156eed-3d09-4206-8bf4-217720a4a458
md"""
When double clicking on the clipboard container, the container will popup with some border and a header on top of the plot, like in the image below:
![image](https://github.com/JuliaPluto/PlutoPlotly.jl/assets/12846528/ff2a1a43-6bd3-42c4-8a37-8ab518084040)
"""

# ╔═╡ 4416aff1-19b4-4453-bd43-cccbbf6e2527
md"""
You can notice that the header parameters have all different colored labels. By default when you popout the container above the first time these will be all black, but the color give you some helpful information:
-  **Black**: This label has no preset config option so when you press the clipboard icon to copy the image.$br When exporting the plot, **the current value** (680 for width in the example above) will be sent to plotly for generting the image
-  $(html"<span style='color: var(--cm-tag-color); font-weight: bold;'>Red</span>"): There is a config value set as default for this parameter when exporting the plot, and its value is different from the currently visualized one. $br When exporting the plot, **the default value will be used instead of the visualized one**
-  $(html"<span style='color: var(--cm-macro-color); font-weight: bold;'>Green</span>"): There is a config value set for this parameter and it matches the one visualized in the UI.

The displayed values for width and height represent the acutal width and height **of the plot area** and will adapt to the container window, that can be resized by dragging from its lower right corner.

Each of these paremeters can also be modified manually by clicking on the numbers in the header and modifying them. The plot will update depending on the input value as soon as Enter is pressed, or the span with the number being modified is moved out of focus.

Lastly, the container can be moved around by dragging it from the header. As soon as one clicks outside of the container, the plot will be put back into its originating cell.
"""

# ╔═╡ 55b23a29-b02f-4b35-bb83-a494e8d6f32b
md"""
## Paste Receiver Widget
"""

# ╔═╡ 26c7ef45-644c-4d01-a57c-3c3774b9c24d


# ╔═╡ 7b815ea5-9e3d-4379-9daf-bfac9bfac1c4
md"""
# Packages
"""

# ╔═╡ b6c96d31-4b8f-4280-bdf9-2c9cef929d76
ExtendedTableOfContents()

# ╔═╡ 00000000-0000-0000-0000-000000000001
PLUTO_PROJECT_TOML_CONTENTS = """
[deps]
BenchmarkTools = "6e4b80f9-dd63-53aa-95a3-0cdb28fa8baf"
PlutoDevMacros = "a0499f29-c39b-4c5c-807c-88074221b949"
PlutoExtras = "ed5d0301-4775-4676-b788-cf71e66ff8ed"
PlutoUI = "7f904dfe-b85e-4ff6-b463-dae2292396a8"

[compat]
BenchmarkTools = "~1.3.2"
PlutoDevMacros = "~0.6.0"
PlutoExtras = "~0.7.11"
PlutoUI = "~0.7.52"
"""

# ╔═╡ 00000000-0000-0000-0000-000000000002
PLUTO_MANIFEST_TOML_CONTENTS = """
# This file is machine-generated - editing it directly is not advised

julia_version = "1.10.0-beta2"
manifest_format = "2.0"
project_hash = "e2569efc70dae60e333846de37b5f435c9bd4766"

[[deps.AbstractPlutoDingetjes]]
deps = ["Pkg"]
git-tree-sha1 = "91bd53c39b9cbfb5ef4b015e8b582d344532bd0a"
uuid = "6e696c72-6542-2067-7265-42206c756150"
version = "1.2.0"

[[deps.ArgTools]]
uuid = "0dad84c5-d112-42e6-8d28-ef12dabb789f"
version = "1.1.1"

[[deps.Artifacts]]
uuid = "56f22d72-fd6d-98f1-02f0-08ddc0907c33"

[[deps.Base64]]
uuid = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"

[[deps.BenchmarkTools]]
deps = ["JSON", "Logging", "Printf", "Profile", "Statistics", "UUIDs"]
git-tree-sha1 = "d9a9701b899b30332bbcb3e1679c41cce81fb0e8"
uuid = "6e4b80f9-dd63-53aa-95a3-0cdb28fa8baf"
version = "1.3.2"

[[deps.ColorTypes]]
deps = ["FixedPointNumbers", "Random"]
git-tree-sha1 = "eb7f0f8307f71fac7c606984ea5fb2817275d6e4"
uuid = "3da002f7-5984-5a60-b8a6-cbb66c0b333f"
version = "0.11.4"

[[deps.CompilerSupportLibraries_jll]]
deps = ["Artifacts", "Libdl"]
uuid = "e66e0078-7015-5450-92f7-15fbd957f2ae"
version = "1.0.5+1"

[[deps.Dates]]
deps = ["Printf"]
uuid = "ade2ca70-3891-5945-98fb-dc099432e06a"

[[deps.DocStringExtensions]]
deps = ["LibGit2"]
git-tree-sha1 = "2fb1e02f2b635d0845df5d7c167fec4dd739b00d"
uuid = "ffbed154-4ef7-542d-bbb7-c09d3a79fcae"
version = "0.9.3"

[[deps.Downloads]]
deps = ["ArgTools", "FileWatching", "LibCURL", "NetworkOptions"]
uuid = "f43a241f-c20a-4ad4-852c-f6b1247861c6"
version = "1.6.0"

[[deps.FileWatching]]
uuid = "7b1f6079-737a-58dc-b8bc-7a2ca5c1b5ee"

[[deps.FixedPointNumbers]]
deps = ["Statistics"]
git-tree-sha1 = "335bfdceacc84c5cdf16aadc768aa5ddfc5383cc"
uuid = "53c48c17-4a7d-5ca2-90c5-79b7896eea93"
version = "0.8.4"

[[deps.Hyperscript]]
deps = ["Test"]
git-tree-sha1 = "8d511d5b81240fc8e6802386302675bdf47737b9"
uuid = "47d2ed2b-36de-50cf-bf87-49c2cf4b8b91"
version = "0.0.4"

[[deps.HypertextLiteral]]
deps = ["Tricks"]
git-tree-sha1 = "c47c5fa4c5308f27ccaac35504858d8914e102f9"
uuid = "ac1192a8-f4b3-4bfe-ba22-af5b92cd3ab2"
version = "0.9.4"

[[deps.IOCapture]]
deps = ["Logging", "Random"]
git-tree-sha1 = "d75853a0bdbfb1ac815478bacd89cd27b550ace6"
uuid = "b5f81e59-6552-4d32-b1f0-c071b021bf89"
version = "0.2.3"

[[deps.InteractiveUtils]]
deps = ["Markdown"]
uuid = "b77e0a4c-d291-57a0-90e8-8db25a27a240"

[[deps.JSON]]
deps = ["Dates", "Mmap", "Parsers", "Unicode"]
git-tree-sha1 = "31e996f0a15c7b280ba9f76636b3ff9e2ae58c9a"
uuid = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
version = "0.21.4"

[[deps.LibCURL]]
deps = ["LibCURL_jll", "MozillaCACerts_jll"]
uuid = "b27032c2-a3e7-50c8-80cd-2d36dbcbfd21"
version = "0.6.4"

[[deps.LibCURL_jll]]
deps = ["Artifacts", "LibSSH2_jll", "Libdl", "MbedTLS_jll", "Zlib_jll", "nghttp2_jll"]
uuid = "deac9b47-8bc7-5906-a0fe-35ac56dc84c0"
version = "8.0.1+1"

[[deps.LibGit2]]
deps = ["Base64", "NetworkOptions", "Printf", "SHA"]
uuid = "76f85450-5226-5b5a-8eaa-529ad045b433"

[[deps.LibSSH2_jll]]
deps = ["Artifacts", "Libdl", "MbedTLS_jll"]
uuid = "29816b5a-b9ab-546f-933c-edad1886dfa8"
version = "1.11.0+1"

[[deps.Libdl]]
uuid = "8f399da3-3557-5675-b5ff-fb832c97cbdb"

[[deps.LinearAlgebra]]
deps = ["Libdl", "OpenBLAS_jll", "libblastrampoline_jll"]
uuid = "37e2e46d-f89d-539d-b4ee-838fcccc9c8e"

[[deps.Logging]]
uuid = "56ddb016-857b-54e1-b83d-db4d58db5568"

[[deps.MIMEs]]
git-tree-sha1 = "65f28ad4b594aebe22157d6fac869786a255b7eb"
uuid = "6c6e2e6c-3030-632d-7369-2d6c69616d65"
version = "0.1.4"

[[deps.MacroTools]]
deps = ["Markdown", "Random"]
git-tree-sha1 = "9ee1618cbf5240e6d4e0371d6f24065083f60c48"
uuid = "1914dd2f-81c6-5fcd-8719-6d5c9610ff09"
version = "0.5.11"

[[deps.Markdown]]
deps = ["Base64"]
uuid = "d6f4376e-aef5-505a-96c1-9c027394607a"

[[deps.MbedTLS_jll]]
deps = ["Artifacts", "Libdl"]
uuid = "c8ffd9c3-330d-5841-b78e-0817d7145fa1"
version = "2.28.2+1"

[[deps.Mmap]]
uuid = "a63ad114-7e13-5084-954f-fe012c677804"

[[deps.MozillaCACerts_jll]]
uuid = "14a3606d-f60d-562e-9121-12d972cd8159"
version = "2023.1.10"

[[deps.NetworkOptions]]
uuid = "ca575930-c2e3-43a9-ace4-1e988b2c1908"
version = "1.2.0"

[[deps.OpenBLAS_jll]]
deps = ["Artifacts", "CompilerSupportLibraries_jll", "Libdl"]
uuid = "4536629a-c528-5b80-bd46-f80d51c5b363"
version = "0.3.23+2"

[[deps.Parsers]]
deps = ["Dates", "PrecompileTools", "UUIDs"]
git-tree-sha1 = "716e24b21538abc91f6205fd1d8363f39b442851"
uuid = "69de0a69-1ddd-5017-9359-2bf0b02dc9f0"
version = "2.7.2"

[[deps.Pkg]]
deps = ["Artifacts", "Dates", "Downloads", "FileWatching", "LibGit2", "Libdl", "Logging", "Markdown", "Printf", "REPL", "Random", "SHA", "Serialization", "TOML", "Tar", "UUIDs", "p7zip_jll"]
uuid = "44cfe95a-1eb2-52ea-b672-e2afdf69b78f"
version = "1.10.0"

[[deps.PlutoDevMacros]]
deps = ["AbstractPlutoDingetjes", "DocStringExtensions", "HypertextLiteral", "InteractiveUtils", "MacroTools", "Markdown", "Pkg", "Random", "TOML"]
git-tree-sha1 = "06fa4aa7a8f2239eec99cf54eeddd34f3d4359be"
uuid = "a0499f29-c39b-4c5c-807c-88074221b949"
version = "0.6.0"

[[deps.PlutoExtras]]
deps = ["AbstractPlutoDingetjes", "HypertextLiteral", "InteractiveUtils", "Markdown", "PlutoDevMacros", "PlutoUI", "REPL"]
git-tree-sha1 = "382b530c2ebe31f4a44cb055642bbd71197fbd20"
uuid = "ed5d0301-4775-4676-b788-cf71e66ff8ed"
version = "0.7.11"

[[deps.PlutoUI]]
deps = ["AbstractPlutoDingetjes", "Base64", "ColorTypes", "Dates", "FixedPointNumbers", "Hyperscript", "HypertextLiteral", "IOCapture", "InteractiveUtils", "JSON", "Logging", "MIMEs", "Markdown", "Random", "Reexport", "URIs", "UUIDs"]
git-tree-sha1 = "e47cd150dbe0443c3a3651bc5b9cbd5576ab75b7"
uuid = "7f904dfe-b85e-4ff6-b463-dae2292396a8"
version = "0.7.52"

[[deps.PrecompileTools]]
deps = ["Preferences"]
git-tree-sha1 = "03b4c25b43cb84cee5c90aa9b5ea0a78fd848d2f"
uuid = "aea7be01-6a6a-4083-8856-8a6e6704d82a"
version = "1.2.0"

[[deps.Preferences]]
deps = ["TOML"]
git-tree-sha1 = "00805cd429dcb4870060ff49ef443486c262e38e"
uuid = "21216c6a-2e73-6563-6e65-726566657250"
version = "1.4.1"

[[deps.Printf]]
deps = ["Unicode"]
uuid = "de0858da-6303-5e67-8744-51eddeeeb8d7"

[[deps.Profile]]
deps = ["Printf"]
uuid = "9abbd945-dff8-562f-b5e8-e1ebf5ef1b79"

[[deps.REPL]]
deps = ["InteractiveUtils", "Markdown", "Sockets", "Unicode"]
uuid = "3fa0cd96-eef1-5676-8a61-b3b8758bbffb"

[[deps.Random]]
deps = ["SHA"]
uuid = "9a3f8284-a2c9-5f02-9a11-845980a1fd5c"

[[deps.Reexport]]
git-tree-sha1 = "45e428421666073eab6f2da5c9d310d99bb12f9b"
uuid = "189a3867-3050-52da-a836-e630ba90ab69"
version = "1.2.2"

[[deps.SHA]]
uuid = "ea8e919c-243c-51af-8825-aaa63cd721ce"
version = "0.7.0"

[[deps.Serialization]]
uuid = "9e88b42a-f829-5b0c-bbe9-9e923198166b"

[[deps.Sockets]]
uuid = "6462fe0b-24de-5631-8697-dd941f90decc"

[[deps.SparseArrays]]
deps = ["Libdl", "LinearAlgebra", "Random", "Serialization", "SuiteSparse_jll"]
uuid = "2f01184e-e22b-5df5-ae63-d93ebab69eaf"
version = "1.10.0"

[[deps.Statistics]]
deps = ["LinearAlgebra", "SparseArrays"]
uuid = "10745b16-79ce-11e8-11f9-7d13ad32a3b2"
version = "1.9.0"

[[deps.SuiteSparse_jll]]
deps = ["Artifacts", "Libdl", "Pkg", "libblastrampoline_jll"]
uuid = "bea87d4a-7f5b-5778-9afe-8cc45184846c"
version = "7.2.0+1"

[[deps.TOML]]
deps = ["Dates"]
uuid = "fa267f1f-6049-4f14-aa54-33bafae1ed76"
version = "1.0.3"

[[deps.Tar]]
deps = ["ArgTools", "SHA"]
uuid = "a4e569a6-e804-4fa4-b0f3-eef7a1d5b13e"
version = "1.10.0"

[[deps.Test]]
deps = ["InteractiveUtils", "Logging", "Random", "Serialization"]
uuid = "8dfed614-e22c-5e08-85e1-65c5234f0b40"

[[deps.Tricks]]
git-tree-sha1 = "eae1bb484cd63b36999ee58be2de6c178105112f"
uuid = "410a4b4d-49e4-4fbc-ab6d-cb71b17b3775"
version = "0.1.8"

[[deps.URIs]]
git-tree-sha1 = "67db6cc7b3821e19ebe75791a9dd19c9b1188f2b"
uuid = "5c2747f8-b7ea-4ff2-ba2e-563bfd36b1d4"
version = "1.5.1"

[[deps.UUIDs]]
deps = ["Random", "SHA"]
uuid = "cf7118a7-6976-5b1a-9a39-7adc72f591a4"

[[deps.Unicode]]
uuid = "4ec0a83e-493e-50e2-b9ac-8f72acf5a8f5"

[[deps.Zlib_jll]]
deps = ["Libdl"]
uuid = "83775a58-1f1d-513f-b197-d71354ab007a"
version = "1.2.13+1"

[[deps.libblastrampoline_jll]]
deps = ["Artifacts", "Libdl"]
uuid = "8e850b90-86db-534c-a0d3-1478176c7d93"
version = "5.8.0+1"

[[deps.nghttp2_jll]]
deps = ["Artifacts", "Libdl"]
uuid = "8e850ede-7688-5339-a07c-302acd2aaf8d"
version = "1.52.0+1"

[[deps.p7zip_jll]]
deps = ["Artifacts", "Libdl"]
uuid = "3f19e933-33d8-53b3-aaab-bd5110c3b7a0"
version = "17.4.0+2"
"""

# ╔═╡ Cell order:
# ╠═e14f2689-36bc-48bb-818c-500805c18523
# ╟─afca425d-c420-4e52-85d1-848a8b0897c3
# ╟─913bb641-af82-4b62-9cee-bde13c70c592
# ╠═87d2b9ab-0868-4955-9f58-9a17ff5c3e70
# ╟─987eeb12-85c5-43de-aaec-8684e1d397c8
# ╟─541e19e4-0426-4ff8-82c0-98ea0137ba83
# ╟─24156eed-3d09-4206-8bf4-217720a4a458
# ╟─4416aff1-19b4-4453-bd43-cccbbf6e2527
# ╟─55b23a29-b02f-4b35-bb83-a494e8d6f32b
# ╠═26c7ef45-644c-4d01-a57c-3c3774b9c24d
# ╟─7b815ea5-9e3d-4379-9daf-bfac9bfac1c4
# ╠═9ce0ffe5-43da-4d2d-abde-37ff845fd019
# ╠═fe091a2b-a7cc-45a8-811b-efda254d0932
# ╠═b6c96d31-4b8f-4280-bdf9-2c9cef929d76
# ╟─00000000-0000-0000-0000-000000000001
# ╟─00000000-0000-0000-0000-000000000002