- Fixed 'JSON cannot stringify cyclic structures' web console error

- Changed undo key command to meta+Z or ctrl+z

- Fixed a bug stopping drawings from switching correctly.

docs/source/conf.py

@@ -1,7 +1,7 @@
 project = 'lightweight-charts-python'
 copyright = '2023, louisnw'
 author = 'louisnw'
-release = '1.0.14'
+release = '1.0.14.1'
 
 extensions = ["myst_parser"]
 

docs/source/docs.md

@@ -567,7 +567,7 @@ The following hotkeys can also be used when the Toolbox is enabled:
 * Alt+T: Trendline
 * Alt+H: Horizontal Line
 * Alt+R: Ray Line
-* Meta+Z: Undo
+* Meta+Z or Ctrl+Z: Undo
 
 ___
 

lightweight_charts/js/toolbox.js

@@ -21,6 +21,12 @@ if (!window.ToolBox) {
             this.subscribeHoverMove()
         }
 
+        toJSON() {
+            // Exclude the chart attribute from serialization
+            const {chart, ...serialized} = this;
+            return serialized;
+        }
+
         makeToolBox() {
             let toolBoxElem = document.createElement('div')
             toolBoxElem.style.position = 'absolute'
@@ -63,7 +69,7 @@ if (!window.ToolBox) {
                 this.drawings.splice(this.drawings.length - 1)
             }
             this.chart.commandFunctions.push((event) => {
-                if (event.metaKey && event.code === 'KeyZ') {
+                if ((event.metaKey || event.ctrlKey) && event.code === 'KeyZ') {
                     commandZHandler(this.drawings[this.drawings.length - 1])
                     return true
                 }
@@ -73,10 +79,13 @@ if (!window.ToolBox) {
         }
 
         makeToolBoxElement(action, keyCmd, paths) {
-            let elem = document.createElement('div')
+            let icon = {
-            elem.style.margin = '3px'
+                elem: document.createElement('div'),
-            elem.style.borderRadius = '4px'
+                action: action,
-            elem.style.display = 'flex'
+            }
+            icon.elem.style.margin = '3px'
+            icon.elem.style.borderRadius = '4px'
+            icon.elem.style.display = 'flex'
 
             let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
             svg.setAttribute("width", "29");
@@ -87,54 +96,53 @@ if (!window.ToolBox) {
             group.setAttribute("fill", this.iconColor)
 
             svg.appendChild(group)
-            elem.appendChild(svg);
+            icon.elem.appendChild(svg);
 
-            elem.addEventListener('mouseenter', () => {
+            icon.elem.addEventListener('mouseenter', () => {
-                elem.style.backgroundColor = elem === this.chart.activeIcon ? this.activeBackgroundColor : this.hoverColor
+                icon.elem.style.backgroundColor = icon === this.chart.activeIcon ? this.activeBackgroundColor : this.hoverColor
                 document.body.style.cursor = 'pointer'
             })
-            elem.addEventListener('mouseleave', () => {
+            icon.elem.addEventListener('mouseleave', () => {
-                elem.style.backgroundColor = elem === this.chart.activeIcon ? this.activeBackgroundColor : this.backgroundColor
+                icon.elem.style.backgroundColor = icon === this.chart.activeIcon ? this.activeBackgroundColor : this.backgroundColor
                 document.body.style.cursor = this.chart.cursor
             })
-            elem.addEventListener('click', () => {
+            icon.elem.addEventListener('click', () => {
                 if (this.chart.activeIcon) {
-                    this.chart.activeIcon.style.backgroundColor = this.backgroundColor
+                    this.chart.activeIcon.elem.style.backgroundColor = this.backgroundColor
                     group.setAttribute("fill", this.iconColor)
                     document.body.style.cursor = 'crosshair'
                     this.chart.cursor = 'crosshair'
-                    action(false)
+                    this.chart.activeIcon.action(false)
+                    if (this.chart.activeIcon === icon) {
+                        return this.chart.activeIcon = null
                     }
-                if (this.chart.activeIcon === elem) {
-                    this.chart.activeIcon = null
-                    return
                 }
-                this.chart.activeIcon = elem
+                this.chart.activeIcon = icon
                 group.setAttribute("fill", this.activeIconColor)
-                elem.style.backgroundColor = this.activeBackgroundColor
+                icon.elem.style.backgroundColor = this.activeBackgroundColor
                 document.body.style.cursor = 'crosshair'
                 this.chart.cursor = 'crosshair'
-                action(true)
+                this.chart.activeIcon.action(true)
             })
             this.chart.commandFunctions.push((event) => {
                 if (event.altKey && event.code === keyCmd) {
                     if (this.chart.activeIcon) {
-                        this.chart.activeIcon.style.backgroundColor = this.backgroundColor
+                        this.chart.activeIcon.elem.style.backgroundColor = this.backgroundColor
                         group.setAttribute("fill", this.iconColor)
                         document.body.style.cursor = 'crosshair'
                         this.chart.cursor = 'crosshair'
-                        action(false)
+                        this.chart.activeIcon.action(false)
                     }
-                    this.chart.activeIcon = elem
+                    this.chart.activeIcon = icon
                     group.setAttribute("fill", this.activeIconColor)
-                    elem.style.backgroundColor = this.activeBackgroundColor
+                    icon.elem.style.backgroundColor = this.activeBackgroundColor
                     document.body.style.cursor = 'crosshair'
                     this.chart.cursor = 'crosshair'
-                    action(true)
+                    this.chart.activeIcon.action(true)
                     return true
                 }
             })
-            return elem
+            return icon.elem
         }
 
         onTrendSelect(toggle, ray = false) {
@@ -152,7 +160,7 @@ if (!window.ToolBox) {
 
 
             if (!toggle) {
-                this.chart.chart.unsubscribeClick(this.chart.clickHandler)
+                this.chart.chart.unsubscribeClick(this.clickHandler)
                 return
             }
             let crosshairHandlerTrend = (param) => {
@@ -206,7 +214,7 @@ if (!window.ToolBox) {
                 }, 10);
             }
 
-            this.chart.clickHandler = (param) => {
+            this.clickHandler = (param) => {
                 if (!this.makingDrawing) {
                     this.makingDrawing = true
                     trendLine.line = this.chart.chart.addLineSeries({
@@ -235,29 +243,29 @@ if (!window.ToolBox) {
                     trendLine.line.setMarkers([])
                     this.drawings.push(trendLine)
                     this.chart.chart.unsubscribeCrosshairMove(crosshairHandlerTrend)
-                    this.chart.chart.unsubscribeClick(this.chart.clickHandler)
+                    this.chart.chart.unsubscribeClick(this.clickHandler)
                     document.body.style.cursor = 'default'
                     this.chart.cursor = 'default'
-                    this.chart.activeIcon.style.backgroundColor = this.backgroundColor
+                    this.chart.activeIcon.elem.style.backgroundColor = this.backgroundColor
                     this.chart.activeIcon = null
                 }
             }
-            this.chart.chart.subscribeClick(this.chart.clickHandler)
+            this.chart.chart.subscribeClick(this.clickHandler)
         }
 
-        onHorzSelect(toggle) {
+        clickHandlerHorz = (param) => {
-            let clickHandlerHorz = (param) => {
                 let price = this.chart.series.coordinateToPrice(param.point.y)
                 let lineStyle = LightweightCharts.LineStyle.Solid
                 let line = new HorizontalLine(this.chart, 'toolBox', price, null, 2, lineStyle, true)
                 this.drawings.push(line)
-                this.chart.chart.unsubscribeClick(clickHandlerHorz)
+                this.chart.chart.unsubscribeClick(this.clickHandlerHorz)
                 document.body.style.cursor = 'default'
                 this.chart.cursor = 'default'
-                this.chart.activeIcon.style.backgroundColor = this.backgroundColor
+                this.chart.activeIcon.elem.style.backgroundColor = this.backgroundColor
                 this.chart.activeIcon = null
             }
-            this.chart.chart.subscribeClick(clickHandlerHorz)
+        onHorzSelect(toggle) {
+            !toggle ? this.chart.chart.unsubscribeClick(this.clickHandlerHorz) : this.chart.chart.subscribeClick(this.clickHandlerHorz)
         }
 
         onRaySelect(toggle) {

setup.py

@@ -5,7 +5,7 @@ with open('README.md', 'r', encoding='utf-8') as f:
 
 setup(
     name='lightweight_charts',
-    version='1.0.14',
+    version='1.0.14.1',
     packages=find_packages(),
     python_requires='>=3.8',
     install_requires=[