Version 5.9.2

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@amcharts/amcharts5",
-  "version": "5.9.1",
+  "version": "5.9.2",
   "author": "amCharts <contact@amcharts.com> (https://www.amcharts.com/)",
   "description": "amCharts 5",
   "homepage": "https://www.amcharts.com/",

packages/shared/CHANGELOG.md

@@ -5,6 +5,29 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 Please note, that this project, while following numbering syntax, it DOES NOT
 adhere to [Semantic Versioning](http://semver.org/spec/v2.0.0.html) rules.
 
+## [5.9.2] - 2024-04-17
+
+### Added
+- Accessibility: Two new `Tooltip` settings added: `readerAnnounce` (boolean, default: `false`) and `labelAriaLabel`. If `readerAnnounce` is set to `true`, tooltip's contents (`labelAriaLabel` if set, or regular label text) will be read out by screen readers when tooltip is shown or its data item changes.
+- Accessibility: New `Label` method: `getAccessibleText()`. Returns populated `arialLabel` text if set, or regular `text` content.
+- New `Sprite` method: `compositeScale()`. Returns actual scale of an element, compounded based on scale of its own and all of its ancestors.
+- Net global function `am5.getRootById(id)`. Returns `Root` instance stored in a `<div>` with specific id.
+- 4 new `StockPanel` events added: `moved`, `closed`, `collapsed`, and `expanded`. [More details](https://www.amcharts.com/docs/v5/charts/stock/panels/#Events).
+- 2 new `Entity` methods added: `off(key, callback?)` and `offPrivate(key, callback?)`. Allows removing setting/private setting value change events set via `on()`/`onPrivate()`. [More details](https://www.amcharts.com/docs/v5/concepts/events/#Removing).
+- New `StockChart` setting: `erasingEnabled`. If set to `true`, the chart will go into "eraser" mode - same as clicking on an Eraser tool in stock toolbar.
+
+### Changed
+- HTML content will now scale according to its "composite" `scale`. (Scale calculated all the way its ancestor tree).
+- `StockChart` will now restore "selection mode" after briefly turning it off while drawing is being drawn.
+- Improved dangling of circular labels with Arabic text.
+
+### Fixed
+- HTML content was sometimes being incorrectly positioned if either `width` or `height` was set, but not both.
+- Selecting a drawing on a `StockChart` was resulting in an error if there was no `DrawingControl` present in a chart's toolbar.
+- `StockChart`'s eraser tool was not working properly since `5.9.1`.
+- If a `StockPanel` was added to a zoomed `StockChart` it would not sync its zoom and would appear fully zoomed out.
+
+
 ## [5.9.1] - 2024-04-10
 
 ## Added

src/.internal/charts/stock/StockChart.ts

@@ -127,6 +127,14 @@ export interface IStockChartSettings extends IContainerSettings {
 	 */
 	drawingSelectionEnabled?: boolean;
 
+	/**
+	 * If set to `true`, clicking on drawings will delete them.
+	 *
+	 * @default false
+	 * @since 5.9.2
+	 */
+	erasingEnabled?: boolean;
+
 }
 
 export interface IStockChartPrivate extends IContainerPrivate {
@@ -220,6 +228,8 @@ export class StockChart extends Container {
 	protected _indicatorsChanged = false;
 	protected _baseDP?: IDisposer;
 
+	public _selectionWasOn: boolean = false;
+
 	/**
 	 * A list of stock panels.
 	 *
@@ -377,6 +387,10 @@ export class StockChart extends Container {
 			if (!enabled) {
 				this.unselectDrawings();
 			}
+			else {
+				this.set("erasingEnabled", false);
+			}
+
 			this.panels.each((panel) => {
 				panel.series.each((series) => {
 					if (series.isType<DrawingSeries>("DrawingSeries")) {
@@ -386,6 +400,25 @@ export class StockChart extends Container {
 			})
 		}
 
+		if (this.isDirty("erasingEnabled")) {
+			const enabled = this.get("erasingEnabled", false);
+			if (enabled) {
+				this.set("drawingSelectionEnabled", false);
+			}
+			this.panels.each((panel) => {
+				panel.series.each((series) => {
+					if (series.isType<DrawingSeries>("DrawingSeries")) {
+						if (enabled) {
+							series.enableErasing();
+						}
+						else {
+							series.disableErasing();
+						}
+					}
+				})
+			})
+		}
+
 		if (this.isDirty("volumeNegativeColor") || this.isDirty("volumePositiveColor")) {
 			const volumeSeries = this.get("volumeSeries");
 			if (volumeSeries && volumeSeries.isType<BaseColumnSeries>("BaseColumnSeries")) {
@@ -984,6 +1017,12 @@ export class StockChart extends Container {
 				this._syncXAxes(axis);
 			}
 		})
+
+		if(this._xAxes[0]){
+			this._root.events.once("frameended", ()=>{
+				this._syncXAxes(this._xAxes[0])
+			})
+		}
 	}
 
 	protected _syncExtremes() {

src/.internal/charts/stock/StockPanel.ts

@@ -3,7 +3,7 @@ import type { StockChart } from "./StockChart"
 import type { XYSeries } from "../xy/series/XYSeries";
 import type { Rectangle } from "../../core/render/Rectangle";
 
-import { XYChart, IXYChartPrivate, IXYChartSettings } from "../xy/XYChart";
+import { XYChart, IXYChartPrivate, IXYChartSettings, IXYChartEvents } from "../xy/XYChart";
 import { ListAutoDispose } from "../../core/util/List";
 
 import * as $array from "../../core/util/Array";
@@ -20,6 +20,39 @@ export interface IStockPanelPrivate extends IXYChartPrivate {
 
 }
 
+export interface IStockPanelEvents extends IXYChartEvents {
+	/**
+	 * Kicks in when panels is moved up or down.
+	 * 
+	 * @since 5.9.2
+	 */
+	moved: {
+		oldIndex: number;
+		newIndex: number;
+	};
+
+	/**
+	 * Kicks in when panel is closed (removed).
+	 *
+	 * @since 5.9.2
+	 */
+	closed: {};
+
+	/**
+	 * Kicks in when panel is expanded.
+	 *
+	 * @since 5.9.2
+	 */
+	expanded: {};
+
+	/**
+	 * Kicks in when panel is collapsed (returns to normal size).
+	 *
+	 * @since 5.9.2
+	 */
+	collapsed: {};
+}
+
 /**
  * A panel instance for the [[StockChart]].
  *
@@ -32,6 +65,7 @@ export class StockPanel extends XYChart {
 
 	declare public _settings: IStockPanelSettings;
 	declare public _privateSettings: IStockPanelPrivate;
+	declare public _events: IStockPanelEvents;
 
 	/**
 	 * An instance of [[PanelControls]].
@@ -83,6 +117,15 @@ export class StockPanel extends XYChart {
 		const index = children.indexOf(this);
 		if (index > 0) {
 			children.moveValue(this, index - 1);
+			const type = "moved";
+			if (this.events.isEnabled(type)) {
+				this.events.dispatch(type, {
+					type: type,
+					oldIndex: index,
+					newIndex: index - 1,
+					target: this
+				});
+			}
 		}
 
 		stockChart._updateControls();
@@ -98,6 +141,15 @@ export class StockPanel extends XYChart {
 		const index = children.indexOf(this);
 		if (index < children.length - 1) {
 			children.moveValue(this, index + 1);
+			const type = "moved";
+			if (this.events.isEnabled(type)) {
+				this.events.dispatch(type, {
+					type: type,
+					oldIndex: index,
+					newIndex: index + 1,
+					target: this
+				});
+			}
 		}
 		stockChart._updateControls();
 	}
@@ -107,6 +159,13 @@ export class StockPanel extends XYChart {
 	 */
 	public close(): void {
 		const stockChart = this.getPrivate("stockChart");
+		const type = "closed";
+		if (this.events.isEnabled(type)) {
+			this.events.dispatch(type, {
+				type: type,
+				target: this
+			});
+		}
 		stockChart.panels.removeValue(this);
 		stockChart._updateControls();
 	}
@@ -126,14 +185,30 @@ export class StockPanel extends XYChart {
 
 		$array.each(panels, (panel) => {
 			panel.setPrivate("visible", true);
-		})
+		});
 
 		if (panels.length == 0) {
 			stockChart.panels.each((panel) => {
 				if (panel != this) {
 					panel.setPrivate("visible", false);
 				}
-			})
+			});
+			const type = "expanded";
+			if (this.events.isEnabled(type)) {
+				this.events.dispatch(type, {
+					type: type,
+					target: this
+				});
+			}
+		}
+		else {
+			const type = "collapsed";
+			if (this.events.isEnabled(type)) {
+				this.events.dispatch(type, {
+					type: type,
+					target: this
+				});
+			}
 		}
 
 		stockChart._updateControls();

src/.internal/charts/stock/drawing/DrawingSeries.ts

@@ -498,6 +498,7 @@ export class DrawingSeries extends LineSeries {
 	}
 
 	public enableDrawingSelection(value: boolean) {
+		this._erasingEnabled = false;
 		this.strokes.template.set("forceInactive", !value);
 		this.fills.template.set("forceInactive", !value);
 	}
@@ -807,6 +808,7 @@ export class DrawingSeries extends LineSeries {
 		const stockChart = this._getStockChart();
 		if (stockChart) {
 			if (value) {
+				stockChart._selectionWasOn = stockChart.get("drawingSelectionEnabled", false);
 				stockChart.set("drawingSelectionEnabled", false);
 			}
 		}
@@ -875,6 +877,13 @@ export class DrawingSeries extends LineSeries {
 
 	protected _dispatchStockEvent(type: any, drawingId?: string, index?: number) {
 		const stockChart = this._getStockChart();
+
+		if(type == "drawingadded"){
+			if(stockChart._selectionWasOn){
+				stockChart.set("drawingSelectionEnabled", true);
+			}
+		}
+
 		if (stockChart && stockChart.events.isEnabled(type)) {
 			stockChart.events.dispatch(type, { drawingId: drawingId, series: this, target: stockChart, index: index });
 		}
@@ -1038,10 +1047,14 @@ export class DrawingSeries extends LineSeries {
 
 	public enableErasing() {
 		this._erasingEnabled = true;
+		this.setInteractive(true);
 	}
 
 	public disableErasing() {
 		this._erasingEnabled = false;
+		if(!this._getStockChart().get("drawingSelectionEnabled")){
+			this.setInteractive(false);
+		}		
 	}
 
 	public disableDrawing() {

src/.internal/charts/stock/toolbar/DrawingControl.ts

@@ -239,6 +239,10 @@ export class DrawingControl extends StockControl {
 			const tool = this._getSeriesTool(ev.series);
 			this.set("tool", tool);
 
+			if (!this._isInited()) {
+				return;
+			}
+
 			// Get context
 			const context = ev.series.getContext(ev.drawingId);
 
@@ -665,6 +669,7 @@ export class DrawingControl extends StockControl {
 		this._disposers.push(stockChart.on("drawingSelectionEnabled", (active) => {
 			selectControl.set("active", active);
 		}));
+
 		selectControl.setPrivate("toolbar", toolbar);
 		toolsContainer.appendChild(selectControl.getPrivate("button")!);
 		this.setPrivate("selectControl", selectControl);
@@ -681,6 +686,11 @@ export class DrawingControl extends StockControl {
 			description: l.translateAny("Eraser"),
 			icon: StockIcons.getIcon("Eraser")
 		});
+
+		this._disposers.push(stockChart.on("erasingEnabled", (active) => {
+			eraserControl.set("active", active);
+		}));
+
 		eraserControl.setPrivate("toolbar", toolbar);
 		toolsContainer.appendChild(eraserControl.getPrivate("button")!);
 		this.setPrivate("eraserControl", eraserControl);
@@ -720,16 +730,7 @@ export class DrawingControl extends StockControl {
 	 * @param  active  Eraser active
 	 */
 	public setEraser(active: boolean) {
-		$object.each(this._drawingSeries, (_tool, seriesList) => {
-			$array.each(seriesList, (series) => {
-				if (active) {
-					series.enableErasing();
-				}
-				else {
-					series.disableErasing();
-				}
-			});
-		});
+		this.get("stockChart").set("erasingEnabled", active);
 	}
 
 	/**

src/.internal/core/Registry.ts

@@ -6,7 +6,7 @@ export class Registry {
 	/**
 	 * Currently running version of amCharts.
 	 */
-	readonly version: string = "5.9.1";
+	readonly version: string = "5.9.2";
 
 	/**
 	 * List of applied licenses.
@@ -59,3 +59,20 @@ export function disposeAllRootElements(): void {
 		root.dispose();
 	}
 }
+
+/**
+ * Finds and returns a `Root` element assigned to a container with `id`.
+ * 
+ * @param   id  Container ID
+ * @return      Root
+ * @since 5.9.2
+ */
+export function getRootById(id: string): any {
+	let found;
+	registry.rootElements.forEach((item) => {
+		if (item.dom.id == id) {
+			found = item;
+		}
+	});
+	return found;
+}