@oliasoft-open-source/charts-library 4.7.0-beta-7 → 4.7.0-beta-9

package/dist/index.js

@@ -22677,6 +22677,7 @@ const chartMinorGridlinesPlugin = {
   }
 };
 const BORDER_WIDTH = {
+  ZERO: 0,
   INITIAL: 2,
   HOVERED: 6,
   POINT_HOVERED: 8
@@ -22936,10 +22937,15 @@ const initialState = ({ options, persistenceId }) => {
   const {
     additionalAxesOptions: { range: customAxesRange = {} },
     axes,
-    chartOptions: { enableZoom, enablePan, showPoints, showLine },
+    chartOptions: {
+      enableZoom,
+      enablePan,
+      showPoints,
+      showLine,
+      enableDragAnnotation
+    },
     legend: { display },
-    dragData,
-    annotations: { enableDragAnnotation }
+    dragData
   } = options;
   const getStateAxesByType = (axisType, customAxesRange2) => {
     var _a2, _b2, _c2, _d2, _e2;
@@ -22990,7 +22996,7 @@ const initialState = ({ options, persistenceId }) => {
     enableDragAnnotation: enableDragAnnotationStorage
   } = getChartStateFromStorage(persistenceId) || {};
   return {
-    zoomEnabled: zoomEnabled ?? enableZoom,
+    zoomEnabled: enableDragAnnotation ?? enableDragAnnotationStorage ? false : zoomEnabled ?? enableZoom,
     panEnabled: panEnabled ?? enablePan,
     pointsEnabled: pointsEnabled ?? showPoints,
     lineEnabled: lineEnabled ?? showLine,
@@ -22998,7 +23004,7 @@ const initialState = ({ options, persistenceId }) => {
     axes: stateAxes,
     showTable: false,
     enableDragPoints: (dragData == null ? void 0 : dragData.enableDragData) && enableDragPoints,
-    enableDragAnnotation: enableDragAnnotation && enableDragAnnotationStorage,
+    enableDragAnnotation: enableDragAnnotation ?? enableDragAnnotationStorage,
     initialAxesRanges: []
   };
 };
@@ -24981,9 +24987,10 @@ const defaultLegend$3 = (legend2) => ({
 });
 const defaultChartOptions$3 = (options) => ({
   showPoints: (options == null ? void 0 : options.showPoints) ?? true,
+  showLine: (options == null ? void 0 : options.showLine) ?? true,
   enableZoom: (options == null ? void 0 : options.enableZoom) ?? true,
   enablePan: (options == null ? void 0 : options.enablePan) ?? false,
-  showLine: (options == null ? void 0 : options.showLine) ?? true,
+  enableDragAnnotation: (options == null ? void 0 : options.enableDragAnnotation) ?? false,
   closeOnOutsideClick: (options == null ? void 0 : options.closeOnOutsideClick) ?? false
 });
 const defaultInteractions$3 = (interactions) => ({
@@ -25800,7 +25807,8 @@ const generateAnnotations = (annotationsData) => {
       onDrag,
       onDragEnd,
       pointStyle: (ann == null ? void 0 : ann.pointStyle) ?? PointStyle.Circle,
-      resizable: (ann == null ? void 0 : ann.resizable) ?? false
+      resizable: (ann == null ? void 0 : ann.resizable) ?? true,
+      displayDragCoordinates: (ann == null ? void 0 : ann.displayDragCoordinates) ?? true
     };
   });
 };
@@ -26483,6 +26491,14 @@ const updateAnnotationPositionWithinBounds = (axis, newPosition, activeAnnotatio
     }
   }
 };
