feat: add more interactive buttons to the demo page in order to demonstrate #10

Author: cshaa

src/lib/Plot.svelte

@@ -61,7 +61,6 @@
   import { onMount, onDestroy, createEventDispatcher } from 'svelte';
   import { debounce as debouncify } from 'lodash-es';
   const browser = typeof window === 'object';
-  type not = undefined | null;
 
   const nextFrame = browser ? requestAnimationFrame : () => void 0;
 
@@ -162,8 +161,8 @@
   const dispatch = createEventDispatcher<$$Events>();
 
   // bind props
-  export let element: HTMLDivElement | not = undefined;
-  export let plot: PlotlyHTMLElement | not = undefined;
+  export let element: HTMLDivElement | undefined = undefined;
+  export let plot: PlotlyHTMLElement | undefined = undefined;
 
   // input props
   export let libPlotly: typeof import('plotly.js-dist') | null | undefined = undefined;
@@ -211,14 +210,16 @@
     previousPlot = plot;
   }
 
-  const drawUndebounced = (
+  const drawUndebounced = async (
     lib: typeof libPlotly,
-    e: HTMLDivElement | not,
+    e: HTMLDivElement | undefined,
     d: Data[],
     l: Partial<Layout>,
     c: Partial<Config>
   ) => {
-    if (e) lib?.react(e, d, l, c).then(p => (plot = p));
+    if (lib && e) {
+      plot = await lib.react(e, d, l, c);
+    }
   };
 
   $: draw = debouncify(drawUndebounced, debounceWait, debounceOptions);
@@ -230,18 +231,19 @@
   $: fillParent, nextFrame(onResize);
   $: fillParentWidth = fillParent === true || fillParent === 'width';
   $: fillParentHeight = fillParent === true || fillParent === 'height';
-  $: parent = element?.parentElement;
-  let lastParent: typeof parent = null;
+  $: parent = element?.parentElement ?? undefined;
+  let lastParent: typeof parent = undefined;
   $: {
     parentMounted(parent);
     parentUnmounted(lastParent);
     lastParent = parent;
   }
 
-  let resizeObserver: ResizeObserver | not;
+  let resizeObserver: ResizeObserver | undefined;
   onMount(() => (resizeObserver = new ResizeObserver(onResize)));
-  const parentMounted = (parent: Element | not) => parent && resizeObserver?.observe(parent);
-  const parentUnmounted = (parent: Element | not) => parent && resizeObserver?.unobserve(parent);
+  const parentMounted = (parent: Element | undefined) => parent && resizeObserver?.observe(parent);
+  const parentUnmounted = (parent: Element | undefined) =>
+    parent && resizeObserver?.unobserve(parent);
 
   function onResize() {
     if (!parent || !element) return;

src/routes/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import Plot from '$lib/index.js';
   import type { Data, FillParent, DebounceOptions, Config } from '$lib/index.js';
+  import type { ModeBarDefaultButtons, ModeBarButtonAny } from 'plotly.js';
+  const any = (x: any) => x;
 
   // FA icons borrowed for testing purposes only
   const MAXIMIZE_ICON = {
@@ -17,13 +19,17 @@
   let y0 = 1;
   let useDefaultLib = true;
   let fillParent: FillParent = false;
+  let staticPlot = false;
+  let showLogo = false;
+  let modeBarButtons: ModeBarButtonAny[][] | undefined = undefined;
+  let buttonsToRemove: ModeBarDefaultButtons[] = ['autoScale2d'];
   let debounce: DebounceOptions | number | undefined;
 
   let fullscreen = false;
-  $: {
-    if (fullscreen) fillParent = true;
-    else fillParent = false;
-  }
+  // $: {
+  //   if (fullscreen) fillParent = true;
+  //   else fillParent = false;
+  // }
 
   let data: Data[];
   $: data = [
@@ -42,8 +48,14 @@
         icon: fullscreen ? MINIMIZE_ICON : MAXIMIZE_ICON,
         click: () => (fullscreen = !fullscreen)
       }
-    ]
+    ],
+    modeBarButtonsToRemove: [...(buttonsToRemove ?? [])],
+    modeBarButtons,
+
+    staticPlot,
+    displaylogo: showLogo
   };
+  $: console.log(config);
 
   function addData() {
     data.push({
@@ -89,6 +101,37 @@
     <button on:click={() => (debounce = { wait: 500, maxWait: 2000 })}
       >Debounce 500ms, max wait 2s</button
     >
+    <button on:click={() => (staticPlot = !staticPlot)}>Toggle static plot</button>
+    <button on:click={() => (showLogo = !showLogo)}>Toggle Plotly logo</button>
+    <button
+      on:click={() => {
+        buttonsToRemove =
+          buttonsToRemove.length > 1
+            ? ['autoScale2d']
+            : ['zoomIn2d', 'zoomOut2d', 'zoom2d', 'autoScale2d'];
+      }}>Toggle zoom buttons</button
+    >
+    <button
+      on:click={() => {
+        modeBarButtons ??= [];
+        modeBarButtons.push([
+          {
+            name: `foobar${modeBarButtons.length}`,
+            title: `Foobar #${modeBarButtons.length}`,
+            icon: MINIMIZE_ICON,
+            click: () => {}
+          }
+        ]);
+      }}>Add custom button</button
+    >
+    <button
+      on:click={() => {
+        if (modeBarButtons?.length && modeBarButtons[0].length) {
+          any(modeBarButtons[0][0]).title = prompt('Enter new name');
+        }
+      }}>Rename first custom button</button
+    >
+    <button on:click={() => (modeBarButtons = undefined)}>Remove custom buttons</button>
   </section>
 </main>