@amcharts/amcharts5 5.8.7 → 5.9.1

package/.internal/charts/stock/drawing/DrawingSeries.js

@@ -1,6 +1,7 @@
 import { LineSeries } from "../../xy/series/LineSeries";
 import { Bullet } from "../../../core/render/Bullet";
 import { Circle } from "../../../core/render/Circle";
+import { Rectangle } from "../../../core/render/Rectangle";
 import { Container } from "../../../core/render/Container";
 import { Template } from "../../../core/util/Template";
 import { ListTemplate } from "../../../core/util/List";
@@ -100,13 +101,13 @@ export class DrawingSeries extends LineSeries {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: {}
+            value: []
         });
         Object.defineProperty(this, "_dvY", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: {}
+            value: []
         });
         Object.defineProperty(this, "_isHover", {
             enumerable: true,
@@ -132,6 +133,31 @@ export class DrawingSeries extends LineSeries {
             writable: true,
             value: { x: 0, y: 0 }
         });
+        Object.defineProperty(this, "selectorContainer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: this.children.push(Container.new(this.root, {}))
+        });
+        Object.defineProperty(this, "_selected", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "_isSelecting", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        // point index in segment
+        Object.defineProperty(this, "_pIndex", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
         Object.defineProperty(this, "grips", {
             enumerable: true,
             configurable: true,
@@ -156,6 +182,14 @@ export class DrawingSeries extends LineSeries {
                 themeTags: ["outline"]
             }, [this.outerCircles.template]))
         });
