@amcharts/amcharts5 5.5.1 → 5.5.3

package/.internal/charts/stock/toolbar/DrawingControl.js

@@ -1,4 +1,5 @@
 import { color } from "../../../core/util/Color";
+import { Template } from "../../../core/util/Template";
 import { StockControl } from "./StockControl";
 import { DrawingToolControl } from "./DrawingToolControl";
 import { ColorControl } from "./ColorControl";
@@ -23,6 +24,7 @@ import { RectangleSeries } from "../drawing/RectangleSeries";
 import { RegressionSeries } from "../drawing/RegressionSeries";
 import { TrendLineSeries } from "../drawing/TrendLineSeries";
 import { VerticalLineSeries } from "../drawing/VerticalLineSeries";
+import { Measure } from "../drawing/Measure";
 import { JsonParser } from "../../../plugins/json/Json";
 import { Serializer } from "../../../plugins/json/Serializer";
 import * as $array from "../../../core/util/Array";
@@ -49,6 +51,12 @@ export class DrawingControl extends StockControl {
             writable: true,
             value: []
         });
+        Object.defineProperty(this, "_initedPanels", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
     }
     _afterNew() {
         super._afterNew();
@@ -495,7 +503,7 @@ export class DrawingControl extends StockControl {
                 boldControl: ["Callout", "Label"],
                 italicControl: ["Callout", "Label"],
                 iconControl: ["Arrows & Icons"],
-                snapControl: ["Callout", "Arrows & Icons"],
+                snapControl: ["Callout", "Arrows & Icons", "Line", "Polyline", "Label", "Callout", "Horizontal Line", "Horizontal Ray", "Vertical Line", "Quadrant Line", "Rectangle", "Measure", "Fibonacci"],
             };
             $object.each(controls, (control, tools) => {
                 const controlElement = this.getPrivate(control);
@@ -512,108 +520,134 @@ export class DrawingControl extends StockControl {
     _maybeInitToolSeries(tool) {
         let seriesList = this._drawingSeries[tool];
         if (!seriesList) {
-            // Get target series
-            const chartSeries = this.get("series", []);
-            const stockChart = this.get("stockChart");
-            if (chartSeries.length == 0) {
-                // No target series set, take first series out of each chart
-                stockChart.panels.each((panel) => {
-                    if (panel.series.length > 0) {
-                        chartSeries.push(panel.series.getIndex(0));
-                    }
-                });
-            }
-            // Populate the list
             seriesList = [];
+        }
+        // Get target series
+        const chartSeries = this.get("series", []);
+        const stockChart = this.get("stockChart");
+        if (chartSeries.length == 0) {
+            // No target series set, take first series out of each chart
+            stockChart.panels.each((panel) => {
+                if ((seriesList.length === 0 || this._initedPanels.indexOf(panel) === -1) && (panel.series.length > 0)) {
+                    chartSeries.push(panel.series.getIndex(0));
+                    this._initedPanels.push(panel);
+                }
+            });
+        }
+        if (chartSeries.length > 0) {
+            const toolSettings = this.get("toolSettings", {});
+            // Populate the list
             $array.each(chartSeries, (chartSeries) => {
                 let series;
                 const xAxis = chartSeries.get("xAxis");
                 const yAxis = chartSeries.get("yAxis");
                 const panel = chartSeries.chart;
+                let template;
+                if (toolSettings[tool]) {
+                    template = Template.new(toolSettings[tool]);
+                    const toolTemplates = this.getPrivate("toolTemplates", {});
+                    toolTemplates[tool] = template;
+                    this.setPrivate("toolTemplates", toolTemplates);
+                }
                 switch (tool) {
+                    case "Arrows & Icons":
+                        const icon = this.get("drawingIcon", this.get("drawingIcons")[0]);
+                        series = IconSeries.new(this._root, {
+                            series: chartSeries,
+                            xAxis: xAxis,
+                            yAxis: yAxis,
+                            iconSvgPath: icon.svgPath,
+                            iconScale: icon.scale,
+                            iconCenterX: icon.centerX,
+                            iconCenterY: icon.centerY,
+                        }, template);
+                        break;
                     case "Average":
                         series = AverageSeries.new(this._root, {
                             series: chartSeries,
                             xAxis: xAxis,
-                            yAxis: yAxis,
-                            field: "value"
-                        });
+                            yAxis: yAxis
+                        }, template);
                         break;
                     case "Callout":
                         series = CalloutSeries.new(this._root, {
+                            series: chartSeries,
                             xAxis: xAxis,
                             yAxis: yAxis
-                        });
+                        }, template);
                         break;
                     case "Doodle":
                         series = DoodleSeries.new(this._root, {
+                            series: chartSeries,
                             xAxis: xAxis,
                             yAxis: yAxis
-                        });
+                        }, template);
                         series.fills.template.setAll({
                             forceHidden: true
                         });
                         break;
                     case "Ellipse":
                         series = EllipseSeries.new(this._root, {
+                            series: chartSeries,
                             xAxis: xAxis,
                             yAxis: yAxis
-                        });
+                        }, template);
                         break;
                     case "Fibonacci":
                         series = FibonacciSeries.new(this._root, {
+                            series: chartSeries,
                             xAxis: xAxis,
                             yAxis: yAxis
-                        });
+                        }, template);
                         break;
                     case "Fibonacci Timezone":
                         series = FibonacciTimezoneSeries.new(this._root, {
+                            series: chartSeries,
                             xAxis: xAxis,
                             yAxis: yAxis
-                        });
+                        }, template);
                         break;
                     case "Horizontal Line":
                         series = HorizontalLineSeries.new(this._root, {
+                            series: chartSeries,
                             xAxis: xAxis,
                             yAxis: yAxis
-                        });
+                        }, template);
                         break;
                     case "Horizontal Ray":
                         series = HorizontalRaySeries.new(this._root, {
                             series: chartSeries,
                             xAxis: xAxis,
-                            yAxis: yAxis,
-                            field: "value"
-                        });
-                        break;
-                    case "Arrows & Icons":
-                        const icon = this.get("drawingIcon", this.get("drawingIcons")[0]);
-                        series = IconSeries.new(this._root, {
-                            xAxis: xAxis,
-                            yAxis: yAxis,
-                            iconSvgPath: icon.svgPath,
-                            iconScale: icon.scale,
-                            iconCenterX: icon.centerX,
-                            iconCenterY: icon.centerY,
-                        });
+                            yAxis: yAxis
+                        }, template);
                         break;
                     case "Label":
                         series = LabelSeries.new(this._root, {
+                            series: chartSeries,
                             xAxis: xAxis,
                             yAxis: yAxis
-                        });
+                        }, template);
                         break;
                     case "Line":
                         series = SimpleLineSeries.new(this._root, {
+                            series: chartSeries,
                             xAxis: xAxis,
                             yAxis: yAxis
-                        });
+                        }, template);
+                        break;
+                    case "Measure":
+                        series = Measure.new(this._root, {
+                            series: chartSeries,
+                            xAxis: xAxis,
+                            yAxis: yAxis
+                        }, template);
                         break;
                     case "Polyline":
                         series = PolylineSeries.new(this._root, {
+                            series: chartSeries,
                             xAxis: xAxis,
                             yAxis: yAxis
-                        });
+                        }, template);
                         series.fills.template.setAll({
                             forceHidden: true
                         });
