feat: add support for updateBotbar

src/components/Botbar.svelte

@@ -1,28 +1,30 @@
 <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'
 
-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)
+  // EVENT INTERFACE
+  events.on(`${bbUpdId}:update-bb`, update)
 events.on(`${bbUpdId}:show-bb-panel`, f => showPanel = f)
 
 $:bbStyle = `
@@ -31,48 +33,60 @@ $:bbStyle = `
     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)
 
 onMount(() => { setup() })
-onDestroy(() => {
+  onDestroy(() => {
     events.off(`${bbUpdId}`)
-})
+  })
 
-function setup() {
+  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
@@ -89,5 +103,5 @@ function resizeWatch() {
 .nvjs-botbar {}
 </style>
 <div class="nvjs-botbar" id={bbId} style={bbStyle}>
-    <canvas id={canvasId}></canvas>
+  <canvas id={canvasId}></canvas>
 </div>

src/components/Chart.svelte

@@ -1,76 +1,77 @@
 <script>
 
-// Main component combining all grids, scales, etc.
-// Also, main event router, root of 'update' events
-
-import { onMount, onDestroy } from 'svelte'
-import Cursor from '../core/cursor.js'
-import DataHub from '../core/dataHub.js'
-import MetaHub from '../core/metaHub.js'
-import Scan from '../core/dataScanner.js'
-import Events from '../core/events.js'
-import Const from '../stuff/constants.js'
-import Utils from '../stuff/utils.js'
-import Layout from '../core/layout.js'
-import Context from '../stuff/context.js'
-import Pane from './Pane.svelte'
-import Botbar from './Botbar.svelte'
-import NoDataStub from './NoDataStub.svelte'
-
-export let props = {}
-
-// Getters
-export function getLayout() { return layout }
-export function getRange() { return range }
-export function getCursor() { return cursor }
-
-// Setters
-export function setRange(val) {
-    let emit = !(val.preventDefault ?? true)
-    delete val.preventDefault
-    Object.assign(range, val) // keeping the same ref
-    onRangeChanged(range, emit)
-}
-
-export function setCursor(val) {
-    let emit = !(val.preventDefault ?? true)
-    delete val.preventDefault
-    Object.assign(cursor, val)
-    onCursorChanged(cursor, emit)
-}
-
-// Singleton instances
-let hub = DataHub.instance(props.id)
-let meta = MetaHub.instance(props.id)
-let events = Events.instance(props.id)
-let scan = Scan.instance(props.id)
-
-scan.init(props)
-
-let interval = scan.detectInterval()
-let timeFrame = scan.getTimeframe()
-let range = scan.defaultRange()
-let cursor = new Cursor(meta)
-let storage = {} // Storage for helper variables
-let ctx = new Context(props) // For measuring text
-let chartRR = 0
-let layout = null
-
-scan.calcIndexOffsets()
-
-$:chartProps = Object.assign(
-    {interval, timeFrame, range, ctx, cursor},
-    props
-)
+  // Main component combining all grids, scales, etc.
+  // Also, main event router, root of 'update' events
+
+  import { onMount, onDestroy } from 'svelte'
+  import Cursor from '../core/cursor.js'
+  import DataHub from '../core/dataHub.js'
+  import MetaHub from '../core/metaHub.js'
+  import Scan from '../core/dataScanner.js'
+  import Events from '../core/events.js'
+  import Const from '../stuff/constants.js'
+  import Utils from '../stuff/utils.js'
+  import Layout from '../core/layout.js'
+  import Context from '../stuff/context.js'
+  import Pane from './Pane.svelte'
+  import Botbar from './Botbar.svelte'
+  import NoDataStub from './NoDataStub.svelte'
+
+  export let props = {}
+
+  // Getters
+  export function getLayout() { return layout }
+  export function getRange() { return range }
+  export function getCursor() { return cursor }
+
+  // Setters
+  export function setRange(val) {
+      let emit = !(val.preventDefault ?? true)
+      delete val.preventDefault
+      Object.assign(range, val) // keeping the same ref
+      onRangeChanged(range, emit)
+  }
+
+  export function setCursor(val) {
+      let emit = !(val.preventDefault ?? true)
+      delete val.preventDefault
+      Object.assign(cursor, val)
+      onCursorChanged(cursor, emit)
+  }
+
+  // Singleton instances
+  let hub = DataHub.instance(props.id)
+  let meta = MetaHub.instance(props.id)
+  let events = Events.instance(props.id)
+  let scan = Scan.instance(props.id)
+
+  scan.init(props)
+
+  let interval = scan.detectInterval()
+  let timeFrame = scan.getTimeframe()
+  let range = scan.defaultRange()
+  let cursor = new Cursor(meta)
+  let storage = {} // Storage for helper variables
+  let ctx = new Context(props) // For measuring text
+  let chartRR = 0
+  let layout = null
+  let grids = []
+
+  scan.calcIndexOffsets()
+
+  $:chartProps = Object.assign(
+      {interval, timeFrame, range, ctx, cursor},
+      props
+  )
 
 // EVENT INTEFACE
-events.on('chart:cursor-changed', onCursorChanged)
-events.on('chart:cursor-locked', onCursorLocked)
-events.on('chart:range-changed', onRangeChanged)
-events.on('chart:update-layout', update)
-events.on('chart:full-update', fullUpdate)
+  events.on('chart:cursor-changed', onCursorChanged)
+  events.on('chart:cursor-locked', onCursorLocked)
+  events.on('chart:range-changed', onRangeChanged)
+  events.on('chart:update-layout', update)
+  events.on('chart:full-update', fullUpdate)
 
-onMount(() => {
+  onMount(() => {
 
     hub.calcSubset(range)
     hub.detectMain()
@@ -191,9 +192,10 @@ function rangeUpdate($range) {
             layout={layout.grids[i]}
             props={chartProps}
             main={pane === hub.chart}
+            bind:grid={grids[i]}
         />
         {/each}
-        <Botbar props={chartProps} {layout}/>
+      <Botbar props={chartProps} {layout} {grids} />
     {:else}
         <NoDataStub {props}/>
     {/if}

src/components/Pane.svelte

@@ -1,29 +1,29 @@
 <script>
 
-// Pane component: combines grid, sidebars & legend
+  // Pane component: combines grid, sidebars & legend
 
-import { onMount, onDestroy } from 'svelte'
-import Grid from './Grid.svelte'
-import Sidebar from './Sidebar.svelte'
-import SidebarStub from './SidebarStub.svelte'
-import Legend from './Legend.svelte'
-import Events from '../core/events.js'
-import Utils from '../stuff/utils.js'
+  import { onMount, onDestroy } from 'svelte'
+  import Grid from './Grid.svelte'
+  import Sidebar from './Sidebar.svelte'
+  import SidebarStub from './SidebarStub.svelte'
+  import Legend from './Legend.svelte'
+  import Events from '../core/events.js'
+  import Utils from '../stuff/utils.js'
 
-export let id // Pane id
-export let props // General props
-export let main // Is this the main Pane
-export let layout // Pane/grid layout
+  export let id // Pane id
+  export let props // General props
+  export let main // Is this the main Pane
+  export let layout // Pane/grid layout
 
-let events = Events.instance(props.id)
-let lsb  // left sidebar ref
-let rsb  // right sidebar ref
-let grid // grid ref
+  let events = Events.instance(props.id)
+  let lsb  // left sidebar ref
+  let rsb  // right sidebar ref
+  export let grid // grid ref
 
-$:leftSb = Utils.getScalesBySide(0, layout)
-$:rightSb = Utils.getScalesBySide(1, layout)
+  $:leftSb = Utils.getScalesBySide(0, layout)
+  $:rightSb = Utils.getScalesBySide(1, layout)
 
-$:style = `
+  $:style = `
     width: ${props.width}px;
     height: ${(layout || {}).height}px;
     /* didn't work, coz canvas draws through the border
@@ -32,20 +32,20 @@ $:style = `
     box-sizing: border-box;*/
 `
 
-// EVENT INTEFACE
-events.on(`pane-${id}:update-pane`, update)
+  // EVENT INTEFACE
+  events.on(`pane-${id}:update-pane`, update)
 
-onMount(() => {
+  onMount(() => {
     // console.log(`Pane ${id} mounted`)
-})
+  })
 
-onDestroy(() => {
+  onDestroy(() => {
     events.off(`pane-${id}`)
-})
+  })
 
-// Send updates to all child components
-// Update layout ref to get faster updates
-function update($layout) {
+  // Send updates to all child components
+  // Update layout ref to get faster updates
+  function update($layout) {
     if (!$layout.grids) return
     layout = $layout.grids[id]
     events.emitSpec(`grid-${id}`, 'update-grid', layout)
@@ -55,28 +55,28 @@ function update($layout) {
     if (rsb) rsb.setLayers(layers)
     events.emitSpec(`sb-${id}-left`, 'update-sb', layout)
     events.emitSpec(`sb-${id}-right`, 'update-sb', layout)
-}
+  }
 
 </script>
 <style>
 </style>
 {#if layout}
-<div class="nvjs-pane" {style}>
+  <div class="nvjs-pane" {style}>
     <Grid {id} {props} {layout} {main} bind:this={grid}/>
     <Legend {id} {props} {layout} {main}/>
     {#if leftSb.length}
-        <Sidebar {id} {props} {layout} bind:this={lsb}
-            side='left' scales={leftSb}/>
+      <Sidebar {id} {props} {layout} bind:this={lsb}
+        side='left' scales={leftSb}/>
     {:else}
-        <SidebarStub {id} {props} {layout}
+      <SidebarStub {id} {props} {layout}
             side='left'/>
     {/if}
     {#if rightSb.length}
-        <Sidebar {id} {props} {layout}  bind:this={rsb}
-            side='right' scales={rightSb}/>
+      <Sidebar {id} {props} {layout}  bind:this={rsb}
+        side='right' scales={rightSb}/>
     {:else}
-        <SidebarStub {id} {props} {layout}
+      <SidebarStub {id} {props} {layout}
             side='right'/>
     {/if}
-</div>
+  </div>
 {/if}