Version 5.9.6

package.json

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

packages/shared/CHANGELOG.md

@@ -5,6 +5,23 @@ 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.6] - 2024-05-07
+
+### Added
+- New `EditableLable` setting: `multiline` (default: `true`). If set to `false` will only allow label to be edited on a single line.
+- `hsvToHsl()` and `hslToHsv()` color convertion functions added to `am5.utils` namespace.
+
+### Changed
+- Accessibility: Both vertical and horizontal line elements of `XYCursor` now have their `role` set to `"slider"` by default.
+- `EditableLabel` now supports `maxWidth` and `oversizedBehavior` settings.
+- `EditableLabel` will now reset all available styles that might come from page-wide CSS to `"initial"` so its appearance is not affected by any outside CSS.
+
+### Fixed
+- `EditableLabel` was not being properly positioned with `textAlign` set to anything else than `"left"`.
+- `ValueAxis` in some rare cases (when `max` and `maxPrecision` was set) could get to infinite loop.
+- Some drawing series on `StockChart` were not properly removing items of deleted drawings from their data/dataitems.
+
+
 ## [5.9.5] - 2024-05-02
 
 ### Added

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

@@ -66,12 +66,6 @@ export class DoodleSeries extends DrawingSeries {
 			const dataItem = this.dataItems[len - 1];
 			this._setXLocation(dataItem, valueX);
 
-			let segmentItems = this._di[index];
-			if (!segmentItems) {
-				segmentItems = {};
-			}
-			segmentItems[this._pIndex] = dataItem;
-			this._di[index] = segmentItems;
 			this._pIndex++;
 
 			this.setPrivate("startIndex", 0);
@@ -99,6 +93,7 @@ export class DoodleSeries extends DrawingSeries {
 			}
 
 			this._down = true;
+
 			this.data.push({ stroke: this._getStrokeTemplate(), sprite: this.mainContainer, index: this._index, corner: this._pIndex, drawingId: this._drawingId });
 		}
 	}

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

@@ -259,6 +259,7 @@ export class DrawingSeries extends LineSeries {
 
 		strokesTemplate.events.on("pointerdown", (e) => {
 			const index = this._getIndex(e.target);
+
 			if (this._erasingEnabled) {
 				this._disposeIndex(index);
 			}
@@ -405,6 +406,15 @@ export class DrawingSeries extends LineSeries {
 					}
 				}
 			})
+
+			for(let i = this.dataItems.length - 1; i >= 0; i--){
+				const dataItem = this.dataItems[i];
+				const dataContext = dataItem.dataContext as any;
+				if(dataContext.index == index){
+					this.data.removeValue(dataContext);
+					this.disposeDataItem(dataItem);
+				}
+			}
 
 			this._pIndex = 0;
 			delete this._di[index];
@@ -432,7 +442,7 @@ export class DrawingSeries extends LineSeries {
 				this._createElements(index, dataItem);
 				this._di[index][corner] = dataItem;
 				this._index = index;
-			}
+			}			
 		})
 	}
 
@@ -517,43 +527,6 @@ export class DrawingSeries extends LineSeries {
 		}
 	}
 
