@amcharts/amcharts5 5.2.32 → 5.2.33

package/.internal/core/render/backend/CanvasRenderer.js

@@ -2600,6 +2600,14 @@ var CanvasText = /** @class */ (function (_super) {
             }
         }
     });
+    Object.defineProperty(CanvasText.prototype, "_ignoreFontWeight", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            return /apple/i.test(navigator.vendor);
+        }
+    });
     Object.defineProperty(CanvasText.prototype, "_measure", {
         enumerable: false,
         configurable: true,
@@ -2619,7 +2627,7 @@ var CanvasText = /** @class */ (function (_super) {
             // Pre-render
             context.save();
             ghostContext.save();
-            this._prerender(layer, true, true);
+            this._prerender(layer, true, this._ignoreFontWeight());
             // Get default font metrix
             var refText = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 ";
             // Split up text into lines
@@ -3272,173 +3280,175 @@ var CanvasRadialText = /** @class */ (function (_super) {
         configurable: true,
         writable: true,
         value: function (parentLayer) {
-            var layer = this._layer || parentLayer;
-            this._prerender(layer);
-            var interactive = this._isInteractive();
-            var context = layer.context;
-            var layerDirty = layer.dirty;
-            var ghostContext = this._renderer._ghostContext;
-            // Savepoint
-            context.save();
-            if (interactive) {
-                ghostContext.save();
-            }
-            // Init
-            var radius = (this.radius || 0);
-            var startAngle = (this.startAngle || 0);
-            var deltaAngle = 0;
-            var orientation = this.orientation;
-            var inward = orientation == "auto" ? "auto" : orientation == "inward";
-            var inside = this.inside;
-            var align = this.style.textAlign || "left";
-            var kerning = this.kerning || 0;
-            var clockwise = align == "left" ? 1 : -1;
-            var shouldReverse = !this._textReversed;
-            // We need measurements in order to properly position text for alignment
-            if (!this._textInfo) {
-                this._measure(layer);
-            }
-            // Check if we need to invert the whole stuff
-            if (inward == "auto") {
-                // Calc max angle so we know whether we need to flip it
-                var maxAngle_1 = 0;
-                var midAngle = 0;
-                $array.each(this._textInfo, function (line, _index) {
-                    var deltaAngle = startAngle + (line.width / (radius - line.height)) / 2 * -clockwise;
-                    if (deltaAngle > maxAngle_1) {
-                        maxAngle_1 = deltaAngle;
-                    }
-                });
-                if (align == "left") {
-                    midAngle = (maxAngle_1 + deltaAngle / 2) * $math.DEGREES;
-                }
-                else if (align == "right") {
-                    midAngle = (maxAngle_1 - deltaAngle / 2) * $math.DEGREES;
-                }
-                else {
-                    midAngle = startAngle * $math.DEGREES;
-                }
-                midAngle = $math.normalizeAngle(midAngle);
-                inward = (midAngle >= 270) || (midAngle <= 90);
-            }
-            if (inward == true && shouldReverse) {
-                this._textInfo.reverse();
-                this._textReversed = true;
-            }
-            // if ((inward == false && align == "left") || (inward == true && align == "right")) {
-            // 	clockwise *= -1;
-            // }
-            // Process text info produced by _measure()
-            $array.each(this._textInfo, function (line, _index) {
-                var textHeight = line.height;
-                // Adjust radius (for `inside = false`)
-                // Radius adjustment for `inside = false` is below the line calculation
-                if (!inside) {
-                    radius += textHeight;
-                }
-                // Reverse letters if we're painting them counter-clockwise
-                if (((clockwise == -1 && inward) || (clockwise == 1 && !inward)) && shouldReverse) {
-                    line.textChunks.reverse();
-                }
-                // Init angles
-                var lineStartAngle = startAngle;
-                deltaAngle = 0;
-                // Adjust for center-align
-                if (align == "center") {
-                    lineStartAngle += (line.width / (radius - textHeight)) / 2 * -clockwise;
-                    deltaAngle = lineStartAngle - startAngle;
-                }
-                // if (inward == "auto") {
-                // 	let midAngle;
-                // 	if (align == "left") {
-                // 		midAngle = (lineStartAngle + deltaAngle / 2) * $math.DEGREES;
-                // 	}
-                // 	else if () {
-                // 		midAngle = (lineStartAngle - deltaAngle / 2) * $math.DEGREES;
-                // 	}
-                // 	inward = (midAngle >= 270) || (midAngle <= 90);
-                // }
-                // Rotate letters if they are facing outward
-                lineStartAngle += (Math.PI * (inward ? 0 : 1)); // Rotate 180 if outward
+            if (this._textVisible) {
+                var layer = this._layer || parentLayer;
+                this._prerender(layer);
+                var interactive_2 = this._isInteractive();
+                var context_3 = layer.context;
+                var layerDirty_2 = layer.dirty;
+                var ghostContext_3 = this._renderer._ghostContext;
                 // Savepoint
-                context.save();
-                if (interactive) {
-                    ghostContext.save();
+                context_3.save();
+                if (interactive_2) {
+                    ghostContext_3.save();
                 }
-                // Assume starting angle
-                context.rotate(lineStartAngle);
-                if (interactive) {
-                    ghostContext.rotate(lineStartAngle);
+                // Init
+                var radius_1 = (this.radius || 0);
+                var startAngle_1 = (this.startAngle || 0);
+                var deltaAngle_1 = 0;
+                var orientation_1 = this.orientation;
+                var inward_1 = orientation_1 == "auto" ? "auto" : orientation_1 == "inward";
+                var inside_1 = this.inside;
+                var align_1 = this.style.textAlign || "left";
+                var kerning_1 = this.kerning || 0;
+                var clockwise_1 = align_1 == "left" ? 1 : -1;
+                var shouldReverse_1 = !this._textReversed;
+                // We need measurements in order to properly position text for alignment
+                if (!this._textInfo) {
+                    this._measure(layer);
                 }
-                var angleShift = 0;
-                $array.each(line.textChunks, function (chunk, _index) {
-                    // Draw the letter
-                    var char = chunk.text;
-                    var charWidth = chunk.width;
-                    // Rotate half a letter
-                    angleShift = (charWidth / 2) / (radius - textHeight) * clockwise;
-                    context.rotate(angleShift);
-                    if (interactive) {
-                        ghostContext.rotate(angleShift);
-                    }
-                    // Set style
-                    if (chunk.style) {
-                        context.save();
-                        ghostContext.save();
-                        context.font = chunk.style;
-                        if (interactive) {
-                            ghostContext.font = chunk.style;
+                // Check if we need to invert the whole stuff
+                if (inward_1 == "auto") {
+                    // Calc max angle so we know whether we need to flip it
+                    var maxAngle_1 = 0;
+                    var midAngle = 0;
+                    $array.each(this._textInfo, function (line, _index) {
+                        var deltaAngle = startAngle_1 + (line.width / (radius_1 - line.height)) / 2 * -clockwise_1;
+                        if (deltaAngle > maxAngle_1) {
+                            maxAngle_1 = deltaAngle;
                         }
+                    });
+                    if (align_1 == "left") {
+                        midAngle = (maxAngle_1 + deltaAngle_1 / 2) * $math.DEGREES;
                     }
-                    if (chunk.fill) {
-                        context.save();
-                        context.fillStyle = chunk.fill.toCSS();
-                        // Color does not affect ghostContext so we not set it
+                    else if (align_1 == "right") {
+                        midAngle = (maxAngle_1 - deltaAngle_1 / 2) * $math.DEGREES;
                     }
-                    // Center letters
-                    context.textBaseline = "middle";
-                    context.textAlign = "center";
-                    if (interactive) {
-                        ghostContext.textBaseline = "middle";
-                        ghostContext.textAlign = "center";
+                    else {
+                        midAngle = startAngle_1 * $math.DEGREES;
                     }
-                    // Plop the letter
-                    if (layerDirty) {
-                        context.fillText(char, 0, (inward ? 1 : -1) * (0 - radius + textHeight / 2));
+                    midAngle = $math.normalizeAngle(midAngle);
+                    inward_1 = (midAngle >= 270) || (midAngle <= 90);
+                }
+                if (inward_1 == true && shouldReverse_1) {
+                    this._textInfo.reverse();
+                    this._textReversed = true;
+                }
+                // if ((inward == false && align == "left") || (inward == true && align == "right")) {
+                // 	clockwise *= -1;
+                // }
+                // Process text info produced by _measure()
+                $array.each(this._textInfo, function (line, _index) {
+                    var textHeight = line.height;
+                    // Adjust radius (for `inside = false`)
+                    // Radius adjustment for `inside = false` is below the line calculation
+                    if (!inside_1) {
+                        radius_1 += textHeight;
                     }
-                    if (interactive) {
-                        ghostContext.fillText(char, 0, (inward ? 1 : -1) * (0 - radius + textHeight / 2));
+                    // Reverse letters if we're painting them counter-clockwise
+                    if (((clockwise_1 == -1 && inward_1) || (clockwise_1 == 1 && !inward_1)) && shouldReverse_1) {
+                        line.textChunks.reverse();
                     }
-                    if (chunk.fill) {
-                        context.restore();
-                        // Color does not affect ghostContext so we not set it
+                    // Init angles
+                    var lineStartAngle = startAngle_1;
+                    deltaAngle_1 = 0;
+                    // Adjust for center-align
+                    if (align_1 == "center") {
+                        lineStartAngle += (line.width / (radius_1 - textHeight)) / 2 * -clockwise_1;
+                        deltaAngle_1 = lineStartAngle - startAngle_1;
                     }
-                    // Reset style
-                    if (chunk.style) {
-                        context.restore();
-                        ghostContext.restore();
+                    // if (inward == "auto") {
+                    // 	let midAngle;
+                    // 	if (align == "left") {
+                    // 		midAngle = (lineStartAngle + deltaAngle / 2) * $math.DEGREES;
+                    // 	}
+                    // 	else if () {
+                    // 		midAngle = (lineStartAngle - deltaAngle / 2) * $math.DEGREES;
+                    // 	}
+                    // 	inward = (midAngle >= 270) || (midAngle <= 90);
+                    // }
+                    // Rotate letters if they are facing outward
+                    lineStartAngle += (Math.PI * (inward_1 ? 0 : 1)); // Rotate 180 if outward
+                    // Savepoint
+                    context_3.save();
+                    if (interactive_2) {
+                        ghostContext_3.save();
                     }
-                    // Rotate half a letter and add spacing
-                    angleShift = (charWidth / 2 + kerning) / (radius - textHeight) * clockwise;
-                    context.rotate(angleShift);
-                    if (interactive) {
-                        ghostContext.rotate(angleShift);
+                    // Assume starting angle
+                    context_3.rotate(lineStartAngle);
+                    if (interactive_2) {
+                        ghostContext_3.rotate(lineStartAngle);
+                    }
+                    var angleShift = 0;
+                    $array.each(line.textChunks, function (chunk, _index) {
+                        // Draw the letter
+                        var char = chunk.text;
+                        var charWidth = chunk.width;
+                        // Rotate half a letter
+                        angleShift = (charWidth / 2) / (radius_1 - textHeight) * clockwise_1;
+                        context_3.rotate(angleShift);
+                        if (interactive_2) {
+                            ghostContext_3.rotate(angleShift);
+                        }
+                        // Set style
+                        if (chunk.style) {
+                            context_3.save();
+                            ghostContext_3.save();
+                            context_3.font = chunk.style;
+                            if (interactive_2) {
+                                ghostContext_3.font = chunk.style;
+                            }
+                        }
+                        if (chunk.fill) {
+                            context_3.save();
+                            context_3.fillStyle = chunk.fill.toCSS();
+                            // Color does not affect ghostContext so we not set it
+                        }
+                        // Center letters
+                        context_3.textBaseline = "middle";
+                        context_3.textAlign = "center";
+                        if (interactive_2) {
+                            ghostContext_3.textBaseline = "middle";
+                            ghostContext_3.textAlign = "center";
+                        }
+                        // Plop the letter
+                        if (layerDirty_2) {
+                            context_3.fillText(char, 0, (inward_1 ? 1 : -1) * (0 - radius_1 + textHeight / 2));
+                        }
+                        if (interactive_2) {
+                            ghostContext_3.fillText(char, 0, (inward_1 ? 1 : -1) * (0 - radius_1 + textHeight / 2));
+                        }
+                        if (chunk.fill) {
+                            context_3.restore();
+                            // Color does not affect ghostContext so we not set it
+                        }
+                        // Reset style
+                        if (chunk.style) {
+                            context_3.restore();
+                            ghostContext_3.restore();
+                        }
+                        // Rotate half a letter and add spacing
+                        angleShift = (charWidth / 2 + kerning_1) / (radius_1 - textHeight) * clockwise_1;
+                        context_3.rotate(angleShift);
+                        if (interactive_2) {
+                            ghostContext_3.rotate(angleShift);
+                        }
+                    });
+                    // Restore angle
+                    context_3.restore();
+                    if (interactive_2) {
+                        ghostContext_3.restore();
+                    }
+                    // Adjust radius (for `inside = true`)
+                    if (inside_1) {
+                        radius_1 -= textHeight;
                     }
                 });
-                // Restore angle
-                context.restore();
-                if (interactive) {
-                    ghostContext.restore();
-                }
-                // Adjust radius (for `inside = true`)
-                if (inside) {
-                    radius -= textHeight;
+                // Restore
+                context_3.restore();
+                if (interactive_2) {
+                    ghostContext_3.restore();
                 }
-            });
-            // Restore
-            context.restore();
-            if (interactive) {
-                ghostContext.restore();
             }
         }
     });
@@ -3464,7 +3474,14 @@ var CanvasRadialText = /** @class */ (function (_super) {
             var context = layer.context;
             var ghostContext = this._renderer._ghostContext;
             var rtl = this.style.direction == "rtl";
+            var oversizedBehavior = this.style.oversizedBehavior;
+            var maxWidth = this.style.maxWidth;
+            var truncate = $type.isNumber(maxWidth) && oversizedBehavior == "truncate";
+            var ellipsis = this.style.ellipsis || "";
+            var ellipsisMetrics;
+            //const wrap = $type.isNumber(maxWidth) && (oversizedBehavior == "wrap" || oversizedBehavior == "wrap-no-break");
             // Reset text info
+            this._textVisible = true;
             this._textInfo = [];
             this._textReversed = false;
             // Pre-render
@@ -3474,6 +3491,7 @@ var CanvasRadialText = /** @class */ (function (_super) {
             // Split up text into lines
             var lines = this.text.toString().replace(/\r/g, "").split(/\n/);
             var styleRestored = true;
+            var totalWidth = 0;
             // Iterate through the lines
             var offsetY = 0;
             $array.each(lines, function (line, _index) {
@@ -3521,6 +3539,9 @@ var CanvasRadialText = /** @class */ (function (_super) {
                             }
                             styleRestored = false;
                         }
+                        if (truncate) {
+                            ellipsisMetrics = _this._measureText(ellipsis, context);
+                        }
                     }
                     // Text format
                     else if (chunk.type == "value") {
@@ -3561,6 +3582,40 @@ var CanvasRadialText = /** @class */ (function (_super) {
                                 offsetY: chunkHeight,
                                 textDecoration: undefined
                             });
+                            totalWidth += chunkWidth;
+                            // Handle oversized behavior
+                            if (truncate) {
+                                // Measure ellipsis and check if it fits
+                                if (!ellipsisMetrics) {
+                                    ellipsisMetrics = _this._measureText(ellipsis, context);
+                                }
+                                var ellipsisWidth = ellipsisMetrics.actualBoundingBoxLeft + ellipsisMetrics.actualBoundingBoxRight;
+                                totalWidth += ellipsisWidth;
+                                if ((totalWidth + ellipsisWidth) > maxWidth) {
+                                    if (lineInfo.textChunks.length == 1) {
+                                        _this._textVisible = false;
+                                    }
+                                    else {
+                                        lineInfo.width += ellipsisWidth;
+                                        lineInfo.left += ellipsisMetrics.actualBoundingBoxLeft;
+                                        lineInfo.right += ellipsisMetrics.actualBoundingBoxRight;
+                                        lineInfo.textChunks.push({
+                                            style: currentStyle,
+                                            fill: currentFill,
+                                            text: ellipsis,
+                                            width: ellipsisWidth,
+                                            height: chunkHeight + ellipsisMetrics.actualBoundingBoxDescent,
+                                            left: ellipsisMetrics.actualBoundingBoxLeft,
+                                            right: ellipsisMetrics.actualBoundingBoxRight,
+                                            ascent: ellipsisMetrics.actualBoundingBoxAscent,
+                                            offsetX: 0,
+                                            offsetY: chunkHeight,
+                                            textDecoration: undefined
+                                        });
+                                    }
+                                    break;
+                                }
+                            }
                             if (rtl) {
                                 break;
                             }
@@ -3581,6 +3636,9 @@ var CanvasRadialText = /** @class */ (function (_super) {
                 context.restore();
                 ghostContext.restore();
             }
+            if (oversizedBehavior == "hide" && (totalWidth > maxWidth)) {
+                this._textVisible = false;
+            }
             // Adjust chunk internal offsets
             $array.each(this._textInfo, function (lineInfo) {
                 $array.each(lineInfo.textChunks, function (chunk) {