+const setAnnotationBorderWidth = (chart2, annotationId, borderWidth) => {
+  var _a2, _b2, _c2;
+  if (!annotationId) return;
+  const annotations = (_c2 = (_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.plugins) == null ? void 0 : _b2.annotation) == null ? void 0 : _c2.annotations;
+  if (annotations && annotationId && annotations[annotationId]) {
+    annotations[annotationId].borderWidth = borderWidth;
+  }
+};
 const handleAnnotationMouseDown = (event, canvas2, scales, annotations, setDraggingState, hoveredAnnotationId) => {
   const { x: x2, y: y2 } = getMousePositionInCoordinates(event, canvas2, scales);
   const annotation2 = hoveredAnnotationId ? annotations == null ? void 0 : annotations[hoveredAnnotationId] : null;
@@ -26501,6 +26517,8 @@ const handleAnnotationMouseDown = (event, canvas2, scales, annotations, setDragg
 const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAnnotation, dragStartX, dragStartY, chart2) => {
   if (isDragging2 && activeAnnotation) {
     canvas2.style.cursor = CursorStyle.Move;
+    const annotationId = activeAnnotation == null ? void 0 : activeAnnotation.id;
+    setAnnotationBorderWidth(chart2, annotationId, BORDER_WIDTH.HOVERED);
     const dragAxis = (activeAnnotation == null ? void 0 : activeAnnotation.dragAxis) ?? DragAxis.Both;
     const { x: x2, y: y2 } = getMousePositionInCoordinates(event, canvas2, scales);
     const metrics = calculateAnnotationMetricsInValues(activeAnnotation);
@@ -26539,24 +26557,28 @@ const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAn
       chart2.draw();
       ctx.font = DEFAULT_FONT_FAMILY;
       ctx.fillStyle = "black";
-      let labelX = xValue - 45;
-      let labelY = yValue - 20;
-      const labelText = `X: ${round$2(centerX, 2)}, Y: ${round$2(centerY, 2)}`;
-      const labelHeight = 14;
-      if (labelY - labelHeight < 0) {
-        labelY = yValue + labelHeight + 15;
-      }
-      if (labelY > height) {
-        labelY = height - 7;
+      if (activeAnnotation == null ? void 0 : activeAnnotation.displayDragCoordinates) {
+        let labelX = xValue - 45;
+        let labelY = yValue - 20;
+        const labelText = `X: ${round$2(centerX, 2)}, Y: ${round$2(centerY, 2)}`;
+        const labelHeight = 14;
+        if (labelY - labelHeight < 0) {
+          labelY = yValue + labelHeight + 15;
+        }
+        if (labelY > height) {
+          labelY = height - 7;
+        }
+        ctx.fillText(labelText, labelX, labelY);
+        ctx.restore();
       }
-      ctx.fillText(labelText, labelX, labelY);
-      ctx.restore();
     }
   }
 };
 const handleAnnotationMouseUp = (isDragging2, activeAnnotation, chart2, setDraggingState) => {
   if (isDragging2) {
     if (activeAnnotation) {
+      const annotationId = activeAnnotation == null ? void 0 : activeAnnotation.id;
+      setAnnotationBorderWidth(chart2, annotationId, BORDER_WIDTH.ZERO);
       const { centerX = -1, centerY = -1 } = calculateAnnotationMetricsInValues(activeAnnotation) ?? {};
       if (activeAnnotation == null ? void 0 : activeAnnotation.onDragEnd) {
         activeAnnotation.onDragEnd(
@@ -26633,7 +26655,7 @@ const annotationDraggerPlugin = {
     }
   },
   afterUpdate(chart2) {
-    var _a2, _b2, _c2, _d2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
     const { canvas: canvas2, scales, hoveredAnnotationId } = chart2;
     const pluginOptions = ((_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.plugins) == null ? void 0 : _b2.annotationDraggerPlugin) || {
       enabled: false
@@ -26641,6 +26663,23 @@ const annotationDraggerPlugin = {
     const typedScales = { x: scales.x, y: scales.y };
     let annotations = ((_d2 = (_c2 = chart2.options.plugins) == null ? void 0 : _c2.annotation) == null ? void 0 : _d2.annotations) ?? {};
     if (!chart2 && !annotations) return;
+    if (pluginOptions.enabled) {
+      if ((_f2 = (_e2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _e2.plugins) == null ? void 0 : _f2.tooltip) {
+        chart2.options.plugins.tooltip.enabled = false;
+      }
+      chart2.options.hover = {
+        mode: void 0,
+        intersect: false
+      };
+    } else {
+      if ((_h2 = (_g2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _g2.plugins) == null ? void 0 : _h2.tooltip) {
+        chart2.options.plugins.tooltip.enabled = true;
+      }
+      chart2.options.hover = {
+        mode: ChartHoverMode.Nearest,
+        intersect: true
+      };
+    }
     let isDragging2 = false;
     let dragStartX, dragStartY;
     let activeAnnotation = null;