NEW FEATURE: Trendlines, Rays and the Toolbox

- Added `trend_line` and `ray_line` to the Common Methods.

- Added the `toolbox` parameter to chart declaration. This allows horizontal lines, trend lines and rays to be drawn on the chart using hotkeys and buttons.
    - cmd-Z will delete the last drawing.
    - Drawings can be moved by clicking and dragging.

- Added the `render_drawings` parameter to `set`, which will keep and re-render the drawings displayed on the chart (useful for multiple timeframes!)

Horizontal Lines
- The `horizontal_line` method now returns a HorizontalLine object, containing the methods `update` and `delete`.
- Added the `interactive` parameter to `horizontal_line`, allowing for callbacks to be emitted to the `on_horizontal_line_move` callback method when the line is dragged to a new price (stop losses, limit orders, etc.).

Enhancements:
- added the `precision` method to the Common Methods, allowing for the number of decimal places shown on the price scale to be declared.
- Lines displayed on legends now have toggle switches, allowing for their visibility to be controlled directly within the chart window.
- when using `set`, the column names can now be capitalised, and the `date` column can be the index.

Changes:
- Merged the `title` method into the `price_line` method.

lightweight_charts/js/callback.js

@@ -1,4 +1,4 @@
-function makeSearchBox(chart, callbackFunction) {
+function makeSearchBox(chart) {
     let searchWindow = document.createElement('div')
     searchWindow.style.position = 'absolute'
     searchWindow.style.top = '0'
@@ -49,39 +49,28 @@ function makeSearchBox(chart, callbackFunction) {
     chart.wrapper.addEventListener('mouseout', (event) => {
         selectedChart = false
     })
-    document.addEventListener('keydown', function(event) {
-        if (!selectedChart) {return}
-        if (event.altKey && event.code === 'KeyH') {
-            let price = chart.series.coordinateToPrice(yPrice)
-
-            let colorList = [
-                'rgba(228, 0, 16, 0.7)',
-                'rgba(255, 133, 34, 0.7)',
-                'rgba(164, 59, 176, 0.7)',
-                'rgba(129, 59, 102, 0.7)',
-                'rgba(91, 20, 248, 0.7)',
-                'rgba(32, 86, 249, 0.7)',
-            ]
-            let color = colorList[Math.floor(Math.random()*colorList.length)]
-
-            makeHorizontalLine(chart, 0, price, color, 2, LightweightCharts.LineStyle.Solid, true, '')
-        }
+    chart.commandFunctions.push((event) => {
         if (searchWindow.style.display === 'none') {
             if (/^[a-zA-Z0-9]$/.test(event.key)) {
                 searchWindow.style.display = 'flex';
                 sBox.focus();
+                return true
             }
+            else return false
         }
         else if (event.key === 'Enter') {
-            callbackFunction(`on_search__${chart.id}__${sBox.value}`)
+            chart.callbackFunction(`on_search__${chart.id}__${sBox.value}`)
             searchWindow.style.display = 'none'
             sBox.value = ''
+            return true
         }
         else if (event.key === 'Escape') {
             searchWindow.style.display = 'none'
             sBox.value = ''
+            return true
         }
-    });
+        else return false
+    })
     sBox.addEventListener('input', function() {
         sBox.value = sBox.value.toUpperCase();
     });
@@ -115,7 +104,7 @@ function makeSpinner(chart) {
     animateSpinner();
 }
 
-function makeSwitcher(chart, items, activeItem, callbackFunction, callbackName, activeBackgroundColor, activeColor, inactiveColor, hoverColor) {
+function makeSwitcher(chart, items, activeItem, callbackName, activeBackgroundColor, activeColor, inactiveColor, hoverColor) {
     let switcherElement = document.createElement('div');
     switcherElement.style.margin = '4px 14px'
     switcherElement.style.zIndex = '1000'
@@ -155,7 +144,7 @@ function makeSwitcher(chart, items, activeItem, callbackFunction, callbackName,
             element.style.color = items[index] === item ? 'activeColor' : inactiveColor
         });
         activeItem = item;
-        callbackFunction(`${callbackName}__${chart.id}__${item}`);
+        chart.callbackFunction(`${callbackName}__${chart.id}__${item}`);
     }
     chart.topBar.appendChild(switcherElement)
     makeSeperator(chart.topBar)