From 27b82687995b22db5d933040d162586426a03d73 Mon Sep 17 00:00:00 2001 From: louisnw Date: Mon, 17 Jul 2023 15:05:11 +0100 Subject: [PATCH] - 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 | 2 +- docs/source/docs.md | 2 +- lightweight_charts/js/toolbox.js | 80 ++++++++++++++++++-------------- setup.py | 2 +- 4 files changed, 47 insertions(+), 39 deletions(-) diff --git a/docs/source/conf.py b/docs/source/conf.py index f46324d..c2da5d6 100644 --- a/docs/source/conf.py +++ b/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"] diff --git a/docs/source/docs.md b/docs/source/docs.md index 546da26..3186715 100644 --- a/docs/source/docs.md +++ b/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 ___ diff --git a/lightweight_charts/js/toolbox.js b/lightweight_charts/js/toolbox.js index 4d0e323..6370741 100644 --- a/lightweight_charts/js/toolbox.js +++ b/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') - elem.style.margin = '3px' - elem.style.borderRadius = '4px' - elem.style.display = 'flex' + let icon = { + elem: document.createElement('div'), + action: action, + } + 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', () => { - elem.style.backgroundColor = elem === this.chart.activeIcon ? this.activeBackgroundColor : this.hoverColor + icon.elem.addEventListener('mouseenter', () => { + icon.elem.style.backgroundColor = icon === this.chart.activeIcon ? this.activeBackgroundColor : this.hoverColor document.body.style.cursor = 'pointer' }) - elem.addEventListener('mouseleave', () => { - elem.style.backgroundColor = elem === this.chart.activeIcon ? this.activeBackgroundColor : this.backgroundColor + icon.elem.addEventListener('mouseleave', () => { + 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) { - let clickHandlerHorz = (param) => { + 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) { diff --git a/setup.py b/setup.py index fe85ef3..5e1175f 100644 --- a/setup.py +++ b/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=[