@@ -622,37 +656,36 @@ export class DrawingControl extends StockControl {
                         series = QuadrantLineSeries.new(this._root, {
                             series: chartSeries,
                             xAxis: xAxis,
-                            yAxis: yAxis,
-                            field: "value"
-                        });
+                            yAxis: yAxis
+                        }, template);
                         break;
                     case "Rectangle":
                         series = RectangleSeries.new(this._root, {
+                            series: chartSeries,
                             xAxis: xAxis,
                             yAxis: yAxis
-                        });
+                        }, template);
                         break;
                     case "Regression":
                         series = RegressionSeries.new(this._root, {
                             series: chartSeries,
                             xAxis: xAxis,
-                            yAxis: yAxis,
-                            field: "value"
-                        });
+                            yAxis: yAxis
+                        }, template);
                         break;
                     case "Trend Line":
                         series = TrendLineSeries.new(this._root, {
                             series: chartSeries,
                             xAxis: xAxis,
-                            yAxis: yAxis,
-                            field: "value"
-                        });
+                            yAxis: yAxis
+                        }, template);
                         break;
                     case "Vertical Line":
                         series = VerticalLineSeries.new(this._root, {
+                            series: chartSeries,
                             xAxis: xAxis,
                             yAxis: yAxis
-                        });
+                        }, template);
                         break;
                 }
                 if (series) {
@@ -751,10 +784,8 @@ export class DrawingControl extends StockControl {
         const snap = this.get("snapToData", false);
         $object.each(this._drawingSeries, (_tool, seriesList) => {
             $array.each(seriesList, (series) => {
-                if (series instanceof IconSeries || series instanceof CalloutSeries) {
-                    series.setAll({
-                        snapToData: snap
-                    });
+                if (series.getPrivate("allowChangeSnap")) {
+                    series.set("snapToData", snap);
                 }
             });
         });
@@ -834,22 +865,32 @@ export class DrawingControl extends StockControl {
         $array.each(data, (drawing) => {
             // Panel
             let panel = stockChart.panels.getIndex(drawing.__panelIndex || 0);
-            const tool = drawing.__tool;
-            this._maybeInitToolSeries(tool);
-            // Get series
-            let drawingSeries;
-            $array.each(this._drawingSeries[tool] || [], (series) => {
-                if (series.chart === panel) {
-                    drawingSeries = series;
+            if (panel) {
+                const tool = drawing.__tool;
+                this._maybeInitToolSeries(tool);
+                // Get series
+                let drawingSeries;
+                $array.each(this._drawingSeries[tool] || [], (series) => {
+                    if (series.chart === panel) {
+                        drawingSeries = series;
+                    }
+                });
+                if (!drawing.settings) {
+                    drawing.settings = {};
                 }
-            });
-            if (!drawing.settings) {
-                drawing.settings = {};
+                // Parse
+                JsonParser.new(this._root).parse(drawing.__drawing).then((drawingData) => {
+                    drawingSeries.data.pushAll(drawingData);
+                });
+            }
+            else {
+                // Wait until panel becomes available
+                stockChart.panels.events.once("push", (ev) => {
+                    ev.newValue.series.events.once("push", (_ev) => {
+                        this.unserializeDrawings(drawing);
+                    });
+                });
             }
-            // Parse
-            JsonParser.new(this._root).parse(drawing.__drawing).then((drawingData) => {
-                drawingSeries.data.pushAll(drawingData);
-            });
         });
     }
 }