@tetacom/ng-components 1.0.13 → 1.0.14

package/fesm2020/tetacom-ng-components.mjs

@@ -9985,6 +9985,13 @@ var DispatchType;
     DispatchType["movePoint"] = "movePoint";
 })(DispatchType || (DispatchType = {}));
 
+var DragPointType;
+(function (DragPointType) {
+    DragPointType[DragPointType["x"] = 0] = "x";
+    DragPointType[DragPointType["y"] = 1] = "y";
+    DragPointType[DragPointType["xy"] = 2] = "xy";
+})(DragPointType || (DragPointType = {}));
+
 class LineDrawer {
     constructor() {
         this.dispatch = d3.dispatch(DispatchType.moveLine, DispatchType.movePoint);
@@ -9999,44 +10006,9 @@ class LineDrawer {
             .x((d) => scaleX(d.x))
             .y((d) => scaleY(d.y));
         const seriesIndex = options.series.findIndex((_) => _.id === series.id);
-        if (markerPoints?.length) {
-            const emit = (event, target) => {
-                this.dispatch.apply(DispatchType.movePoint, {
-                    target: series,
-                    point: {
-                        ...target,
-                    },
-                    event,
-                });
-            };
-            context
-                .selectAll('circle')
-                .data(markerPoints)
-                .enter()
-                .append('circle')
-                .attr('class', 'draggable-marker')
-                .attr('r', (d) => d.marker?.style?.radius || 5)
-                .attr('cx', function (d) {
-                return scaleX(d.x);
-            })
-                .attr('cy', function (d) {
-                return scaleY(d.y);
-            })
-                .style('cursor', 'pointer')
-                .style('fill', (d) => d.marker?.style?.color || 'red')
-                .attr('stroke', (d) => d.marker?.style?.stroke || 'none')
-                .attr('stroke-width', (d) => d.marker?.style?.strokeWidth || 0);
-            context.selectAll('.draggable-marker').call(d3.drag().on('drag start end', function dragged(event, d) {
-                d.x = scaleX.invert(event.sourceEvent?.offsetX);
-                d.y = scaleY.invert(event.sourceEvent?.offsetY);
-                d3.select(this).attr('cx', scaleX(d.x)).attr('cy', scaleY(d.y));
-                context.select('path').attr('d', path);
-                emit(event, d);
-            }));
-        }
         context
             .append('path')
-            .attr('class', (d) => series?.drag.enable ? 'draggable' : null)
+            .attr('class', (d) => series?.drag.enable ? 'draggable' : `series-${seriesIndex}`)
             .attr('data-draggable-id', seriesIndex)
             .attr('fill', 'none')
             .attr('stroke', series.color)
@@ -10122,6 +10094,50 @@ class LineDrawer {
         if (series?.drag?.extendLine && points?.length) {
             drawExtendedLine();
         }
+        if (markerPoints?.length) {
+            const emit = (event, target) => {
+                this.dispatch.apply(DispatchType.movePoint, {
+                    target: series,
+                    point: {
+                        ...target,
+                    },
+                    event,
+                });
+            };
+            context
+                .selectAll(`draggable-marker-${seriesIndex}`)
+                .data(markerPoints)
+                .enter()
+                .append('circle')
+                .attr('class', `draggable-marker-${seriesIndex}`)
+                .attr('r', (d) => d.marker?.style?.radius || 5)
+                .attr('cx', function (d) {
+                return scaleX(d.x);
+            })
+                .attr('cy', function (d) {
+                return scaleY(d.y);
+            })
+                .style('cursor', 'pointer')
+                .style('fill', (d) => d.marker?.style?.color || 'red')
+                .attr('stroke', (d) => d.marker?.style?.stroke || 'none')
+                .attr('stroke-width', (d) => d.marker?.style?.strokeWidth || 0);
+            context.selectAll(`.draggable-marker-${seriesIndex}`).call(d3.drag().on('drag start end', function dragged(event, d) {
+                const node = d3.select(this);
+                if (event.type === 'start') {
+                    node.raise().classed('active', true);
+                }
+                if (d.marker?.dragType === DragPointType.x) {
+                    d.x = scaleX.invert(event.sourceEvent?.offsetX);
+                    node.attr('cx', scaleX(d.x));
+                }
+                if (d.marker?.dragType === DragPointType.y) {
+                    d.y = scaleY.invert(event.sourceEvent?.offsetY);
+                    node.attr('cy', scaleY(d.y));
+                }
+                context.select(`.series-${seriesIndex}`).attr('d', path);
+                emit(event, d);
+            }));
+        }
     }
 }
 
@@ -10631,11 +10647,11 @@ class TetaChart {
         this.visibleChartWindowWidth = this.caluclateChartWidth();
     }
     _redraw() {
+        this.drawPlotBands();
+        this.drawPlotLines();
         this.drawChart();
         this.drawAxis();
         this.drawGridLines();
-        this.drawPlotBands();
-        this.drawPlotLines();
         this.drawAnnotations();
     }
     addZoom() {