Add fancy clipboard/download plot functionality

[disberd]

This PR adds a button by default to allow copying the plot image to the clipboard.

The following fixes/changes have been included in this PR:

• The PLOT object is now embedded inside another CONTAINER div (while before it was directly sent as output). This allows use to have better control on the display, and to use this container for creating a floating re-sizeable window to customize the plot appearance before copying to clipboard
• A new custom button with the clipboard icon is now included by default in every plot. Check the section below for more details on this functionality
• The download image button already present by default on the modebar is now modified to be able to customize the format/size and name of a plot before downloading it. See the section below for more details on this functionality.
• A new function plutoplotly_paste_receiver can be used to create a small floating div that will receive and store an the PNG that is copied when pressing the clipboard icon on any PlutoPlotly plot. This is will always hold the latest copied plot and is useful for browsers like Firefox which by default disable access from javascript to the system clipboard. This effectively prevent to send the PNG directly to the clipboard in firefox and so it must be manually copied (with right-click on the image).
• A new function default_plotly_template was added to change package-wise the template used by default for plots. I personally prefer to remove the default template from PlotlyBase so this allow one to specify it once at the beginning of the notebook
• The plots are now automatically centered within the cell output (in case they have a fixed width that is smaller than the cell width)

Check below for a pasted example snapshot of a copied image, and further down for a video example of the feature in action (INCEPTION!)

When pressed, this make the plot a floating window that can be moved around an re-sized to customize its appearance. When the desired size is obtained, one can change ths scale factor (which creates higher resolution images) and can get a copy of the plot image as png on the clipboard. Clicking anywhere outside of the plot window will put back the plot inside the cell. The copied image will be a snapshot of what is currently visualized on the screen

New Copy/Download image options

Clipboard Container

The plots always have a clipboard icon on the modebar which will copy the current version of the plot as PNG on the clipboard. Upon double click, the plot container will pop out with resizable borders and fields to view/set the width, height and scale of the plot (the scale is only impacting the DPI in the generated png).

parameters of the container can be set, so that the copy (or download) button will respect the selected value of height/width/scale.
To fix a given value, it is sufficient to click on the value name and the color of the name will turn green.
Black color represent value which are not set, and red colors represent values that are set but are different from the current size of the container (clicking the clipboard icon with a red colored parameter will used the stored value of the parameter, not the current view of the plot).

An example of the popped out plot container is shown below:

Once the desired aspect ratio of the plot has been chosen, the plot can be copied with the current settings by pressing once on the clipboard icon.

Here is an example of a pasted plot obtained with this functionality and the video showing how to generate this plot below (INCEPTION!):

e675617c-8e37-4182-9cda-6c6b2c547b67.mp4

plutoplotly_paste_receiver

Unfortunately direct access to the system clipboard from Javascript is only enabled by default on chromium browsers.
On firefox for example, write access to the system clipboard is not allowed by javascript, so there needs to be some additional manual user intervention for this.
The plutoplotly_paste_receiver function was created for this reason, and it will insert a floating clipboard icon on the top right of the screen. This will store a copy of the last image that has been copied to the clipboard by PlutoPlotly, and it can be expanded by clicking on the icon to manually copy the image as shown below:

91919e69-fe89-43a8-b082-8df3c58da4db.mp4

Download Image button

The camer icon on the modebar, used or downloading an image, is also enhanced in PlutoPlotly with similar functionality to the clipboard icon.
Once double clicking on the download image button, two additional parameters are shown:

• format: Decide the format of the image file that will be downloaded. Can be one of supported formats by the plotly js library which are:
  • png
  • jpeg
  • svg
  • webp
  • json
• Filename: decide the name of the file that will be downloaded (by default every time you save a plot it will be saved as newplot).

Similar to the clipboard, size of the plot can be adapted either by resizing the container or by setting the values in the fields of the respective parameter, and the actual download can be started by clicking once on the camera icon.

This is the container look when it is popped using the camera icon rather than the clipboard icon:

[codecov]

Codecov Report

Attention: 3 lines in your changes are missing coverage. Please review.

Comparison is base (ff94466) 87.37% compared to head (af3524a) 88.80%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main      #32      +/-   ##
==========================================
+ Coverage   87.37%   88.80%   +1.42%     
==========================================
  Files          11       12       +1     
  Lines         206      250      +44     
==========================================
+ Hits          180      222      +42     
- Misses         26       28       +2     

Files	Coverage Δ
src/PlutoPlotly.jl	100.00% <ø> (ø)
src/main_struct.jl	100.00% <100.00%> (ø)
src/paste_receiver.jl	100.00% <100.00%> (ø)
src/preprocess.jl	98.24% <100.00%> (+2.16%)	⬆️
src/show.jl	100.00% <ø> (ø)
src/basics.jl	80.64% <88.46%> (+5.64%)	⬆️

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.