+
+
+
\ No newline at end of file
diff --git a/js/index2.html b/js/index2.html
new file mode 100644
index 0000000..355af83
--- /dev/null
+++ b/js/index2.html
@@ -0,0 +1,16 @@
+
+
+
+ My Simple HTML Document
+
+
+
+
Hello, World!
+
This is a simple HTML document.
+
ASD
+
+
\ No newline at end of file
diff --git a/js/src/clipboard.js b/js/src/clipboard.js
new file mode 100644
index 0000000..d17f4c6
--- /dev/null
+++ b/js/src/clipboard.js
@@ -0,0 +1,712 @@
+import { addFormatConfigStyle, addClipboardHeaderStyle } from "./styles.js";
+import { delay, getImageOptions, image_options_defaults } from "./utils.js";
+import { mergeDeps } from "./global_deps.js";
+import { addDragFunctionality, addResizeFunctionality } from "./resizer.js";
+import { computeContainerPosition, updateContainerPosition } from "./resizer.js";
+
+// Download formats
+const valid_download_formats = ["png", "svg", "webp", "jpeg", "full-json"];
+// toImageOption keys
+/** @type {(keyof import("./typedef.js").toImageOptions)[]} */
+export const toImageOptionKeys = [
+ "format",
+ "width",
+ "height",
+ "scale",
+ "filename",
+];
+
+// SVG path of the clipboard icon
+const clipboard_path = "M280 64h40c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128C0 92.7 28.7 64 64 64h40 9.6C121 27.5 153.3 0 192 0s71 27.5 78.4 64H280zM64 112c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V128c0-8.8-7.2-16-16-16H304v24c0 13.3-10.7 24-24 24H192 104c-13.3 0-24-10.7-24-24V112H64zm128-8a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"
+
+/**
+ * Update the provided container to eventually add a clipboard header and modify the plot_obj.
+ *
+ * @param {import("./typedef.js").Container} CONTAINER - The container to which the clipboard header will be added.
+ * @return {undefined} span function does not return a value.
+ */
+export function addClipboardFunctionality(CONTAINER) {
+ // Return if the CLIPBOARD HEADER has been assigned already
+ if (CONTAINER.CLIPBOARD_HEADER !== undefined) return;
+ // Try adding the clipboard header if not present
+ addClipboardHeader(CONTAINER);
+ // Add the drag functionality
+ addDragFunctionality(CONTAINER);
+ // Add the resize functionality
+ addResizeFunctionality(CONTAINER);
+ // Customize the togglePopout function
+ CONTAINER.togglePopout = function (filesave = false) {
+ if (CONTAINER.isPoppedOut()) {
+ unpopContainer(CONTAINER);
+ CONTAINER.classList.toggle("filesave-extras", false);
+ } else {
+ popContainer(CONTAINER);
+ CONTAINER.classList.toggle("filesave-extras", filesave);
+ }
+ };
+ // Modify the plot object to include the buttons
+ modifyModebarButtons(CONTAINER);
+ // Add the listener for clipboard image
+ addClipboardEventListener(CONTAINER)
+}
+
+/**
+ * Adds a clipboard event listener to the provided container.
+ *
+ * @param {import("./typedef.js").Container} CONTAINER - The container element to add the listener to.
+ * @return {void} This function does not return anything.
+ */
+function addClipboardEventListener(CONTAINER) {
+ function listener(/** @type {CustomEvent} */ e) {
+ const img = CONTAINER.querySelector("img.clipboard-receiver");
+ // @ts-ignore img will be there and src is a property of it
+ img.src = e.detail.imgsrc
+ }
+ CONTAINER.addEventListener("copy-to-clipboard", listener)
+}
+
+/**
+ * Adds a tooltip listener to the provided config span element.
+ *
+ * @param {HTMLElement} target - The HTML element which should trigger the tooltip appearance.
+ * @param {HTMLElement} tooltip - The tooltip element whose position should be updated while hovering over the target.
+ * @param {import("./typedef.js").JSDeps} js_deps - The dependencies object containing the necessary tools for the tooltip listener.
+ * @return {void} This function does not return a value.
+ */
+function addTooltipListener(target, tooltip, js_deps) {
+ const { floatingUI } = js_deps;
+ const { computePosition, flip, shift, offset } = floatingUI;
+ target.onmouseenter = (e) => {
+ computePosition(target, tooltip, {
+ strategy: "fixed",
+ placement: "top-start",
+ middleware: [offset(6), flip(), shift()],
+ }).then(({ x, y }) => {
+ tooltip.style.top = y + "px";
+ tooltip.style.left = x + "px";
+ });
+ };
+}
+
+/**
+ * Function to add a configuration span element.
+ *
+ * @param {import("./typedef.js").Container} CONTAINER - Container element for the plot
+ * @param {keyof import("./typedef.js").OptionSpansObject} name - lowercase name of the config span
+ */
+export function addSingleConfigSpan(CONTAINER, name) {
+ const { CLIPBOARD_HEADER } = CONTAINER;
+ const { html, lodash } = CONTAINER.js_deps;
+ const config_span = html``;
+ const label = html`${config_span}${lodash.capitalize(name)}:`;
+ const ui_span = html``;
+ /** @type {import("./typedef.js").ImageOptionSpan} */
+ const container = html`
+ ${label} ${ui_span}
+ `;
+ // Add custom style if span is the format span
+ if (name === "format") {
+ addFormatConfigStyle(container);
+ }
+ // Assign the various variables as properties of the container
+ container.label = label;
+ container.ui_span = ui_span;
+ // Initialize the ui_span
+ initializeUIValueSpan(ui_span, name);
+ container.config_span = config_span;
+ // Initialize the config_span
+ initializeConfigValueSpan(config_span, name);
+ container.key = name;
+ CLIPBOARD_HEADER.option_spans[name] = container;
+ // Insert the container as a child of the CLIPBOARD_HEADER
+ CLIPBOARD_HEADER.appendChild(container);
+ // We put some convenience getters/setters
+ // ui_value forward
+ Object.defineProperty(container, "ui_value", {
+ get: () => container.ui_span.value,
+ set: (val) => {
+ container.ui_span.value = val;
+ },
+ });
+ // config_value forward
+ Object.defineProperty(container, "config_value", {
+ get: () => container.config_span.value,
+ set: (val) => {
+ container.config_span.value = val;
+ },
+ });
+ // Add the onclick for setting/unsetting the config
+ label.onclick = DualClick(
+ (/** @type {Event} */ e) => {
+ e.preventDefault();
+ container.config_value = container.ui_value;
+ },
+ (/** @type {Event} */ e) => {
+ e.preventDefault();
+ container.config_value = undefined;
+ }
+ );
+ // Add the tooltip listener
+ addTooltipListener(label, config_span, CONTAINER.js_deps);
+ // Add the listener for imageOptions change
+ const listener = (/** @type {CustomEvent} */ e) => {
+ checkConfigSync(container);
+ };
+ checkConfigSync(container);
+ // @ts-ignore: addEventListener does not support function with CustomEvent as arguments
+ container.addEventListener("clipboard-header-change", listener);
+ return;
+}
+
+/**
+ * Add config spans to the CLIPBOARD_HEADER associated to the given CONTAINER.
+ *
+ * @param {import("./typedef.js").Container} CONTAINER - the Container containing the clipboard header to add config spans to
+ * @return {void}
+ */
+function addOptionSpans(CONTAINER) {
+ const { CLIPBOARD_HEADER } = CONTAINER;
+ const { html } = CONTAINER.js_deps;
+ // @ts-ignore: Will be populated
+ CLIPBOARD_HEADER.option_spans = {};
+ addSingleConfigSpan(CONTAINER, "format");
+ addSingleConfigSpan(CONTAINER, "width");
+ addSingleConfigSpan(CONTAINER, "height");
+ addSingleConfigSpan(CONTAINER, "scale");
+ addHelpIcon(CONTAINER)
+ // Add set/unset
+ // CLIPBOARD_HEADER.appendChild(
+ // html``
+ // );
+ // CLIPBOARD_HEADER.appendChild(
+ // html``
+ // );
+ addSingleConfigSpan(CONTAINER, "filename");
+}
+
+function addHelpIcon(CONTAINER) {
+ const { html } = CONTAINER.js_deps;
+ const { CLIPBOARD_HEADER } = CONTAINER;
+ const tooltip = html`
+
This floating container can be used to modify the plot appearance before copying to the clipboard or downloading the image corresponding to the plot within this container.
+
+
+
+ This is the icon to copy the plot to the clipboard (as a png).
+
+
`
+ const help = html`
+
+
`
+ help.appendChild(tooltip)
+ addTooltipListener(help, tooltip, CONTAINER.js_deps)
+ CLIPBOARD_HEADER.appendChild(help)
+}
+
+/**
+ * Adds a clipboard header to the given container.
+ *
+ * @param {import("./typedef.js").Container} CONTAINER - The container to which the clipboard header will be added.
+ * @param {Partial} [deps] - Global dependencies containing at least html
+ * @return {undefined} span function does not return a value.
+ */
+export function addClipboardHeader(CONTAINER, deps = CONTAINER.js_deps) {
+ const { html, lodash } = mergeDeps(deps);
+ /** @type {import("./typedef.js").ClipboardHeader} */
+ const CLIPBOARD_HEADER = html``;
+ CONTAINER.CLIPBOARD_HEADER = CLIPBOARD_HEADER;
+ addClipboardHeaderStyle(CLIPBOARD_HEADER);
+ // Add the various spans for the UI
+ addOptionSpans(CONTAINER);
+ // Add the objects collecting ui and config options values
+ addImageOptionsObj(CLIPBOARD_HEADER, "ui");
+ addImageOptionsObj(CLIPBOARD_HEADER, "config");
+ CONTAINER.insertAdjacentElement("afterbegin", CLIPBOARD_HEADER);
+ // Insert the listener for the change in width/height
+ function size_listener(/** @type {CustomEvent} */ e) {
+ const { key, type, value } = e.detail;
+ console.log('resize-event')
+ if (type !== "ui") return;
+ if (!(key === "width" || key === "height")) return;
+ const { pr } = computeContainerPosition(CONTAINER);
+ const new_target = {
+ width: pr.width,
+ height: pr.height,
+ top: pr.top,
+ left: pr.left
+ }
+ // Modify the actual key
+ new_target[key] = value
+ if (lodash.isEqual(pr, new_target)) return
+ updateContainerPosition(CONTAINER, new_target);
+ }
+ CLIPBOARD_HEADER.addEventListener("clipboard-header-change", size_listener, {
+ signal: CONTAINER.controller.signal,
+ });
+ return;
+}
+
+/**
+ * Check if the ui and config value for a given span are in sync and update the label color (indirectly through css) and hover text accordingly.
+ * @param {import("./typedef.js").ImageOptionSpan} span
+ */
+function checkConfigSync(span) {
+ // We use the custom getters we'll set up in the container
+ const { ui_value, config_value, config_span, key } = span;
+ if (config_value === undefined) {
+ span.setAttribute("config", "missing");
+ config_span.setVariableText(
+ `The key ${key} is not present in the config.`
+ );
+ } else if (ui_value == config_value) {
+ span.setAttribute("config", "matching");
+ config_span.setVariableText(
+ `The key ${key} has the same value in the config and in the header.`
+ );
+ } else {
+ span.setAttribute("config", "different");
+ config_span.setVariableText(
+ `The key ${key} has a different value (${config_value}) in the config.`
+ );
+ }
+}
+
+/**
+ * Function that returns the parsing function to generate a config value from the UI config span.
+ *
+ * @param {string} key - The key to determine the type of function to return.
+ * @return {function} The function based on the key.
+ */
+function parseFunction(key) {
+ if (key === "width" || key === "height") {
+ return (/** @type {string} */ x) => {
+ return Math.round(parseFloat(x));
+ };
+ } else if (key === "scale") {
+ return parseFloat;
+ } else if (key === "filename") {
+ return (/** @type {string} */ x) => {
+ return x;
+ };
+ } else if (key === "format") {
+ return (/** @type {string} */ x) => {
+ if (!valid_download_formats.includes(x)) {
+ throw new Error(
+ `Invalid format: ${x}, only the following ones are supported ${valid_download_formats}`
+ );
+ }
+ return x;
+ };
+ } else {
+ throw new Error(`Unknown key: ${key}`);
+ }
+}
+
+/**
+ *
+ * @param {string} key
+ * @returns {Function}
+ */
+function updateFunction(key) {
+ if (key === "format") {
+ /**
+ * @this {HTMLElement & {value: string}}
+ */
+ return function () {
+ this.querySelector(".format-options")?.setAttribute(
+ "selected",
+ this.value
+ );
+ };
+ } else {
+ /**
+ * @this {HTMLElement & {value: number | string}}
+ */
+ return function () {
+ this.textContent = `${this.value}`;
+ };
+ }
+}
+
+/**
+ *
+ * @param {import("./typedef.js").UIValueSpan} span
+ * @param {keyof import("./typedef.js").OptionSpansObject} key
+ * @param {Partial} [deps] - Global dependencies containing at least html
+ */
+function initializeUIValueSpan(span, key, deps = {}) {
+ const { html } = mergeDeps(deps);
+ span.contentEditable = `${key !== "format"}`;
+ span.updateFromValue = updateFunction(key);
+ span.parseValue = parseFunction(key);
+ // For the format key we have to add the format options
+ if (key === "format") {
+ // Here we first add the subspans for each option
+ const opts_div = span.appendChild(
+ html``
+ );
+ for (const fmt of valid_download_formats) {
+ const opt = opts_div.appendChild(
+ html`${fmt}`
+ );
+ opt.onclick = () => {
+ span.value = opt.textContent;
+ span.updateFromValue(span.value);
+ };
+ }
+ }
+ Object.defineProperty(span, "value", {
+ get() {
+ return this._value;
+ },
+ set(val) {
+ let parsedVal;
+ try {
+ parsedVal = this.parseValue(val);
+ } catch (e) {
+ console.warn(
+ `The following error message was thrown while parsing the provided value ${val}:\n\n${e.message}.\n\nIgnoring the provided value`
+ );
+ parsedVal = this.value;
+ }
+ if (parsedVal != this.value) {
+ this._value = parsedVal;
+ this.dispatchEvent(
+ new CustomEvent("clipboard-header-change", {
+ bubbles: true,
+ detail: { key: key, type: "ui", value: parsedVal },
+ })
+ );
+ }
+ this.updateFromValue();
+ },
+ });
+ // We set the default value while initializing
+ span.value = image_options_defaults[key];
+ // We also assign a listener so that the editable is blurred when enter is pressed
+ span.onkeydown = (/** @type {KeyboardEvent} */ e) => {
+ if (e.key === "Enter") {
+ // We don't want to add a newline in the textarea
+ e.preventDefault();
+ span.blur();
+ }
+ };
+ if (key !== "format") {
+ span.onblur = function () {
+ this.value = this.textContent;
+ };
+ }
+}
+
+/**
+ * Defines a setter and getter for a config value span.
+ *
+ * @param {import("./typedef.js").ConfigValueSpan} span - The span element to define the setter and getter on
+ * @param {keyof import("./typedef.js").toImageOptions} key - The key to access the config value
+ * @param {Partial} [deps] - Global dependencies containing at least html
+ */
+function initializeConfigValueSpan(span, key, deps = {}) {
+ const { html } = mergeDeps(deps);
+ // We add the span that will contain the variable text
+ const variableText = html``;
+ span.appendChild(variableText);
+ // Text for setting the config
+ span.appendChild(
+ html`
+ Click on the label once to set the current UI value in the
+ config.
+
`
+ );
+ // Text for unsetting the config
+ span.appendChild(
+ html`
+ Click twice to remove span key from the config.
+
`
+ );
+ // We add the function to set the text on the config
+ span.setVariableText = (x) => {
+ variableText.innerHTML = x;
+ };
+ // Here we mostly want to define the setter and getter
+ Object.defineProperty(span, "value", {
+ get() {
+ return this._value;
+ },
+ set(val) {
+ if (val == this.value) return;
+ this._value = val;
+ this.dispatchEvent(
+ new CustomEvent("clipboard-header-change", {
+ bubbles: true,
+ detail: { key: key, type: "config", value: val },
+ })
+ );
+ },
+ });
+}
+
+/**
+ *
+ * @param {import("./typedef.js").ClipboardHeader} CLIPBOARD_HEADER
+ * @param {string} type
+ * @param {import("./typedef.js").Container} type
+ */
+function addImageOptionsObj(CLIPBOARD_HEADER, type) {
+ // @ts-ignore: We populate the keys below
+ const out = {};
+ const header_key = type === "ui" ? "ui_values" : "config_values";
+ const value_key = type === "ui" ? "ui_span" : "config_span";
+ for (const key of toImageOptionKeys) {
+ const span = CLIPBOARD_HEADER.option_spans[key][value_key];
+ Object.defineProperty(out, key, {
+ get: () => span.value,
+ set: (val) => (span.value = val),
+ enumerable: true,
+ });
+ }
+ // @ts-ignore: We did put the keys above
+ CLIPBOARD_HEADER[header_key] = out;
+}
+
+// // span code updates the image options in the PLOT config with the provided ones
+// function setImageOptions(o) {
+// for (const [key, container] of Object.entries(option_spans)) {
+// container.config_value = o[key];
+// }
+// }
+// function unsetImageOptions() {
+// setImageOptions({});
+// }
+
+// const set_button = CLIPBOARD_HEADER.querySelector(".clipboard-span.set");
+// const unset_button = CLIPBOARD_HEADER.querySelector(".clipboard-span.unset");
+// if (firstRun) {
+// set_button.onclick = (e) => {
+// for (const container of Object.values(option_spans)) {
+// container.config_value = container.ui_value;
+// }
+// };
+// unset_button.onclick = unsetImageOptions;
+// }
+
+// CLIPBOARD_HEADER.onmousedown = function (event) {
+// if (event.target.matches("span.clipboard-value")) {
+// console.log("We don't move!");
+// return;
+// }
+// const start = {
+// left: parseFloat(CONTAINER.style.left),
+// top: parseFloat(CONTAINER.style.top),
+// X: event.pageX,
+// Y: event.pageY,
+// };
+// function moveAt(event, start) {
+// const top = event.pageY - start.Y + start.top + "px";
+// const left = event.pageX - start.X + start.left + "px";
+// CLIPBOARD_HEADER.style.left = left;
+// CONTAINER.style.left = left;
+// CONTAINER.style.top = top;
+// }
+
+// // move our absolutely positioned ball under the pointer
+// moveAt(event, start);
+// function onMouseMove(event) {
+// moveAt(event, start);
+// }
+
+// // We use span to remove the mousemove when clicking outside of the container
+// const controller = new AbortController();
+
+// // move the container on mousemove
+// document.addEventListener("mousemove", onMouseMove, {
+// signal: controller.signal,
+// });
+// document.addEventListener(
+// "mousedown",
+// (e) => {
+// if (e.target.closest(".plutoplotly-container") !== CONTAINER) {
+// cleanUp();
+// controller.abort();
+// return;
+// }
+// },
+// { signal: controller.signal }
+// );
+
+// function cleanUp() {
+// console.log("cleaning up the plot move listener");
+// controller.abort();
+// CLIPBOARD_HEADER.onmouseup = null;
+// }
+
+// // (3) drop the ball, remove unneeded handlers
+// CLIPBOARD_HEADER.onmouseup = cleanUp;
+// };
+
+/**
+ * Function to send the provided blob to the clipboard using the Clipboard API.
+ *
+ * @param {Blob} blob - the blob to be copied to the clipboard
+ * @return {void}
+ */
+function sendToClipboard(blob) {
+ if (!navigator.clipboard) {
+ alert(
+ "The Clipboard API does not seem to be available, make sure the Pluto notebook is being used from either localhost or an https source."
+ );
+ }
+ navigator.clipboard
+ .write([
+ new ClipboardItem({
+ // The key is determined dynamically based on the blob's type.
+ [blob.type]: blob,
+ }),
+ ])
+ .then(
+ function () {
+ console.log("Async: Copying to clipboard was successful!");
+ },
+ function (err) {
+ console.error("Async: Could not copy text: ", err);
+ }
+ );
+}
+
+/**
+ * Function to copy the image from the parent container to the clipboard.
+ * @param {import('./typedef.js').Container} CONTAINER
+ */
+export function copyImageToClipboard(CONTAINER) {
+ // We extract the image options from the provided parameters (if they exist)
+ const { Plotly, PLOT, CLIPBOARD_HEADER } = CONTAINER;
+ const { ui_values, config_values } = CLIPBOARD_HEADER;
+ const config = {
+ width: config_values.width ?? ui_values.width,
+ height: config_values.height ?? ui_values.height,
+ format: config_values.format ?? ui_values.format,
+ scale: config_values.scale ?? ui_values.scale,
+ };
+ // @ts-ignore config would like toImageOpts but we are ok with this
+ Plotly.toImage(PLOT, config).then(function (dataUrl) {
+ fetch(dataUrl)
+ .then((res) => res.blob())
+ .then((blob) => {
+ PLOT.dispatchEvent(
+ new CustomEvent("copy-to-clipboard", {
+ bubbles: true,
+ detail: { imgsrc: dataUrl },
+ })
+ );
+ sendToClipboard(blob);
+ });
+ });
+}
+
+/**
+ * Function to save the image from the provided container to the disk.
+ * @param {import('./typedef.js').Container} CONTAINER
+ */
+function saveImageToFile(CONTAINER) {
+ // We extract the image options from the provided parameters (if they exist)
+ const { Plotly, PLOT, CLIPBOARD_HEADER } = CONTAINER;
+ const config = CLIPBOARD_HEADER.ui_values;
+ // @ts-ignore config would like downloadImageOpts but we just use our own type
+ Plotly.downloadImage(PLOT, config);
+}
+
+/**
+ * Function to pop out the container from the current position to a fixed one.
+ *
+ * @param {import("./typedef.js").Container} CONTAINER - Main container of the plutoplotly plot
+ */
+export function popContainer(CONTAINER) {
+ // We save the plot pane position before popping it out (which adds border)
+ const plot_rect = CONTAINER.PLOT_PANE.getBoundingClientRect();
+ CONTAINER.classList.toggle("popped-out", true);
+ // We update the left/bottom position to make it fixed in the same position it had before popping
+ updateContainerPosition(CONTAINER, plot_rect);
+}
+
+/**
+ * Function to unpop the container from the fixed position.
+ *
+ * @param {import("./typedef.js").Container} CONTAINER - Main container of the plutoplotly plot
+ */
+export function unpopContainer(CONTAINER) {
+ CONTAINER.classList.toggle("popped-out", false);
+}
+
+/**
+ * Creates a function that will execute single_func if clicked once, and dbl_func if clicked twice within a short timeframe.
+ *
+ * @param {Function} single_func - The function to be executed on a single click
+ * @param {Function} dbl_func - The function to be executed on a double click
+ * @return {Function} A new function that handles single and double clicks
+ */
+function DualClick(single_func, dbl_func) {
+ let nclicks = 0;
+ return function (...args) {
+ nclicks += 1;
+ if (nclicks > 1) {
+ dbl_func(...args);
+ nclicks = 0;
+ } else {
+ delay(300).then(() => {
+ if (nclicks == 1) {
+ single_func(...args);
+ }
+ nclicks = 0;
+ });
+ }
+ };
+}
+
+
+function modifyModebarButtons(CONTAINER) {
+ const { plot_obj, js_deps, togglePopout, Plotly } = CONTAINER;
+ const { lodash } = js_deps;
+ plot_obj.config = plot_obj.config ?? {};
+ // We remove the default download image button
+ plot_obj.config.modeBarButtonsToRemove = lodash.union(
+ plot_obj.config?.modeBarButtonsToRemove,
+ ["toImage"]
+ );
+ // We add the custom button to the modebar
+ plot_obj.config.modeBarButtonsToAdd = lodash.union(
+ plot_obj.config.modeBarButtonsToAdd,
+ [
+ {
+ name: "Copy PNG to Clipboard",
+ icon: {
+ height: 520,
+ width: 520,
+ path: clipboard_path,
+ },
+ direction: "up",
+ click: DualClick(
+ () => copyImageToClipboard(CONTAINER),
+ () => {
+ togglePopout();
+ }
+ ),
+ },
+ {
+ name: "Download Image",
+ icon: Plotly.Icons.camera,
+ direction: "up",
+ click: DualClick(
+ () => saveImageToFile(CONTAINER),
+ () => {
+ togglePopout(true);
+ }
+ ),
+ },
+ ]
+ );
+}
diff --git a/js/src/container.js b/js/src/container.js
new file mode 100644
index 0000000..f22c597
--- /dev/null
+++ b/js/src/container.js
@@ -0,0 +1,123 @@
+//@ts-check
+import { mergeDeps } from "./global_deps.js";
+import { addClipboardFunctionality, toImageOptionKeys } from "./clipboard.js";
+import { addContainerStyle, addPlotPaneStyle } from "./styles.js";
+/**
+ * Creates the Container element used by PlutoPlotly to wrap the plotly.js plot and adds additional functionality like resizing and enhanced clipboard.
+ *
+ * @param {import("./typedef.js").Plotly} Plotly - The Plotly object. Defaults to globalThis.Plotly.
+ * @param {Partial} [deps] - An optional object containing the JS dependencies to use, which are 'html', 'emotion', 'lodash' and 'interact'.
+ * @return {import("./typedef.js").Container} The container element for the Plotly plot.
+ */
+export function makeContainer(Plotly = globalThis.Plotly, deps = {}) {
+ const js_deps = mergeDeps(deps);
+ const { html } = js_deps;
+ const /** @type {import("./typedef.js").Container} */ CONTAINER = html``;
+ CONTAINER.Plotly = Plotly;
+ CONTAINER.js_deps = js_deps;
+ // Add the style to it
+ addContainerStyle(CONTAINER);
+ // Add the Plot Pane
+ addPlotPane(CONTAINER);
+ // Create the child div that will contain the actual plot
+ const PLOT = (CONTAINER.PLOT = CONTAINER.PLOT_PANE.appendChild(
+ html``
+ ));
+ const resizeObserver = (CONTAINER.resizeObserver = new ResizeObserver(
+ (entries) => {
+ if (!PLOT.hasChildNodes()) return; // We skip if no plot has been added yet
+ const lastEntry = entries[entries.length - 1];
+ const { width, height } = lastEntry.contentRect;
+ Plotly.relayout(PLOT, { width, height });
+ }
+ ));
+ resizeObserver.observe(CONTAINER.PLOT_PANE);
+ // We set the flag of remove
+ CONTAINER.remove_container_size = true;
+ // We use a controller to remove event listeners upon invalidation
+ CONTAINER.controller = new AbortController();
+ // We have to add this to keep supporting @bind with the old API using PLOT
+ // TO REMOVE NOW WITH JS MIGRATION? WE ARE ANYHOW BREAKING
+ PLOT.addEventListener(
+ "input",
+ (/** @type {Event} */ e) => {
+ CONTAINER.value = PLOT.value;
+ if (e.bubbles) {
+ return;
+ }
+ CONTAINER.dispatchEvent(new CustomEvent("input"));
+ },
+ { signal: CONTAINER.controller.signal }
+ );
+ // We add a function to check if the clipboard is popped out
+ CONTAINER.isPoppedOut = function () {
+ return this.classList.contains("popped-out");
+ };
+ // We add the function to extract the image options for saving/copying
+ CONTAINER.toImageOptions = toImageOptions;
+ return CONTAINER;
+}
+
+/**
+ * Add the plot data to the already created CONTAINER and update the plot
+ *
+ * @param {import("./typedef.js").Container} CONTAINER - The plutoplotly Container.
+ * @param {import("./typedef.js").PlotObj} plot_obj - An optional object containing the JS dependencies to use, which are 'html', 'emotion', 'lodash' and 'interact'.
+ * @return {undefined} This function does not return anything.
+ */
+export function updatePlotData(CONTAINER, plot_obj) {
+ // Extract the plotly library
+ const { Plotly, PLOT, js_deps } = CONTAINER;
+ const { lodash } = js_deps;
+ // We make the plot responsive if the plot_data does not contain a specific value for it
+ if (!lodash.has(plot_obj, "config.responsive")) {
+ lodash.set(plot_obj, "config.responsive", true);
+ }
+ CONTAINER.plot_obj = plot_obj;
+ // Add the clipboard header
+ addClipboardFunctionality(CONTAINER);
+ Plotly.react(PLOT, plot_obj);
+}
+
+/**
+ * Adds a clipboard header to the given container.
+ *
+ * @param {import("./typedef.js").Container} CONTAINER - The container to which the clipboard header will be added.
+ * @param {Partial} [deps] - Global dependencies containing at least html
+ * @return {undefined} span function does not return a value.
+ */
+function addPlotPane(CONTAINER, deps = CONTAINER.js_deps) {
+ const { html } = mergeDeps(deps);
+ // Return if the PLOT_PANE has been assigned already
+ if (CONTAINER.PLOT_PANE !== undefined) return;
+ const PLOT_PANE_CONTAINER = CONTAINER.appendChild(
+ html``
+ );
+ const PLOT_PANE = (CONTAINER.PLOT_PANE = html`
`);
+ addPlotPaneStyle(PLOT_PANE, deps);
+ PLOT_PANE_CONTAINER.appendChild(PLOT_PANE);
+}
+
+/**
+ * Extracts the image options from the clipboard header
+ * @this {import("./typedef.js").Container}
+ */
+function toImageOptions() {
+ const { CLIPBOARD_HEADER } = this;
+ /** @type {Partial} */
+ const options = {};
+ for (const key of toImageOptionKeys) {
+ const config_value = CLIPBOARD_HEADER.config_values[key];
+ const ui_value = CLIPBOARD_HEADER.ui_values[key];
+ const isPopped = this.isPoppedOut();
+ const value = config_value ?? (isPopped ? ui_value : undefined);
+ if (value !== undefined) {
+ options[key] = value;
+ }
+ }
+ return options;
+}
diff --git a/js/src/global_deps.js b/js/src/global_deps.js
new file mode 100644
index 0000000..400819f
--- /dev/null
+++ b/js/src/global_deps.js
@@ -0,0 +1,44 @@
+// This module will contain an object that has to be populated at run time with external JS dependencies
+
+/** @type {import("./typedef.js").JSDeps} */
+// @ts-ignore: Will be populated at runtime
+export const GlobalDeps = {};
+
+/**
+ * Sets global dependencies for emotion, lodash, interact and html.
+ *
+ * @param {import("./typedef.js").JSDeps} params - An object containing emotion, lodash, interact and html dependencies.
+ * @return {void}
+ */
+export function setGlobalDeps({ emotion, lodash, interact, html, floatingUI }) {
+ GlobalDeps.emotion = emotion;
+ GlobalDeps.lodash = lodash;
+ GlobalDeps.interact = interact;
+ GlobalDeps.html = html;
+ GlobalDeps.floatingUI = floatingUI;
+}
+
+/**
+ * Check if the necessary global dependencies are defined.
+ *
+ * @return {boolean} Whether all the global dependencies are not undefined
+ */
+export function validGlobalDeps() {
+ return (
+ GlobalDeps.emotion != undefined &&
+ GlobalDeps.lodash != undefined &&
+ GlobalDeps.interact != undefined &&
+ GlobalDeps.html != undefined &&
+ GlobalDeps.floatingUI != undefined
+ );
+}
+
+/**
+ * Merges the given dependencies with the existing global dependencies.
+ *
+ * @param {Partial} deps - An object containing the JS dependencies to override.
+ * @return {import("./typedef.js").JSDeps} - A new object that contains the defaul global deps with the provided ones overwritten.
+ */
+export function mergeDeps(deps) {
+ return {...GlobalDeps, ...deps}
+}
\ No newline at end of file
diff --git a/js/src/prehooks.js b/js/src/prehooks.js
new file mode 100644
index 0000000..d263571
--- /dev/null
+++ b/js/src/prehooks.js
@@ -0,0 +1,39 @@
+// This file contains utilities to be executed before calling the plot function.
+// import { interact, html, lodash as _ } from "./url_imports.js"
+import { makeContainer, updatePlotData } from "./container.js";
+import { computeContainerPosition } from "./resizer.js";
+import { processPlotObj } from "./utils.js";
+import { setGlobalDeps, validGlobalDeps, GlobalDeps} from "./global_deps.js";
+export { setGlobalDeps, validGlobalDeps, makeContainer, GlobalDeps, updatePlotData, computeContainerPosition }
+
+// We start by putting all the variable interpolation here at the beginning
+// We have to convert all typedarrays in the layout to normal arrays. See Issue #25
+
+/**
+ * Creates a Plotly plot in a container element with the given plot object.
+ *
+ * @param {import("./typedef.js").PlotObj} plot_obj - The plot object containing the data, layout, and configuration for the plot.
+ * @param {import("./typedef.js").Plotly} [Plotly=globalThis.Plotly] - The Plotly library to use for creating the plot. Defaults to the global Plotly object.
+ * @return {Object} The container element containing the created plot.
+ */
+export function createPlot(plot_obj, Plotly = globalThis.Plotly) {
+ const CONTAINER = makeContainer();
+ const { PLOT } = CONTAINER;
+ // Record or update the layout width/height if provided explicitly
+ PLOT.layout_size = {
+ height: plot_obj.layout?.height,
+ width: plot_obj.layout?.width,
+ }
+ // Removed typed arrays from the layout
+ const _plot_obj = processPlotObj(plot_obj)
+ // For the height we have to also put a fixed value in case the plot is put on a non-fixed-size container (like the default wrapper)
+ // We define a variable to check whether we still have to remove the fixed height
+ let container_height = PLOT.layout_size.height ?? PLOT.container_height ?? 400
+ CONTAINER.style.height = container_height + 'px'
+ Plotly.react(PLOT, _plot_obj)
+ return CONTAINER
+}
+
+export function lol(a = globalThis.asd) {
+ console.log("LOL: ", a)
+}
\ No newline at end of file
diff --git a/js/src/resizer.js b/js/src/resizer.js
new file mode 100644
index 0000000..80d0a6d
--- /dev/null
+++ b/js/src/resizer.js
@@ -0,0 +1,233 @@
+//@ts-check
+
+/**
+ * Function to add Drag functionality to the to plot container when it's
+ * popped-out, working by dragging from the CLIPBOARD_HEADER.
+ * This will not allow the container to go outside of the window boundaries.
+ *
+ * @param {import("./typedef.js").Container} CONTAINER - Container element
+ */
+export function addDragFunctionality(CONTAINER) {
+ const { interact, lodash } = CONTAINER.js_deps;
+ const { CLIPBOARD_HEADER } = CONTAINER;
+ // limits contains the min and max limits for the corresponding css properties
+ const limits = { top: { min: 0, max: 0 }, left: { min: 0, max: 0 } };
+ // current and last will hold the current position, modified while dragging, and the last valid position that was enforced
+ let current = { top: 0, left: 0, width: 0, height: 0 };
+ let last = { top: 0, left: 0, width: 0, height: 0 };
+ // @ts-ignore We assume interact is present
+ interact(CLIPBOARD_HEADER).draggable({
+ listeners: {
+ start(event) {
+ const { cr, pr, border, header_height } =
+ computeContainerPosition(CONTAINER);
+ const { top, left, width, height } = pr;
+ // The minus 3 is for allowing some distance to the edge
+ limits.left = {
+ min: border.left + 3,
+ max: globalThis.innerWidth - (cr.width - border.left + 3),
+ };
+ limits.top = {
+ min: border.top + header_height + 3,
+ // We use the cr.height - header_height because this is constrainted to the window, while the pr.height (PLOT_PANE) can be bigger and represents the height of the plot itself
+ max:
+ globalThis.innerHeight -
+ (cr.height - border.top - header_height + 3), // top/bottom borders are already included in cr.height
+ };
+ current = { top, left, width, height };
+ last = { top, left, width, height };
+ console.log("dragstart: ", { pr, border, header_height, limits, last });
+ CONTAINER.classList.toggle("dragging", true);
+ },
+ move(event) {
+ const left = (current.left += event.dx);
+ const top = (current.top += event.dy);
+ const new_vals = {
+ top: Math.min(Math.max(top, limits.top.min), limits.top.max),
+ left: Math.min(Math.max(left, limits.left.min), limits.left.max),
+ };
+ if (!lodash.isEqual(last, new_vals)) {
+ last = { ...new_vals, width: last.width, height: last.height };
+ updateContainerPosition(CONTAINER, last);
+ }
+ },
+ end(event) {
+ CONTAINER.classList.toggle("dragging", false);
+ },
+ },
+ });
+}
+
+/**
+ * Function to add Resize functionality to the to plot container when it's
+ * popped-out, working by dragging any of the container edges
+ * This will not allow any the container edges to go outside of the window boundaries.
+ *
+ * @param {import("./typedef.js").Container} CONTAINER - Container element
+ */
+export function addResizeFunctionality(CONTAINER) {
+ const { interact, lodash } = CONTAINER.js_deps;
+ const { ui_values } = CONTAINER.CLIPBOARD_HEADER;
+ const limits = {
+ top: { min: 0, max: 0 },
+ left: { min: 0, max: 0 },
+ width: { min: 10, max: 0 },
+ height: { min: 10, max: 0 },
+ };
+ let current = { top: 0, left: 0, width: 0, height: 0 };
+ let last = { top: 0, left: 0, width: 0, height: 0 };
+ interact(CONTAINER).resizable({
+ edges: { top: true, left: true, bottom: true, right: true },
+ listeners: {
+ start(event) {
+ const { edges } = event;
+ const { cr, pr, border, header_height } =
+ computeContainerPosition(CONTAINER);
+ const { top, left, width, height } = pr;
+ current = { top, left, width, height };
+ last = { top, left, width, height };
+ limits.left.min = border.left + 3;
+ limits.left.max = pr.left + width - limits.width.min;
+ limits.top.min = border.top + header_height + 3;
+ // This will limit `top` to the value which will make the container bottom border touch the bottom of the window (minus the margin)
+ limits.top.max =
+ pr.top + (cr.height - header_height) - limits.height.min;
+ limits.width.max = edges.left
+ ? pr.right - limits.left.min // We are resizing left
+ : edges.right
+ ? globalThis.innerWidth - (pr.left + border.right + 3) // We are resizing right
+ : width; // This is in case we are not resizing horizontally
+ limits.height.max = edges.top
+ ? pr.bottom - limits.top.min
+ : edges.bottom
+ ? globalThis.innerHeight - (pr.top + border.bottom + 3)
+ : height; // This is in case we are not resizing vertically
+ CONTAINER.classList.toggle("resizing", true);
+ },
+ move(event) {
+ const { edges, deltaRect } = event;
+ current.width += deltaRect.width;
+ current.height += deltaRect.height;
+ if (edges.left) {
+ current.left += deltaRect.left;
+ }
+ if (edges.top) {
+ current.top += deltaRect.top;
+ }
+ const new_size = {
+ left: Math.min(
+ Math.max(current.left, limits.left.min),
+ limits.left.max
+ ),
+ top: Math.min(Math.max(current.top, limits.top.min), limits.top.max),
+ width: Math.min(
+ Math.max(current.width, limits.width.min),
+ limits.width.max
+ ),
+ height: Math.min(
+ Math.max(current.height, limits.height.min),
+ limits.height.max
+ ),
+ };
+
+ if (!lodash.isEqual(last, new_size)) {
+ last = { ...new_size };
+ updateContainerPosition(CONTAINER, last);
+ }
+ },
+ end(event) {
+ CONTAINER.classList.toggle("resizing", false);
+ },
+ },
+ });
+}
+
+/**
+ * Computes the position of the CONTAINER and PLOT_PANE elements, as well as current border and header height of the container.
+ *
+ * @param {import("./typedef.js").Container} CONTAINER - The container element.
+ * @returns {{cr: DOMRect, pr: DOMRect, border: {top: number, right: number, bottom: number, left: number}, header_height: number}}
+ */
+export function computeContainerPosition(CONTAINER) {
+ const cr = CONTAINER.getBoundingClientRect();
+ const pr = CONTAINER.PLOT_PANE.getBoundingClientRect();
+
+ const computedStyle = getComputedStyle(CONTAINER);
+ const border = {
+ top: parseFloat(computedStyle.getPropertyValue("border-top-width")),
+ right: parseFloat(computedStyle.getPropertyValue("border-right-width")),
+ bottom: parseFloat(computedStyle.getPropertyValue("border-bottom-width")),
+ left: parseFloat(computedStyle.getPropertyValue("border-left-width")),
+ };
+ // This does not count the container top border, so it is really just the height of the clipboard_header
+ const header_height = pr.top - cr.top - border.top;
+
+ return { cr, pr, border, header_height };
+}
+
+/**
+ * Updates the position of the CONTAINER based on the provided left and top values.
+ *
+ * @param {import("./typedef.js").Container} CONTAINER - The container element to update.
+ * @param {{top: number, left: number, width: number, height: number}} target_plot_position }
+ * @param {ReturnType} [size_data]
+ * @return {undefined} the function does not return a value.
+ */
+export function updateContainerPosition(
+ CONTAINER,
+ target_plot_position,
+ size_data = computeContainerPosition(CONTAINER)
+) {
+ const tpr = target_plot_position;
+
+ const { cr, pr, border, header_height } = size_data;
+
+ const { PLOT_PANE } = CONTAINER;
+ const PLOT_PANE_CONTAINER = PLOT_PANE.parentElement;
+
+ const top_offset = tpr.top - pr.top;
+ const left_offset = tpr.left - pr.left;
+ const top = Math.max(cr.top + top_offset, 3);
+ const left = Math.max(cr.left + left_offset, 3);
+
+ // console.log({border, header_height, tpr, pr, cr})
+
+ // These are the height and width offsets for the container in pixels. We add both borders as we have box-sizing: content-box, which does not include borders in the width
+ const height_offset =
+ tpr.top - header_height + border.bottom + 3;
+ const width_offset = tpr.left + border.right + 3;
+
+ CONTAINER.style.setProperty("--element-top", top + "px");
+ CONTAINER.style.setProperty("--element-left", left + "px");
+ // The 3 belows are to have some margin between the border and the window edge
+ CONTAINER.style.setProperty("--max-width-offset", width_offset + "px");
+ CONTAINER.style.setProperty("--max-height-offset", height_offset + "px");
+
+ PLOT_PANE_CONTAINER?.style.setProperty(
+ "--max-height-offset",
+ height_offset + header_height + "px" // We add the header height becuase that is the height difference between container and PLOT_PANE_CONTAINER
+ );
+
+ // We set the actual width and height
+ CONTAINER.style.setProperty("--plot-width", tpr.width + "px");
+ CONTAINER.style.setProperty("--plot-height", tpr.height + "px");
+
+ if (CONTAINER.classList.contains('dragging')) {
+ // We keep the width/height constant
+ const element_width = cr.width - border.left - border.right
+ const element_height = cr.height - border.top - border.bottom
+ CONTAINER.style.setProperty("--element-width", element_width + "px");
+ CONTAINER.style.setProperty("--element-height", element_height + "px");
+ PLOT_PANE_CONTAINER?.style.setProperty("--element-height", element_height - header_height + "px");
+ } else {
+ // We remove the values so it defaults to fit-content
+ CONTAINER.style.setProperty("--element-width", "");
+ CONTAINER.style.setProperty("--element-height", "");
+ PLOT_PANE_CONTAINER?.style.setProperty("--element-height", '');
+ }
+
+ // Update the span
+ const { ui_values } = CONTAINER.CLIPBOARD_HEADER;
+ ui_values.width = tpr.width;
+ ui_values.height = tpr.height;
+}
diff --git a/js/src/styles.js b/js/src/styles.js
new file mode 100644
index 0000000..0e62c2d
--- /dev/null
+++ b/js/src/styles.js
@@ -0,0 +1,311 @@
+import { mergeDeps } from "./global_deps.js";
+
+/**
+ * Adds a container style to the specified container element.
+ *
+ * @param {import("./typedef.js").Container} CONTAINER - The container element to which the style will be added
+ * @param {Partial} [deps] - The object containing the emotion library as property
+ */
+export function addContainerStyle(CONTAINER, deps = CONTAINER.js_deps) {
+ const {
+ emotion: { css },
+ } = mergeDeps(deps);
+ const cl = css`
+ &.popped-out {
+ overflow: hidden;
+ z-index: 1000;
+ position: fixed;
+ background: var(--main-bg-color, var(--bg-color));
+ border: 3px solid var(--kbd-border-color, var(--border-color));
+ border-radius: 12px;
+ top: var(--element-top, 'auto');
+ left: var(--element-left, 'auto');
+ box-sizing: content-box;
+ max-width: calc(100vw - var(--max-width-offset));
+ max-height: calc(100vh - var(--max-height-offset));
+ min-width: 400px;
+ min-height: 300px;
+ width: var(--element-width, fit-content);
+ height: var(--element-height, fit-content);
+ }
+ &.popped-out .plot-pane-container {
+ overflow: auto;
+ box-sizing: border-box;
+ width: var(--element-width, fit-content);
+ height: var(--element-height, fit-content);
+ max-width: calc(100vw - var(--max-width-offset));
+ max-height: calc(100vh - var(--max-height-offset));
+ }
+ // We add defaults color variables for outside Pluto
+ @media (prefers-color-scheme: light) {
+ --border-color: #dfdfdf;
+ --bg-color: white;
+ --tag-color: #ef6155;
+ --macro-color: #5c8c5f;
+ --output-color: hsl(0, 0%, 25%);
+ }
+ @media (prefers-color-scheme: dark) {
+ --border-color: #222222;
+ --bg-color: hsl(0deg 0% 12%);
+ --tag-color: #ef6155;
+ --macro-color: #82b38b;
+ --output-color: hsl(0deg 0% 77%);
+ }
+ `;
+ CONTAINER.classList.add(cl);
+}
+
+/**
+ * Adds the clipboard header style to the given element.
+ *
+ * @param {HTMLElement} element - the element to which the clipboard header style will be added
+ * @param {Partial} [deps] - The object containing the emotion library as property
+ */
+export function addClipboardHeaderStyle(element, deps = {}) {
+ const {
+ emotion: { css },
+ } = mergeDeps(deps);
+ const cl = css`
+ & {
+ display: none;
+ flex-flow: row wrap;
+ background: var(--main-bg-color, var(--bg-color));
+ cursor: move;
+ padding: 5px;
+ align-items: center;
+ user-select: none;
+ color: var(--pluto-output-color, var(--output-color));
+ }
+ .popped-out & {
+ border-bottom: 3px solid var(--kbd-border-color, var(--border-color));
+ display: flex;
+ }
+ & span {
+ display: inline-block;
+ flex: 1;
+ }
+ &.hidden {
+ display: none;
+ }
+ & .clipboard-span {
+ position: relative;
+ }
+ & .clipboard-value {
+ padding-right: 5px;
+ padding-left: 2px;
+ cursor: text;
+ }
+ & .help .tooltip {
+ min-width: 400px;
+ }
+ & .help {
+ display: inline-block;
+ position: absolute;
+ right: 0px;
+ padding-right: 3px;
+ --icon-size: 22px;
+ width: var(--icon-size);
+ height: var(--icon-size);
+ background: var(--main-bg-color, var(--bg-color));
+ z-index: 500;
+ }
+ & .help svg {
+ color: var(--pluto-output-color, var(--output-color));
+ fill: var(--pluto-output-color, var(--output-color));
+ width: var(--icon-size);
+ height: var(--icon-size);
+ }
+ & .help svg.plotly-icon {
+ --icon-size: 15px;
+ display: inline-block;
+ }
+ & .tooltip {
+ font-weight: normal;
+ display: block;
+ visibility: hidden;
+ position: fixed;
+ z-index: 2000;
+ background: var(--main-bg-color, var(--bg-color));
+ border: 3px solid var(--kbd-border-color, var(--border-color));
+ border-radius: 12px;
+ padding: 5px;
+ max-width: 250px;
+ transition: visibility 0.25s;
+ }
+ & .tooltip p:first-child {
+ margin-block-start: 0;
+ }
+ & .tooltip p:last-child {
+ margin-block-end: 0;
+ }
+ & .label {
+ user-select: none;
+ }
+ .plutoplotly-container:not(.dragging) & .tooltip-target:hover .tooltip {
+ visibility: visible;
+ transition: visibility 0s;
+ }
+ & .clipboard-span[config="matching"] .label {
+ color: var(--cm-macro-color, var(--macro-color));
+ font-weight: bold;
+ }
+ & .clipboard-span[config="different"] .label {
+ color: var(--cm-tag-color, var(--tag-color));
+ font-weight: bold;
+ }
+ & .clipboard-span.format {
+ display: none;
+ }
+ & .clipboard-span.filename {
+ flex: 0 0 100%;
+ text-align: center;
+ display: none;
+ }
+ .filesave-extras &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ right: 0;
+ border-bottom: 3px solid var(--cm-border-color, var(--border-color));
+ margin-top: 2px;
+ }
+ .filesave-extras & .clipboard-span.filename {
+ display: inline-block;
+ margin-top: 10px;
+ }
+ & .clipboard-value.filename {
+ margin-left: 3px;
+ text-align: left;
+ min-width: min(60%, min-content);
+ }
+ .filesave-extras & .clipboard-span.format {
+ display: inline-flex;
+ }
+
+ & button {
+ background-color: #4caf50; /* Green background */
+ border: none; /* Remove border */
+ color: white; /* White text */
+ padding: 5px 10px; /* Some padding */
+ text-align: center; /* Centered text */
+ text-decoration: none; /* Remove underline */
+ display: inline-block; /* Make the buttons appear side by side */
+ font-size: 13px; /* Increase font size */
+ margin: 4px 2px; /* Some margin */
+ cursor: pointer; /* Pointer/hand icon on hover */
+ border-radius: 12px; /* Rounded corners */
+ transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+ }
+
+ & button:hover {
+ background-color: #45a049; /* Darker green on hover */
+ box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Slightly bigger shadow on hover */
+ }
+
+ & button:active {
+ background-color: #3e8e41; /* Even darker green when clicked */
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Shadow back to normal when clicked */
+ transform: translateY(2px); /* Slight move down effect when clicked */
+ }
+ `;
+ element.classList.add(cl);
+}
+
+/**
+ * @param {HTMLElement} element - the element to which the clipboard header style will be added
+ * @param {Partial} [deps] - The object containing the emotion library as property
+ */
+export function addFormatConfigStyle(element, deps = {}) {
+ const {
+ emotion: { css },
+ } = mergeDeps(deps);
+ const format_config_style = css`
+ & > .label {
+ flex: 0 0 0;
+ }
+ & .clipboard-value {
+ position: relative;
+ flex: 1 0 auto;
+ min-width: 30px;
+ margin-right: 10px;
+ }
+ & .format-options {
+ display: inline-flex;
+ flex-flow: column;
+ position: absolute;
+ background: var(--main-bg-color, var(--bg-color));
+ border-radius: 12px;
+ padding-left: 3px;
+ z-index: 2000;
+ }
+ & .format-options:hover {
+ cursor: pointer;
+ border: 3px solid var(--kbd-border-color, var(--border-color));
+ padding: 3px;
+ transform: translate(-3px, -6px);
+ }
+ & .format-option {
+ display: none;
+ margin-top: 3px;
+ }
+ & .format-options:hover .format-option {
+ display: inline-block;
+ }
+ & .format-options[selected="png"] .format-option.png,
+ & .format-options[selected="svg"] .format-option.svg,
+ & .format-options[selected="webp"] .format-option.webp,
+ & .format-options[selected="jpeg"] .format-option.jpeg,
+ & .format-options[selected="full-json"] .format-option.full-json {
+ margin-top: 0px;
+ order: -1;
+ display: inline-block;
+ }
+ & .format-options .format-option:hover {
+ background-color: var(--kbd-border-color, var(--border-color));
+ }
+ `;
+ element.classList.add(format_config_style);
+}
+
+/**
+ * Adds a plot_pane style to the specified element.
+ *
+ * @param {HTMLElement} PLOT_PANE - The PLOT PANE, which will contain the actual plotlyjs plot
+ * @param {Partial} [deps] - The object containing the emotion library as property
+ */
+export function addPlotPaneStyle(PLOT_PANE, deps = {}) {
+ const {
+ emotion: { css },
+ } = mergeDeps(deps);
+ const cl = css`
+ & {
+ width: 100%;
+ height: 100%;
+ min-height: 0;
+ min-width: 0;
+ margin: 0;
+ padding: 0;
+ box-sizing: content;
+ }
+ .popped-out & {
+ width: var(--plot-width);
+ height: var(--plot-height);
+ }
+ .show-pasted & img.clipboard-receiver {
+ display: block
+ }
+ .show-pasted & .plutoplotly-plot {
+ display: none;
+ }
+ & img.clipboard-receiver {
+ display: none;
+ width: 100%;
+ height: 100%;
+ }
+ & .js-plotly-plot .plotly div {
+ margin: 0 auto; // This centers the plot
+ }
+ `;
+ PLOT_PANE.classList.add(cl);
+}
diff --git a/js/src/test.js b/js/src/test.js
new file mode 100644
index 0000000..75ca522
--- /dev/null
+++ b/js/src/test.js
@@ -0,0 +1,3 @@
+import createEmotion from "https://esm.sh/@emotion/css@11.11.2/create-instance";
+
+export default createEmotion
\ No newline at end of file
diff --git a/js/src/typedef.js b/js/src/typedef.js
new file mode 100644
index 0000000..f6556d5
--- /dev/null
+++ b/js/src/typedef.js
@@ -0,0 +1,155 @@
+// The type defined here should be picked up by vscode thanks the jsconfig.json as explained in https://stackoverflow.com/questions/45836847/how-to-get-vs-code-to-understand-jsdocs-typedef-across-multiple-files
+// Unfortunately this does not seem to work without the explicit import
+
+// Helper Dependencies
+/**
+ * @typedef {Object} JSDeps
+ * @property {import('https://esm.sh/@emotion/css@11.11.2/create-instance').Emotion} emotion
+ * @property {import('npm:@types/lodash-es')} lodash
+ * @property {import('npm:interactjs').default} interact
+ * @property {import('https://esm.sh/gh/observablehq/stdlib@v5.8.6/src/html.js').html} html
+ * @property {import('https://esm.sh/@floating-ui/dom@1.6.8')} floatingUI
+ */
+
+// Plotly types
+/**
+ * @typedef {import('npm:@types/plotly.js')} Plotly
+ */
+
+/**
+ * @typedef {Plotly.PlotlyDataLayoutConfig & {frames?: Plotly.Frame[]}} PlotObj
+ */
+
+// resizer.js types
+/**
+ * @typedef {Object} BasicSizeData
+ * @property {number} left - The left offset
+ * @property {number} right - The right offset
+ * @property {number} top - The top offset
+ * @property {number} bottom - The bottom offset
+ * @property {number} width - The width of the element
+ * @property {number} height - The height of the element
+ */
+
+/**
+ * @typedef {Object} PaddingBorderData
+ * @property {BasicSizeData} padding - The padding data
+ * @property {BasicSizeData} border - The border data
+ */
+
+/**
+ * @typedef {Object} PaddingBorderOffsetData
+ * @property {BasicSizeData} padding - The padding data
+ * @property {BasicSizeData} border - The border data
+ * @property {Object} offset - The offset data
+ * @property {number} offset.top - The top offset
+ * @property {number} offset.left - The left offset
+ */
+
+/**
+ * @typedef {Object} SizeData
+ * @property {PaddingBorderOffsetData} plot_pad - The padding and border data for the plot
+ * @property {DOMRect} plot_rect - The rect data for the plot
+ * @property {PaddingBorderData} container_pad - The padding and border data for the container
+ * @property {DOMRect} container_rect - The rect data for the container
+ */
+
+/**
+ * @typedef {Object} ComputedSizeData
+ * @property {number} width - The width of the container element
+ * @property {number} height - The height of the container element
+ * @property {boolean} noChange - A flag specifying whether the provided target size was the same as the current plot size
+ */
+
+// clipboard.js types
+/**
+ * @typedef {HTMLElement & {value: string | number}} HTMLWithValue
+ */
+
+/**
+ * @typedef {HTMLWithValue & {
+ * updateFromValue: Function,
+ * parseValue: Function,
+ * }} UIValueSpan
+ */
+
+/**
+ * @typedef {HTMLWithValue & {
+ * setVariableText: Function,
+ * }} ConfigValueSpan
+ */
+
+/**
+ * @typedef {Object} ImageOptionSpanProps
+ * @property {HTMLWithValue} label - The label element
+ * @property {UIValueSpan} ui_span - The span element for the UI value
+ * @property {ConfigValueSpan} config_span - The span element for the config value
+ * @property {keyof OptionSpansObject} key - The key of this ImageOptionSpan
+ * @property {number | string} ui_value
+ * @property {number | string} [config_value]
+ */
+
+/**
+ * @typedef {HTMLElement & ImageOptionSpanProps} ImageOptionSpan
+ */
+
+/**
+ * @typedef {Object} OptionSpansObject
+ * @property {ImageOptionSpan} filename
+ * @property {ImageOptionSpan} format
+ * @property {ImageOptionSpan} width
+ * @property {ImageOptionSpan} height
+ * @property {ImageOptionSpan} scale
+ */
+
+/**
+ * @typedef {Object} toImageOptions
+ * @property {string | undefined} filename
+ * @property {string | undefined} format
+ * @property {number | undefined} width
+ * @property {number | undefined} height
+ * @property {number | undefined} scale
+ */
+
+/**
+ * @typedef {Object} ClipboardHeaderProps
+ * @property {OptionSpansObject} option_spans
+ * @property {toImageOptions} config_values
+ * @property {toImageOptions} ui_values
+ * @property {Function} updateConfigSync
+ */
+
+/**
+ * @typedef {HTMLElement & ClipboardHeaderProps} ClipboardHeader
+*/
+
+// container.js types
+/**
+ * The additional properties and methods attached to the HTML element `el` where the plotly.js plot is created (using `Plotly.react(el, ...plot_data)`)
+ * @typedef {Object} PlotProps
+ * @property {{
+ * width?: number,
+ * height?: number,
+ * }} layout_size
+ */
+
+/**
+ * @typedef {Object} ContainerProps
+ * @property {PlotObj} plot_obj - The plot data used for calling Plotly.react
+ * @property {Function} togglePopout - Toggle the popout status of the container
+ * @property {Function} isPoppedOut - Function to check if the container is popped out or not
+ * @property {JSDeps} js_deps - The JS dependency used internally by plutoplotly functions
+ * @property {ResizeObserver} resizeObserver - The resizeObserver controlling the resizing of the CONTAINER and PLOT
+ * @property {AbortController} controller - The AbortController used to stop all listeners and observers tied to the CONTAINER
+ * @property {Plotly} Plotly - The Plotly library used in this Container
+ * @property {HTMLElement & PlotProps} PLOT - The child div containint the plotly.js plot
+ * @property {ClipboardHeader} CLIPBOARD_HEADER - The header containing all the clipboard related config spans
+ * @property {HTMLElement} PLOT_PANE - The container of the actual plot object, only use to control the size of the plot
+ * @property {Function} toImageOptions
+ * @property {DOMRect} position - The object containing the latest recorded position of the container via getBoundingClientRect()
+ * @property {*} [value] - The eventual value of the CONTAINER to be used for `@bind` inside Pluto
+ */
+
+/**
+ * @typedef {ContainerProps & HTMLElement} Container
+ */
diff --git a/js/src/url_deps.js b/js/src/url_deps.js
new file mode 100644
index 0000000..9886f82
--- /dev/null
+++ b/js/src/url_deps.js
@@ -0,0 +1,5 @@
+export * as lodash from "https://esm.sh/lodash-es@4.17.21"
+export { default as interact } from "https://esm.sh/interactjs@1.10.27"
+export { html } from "https://esm.sh/gh/observablehq/stdlib@v5.8.6/src/html.js"
+export * as emotion from "https://esm.sh/@emotion/css@11.11.2"
+export * as floatingUI from "https://esm.sh/@floating-ui/dom@1.6.8"
\ No newline at end of file
diff --git a/js/src/utils.js b/js/src/utils.js
new file mode 100644
index 0000000..3c35501
--- /dev/null
+++ b/js/src/utils.js
@@ -0,0 +1,73 @@
+import * as _ from "https://esm.sh/lodash-es@4.17.21";
+
+/**
+ *
+ * @param {Object} o
+ * @param {import("./typedef.js").JSDep_lodash} _
+ * @returns
+ */
+function removeTypedArray(o) {
+ return _.isTypedArray(o)
+ ? Array.from(o)
+ : _.isPlainObject(o)
+ ? _.mapValues(o, removeTypedArray)
+ : o;
+}
+
+/**
+ * Process the plot object by removing typed arrays in the layout.
+ *
+ * @param {import("./typedef.js").PlotObj} plot_obj - The plot object to be processed
+ * @return {import("./typedef.js").PlotObj} The processed plot object
+ */
+export function processPlotObj(plot_obj) {
+ return _.update(plot_obj, "layout", removeTypedArray)
+}
+
+/**
+ * Extract the image export options from the plot_obj.
+ *
+ * @param {import("./typedef.js").PlotObj} plot_obj - The plot object to be processed
+ * @return {{
+ * format: string,
+ * width?: number,
+ * height?: number,
+ * scale: number,
+ * filename: string
+ * }} The object containing the export data
+ */
+
+export const image_options_defaults = {
+ format: "png",
+ width: 700,
+ height: 400,
+ scale: 1,
+ filename: "newplot"
+}
+/**
+ * Returns the image options for a given plot object, with default values if not provided.
+ *
+ * @param {import('./typedef.js').PlotObj} [plot_obj] - the plot object for which to get image options
+ * @return {{
+ * format: string,
+ * width: number,
+ * height: number,
+ * scale: number,
+ * filename: string
+ * }} the image options with default values if not provided
+ */
+export function getImageOptions(plot_obj, d = image_options_defaults) {
+ const o = plot_obj?.config?.toImageButtonOptions ?? {};
+ return {
+ format: o.format ?? d.format,
+ width: o.width ?? d.width,
+ height: o.height ?? d.height,
+ scale: o.scale ?? d.scale,
+ filename: o.filename ?? d.filename,
+ };
+}
+
+// We create a Promise version of setTimeout
+export function delay(ms) {
+ return new Promise((resolve) => setTimeout(resolve, ms));
+}
\ No newline at end of file