+        Object.defineProperty(this, "selectors", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new ListTemplate(Template.new({}), () => Rectangle._new(this._root, {
+                themeTags: ["selector"]
+            }, [this.selectors.template]))
+        });
     }
     _afterNew() {
         this.addTag("drawing");
@@ -174,10 +208,6 @@ export class DrawingSeries extends LineSeries {
         strokesTemplate.set("templateField", "stroke");
         const fillsTemplate = this.fills.template;
         fillsTemplate.setAll({ templateField: "fill" });
-        fillsTemplate.events.on("dragstart", (e) => {
-            this._handleFillDragStart(e, this._getIndex(e.target));
-            this._isPointerDown = true;
-        });
         fillsTemplate.events.on("pointerdown", (e) => {
             const index = this._getIndex(e.target);
             if (this._erasingEnabled) {
@@ -194,25 +224,19 @@ export class DrawingSeries extends LineSeries {
                 stroke.dragStart(e);
             }
         });
-        strokesTemplate.events.on("pointerdown", (e) => {
-            if (this._erasingEnabled) {
-                this._disposeIndex(this._getIndex(e.target));
-            }
-            else {
-                const originalEvent = e.originalEvent;
-                if (!originalEvent.button && this._drawingEnabled) {
-                    this._handlePointerDown(e);
-                }
+        fillsTemplate.events.on("dragstart", (e) => {
+            this.startDragItem(e, this._getIndex(e.target));
+        });
+        fillsTemplate.events.on("click", (e) => {
+            const index = this._getIndex(e.target);
+            const originalEvent = e.originalEvent;
+            if (!this._isDrawing) {
+                this._selectDrawing(index, originalEvent.ctrlKey);
             }
         });
         fillsTemplate.events.on("dragstop", (e) => {
-            this._isPointerDown = false;
             const index = this._getIndex(e.target);
-            this._handleFillDragStop(e, index);
-            const stroke = this.strokes.getIndex(this._getStrokeIndex(index));
-            if (stroke) {
-                stroke.dragStop(e);
-            }
+            this.stopDragItem(e, index);
         });
         fillsTemplate.events.on("pointerover", (e) => {
             const index = this._getIndex(e.target);
@@ -227,6 +251,17 @@ export class DrawingSeries extends LineSeries {
             this._isHover = false;
             this._hideAllBullets();
         });
+        strokesTemplate.events.on("pointerdown", (e) => {
+            const index = this._getIndex(e.target);
+            if (this._erasingEnabled) {
+                this._disposeIndex(index);
+            }
+        });
+        strokesTemplate.events.on("click", (e) => {
+            const index = this._getIndex(e.target);
+            const originalEvent = e.originalEvent;
+            this._selectDrawing(index, originalEvent.ctrlKey);
+        });
         strokesTemplate.events.on("pointerover", (e) => {
             this._isHover = true;
             this._showSegmentBullets(this._getIndex(e.target));
@@ -236,10 +271,10 @@ export class DrawingSeries extends LineSeries {
             this._hideAllBullets();
         });
         strokesTemplate.events.on("dragstop", (e) => {
-            this._handleFillDragStop(e, this._getIndex(e.target));
+            this.stopDragItem(e, this._getIndex(e.target));
         });
         strokesTemplate.events.on("dragstart", (e) => {
-            this._handleFillDragStart(e, this._getIndex(e.target));
+            this.startDragItem(e, this._getIndex(e.target));
         });
         this.bulletsContainer.states.create("hidden", { visible: true, opacity: 0 });
         this.bullets.push((_root, _series, dataItem) => {
@@ -288,6 +323,7 @@ export class DrawingSeries extends LineSeries {
         this.events.on("pointerout", () => {
             this._handlePointerOut();
         });
+        this._getStockChart().markDirtyKey("drawingSelectionEnabled");
     }
     /**
      * Disposes a drawing with the specified index.
@@ -322,10 +358,29 @@ export class DrawingSeries extends LineSeries {
     _disposeIndex(index) {
         const dataItems = this._di[index];
         if (dataItems) {
+            let drawingId;
+            let index;
             $object.each(dataItems, (_key, dataItem) => {
-                this.data.removeValue(dataItem.dataContext);
+                const dataContext = dataItem.dataContext;
+                this.data.removeValue(dataContext);
+                if (dataContext) {
+                    if (dataContext.drawingId) {
+                        drawingId = dataContext.drawingId;
+                    }
+                    if (dataContext.index) {
+                        index = dataContext.index;
+                    }
+                }
             });
+            this._pIndex = 0;
+            delete this._di[index];
+            this._dispatchStockEvent("drawingremoved", drawingId, index);
         }
+        const selector = this._getSprite(this.selectors, index);
+        if (selector) {
+            this.selectors.removeValue(selector);
+        }
+        $array.remove(this._selected, index);
     }
     _afterDataChange() {
         $array.each(this.dataItems, (dataItem) => {
@@ -344,12 +399,17 @@ export class DrawingSeries extends LineSeries {
     }
     _createElements(_index, _dataItem) {
     }
+    _clearDirty() {
+        super._clearDirty();
+        this._isSelecting = false;
+    }
     clearDrawings() {
         $array.each(this._di, (_dataItems, index) => {
             this._disposeIndex(index);
         });
         this.data.setAll([]);
         this._index = 0;
+        this._selected = [];
     }
     _getIndex(sprite) {
         const userData = sprite.get("userData");
@@ -382,6 +442,13 @@ export class DrawingSeries extends LineSeries {
         this.grips.template.set("forceInactive", !value);
         this.circles.template.set("forceInactive", !value);
         this.outerCircles.template.set("forceInactive", !value);
+        if (value) {
+            this.showAllBullets();
+        }
+    }
+    enableDrawingSelection(value) {
+        this.strokes.template.set("forceInactive", !value);
+        this.fills.template.set("forceInactive", !value);
     }
     _showSegmentBullets(index) {
         const dataItems = this._di[index];
@@ -392,7 +459,7 @@ export class DrawingSeries extends LineSeries {
                     $array.each(bullets, (bullet) => {
                         const sprite = bullet.get("sprite");
                         if (sprite) {
-                            sprite.show();
+                            sprite.show(0);
                         }
                     });
                 }
@@ -431,7 +498,40 @@ export class DrawingSeries extends LineSeries {
             }
         });
     }
+    _hideResizer(sprite) {
+        const spriteResizer = this._getStockChart().spriteResizer;
+        if (spriteResizer) {
+            const resizerSprite = spriteResizer.get("sprite");
+            if (resizerSprite) {
+                if (!sprite || sprite.dataItem != resizerSprite.dataItem) {
+                    spriteResizer.set("sprite", undefined);
+                }
+            }
+        }
+    }
+    /**
+     * @ignore
+     */
+    startDragItem(event, index) {
+        const stockChart = this._getStockChart();
+        if (stockChart) {
+            stockChart._dragStartDrawing(event);
+        }
+        this._handleFillDragStart(event, index);
+    }
+    /**
+     * @ignore
+     */
+    stopDragItem(event, index) {
+        const stockChart = this._getStockChart();
+        if (stockChart) {
+            stockChart._dragStopDrawing(event);
+        }
+        this._handleFillDragStop(event, index);
+    }
     _handleFillDragStart(event, index) {
+        this._hideResizer(event.target);
+        this._isPointerDown = false;
         const chart = this.chart;
         if (chart) {
             const xAxis = this.get("xAxis");
@@ -441,15 +541,28 @@ export class DrawingSeries extends LineSeries {
             const valueXns = xAxis.positionToValue(this._dragStartPX);
             this._dragStartY = this._getYValue(yAxis.positionToValue(yAxis.coordinateToPosition(point.y)), valueXns);
             const dataItems = this._di[index];
+            this._dvpX[index] = {};
+            this._dvY[index] = {};
             if (dataItems) {
                 $object.each(dataItems, (key, dataItem) => {
-                    this._dvpX[key] = xAxis.valueToPosition(dataItem.get("valueX", 0));
-                    this._dvY[key] = dataItem.get("valueY");
+                    this._dvpX[index][key] = xAxis.valueToPosition(dataItem.get("valueX", 0));
+                    this._dvY[index][key] = dataItem.get("valueY");
                 });
             }
         }
     }
+    _dragStart(event) {
+        $array.each(this._selected, (index) => {
+            this._handleFillDragStart(event, index);
+        });
+    }
+    _dragStop(event) {
+        $array.each(this._selected, (index) => {
+            this._handleFillDragStop(event, index);
+        });
+    }
     _handleFillDragStop(event, index) {
+        this._isPointerDown = false;
         const chart = this.chart;
         if (chart) {
             const point = chart.plotContainer.toLocal(event.point);
@@ -466,8 +579,8 @@ export class DrawingSeries extends LineSeries {
             const dataItems = this._di[index];
             if (dataItems) {
                 $object.each(dataItems, (key, dataItem) => {
-                    const dvpx = this._dvpX[key];
-                    const dvy = this._dvY[key];
+                    const dvpx = this._dvpX[index][key];
+                    const dvy = this._dvY[index][key];
                     if ($type.isNumber(dvpx) && $type.isNumber(dvy)) {
                         const vpx = dvpx + dpx;
                         const vxns = xAxis.positionToValue(vpx);
@@ -480,10 +593,16 @@ export class DrawingSeries extends LineSeries {
                         this._setContext(dataItem, "valueX", vx);
                         this._setContext(dataItem, "valueY", vy, true);
                         this._setXLocation(dataItem, vx);
+                        this._positionBullets(dataItem);
                     }
                 });
             }
         }
+        const stroke = this.strokes.getIndex(this._getStrokeIndex(index));
+        if (stroke) {
+            stroke.dragStop(event);
+        }
+        this.markDirty();
         this._updateSegment(index);
     }
     _updateSegment(_index) {
@@ -491,23 +610,116 @@ export class DrawingSeries extends LineSeries {
     }
     _updateChildren() {
         this._updateElements();
+        if (this.isDirty("strokeColor") || this.isDirty("strokeOpacity") || this.isDirty("strokeDasharray") || this.isDirty("strokeWidth")) {
+            $array.each(this._selected, (i) => {
+                let settings = {
+                    stroke: this.get("strokeColor"),
+                    strokeOpacity: this.get("strokeOpacity"),
+                    strokeDasharray: this.get("strokeDasharray"),
+                    strokeWidth: this.get("strokeWidth")
+                };
+                const stroke = this.strokes.getIndex(this._getStrokeIndex(i));
+                if (stroke) {
+                    let strokeTemplate;
+                    $array.each(this.dataItems, (dataItem) => {
+                        const dataContext = dataItem.dataContext;
+                        if (dataContext.index == i) {
+                            if (dataContext.stroke) {
+                                strokeTemplate = dataContext.stroke;
+                            }
+                        }
+                    });
+                    const defaultState = stroke.states.lookup("default");
+                    $object.each(settings, (key, value) => {
+                        stroke.set(key, value);
+                        defaultState.set(key, value);
+                        if (strokeTemplate) {
+                            strokeTemplate.set(key, value);
+                        }
+                    });
+                }
+                this.circles.each((circle) => {
+                    const dataItem = circle.dataItem;
+                    if (dataItem) {
+                        const dataContext = dataItem.dataContext;
+                        if (dataContext) {
+                            if (dataContext.index == i) {
+                                circle.set("stroke", settings.stroke);
+                                circle.states.lookup("default").set("stroke", settings.stroke);
+                            }
+                        }
+                    }
+                });
+                this.outerCircles.each((circle) => {
+                    const dataItem = circle.dataItem;
+                    if (dataItem) {
+                        const dataContext = dataItem.dataContext;
+                        if (dataContext) {
+                            if (dataContext.index == i) {
+                                circle.set("stroke", settings.stroke);
+                                circle.states.lookup("default").set("stroke", settings.stroke);
+                            }
+                        }
+                    }
+                });
+                this._applySettings(i, settings);
+            });
+        }
+        if (this.isDirty("fillColor") || this.isDirty("fillOpacity")) {
+            $array.each(this._selected, (i) => {
+                const fill = this.fills.getIndex(this._getStrokeIndex(i));
+                let settings = {
+                    fill: this.get("fillColor"),
+                    fillOpacity: this.get("fillOpacity")
+                };
+                if (fill) {
+                    let fillTemplate;
+                    $array.each(this.dataItems, (dataItem) => {
+                        const dataContext = dataItem.dataContext;
+                        if (dataContext.index == i) {
+                            if (dataContext.fill) {
+                                fillTemplate = dataContext.fill;
+                            }
+                        }
+                    });
+                    const defaultState = fill.states.lookup("default");
+                    $object.each(settings, (key, value) => {
+                        fill.set(key, value);
+                        defaultState.set(key, value);
+                        if (fillTemplate) {
+                            fillTemplate.set(key, value);
+                        }
+                    });
+                }
+                this._applySettings(i, settings);
+            });
+        }
         if (this._valuesDirty) {
             this.markDirtyDrawings();
         }
         super._updateChildren();
+        this._updateSelectors();
+    }
+    /**
+     * @ignore
+     */
+    isDrawing(value) {
+        this._isDrawing = value;
+        const stockChart = this._getStockChart();
+        if (stockChart) {
+            if (value) {
+                stockChart.set("drawingSelectionEnabled", false);
+            }
+        }
+    }
+    _applySettings(_index, _settings) {
     }
     _updateElements() {
     }
     markDirtyDrawings() {
-        const xAxis = this.get("xAxis");
-        if (xAxis) {
-            const panel = xAxis.chart;
-            if (panel) {
-                const stockChart = panel.getPrivate("stockChart");
-                if (stockChart) {
-                    stockChart.markDirtyDrawings();
-                }
-            }
+        const stockChart = this._getStockChart();
+        if (stockChart) {
+            stockChart.markDirtyDrawings();
         }
     }
     _getFillTemplate() {
@@ -544,6 +756,12 @@ export class DrawingSeries extends LineSeries {
     }
     _tweakBullet(_container, _dataItem) {
     }
+    _dispatchStockEvent(type, drawingId, index) {
+        const stockChart = this._getStockChart();
+        if (stockChart && stockChart.events.isEnabled(type)) {
+            stockChart.events.dispatch(type, { drawingId: drawingId, series: this, target: stockChart, index: index });
+        }
+    }
     _addBulletInteraction(sprite) {
         sprite.events.on("dragged", (e) => {
             this._handleBulletDragged(e);
@@ -559,17 +777,22 @@ export class DrawingSeries extends LineSeries {
             }, 100);
         });
         sprite.events.on("click", (e) => {
-            if (this._erasingEnabled) {
-                const dataItem = e.target.dataItem;
-                if (dataItem) {
-                    const dataContext = dataItem.dataContext;
+            const dataItem = e.target.dataItem;
+            if (dataItem) {
+                const dataContext = dataItem.dataContext;
+                if (this._erasingEnabled) {
                     if (dataContext) {
                         this._disposeIndex(dataContext.index);
                     }
                 }
-            }
-            else {
-                this._handlePointerClick(e);
+                else {
+                    if (!this._isDrawing) {
+                        this._selectDrawing(dataContext.index, e.originalEvent.ctrlKey);
+                    }
+                    else {
+                        this._handlePointerClick(e);
+                    }
+                }
             }
         });
     }
@@ -578,7 +801,7 @@ export class DrawingSeries extends LineSeries {
         this._drawingId = this._generateId();
     }
     _generateId() {
-        return "" + new Date().getTime() + Math.round(Math.random() * 10000);
+        return "" + new Date().getTime() + Math.round(Math.random() * 10000 + 10000);
     }
     _handlePointerClick(event) {
         if (this._drawingEnabled) {
@@ -620,6 +843,8 @@ export class DrawingSeries extends LineSeries {
         this._positionBullets(dataItem);
     }
     _handleBulletDragStart(_event) {
+        this._hideResizer();
+        this.unselectAllDrawings();
     }
     _handleBulletDragStop(_event) {
     }
@@ -676,7 +901,7 @@ export class DrawingSeries extends LineSeries {
     disableDrawing() {
         this._erasingEnabled = false;
         this._drawingEnabled = false;
-        this._isDrawing = false;
+        this.isDrawing(false);
         if (this._clickDp) {
             this._clickDp.dispose();
             this._clickDp = undefined;
@@ -798,6 +1023,213 @@ export class DrawingSeries extends LineSeries {
     _getStockChart() {
         return this.get("series").chart.getPrivate("stockChart");
     }
+    _getSprite(sprites, index) {
+        for (let i = 0, len = sprites.length; i < len; i++) {
+            let sprite = sprites.getIndex(i);
+            if (sprite && sprite.get("userData") == index) {
+                return sprite;
+            }
+        }
+    }
+    _selectDrawing(index, keepSelection) {
+        if (this._getStockChart().get("drawingSelectionEnabled")) {
+            this._isSelecting = true;
+            if (this._selected.indexOf(index) != -1) {
+                if (!keepSelection) {
+                    this._hideResizer();
+                    this.unselectAllDrawings();
+                }
+                else {
+                    this._unselectDrawing(index);
+                }
+            }
+            else {
+                if (!keepSelection) {
+                    this._hideResizer();
+                    this.unselectAllDrawings();
+                }
+                let selector = this._getSprite(this.selectors, index);
+                if (!selector) {
+                    selector = this.selectorContainer.children.push(this.selectors.make());
+                    this.selectors.push(selector);
+                }
+                selector.show(0);
+                selector.set("userData", index);
+                $array.move(this._selected, index);
+                this._dispatchStockEvent("drawingselected", this.indexToDrawingId(index), index);
+                this.markDirty();
+            }
+        }
+    }
+    _unselectDrawing(index) {
+        const selector = this._getSprite(this.selectors, index);
+        if (selector) {
+            selector.hide(0);
+            $array.remove(this._selected, index);
+            this._dispatchStockEvent("drawingunselected", this.indexToDrawingId(index), index);
+        }
+    }
+    _updateSelectors() {
+        this.selectors.each((selector) => {
+            const index = selector.get("userData");
+            this._updateSelector(selector, index);
+        });
+    }
+    _updateSelector(selector, index) {
+        let l;
+        let r;
+        let t;
+        let b;
+        const selectorPadding = this.get("selectorPadding", 5);
+        $array.each(this.dataItems, (dataItem) => {
+            const dataContext = dataItem.dataContext;
+            if (dataContext) {
+                if (dataContext.index == index) {
+                    let point = dataItem.get("point");
+                    if (point) {
+                        if (l == null) {
+                            l = point.x;
+                        }
+                        l = Math.min(l, point.x);
+                        if (r == null) {
+                            r = point.x;
+                        }
+                        r = Math.max(r, point.x);
+                        if (t == null) {
+                            t = point.y;
+                        }
+                        t = Math.min(t, point.y);
+                        if (b == null) {
+                            b = point.y;
+                        }
+                        b = Math.max(b, point.y);
+                    }
+                }
+            }
+        });
+        if (r != null && l != null && t != null && b != null) {
+            selector.setAll({
+                width: r - l + selectorPadding * 2,
+                height: b - t + selectorPadding * 2,
+                x: l - selectorPadding,
+                y: t - selectorPadding
+            });
+        }
+    }
+    /**
+     *
+     * @param index returns drawingId
+     * @returns
+     */
+    indexToDrawingId(index) {
+        let id;
+        $array.eachContinue(this.dataItems, (dataItem) => {
+            const dataContext = dataItem.dataContext;
+            if (dataContext.index == index) {
+                id = dataContext.drawingId;
+                return false;
+            }
+            return true;
+        });
+        return id;
+    }
+    _getContext(index) {
+        let context;
+        $array.eachContinue(this.dataItems, (dataItem) => {
+            const dataContext = dataItem.dataContext;
+            if (dataContext.index == index && dataContext.sprite) {
+                context = dataContext;
+                return false;
+            }
+            return true;
+        });
+        return context;
+    }
+    getContext(id) {
+        const index = this.getIndex(id);
+        if (index != null) {
+            return this._getContext(index);
+        }
+    }
+    /**
+     * Unselects all currently selected drawings on this series.
+     *
+     * @since 5.9.0
+     */
+    unselectAllDrawings() {
+        const chart = this._getStockChart();
+        if (chart) {
+            chart.unselectDrawings();
+        }
+    }
+    /**
+     * Unselects all currently selected drawings of this series.
+     *
+     * @since 5.9.0
+     */
+    unselectDrawings() {
+        for (let i = this._selected.length - 1; i >= 0; i--) {
+            this._unselectDrawing(this._selected[i]);
+        }
+    }
+    /**
+     * Selects series' drawing by its ID.
+     *
+     * @param  id             Drawing ID
+     * @param  keepSelection  Keep existing selections
+     * @since 5.9.0
+     */
+    selectDrawing(id, keepSelection) {
+        const index = this.getIndex(id);
+        if (index != null) {
+            this._selectDrawing(index, keepSelection);
+        }
+    }
+    /**
+     * Unselects series' drawing by its ID.
+     *
+     * @param  id  Drawing ID
+     * @since 5.9.0
+     */
+    unselectDrawing(id) {
+        const index = this.getIndex(id);
+        if (index != null) {
+            this._unselectDrawing(index);
+        }
+    }
+    /**
+     * Deletes all currently selected drawings on this series.
+     *
+     * @since 5.9.0
+     */
+    deleteSelected() {
+        for (let i = this._selected.length - 1; i >= 0; i--) {
+            this.disposeIndex(this._selected[i]);
+        }
+    }
+    /**
+     * Deletes a series' drawing by ids ID.
+     *
+     * @param  id  Drawing ID
+     * @since 5.9.0
+     */
+    deleteDrawing(id) {
+        const index = this.getIndex(id);
+        if (index != null) {
+            this.disposeIndex(index);
+        }
+    }
+    /**
+     * Cancels current drawing
+     *
+     * @since 5.9.0
+     */
+    cancelDrawing() {
+        if (this._isDrawing) {
+            this._disposeIndex(this._index);
+        }
+        this.isDrawing(false);
+    }
 }
 Object.defineProperty(DrawingSeries, "className", {
     enumerable: true,