-	/*
-	protected _hideAllBullets() {
-		this.strokes.each((stroke) => {
-			stroke.unhover();
-		})
-
-		if (!this._drawingEnabled && !this._isDragging) {
-			const dataItems = this.dataItems;
-
-			$array.each(dataItems, (dataItem) => {
-				const bullets = dataItem.bullets;
-				if (bullets) {
-					$array.each(bullets, (bullet) => {
-						const sprite = bullet.get("sprite");
-						if (sprite) {
-							sprite.hide();
-						}
-					})
-				}
-			})
-		}
-	}
-	protected showAllBullets() {
-		$array.each(this.dataItems, (dataItem) => {
-			const bullets = dataItem.bullets;
-			if (bullets) {
-				$array.each(bullets, (bullet) => {
-					const sprite = bullet.get("sprite");
-					if (sprite) {
-						sprite.show();
-					}
-				})
-			}
-		})
-	}
-	*/
-
 	protected _hideResizer(sprite?: Sprite) {
 		const spriteResizer = this._getStockChart().spriteResizer;
 		if (spriteResizer) {
@@ -930,7 +903,7 @@ export class DrawingSeries extends LineSeries {
 		this._drawingId = this._generateId();
 	}
 
-	protected _generateId(): string {
+	public _generateId(): string {
 		return "" + new Date().getTime() + Math.round(Math.random() * 10000 + 10000);
 	}
 
@@ -1222,6 +1195,7 @@ export class DrawingSeries extends LineSeries {
 
 	public _selectDrawing(index: number, keepSelection?: boolean, force?:boolean) {
 		if (this._getStockChart().get("drawingSelectionEnabled") || force) {
+
 			this._isSelecting = true;
 
 			if (this._selected.indexOf(index) != -1) {

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

@@ -99,6 +99,10 @@ export class LabelSeries extends PolylineSeries {
 				active: true
 			}, template));
 
+			label.on("text", (text)=>{
+				dataContext.text = text;
+			})
+
 			this.setPrivate("label", label);
 
 			label.on("active", () => {
@@ -130,7 +134,6 @@ export class LabelSeries extends PolylineSeries {
 				else {
 					this._isEditing = false;
 					this._isSelected = true;
-					this._selectDrawing(dataContext.index, (e.originalEvent as any).ctrlKey, true);
 					spriteResizer.set("sprite", label);
 				}
 			})

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

@@ -184,7 +184,7 @@ export class PolylineSeries extends DrawingSeries {
 				this._positionBullets(dataItem);
 				this._setXLocation(dataItem, dataItem.get("valueX", 0));
 			}
-			this.data.push({ stroke: this._getStrokeTemplate(), fill: this._getFillTemplate(), index: index + 1, corner: "e", drawingId: this._drawingId });
+
 			this._drawingLine.hide();
 
 			this.isDrawing(false);

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

@@ -53,7 +53,7 @@ export class StockIcons {
 		"Parallel Channel": { viewbox: "0 0 50 50", path: "M 3 37 L 37 3 M 13 47 L 47 13" },
 
 		"Eraser": { viewbox: "0 0 50 50", path: "M 13 48 L 21 48 L 45 24 L 29 8 L 1 36 L 13 48 M 32 48 L 38 48 M 43 48 L 49 48 M 23 14 L 39 30 M 20 17 L 36 33 M 26 11 L 42 27" },
-		"Select": { viewbox: "0 0 50 50", path: "M 6 6 L 33 18 L 22 25 L 36 43 L 31 47 L 18 28 L 9 36 L 6 6" },
+		"Select": { viewbox: "0 0 50 50", path: "M 8 6 L 35 18 L 24 25 L 38 43 L 33 47 L 20 28 L 11 36 L 8 6" },
 		"Clear": { viewbox: "0 0 50 50", path: "M 6 10 L 12 48 L 38 48 L 44 10 L 6 10 M 14 14 L 18 43 M 25 14 L 25 43 M 36 14 L 32 43 M 6 8 L 44 8 M 21 8 L 21 3 L 30 3 L 30 8" },
 		"Bold": { viewbox: "0 0 50 50", path: "M 12 4 L 12 47 L 32 47 C 45 47 47 23 32 23 C 42 23 42 4 31 4 L 12 4 Z M 32 23 L 12 23 Z", style: "stroke-width: 1.8px" },
 		"Italic": { viewbox: "0 0 50 50", path: "M 17 5 L 38 5 M 27 5 L 18 47 M 8 47 L 28 47" },

src/.internal/charts/xy/XYChartDefaultTheme.ts

@@ -210,6 +210,7 @@ export class XYChartDefaultTheme extends Theme {
 				forceInactive: true,
 				strokeOpacity: 0.8,
 				strokeDasharray: [2, 2],
+				role: "slider",
 				ariaLabel: language.translate("Use left and right arrows to move selection")
 			});
 
@@ -223,6 +224,7 @@ export class XYChartDefaultTheme extends Theme {
 				forceInactive: true,
 				strokeOpacity: 0.8,
 				strokeDasharray: [2, 2],
+				role: "slider",
 				ariaLabel: language.translate("Use up and down arrows to move selection")
 			});
 

src/.internal/charts/xy/axes/ValueAxis.ts

@@ -1564,9 +1564,14 @@ export class ValueAxis<R extends AxisRenderer> extends Axis<R> {
 		let step = Math.ceil((difference / gridCount) / power) * power;
 		let stepPower = Math.pow(10, Math.floor(Math.log(Math.abs(step)) * Math.LOG10E));
 
+		if(min > max){
+			[min, max] = [max, min];
+		}
+
 		// the step should divide by  2, 5, and 10.
 		let stepDivisor: number = Math.ceil(step / stepPower); // number 0 - 10
 
+
 		if (stepDivisor > 5) {
 			stepDivisor = 10;
 		}
@@ -1577,11 +1582,16 @@ export class ValueAxis<R extends AxisRenderer> extends Axis<R> {
 		// now get real step
 		step = Math.ceil(step / (stepPower * stepDivisor)) * stepPower * stepDivisor;
 
+
 		let maxPrecision = this.get("maxPrecision");
 		if ($type.isNumber(maxPrecision)) {
+
 			let ceiledStep = $math.ceil(step, maxPrecision);
 			if (maxPrecision < Number.MAX_VALUE && step !== ceiledStep) {
 				step = ceiledStep;
+				if(step == 0){
+					step = 1;
+				}
 			}
 		}
 

src/.internal/core/Registry.ts

@@ -6,7 +6,7 @@ export class Registry {
 	/**
 	 * Currently running version of amCharts.
 	 */
-	readonly version: string = "5.9.5";
+	readonly version: string = "5.9.6";
 
 	/**
 	 * List of applied licenses.

src/.internal/core/render/EditableLabel.ts

@@ -7,6 +7,7 @@ import { color } from "../util/Color";
 
 import * as $utils from "../util/Utils"
 import * as $type from "../util/Type"
+import * as $array from "../util/Array"
 
 export interface IEditableLabelSettings extends ILabelSettings {
 
@@ -25,6 +26,14 @@ export interface IEditableLabelSettings extends ILabelSettings {
 	 */
 	editOn?: "click" | "dblclick" | "rightclick" | "middleclick" | "none";
 
+	/**
+	 * Allow multiple lines (`true` - dfault) or no (`false`).
+	 *
+	 * @default true
+	 * @since 5.9.6
+	 */
+	multiLine?: boolean;
+
 }
 
 export interface IEditableLabelPrivate extends ILabelPrivate {
@@ -127,6 +136,10 @@ export class EditableLabel extends Label {
 
 					// Resize textarea on keypress
 					textarea.addEventListener("input", _ev => {
+						if (this.get("multiLine") === false) {
+							// replace line breaks with spaces for single-line labels
+							textarea.value = textarea.value.replace(/\n/g, " ");
+						}
 						this.set("text", textarea.value);
 						this._syncStyle();
 					});
@@ -143,6 +156,15 @@ export class EditableLabel extends Label {
 						}));
 					}
 
+					// Intercept ENTER if necessary
+					this._disposers.push($utils.addEventListener(document, "keydown", (ev: KeyboardEvent) => {
+						if ($utils.getEventKey(ev) == "Enter" && this.get("multiLine") === false) {
+							// Single-line label, save instead of breaking into new line
+							ev.preventDefault();
+							this.set("active", false);
+						}
+					}));
+
 					this.events.dispatch("inited", {
 						type: "inited",
 						target: this
@@ -199,6 +221,15 @@ export class EditableLabel extends Label {
 		const input = this.getPrivate("input");
 		const textarea = this.getPrivate("textarea");
 		if (textarea) {
+			// Set up HTML
+			const el = input.getPrivate("htmlElement")!;
+
+			// Reset all styles
+			const computedStyles = window.getComputedStyle(textarea);
+			$array.each(computedStyles, (style: any) => {
+				textarea.style[style] = "initial";
+			});
+
 			// Remove textarea attributes
 			textarea.style.color = this.get("fill", color(0x000000)).toCSS(this.get("fillOpacity", 1));
 			textarea.style.backgroundColor = "rgba(0, 0, 0, 0)";
@@ -214,8 +245,15 @@ export class EditableLabel extends Label {
 			// @todo
 
 			// Size
+			// Handle maxWidth
 			textarea.style.overflow = "hidden";
-			textarea.style.minWidth = textarea.scrollWidth + "px";
+			const maxWidth = this.get("maxWidth", 0) - this.get("paddingLeft", 0) - this.get("paddingRight", 0);
+			if (maxWidth > 0) {
+				textarea.style.maxWidth = maxWidth + "px";
+			}
+			else {
+				textarea.style.minWidth = textarea.scrollWidth + "px";
+			}
 
 			textarea.style.height = "auto";
 			textarea.style.minHeight = textarea.scrollHeight + "px";
@@ -268,6 +306,35 @@ export class EditableLabel extends Label {
 				fontStyle = fontStyle;
 			}
 			textarea.style.fontStyle = fontStyle;
+
+			const oversizeBehavior = this.get("oversizedBehavior");
+			if (oversizeBehavior == "wrap") {
+				textarea.style.whiteSpace = "pre-wrap";
+			}
+			else {
+				textarea.style.whiteSpace = "nowrap";
+			}
+
+			// Adjust textarea postion based on textAlign setting
+			this._root.events.on("frameended", () => {
+				const textAlign = this.get("textAlign", "start");
+				if (textAlign == "center") {
+					textarea.style.textAlign = "center";
+					if (!el.style.transform.match(/translateX/)) {
+						el.style.transform += " translateX(-50%)";
+					}
+				}
+				else if (textAlign == "end") {
+					textarea.style.textAlign = "right";
+					if (!el.style.transform.match(/translateX/)) {
+						el.style.transform += "translateX(-100%)";
+					}
+				}
+				else {
+					textarea.style.textAlign = textAlign;
+				}
+			});
+
 		}
 	}