feat: add support for updateBotbar (see line 203 in Chart.svelte)

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "plugins": ["prettier-plugin-svelte"],
+  "pluginSearchDirs": ["."],
+  "semi": false,
+  "singleQuote": true
+}

package.json

@@ -34,6 +34,8 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.4.5",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.2",
     "vite": "^4.5.0",
     "vite-plugin-banner": "^0.7.1",
     "ws": "^8.14.2"

src/components/Botbar.svelte

@@ -1,78 +1,92 @@
 <script>
-// The Bottom Bar. Information flow:
-// Input: props, layout, (?events)
-// Output: canvas, (?events)
+  // The Bottom Bar. Information flow:
+  // Input: props, layout, (?events)
+  // Output: canvas, (?events)
 
-// TODO: add support of overlays with
-// drawBotbar() function
+  // TODO: add support of overlays with
+  // drawBotbar() function
 
-import { onMount, onDestroy } from 'svelte'
-import Events from '../core/events.js'
-import Utils from '../stuff/utils.js'
-import dpr from '../stuff/dprCanvas.js'
-import bb from '../core/primitives/botbar.js'
+  import { onMount, onDestroy } from "svelte"
+  import Events from "../core/events.js"
+  import Utils from "../stuff/utils.js"
+  import dpr from "../stuff/dprCanvas.js"
+  import bb from "../core/primitives/botbar.js"
 
-export let props = {} // General props
-export let layout = {} // Grid layout
+  export let props = {} // General props
+  export let layout = {} // Grid layout
 
-let bbUpdId = `botbar`
-let bbId = `${props.id}-botbar`
-let canvasId = `${props.id}-botbar-canvas`
+  export let grids = []
+  $: layers = grids.map((grid) => grid.getLayers() || []).flat()
+  let bbUpdId = `botbar`
+  let bbId = `${props.id}-botbar`
+  let canvasId = `${props.id}-botbar-canvas`
 
-let events = Events.instance(props.id)
+  let events = Events.instance(props.id)
 
-// EVENT INTERFACE
-events.on(`${bbUpdId}:update-bb`, update)
-events.on(`${bbUpdId}:show-bb-panel`, f => showPanel = f)
+  // EVENT INTERFACE
+  events.on(`${bbUpdId}:update-bb`, update)
+  events.on(`${bbUpdId}:show-bb-panel`, (f) => (showPanel = f))
 
-$:bbStyle = `
+  $: bbStyle = `
     background: ${props.colors.back};
     width: ${(layout.botbar || {}).width}px;
     height: ${(layout.botbar || {}).height}px;
 `
 
-let canvas // Canvas ref
-let ctx // Canvas context
-let showPanel = true
+  let canvas // Canvas ref
+  let ctx // Canvas context
+  let showPanel = true
 
-$:width = (layout.botbar || {}).width
-$:resizeWatch(width)
+  $: width = (layout.botbar || {}).width
+  $: resizeWatch(width)
 
-onMount(() => { setup() })
-onDestroy(() => {
+  onMount(() => {
+    setup()
+  })
+  onDestroy(() => {
     events.off(`${bbUpdId}`)
-})
+  })
 
-function setup() {
-    let botbar = layout.botbar;
-    [canvas, ctx] = dpr.setup(
-        canvasId, botbar.width, botbar.height)
+  function setup() {
+    let botbar = layout.botbar
+    ;[canvas, ctx] = dpr.setup(canvasId, botbar.width, botbar.height)
 
     update()
-}
+  }
 
-function update($layout = layout) {
+  function update($layout = layout) {
     layout = $layout
 
     if (!layout.botbar) return // If not exists
 
     bb.body(props, layout, ctx)
-
     // applyShaders()
+    ovDrawCalls($layout)
 
     if (props.cursor.x && props.cursor.ti !== undefined && showPanel) {
-        bb.panel(props, layout, ctx)
+      bb.panel(props, layout, ctx)
     }
-}
+  }
 
-function resizeWatch() {
+  function resizeWatch() {
     let botbar = layout.botbar
     if (!canvas || !botbar) return
     dpr.resize(canvas, ctx, botbar.width, botbar.height)
     update()
-}
+  }
+
+  // Draw stuff from overlay scripts
+  function ovDrawCalls($layout) {
+    if (layout.botbar) {
+      for (var l of layers) {
+        let ov = l.overlay
+        if (ov.drawBotbar) ov.drawBotbar(ctx)
+      }
+    }
+    // TODO: implementation
+  }
 
-/*function applyShaders() {
+  /*function applyShaders() {
     let props = {
         layout: layout,
         cursor: props.cursor
@@ -83,11 +97,13 @@ function resizeWatch() {
         ctx.restore()
     }
 }*/
-
 </script>
-<style>
-.nvjs-botbar {}
-</style>
+
 <div class="nvjs-botbar" id={bbId} style={bbStyle}>
-    <canvas id={canvasId}></canvas>
+  <canvas id={canvasId}></canvas>
 </div>
+
+<style>
+  .nvjs-botbar {
+  }
+</style>